/*
 * NidhiBook mobile layer — Android-app-style layout for phones (< 768px)
 * and light adjustments for tablets (768–991.98px).
 *
 * DESKTOP IS UNTOUCHED: every rule is scoped inside a max-width media query.
 * Companion behaviour lives in assets/js/nidhi-mobile.js (NidhiMobile).
 * Dark theme: overrides keyed on html[data-theme="dark"] using --dk-* tokens
 * from nidhi-theme.css.
 */

:root {
    --nm-space-1: 4px;
    --nm-space-2: 8px;
    --nm-space-3: 12px;
    --nm-space-4: 16px;
    --nm-tap: 44px;             /* minimum touch target */
    --nm-appbar-h: 52px;
    --nm-bottomnav-h: 56px;
    --nm-radius: 12px;
    --nm-radius-sm: 8px;
    --nm-font: 0.9rem;
    --nm-font-sm: 0.75rem;
    --nm-surface: #ffffff;
    --nm-bg: #f1f5f9;
    --nm-border: #dbe3ee;
    --nm-text: #334155;
    --nm-muted: #64748b;
    --nm-primary: #2563eb;
    --nm-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
    --nm-shadow-up: 0 -2px 12px rgba(15, 23, 42, 0.10);
}

html[data-theme="dark"] {
    --nm-surface: var(--dk-surface, #1e293b);
    --nm-bg: var(--dk-bg, #0f172a);
    --nm-border: var(--dk-border, #334155);
    --nm-text: var(--dk-text, #e2e8f0);
    --nm-muted: var(--dk-muted, #94a3b8);
    --nm-primary: var(--dk-primary, #3b82f6);
    --nm-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    --nm-shadow-up: 0 -2px 12px rgba(0, 0, 0, 0.40);
}

/* Visibility helpers (inert on desktop). */
.nidhi-mobile-only { display: none !important; }

/* ==================================================================== */
/* PHONE (< 768px)                                                      */
/* ==================================================================== */
@media (max-width: 767.98px) {

    .nidhi-mobile-only { display: inline-flex !important; }
    .nidhi-desktop-only { display: none !important; }

    /* ---------------------------------------------------------------- */
    /* Top app bar (reshapes the existing header markup)                 */
    /* ---------------------------------------------------------------- */

    .app-header.header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1024;
        min-height: var(--nm-appbar-h);
        height: var(--nm-appbar-h);
        padding: 0;
        background: var(--nm-surface);
        border-bottom: 1px solid var(--nm-border);
        box-shadow: var(--nm-shadow);
        display: flex;
        align-items: center;
    }

    /* Push page content below the fixed bar. */
    .page-main > .do-not-printme:first-child { height: var(--nm-appbar-h); }

    .app-header.header .container-fluid { padding: 0 var(--nm-space-2); }
    .app-header.header > .container-fluid > .d-flex,
    .app-header.header .d-flex { align-items: center; }

    /* Hamburger: big tap target, placed first. */
    .app-header .app-sidebar__toggle {
        order: -1;
        width: var(--nm-tap);
        height: var(--nm-tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        color: var(--nm-text);
    }

    /* Compact brand: avatar/logo + NidhiBook badge, left-aligned. */
    .app-header .header-brand {
        margin: 0;
        min-width: 0 !important;
        gap: 6px;
    }
    .app-header .header-brand-img.main-logo {
        display: none;
    }
    .app-header .header-brand-img.company-logo-avatar {
        display: inline-block;
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
    }
    .app-header .header-brand .nidhi-brand-badge {
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .header-rightmenu { align-items: center; }
    .header-rightmenu .nav-link.icon {
        width: var(--nm-tap);
        height: var(--nm-tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
    }

    /* Company chip (mobile-only element rendered by view_design.php). */
    .nidhi-company-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        max-width: 34vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-left: var(--nm-space-2);
        padding: 3px 8px;
        border: 1px solid var(--nm-border);
        border-radius: 999px;
        background: var(--nm-bg);
        color: var(--nm-muted);
        font-size: var(--nm-font-sm);
        font-weight: 700;
        letter-spacing: 0.3px;
    }

    /* ---------------------------------------------------------------- */
    /* Drawer (existing off-canvas sidebar) polish                       */
    /* ---------------------------------------------------------------- */

    .app-sidebar {
        z-index: 1040;
        top: 0 !important;
        height: 100vh;
        box-shadow: 8px 0 24px rgba(15, 23, 42, 0.25);
        transition: left 0.2s ease;
    }

    .app-sidebar__overlay { z-index: 1035; }

    .app.sidenav-toggled .app-sidebar__overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
    }

    .nidhi-sidebar .side-menu__item {
        min-height: var(--nm-tap);
        align-items: center;
    }

    /* ---------------------------------------------------------------- */
    /* Content container, footer, spacing                                */
    /* ---------------------------------------------------------------- */

    .app-content.toggle-content {
        margin-left: 0 !important;
        margin-top: 0 !important;
        padding: 0 var(--nm-space-2);
        /* bottom nav + safe area instead of the desktop footer */
        margin-bottom: calc(var(--nm-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 8px) !important;
    }

    .app-content > br { display: none; }

    #app.mt-4 { margin-top: var(--nm-space-2) !important; }

    /* The desktop footer/status bar is replaced by the app bar chip +
       bottom navigation on phones. */
    .app-footer-bar { display: none !important; }

    #back-to-top { display: none !important; }

    /* ---------------------------------------------------------------- */
    /* Bottom navigation (built by nidhi-mobile.js from the sidebar)     */
    /* ---------------------------------------------------------------- */

    .nidhi-bottomnav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1024;
        display: flex;
        align-items: stretch;
        height: calc(var(--nm-bottomnav-h) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--nm-surface);
        border-top: 1px solid var(--nm-border);
        box-shadow: var(--nm-shadow-up);
    }

    .nidhi-bottomnav.is-hidden { display: none; }

    .nidhi-bottomnav__item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 4px 2px;
        border: 0;
        background: none;
        color: var(--nm-muted);
        font-size: 0.62rem;
        font-weight: 600;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .nidhi-bottomnav__item i {
        font-size: 1.05rem;
        line-height: 1;
    }

    .nidhi-bottomnav__item span {
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .nidhi-bottomnav__item.is-active,
    .nidhi-bottomnav__item:hover,
    .nidhi-bottomnav__item:focus {
        color: var(--nm-primary);
        text-decoration: none;
    }

    /* ---------------------------------------------------------------- */
    /* Typography, buttons, tap targets                                   */
    /* ---------------------------------------------------------------- */

    #app { font-size: var(--nm-font); }

    #app .btn,
    .modal .btn {
        min-height: 40px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    #app .btn-sm { min-height: 38px; }

    /* Primary confirm/save actions become full-width and easy to reach.
       (Scoped to forms/tab panes so small utility buttons stay small.) */
    #app form .btn.float-right,
    #app form .btn.float-left,
    #app .tab-pane .btn-success.float-right,
    #app .tab-pane .bg-success.btn.float-right,
    #app .btn.btn-primary.float-right,
    #app .btn.btn-success.float-right {
        display: block;
        float: none !important;
        width: 100%;
        margin: var(--nm-space-2) 0 !important;
        font-size: 1rem;
    }

    /* Hidden buttons must stay hidden even when promoted to block. */
    #app .btn.d-none { display: none !important; }

    /* Tabs (New / List headers on CRUD pages) scroll horizontally. */
    .tabs-menu ul.nav,
    .tabs-menu ul.panel-tabs,
    ul.nav.panel-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tabs-menu ul.nav::-webkit-scrollbar { display: none; }

    .tabs-menu ul.nav li a,
    ul.nav.panel-tabs li a {
        white-space: nowrap;
        min-height: var(--nm-tap);
        display: inline-flex;
        align-items: center;
    }

    /* ---------------------------------------------------------------- */
    /* Forms                                                              */
    /* ---------------------------------------------------------------- */

    /* 16px prevents iOS focus zoom; height gives comfortable tap size. */
    #app .form-control,
    .modal .form-control {
        font-size: 16px;
        min-height: var(--nm-tap);
    }

    #app select.form-control { min-height: var(--nm-tap); }

    #app textarea.form-control { min-height: 72px; }

    /* Stack input-group addon labels above their field. */
    #app .input-group,
    .modal .input-group {
        display: flex;
        flex-wrap: wrap;
    }

    #app .input-group > .input-group-addon,
    .modal .input-group > .input-group-addon {
        flex: 0 0 100%;
        width: 100%;
        border: 0;
        background: transparent;
        padding: 0 0 4px 2px;
        font-size: var(--nm-font-sm);
        font-weight: 700;
        text-align: left;
    }

    #app .input-group > .form-control,
    .modal .input-group > .form-control {
        flex: 1 1 auto;
        width: 1%;
        border-radius: var(--nm-radius-sm);
    }

    /* Trailing addon buttons (search / + icons) stay beside the field. */
    #app .input-group > .input-group-addon ~ .input-group-addon,
    .modal .input-group > .input-group-addon ~ .input-group-addon {
        flex: 0 0 auto;
        width: auto;
        min-width: var(--nm-tap);
        min-height: var(--nm-tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--nm-border);
        border-radius: var(--nm-radius-sm);
        margin-left: var(--nm-space-1);
        background: var(--nm-bg);
        padding: 0 10px;
    }

    /* Validation feedback near fields. */
    #app .form-control.is-invalid { border-color: #dc2626; }

    /* ---------------------------------------------------------------- */
    /* Select2 on touch                                                   */
    /* ---------------------------------------------------------------- */

    /* Beats the page-level `width: 500px !important` via the html prefix. */
    html body .select2-container .select2-dropdown {
        width: min(calc(100vw - 16px), 500px) !important;
        max-width: calc(100vw - 16px) !important;
    }

    .select2-container .select2-selection--single {
        min-height: var(--nm-tap) !important;
        display: flex;
        align-items: center;
    }

    .select2-results__option {
        min-height: 42px;
        display: flex;
        align-items: center;
        padding: 8px 12px !important;
    }

    .select2-search__field { font-size: 16px !important; min-height: 40px; }

    /* multiple-select plugin (report/letter filters): fit the viewport. */
    .ms-drop {
        max-width: calc(100vw - 24px) !important;
        overflow-x: hidden;
    }

    .ms-drop li { min-height: 38px; }

    /* ---------------------------------------------------------------- */
    /* CRUD list tables → stacked cards                                   */
    /* (tables tagged .nidhi-card-table + data-label by nidhi-mobile.js)  */
    /* ---------------------------------------------------------------- */

    #app table.nidhi-card-table,
    .modal table.nidhi-card-table { display: block; width: 100%; }

    table.nidhi-card-table > thead { display: none; }

    table.nidhi-card-table > tbody { display: block; width: 100%; }

    table.nidhi-card-table > tbody > tr {
        display: block;
        margin: 0 0 var(--nm-space-3);
        padding: var(--nm-space-3);
        background: var(--nm-surface);
        border: 1px solid var(--nm-border);
        border-radius: var(--nm-radius);
        box-shadow: var(--nm-shadow);
    }

    table.nidhi-card-table > tbody > tr > td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--nm-space-3);
        padding: 5px 0 !important;
        border: 0 !important;
        text-align: right;
        word-break: break-word;
        min-width: 0;
        white-space: normal !important;
    }

    table.nidhi-card-table > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        max-width: 42%;
        text-align: left;
        font-weight: 700;
        font-size: var(--nm-font-sm);
        color: var(--nm-muted);
    }

    table.nidhi-card-table > tbody > tr > td[data-label=""]::before,
    table.nidhi-card-table > tbody > tr > td:not([data-label])::before {
        display: none;
    }

    /* Empty cells collapse instead of leaving blank rows. */
    table.nidhi-card-table > tbody > tr > td.nidhi-card-empty { display: none; }

    /* Action cell: buttons in a tappable row, label hidden. */
    table.nidhi-card-table > tbody > tr > td.nidhi-card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--nm-space-2);
        justify-content: flex-end;
        border-top: 1px dashed var(--nm-border) !important;
        margin-top: var(--nm-space-2);
        padding-top: var(--nm-space-2) !important;
    }

    table.nidhi-card-table > tbody > tr > td.nidhi-card-actions::before { display: none; }

    table.nidhi-card-table > tbody > tr > td.nidhi-card-actions .btn {
        flex: 1 1 auto;
        min-height: 40px;
        margin: 0;
    }

    /* Card-table wrappers stop constraining height/scroll. */
    #app .table-responsive.nidhi-cardized {
        overflow: visible;
        max-height: none !important;
        min-height: 0 !important;
    }

    /* ---------------------------------------------------------------- */
    /* Editable entry grids (tables with inputs) — controlled scrolling   */
    /* (tagged .nidhi-grid-table by nidhi-mobile.js)                      */
    /* ---------------------------------------------------------------- */

    .nidhi-grid-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.nidhi-grid-table input.form-control,
    table.nidhi-grid-table select.form-control {
        min-width: 84px;
        font-size: 16px;
    }

    table.nidhi-grid-table th:first-child,
    table.nidhi-grid-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--nm-surface);
    }

    /* ---------------------------------------------------------------- */
    /* Modals → bottom sheets                                             */
    /* ---------------------------------------------------------------- */

    .modal .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        margin: 0;
        width: 100%;
        max-width: 100% !important;
        transform: translateY(8%);
    }

    .modal.show .modal-dialog { transform: translateY(0); }

    /* The whole .modal-content scrolls, with header/footer pinned via
       position:sticky. This is deliberately NOT flex-based: several pages
       (e.g. companies) wrap .modal-body in a <form>, which breaks flex
       height propagation and would leave the body unscrollable. Scrolling
       the content itself works regardless of intermediate wrappers. */
    .modal .modal-content {
        width: 100%;
        max-height: calc(94vh - env(safe-area-inset-top, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--nm-radius) var(--nm-radius) 0 0;
        border-bottom: 0;
    }

    .modal .modal-header {
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--nm-surface);
        padding: var(--nm-space-3) var(--nm-space-4);
    }

    /* Grab handle for the sheet look. */
    .modal .modal-header::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 44px;
        height: 4px;
        border-radius: 999px;
        background: var(--nm-border);
    }

    .modal .modal-header .close {
        min-width: var(--nm-tap);
        min-height: var(--nm-tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: -8px -8px -8px auto;
        font-size: 1.5rem;
    }

    .modal .modal-body {
        padding: var(--nm-space-3) var(--nm-space-4);
    }

    .modal .modal-footer {
        position: sticky;
        bottom: 0;
        z-index: 3;
        background: var(--nm-surface);
    }

    /* ---------------------------------------------------------------- */
    /* Pagination, filters, misc                                          */
    /* ---------------------------------------------------------------- */

    #app .pagination { flex-wrap: wrap; gap: 4px; }

    #app .pagination .page-link,
    #app #pagination a,
    #app #pagination button {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #app #pagination { position: static !important; }

    /* Fixed-height list wrappers become natural-height on phones. */
    #app .nidhi-min-height-75,
    #app .nidhi-min-height-90 {
        min-height: 0 !important;
        max-height: none !important;
    }

    /* Dashboard fit and finish (cards already stack via col-12). */
    .dashboard-actions {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: var(--nm-space-2);
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .dashboard-actions::-webkit-scrollbar { display: none; }

    .dashboard-actions .dashboard-action {
        flex: 0 0 auto;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* Module cards: two columns on phones. */
    .module-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Companies page container breathing room. */
    .companies-page-container { padding-left: 2px; padding-right: 2px; }

    /* Watermark backdrop off on phones (perf + clarity). */
    .image-container::after { display: none; }

    /* Login page: 16px inputs prevent focus zoom; card hugs small screens. */
    .form-control-modern { font-size: 16px; }
    .login-card { padding: 26px 20px; border-radius: 18px; }
    .login-page-wrapper { padding: 12px; }
}

/* ==================================================================== */
/* TABLET (768–991.98px) — light touch                                   */
/* ==================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {

    .app-content.toggle-content { padding-left: var(--nm-space-3); padding-right: var(--nm-space-3); }

    #app .btn { min-height: 38px; }

    #app .form-control { min-height: 40px; }

    html body .select2-container .select2-dropdown {
        width: min(calc(100vw - 32px), 500px) !important;
    }

    .modal .modal-dialog { max-width: min(680px, calc(100vw - 32px)); }
}

/* ==================================================================== */
/* Print: never show mobile chrome                                       */
/* ==================================================================== */
@media print {
    .nidhi-bottomnav,
    .nidhi-company-chip,
    .nidhi-mobile-only { display: none !important; }
}