:root {
    --sidebar-width: 220px;
    --sidebar-collapsed-width: 64px;
    --sidebar-bg: #1e1e1e;
    --sidebar-bg-hover: #333333;
    --sidebar-border: #2c2c2c;
    --sidebar-text: #e6e6e6;
    --sidebar-accent: #0a75c7;
}

body {
    transition: padding-left 0.3s ease-in-out;
}

@media (min-width: 769px) {
    body {
        padding-left: var(--sidebar-width);
    }

        body.sidebar-collapsed {
            padding-left: var(--sidebar-collapsed-width);
        }
}

.mainnav {
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width);
    border-bottom: none;
    border-right: 1px solid var(--sidebar-border);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1040;
    transition: width 0.25s ease-in-out;
    padding-top: 0;
}

    .mainnav.collapsed {
        width: var(--sidebar-collapsed-width);
    }

.sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px;
    border-bottom: 1px solid var(--sidebar-border);
    background: #161616;
    flex-shrink: 0;
}

    .sidebar-head .sidebar-title {
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        opacity: 1;
        transition: opacity 0.2s ease-in-out;
    }

.mainnav.collapsed .sidebar-head .sidebar-title {
    opacity: 0;
    width: 0;
}

.sidebar-collapse-btn {
    background: transparent;
    border: 1px solid #444;
    color: #fff;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.2s, transform 0.25s ease-in-out;
}

    .sidebar-collapse-btn:hover {
        background: var(--sidebar-accent);
        border-color: var(--sidebar-accent);
    }

.mainnav.collapsed .sidebar-collapse-btn i {
    transform: rotate(180deg);
}

.mainnav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    margin: 0;
    width: 100%;
}

    .mainnav ul li {
        position: relative;
        border-left: none;
        width: 100%;
    }

        .mainnav ul li a {
            color: var(--sidebar-text);
            text-decoration: none;
            font-size: 13.5px;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 5px 10px;
            white-space: nowrap;
        }

            .mainnav ul li a > i:first-child {
                width: 16px;
                min-width: 16px;
                text-align: center;
                flex-shrink: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .mainnav ul li a span.label {
                flex: 1;
                text-align: left;
            }

            .mainnav ul li a i.fa-caret-down {
                margin-left: auto;
                font-size: 11px;
                transition: transform 0.2s ease-in-out;
            }

        .mainnav ul li.open > a > i.fa-caret-down {
            transform: rotate(180deg);
        }

        .mainnav ul li.open > a {
            background: var(--sidebar-bg-hover);
        }

.mainnav > ul > li > a::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    color: #9fd3ff;
}

.mainnav.collapsed ul li a {
    justify-content: center;
    padding: 11px 0;
}

    .mainnav.collapsed ul li a span.label,
    .mainnav.collapsed ul li a i.fa-caret-down {
        display: none;
    }

    .mainnav.collapsed ul li a > i:first-child {
        width: auto;
        min-width: 0;
    }

.mainnav .submenu {
    position: static;
    display: none;
    list-style: none;
    background: #161616;
    width: 100%;
    padding: 0;
    margin: 0;
    box-shadow: none;
    z-index: auto;
}

.mainnav ul li.open > .submenu {
    display: block !important;
}

.mainnav .submenu li a {
    padding-left: 40px;
    font-size: 11.5px;
    color: #cfcfcf;
}

.mainnav .submenu .submenu li a {
    padding-left: 60px;
}

.mainnav .submenu .submenu {
    position: static;
    width: 100%;
    left: 0;
    top: 0;
}

.mainnav.collapsed ul li.open > .submenu {
    display: none !important;
}

.mainnav.collapsed .submenu.flyout-open {
    display: block !important;
    position: fixed;
    width: 220px;
    background: #1e1e1e;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.3);
    border-radius: 6px;
    padding: 6px 0;
    z-index: 1060;
}

.mainnav.collapsed .submenu li a {
    padding-left: 16px;
}

.mainnav.collapsed .submenu .submenu li a {
    padding-left: 28px;
}

.mainnav.collapsed .submenu .submenu.flyout-open {
    display: block !important;
    position: fixed;
    width: 220px;
    background: #1e1e1e;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.3);
    border-radius: 6px;
    padding: 6px 0;
    z-index: 1061;
}

/* ---- Mobile: off-canvas drawer ---- */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    body {
        padding-left: 0 !important;
    }

    .mainnav {
        display: flex !important;
        left: -280px !important;
        width: 250px !important;
        height: 100% !important;
        top: 0 !important;
        opacity: 0;
        box-shadow: none;
        z-index: 1040 !important;
        transition: left 0.35s ease-in-out, opacity 0.3s ease-in-out;
        pointer-events: none;
    }

        .mainnav.active {
            left: 0 !important;
            opacity: 1;
            box-shadow: 4px 0 18px rgba(0, 0, 0, 0.35);
            pointer-events: auto;
            /* Sidebar must beat the top-menu's My Account (z-index 1100)
               while the drawer is open, or My Account floats on top of it. */
            z-index: 1150 !important;
        }

        .mainnav.collapsed {
            width: 250px !important;
        }

    .sidebar-collapse-btn {
        display: none;
    }

    .sidebar-head {
        display: none;
    }

    .mainnav ul {
        padding-top: 10px;
    }

    .mainnav.collapsed ul li a span.label,
    .mainnav.collapsed ul li a i.fa-caret-down {
        display: flex;
    }

    .mainnav.collapsed ul li a {
        justify-content: flex-start;
        padding: 11px 16px;
    }

    .mainnav ul li a {
        font-size: 13.5px !important;
    }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1035;
    }

        .sidebar-backdrop.active {
            display: block;
        }

    /* While the mobile sidebar drawer is open, hide the top-menu's
       My Account + Financial Year row so it can't visually overlap
       the sidebar (belt-and-suspenders alongside the z-index bump
       above on .mainnav.active). */
    body.nav-open .top-menu-right {
        visibility: hidden;
        pointer-events: none;
    }

    body.nav-open {
        overflow: hidden;
    }
}

/* =========================================================
   OLD TOP-LEFT HAMBURGER — removed from mobile view.
   Its click handler (wired by dashboard.js) is still reused
   internally by the "More" tab inside the bottom tab bar, but
   the button itself is no longer shown on screen on mobile.
   Desktop is unaffected (this block only targets max-width:768px).
   ========================================================= */
@media (max-width: 768px) {
    .menu-toggle {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .menu-toggle {
        display: none !important;
    }

    .sidebar-backdrop {
        display: none !important;
    }
}

/* =========================================================
   MOBILE-ONLY HEADER — page name only, full width
   The company avatar has been removed so the page title gets
   the full header width. The header also auto-hides while
   scrolling down (see #topMenuBar + .header-hidden below) and
   reappears when scrolling up or at the top of the page.
   ========================================================= */
.top-menu-page-heading {
    display: flex;
    align-items: center;
    gap: 0;
}

@media (max-width: 768px) {
    .top-menu-page-heading {
        width: 100%;
        justify-content: center;
    }

    .top-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1060;
        transition: transform 0.28s ease;
    }

        .top-menu.header-hidden {
            transform: translateY(-100%);
        }

    /* Reserve space at the top of the page equal to the fixed
       header's real height (set dynamically via JS, see the
       inline script in index.html / payslip.html). Falls back
       to a sensible default before JS runs. */
    body {
        padding-top: var(--mobile-header-h, 78px);
    }
}

/* =========================================================
   MOBILE-ONLY BOTTOM TAB BAR
   Solid rounded pill in the same blue as the header (.top-menu),
   for a consistent color scheme (Dashboard | Payslip | Support |
   Logout). The active tab is shown as a white filled circle
   behind its icon. Hidden entirely on desktop.
   ========================================================= */
.bottom-tab-bar {
    display: none;
}

@media (max-width: 768px) {
    .bottom-tab-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: min(94%, 380px);
        background: #0a75c7;
        border-radius: 24px;
        padding: 8px 10px;
        box-shadow: 0 10px 24px rgba(10, 117, 199, 0.35);
        z-index: 1070;
    }

    .tab-icon {
        flex: 1;
        width: auto;
        min-width: 0;
        height: 52px;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: #ffffff;
        font-size: 16px;
        text-decoration: none;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

        .tab-icon .tab-label {
            font-size: 10px;
            font-weight: 600;
            line-height: 1;
            white-space: nowrap;
        }

        .tab-icon.active-tab {
            background: #ffffff;
            color: #0a75c7;
            transform: scale(1.04);
        }

        .tab-icon:active {
            opacity: 0.75;
        }

    body {
        padding-bottom: 92px !important;
    }
}

/* =========================================================
   MOBILE-ONLY: remove the page footer entirely.
   Support/company/social links now live in the Support sheet
   (opened from the bottom bar) instead of a persistent footer.
   Desktop footer is untouched.
   ========================================================= */
@media (max-width: 768px) {
    .footer {
        display: none !important;
    }
}

/* =========================================================
   MOBILE-ONLY SUPPORT SHEET
   Slide-up panel triggered by the Support icon in the gooey bar:
   company logo + name, a WhatsApp deep link, and social icons.
   ========================================================= */
.support-sheet-backdrop {
    display: none;
}

.support-sheet {
    display: none;
}

@media (max-width: 768px) {
    .support-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1080;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

        .support-sheet-backdrop.open {
            opacity: 1;
            visibility: visible;
        }

    .support-sheet {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #ffffff;
        border-radius: 20px 20px 0 0;
        padding: 10px 24px calc(28px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
        z-index: 1090;
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }

        .support-sheet.open {
            transform: translateY(0);
        }

    .support-sheet-handle {
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: #d8dbe0;
        margin: 10px auto 6px;
    }

    .support-sheet-close {
        position: absolute;
        top: 14px;
        right: 16px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: none;
        background: #f2f3f5;
        color: #444;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .support-sheet-company {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        margin-bottom: 18px;
    }

    .support-sheet-logo {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #eef0f4;
    }

    .support-sheet-name {
        font-size: 15px;
        font-weight: 700;
        color: #1f2733;
    }

    .support-whatsapp-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        background: #25d366;
        color: #ffffff;
        font-size: 14.5px;
        font-weight: 700;
        text-decoration: none;
        padding: 13px 16px;
        border-radius: 12px;
        margin-bottom: 18px;
    }

        .support-whatsapp-btn i {
            font-size: 19px;
        }

        .support-whatsapp-btn:active {
            opacity: 0.85;
        }

    .support-sheet-social {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .support-sheet-social-label {
        font-size: 12px;
        color: #6b7685;
        margin-right: 4px;
    }

    .support-sheet-social a {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #f2f3f5;
        color: #333;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 16px;
    }

        .support-sheet-social a:active {
            background: #e6e8eb;
        }
}

/* =========================================================
   STICKY FOOTER
   ========================================================= */
.footer {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    width: 100%;
    z-index: 900;
}

/* =========================================================
   SIDE NAV — click-only submenu behavior (kills hover-open)
   ========================================================= */
.mainnav ul li:hover > .submenu {
    display: none !important;
}

.mainnav ul li.open > .submenu {
    display: block !important;
}

/* =========================================================
   "My Account" top-right menu — click to open, not mouse-over
   ========================================================= */
.top-menu-item:hover .top-submenu {
    display: none !important;
}

.top-menu-item .top-submenu.open {
    display: block !important;
    z-index: 1100 !important;
    transition: none !important;
    animation: none !important;
}

.top-menu-item {
    z-index: 1100;
}

.overlay {
    transition: none !important;
}

/* =========================================================
   Financial Year dropdown — top-right corner, in the top-menu bar
   ========================================================= */
.top-menu-fy {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 16px;
}

    .top-menu-fy label {
        color: #ffffff;
        font-size: 13px;
        margin: 0;
        white-space: nowrap;
    }

    .top-menu-fy select {
        background: #ffffff;
        color: #1e1e1e;
        border: none;
        border-radius: 4px;
        padding: 4px 8px;
        font-size: 13px;
        cursor: pointer;
        height: auto;
    }

        .top-menu-fy select:focus {
            outline: 2px solid rgba(255, 255, 255, 0.6);
        }

@media (max-width: 768px) {
    .top-menu {
        flex-wrap: wrap;
        padding: 20px 10px;
    }

    .top-menu-fy {
        margin-right: 8px;
    }
}

/* =========================================================
   Footer social icons — 5px spacing + "Follow Us" label
   ========================================================= */
.social-icons {
    gap: 5px !important;
}

    .social-icons i {
        padding-left: 0 !important;
    }

.social-icons-label {
    color: inherit;
    font-size: 10pt;
    margin-right: 4px;
    white-space: nowrap;
}

/* =========================================================
   Dashboard title inside .top-menu (left-aligned on desktop)
   ========================================================= */
.top-menu {
    justify-content: space-between !important;
}

.top-menu-page-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    text-align: left;
    white-space: nowrap;
}

.top-menu-right {
    display: flex;
    align-items: center;
    gap: 0;
}

@media (max-width: 768px) {
    .top-menu {
        flex-wrap: wrap;
    }

    .top-menu-page-title {
        font-size: 14px;
        flex: 1 0 100%;
        margin-bottom: 6px;
    }

    .top-menu-right {
        flex-wrap: wrap;
        row-gap: 8px;
        justify-content: center;
        width: 100%;
    }
}

/* =========================================================
   Dashboard page tweaks
   ========================================================= */
.card.h-auto {
    margin-top: 20px;
}

@media (max-width: 768px) {
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .top-menu-page-title {
        text-align: center;
        width: 100%;
    }

    .top-menu-fy {
        width: 100%;
        justify-content: center;
    }

        .top-menu-fy select {
            width: 50%;
        }
}

/* =========================================================
   Search card "Financial Year" field (#companystate) —
   center the whole column (label + dropdown) on mobile,
   dropdown at 50% width
   ========================================================= */
@media (max-width: 768px) {
    .col-md-4.col-12.mb-3.no-padding-right {
        text-align: center;
    }

        .col-md-4.col-12.mb-3.no-padding-right .dropdown {
            width: 50%;
            margin: 0 auto;
        }

    #companystate {
        width: 100%;
    }
}

.company-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 10px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 8px;
    flex-shrink: 0;
}

.company-logo {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    overflow: hidden;
    background: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

    .company-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.company-name {
    font-size: 11.5px;
    font-weight: 500;
    color: #fff;
    word-break: break-word;
}

.mainnav.collapsed .company-name {
    display: none;
}

.mainnav.collapsed .company-profile {
    display: none;
}

.profile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: #dedede;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.fa-user:before {
    color: #444;
}

.profile-icon:hover {
    background: #084298;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* =========================================================
   MOBILE-ONLY LOGOUT ITEM — appended to sidebar nav after
   "Contact" (see index.html). Hidden on desktop; only shown
   in the mobile off-canvas drawer.
   ========================================================= */
@media (min-width: 768px) {
    .mobile-logout-item {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .mobile-logout-item {
        margin-top: 6px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

        .mobile-logout-item > a {
            color: #ff6b6b;
        }

            .mobile-logout-item > a:hover,
            .mobile-logout-item > a:active {
                background: rgba(255, 107, 107, 0.12);
            }
}

/* =========================================================
   MOBILE-ONLY company logo inside the blue .top-menu bar.
   - Hidden on desktop (the logo only ever appears in this
     spot on mobile widths).
   - On mobile, sits centered above the page title instead
     of inline, so the older .top-menu overflow/nowrap rules
     (from styles.css) can never clip or scroll it out of view.
   ========================================================= */
.top-menu-logo {
    display: none !important;
}

@media (max-width: 767.98px) {
    .top-menu {
        overflow: visible !important;
        flex-wrap: wrap !important;
        white-space: normal !important;
    }

    .top-menu-page-heading {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 4px !important;
    }

    .top-menu-logo {
        display: block !important;
        height: 44px !important;
        width: 44px !important;
        margin: 0 auto 4px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        border: 2px solid rgba(255, 255, 255, 0.85) !important;
        flex-shrink: 0 !important;
    }

    .top-menu-page-title {
        margin: 0 !important;
        text-align: center !important;
    }
}

/* =========================================================
   TOP-MENU LEFT LOGO (mobile only)
   Sits pinned to the left of the blue header bar, independent
   of the centered title/Financial-Year block, so centering
   elsewhere in .top-menu-page-heading is unaffected.
   ========================================================= */
.top-menu-left-logo {
    display: none;
}

@media (max-width: 767.98px) {
    .top-menu-left-logo {
        display: block;
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        height: 50px;
        width: 50px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba(255, 255, 255, 0.85);
        z-index: 1;
    }
}