/* ============================================================
   eLife — Mobile shell (Phase 2)
   Drawer sidebar + backdrop, header reflow, touch targets.
   Loaded after theme.css. Mobile-first overrides only.
   ============================================================ */

/* ---------- Drawer backdrop (all sizes; only shown on mobile when open) ---------- */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 998;             /* under sidebar (999), over content */
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

/* ============================================================
   <= 768px  — phones / small tablets
   ============================================================ */
@media (max-width: 768px) {

    /* safety net: never allow the page itself to scroll sideways */
    html, body { overflow-x: hidden; max-width: 100%; }
    .page-content, .main-container, .table-container { max-width: 100%; }

    /* Drawer slides over the content, with a shadow */
    .page-wrapper .sidebar-wrapper {
        z-index: 999;
        box-shadow: 2px 0 22px rgba(0,0,0,.22);
        width: 260px;
        left: -280px;
    }
    .page-wrapper.toggled .sidebar-wrapper { left: 0; }

    /* Show the backdrop when the drawer is open */
    .page-wrapper.toggled .sidebar-overlay {
        opacity: 1;
        visibility: visible;
    }

    /* Don't shove the header when the drawer opens (template did padding-left:245px) */
    .page-wrapper.toggled .header { padding-left: 1rem !important; }

    /* Header: compact + bring back the page title (template hid it on mobile) */
    .header {
        padding: .4rem .85rem 0 .85rem;
        min-height: 60px;
    }
    .header .toggle-btns h4 {
        display: block !important;
        font-size: 1.05rem;
        margin-left: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 48vw;
    }
    /* keep username hidden (avatar is enough), template already hides it */
    .header .user-settings > a span { display: none !important; }
    .header .user-avatar { width: 38px; height: 38px; }

    /* Hamburger: a touch bigger for thumbs */
    .header .toggle-btns #toggle-sidebar {
        width: 42px; height: 42px;
    }

    /* Content breathing room */
    .main-container { padding: .9rem .7rem 0 .7rem; }
    .table-container { padding: .5rem; }

    /* Bigger tap targets in the menu */
    .page-wrapper .sidebar-wrapper .sidebar-menu ul li a {
        padding-top: 13px;
        padding-bottom: 13px;
        margin: 2px 8px;
    }

    /* Buttons easier to tap */
    .btn { min-height: 40px; }
    .btn-sm { min-height: 34px; }

    /* Modals: near full-width sheets */
    .modal-dialog {
        margin: .5rem;
        max-width: calc(100% - 1rem);
    }

    /* Welcome heading + sponsor chip stack nicely */
    .sponser_id { display: inline-block; margin-top: 8px; }

    /* DataTables top controls stack instead of crowding */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none !important;
        text-align: left !important;
        margin-bottom: 8px;
    }
    .dataTables_wrapper .dataTables_filter input { width: 60vw; max-width: 320px; }
}

/* ============================================================
   Stacked-card tables (Phase 3)  —  <= 768px
   Each row becomes a card; each cell shows "Label : value".
   Applies to the server-side DataTables (.custom-table) and any
   table tagged .stack-card. A small JS helper fills data-label
   from the column headers on every draw.
   ============================================================ */
@media (max-width: 768px) {

    table.custom-table,
    table.stack-card {
        border: 0 !important;
        background: transparent !important;
        /* DataTables sets an inline pixel width on the table — kill it so the
           stacked cards never force horizontal scrolling */
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* the scroll wrappers around the table must not scroll sideways on mobile */
    .table-responsive { overflow-x: hidden !important; }
    .dataTables_wrapper,
    .dataTables_scroll,
    .dataTables_scrollBody,
    .dataTables_scrollHead { width: 100% !important; overflow: visible !important; }
    .dataTables_scrollHead { display: none !important; }   /* duplicate header strip */

    /* hide the header row — labels move into each cell */
    table.custom-table thead,
    table.stack-card thead {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0,0,0,0);
        border: 0;
    }

    table.custom-table tbody,
    table.custom-table tr,
    table.custom-table td,
    table.stack-card tbody,
    table.stack-card tr,
    table.stack-card td {
        display: block;
        width: 100%;
    }

    /* each row = a card */
    table.custom-table > tbody > tr,
    table.stack-card > tbody > tr {
        background: #fff !important;
        border: 1px solid var(--border) !important;
        border-radius: 10px;
        margin: 0 0 10px 0;
        padding: 2px 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
    }
    table.custom-table > tbody > tr:hover,
    table.stack-card > tbody > tr:hover { background: #fff !important; }

    /* each cell = a compact label:value row */
    table.custom-table > tbody > td,
    table.custom-table > tbody > tr > td,
    table.stack-card > tbody > tr > td {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        text-align: right !important;
        border: 0 !important;
        border-bottom: 1px solid #f3f4f6 !important;
        padding: 6px 0 !important;
        min-height: 0 !important;
        font-size: 13px;
        white-space: normal;
        word-break: break-word;
    }
    table.custom-table > tbody > tr > td:last-child,
    table.stack-card > tbody > tr > td:last-child {
        border-bottom: 0 !important;
    }

    /* the label, pulled from the column header via data-label */
    table.custom-table > tbody > tr > td::before,
    table.stack-card > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        text-align: left;
        font-weight: 700;
        font-size: 10.5px;
        letter-spacing: .3px;
        text-transform: uppercase;
        color: var(--muted);
    }
    /* cells with no label (e.g. action column) span full width */
    table.custom-table > tbody > tr > td[data-label=""]::before,
    table.stack-card > tbody > tr > td[data-label=""]::before { content: ""; }

    /* ----- compact action buttons, right-aligned ----- */
    table.custom-table > tbody > tr > td .btn,
    table.stack-card > tbody > tr > td .btn {
        min-height: 0 !important;
        height: 30px;
        padding: 0 9px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        line-height: 1;
        margin: 0 0 0 6px;
        border-radius: 6px;
    }
    /* icon-only buttons (edit/key/delete) -> tidy 30x30 squares */
    table.custom-table > tbody > tr > td .icon-edit.btn,
    table.custom-table > tbody > tr > td .icon-delete.btn,
    table.custom-table > tbody > tr > td .btn-warning {
        width: 30px;
        padding: 0 !important;
    }
    table.custom-table > tbody > tr > td .btn i { margin: 0; }
    table.custom-table > tbody > tr > td a { display: inline-flex; }

    /* "no records" row spans normally */
    table.custom-table > tbody > tr > td.dataTables_empty {
        justify-content: center;
        text-align: center !important;
    }
    table.custom-table > tbody > tr > td.dataTables_empty::before { content: ""; }
}

/* ============================================================
   Dashboard (Phase 4)  —  <= 768px
   Stat cards 2-up + compact; welcome header reflow.
   ============================================================ */
@media (max-width: 768px) {
    .sho_box {
        padding: 12px 10px;
        margin-bottom: 12px;
    }
    .sho_box .box_icon img { width: 34px; }
    .box_content { margin-left: 12px !important; }
    .box_content p { font-size: 12px !important; margin-bottom: 2px; line-height: 1.2; }
    .box_content span { font-size: 17px !important; }

    .user_details h4 { font-size: 1.15rem; line-height: 1.4; }
    .sponser_id { margin-top: 10px; }

    .dashboard_table { margin-bottom: 16px; }
    .daboadr_table_heading h4 { font-size: 1.05rem; }
}

/* ============================================================
   Forms & modals (Phase 5)  —  <= 768px
   ============================================================ */
@media (max-width: 768px) {
    /* Touch-friendly inputs; 16px font stops iOS auto-zoom on focus */
    .form-control,
    .form-control-lg,
    .custom-select,
    select.form-control {
        font-size: 16px !important;
        min-height: 44px;
    }
    textarea.form-control { min-height: 92px; }
    .form-group { margin-bottom: 1rem; }
    .form-group label { font-size: 13px; font-weight: 600; }

    /* primary submit / save buttons go full-width for easy tapping */
    .t-header .btn,
    form .btn-primary[type="submit"],
    .user_regi_btn {
        width: 100%;
    }

    /* Modal sheets: comfortable padding, footer buttons stack full-width */
    .modal-body { padding: 1rem; }
    .modal-header, .modal-footer { padding: .85rem 1rem; }
    .modal-footer { display: flex; flex-wrap: wrap; gap: 8px; }
    .modal-footer .btn { flex: 1 1 auto; margin: 0; }

    /* input-group (password eye toggle) keeps button aligned */
    .input-group .btn { min-height: 44px; }
}

/* ============================================================
   <= 480px  — small phones
   ============================================================ */
@media (max-width: 480px) {
    .header .toggle-btns h4 { max-width: 40vw; font-size: 1rem; }
    .main-container { padding: .75rem .55rem 0 .55rem; }
    h2, .welcome-name { font-size: 1.3rem; }

    table.custom-table > tbody > tr > td::before,
    table.stack-card > tbody > tr > td::before { flex-basis: 38%; }

    /* stat cards: keep value readable on tiny screens */
    .box_content span { font-size: 15px !important; }
    .sho_box .box_icon img { width: 28px; }
}