/**
 * d-hub Mobile & PWA Layer
 * File: css/dhub-mobile.css — loaded after dhub-modern.css
 *
 * Installed-app polish, safe areas, bottom tab bar, mobile modals.
 * Desktop layout is unchanged.
 */

/* ============================================
   SAFE AREAS (notch / home indicator, viewport-fit=cover)
   ============================================ */
:root {
    --bottom-nav-height: 60px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

body > .navbar.sticky-top {
    padding-top: var(--safe-top);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

/* ============================================
   TOUCH / STANDALONE POLISH
   ============================================ */
/* No 300ms double-tap-zoom delay on interactive elements */
html { -webkit-tap-highlight-color: transparent; }
a, button, input, select, textarea, label, summary,
[role="button"], .btn, .dropdown-item, .page-link {
    touch-action: manipulation;
}

/* In-app back button: only in the installed app (no browser chrome) */
.dhub-back-btn { display: none; }
.dhub-standalone .dhub-back-btn { display: inline-flex; align-items: center; }
@media (display-mode: standalone) {
    .dhub-back-btn { display: inline-flex; align-items: center; }
}
.dhub-back-btn,
#sidebarToggle {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
}

/* ============================================
   UPDATE TOAST
   ============================================ */
.dhub-update-toast {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 1090;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 0.75rem 0.625rem 1rem;
    border-radius: 0.75rem;
    background: var(--gray-800, #1e293b);
    color: #fff;
    font-size: 0.9rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: calc(100vw - 2rem);
}
.dhub-update-toast .btn { min-height: 36px; }

/* ============================================
   INSTALL INSTRUCTIONS (iOS)
   ============================================ */
.dhub-install-steps { padding-left: 1.25rem; margin-bottom: 1rem; }
.dhub-install-steps li { margin-bottom: 0.75rem; line-height: 1.5; }

/* ============================================
   BOTTOM TAB BAR (≤ 768px)
   ============================================ */
.dhub-bottom-nav { display: none; }

@media (max-width: 768px) {
    .dhub-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1035; /* above sidebar (1030), below navbar dropdowns/modals */
        display: flex;
        align-items: stretch;
        background: #fff;
        border-top: 1px solid var(--gray-200, #e2e8f0);
        box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.06);
        padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
    }

    .dhub-bottom-nav-item {
        flex: 1 1 0;
        min-width: 44px;
        min-height: var(--bottom-nav-height);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        padding: 0.4rem 0.25rem;
        border: 0;
        background: transparent;
        color: var(--gray-500, #64748b);
        font-size: 0.7rem;
        font-weight: 600;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .dhub-bottom-nav-item i { font-size: 1.15rem; }
    .dhub-bottom-nav-item.active,
    .dhub-bottom-nav-item[aria-expanded="true"] { color: var(--primary, #2563eb); }
    .dhub-bottom-nav-item:focus-visible { outline: 2px solid var(--primary, #2563eb); outline-offset: -4px; }

    /* Keep page content and footer clear of the bar */
    .dhub-has-bottom-nav .dhub-footer {
        padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 0.75rem);
    }
    .dhub-has-bottom-nav .dhub-sidebar {
        height: auto;
        bottom: calc(var(--bottom-nav-height) + var(--safe-bottom));
    }
    .dhub-has-bottom-nav .dhub-update-toast {
        bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 0.75rem);
    }

    /* Demo tenant (layouts/demo_banner.php): stack the banner on top of the
       tab bar instead of covering it, and lift toasts above both. */
    .dhub-has-bottom-nav .dhub-demo-banner {
        bottom: calc(var(--bottom-nav-height) + var(--safe-bottom));
    }
    .dhub-has-bottom-nav .dhub-demo-toasts {
        bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 44px);
    }
    .dhub-has-bottom-nav:has(.dhub-demo-banner) .dhub-update-toast {
        bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 44px);
    }
}

/* ============================================
   MOBILE TABLES & MODALS (≤ 768px)
   ============================================ */
@media (max-width: 768px) {
    /* DataTables responsive needs the table at full width */
    table.dataTable { width: 100% !important; }
    .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; }
    .dataTables_wrapper .dataTables_filter label { width: 100%; }

    /* Full-screen modals */
    .modal-dialog {
        max-width: none;
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .modal-dialog > form { height: 100%; }
    .modal-content {
        min-height: 100%;
        border: 0;
        border-radius: 0;
        padding-top: var(--safe-top);
        padding-bottom: var(--safe-bottom);
    }
    .modal-body { overflow-y: auto; }
    .modal-footer .btn { min-height: 44px; }
}

/* ============================================
   LEGACY MODAL × (BS3 .close markup on BS5)
   ============================================ */
.modal-header .close {
    order: 2;
    margin-left: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--gray-500, #64748b);
    opacity: 1;
    cursor: pointer;
}
.modal-header .close:hover,
.modal-header .close:focus-visible { color: var(--gray-800, #1e293b); }
.modal-header .btn-close { min-width: 44px; min-height: 44px; }