/* =========================================================
   TICKY TICKY
   GLOBAL DESIGN SYSTEM
   NOTES GENERATOR EMERALD THEME
   ========================================================= */


/* =========================================================
   ROOT COLORS
   ========================================================= */

:root {

    /* Main Emerald Theme */
    --primary-green: #1b5e20;
    --dark-green: #0f3d2e;
    --medium-green: #2e7d32;

    /* Soft Green */
    --light-green: #dfe9df;
    --very-light-green: #eef4ef;
    --background-green: #f3f6f3;

    /* Neutral */
    --background: #f3f6f3;
    --white: #ffffff;

    --text-primary: #1f2937;
    --text-secondary: #4b5563;

    --border: #d7e1d7;

    /* Accent */
    --gold: #c8a951;

    /* Status */
    --danger: #dc2626;
    --warning: #d97706;
    --success: #1b5e20;

    /* Shadows */
    --shadow-sm:
        0 1px 3px
        rgba(15, 61, 46, 0.08);

    --shadow-md:
        0 4px 12px
        rgba(15, 61, 46, 0.10);

    --shadow-lg:
        0 10px 30px
        rgba(15, 61, 46, 0.14);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;

    /* Layout */
    --max-width: 1200px;
}


/* =========================================================
   RESET
   ========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


/* =========================================================
   GLOBAL PAGE
   ========================================================= */

body {font-family:
        Arial,
        Helvetica,
        sans-serif;background:
        linear-gradient(
            180deg,
            var(--very-light-green) 0%,
            var(--background) 100%
        );color:
        var(--text-primary);line-height:
        1.5;}


/* =========================================================
   BUTTONS
   ========================================================= */

button {

    font-family:
        inherit;

}


.btn {

    border: none;

    border-radius:
        var(--radius-sm);

    padding:
        12px 18px;

    font-size:
        14px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        0.2s ease;

}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.btn-primary {background:
        linear-gradient(
            90deg,
            var(--dark-green),
            var(--primary-green),
            var(--medium-green)
        );color:
        #ffffff;border:
        none;}


.btn-primary:hover {background:
        linear-gradient(
            90deg,
            #0b3d2e,
            #1b5e20
        );}


.btn-primary:disabled {

    opacity:
        0.6;

    cursor:
        not-allowed;

}


/* =========================================================
   FORM CONTROLS
   THEME-NEUTRAL STRUCTURE
   ========================================================= */

input,
select,
textarea {

    width: 100%;

    font-family:
        inherit;

    font-size:
        14px;

    line-height:
        1.4;

    background:
        var(--input-background);

    color:
        var(--input-text);

    border:
        1px solid
        var(--input-border);

    border-radius:
        8px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;

}


/* Text inputs */

input {

    min-height:
        42px;

    padding:
        10px 12px;

}


/* Select */

select {

    min-height:
        42px;

    padding:
        10px 38px 10px 12px;

    cursor:
        pointer;

}


/* Textarea */

textarea {

    padding:
        10px 12px;

    resize:
        vertical;

}


/* Placeholder */

input::placeholder,
textarea::placeholder {

    color:
        var(--input-placeholder);

    opacity:
        1;

}


/* Focus */

input:focus,
select:focus,
textarea:focus {

    outline:
        none;

    border-color:
        var(--input-focus);

    box-shadow:
        0 0 0 3px
        var(--input-focus-ring);

}


/* Disabled */

input:disabled,
select:disabled,
textarea:disabled {

    background:
        var(--input-disabled-bg);

    color:
        var(--input-disabled-text);

    cursor:
        not-allowed;

    opacity:
        0.8;

}


/* Native calendar */

input[type="date"],
input[type="datetime-local"],
input[type="time"] {

    color:
        var(--input-text);

    color-scheme:
        var(--control-color-scheme);

}


/* Native select */

select {

    color:
        var(--input-text);

}


/* Selected option */

select option {

    background:
        var(--input-option-bg);

    color:
        var(--input-option-text);

}


/* =========================================================
   UTILITY
   ========================================================= */

.hidden {

    display:
        none !important;

}


.text-green {

    color:
        var(--medium-green);

}


.text-danger {

    color:
        var(--danger);

}


/* =========================================================
   GLOBAL ACCOUNT HOVER CARD
   ========================================================= */

.global-account-card {
    position: fixed;
    width: 280px;
    padding: 16px;

    background: var(--card-background);
    border: 1px solid var(--border);
    border-radius: 14px;

    box-shadow: var(--shadow-lg);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-6px);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease;

    z-index: 999999;

    pointer-events: none;
}

.global-account-card.visible {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}


/* =========================================================
   ACCOUNT HEADER
   ========================================================= */

.global-account-header {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.global-account-avatar {width:
        44px;height:
        44px;border-radius:
        50%;display:
        flex;align-items:
        center;justify-content:
        center;background:
        var(--light-green);color:
        var(--primary-green);font-size:
        13px;font-weight:
        800;overflow:
        hidden;}


.global-hover-avatar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.global-account-user {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.global-hover-name {font-size:
        14px;color:
        var(--text-primary);}


.global-hover-role {font-size:
        10px;font-weight:
        700;color:
        var(--medium-green);text-transform:
        uppercase;}


.global-account-divider {height:
        1px;background:
        var(--border);margin:
        14px 0;}


.global-account-details {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.global-account-details span {font-size:
        11px;color:
        var(--text-secondary);}


.global-account-details strong {font-size:
        13px;color:
        var(--text-primary);}


.global-account-action {margin-top:
        14px;padding-top:
        12px;border-top:
        1px solid
        #dfe9df;color:
        var(--primary-green);font-size:
        12px;font-weight:
        700;border-color:
        var(--border);}


/* =========================================================
   USER PROFILE HOVER
   ========================================================= */

.user-section,
.user-profile {

    transition:
        background-color 0.18s ease,
        transform 0.18s ease;

}


.user-section:hover,
.user-profile:hover {

    background:
        rgba(
            223,
            233,
            223,
            0.55
        );

    transform:
        translateY(-1px);

}


/* =========================================================
   PROFILE IMAGES
   ========================================================= */

.global-user-avatar-image {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    border-radius:
        50%;

}


.global-hover-avatar-image {

    width:
        44px;

    height:
        44px;

    display:
        block;

    object-fit:
        cover;

    border-radius:
        50%;

}


/* =========================================================
   COMMON GREEN HEADER / SECTION ELEMENTS
   ========================================================= */

.green-header {

    background:
        linear-gradient(
            135deg,
            #0f3d2e,
            #1b5e20,
            #2e7d32
        );

    color:
        #ffffff;

}


.green-gradient {

    background:
        linear-gradient(
            90deg,
            #0f3d2e,
            #1b5e20,
            #2e7d32
        );

}


/* =========================================================
   COMMON CARDS
   ========================================================= */

.card,
.section-card,
.work-card,
.dash-card,
.notes-panel,
.placeholder-card,
.phone-helper-card,
.patch-notes-card {background:
        var(--card-background);border:
        1px solid
        var(--border);border-radius:
        var(--radius-lg);box-shadow:
        var(--shadow-md);border-color:
        var(--border);}


/* =========================================================
   COMMON SOFT GREEN PANEL
   ========================================================= */

.soft-green {

    background:
        #f8faf8;

    border:
        1px solid
        var(--border);

}


/* =========================================================
   COMMON ACTIVE ELEMENT
   ========================================================= */

.active-green {

    background:
        linear-gradient(
            90deg,
            #0f3d2e,
            #1b5e20,
            #2e7d32
        );

    color:
        #ffffff;

}


/* =========================================================
   COMMON GOLD ACCENT
   ========================================================= */

.gold-accent {

    color:
        var(--gold);

}


/* =========================================================
   THEME TRANSITIONS
   ========================================================= */

html,
body,
body * {

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;

}


/* =========================================================
   GLOBAL BACKGROUND
   ========================================================= */


/* =========================================================
   COMMON CARDS
   ========================================================= */


/* =========================================================
   INPUTS
   ========================================================= */


/* =========================================================
   NAVIGATION
   ========================================================= */

.navbar,
.nav-bar,
.top-navbar,
header.navbar,
.sidebar {

    background:
        var(--nav-background);

}


/* =========================================================
   NAVIGATION
   ========================================================= */

.nav-item {

    color:
        var(--sidebar-text);

}


.nav-item:hover {

    background:
        var(--sidebar-hover-bg);

    color:
        var(--sidebar-active-text);

}


.nav-item.active {

    background:
        var(--sidebar-active-bg);

    color:
        var(--sidebar-active-text);

}


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

.data-table {

    background:
        var(--card-background);

}


.data-table th {

    background:
        var(--nav-background);

    color:
        var(--white);

}


.data-table td {

    color:
        var(--text-primary);

    border-color:
        var(--border);

}

.data-table tr:nth-child(even) {

    background:
        var(--soft-background);

}


.data-table tr:hover {

    background:
        var(--light-green);

}


/* =========================================================
   LINKS
   ========================================================= */

a {

    color:
        var(--primary-green);

}


a:hover {

    color:
        var(--medium-green);

}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */


/* =========================================================
   PROFILE CARD
   ========================================================= */


/* =========================================================
   COLOR MODE SWITCHER
   ========================================================= */

.color-mode-switcher {

    position:
        fixed;

    right:
        22px;

    bottom:
        22px;

    z-index:
        999999;

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        6px;

    background:
        var(--card-background);

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    box-shadow:
        0 10px 30px
        rgba(
            15,
            61,
            46,
            0.15
        );

}


/* =========================================================
   MODE BUTTON
   ========================================================= */

.color-mode-button {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        none;

    border-radius:
        10px;

    background:
        transparent;

    color:
        var(--text-secondary);

    font-size:
        17px;

    cursor:
        pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;

}


.color-mode-button:hover {

    background:
        var(--light-green);

    color:
        var(--primary-green);

    transform:
        translateY(-1px);

}


/* =========================================================
   ACTIVE MODE
   ========================================================= */

.color-mode-button.active {

    background:
        var(--primary-green);

    color:
        #ffffff;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .color-mode-switcher {

        right:
            12px;

        bottom:
            12px;

    }

}


.sidebar-logo,
.brand-logo,
.logo-icon {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    overflow: hidden !important;

}


.sidebar-logo .ticky-brand-image,
.brand-logo .ticky-brand-image {

    width: 100% !important;

    height: 100% !important;

    object-fit: contain !important;

    display: block !important;

}


.logo-icon .ticky-brand-image {

    width: 100% !important;

    height: 100% !important;

    object-fit: contain !important;

    display: block !important;

}

.login-brand .logo-icon {

    width: 64px !important;

    height: 64px !important;

    flex-shrink: 0;

    padding: 0 !important;

    background: transparent !important;

}

/* =========================================================
   TICKY TICKY CUTE SIDEBAR + BUTTON EFFECTS
   ========================================================= */


/* =========================================================
   SIDEBAR NAV ITEMS
   ========================================================= */

.sidebar-navigation .nav-item {position: relative;overflow: visible !important;transition:
        background-color 0.25s ease,
        transform 0.25s ease;}


/* =========================================================
   HOVER
   ========================================================= */

.sidebar-navigation .nav-item:hover {transform: translateX(4px);padding-left:
        20px;}


   /* =========================================================
   CUTE TICKY TICKY SIDEBAR HOVER
   ========================================================= */


/* Hover movement */


/* Show */

/* =========================================================
   TICKY TICKY CONTENT-BASED SIDEBAR ICONS
   FIXED ASSET PATHS
   ========================================================= */

.sidebar .nav-item {

    position: relative;

    overflow: visible !important;

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;

}


/* =========================================================
   ICON CONTAINER
   ========================================================= */

.sidebar .nav-item .nav-icon {

    width: 40px !important;
    height: 40px !important;

    flex: 0 0 40px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin-right: 10px;

    padding: 0 !important;

    font-size: 0 !important;
    line-height: 0 !important;

    background-color: transparent !important;

    background-repeat: no-repeat !important;

    background-position: center !important;

    background-size: contain !important;

    border: none !important;

    transition:
        transform 0.25s ease,
        filter 0.25s ease;

}


/* =========================================================
   DASHBOARD
   ========================================================= */

.sidebar .nav-item:nth-child(1) .nav-icon {

    background-image:
    var(--brand-dashboard) !important;
}


/* =========================================================
   PROFILING
   ========================================================= */

.sidebar .nav-item:nth-child(2) .nav-icon {

    background-image:
    var(--brand-profiling) !important;

}


/* =========================================================
   WORK ACTIVITY
   ========================================================= */

.sidebar .nav-item:nth-child(3) .nav-icon {

    background-image:
    var(--brand-work-activity) !important;

}


/* =========================================================
   TEAMS
   ========================================================= */

.sidebar .nav-item:nth-child(4) .nav-icon {

   background-image:
    var(--brand-teams) !important;

}


/* =========================================================
   HISTORY
   ========================================================= */

.sidebar .nav-item:nth-child(5) .nav-icon {

    background-image:
    var(--brand-history) !important;

}


/* =========================================================
   REPORTS
   ========================================================= */

.sidebar .nav-item:nth-child(6) .nav-icon {

    background-image:
    var(--brand-reports) !important;

}


/* =========================================================
   HOVER
   ========================================================= */

.sidebar .nav-item:hover {

    transform:
        translateX(3px);

}

/* Dashboard */

.sidebar .nav-item:nth-child(1):hover .nav-icon {

    transform:
        translateY(-3px)
        rotate(-4deg)
        scale(1.08);

}

/* Profiling */

.sidebar .nav-item:nth-child(2):hover .nav-icon {

    transform:
        translateY(-3px)
        rotate(5deg)
        scale(1.08);

}

/* Work Activity */

.sidebar .nav-item:nth-child(3):hover .nav-icon {

    animation:
        tickyWorkBounce
        0.65s
        ease-in-out
        infinite;

}

/* Teams */

.sidebar .nav-item:nth-child(4):hover .nav-icon {

    animation:
        tickyTeamsBounce
        0.8s
        ease-in-out
        infinite;

}

/* History */

.sidebar .nav-item:nth-child(5):hover .nav-icon {

    transform:
        translateY(-3px)
        rotate(-3deg)
        scale(1.07);

}

/* Reports */

.sidebar .nav-item:nth-child(6):hover .nav-icon {

    animation:
        tickyReportsPop
        0.7s
        ease-in-out
        infinite;

}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes tickyWorkBounce {

    0%,
    100% {

        transform:
            translateY(0)
            scale(1);

    }

    50% {

        transform:
            translateY(-6px)
            scale(1.08);

    }

}


@keyframes tickyTeamsBounce {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg)
            scale(1);

    }

    25% {

        transform:
            translateY(-3px)
            rotate(5deg)
            scale(1.05);

    }

    75% {

        transform:
            translateY(-3px)
            rotate(-5deg)
            scale(1.05);

    }

}


@keyframes tickyReportsPop {

    0%,
    100% {

        transform:
            translateY(0)
            scale(1);

    }

    50% {

        transform:
            translateY(-5px)
            scale(1.10);

    }

}


/* =========================================================
   REMOVE OLD POP-OUT MASCOT
   ========================================================= */

.sidebar .nav-item::after {

    display: none !important;

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    .sidebar .nav-item,
    .sidebar .nav-item .nav-icon {

        animation: none !important;

        transition: none !important;

    }

}
/* =========================================================
   SIDEBAR ACTIVE TEXT VISIBILITY
   ========================================================= */

.sidebar .nav-item.active,
.sidebar .nav-item.active span,
.sidebar .nav-item.active .nav-label,
.sidebar .nav-item.active .nav-icon {
    color: #ffffff !important;
}


/* Active icon stays visible */

.sidebar .nav-item.active .nav-icon {filter: none !important;opacity: 1 !important;}


/* =========================================================
   TICKY TICKY LOGOUT
   ========================================================= */

#logoutButton {position: relative;overflow: visible !important;transition:
        background-color 0.25s ease,
        transform 0.25s ease;color:
        rgba(
            255,
            255,
            255,
            0.88
        ) !important;}


/* ---------------------------------------------------------
   LOGOUT ICON
   --------------------------------------------------------- */

#logoutButton .nav-icon {

    width: 40px !important;
    height: 40px !important;

    flex: 0 0 40px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin-right: 10px;

    padding: 0 !important;

    font-size: 0 !important;
    line-height: 0;

    background-color:
        transparent !important;

    background-image:
        var(--brand-logout) !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center !important;

    background-size:
        contain !important;

    border:
        none !important;

    transition:
        transform 0.25s ease;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

#logoutButton:hover {transform:
        translateX(4px);color:
        #ffffff !important;}


#logoutButton:hover .nav-icon {

    animation:
        tickyGoodbye 0.85s ease-in-out infinite;

}


/* ---------------------------------------------------------
   GOODBYE ANIMATION
   --------------------------------------------------------- */

@keyframes tickyGoodbye {

    0% {

        transform:
            translateX(0)
            rotate(0deg)
            scale(1);

    }

    20% {

        transform:
            translateX(1px)
            rotate(-5deg)
            scale(1.03);

    }

    40% {

        transform:
            translateX(3px)
            rotate(7deg)
            scale(1.06);

    }

    60% {

        transform:
            translateX(6px)
            rotate(-4deg)
            scale(1.05);

    }

    80% {

        transform:
            translateX(9px)
            rotate(3deg)
            scale(1.03);

    }

    100% {

        transform:
            translateX(12px)
            rotate(0deg)
            scale(0.98);

    }

}


/* ---------------------------------------------------------
   LOGOUT TEXT
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
    prefers-reduced-motion: reduce
) {

    #logoutButton,
    #logoutButton .nav-icon {

        animation:
            none !important;

        transition:
            none !important;

    }

}


/* =========================================================
   SAFE GLOBAL ACCOUNT CARD OVERRIDES
   ========================================================= */
.global-account-avatar .global-user-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.global-account-name,
.global-account-role {
    overflow-wrap: anywhere;
}

/* The account summary intentionally contains no internal account identifier. */
.global-account-manage {
    display: block;
    color: var(--primary-green);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.global-account-manage:hover {
    text-decoration: underline;
}

/* =========================================================
   GLOBAL MOBILE NAVIGATION + THEME SWITCHER FIX
   ========================================================= */


/* ---------------------------------------------------------
   MOBILE MENU BUTTON
   --------------------------------------------------------- */

.mobile-menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--card-background);
    color: var(--text-primary);

    font-size: 22px;
    line-height: 1;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    flex-shrink: 0;

    position: relative;
    z-index: 10002;
}


/* ---------------------------------------------------------
   SIDEBAR OVERLAY
   --------------------------------------------------------- */

.sidebar-mobile-overlay {
    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.45);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;

    z-index: 10000;
}


.sidebar-mobile-overlay.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* ---------------------------------------------------------
   PREVENT BODY SCROLL WHEN MENU IS OPEN
   --------------------------------------------------------- */

body.mobile-menu-open {
    overflow: hidden;
}


/* ---------------------------------------------------------
   MAKE SURE CONTENT CAN BE CLICKED
   --------------------------------------------------------- */

.dashboard-main,
.main-content,
.dashboard-content,
.page-content {
    position: relative;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {


    /* -----------------------------------------------------
       MAIN LAYOUT
       ----------------------------------------------------- */

    .dashboard-layout {
        display: block;
    }


    .dashboard-main,
    .main-content {
        margin-left: 0 !important;

        width: 100% !important;

        min-width: 0;
    }


    /* -----------------------------------------------------
       SIDEBAR DRAWER
       ----------------------------------------------------- */

    .sidebar {
        display: flex !important;

        position: fixed !important;

        top: 0;
        left: 0;
        bottom: 0;

        width: min(82vw, 300px) !important;
        min-height: 100dvh;

        transform: translateX(-105%);

        transition:
            transform 0.28s ease;

        z-index: 10001 !important;

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

        box-shadow:
            12px 0 35px rgba(0, 0, 0, 0.18);
    }


    .sidebar.mobile-open {
        transform: translateX(0);
    }


    /* -----------------------------------------------------
       SIDEBAR CONTENT
       ----------------------------------------------------- */

    .sidebar-brand {
        min-height: 70px;

        height: 70px;

        padding: 0 18px;

        flex-shrink: 0;
    }


    .sidebar-navigation {
        padding: 16px 12px 24px;

        gap: 7px;
    }


    .sidebar-bottom {
        margin-top: auto;

        padding: 12px;
    }


    .nav-item {
        min-height: 46px;

        padding: 11px 14px;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       TOPBAR
       ----------------------------------------------------- */

    .topbar {
        min-height: 70px;

        height: auto;

        padding: 12px 16px !important;

        gap: 12px;
    }


    .mobile-menu-toggle {
        display: inline-flex;
    }


    .topbar-title {
        min-width: 0;

        flex: 1;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;
    }


    .user-section {
        flex-shrink: 0;

        gap: 8px;
    }


    /* -----------------------------------------------------
       CONTENT SPACING
       IMPORTANT:
       Creates empty space below the page so the fixed
       theme switcher does NOT cover pagination or buttons.
       ----------------------------------------------------- */

    .dashboard-content,
    .page-content,
    .work-timer-content,
    .history-content,
    .reports-content,
    .teams-content,
    .profiling-content,
    .main-content {
        padding-bottom: 110px !important;
    }


    /* -----------------------------------------------------
       THEME SWITCHER
       ----------------------------------------------------- */

    .color-mode-switcher {
        right: 14px !important;

        bottom: max(
            14px,
            env(safe-area-inset-bottom)
        ) !important;

        z-index: 9000 !important;

        max-width: calc(100vw - 28px);

        box-sizing: border-box;
    }


    .color-mode-button {
        width: 42px !important;

        height: 42px !important;

        flex-shrink: 0;
    }


    /* -----------------------------------------------------
       PAGINATION MUST STAY CLICKABLE
       ----------------------------------------------------- */

    .report-pagination,
    .history-pagination,
    .pagination-controls,
    .history-pagination-controls {
        position: relative;

        z-index: 1;
    }


    /* -----------------------------------------------------
       GENERIC ACTION BUTTONS
       ----------------------------------------------------- */

    .pagination-button,
    .history-page-button,
    .next-button,
    .previous-button,
    .continue-button,
    .cancel-button {
        position: relative;

        z-index: 2;

        min-height: 44px;
    }


    /* -----------------------------------------------------
       RESPONSIVE TABLE SCROLLING
       ----------------------------------------------------- */

    .report-table-card,
    .history-table-wrapper,
    .table-wrapper,
    .data-table-wrapper {
        max-width: 100%;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {


    .topbar {
        padding:
            10px
            12px !important;
    }


    .mobile-menu-toggle {
        width: 40px;

        height: 40px;

        font-size: 20px;
    }


    .sidebar {
        width: min(86vw, 300px) !important;
    }


    .dashboard-content,
    .page-content,
    .work-timer-content,
    .history-content,
    .reports-content,
    .teams-content,
    .profiling-content,
    .main-content {
        padding-bottom: 120px !important;
    }


    .color-mode-switcher {
        right: 10px !important;

        bottom: max(
            10px,
            env(safe-area-inset-bottom)
        ) !important;

        padding: 5px !important;

        gap: 4px !important;
    }


    .color-mode-button {
        width: 40px !important;

        height: 40px !important;

        font-size: 16px !important;
    }


    .pagination-controls,
    .history-pagination-controls {
        width: 100%;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);

        gap: 8px;
    }


    .pagination-button,
    .history-page-button {
        min-width: 0 !important;

        width: 100%;
    }

}