/* ============================================================
   RESPONSIVE / MOBILE LAYER
   Red Damien Payroll System

   Loaded LAST on every page so it wins the cascade.
   Desktop (>1024px) is intentionally left untouched — every
   rule here is either a bug fix or inside a mobile media query.
   ============================================================ */


/* ============================================================
   1. STRUCTURAL FIXES (all viewports)
   ============================================================ */

/* .table-wrapper is used in markup but was never defined in any
   stylesheet, so wide tables overflowed the page instead of
   scrolling inside their own box. This is the sideways-scrolling
   page bug. Mirrors .table-responsive. */
.table-wrapper,
.table-responsive {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* A flex/grid child refuses to shrink below its content width
   unless min-width is cleared. Without this, a wide table forces
   .main-content wider than the screen no matter what. */
.main-content {
    min-width: 0;
    max-width: 100%;
}

.content-area,
.tab-content {
    min-width: 0;
    max-width: 100%;
}

/* Long unbroken strings (emails, event names) shouldn't widen the page */
.data-table td {
    overflow-wrap: break-word;
}

/* Backdrops are created by mobile-ui.js and are mobile-only —
   inert everywhere else. */
.sidebar-backdrop,
.nav-backdrop {
    display: none;
}

/* ============================================================
   GLYPH RENDERING  (all viewports)

   iOS draws characters like U+25B6 as full-colour emoji — on
   iPhone AND iPad, which is well past any "mobile" breakpoint.
   Desktop browsers already render them as plain text, so asking
   for text presentation everywhere fixes tablets and changes
   nothing on a desktop.

   mobile-ui.js does the real work by appending U+FE0E in the
   DOM; this is the belt-and-braces for browsers supporting the
   property directly.
   ============================================================ */
.evt-month-chevron,
.oc-month-chevron,
.tl-month-chevron,
.tl-date-chevron,
.tab,
.btn,
.nav-item,
.nav-icon,
.stat-icon,
.empty-icon,
.data-table td,
.card-header,
.audit-tab {
    font-variant-emoji: text;
}


/* ============================================================
   TOOLBAR PRIMARY ACTION  (>= 769px only)

   The employees toolbar right-aligns its buttons with a
   `flex: 1` spacer. The moment the row wraps, that spacer is
   stranded on the first line and "+ Add On-Call Employee"
   lands alone against the left edge, out of line with every
   other control. It wraps on any screen narrower than ~1040px
   of content — which includes iPad in both orientations.

   An auto left-margin right-aligns it on whichever line it
   ends up on. Where the spacer already does that job it is a
   no-op, because flex-grow has consumed the free space first.

   Held above 768px on purpose: employees.css turns the row
   into `flex-direction: column; align-items: stretch` on a
   phone, and an auto left-margin there cancels the stretch,
   shrinking the full-width button to its text.
   ============================================================ */
@media (min-width: 769px) {
    .toolbar-row .btn-primary {
        margin-left: auto;
    }
}


/* ============================================================
   APP SHELL — SIDEBAR DRAWER  (<= 1024px)

   The sidebar is a fixed 240px. On a tablet in portrait that
   leaves a 594px content column — narrower than a phone in
   landscape — so the desktop tables no longer fit and the
   browser expands the layout viewport to compensate (834px
   became 895–947px, which is what "clipping" looks like).

   Below 1024px the sidebar therefore becomes a drawer, handing
   the content the full width. The widest table wants ~808px,
   so it needs a ~1048px viewport to coexist with the sidebar;
   above this breakpoint (iPad landscape, desktop) there is room
   and the layout is left exactly as it was.
   ============================================================ */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        width: 300px;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15);
    }

    .main-content {
        margin-left: 0;
    }

    .menu-toggle {
        display: block;
        min-width: 44px;
        min-height: 44px;
        font-size: 24px;
        flex-shrink: 0;
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 199;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .sidebar-backdrop.show {
        opacity: 1;
        visibility: visible;
    }

    /* The audit panel's six category tabs still outrun a tablet's
       width. Wrap them instead of letting one hang off the edge. */
    .audit-tabs {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 6px !important;
        row-gap: 4px;
    }

    .audit-tab {
        flex: 0 1 auto;
        white-space: nowrap;
    }
}


/* ============================================================
   LANDING PAGE NAV  (index.html, logged out)

   Collapsed to a hamburger below 900px — NOT the usual 768px.
   home.css switches at 768, but the inline nav needs ~850px:
   between those widths (iPad portrait is 820–834) the labels
   wrap onto two lines, growing "Sign In" from 39px to 65px
   tall, which then spills out of the fixed 70px navbar and
   clips. Collapsing earlier is what fixes tablet portrait.

   Everything below 900px therefore gets the dropdown, and it
   is styled as a sheet floating over a dimmed page — a white
   panel opening onto a white page, directly above hero buttons
   styled like its own, read as part of the page rather than a
   menu over it.
   ============================================================ */
@media (max-width: 900px) {
    .hamburger {
        display: flex;
    }

    /* `.navbar` sets z-index:100 and so creates a stacking context;
       the dropdown's own z-index only ranks it *within* the navbar.
       Lift the whole bar so the menu clears all page content. */
    .navbar {
        z-index: 1000;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: #fff;
        border-top: 2px solid #c41e3a;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
        z-index: 150;
        padding: 8px 0;
        max-height: calc(100vh - 76px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links li {
        width: 100%;
    }

    /* Comfortable tap targets; nowrap keeps labels on one line */
    .nav-links a {
        display: flex !important;
        align-items: center;
        min-height: 44px;
        padding: 14px 24px;
        font-size: 15px;
        white-space: nowrap;
        border-bottom: 1px solid #f0f0f0;
    }

    .nav-links .nav-btn {
        margin: 8px 16px;
        justify-content: center;
        text-align: center;
        border-radius: var(--radius-md, 8px);
    }

    /* Every anchor is the only child of its own <li>, so home.css's
       `.nav-links a:last-child { border-bottom: none }` matches all
       of them — stripping the bottom edge off the Sign In button's
       outline and leaving the box open. Close it back up. */
    .nav-links a.nav-signin {
        background: #fff;
        border: 2px solid #c41e3a !important;
    }

    /* The filled button wants no separator line at all */
    .nav-links a.nav-btn:not(.nav-signin) {
        border-bottom: none !important;
    }

    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(17, 17, 17, 0.5);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        z-index: 900;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    .nav-backdrop.show {
        opacity: 1;
        visibility: visible;
    }
}


/* ============================================================
   2. TABLET & PHONE  (<= 768px)
   ============================================================ */
@media (max-width: 768px) {

    /* ---- Page-level horizontal scroll guard ---------------- */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* ---- Top bar ------------------------------------------
       Bell | Date | Clock | Name all competed for ~390px and
       pushed the header off-screen. Drop the date (it's the
       least critical and the longest), keep the live clock. */
    /* Height grows to fit a wrapped title rather than clipping it */
    .top-bar {
        height: auto;
        min-height: var(--topbar-height);
        padding: 8px 12px;
        gap: 8px;
        align-items: center;
    }

    #liveDateWrap {
        display: none !important;
    }

    #globalClockWrap {
        padding: 0 4px !important;
        margin-left: auto;
        border-right: 0;
    }

    #liveClock {
        font-size: 0.78rem !important;
    }

    /* Page titles like "Attendance Management" are wider than the
       space left over by the bell and clock. Wrap onto a second line
       instead of cutting the word off. */
    .page-title {
        font-size: 15px;
        line-height: 1.2;
        min-width: 0;
        flex: 1 1 auto;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: break-word;
    }

    /* Hamburger: comfortable thumb target */
    .menu-toggle {
        display: block;
        min-width: 44px;
        min-height: 44px;
        font-size: 24px;
        flex-shrink: 0;
    }

    /* ---- Sidebar drawer + backdrop ------------------------- */
    .sidebar {
        width: 82vw;
        max-width: 300px;
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 199;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .sidebar-backdrop.show {
        opacity: 1;
        visibility: visible;
    }

    /* ---- Hero order ---------------------------------------
       Desktop is a two-column grid (copy | logo). Stacked on a
       phone that puts the logo last; lead with it instead:
       LOGO → title → description → buttons. */
    .hero-image {
        order: -1;
    }

    .hero-logo {
        max-height: 200px;
        width: auto;
        margin: 0 auto;
        display: block;
    }

    /* Bigger nav rows for touch */
    .nav-item {
        padding: 14px 16px;
        font-size: 15px;
    }

    /* ---- Content padding ---------------------------------- */
    .content-area {
        padding: 16px 12px 24px !important;
    }

    /* ---- Stat cards ---------------------------------------
       2-up, slimmed down so 6 cards don't eat the whole screen */
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .stat-card {
        padding: 14px;
        gap: 10px;
    }

    .stat-icon {
        font-size: 22px;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .stat-number {
        font-size: 20px;
    }

    .stat-label {
        font-size: 11px;
        line-height: 1.3;
    }

    /* ---- Filters / controls -------------------------------- */
    .section-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .control-left,
    .control-right {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .form-inline {
        width: 100%;
    }

    /* 16px minimum stops iOS Safari from auto-zooming the page
       the moment a field is focused. Non-negotiable on iPhone. */
    .form-inline input,
    .form-inline select,
    .form-group input,
    .form-group select,
    .form-group textarea,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
        width: 100%;
        min-height: 44px;
    }

    /* ---- Card headers --------------------------------------
       Several use inline `display:flex;justify-content:space-between`,
       so !important is required to let them wrap. */
    .card-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
        align-items: flex-start !important;
        padding: 14px 12px;
    }

    .card-header h3 {
        font-size: 16px;
    }

    /* Inner groupings carry inline `display:flex` with fixed-width
       inputs (e.g. the 200px event search), which overflowed the card.
       Let every level wrap and give the field its own row. */
    .card-header > div,
    .card-header > div > div {
        flex-wrap: wrap !important;
        min-width: 0;
        gap: 8px !important;
        width: 100%;
    }

    .card-header input[type="text"],
    .card-header input[type="search"],
    .card-header select {
        width: 100% !important;
        flex: 1 1 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Buttons sit on their own line rather than being clipped */
    .card-header button {
        flex: 0 0 auto;
        max-width: 100%;
    }

    /* Search-and-action rows (e.g. a 240px field next to an
       "Expand All" button) — field takes the row, button follows. */
    .table-search,
    .search-row,
    .filter-row {
        flex-wrap: wrap !important;
        width: 100%;
        gap: 8px !important;
    }

    .table-search > input,
    .table-search > .search-input,
    input.search-input {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    .table-search > button {
        flex: 0 0 auto;
    }

    /* Safety net: inline `display:flex` rows are used throughout the
       markup with fixed widths that assume a desktop. Allowing them
       to wrap costs nothing when they already fit, and prevents a
       clipped control when they don't. */
    .content-area [style*="display:flex"],
    .tab-content [style*="display:flex"],
    .card [style*="display:flex"] {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
    }

    /* ---- Tables that still fit ----------------------------- */
    .data-table {
        font-size: 13px;
    }

    .data-table th,
    .data-table td {
        padding: 10px 12px;
    }

    /* ========================================================
       CARD TABLES

       Any table too wide for the screen is turned into a stack
       of cards by mobile-ui.js, which also copies the column
       headings onto each cell as data-label.

       Why: side-scrolling a table on a phone means content is
       always half-cut, and a pinned column overlaps whatever
       slides under it. Stacked cards remove the sideways axis
       altogether — every value is fully visible, and nothing
       can overlap anything.

       Only tables that actually overflow are converted, so the
       decision adapts to the device width on its own.
       ======================================================== */
    table.mcards {
        display: block;
        width: 100%;
        border-collapse: separate;
    }

    table.mcards > thead {
        display: none;
    }

    table.mcards > tbody {
        display: block;
        width: 100%;
    }

    /* Repeated in-body heading rows are redundant once every
       value carries its own label. */
    table.mcards tr.m-hdrrow {
        display: none !important;
    }

    /* Full-width rows (the red month bars) stay as they are —
       they're already readable and carry their own styling. */
    table.mcards tr.m-fullrow,
    table.mcards tr.m-fullrow > td {
        display: block;
        width: 100%;
    }

    /* ---- The card itself ---- */
    table.mcards tr.m-datarow {
        display: block;
        width: 100%;
        background: #fff;
        border: 1px solid var(--border, #e5e7eb);
        border-radius: 12px;
        margin: 0 0 10px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        overflow: hidden;
    }

    /* Rows carrying an inline tint (password-reset, submitted, …)
       keep it — inline styles outrank this, so the meaning of the
       colour survives the transformation. */

    table.mcards tr.m-datarow > td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        width: auto;
        padding: 8px 12px;
        border: 0;
        border-bottom: 1px solid var(--border-light, #f1f1f3);
        font-size: 13px;
        text-align: right;
        /* the whole point: values wrap instead of being clipped */
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    table.mcards tr.m-datarow > td:last-child {
        border-bottom: 0;
    }

    /* The label, printed from the column heading */
    table.mcards tr.m-datarow > td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 36%;
        text-align: left;
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted, #9ca3af);
        line-height: 1.5;
        padding-top: 1px;
    }

    /* First cell becomes the card's title bar */
    table.mcards tr.m-datarow > td.m-title {
        justify-content: flex-start;
        text-align: left;
        font-size: 14px;
        font-weight: 700;
        background: rgba(0, 0, 0, 0.025);
        padding: 10px 12px;
    }

    table.mcards tr.m-datarow > td.m-title::before {
        display: none;
    }

    /* Cells with nothing in them add noise — drop them */
    table.mcards tr.m-datarow > td.m-empty {
        display: none;
    }

    /* Action buttons: full row, wrapping, comfortably tappable */
    table.mcards tr.m-datarow > td.m-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
        background: rgba(0, 0, 0, 0.015);
    }

    table.mcards tr.m-datarow > td.m-actions .action-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

    table.mcards tr.m-datarow > td.m-actions .btn,
    table.mcards tr.m-datarow > td.m-actions button {
        min-height: 36px;
    }

    /* Nested tables (time-log detail) card up the same way */
    table.mcards .tl-inner-table {
        width: 100%;
    }

    /* A carded table never scrolls sideways */
    .table-wrapper:has(table.mcards),
    .table-responsive:has(table.mcards) {
        overflow-x: visible;
    }

    /* ---- Buttons ------------------------------------------- */
    .btn {
        min-height: 44px;
        padding: 10px 16px;
    }

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

    /* Row action buttons stay side by side but get real targets */
    .action-group {
        gap: 8px;
    }

    .action-group .btn,
    .action-group button {
        min-height: 38px;
    }

    /* ---- Tabs ---------------------------------------------
       Wrapped onto as many rows as needed rather than scrolled,
       so a tab is never sitting half-off the screen edge. */
    .tab-container {
        flex-wrap: wrap !important;
        overflow-x: visible;
        gap: 6px;
        padding: 10px 12px 0;
        row-gap: 4px;
    }

    .tab {
        flex: 1 1 auto;
        text-align: center;
        white-space: nowrap;
        min-height: 44px;
        font-size: 13px;
        padding: 10px 12px;
    }

    /* The audit panel's category tabs, same treatment */
    .audit-tabs {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 6px !important;
        row-gap: 4px;
    }

    .audit-tab {
        flex: 1 1 auto;
        white-space: nowrap;
        min-height: 40px;
        font-size: 0.8rem !important;
        padding: 8px 12px !important;
    }

    /* ---- Modals -------------------------------------------
       Near-fullscreen sheets with an independently scrolling
       body, so the footer buttons are always reachable. */
    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .modal {
        max-width: 100%;
        width: 100%;
        max-height: 92vh;
        border-radius: 14px 14px 0 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .modal-header {
        padding: 16px;
        flex-shrink: 0;
    }

    .modal-body {
        padding: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
    }

    .modal-footer {
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border, #e5e7eb);
        flex-shrink: 0;
        gap: 8px;
    }

    .modal-footer .btn {
        flex: 1;
    }

    .form-row {
        grid-template-columns: 1fr !important;
    }

    /* Notification popup fits the screen instead of hanging off it */
    #notif-popup {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        max-height: 70vh;
        overflow-y: auto;
    }
}


/* ============================================================
   3. SMALL PHONES  (<= 480px)
   ============================================================ */
@media (max-width: 480px) {

    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .stat-card {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .stat-icon {
        font-size: 18px;
        width: 32px;
        height: 32px;
    }

    .stat-number {
        font-size: 18px;
    }

    .page-title {
        font-size: 14px;
    }

    /* Very tight screens: the clock yields so the title keeps its space */
    #globalClockWrap {
        padding: 0 2px !important;
    }

    #liveClock {
        font-size: 0.72rem !important;
    }

    .data-table th,
    .data-table td {
        padding: 9px 10px;
        font-size: 12.5px;
    }

    .content-area {
        padding: 12px 10px 20px !important;
    }

    /* Stack row actions vertically only when truly cramped */
    .action-group {
        flex-wrap: wrap;
    }
}


/* ============================================================
   4. LANDSCAPE PHONES
   Short viewports — don't let the drawer/modal get taller
   than the screen.
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .modal {
        max-height: 96vh;
    }

    .sidebar-nav {
        overflow-y: auto;
    }
}


/* ============================================================
   5. TOUCH DEVICES
   Hover effects that stick on touch are worse than none.
   ============================================================ */
@media (hover: none) {
    .stat-card:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }

    .data-table tbody tr:hover {
        background: transparent;
    }
}