*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Segoe UI;
}

:root{
    /* Overridden by JS (see layout/master.php) to the header's actual
       measured height — this default only matters for the brief instant
       before that JS runs, or if it's somehow unavailable. Desktop's
       header height never changes (84px, fixed), but on mobile the
       header switches to height:auto and stacks its contents (logo,
       title, the account dropdown when shown, name, logout, hamburger)
       vertically — its real height varies by device, font rendering,
       and even by which account (if any) is selected, so no single
       hardcoded pixel value can ever reliably match it. A confirmed,
       reported bug: hardcoded guesses here (60px for the sidebar, 120px
       for the content area) were shorter than the header's real
       rendered height on the reporter's phone, so the fixed header
       visually covered the top of both the sidebar and the page content
       — exactly "the menu isn't fully visible" / "the page title is
       missing". Measuring the real height in JS and feeding it back
       here fixes this regardless of device or content differences.
    */
    --header-height:84px;
}

body{
    background:#f4f6f8;
}

.app-container{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

/* HEADER */

.app-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:84px;
    background:#163b63;
    display:flex;
    align-items:center;
    z-index:9999;
    padding:0 20px;
    box-sizing:border-box;
}

.logo{

    height:60px;
    width:auto;
    display:block;
    background:#ffffff;
    padding:4px;
    border-radius:6px;
}

.company-name{

    margin-left:18px;
    font-size:34px;
    font-weight:700;
    color:#ffffff;
    letter-spacing:0.3px;
}



/* MENU TOGGLE */

.menu-toggle{

    margin-left:auto;
    background:none;
    border:none;
    font-size:28px;
    color:#ffffff;
    cursor:pointer;
    display:none;
}


/* MAIN */

.main-layout{
    display:flex;
    flex:1;
    overflow:hidden;
}

.main-wrapper{
    display:flex;
    margin-top:var(--header-height);
    min-height:calc(100vh - var(--header-height));
}

/* SIDEBAR */

.sidebar{
    width:280px;
    background:#ffffff;
    border-right:1px solid #dbe2ea;
    overflow-y:auto;
    position:fixed;
    top:var(--header-height);
    bottom:30px;
    left:0;
    z-index:2000;
}

.sidebar a{

    display:block;

    padding:10px 12px;

    text-decoration:none;

    color:#163b63;

    border-radius:6px;

    margin-bottom:4px;

    margin-left:12px;

    font-size:15px;
}

.sidebar a:hover{
    background:#edf2f7;
}

.sidebar-backdrop{
    display:none;
}

/* CONTENT */

.content-area{
    position:relative;
    flex:1;
    margin-left:280px;
    margin-top:var(--header-height);
    margin-bottom:30px;
    padding:30px;
    width:calc(100% - 280px);
    min-height:calc(100vh - var(--header-height) - 30px);
    overflow-x:auto;
    overflow-y:auto;
    box-sizing:border-box;
    z-index:1;
}

.page-content{
    background:white;

    border-radius:10px;

    padding:25px;

    flex:1;

    overflow-y:auto;

}

/* CONTENT SCROLLBAR */

.content-area::-webkit-scrollbar,
.page-content::-webkit-scrollbar{

    width:8px;
}

.content-area::-webkit-scrollbar-thumb,
.page-content::-webkit-scrollbar-thumb{

    background:#b8c2cc;

    border-radius:10px;
}

/* FOOTER */

.app-footer{

    height:30px;
    background:#163b63;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    z-index:100;
}

/* =========================================
   RESPONSIVE DESIGN
========================================= */

@media screen and (max-width: 992px){

    .company-name{
        font-size:18px;
    }

    .sidebar{
        width:220px;
    }

    .fixed-action-bar{
        left:220px;
    }

}

/* TABLETS */

@media screen and (max-width: 768px){

    .content-area{

        margin-left:0;

        width:100%;

        /* Explicitly zeroed, not just omitted — a real, confirmed bug:
           leaving this property out entirely does NOT mean "no
           margin", it means the desktop rule above (margin-top:var(
           --header-height)) keeps cascading through unless something
           more specific overrides it. Since --header-height is
           JS-measured from the real (often tall, stacked) mobile
           header, that leftover margin was adding the header's full
           height as EXTRA blank space on top of the space it already
           naturally takes up in normal document flow — pushing the
           page's own title (and everything else) down by double the
           header's height, sometimes clean off the visible screen.
           Confirmed directly by rendering this exact CSS in a real
           browser at a phone-sized viewport before and after this fix. */
        margin-top:0;

        margin-bottom:50px;

        min-height:auto;

        padding:15px;
    }

    /* Confirmed root cause of "menu not fully visible" / "page title
       missing" on real phones: the header is position:fixed on
       desktop, but on mobile it wraps into several stacked rows (logo,
       title, the account dropdown when shown, name, logout, hamburger)
       and its real height becomes unpredictable — no fixed pixel value
       (and, it turned out, not even a JS-measured one, since a SEPARATE
       rule at the 480px breakpoint kept re-enabling position:fixed
       independently) could reliably keep the sidebar and content
       positioned below it. Taking the header OUT of position:fixed on
       mobile removes the entire problem at its root: it just flows
       normally at the top of the page like any other element, and
       everything below it follows automatically, at any height, on any
       device, with no compensation logic needed anywhere. */
    .app-header{
        position:relative;
        flex-direction:column;
        justify-content:center;
        height:auto;
        padding:15px;
        text-align:center;
    }

    .company-name{
        margin-left:0;
        margin-top:10px;
        font-size:18px;
    }

    .phase-tabs{
        overflow-x:auto;
        white-space:nowrap;
    }

    .phase-tab{
        padding:15px 18px;
        font-size:14px;
    }

    .main-layout{
        position:relative;
    }

    .sidebar{

        /* top:0 + height:100dvh (with a 100vh fallback), pushing the
           actual content down with padding-top instead of trying to
           offset the box's own position/height by subtracting the
           header's height — a real, confirmed bug in the previous
           approach: calc(100vh - var(--header-height)) compounds two
           separate sources of inaccuracy into one number. 100vh on iOS
           Safari specifically does NOT reliably match the actual
           visible viewport (it's calculated as if the browser's address
           bar/toolbar were fully collapsed, which they usually aren't),
           so the box ended up shorter than the real screen regardless
           of how accurately --header-height was measured — reported
           directly: "the sidebar is shorter... last few items are not
           accessible". 100dvh (dynamic viewport height) is the
           standard, purpose-built fix for exactly this — it tracks the
           browser's ACTUAL current visible viewport, toolbars included,
           and updates live as they show/hide. Unsupported browsers
           simply ignore the second (dvh) declaration and keep the vh
           fallback above it. Padding-top (not a top offset) means the
           padding is itself part of the scrollable area — content
           starts visually below the header, but the box's own bottom
           edge is always the guaranteed-real bottom of the screen, so
           there's no separate height calculation left to get wrong.
        */
        position:fixed;
        top:0;
        left:-260px;
        width:250px;
        height:100vh;
        height:100dvh;
        padding-top:var(--header-height);
        background:#ffffff;
        z-index:999;
        transition:0.3s ease;
        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
        /* Confirmed by the reporter's own description ("while scrolling,
           the background screen scrolls instead of the sidebar menu")
           — a well-known iOS Safari behavior called scroll chaining:
           once a nested scrollable element (this sidebar) reaches its
           own scroll boundary, the browser can pass the REMAINING
           scroll gesture through to whatever's behind it, scrolling the
           background page instead. overscroll-behavior:contain tells
           the browser to stop the scroll right at this element's edge
           instead of handing it off. Paired with locking the body's own
           scroll entirely while the drawer is open (see toggleSidebar()
           in master.php) as a second, more forceful layer of the same
           fix — there's then nothing behind the sidebar left to scroll
           at all while it's open. */
        overscroll-behavior:contain;
        touch-action:pan-y;
        border-right:1px solid #d9e1e8;
    }
    .sidebar.sidebar-open{

        left:0;
    }

    .sidebar-backdrop{
        display:block;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.4);
        z-index:998;
        opacity:0;
        pointer-events:none;
        transition:opacity 0.3s ease;
    }

    .sidebar-backdrop.sidebar-backdrop-visible{
        opacity:1;
        pointer-events:auto;
    }

    .sidebar a{

        display:block;
        margin-right:0;
        white-space:normal;
    }

    .content-area{
        padding:15px;
    }

    .menu-toggle{

        display:block;
    }

}

/* MOBILE */

@media screen and (max-width: 480px){

    .content-area{

        margin-left:0;

        width:100%;
    }

    .app-header{
        /* A real, confirmed additional bug on top of the earlier fix:
           this OVERRODE the header back to position:fixed at this
           narrower breakpoint — which covers virtually every actual
           phone screen (~390-430px wide), not just "small tablets".
           So even after fixing the 768px breakpoint's hardcoded offset,
           real phones hit THIS rule instead and were right back to a
           floating header with nothing correctly compensating for its
           height. Removed entirely — the 768px breakpoint below already
           makes the header flow normally (not fixed) on every mobile
           size, which is the actual, robust fix: with the header back
           in the normal document flow, there's nothing to compensate
           for at all, at any screen width.
        */

        min-height:100px;
    }

    .logo{
        height:38px;
    }

    .company-name{
        font-size:16px;
        line-height:1.4;
    }

    .phase-tab{
        padding:12px 15px;
        font-size:13px;
    }

    .sidebar{
        /* padding-left/right/bottom only, NOT the shorthand — the 768px
           breakpoint sets padding-top:var(--header-height) specifically
           to push the sidebar's content down below the header (see
           that rule's comment); the plain "padding" shorthand here
           would silently reset that back to 12px, right back to the
           same "items hidden behind the header" bug that padding-top
           was added to fix in the first place. */
        padding-left:12px;
        padding-right:12px;
        padding-bottom:12px;
    }

    .sidebar a{
        display:block;
        margin-right:0;
    }

    .content-area{
        padding:10px;
        overflow:auto;
        min-height:300px;
    }

    .page-content{
        padding:15px;
        border-radius:6px;
    }

    .app-footer{
        font-size:11px;
        text-align:center;
        padding:0 10px;
        height:30px;
    }
    .menu-toggle{

        display:block;
    }

}

/* =========================================================
   LOGIN PAGE
========================================================= */

.login-body{
    margin:0;
    min-height:100vh;
    background:linear-gradient(135deg,#163b63,#0d2238);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px;
}

.login-page-wrapper{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.login-card{
    width:100%;
    max-width:450px;
    background:#ffffff;
    border-radius:18px;
    padding:40px;
    box-shadow:0 20px 60px rgba(0,0,0,0.25);
}

.login-logo-section{
    text-align:center;
    margin-bottom:30px;
}

.login-logo{
    width:90px;
    height:90px;
    object-fit:contain;
    margin-bottom:15px;
}

.login-logo-section h1{
    font-size:28px;
    line-height:1.3;
    color:#163b63;
    margin-bottom:10px;
}

.login-logo-section p{
    color:#64748b;
    font-size:15px;
}

.login-alert{
    background:#fee2e2;
    color:#b91c1c;
    padding:14px;
    border-radius:10px;
    margin-bottom:20px;
    font-size:14px;
}

.login-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.form-group label{
    margin-bottom:8px;
    font-weight:600;
    color:#163b63;
}

.form-group input{
    height:48px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    padding:0 14px;
    font-size:15px;
    outline:none;
    transition:0.3s ease;
}

.form-group input:focus{
    border-color:#163b63;
    box-shadow:0 0 0 3px rgba(22,59,99,0.15);
}

.login-btn{
    height:50px;
    border:none;
    border-radius:10px;
    background:#163b63;
    color:#ffffff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:0.3s ease;
}

.login-btn:hover{
    transform:translateY(-2px);
    background:#0f2b48;
}

.header-right{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:20px;
}

.logged-user{
    color:#ffffff;
    font-size:16px;
    font-weight:600;
}

.sidebar-module{
    font-size:14px;
    font-weight:700;
    color:#163b63;
    padding:10px 15px 5px;
}

.user-section{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
}

.logout-btn{
    border:none;
    background:#ffffff;
    color:#163b63;
    padding:4px 10px;
    border-radius:6px;
    cursor:pointer;
    font-size:12px;
    font-weight:600;
}

.logout-btn:hover{
    background:#dbeafe;
}

/* =========================================
   SIDEBAR COLLAPSE
========================================= */

.sidebar-phase{

    border-bottom:1px solid #e5e7eb;
}

.sidebar-title{

    width:100%;

    border:none;

    background:none;

    text-align:left;

    padding:14px 16px;

    font-size:16px;

    font-weight:700;

    color:#163b63;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:10px;
}

.sidebar-title:hover{

    background:#eff6ff;
}

.phase-arrow{

    font-size:12px;
}

.sidebar-phase-content{

    padding-left:8px;
}

.sidebar-module-title{

    width:100%;

    border:none;

    background:none;

    text-align:left;

    padding:10px 14px;

    font-size:15px;

    font-weight:700;

    color:#163b63;

    cursor:pointer;
}

.sidebar-module-title:hover{

    background:#edf2f7;
}

.sidebar-module-links{

    margin-left:10px;
}

.sidebar-module-links a{

    display:block;

    padding:10px 35px;

    color:#334155;

    text-decoration:none;

    font-size:14px;
}

.sidebar-module-links a:hover{

    background:#f1f5f9;
}

.menu-hidden{

    display:none;
}






/* =========================================
   CONTENT AREA
========================================= */


.content-card{

    background:#ffffff;

    padding:30px;

    border-radius:10px;

    max-width:600px;
}

.form-container{

    margin-top:20px;
}

.form-group{
    display:flex;

    flex-direction:column;
    margin-bottom:20px;
}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;
}

.form-group input,
.form-group select{

    width:100%;

    padding:12px;

    border:1px solid #cbd5e1;

    border-radius:6px;

    background:#ffffff;

    font-size:15px;
}

.primary-btn{

    background:#163b63;

    color:#ffffff;

    border:none;

    padding:12px 20px;

    border-radius:6px;

    cursor:pointer;
}

.primary-btn:hover{

    background:#0f2d4b;
}

.alert{

    padding:14px;

    border-radius:6px;

    margin-bottom:20px;
}

.alert-danger{

    background:#fee2e2;

    color:#991b1b;
}

.alert-success{

    background:#dcfce7;

    color:#166534;
}

/* =========================================================
   MODERN PERMISSION UI
========================================================= */

.permission-page-header{

    margin-bottom:25px;
}

.permission-layout{

    display:flex;
    flex-direction:column;
    gap:25px;
}

.phase-block{

    margin-top:10px;
}

.phase-title{

    color:#163b63;
    font-size:24px;
    margin-bottom:15px;
    border-bottom:2px solid #dbeafe;
    padding-bottom:10px;
}

.module-title{

    font-size:18px;
    font-weight:700;
    color:#334155;
    margin-bottom:10px;
}

.permission-card{

    background:#ffffff;
    border:1px solid #dbe2ea;
    border-radius:10px;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:15px;
}

.permission-card-header{

    font-size:16px;
    font-weight:700;
    color:#163b63;
}

.permission-options{

    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.permission-options label{

    display:flex;
    align-items:center;
    gap:8px;
    background:#f8fafc;
    padding:10px 14px;
    border-radius:8px;
    cursor:pointer;
}

.permission-options input{

    width:18px;
    height:18px;
}

.role-selection-card{

    background:#ffffff;
    padding:20px;
    border-radius:10px;
    margin-bottom:25px;
}

/* MOBILE */

@media screen and (max-width:768px){

    .content-area{

        margin-left:0;

        width:100%;
    }

    .permission-options{

        flex-direction:column;
        gap:10px;
    }

    .permission-options label{

        width:100%;
    }

    .phase-title{

        font-size:20px;
    }

}

/* =========================================================
   STAFF MANAGEMENT
========================================================= */

.staff-page{

    max-width:1200px;

    margin:0 auto;
}

.staff-title{

    font-size:32px;

    font-weight:700;

    color: 1a1a1a;

    margin-bottom:25px;
}

.staff-section {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

/* Action section needs overflow:visible so the material
   search results panel can drop below the section boundary.
   overflow:hidden on .staff-section clips position:absolute
   children regardless of z-index. */
#actionSection {
    overflow: visible;
}

/* Searchable material dropdown panel — position:fixed (not absolute) is
   deliberate: it's appended straight to <body> and given JS-computed
   coordinates so it always escapes any scrollable/clipped ancestor
   (.staff-section's overflow:hidden, .excel-table-wrapper's implicit
   overflow-y:auto from having overflow-x:auto — a well-known CSS
   quirk where the two can't be set independently). top/left/width are
   set inline per-instance by the JS that positions it. */
.mat-search-results-panel {
    position: fixed;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.mat-search-results-panel:empty {
    display: none;
}

.mat-search-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
}

.mat-search-item:hover {
    background: #eff6ff;
}

/* Keyboard-highlighted row (Arrow Up/Down) in a searchable dropdown —
   same treatment as :hover so keyboard and mouse users see the same
   visual feedback for "this is what Enter will pick". */
.mat-search-item.active {
    background: #dbeafe;
}

.mat-search-item:last-child {
    border-bottom: none;
}

.mat-search-item .mat-code {
    color: #64748b;
    font-size: 12px;
    margin-right: 6px;
}

.mat-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.mat-search-input:focus {
    border-color: #163b63;
    box-shadow: 0 0 0 3px rgba(22,59,99,0.12);
}

.staff-section-header,
.card-header {
    background: #ffffff;
    color: #1a1a1a;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
    letter-spacing: 0.2px;
}

.staff-section-body,
.card-body {
    padding: 20px 18px;
}

.staff-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:20px;
}

.staff-form-group{

    display:flex;

    flex-direction:column;
}

.staff-form-group label{

    font-weight:600;

    color:#334155;

    margin-bottom:6px;
}

.staff-section table th{

    text-align:left !important;

    font-weight:600;

    color:#334155;

    padding-bottom:8px;

    vertical-align:bottom;
}

.staff-section table{

    width:100%;

    border-collapse:separate;

    border-spacing:0 10px;
}

.staff-form-group input,
.staff-form-group select,
.staff-form-group textarea{

    width:100%;

    padding:12px;

    border:1px solid #cbd5e1;

    border-radius:8px;

    font-size:14px;
}

.staff-form-group textarea{

    resize:vertical;

    min-height:120px;
}

.staff-radio-group{

    display:flex;

    gap:25px;

    flex-wrap:wrap;
}

.staff-radio-group label{

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:600;
}

.kyc-box{

    border:1px dashed #cbd5e1;

    padding:15px;

    border-radius:8px;

    margin-bottom:15px;
}

.help-text{

    font-size:12px;

    color:#64748b;

    margin-top:5px;
}

.staff-save-btn{

    background:#163b63;

    color:#ffffff;

    border:none;

    padding:14px 25px;

    border-radius:8px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;
}

.staff-save-btn:hover{

    background:#0f2d4b;
}

/* =========================================================
   STAFF MANAGEMENT - mobile responsiveness
========================================================= */

@media screen and (max-width:768px){

    .staff-title{

        font-size:24px;
    }

    .staff-grid{

        grid-template-columns:1fr;
    }

    .staff-section-header{

        font-size:16px;
    }

    .staff-radio-group{

        flex-direction:column;

        gap:10px;
    }

}

/* =========================================================
   PURCHASES — button variants
========================================================= */

.secondary-btn,
.success-btn,
.danger-btn{
    border:none;
    padding:12px 20px;
    border-radius:6px;
    cursor:pointer;
    font-weight:600;
}

.secondary-btn{ background:#e2e8f0; color:#1e293b; }
.secondary-btn:hover{ background:#cbd5e1; }

.success-btn{ background:#15803d; color:#ffffff; }
.success-btn:hover{ background:#116530; }

.danger-btn{ background:#dc2626; color:#ffffff; }
.danger-btn:hover{ background:#b91c1c; }

.alert-info{ background:#dbeafe; color:#1e40af; }

/* =========================================================
   PURCHASES — filter row (Edit Existing)
========================================================= */

.purchase-filter-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:16px;
    align-items:end;
}

/* =========================================================
   PURCHASES — excel-like grid
   Desktop / tablet: real <table>, sticky header, horizontal
   scroll if there are more columns than fit the viewport.
   Phone: each row collapses into a stacked card — see the
   max-width:480px block below.
========================================================= */

.excel-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
}

.excel-toolbar-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

/* Fixed action bar — keeps Fetch Customer Names / Add Row / Clear / Save
   reachable without scrolling back to the top of a long grid. Also
   RELOCATED to a direct child of <body> by JS (see relocateFixedActionBar
   in the page script) — position:fixed alone wasn't enough, since its
   original parent (.content-area) sets overflow-x/overflow-y:auto, which
   still visually clips a fixed-position descendant in real browsers (the
   same reason .mat-search-results-panel is appended straight to <body>
   too). Sits at bottom:30px, directly above the site's own 30px-tall
   .app-footer, rather than overlapping it at bottom:0. z-index is above
   .app-footer (100) and .sidebar (2000) so nothing can render over it. */
.fixed-action-bar{
    position:fixed;
    left:280px;
    right:0;
    bottom:30px;
    background:#ffffff;
    border-top:1px solid #cbd5e1;
    padding:10px 18px;
    display:flex;
    gap:10px;
    justify-content:flex-end;
    flex-wrap:wrap;
    z-index:2500;
    box-shadow:0 -4px 12px rgba(0,0,0,0.08);
}

/* Leaves enough breathing room at the bottom of the page so the fixed bar
   (plus the site footer below it) never sits on top of / hides the grid's
   last row. */
.fixed-action-bar-spacer{
    height:94px;
}

.excel-table-wrapper{
    overflow-x:auto;
    border:1px solid #e2e8f0;
    border-radius:8px;
}

.excel-table{
    width:100%;
    border-collapse:collapse;
    min-width:900px; /* forces horizontal scroll on tablet instead of squashing columns */
}

.excel-table thead th{
    position:sticky;
    top:0;
    background:#f8fafc;
    text-align:left;
    padding:10px 12px;
    font-size:13px;
    font-weight:700;
    color:#334155;
    border-bottom:2px solid #e2e8f0;
    white-space:nowrap;
}

.excel-table td{
    padding:6px 8px;
    border-bottom:1px solid #f1f5f9;
}

.excel-table td input{
    width:100%;
    box-sizing:border-box;
    padding:8px;
    border:1px solid #e2e8f0;
    border-radius:4px;
    font-size:13px;
}

.excel-table td input[type="number"]{
    min-width:130px;
}

.excel-table td input[type="date"]{
    min-width:150px;
}

.excel-table td input:focus{
    outline:none;
    border-color:#163b63;
    box-shadow:0 0 0 2px rgba(22,59,99,0.12);
}

.excel-col-action{ width:60px; text-align:center; }

.excel-col-sync{ width:36px; text-align:center; }

.sync-badge{
    display:inline-block;
    font-size:11px;
    font-weight:600;
    padding:2px 7px;
    border-radius:10px;
    white-space:nowrap;
    cursor:default;
}
.sync-badge.outbound{ background:#dbeafe; color:#1e40af; }
.sync-badge.inbound{ background:#dcfce7; color:#166534; }

.fetch-dropdown-menu{
    position:absolute;
    bottom:100%;
    top:auto;
    left:0;
    margin-bottom:4px;
    background:#fff;
    border:1px solid #cbd5e1;
    border-radius:8px;
    box-shadow:0 -8px 24px rgba(0,0,0,0.12);
    z-index:2600;
    min-width:240px;
    overflow:hidden;
}
.fetch-dropdown-item{
    display:block;
    width:100%;
    text-align:left;
    padding:10px 14px;
    background:#fff;
    border:none;
    border-bottom:1px solid #f1f5f9;
    cursor:pointer;
    font-size:14px;
    color:#1e293b;
}
.fetch-dropdown-item:last-child{ border-bottom:none; }
.fetch-dropdown-item:hover{ background:#f8fafc; }

.sync-picker-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,0.5);
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
}
.sync-picker-box{
    background:#fff;
    border-radius:10px;
    padding:20px;
    width:min(420px, 90vw);
    max-height:80vh;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.sync-picker-box h3{ margin:0; font-size:16px; }
.sync-picker-list{
    overflow-y:auto;
    max-height:50vh;
    border:1px solid #e2e8f0;
    border-radius:6px;
    padding:8px;
}
.sync-picker-list label{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 4px;
    font-size:14px;
    cursor:pointer;
}
.sync-picker-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

.row-remove-btn{
    background:#fee2e2;
    color:#991b1b;
    border:none;
    border-radius:4px;
    width:28px;
    height:28px;
    cursor:pointer;
    font-weight:700;
}

.row-remove-btn:hover{ background:#fecaca; }

.row-extraction-failed td{ background:#fffbeb; }

.row-duplicate td{
    background:#fee2e2;
    border-top:1px solid #fca5a5;
    border-bottom:1px solid #fca5a5;
}

.row-duplicate td:first-child{ border-left:1px solid #fca5a5; }
.row-duplicate td:last-child{ border-right:1px solid #fca5a5; }

/* =========================================================
   PURCHASES — responsive layouts
   Layout A (>768px, desktop/laptop):
     Full table, sidebar-style filters inline above it, exactly
     like the reference desktop-app screenshot.
   Layout B (481–768px, tablet):
     Same table, but it scrolls horizontally inside its own box
     rather than the whole page — toolbar buttons wrap to a
     second line instead of overflowing.
   Layout C (<=480px, phone):
     The table stops behaving like a table at all. Each row
     becomes its own card; each cell stacks as a label:value
     line (label comes from the th text via data-label). This
     is the standard "responsive table -> card list" pattern —
     scanning one bill at a time beats scrolling a cramped grid
     sideways on a 6" screen.
========================================================= */

@media screen and (max-width:768px){

    .purchase-filter-row{
        grid-template-columns:1fr;
    }

    .excel-toolbar{
        flex-direction:column;
        align-items:stretch;
    }

    .excel-toolbar-actions{
        justify-content:stretch;
    }

    .excel-toolbar-actions button{
        flex:1;
    }

    .fixed-action-bar{
        left:0;
        bottom:30px;
        flex-direction:column;
        align-items:stretch;
        max-height:60vh;
        overflow-y:auto;
    }

    .fixed-action-bar button{
        width:100%;
    }

    /* The bar stacks into up to 4 full-width rows here instead of one row,
       so it needs a lot more clearance below the grid than the desktop
       spacer provides. */
    .fixed-action-bar-spacer{
        height:260px;
    }
}

@media screen and (max-width:480px){

    .excel-table-wrapper{
        overflow-x:visible;
        border:none;
    }

    .excel-table{
        min-width:0;
    }

    .excel-table thead{
        display:none; /* headers reappear per-cell via data-label instead */
    }

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

    .excel-table tr{
        margin-bottom:14px;
        border:1px solid #e2e8f0;
        border-radius:8px;
        padding:8px;
        background:#ffffff;
    }

    .excel-table tr.row-extraction-failed{ border-color:#fbbf24; background:#fffbeb; }
    .excel-table tr.row-duplicate{ border-color:#fca5a5; background:#fee2e2; }

    .excel-table td{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:10px;
        border-bottom:1px solid #f8fafc;
        padding:8px 4px;
    }

    .excel-table td::before{
        content:attr(data-label);
        font-weight:600;
        color:#64748b;
        font-size:12px;
        flex:0 0 40%;
    }

    .excel-table td input{
        flex:1;
        text-align:right;
    }

    .excel-col-action{
        justify-content:flex-end;
    }
}


/* =========================================================
   GST VS PURCHASE BILLS — report page
========================================================= */

.gst-purchase-actions{
    display:flex;
    gap:10px;
    align-items:flex-end;
}

.status-matched{ color:#15803d; font-weight:600; white-space:nowrap; }
.status-mismatch{ color:#b45309; font-weight:600; }

/* Read-only report table — same grid look as the editable ones, but plain
   text cells instead of <input> boxes (nothing here is ever edited). */
.report-table td{
    padding:10px 12px;
    font-size:13px;
}

.report-print-header{ display:none; }

/* =========================================================
   PRINT / "Export as PDF" (window.print() — no server-side PDF
   library needed, every modern browser offers Save-as-PDF here)
========================================================= */

@media print{

    .no-print{ display:none !important; }

    .only-print,
    .report-print-header{ display:block !important; }

    body{ background:#ffffff; }

    .staff-page, .staff-section{
        box-shadow:none;
        border:none;
    }

    .report-section{
        break-inside:avoid;
        page-break-inside:avoid;
        margin-bottom:18px;
    }

    .report-table{
        width:100%;
        border-collapse:collapse;
    }

    .report-table th, .report-table td{
        border:1px solid #cbd5e1;
        padding:6px 8px;
        font-size:11px;
    }

    .row-duplicate td{
        background:#fef3c7 !important; /* mismatch rows still stand out in print, just lighter than on-screen */
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }

    .excel-table-wrapper{
        overflow:visible;
        border:none;
    }

    /* Force the phone card-layout media query off when printing on a
       normal-width page — a printed page is never 480px wide, but some
       browsers still evaluate print layout against the screen's viewport. */
    .excel-table thead{ display:table-header-group !important; }
    .excel-table, .excel-table tbody, .excel-table tr, .excel-table td{
        display:revert !important;
    }
    .excel-table td::before{ content:none !important; }
}
/* =========================================================
   Universal account selector (header)
========================================================= */

.account-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 20px;
}

.account-selector label {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.account-selector select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.95);
    font-size: 13px;
    max-width: 220px;
}

@media screen and (max-width: 768px) {
    .account-selector {
        margin: 8px 0;
        width: 100%;
    }
    .account-selector select {
        max-width: none;
        flex: 1;
    }
}