/* //////////////////////////////////// */
/* THEMES */
/* //////////////////////////////////// */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

[data-theme=theme1] {
    --background-main: #ffffff;
    --background-main-elements: #f1f1f1;
    --background-accent: #2196f3;
    --text-main: #333333;
    --text-faded: #888888;
    --button-positive: #2196f3;
    --button-positive-faded: #63b6f7;
    --button-positive-hover: #1976d2;
    --button-neutral: #9e9e9e;
    --button-neutral-hover: #757575;
    --button-negative: #f44336;
    --button-negative-hover: #d32f2f;
    --button-positive-text: #ffffff;
    --button-neutral-text: #ffffff;
    --button-negative-text: #ffffff;
    --button-positive-border: #1565c0;
    --button-neutral-border: #616161;
    --button-negative-border: #b71c1c;
    --border-color: #dddddd;
    --shadow-color: rgba(0, 0, 0, 0.2);
    --context-menu-background: #ffffff;
    --context-menu-border: #dddddd;
    --context-menu-option-separator: #eeeeee;
    --context-menu-option-hover: #f5f5f5;
    --table-header-background: #f2f2f2;
    --background-main-elements-select-hover-primary: #f0f0f0;
    --background-main-elements-select-hover-faded: #f2f2f2;
    --light-colored-employee-background: #dae9f5;
    --label-positive: #60c43c;
}

[data-theme=theme2] {
    --background-main: #ffffff;
    --background-main-elements: #eeeeee;
    --background-accent: #000000;
    --text-main: #000000;
    --text-faded: #4f4f4f;
    --button-positive: #000000;
    --button-positive-faded: #d1d1d1;
    --button-positive-hover: #292929;
    --button-neutral: #666666;
    --button-neutral-hover: #555555;
    --button-negative: #ff0000;
    --button-negative-hover: #cc0000;
    --button-positive-text: #ffffff;
    --button-neutral-text: #ffffff;
    --button-negative-text: #ffffff;
    --button-positive-border: #000000;
    --button-neutral-border: #444444;
    --button-negative-border: #990000;
    --border-color: #000000;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --context-menu-background: #fafafa;
    --context-menu-border: #000000;
    --context-menu-option-separator: #e0e0e0;
    --context-menu-option-hover: #f0f0f0;
    --table-header-background: #dddddd;
    --background-main-elements-select-hover-primary: #cccccc;
    --background-main-elements-select-hover-faded: #bbbbbb;
    --light-colored-employee-background: #dddddd;
    --label-positive: #60c43c;
}

[data-theme=theme3] {
    --background-main: #f0e9d2;
    --background-main-elements: #fffce0;
    --background-accent: #00bcd4;
    --text-main: #333333;
    --text-faded: #7f7f7f;
    --button-positive: #ff9800;
    --button-positive-faded: #f7b452;
    --button-positive-hover: #fb8c00;
    --button-neutral: #ff9800;
    --button-neutral-hover: #fb8c00;
    --button-negative: #f44336;
    --button-negative-hover: #e53935;
    --button-positive-text: #333333;
    --button-neutral-text: #333333;
    --button-negative-text: #ffffff;
    --button-positive-border: #c7b827;
    --button-neutral-border: #c77700;
    --button-negative-border: #a71d2a;
    --border-color: #ccc292;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --context-menu-background: #fffad0;
    --context-menu-border: #ccc292;
    --context-menu-option-separator: #ebe3b5;
    --context-menu-option-hover: #f2ecc6;
    --table-header-background: #ede8c7;
    --background-main-elements-select-hover-primary: #e7dfb8;
    --background-main-elements-select-hover-faded: #dfd8ab;
    --light-colored-employee-background: #ede8c7;
    --label-positive: #60c43c;
}

[data-theme=theme4] {
    --background-main: #fff0f6;
    --background-main-elements: #ffe6ef;
    --background-accent: #ff4d88;
    --text-main: #3a3a3a;
    --text-faded: #9a9a9a;
    --button-positive: #ff80a6;
    --button-positive-faded: #fc9db9;
    --button-positive-hover: #ff6692;
    --button-neutral: #ff4d88;
    --button-neutral-hover: #e6447a;
    --button-negative: #ff1744;
    --button-negative-hover: #d50032;
    --button-positive-text: #ffffff;
    --button-neutral-text: #ffffff;
    --button-negative-text: #ffffff;
    --button-positive-border: #cc6883;
    --button-neutral-border: #b63e66;
    --button-negative-border: #990022;
    --border-color: #ffcce0;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --context-menu-background: #ffe0eb;
    --context-menu-border: #ffcce0;
    --context-menu-option-separator: #ffbbd6;
    --context-menu-option-hover: #ffd6ea;
    --table-header-background: #ffccd6;
    --background-main-elements-select-hover-primary: #ffbcd0;
    --background-main-elements-select-hover-faded: #ffabc8;
    --light-colored-employee-background: #ffccd6;
    --label-positive: #60c43c;
}

[data-theme=theme5] {
    --background-main: #f7f1e1;
    --background-main-elements: #fdfaf5;
    --background-accent: #c2b280;
    --text-main: #333333;
    --text-faded: #777777;
    --button-positive: #b5a67d;
    --button-positive-faded: #b5ac94;
    --button-positive-hover: #9c916e;
    --button-neutral: #8d8d8d;
    --button-neutral-hover: #7b7b7b;
    --button-negative: #cc4b4b;
    --button-negative-hover: #b23c3c;
    --button-positive-text: #333333;
    --button-neutral-text: #ffffff;
    --button-negative-text: #ffffff;
    --button-positive-border: #877b5f;
    --button-neutral-border: #6c6c6c;
    --button-negative-border: #8e2b2b;
    --border-color: #ddd1bd;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --context-menu-background: #fdfaf5;
    --context-menu-border: #ddd1bd;
    --context-menu-option-separator: #ebe2cc;
    --context-menu-option-hover: #f3ede2;
    --table-header-background: #e8e0cd;
    --background-main-elements-select-hover-primary: #eee7d6;
    --background-main-elements-select-hover-faded: #e2d8c3;
    --light-colored-employee-background: #e8e0cd;
    --label-positive: #60c43c;
}

[data-theme=theme6] {
    --background-main: #1a1b26;
    --background-main-elements: #24283b;
    --background-accent: #7aa2f7;
    --text-main: #c0caf5;
    --text-faded: #a9b1d6;
    --button-positive: #9ece6a;
    --button-positive-faded: #aac987;
    --button-positive-hover: #7cab59;
    --button-neutral: #6c757d;
    --button-neutral-hover: #5a6268;
    --button-negative: #f7768e;
    --button-negative-hover: #d24d68;
    --button-positive-text: #1a1b26;
    --button-neutral-text: #c0caf5;
    --button-negative-text: #1a1b26;
    --button-positive-border: #73c366;
    --button-neutral-border: #5c636a;
    --button-negative-border: #b14c5a;
    --border-color: #414868;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --context-menu-background: #1f2335;
    --context-menu-border: #414868;
    --context-menu-option-separator: #363c52;
    --context-menu-option-hover: #2a2f45;
    --table-header-background: #292e42;
    --background-main-elements-select-hover-primary: #32344a;
    --background-main-elements-select-hover-faded: #353a50;
    --light-colored-employee-background: #bbd1e8;
    --label-positive: #00f76f;
}

[data-theme=theme7] {
    --background-main: #0b0f28;
    --background-main-elements: #161d3a;
    --background-accent: #ffb300;
    --text-main: #ffffff;
    --text-faded: #b0b0b0;
    --button-positive: #ffb300;
    --button-positive-faded: #ffc53d;
    --button-positive-hover: #c98d00;
    --button-neutral: #6c757d;
    --button-neutral-hover: #5a6268;
    --button-negative: #dc3545;
    --button-negative-hover: #b02a37;
    --button-positive-text: #0b0f28;
    --button-neutral-text: #ffffff;
    --button-negative-text: #ffffff;
    --button-positive-border: #cc8e00;
    --button-neutral-border: #5c636a;
    --button-negative-border: #a71d2a;
    --border-color: #2f3550;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --context-menu-background: #1d2345;
    --context-menu-border: #2f3550;
    --context-menu-option-separator: #242b4a;
    --context-menu-option-hover: #20264a;
    --table-header-background: #242b4a;
    --background-main-elements-select-hover-primary: #2a3054;
    --background-main-elements-select-hover-faded: #303667;
    --light-colored-employee-background: #b6cbe1;
    --label-positive: #00f76f;
}

[data-theme=theme8] {
    --background-main: #0c0c0c;
    --background-main-elements: #101010;
    --background-accent: #39ff14;
    --text-main: #ffffff;
    --text-faded: #a0a0a0;
    --button-positive: #0aff54;
    --button-positive-faded: #49fc7f;
    --button-positive-hover: #06e148;
    --button-neutral: #6c757d;
    --button-neutral-hover: #5a6268;
    --button-negative: #dc3545;
    --button-negative-hover: #b02a37;
    --button-positive-text: #0c0c0c;
    --button-neutral-text: #ffffff;
    --button-negative-text: #ffffff;
    --button-positive-border: #08c943;
    --button-neutral-border: #5c636a;
    --button-negative-border: #a71d2a;
    --border-color: #444444;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --context-menu-background: #141414;
    --context-menu-border: #444444;
    --context-menu-option-separator: #1f1f1f;
    --context-menu-option-hover: #1a1a1a;
    --table-header-background: #181818;
    --background-main-elements-select-hover-primary: #1a1a1a;
    --background-main-elements-select-hover-faded: #333333;
    --light-colored-employee-background: #8be78b;
    --label-positive: #00f76f;
}

[data-theme=theme9] {
    --background-main: #0f0c29;
    --background-main-elements: #302b63;
    --background-accent: #2ceef0;
    --text-main: #ffffff;
    --text-faded: #c9c9f3;
    --button-positive: #83eaf1;
    --button-positive-faded: #a2edf2;
    --button-positive-hover: #72d3d8;
    --button-neutral: #a770ef;
    --button-neutral-hover: #8f60cc;
    --button-negative: #ff0080;
    --button-negative-hover: #d6006a;
    --button-positive-text: #0f0c29;
    --button-neutral-text: #ffffff;
    --button-negative-text: #ffffff;
    --button-positive-border: #60c3c8;
    --button-neutral-border: #875ace;
    --button-negative-border: #b8005b;
    --border-color: #000000;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --context-menu-background: #392e72;
    --context-menu-border: #2b2960;
    --context-menu-option-separator: #42347d;
    --context-menu-option-hover: #4a3b8a;
    --table-header-background: #45367e;
    --background-main-elements-select-hover-primary: #3e3172;
    --background-main-elements-select-hover-faded: #44367a;
    --light-colored-employee-background: #d8bff6;
    --label-positive: #00f76f;
}

[data-theme=theme10] {
    --background-main: #1e1a12;
    --background-main-elements: #292418;
    --background-accent: #ff9800;
    --text-main: #ffffff;
    --text-faded: #b0a895;
    --button-positive: #ffb300;
    --button-positive-faded: #ffc53d;
    --button-positive-hover: #ffaa00;
    --button-neutral: #d2a85a;
    --button-neutral-hover: #b89354;
    --button-negative: #f44336;
    --button-negative-hover: #d32f2f;
    --button-positive-text: #000000;
    --button-neutral-text: #ffffff;
    --button-negative-text: #ffffff;
    --button-positive-border: #ffa000;
    --button-neutral-border: #a68048;
    --button-negative-border: #a71d2a;
    --border-color: #444029;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --context-menu-background: #2e271b;
    --context-menu-border: #444029;
    --context-menu-option-separator: #3c3620;
    --context-menu-option-hover: #453c22;
    --table-header-background: #37311f;
    --background-main-elements-select-hover-primary: #3a321c;
    --background-main-elements-select-hover-faded: #4a4225;
    --light-colored-employee-background: #e8ded3;
    --label-positive: #00f76f;
}

[data-theme=theme11] {
    --background-main: #1b0033;
    --background-main-elements: #24003d;
    --background-accent: #9d00ff;
    --text-main: #ffffff;
    --text-faded: #b8a0c8;
    --button-positive: #8c43ff;
    --button-positive-faded: #a870ff;
    --button-positive-hover: #7a3ae0;
    --button-neutral: #6c757d;
    --button-neutral-hover: #5a6268;
    --button-negative: #dc3545;
    --button-negative-hover: #b02a37;
    --button-positive-text: #ffffff;
    --button-neutral-text: #ffffff;
    --button-negative-text: #ffffff;
    --button-positive-border: #5f2cb2;
    --button-neutral-border: #5c636a;
    --button-negative-border: #a71d2a;
    --border-color: #441155;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --context-menu-background: #30004a;
    --context-menu-border: #441155;
    --context-menu-option-separator: #3c003f;
    --context-menu-option-hover: #3f0052;
    --table-header-background: #3b0047;
    --background-main-elements-select-hover-primary: #341e44;
    --background-main-elements-select-hover-faded: #452d56;
    --light-colored-employee-background: #d8bff6;
    --label-positive: #00f76f;
}

[data-theme=theme12] {
    --background-main: #000000;
    --background-main-elements: #000000;
    --background-accent: #ffff00;
    --text-main: #ffffff;
    --text-faded: #b3b3b3;
    --button-positive: #ffffff;
    --button-positive-faded: #c9c9c9;
    --button-positive-hover: #e0e0e0;
    --button-neutral: #888888;
    --button-neutral-hover: #757575;
    --button-negative: #ff0000;
    --button-negative-hover: #cc0000;
    --button-positive-text: #000000;
    --button-neutral-text: #ffffff;
    --button-negative-text: #ffffff;
    --button-positive-border: #cccccc;
    --button-neutral-border: #666666;
    --button-negative-border: #990000;
    --border-color: #ffffff;
    --shadow-color: rgba(255, 255, 255, 0.5);
    --context-menu-background: #000000;
    --context-menu-border: #ffffff;
    --context-menu-option-separator: #333333;
    --context-menu-option-hover: #111111;
    --table-header-background: #111111;
    --background-main-elements-select-hover-primary: #222222;
    --background-main-elements-select-hover-faded: #333333;
    --light-colored-employee-background: #fcfcfc;
    --label-positive: #00f76f;
}

[data-theme=theme13] {
    --background-main: #0b1913;
    --background-main-elements: #112821;
    --background-accent: #3fa34d;
    --text-main: #dfe6e1;
    --text-faded: #99a8a0;
    --button-positive: #3fa34d;
    --button-positive-faded: #57a161;
    --button-positive-hover: #358c42;
    --button-neutral: #6c757d;
    --button-neutral-hover: #5a6268;
    --button-negative: #dc3545;
    --button-negative-hover: #b02a37;
    --button-positive-text: #ffffff;
    --button-neutral-text: #ffffff;
    --button-negative-text: #ffffff;
    --button-positive-border: #2b6f35;
    --button-neutral-border: #5c636a;
    --button-negative-border: #a71d2a;
    --border-color: #334f40;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --context-menu-background: #132f25;
    --context-menu-border: #334f40;
    --context-menu-option-separator: #1f2d26;
    --context-menu-option-hover: #1b3429;
    --table-header-background: #1a372d;
    --background-main-elements-select-hover-primary: #1e4236;
    --background-main-elements-select-hover-faded: #264e43;
    --light-colored-employee-background: #90a889;
    --label-positive: #00f76f;
}

[data-theme=theme14] {
    --background-main: #2f241e;
    --background-main-elements: #3e3027;
    --background-accent: #e1ad01;
    --text-main: #f2f2f2;
    --text-faded: #bfbdb9;
    --button-positive: #dabd74;
    --button-positive-faded: #d9c491;
    --button-positive-hover: #bca461;
    --button-neutral: #a8926f;
    --button-neutral-hover: #957f5f;
    --button-negative: #c94c4c;
    --button-negative-hover: #a53e3e;
    --button-positive-text: #2f241e;
    --button-neutral-text: #2f241e;
    --button-negative-text: #f2f2f2;
    --button-positive-border: #b59f58;
    --button-neutral-border: #7f6a50;
    --button-negative-border: #843232;
    --border-color: #5c4b3f;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --context-menu-background: #3e3027;
    --context-menu-border: #5c4b3f;
    --context-menu-option-separator: #4a3a2e;
    --context-menu-option-hover: #45372c;
    --table-header-background: #3a2e25;
    --background-main-elements-select-hover-primary: #423429;
    --background-main-elements-select-hover-faded: #4d3f33;
    --light-colored-employee-background: #edd7ae;
    --label-positive: #00f76f;
}

[data-theme=theme15] {
    --background-main: #2d1e1e;
    --background-main-elements: #3b2626;
    --background-accent: #f47c48;
    --text-main: #ffffff;
    --text-faded: #d6c7c7;
    --button-positive: #fdae61;
    --button-positive-faded: #ffca96;
    --button-positive-hover: #f99546;
    --button-neutral: #feb47b;
    --button-neutral-hover: #fda060;
    --button-negative: #f45c48;
    --button-negative-hover: #d14b38;
    --button-positive-text: #2d1e1e;
    --button-neutral-text: #2d1e1e;
    --button-negative-text: #ffffff;
    --button-positive-border: #cd7d31;
    --button-neutral-border: #d3864f;
    --button-negative-border: #a63628;
    --border-color: #4a3333;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --context-menu-background: #3b2626;
    --context-menu-border: #4a3333;
    --context-menu-option-separator: #462f2f;
    --context-menu-option-hover: #4e3636;
    --table-header-background: #432f2f;
    --background-main-elements-select-hover-primary: #4a3434;
    --background-main-elements-select-hover-faded: #544040;
    --light-colored-employee-background: #cb9c95;
    --label-positive: #00f76f;
}

[data-theme=theme16] {
    --background-main: #262011;
    --background-main-elements: #3b2f17;
    --background-accent: #ff8c00;
    --text-main: #ffffff;
    --text-faded: #c3ad88;
    --button-positive: #c15600;
    --button-positive-faded: #bf7336;
    --button-positive-hover: #a84b00;
    --button-neutral: #a06000;
    --button-neutral-hover: #805000;
    --button-negative: #b02a37;
    --button-negative-hover: #8e1d29;
    --button-positive-text: #ffffff;
    --button-neutral-text: #ffffff;
    --button-negative-text: #ffffff;
    --button-positive-border: #804000;
    --button-neutral-border: #6c4f00;
    --button-negative-border: #63171e;
    --border-color: #4a3d26;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --context-menu-background: #3b2f17;
    --context-menu-border: #4a3d26;
    --context-menu-option-separator: #4b3f2a;
    --context-menu-option-hover: #4f442c;
    --table-header-background: #43391f;
    --background-main-elements-select-hover-primary: #4b3f2a;
    --background-main-elements-select-hover-faded: #594a32;
    --light-colored-employee-background: #f7d4b5;
    --label-positive: #00f76f;
}

/* //////////////////////////////////// */
/* //////////////////////////////////// */



/* //////////////////////////////////// */
/* MAIN BODY CONTAINER */
/* //////////////////////////////////// */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'DM Sans', sans-serif;
    background-color: var(--background-main);
}

main {
    margin-top: 40px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* //////////////////////////////////// */
/* //////////////////////////////////// */



/* //////////////////////////////////// */
/* HEADER */
/* //////////////////////////////////// */

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--background-main);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

@media (min-width: 1375px) {
    .nav-item .nav-link.current-page {
        background-color: rgba(0, 123, 255, 0.15);
    }
}

.navbar-brand svg {
    height: 37px; /* Adjust based on your navbar size */
    width: 37px;
    fill: var(--button-positive-text);
}

.navbar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: var(--button-positive);
    height: 100%;
    width: 80px;
}

    .navbar-brand:hover {
        cursor: pointer;
    }

.navbar {
    height: 40px;
    display: flex;
    align-items: center;
}

    .navbar .container-fluid {
        display: flex;
        align-items: center;
        padding: 0;
        width: 100%;
        height: 100%;
    }

.navbar-brand {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--button-positive);
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

    .navbar-brand:hover {
        color: var(--button-positive-hover);
    }

.navbar-collapse {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.navbar-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    margin: 0;
    height: 100%;
}

.unread-messages-indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    font-weight: bold;
}

    .unread-messages-indicator.hidden {
        display: none;
    }

.badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.hidden {
    display: none !important;
}

#pending-leave-indicator {
    position: absolute;
    top: 4px;
    left: 10px;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    font-weight: bold;
}

/* Navigation Items */
.nav-item {
    height: 100%;
    display: flex;
    align-items: center;
    max-height: 50px;
}

.nav-link {
    user-select: none;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 4px;
    font-size: 14px;
    gap: 2px;
    border-radius: 4px;
    color: var(--text-main);
    text-decoration: none;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

@media (min-width: 1375px) {
    .nav-link:hover {
        background-color: rgba(0, 123, 255, 0.15);
    }
}

/* Button Styling */
.nav-item form {
    height: 100%;
}

.nav-item-btn {
    height: 100%;
    background: none;
    border: none;
    padding: 0 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 4px;
    color: var(--text-main);
    transition: background-color 0.2s ease;
}

@media (min-width: 1375px) {
    .nav-item-btn:hover {
        background-color: var(--button-negative);
        color: var(--button-negative-text);
    }
}

/* Icon Alignment */
.settings-icon i {
    margin-right: 0;
}

/* Right-aligned items */
.navbar-nav:last-child {
    margin-left: auto;
}

/* Responsive adjustments */
.header-desktop {
    display: block;
}

.header-mobile {
    display: none;
}



.nav-dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--button-positive);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

#locationDropdown {
    font-size: 16px;
    font-weight: bold;
    padding: 0 10px;
    border: none;
    background-color: var(--background-main-elements-select-hover-primary);
    color: var(--text-main);
    width: 150px;
    height: 100%;
    cursor: pointer;
    outline: none;
    appearance: none;
    text-align: left;
    text-align-last: center;
    border-radius: 4px;
}

@media (min-width: 1375px) {
    .nav-dropdown:hover .dropdown-menu {
        display: block;
    }
}

.dropdown-item {
    display: block;
    padding: 10px 15px;
    color: var(--button-positive-text);
    text-decoration: none;
    transition: background 0.3s ease;
    font-size: 14px;
}

    .dropdown-item:hover {
        background: var(--button-positive-hover);
    }

.mobile-location-selector {
    padding: 1rem;
    background-color: var(--button-positive-hover);
}

    .mobile-location-selector select.form-select {
        width: 100%;
        padding: 0.5rem 0.75rem;
        font-size: 20px;
        line-height: 1.5;
        color: var(--button-positive-text);
        background-color: var(--button-positive-hover);
        border: none;
        cursor: pointer;
    }

        .mobile-location-selector select.form-select:focus {
            outline: none;
            border-color: none;
        }

@media (max-width: 1124px) {
    .dropdown-menu {
        display: none;
    }
}
/* If viewport width is < 1375px, hide desktop and show mobile */
@media (max-width: 1375px) {
    .header-desktop {
        display: none;
    }

    .header-mobile {
        display: block;
    }

    header {
        border-bottom: none;
    }

    .navbar-brand {
        width: 100%;
        z-index: 1100;
    }

    .mobile-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--button-positive-hover);
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        padding: 0;
        z-index: 1000;
        transform: translateY(-100%);
        transition: transform 0.4s ease-in-out;
    }

    .navbar-nav {
        padding-top: 40px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .show-menu {
        transform: translateY(0);
    }

    .nav-link, .nav-item-btn {
        font-size: 20px;
        color: var(--button-positive-text);
    }

    .nav-dropdown {
        display: flex;
        flex-direction: column;
    }

    .dropdown-menu {
        flex-direction: row;
        justify-content: space-between;
        position: static;
        overflow: unset;
        flex-wrap: wrap;
        background: none;
        box-shadow: none;
        border-radius: 0px;
        width: 400px;
        top: 90px;
        background-color: var(--button-positive);
        border-radius: 8px;
        margin-bottom: 10px;
    }

        .dropdown-menu > * {
            width: calc(50% - 5px);
            margin-bottom: 5px;
        }

    .dropdown-item {
        font-size: 18px;
        text-align: center;
    }

        .dropdown-item:hover {
            background: none;
            color: var(--button-positive-text);
        }

    .nav-dropdown.active .dropdown-menu {
        display: flex;
    }
}

@media (max-width: 410px) {
    .dropdown-menu {
        width: 270px;
    }
}

/* //////////////////////////////////// */
/* //////////////////////////////////// */



/* //////////////////////////////////// */
/* CONTEXT MENUS */
/* //////////////////////////////////// */

.context-menu {
    position: absolute;
    background-color: var(--context-menu-background);
    border: 2px solid var(--context-menu-border);
    box-shadow: 0px 4px 8px var(--shadow-color);
    display: none;
    z-index: 1000;
    text-align: center;
    color: var(--text-main);
    overflow-y: auto;
    max-height: 300px;
}

    .context-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .context-menu li {
        padding: 5px 25px;
        cursor: pointer;
        border-bottom: 1px solid var(--context-menu-option-separator);
    }

        .context-menu li:hover {
            background-color: var(--context-menu-option-hover);
        }

.delete-tab {
    color: var(--button-negative);
}

/* //////////////////////////////////// */
/* //////////////////////////////////// */



/* //////////////////////////////////// */
/* Overlays */
/* //////////////////////////////////// */

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 99999;
}

/* //////////////////////////////////// */
/* //////////////////////////////////// */



/* //////////////////////////////////// */
/* TOOLTIPS */
/* //////////////////////////////////// */

.tooltip {
    position: absolute;
    background-color: var(--text-main);
    color: var(--background-main-elements);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    pointer-events: none;
    z-index: 1000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    display: none;
}

/* //////////////////////////////////// */
/* //////////////////////////////////// */



/* //////////////////////////////////// */
/* NOTIFICATIONS */
/* //////////////////////////////////// */

.notification-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 90vw;
    /* MAX z-index */
    z-index: 2147483647;
    /* 🔥 BREAK OUT of all parent stacking contexts */
    isolation: isolate;
    pointer-events: none;
}


.notification {
    background-color: var(--background-main-elements);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    box-shadow: 0 8px 24px var(--shadow-color);
    max-width: min(480px, 90vw);
    opacity: 0;
    padding: 9px 16px;
    pointer-events: auto;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

    .notification.show {
        opacity: 1;
        transform: translateY(0);
    }

    .notification.success .notification-icon {
        color: var(--button-positive);
    }

    .notification.error .notification-icon {
        color: var(--button-negative);
    }

    .notification.info .notification-icon {
        color: var(--text-faded);
    }

.notification-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-message {
    color: var(--text-main);
    flex-grow: 1;
    font-size: 13px;
    font-weight: 500;
}

.notification-close {
    background: none;
    border: none;
    color: var(--text-faded);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 0 0 2px;
}

    .notification-close:hover {
        color: var(--text-main);
    }

/* //////////////////////////////////// */
/* //////////////////////////////////// */



/* //////////////////////////////////// */
/* AUTHENTICATION PAGES */
/* //////////////////////////////////// */

.auth-container {
    padding: 20px;
    position: absolute;
    z-index: 100;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    width: 90vw;
    max-width: 500px;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 30px;
    position: relative;
    z-index: 100;
}

.auth-header {
    text-align: center;
    margin-bottom: 30px;
}

.auth-title {
    font-size: 24px;
    color: var(--text);
    font-weight: bold;
    margin-bottom: 10px;
}

.auth-subtitle {
    color: var(--faded-text);
    font-size: 14px;
}

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

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    color: var(--text);
    font-weight: 500;
    font-size: 14px;
}

.form-input {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

    .form-input:focus {
        outline: none;
        border-color: var(--accent);
    }

.form-error {
    color: var(--error);
    font-size: 12px;
    margin-top: 4px;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-label {
    color: var(--text);
    font-size: 14px;
    user-select: none;
}

.auth-button {
    background-color: var(--accent);
    color: var(--accent-text);
    border: none;
    padding: 12px;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 100%;
}

    .auth-button:hover {
        background-color: var(--accent-hover);
    }

.auth-links {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 14px;
}

.auth-link {
    color: #2563EB;
    font-weight: bolder;
    text-decoration: none;
    transition: color 0.2s ease;
}

    .auth-link:hover {
        text-decoration: underline;
    }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
    color: var(--faded-text);
}

    .auth-divider::before,
    .auth-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background-color: var(--border);
    }

.validation-summary {
    background-color: #fde8e8;
    border: 1px solid #f8b4b4;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 20px;
    color: var(--error);
    font-size: 14px;
}

    .validation-summary li {
        list-style: none;
    }

/* Two-column layout for registration */
.auth-container.wide {
    max-width: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-col {
    flex: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 20px;
    }

    .auth-container {
        margin: 20px auto;
        padding: 15px;
        left: 0;
        width: 100%;
        transform: translateX(0);
    }

    .auth-card {
        padding: 20px;
    }
}

/* //////////////////////////////////// */
/* //////////////////////////////////// */




/* Password Strength Container */
.password-strength-container {
    margin-top: 8px;
}

/* Password Strength Meter */
.password-strength-meter {
    height: 4px;
    background-color: var(--border);
    border-radius: 2px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.password-strength-meter-fill {
    height: 100%;
    width: 0;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.strength-weak {
    background-color: #dc3545;
    width: 25%;
}

.strength-fair {
    background-color: #ffc107;
    width: 50%;
}

.strength-good {
    background-color: #28a745;
    width: 75%;
}

.strength-strong {
    background-color: #198754;
    width: 100%;
}

/* Password Strength Text */
.password-strength-text {
    font-size: 12px;
    margin-top: 4px;
    transition: color 0.3s ease;
}

/* Password Requirements */
.password-requirements {
    margin-top: 8px;
    font-size: 12px;
    color: var(--faded-text);
    background-color: var(--background);
    padding: 8px 12px;
    border-radius: 4px;
}

    .password-requirements .requirement {
        margin-top: 4px;
        color: #dc3545;
        transition: color 0.2s ease;
    }

        .password-requirements .requirement.passed {
            color: #198754;
        }

/* Password Validation Message */
.validation-message.confirm-password-message {
    margin-top: 4px;
    font-size: 12px;
    color: #dc3545;
    opacity: 0.9;
}

/* Submit Button States */
button[type="submit"]:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}












/* //////////////////////////////////// */
/* IDLE MODAL */
/* //////////////////////////////////// */

#idle-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    color: var(--text-main);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    z-index: 9999;
    flex-direction: column;
    text-align: center;
    padding: 20px;
}

    #idle-modal .idle-modal-content {
        background: var(--background-main-elements);
        padding: 15px;
        padding-top: 40px;
        border-radius: 10px;
        box-shadow: 0 4px 8px var(--shadow-color);
        text-align: center;
        max-width: 400px;
        width: 90%;
        font-family: Arial, sans-serif;
        position: relative;
    }

    #idle-modal p {
        margin-bottom: 10px;
        color: var(--text-faded);
    }

        #idle-modal p:first-child {
            font-weight: bold;
            color: var(--text-main);
        }

    #idle-modal button {
        padding: 12px 25px;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        font-size: 16px;
        font-weight: bold;
        transition: background-color 0.3s, transform 0.2s;
        width: 100%;
        margin: 5px 0;
    }

    /* Positive (Stay Logged In) */
    #idle-modal #stay-logged-in {
        background: var(--button-positive);
        color: var(--button-positive-text);
        border-color: var(--button-positive-border);
    }

        #idle-modal #stay-logged-in:hover {
            background: var(--button-positive-hover);
        }

    /* Negative (Logout) */
    #idle-modal #logout {
        background: var(--button-negative);
        color: var(--button-negative-text);
        border-color: var(--button-negative-border);
    }

        #idle-modal #logout:hover {
            background: var(--button-negative-hover);
        }


/* //////////////////////////////////// */
/* DEBUG OVERLAY */
/* //////////////////////////////////// */

#debug-overlay {
    position: fixed;
    top: 0;
    right: 0;
    background: var(--background-main-elements);
    color: var(--text-main);
    padding: 10px;
    font-family: monospace;
    font-size: 12px;
    z-index: 99999;
    line-height: 1.5em;
}

    #debug-overlay span {
        color: var(--text-faded);
    }

/* Header nav notification dot (Leave / Messages / Forms) — small red dot on the icon,
   toggled by the *Indicator.js scripts. Edit here for position/size (no rebuild needed). */
.nav-notify-wrap {
    position: relative;
    display: inline-block;
}

.nav-notify-dot {
    position: absolute;
    top: -3px;
    left: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #dc3545;
    box-shadow: 0 0 0 2px var(--background-main-elements);
    pointer-events: none;
}

.nav-notify-dot.hidden {
    display: none !important;
}

/* //////////////////////////////////// */
/* SWIPEABLE HEADER TOOLBAR (MOBILE)     */
/* //////////////////////////////////// */

/* Page headers on Rosters / Timesheets / Summary carry more controls than fit
   on a phone. Rather than hiding or wrapping them, the row becomes a single
   horizontally swipeable strip so every control stays reachable.
   Pages opt in by adding .rm-scroll-toolbar to the flex row. */
@media (max-width: 900px) {
    .rm-scroll-toolbar {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        /* The strip is the scroller, so it must receive touches itself. */
        pointer-events: auto;
        /* Hide the scrollbar — the content visibly overflows, which is the cue. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .rm-scroll-toolbar::-webkit-scrollbar {
            display: none;
        }

        /* Controls keep their natural size instead of being squashed. */
        .rm-scroll-toolbar > * {
            flex-shrink: 0;
        }
}