:root {
    /* ============ HIGHLIGHT COLORS ============ */
    --highlight-darkest: #006FFD;
    --primary-call-into-action: #1C9798;
    --call-into-action: #13E9E6;
    --primary-teal: #1C9798;
    --primary-dark: #146D5E;
    --primary-light: #E3F3F3;
    --white: #FFFFFF;
    /* ============ PRIMARY COLORS ============ */
    --primary-primary: #146D5E;
    --primary-pri2: #1C9798;
    --primary-pri3: #44B7B8;
    --primary-pri4: #A6D1D2;
    --primary-pri5: #CEFDFD;
    --primary-pri6: #E3F3F3;
    --primary-pri7: #FFFFFF;
    /* ============ SECONDARY COLORS ============ */
    --secondary-sec1: #949723;
    --secondary-sec2: #BEC150;
    --secondary-sec3: #ECEF66;
    --secondary-sec4: #F3F4C8;
    --secondary-sec5: #F2F6E3;
    /* ============ TONE COLORS ============ */
    --tone-01teal: #1C9798;
    --tone-02green: #489717;
    --tone-03cream: #EDF5A0;
    --tone-04yellow: #E1CF24;
    --tone-05orange: #FF9152;
    --tone-06red: #A5261F;
    --tone-07purple: #951FA5;
    --tone-08blue: #2C23A9;
    /* ============ SHADE COLORS ============ */
    --shade-01teal: #377171;
    --shade-02green: #4B6F34;
    --shade-03cream: #E9EEC3;
    --shade-04yellow: #C5BC60;
    --shade-05orange: #E2A784;
    --shade-06red: #754542;
    --shade-07purple: #7E4486;
    --shade-08blue: #4D497B;
    /* ============ TINT COLORS ============ */
    --tint-01teal: #7FC7C7;
    --tint-02green: #6CD094;
    --tint-03cream: #F0F7AB;
    --tint-04yellow: #FFEA75;
    --tint-05orange: #F5CDA5;
    --tint-06red: #F95E62;
    --tint-07purple: #C987D7;
    --tint-08blue: #6F7ADC;
    /* ============ XTINT COLORS ============ */
    --xtint-01teal: #9FF1F1;
    --xtint-02green: #B8FFC6;
    --xtint-03cream: #FCFFE1;
    --xtint-04yellow: #FFF7C7;
    --xtint-05orange: #FFEFE4;
    --xtint-06red: #FFA7AA;
    --xtint-07purple: #F5C9FE;
    --xtint-08blue: #B3BAFF;
    /* ============ GREY COLORS ============ */
    --grey-dis1: #A0A0A0;
    --grey-dis2: #B4B4B4;
    --grey-dis3: #C8C8C8;
    --grey-dis4: #E5E5E5;
    --grey-dis5: #F0F0F0;
    --grey-dis6: #F6F6F6;
    --grey-dis7: #FCFCFC;
    --grey-black: #000000;
    --grey-darkgrey: #4B4B4B;
    /* ============ L MODE ============ */
    --D-base: #252525;
    --D-teal: #2A8C8D;
    --D-primary: #1C8D7A;
    --D-greengrey1: #3A5051;
    --D-greengrey2: #607979;
    --D-greengrey3: #78999A;
    --D-greengrey4: #95ACAD;
    --D-greentone1: #3E6D6F;
    --D-greentone2: #559092;
    --D-greentone3: #6AA9AB;
    --D-greentone4: #7FBEC0;
    --D-greentone5: #ACDDDF;
    --darkgrfont: #D9D9D9;
    --lightgrfont: #22C5AA;
    --black-third: #113A3B;
    --bg: #E5E5E5;
    --main-color: #146D5E;
    --button-stroke: #E5E5E5;
    --menu-text: #1C9798;
    --menu-text-hover: #44B7B8;
    --main-card: white;
    --icon-shape: white;
    --button-base: white;
    --button-base-hover: white;
    --button-text: #1C9798;
    --button-text-hover: #44B7B8;
    --button-feature-text: white;
    --calendar-container: white;
    --calendar-title: #146D5E;
    --calendar-header: #4B4B4B;
    --calendar-date: #146D5E;
    --calendar-day-passed: #C8C8C8;
    --calendar-cell-hover: #E3F3F3;
    --tab-text: white;
    --tab-disabled: #B4B4B4;
    --tab-disabled-hoverd: #C8C8C8;
    --tab-selected: #1C9798;
    --tab-hovered: #13E9E6;
    --tab-unselected: #A6D1D2;
    --tab-unselected-hover: #44B7B8;
    --thumbnail-title: #1C9798;
    --thumbnail-title-hover: #13E9E6;
    --today-text: white;
    --today-border: #1C9798;
    --today-background: #E3F3F3;
    --today-border-hover: #13E9E6;
    --today-background-hover: #CEFDFD;
    --note-dot-teal: #1C9798;
    --note-dot-green: #489717;
    --note-dot-cream: #EDF5A0;
    --note-dot-yellow: #E1CF24;
    --note-dot-orange: #FF9152;
    --note-dot-red: #A5261F;
    --note-dot-purple: #951FA5;
    --note-dot-blue: #2C23A9;
    --activity-text-color: #4B4B4B;
    --visual-content-border: #C8C8C8;
    --content-page-header-line: #146D5E;
    --page-title-font: #146D5E;
    --thumbnail-header-text: #146D5E;
    --passed-makeup: #C8C8C8;
    --passed-cancel: #B4B4B4;
    --modal-icon-makeup-s: #D2F4BC;
    --modal-icon-cancel-s: #FFD2CF;
    --scrollbar: #C8C8C8;
    --side-menu-shadow: #C8C8C8;
    --contact-content-container: white;
    /* ============ TYPOGRAPHY - TEXT (Lexend) ============ */
    --font-text: 'Lexend', sans-serif;
    --text-regular: 400 32px 'Lexend', sans-serif;
    --text2-regular: 400 24px 'Lexend', sans-serif;
    --text3-regular: 400 20px 'Lexend', sans-serif;
    --text4-regular: 400 16px 'Lexend', sans-serif;
    --text5-regular: 400 14px 'Lexend', sans-serif;
    --text6-regular: 400 12px 'Lexend', sans-serif;
    --text7-regular: 400 10px 'Lexend', sans-serif;
    --text8-regular: 400 8px 'Lexend', sans-serif;
    --text-medium: 500 32px 'Lexend', sans-serif;
    --text2-medium: 500 24px 'Lexend', sans-serif;
    --text3-medium: 500 20px 'Lexend', sans-serif;
    --text4-medium: 500 16px 'Lexend', sans-serif;
    --text5-medium: 500 14px 'Lexend', sans-serif;
    --text6-medium: 500 12px 'Lexend', sans-serif;
    --text7-medium: 500 10px 'Lexend', sans-serif;
    --text8-medium: 500 8px 'Lexend', sans-serif;
    /* ============ TYPOGRAPHY - SEMI (Josefin Sans) ============ */
    --font-semi: 'Josefin Sans', sans-serif;
    --semi-regular: 400 24px 'Josefin Sans', sans-serif;
    --semi2-regular: 400 22px 'Josefin Sans', sans-serif;
    --semi3-regular: 400 20px 'Josefin Sans', sans-serif;
    --semit4-regular: 400 16px 'Josefin Sans', sans-serif;
    --semi5-regular: 400 14px 'Josefin Sans', sans-serif;
    --semi6-regular: 400 12px 'Josefin Sans', sans-serif;
    --semi7-regular: 400 10px 'Josefin Sans', sans-serif;
    --semi8-regular: 400 8px 'Josefin Sans', sans-serif;
    --semi-regular: 500 24px 'Josefin Sans', sans-serif;
    --semi2-medium: 500 22px 'Josefin Sans', sans-serif;
    --semi3-medium: 500 20px 'Josefin Sans', sans-serif;
    --semi4-medium: 500 16px 'Josefin Sans', sans-serif;
    --semi5-medium: 500 14px 'Josefin Sans', sans-serif;
    --semi6-medium: 500 12px 'Josefin Sans', sans-serif;
    --semi7-medium: 500 10px 'Josefin Sans', sans-serif;
    --semi8-medium: 500 8px 'Josefin Sans', sans-serif;
}


.dark {
    /* ============ HIGHLIGHT COLORS ============ */
    --highlight-darkest: #006FFD;
    --primary-call-into-action: #1C9798;
    --call-into-action: #13E9E6;
    --primary-teal: #1C9798;
    --primary-dark: #146D5E;
    --primary-light: #E3F3F3;
    --white: #fff;
    /* ============ PRIMARY COLORS ============ */
    --primary-primary: #146D5E;
    --primary-pri2: #1C9798;
    --primary-pri3: #44B7B8;
    --primary-pri4: #A6D1D2;
    --primary-pri5: #CEFDFD;
    --primary-pri6: #E3F3F3;
    --primary-pri7: #FFFFFF;
    /* ============ SECONDARY COLORS ============ */
    --secondary-sec1: #949723;
    --secondary-sec2: #BEC150;
    --secondary-sec3: #ECEF66;
    --secondary-sec4: #F3F4C8;
    --secondary-sec5: #F2F6E3;
    /* ============ TONE COLORS ============ */
    --tone-01teal: #7FC7C7;
    --tone-02green: #6CD094;
    --tone-03cream: #F0F7AB;
    --tone-04yellow: #FFEA75;
    --tone-05orange: #F5CDA5;
    --tone-06red: #F95E62;
    --tone-07purple: #C987D7;
    --tone-08blue: #6F7ADC;
    /* ============ TINT COLORS ============ */
    --tint-01teal: #9FF1F1;
    --tint-02green: #B8FFC6;
    --tint-03cream: #FCFFE1;
    --tint-04yellow: #FFF7C7;
    --tint-05orange: #FFEFE4;
    --tint-06red: #FFA7AA;
    --tint-07purple: #F5C9FE;
    --tint-08blue: #B3BAFF;
    /* ============ XTINT COLORS ============ */
    --xtint-01teal: #9FF1F1;
    --xtint-02green: #B8FFC6;
    --xtint-03cream: #FCFFE1;
    --xtint-04yellow: #FFF7C7;
    --xtint-05orange: #FFEFE4;
    --xtint-06red: #FFA7AA;
    --xtint-07purple: #F5C9FE;
    --xtint-08blue: #B3BAFF;
    /* ============ GREY COLORS ============ */
    --grey-dis1: #A0A0A0;
    --grey-dis2: #B4B4B4;
    --grey-dis3: #C8C8C8;
    --grey-dis4: #E5E5E5;
    --grey-dis5: #F0F0F0;
    --grey-dis6: #F6F6F6;
    --grey-dis7: #FCFCFC;
    --grey-black: #000000;
    --grey-darkgrey: #4B4B4B;
    /* ============ D MODE ============ */
    --D-base: #252525;
    --D-teal: #2A8C8D;
    --D-primary: #1C8D7A;
    --D-greengrey1: #3A5051;
    --D-greengrey2: #607979;
    --D-greengrey3: #78999A;
    --D-greengrey4: #95ACAD;
    --D-greentone1: #3E6D6F;
    --D-greentone2: #559092;
    --D-greentone3: #6AA9AB;
    --D-greentone4: #7FBEC0;
    --D-greentone5: #ACDDDF;
    --darkgrfont: #D9D9D9;
    --lightgrfont: #22C5AA;
    --black-third: #113A3B;
    --bg: #252525;
    --main-color: #252525;
    --button-stroke: #000;
    --menu-text: #22C5AA;
    --menu-text-hover: #CEFDFD;
    --main-card: #668283;
    --icon-shape: #252525;
    --button-base: #7FBEC0;
    --button-base-hover: #ACDDDF;
    --button-text: #252525;
    --button-text-hover: #252525;
    --button-feature-text: #252525;
    --calendar-container: #252525;
    --calendar-title: #FFEA75;
    --calendar-header: #F0F7AB;
    --calendar-date: white;
    --calendar-day-passed: #4B4B4B;
    --calendar-cell-hover: #3A5051;
    --tab-text: #252525;
    --tab-disabled: #A0A0A0;
    --tab-disabled-hoverd: #B4B4B4;
    --tab-selected: #1C9798;
    --tab-hovered: #13E9E6;
    --tab-unselected: #668283;
    --tab-unselected-hover: #44B7B8;
    --thumbnail-title: #22C5AA;
    --thumbnail-title-hover: #13E9E6;
    --today-text: #252525;
    --today-border: #22C5AA;
    --today-background: #3A5051;
    --today-border-hover: #9FF1F1;
    --today-background-hover: #668283;
    --note-dot-teal: #7FC7C7;
    --note-dot-green: #6CD094;
    --note-dot-cream: #F0F7AB;
    --note-dot-yellow: #FFEA75;
    --note-dot-orange: #F5CDA5;
    --note-dot-red: #F95E62;
    --note-dot-purple: #C987D7;
    --note-dot-blue: #6F7ADC;
    --activity-text-color: #C8C8C8;
    --visual-content-border: black;
    --content-page-header-line: #22C5AA;
    --page-title-font: white;
    --thumbnail-header-text: white;
    --passed-makeup: #A0A0A0;
    --passed-cancel: #4B4B4B;
    --modal-icon-makeup-s: #146D5E;
    --modal-icon-cancel-s: #6A221D;
    --scrollbar: #3A5051;
    --side-menu-shadow: #113A3B;
    --contact-content-container: #95ACAD;
}

* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Font Face Definitions */

/* Lexend Font - Primary Body Font */
@font-face {
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    src: url('../Fonts/Lexend-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    src: url('../Fonts/Lexend-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    src: url('../Fonts/Lexend-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    src: url('../Fonts/Lexend-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    src: url('../Fonts/Lexend-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    src: url('../Fonts/Lexend-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Josefin Sans Font - Semi/Heading Font */
@font-face {
    font-family: 'Josefin Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    src: url('../Fonts/JosefinSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Josefin Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    src: url('../Fonts/JosefinSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Josefin Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    src: url('../Fonts/JosefinSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Josefin Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    src: url('../Fonts/JosefinSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Josefin Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    src: url('../Fonts/JosefinSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Typography following UI design system */
.text-regular {
    font: var(--text-regular);
}
.text2-regular {
    font: var(--text2-regular);
}
.text3-regular {
    font: var(--text3-regular);
}
.text4-regular {
    font: var(--text4-regular);
}
.text5-regular {
    font: var(--text5-regular);
}
.text6-regular {
    font: var(--text6-regular);
}
.text7-regular {
    font: var(--text7-regular);
}
.text8-regular {
    font: var(--text8-regular);
}
.text-medium {
    font: var(--text-medium);
}
.text2-medium {
    font: var(--text2-medium);
}
.text3-medium {
    font: var(--text3-medium);
}
.text4-medium {
    font: var(--text4-medium);
}
.text5-medium {
    font: var(--text5-medium);
}
.text6-medium {
    font: var(--text6-medium);
}
.text7-medium {
    font: var(--text7-medium);
}
.text8-medium {
    font: var(--text8-medium);
}
.semi-regular {
    font: var(--semi-regular);
}

.semi2-regular {
    font: var(--semi2-regular);
}

.semi3-regular {
    font: var(--semi3-regular);
}

.semi4-regular {
    font: var(--semi4-regular);
}

.semi5-regular {
    font: var(--semi5-regular);
}

.semi6-regular {
    font: var(--semi6-regular);
}

.semi7-regular {
    font: var(--semi7-regular);
}

.semi8-regular {
    font: var(--semi8-regular);
}
.semi-medium {
    font: var(--semi-medium);
}

.semi2-medium {
    font: var(--semi2-medium);
}

.semi3-medium {
    font: var(--semi3-medium);
}

.semi4-medium {
    font: var(--semi4-medium);
}

.semi5-medium {
    font: var(--semi5-medium);
}

.semi6-medium {
    font: var(--semi6-medium);
}

.semi7-medium {
    font: var(--semi7-medium);
}

.semi8-medium {
    font: var(--semi8-medium);
}

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

html, body {
    height: 100%;
    width: 100%;
}

body {
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--main-color);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
}

    /* For Chrome, Safari, Edge, Opera, and other WebKit browsers */
    body::-webkit-scrollbar {
        width: 12px; 
        z-index:10;
    }

    body::-webkit-scrollbar-track {
        background: transparent !important;
        z-index: 10;
    }

    body::-webkit-scrollbar-thumb {
        background-color: var(--scrollbar);
        border-radius: 6px;
        z-index: 10;
    }

        body::-webkit-scrollbar-thumb:hover {
            background-color: var(--scrollbar);
            z-index: 10;
        }

a {
    text-decoration: none;
    color: var(--primary-call-into-action);
}
    a.hover {
        color: var(--call-into-action);
    }
    a.white-link {
        text-decoration: none;
        color: var(--white);
        font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    }
    a.white-link:hover {
        text-decoration: none;
        color: var(--call-into-action);
    }
/* SVG Icon Styles */
.icon-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Main Page Layout */
.page {
    display: flex;
    flex: 1;
    background: var(--bg);
}

/* Sidebar Navigation */
.sidebar {
    width: 330px;
    min-width: 250px;
    background: var(--background-sidebar);
    border-right: 1px solid var(--border-default);
    padding: 8px 0;
    overflow-y: auto;
    flex-shrink: 0;
}

.sidebar-section {
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-default);
}


.sidebar-header {
    display: flex;
    align-items: center;
    padding: 12px 22px;
    color: var(--menu-text);
    transition: background 0.2s ease;
    cursor: pointer;
}


    .sidebar-header:hover {
        color: var(--menu-text-hover);
    }


    .sidebar-header::before {
        content: '';
        display: inline-block;
        width: 23px;
        height: 23px;
        margin-right: 8px;
        background-color: var(--primary-call-into-action);
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 10 23"><path d="M0.691257 0.0749659C1.30873 -0.100055 2.05957 0.0418275 2.36831 0.391869L9.86831 8.89527C10.0443 9.09477 10.0443 9.32958 9.86831 9.52908L2.36831 18.0325C2.05957 18.3825 1.30873 18.5244 0.691257 18.3494C0.0737837 18.1744 -0.176497 17.7487 0.13224 17.3987L7.35273 9.21218L0.13224 1.02568C-0.176497 0.675634 0.0737837 0.249987 0.691257 0.0749659Z"/></svg>');
        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 10 23"><path d="M0.691257 0.0749659C1.30873 -0.100055 2.05957 0.0418275 2.36831 0.391869L9.86831 8.89527C10.0443 9.09477 10.0443 9.32958 9.86831 9.52908L2.36831 18.0325C2.05957 18.3825 1.30873 18.5244 0.691257 18.3494C0.0737837 18.1744 -0.176497 17.7487 0.13224 17.3987L7.35273 9.21218L0.13224 1.02568C-0.176497 0.675634 0.0737837 0.249987 0.691257 0.0749659Z"/></svg>');
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        transition: transform 0.3s ease;
        transform: rotate(-90deg);
    }

    .sidebar-header:hover::before {
         transform: rotate(0deg) translateY(-4px);
    }

    .sidebar-header.closed::before {
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 10"><path d="M18.3494 0.691257C18.5244 1.30873 18.3825 2.05957 18.0324 2.36831L9.52904 9.86831C9.32955 10.0443 9.09473 10.0443 8.89524 9.86831L0.39183 2.36831C0.0417885 2.05957 -0.100094 1.30873 0.0749279 0.691257C0.249948 0.0737837 0.675596 -0.176497 1.02564 0.13224L9.21214 7.35273L17.3986 0.13224C17.7487 -0.176497 18.1743 0.0737837 18.3494 0.691257Z"/></svg>');
        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 10"><path d="M18.3494 0.691257C18.5244 1.30873 18.3825 2.05957 18.0324 2.36831L9.52904 9.86831C9.32955 10.0443 9.09473 10.0443 8.89524 9.86831L0.39183 2.36831C0.0417885 2.05957 -0.100094 1.30873 0.0749279 0.691257C0.249948 0.0737837 0.675596 -0.176497 1.02564 0.13224L9.21214 7.35273L17.3986 0.13224C17.7487 -0.176497 18.1743 0.0737837 18.3494 0.691257Z"/></svg>');
        transform: rotate(0deg);
    }
    .sidebar-header.closed:hover::before {
        transform: rotate(-90deg) translateY(-4px);
    }

.menu-name {
    display: inline-block;
    transition: transform 0.2s ease;
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.menu-line {
    width: stretch;
    border-bottom: 2px solid var(--primary-primary);
}

    .menu-line:hover .menu-name {
        transform: translateY(-4px);
    }

.sidebar-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
    opacity: 0;
}
.sidebar-content a {
    color: var(--menu-text);
}
    .sidebar-content.open {
        max-height: 9999px; /* large but NOT none — "none" breaks the animation */
        opacity: 1;
    }

    .sidebar-content.closed {
        max-height: 0;
        opacity: 0;
    }
    .sidebar-content:hover {
        color: var(--menu-text-hover);
    }

.sidebar-button {
    padding: 4px 8px 4px 54px;
    cursor: pointer;
    color: var(--primary-primary);
    transition: all 0.2s;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
    .sidebar-button:hover .button-icon svg {
        transform: translateY(-3px);
    }

.sidebar-item {
    padding: 10px 8px 10px 54px;
    cursor: pointer;
    color: var(--primary-primary);
    transition: all 0.2s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

    .sidebar-item:hover {
        color: var(--menu-text-hover);
        transform: translateY(-3px);
    }
.button-base {
    display: flex;
    flex-shrink: 0;
    align-self: stretch;
    min-width: 180px;
    width: stretch;
    margin-right: 10px;
    border-radius: 10px;
    border: 1px solid var(--button-stroke);
    background: var(--button-base);
}
    .button-base:hover  {
        background: var(--button-base-hover);
    }
    .button-base:hover .button-text {
        color: var(--button-text-hover);
        transform: translateY(-3px);
    }
    .button-base:hover .button-01teal {
        background: var(--tint-01teal);
    }

    .button-base:hover .button-02green {
        background: var(--tint-02green);
    }
    .button-base:hover .button-03cream {
        background: var(--tint-03cream);
    }
    .button-base:hover .button-04yellow{
        background: var(--tint-04yellow);
    }
    .button-base:hover .button-05orange {
        background: var(--tint-05orange);
    }
    .button-base:hover .button-06red {
        background: var(--tint-06red);
    }
    .button-base:hover .button-07purple {
        background: var(--tint-07purple);
    }
    .button-base:hover .button-08blue {
        background: var(--tint-08blue);
    }
    .button-base:hover .menu-icon {
        transform: translateY(-4px);
    }

.button-icon {
    display: flex;
    width: 60px;
    height: 56px;
    border-radius: 10px 0 0 10px;
    border: 1px solid var(--button-stroke);
    align-content: center;
    justify-content: center;
    text-align: center;
    align-items: center;
    fill: var(--icon-shape);
}
.button-icon path {
    fill: var(--icon-shape);
}
    .button-icon svg {
        transition: transform 0.2s ease;
    }

.button-text {
    width: 217px;
    height: stretch;
    align-content: center;
    justify-content: center;
    color: var(--button-text);
    margin: 0 4px;
    flex-wrap: wrap;
    transition: transform 0.2s ease;
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
    
.button-01teal {
    background: var(--tone-01teal);
}

.button-02green {
    background: var(--tone-02green);
}
    
.button-03cream {
    background: var(--tone-03cream);
}
    
.button-04yellow {
    background: var(--tone-04yellow);
}
    
.button-05orange {
    background: var(--tone-05orange);
}

.button-06red {
    background: var(--tone-06red);
}

.button-07purple {
    background: var(--tone-07purple);
}

.button-08blue {
    background: var(--tone-08blue);
}



.sidebar-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.sidebar-icon image {
    width: 100%;
    height: 100%;
}

    

/* Main Content Area */
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border: 1px solid var(--button-stroke);
    background: var(--primary-pri2, #1C9798);
    color: var(--white);
    padding: 4px 32px 4px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    width: 100%;
    overflow: visible;
    z-index: 9999 !important;
}


.header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.header-brand, .header-action, #pnlDevLogin {
    position: relative;
    z-index: 3;
}
.logo-icon {
    width: 22px;
    height: 40px;
    background: var(--overlay-white-light);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.header-action {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
}

    .header-action a {
        color: var(--white);
        text-decoration: none;
        font-weight: 500;
        font-size: 20px;
        font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
        cursor: pointer;
    }

        .header-action a:hover {
            opacity: 0.9;
        }

/* Content Area */
.content {
    flex: 1;
    overflow-y: auto;
    padding: 61px 28px 28px 12px;
}

.content-inner {
    max-width: 1200px;
}

.main-card {
    border-radius: 10px;
    border: 1px solid var(--button-stroke);
    background: var(--main-card);
    padding: 32px;
    min-height: 550px;
}


.button-row-container {
    display: flex;
    justify-content: space-between; /* This separates the children to both ends */
    width: calc(100% - 32px);
}

.button-row-memo {
    margin-top: -13px;
    margin-bottom: 0px;
    padding: 0px;
    width: 140px;
    height: stretch;
    align-content: flex-end;
    justify-content: flex-end;
    text-align: right;
    align-items: flex-end;
    position: relative;
}
.button-row-memo-schedule {
    margin-top: -13px;
    margin-bottom: 0px;
    padding: 0px;
    width: 140px;
    height: stretch;
    align-content: flex-end;
    justify-content: flex-end;
    text-align: right;
    align-items: flex-end;
}

.button-row-memo-image {
}
/* Feature Cards Grid */
.feature-cards {
    gap: 8px;
    display: flex;
    width: stretch;
    height: auto;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 8px;
    margin: 0px;
}

.feature-card {
    border-radius: 12px;
    display: flex;
    width: 128px;
    height: 128px;
    align-content: center;
    justify-content: center;
    text-align: center;
    align-items: center;
    flex-direction: column;
    transition: transform 0.2s ease;
    border: solid 1px var(--button-stroke);
}

    .feature-card:hover {
        transform: translateY(-4px);
    }
        .feature-card:hover.button-01teal {
            background: var(--tint-01teal);
            transition: all 0.2s;
        }
        .feature-card:hover.button-02green {
            background: var(--tint-02green);
            transition: all 0.2s;
        }

        .feature-card:hover.button-03cream {
            background: var(--tint-03cream);
            transition: all 0.2s;
        }
        .feature-card:hover.button-04yellow {
            background: var(--tint-04yellow);
            transition: all 0.2s;
        }
        .feature-card:hover.button-05orange {
            background: var(--tint-05orange);
            transition: all 0.2s;
        }
        .feature-card:hover.button-06red {
            background: var(--tint-06red);
            transition: all 0.2s;
        }
        .feature-card:hover.button-07purple {
            background: var(--tint-07purple);
            transition: all 0.2s;
        }
        .feature-card:hover.button-08blue {
            background: var(--tint-08blue);
            transition: all 0.2s;
        }

.feature-card-icon {
    width: auto;
    height: auto;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    fill: var(--icon-shape);
}
    .feature-card-icon path {
        fill: var(--icon-shape);
    }

.feature-card-label {
    color: var(--button-feature-text);
    font: var(--text4-medium);
}

/* Calendar Section */
.calendar-section {
    background: var(--background-card);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.calendar-controls {
    display: flex;
    gap: 8px;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.calendar-day {
    background: var(--white);
    border-radius: 8px;
    padding: 12px;
    min-height: 80px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
}

    .calendar-day:hover {
        border-color: var(--primary-primary);
    }


.calendar-day.other-month .calendar-day-num {
    color: var(--grey-dis3);
}

/* Footer */
.footer {
    background: var(--primary-pri2);
    color: var(--white);
    padding: 32px 28px;
    text-align: center;
    margin-top: 0;
    flex-shrink: 0;
}


    .footer p {
        margin: 0 0 12px 0;
        opacity: 0.95;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

.footer-credits {
    margin: 12px 0px 30px 0px;
    opacity: 0.85;
}



/* ============ ICT Logo Styling ============ */
.ict-logo {
    height: 40px;
    width: auto;
    margin-right: 0px;
}


/* ============ Dark Mode Toggle Container ============ */
.dark-mode-switch-container {
    margin-bottom: 8px;
    display: flex;
    justify-content: flex-end;
}

.dark-mode-switch-container .dark-mode-toggle {
    width: auto;
    height: auto;
    padding: 0px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: none;
}

.dark-mode-switch-container .dark-mode-toggle:hover {
    transition: all 0.3s;
}

.dark-mode-switch-container .dark-mode-toggle svg {
    width: auto;
    height: auto;
}

.dark-mode {
    background-color: var(--D-base);
}

.dark-mode-toggle {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s ease;
}

    .dark-mode-toggle:hover {
        opacity: 0.8;
        transition: all 0.3s;
    }


/* ============ Chatbot Button ============ */
.chatbot-button {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-pri3);
    color: var(--white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
    z-index: 999;
}

.chatbot-button:hover {
    background: var(--primary-pri2);
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(68, 183, 184, 0.4);
}

.chatbot-button:active {
    transform: scale(0.95);
}

/* ============ Calendar ============ */
.calendar-container {
    width: 100% !important;
    max-width: 1200px;
    box-sizing: border-box !important;
    margin: 0 auto;
    border-radius: 12px;
    border: 1px solid var(--primary-primary);
    background: var(--calendar-container);
    padding: 24px 8px; /* reduce horizontal padding on mobile */
    align-items: center;
    gap: 16px;
    overflow: hidden; 
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.tabs {
    display: flex;
    gap: 0px;
}

.tab {
    width: 90px;
    height: 26px;
    padding: 4px;
    background: var(--tab-selected);
    border: none;
    cursor: pointer;
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--tab-text);
    display: flex;
    gap: 2px;
    text-align: center;
    align-items: center;
}

.tab-text {
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
    .tab.checked {
        background-color: var(--tab-selected);
    }
        .tab.checked:hover {
            background-color: var(--tab-hovered);
            transition: all 0.3s;
        }
    .tab.unchecked {
        background-color: var(--tab-unselected);
    }
        .tab.unchecked:hover {
            background-color: var(--tab-unselected-hover);
            transition: all 0.3s;
        }
        .tab.unchecked .tab-check-mark {
        display: none; 
    }
    .tab.disabled.unchecked {
        background-color: var(--tab-disabled);
        border: 2px solid var(--tab-disabled);
    }

        .tab.disabled.unchecked:hover {
            background-color: var(--tab-disabled-hoverd);
            border: 2px solid var(--tab-disabled-hoverd);
            transition: all 0.3s;
        }
.tabclasses {
    border-radius: 0px;
    justify-content: left;
}


.tabactivities {
    border-radius: 30px 0 0 30px;
    justify-content: right;
}

.tab-check-mark {
    width: 13px;
    height: 14px;
}


.badges {
    display: flex;
    height: auto; 
    justify-content: flex-end;
    align-items: flex-start;
    gap: 2px;
    flex-wrap: wrap;
}

.badge {
    width: 90px;
    height: 26px;
    padding: 4px;
    background: var(--tab-selected);
    cursor: pointer;
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 8px;
    font-weight: 400;
    color: var(--tab-text);
    display: flex;
    gap: 2px;
    text-align: center;
    align-items: center;
    border: 2px solid var(--button-stroke);
    border-radius: 0px;
}
    .badge.checked {
        background-color: var(--tab-selected);
        border: 2px solid var(--tab-selected);
    }

        .badge.checked:hover {
            background-color: var(--tab-hovered);
            border: 2px solid var(--tab-hovered);
            transition: all 0.3s;
        }

    .badge.unchecked {
        background-color: var(--tab-unselected);
        border: 2px solid var(--tab-unselected);
    }

        .badge.unchecked:hover {
            background-color: var(--tab-unselected-hover);
            border: 2px solid var(--tab-unselected-hover);
            transition: all 0.3s;
        }
    .badge.disabled {
        background-color: var(--tab-disabled) !important;
        border: 2px solid var(--tab-disabled) !important;
    }
        .badge.disabled:hover {
            background-color: var(--tab-disabled-hoverd) !important;
            border: 2px solid var(--tab-disabled-hoverd) !important;
            transition: all 0.3s !important;
        }

.badge-sample-bg {
    background: var(--white);
    width: 22px;
    height: 22px;
    margin-left: -2px;
    padding: 1px;
    clip-path: circle(45% at 55% 55%);
}

.badge-sample {
    display: flex;
    width: 22px;
    height: 22px;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.badge.makeup .badge-sample {
    background: var( --tone-02green);
    border: 2px solid var(--white);
    box-sizing: border-box;
    color: var(--white);
}

.badge.cancel .badge-sample {
    border: 4px solid var(--tone-06red);
    box-sizing: border-box;
    color: var(--primary-primary);
}

.badge.important .badge-sample {
    color: var(--tone-05orange);
}

.badge.holiday .badge-sample {
    color: var(--tone-07purple);
}

.badge:first-of-type {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.badge:last-of-type {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.month-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 0px;
}

.nav-arrow {
    width: 80px;
    height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 40px;
    color: var(--primary-call-into-action);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .nav-arrow:hover {
        color: var(--call-into-action);
        transition: all 0.3s;
    }
.today-nav {
    width: 60px;
    height: 40px;
    margin: 0 4px 0 0;
    border: 2px solid var(--primary-call-into-action);
    border-radius: 12px;
    background: none;
    cursor: pointer;
    color: var(--primary-call-into-action);
    display: flex;
    align-items: center;
    justify-content: center;

}
    .today-nav:hover {
        border: 2px solid var(--call-into-action);
        color: var(--call-into-action);
        transition: all 0.3s;
    }
.weekly-calendar-container .today-nav {
    position: absolute;
    margin: 10px;
}


.month-year {
    color: var(--calendar-title);
    min-width: 200px;
    text-align: center;
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    width: 100%; /* ADD */
    box-sizing: border-box; /* ADD */
}

.day-header {
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--calendar-header);
    padding: 8px 0px 16px 0px;
    line-height: 1.25;
}

.day-cell {
    min-height: 72px;
    border: none;
    padding: 4px;
    border-radius: 16px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: flex-start;
    text-align: center;
    align-items: stretch;
    min-width: 0; /* ADD - prevents flex blowout up the chain */
    max-width: 100%; /* ADD - forces width resolution */
    width: 100%; /* ADD - explicitly anchors to grid column width */
    overflow: hidden; /* ADD */
}

    .day-cell:hover {
        background-color: var(--calendar-cell-hover);
        transition: all 0.5s ease;
    }

    .day-cell.empty {
        cursor: default;
        background-color: transparent;
        border: none;
    }
    .day-cell.passed {
        color: var(--calendar-day-passed);
    }
    .day-cell.today {
        border: solid 3px var(--today-border);
        background-color: var(--today-background);
    }
        .day-cell.today:hover {
            border: solid 3px var(--today-border-hover);
            background-color: var(--today-background-hover);
            transition: all 0.5s ease;
        }


.day-number {
    text-align: center;
    justify-content: center;
    align-items: center;
    align-self: center;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    /* Text2 */
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-left: -2px;
    padding: 1px;
    color: var(--calendar-date);
}

    .day-number.make-up {
        color: var(--calendar-container);
        background: var(--tone-02green);
    }

    .day-number.cancel {
        border: 4px solid var(--tone-06red);
    }
    .day-number.important-date {
        color: var(--tone-05orange);
    }
    .day-number.holiday {
        color: var(--tone-07purple);
    }
.passed .day-number {
    color: var(--calendar-day-passed);
}
    .passed .day-number.make-up {
        color: var(--calendar-container);
        background: var(--passed-makeup);
    }

    .passed .day-number.cancel {
        border: 4px solid var(--passed-cancel);
    }

.day-notes {
    font-size: 11px;
    line-height: 1.3;
    margin-top: 2px;
    box-sizing: border-box;
    /* Replace width:100% with inset positioning */
    position: relative;
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.note-item {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    /* Force Firefox to compute width from grid, not content */
    width: 100%;
    max-width: 100%;
}

.note-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 2px;
    flex-shrink: 0;
}


.note-text {
    display: block;
    flex: 1 1 0%; /* explicit 0% not just 0 */
    min-width: 0;
    width: 0; /* ← KEY FIX: forces Firefox to ignore content width */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tone-01teal);
    /* semi7 */
    font-family: font-family: 'Josefin Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
    .note-text.make-up {
        color: var(--tone-02green);
    }

    .note-text.cancel {
        color: var(--tone-06red);
        text-decoration: line-through;
    }

    .note-text.imaportant-date {
        color: var(--tone-05orange);
    }

    .note-text.holiday {
        color: var(--tone-07purple);
    }

    .note-text.activity {
        color: var(--activity-text-color);
    }


.note-dot.teal {
    background: var(--note-dot-teal) !important;
}
.note-dot.green {
    background: var(--note-dot-green) !important;
}
.note-dot.cream {
    background: var(--note-dot-cream) !important;
}
.note-dot.yellow {
    background: var(--note-dot-yellow) !important;
}
.note-dot.orange {
    background: var(--note-dot-orange) !important;
}
.note-dot.red {
    background: var(--note-dot-red) !important;
}
.note-dot.purple {
    background: var(--note-dot-purple) !important;
}
.note-dot.blue {
    background: var(--note-dot-blue) !important;
}


.passed .note-dot {
    background: var(--grey-dis2) !important;
}

.passed .note-text {
    color: var(--calendar-day-passed);
}

/* Modal for adding notes */
body.modal-open {
    overflow: hidden;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
}

    .modal.active {
        display: flex;
        justify-content: center;
        align-items: center;
    }

.modal-content {
    background-color: var(--main-card);
    padding: 20px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    margin: 0 !important;
    position: relative;
    z-index: 1001;
}

.modal-header {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    display: block;
    border-bottom: solid 1px var(--bg);
}

.modal-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--bg);
    border-radius: 6px;
    font-size: 14px;
}

.modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.modal-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

    .modal-btn.primary {
        background-color: var(--tone-01teal);
        color: var(--calendar-container);
        ;
    }

    .modal-btn.secondary {
        background-color: var(--grey-dis4);
        color: var(--grey-dis7);
    }

.modal-body-no-event {
    text-align: center;
}

.modal-body-event {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bg);
    width: stretch;
}

.modal-icon-m {
    width: 20px;
    height: 20px;
    margin: 0px;
    display: inline-flex;
    vertical-align: middle;
}

.modal-icon-s {
    width: 10px;
    height: 10px;
    margin-right: 0px;
    display: inline-flex;
    vertical-align: middle;
}


    /* ============ Content pages ============ */
    .content-page-header {
        width: auto;
        min-width: 35%;
        height: 70px;
        display: inline-flex;
        flex-direction: row;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-end;
        border-bottom: solid 2px var(--content-page-header-line);
        margin-bottom: 24px;
    }

.memo-icon {
    width: 65px;
    height: 74px;

}

.page-title {
    margin-left: 16px;
    width: stretch;
    padding-right: 32px;
    color: var(--page-title-font);
}

.staff-contact-content {
    min-width: 300px;
    overflow-y: auto;
}

.contact-header {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    text-align: center;
    padding: 0px 0px 8px 0px;
    min-width: 250px;
}

.contact-content-container {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 12px;
    border: 1px solid var(--primary-primary);
    background: var(--contact-content-container);
    
}

.contact-row {
    display: flex;
    flex-direction: row;
    width: 100%;

}

    .contact-row:first-child .catagory {
        padding-top: 16px;
    }

    .contact-row:last-child .catagory {
        padding-bottom: 16px;
    }
    .contact-row:first-child .contact-person {
        padding-top: 16px;
        border-radius: 0px 12px 0 0; /* Rounded top corners */
    }

    .contact-row:last-child .contact-person {
        padding-bottom: 16px;
        border-radius: 0 0 12px 0px; /* Rounded bottom corners */
    }

    .contact-row .catagory {
        text-align: right;
    }
    .contact-row .contact-person {
        background-color: var(--grey-dis6);
    }

.catagory {
    flex: 0 0 64%;
    padding: 8px 16px;
    box-sizing: border-box;
}

.contact-person {
    flex: 0 0 36%;
    min-width: 250px;
    padding: 8px 16px;
    box-sizing: border-box;
}

.contact-name {
}

.contact-info {
}

.email-protect {
    unicode-bidi: bidi-override;
    direction: rtl;
}

.summary-layout-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

.thumbnail-container {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.thumbnail-header {
    align-self: stretch;
    color: var(--thumbnail-header-text);
}
.thumbnail-row {
    display: flex;
    height: auto;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    flex-direction: row;
    flex-wrap: wrap;
}
.thumbnail-item {
    width: auto;
    height: auto;
}
    .thumbnail-item:hover .thumbnail-image {
        filter: brightness(1.1);
        outline: 3px solid var(--call-into-action);
        transform: translateY(-4px);
    }
    .thumbnail-item:hover .thumbnail-title {
        color: var(--thumbnail-title-hover);
        transform: translateY(-3px);
    }
.thumbnail-image {
    height: 120px;
    align-self: stretch;
    outline: 1px solid var(--visual-content-border);
    outline-offset: 1px;
    object-fit: contain;
    transition: all 0.3s ease;
}
.thumbnail-title {
    align-self: stretch;
    color: var(--thumbnail-title);
    text-align: center;
    flex-wrap: wrap;
    transition: filter 0.3s ease, transform 0.3s ease;
    margin-top: 8px;
}

.accordion-column-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
}
.accordion-column-item {
    display: flex;
    width: calc(100% - 32px);
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.text-center-header {
    align-self: stretch;
    color: var(--thumbnail-header-text);
    text-align: center;
}
/* ============ Accordion ============ */
.accordion {
    --bs-accordion-color: var(--grey-darkgrey);
    --bs-accordion-bg: var(--white);
    --bs-accordion-transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,border-radius 0.15s ease;
    --bs-accordion-border-color: var(--primary-primary);
    --bs-accordion-border-width: 2px;
    --bs-accordion-border-radius: 12px;
    --bs-accordion-inner-border-radius: 10px;
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: var(--primary-primary);
    --bs-accordion-btn-bg: var(--primary-pri4);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(19, 233, 230, 0.5);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-active-color: var(--primary-call-into-action);
    --bs-accordion-active-bg: var(--primary-pri6);
    --bs-accordion-transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,border-radius 0.15s ease;
    width: stretch;
}

.accordion-item {
    background: var(--white);
    color: var(--grey-darkgrey);
}
    .accordion-item:first-child {
        border-radius: 12px 12px 0px 0px;
    }
    .accordion-item:last-child {
        border-radius: 0px 0px 12px 12px;
    }
    .accordion-item:first-child:last-child {
        border-radius: 12px;
    }
.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1rem;
    color: var(--primary-primary);
    text-align: left;
    border: 1px solid var(--primary-primary);
    background: var(--primary-pri4);
    border-radius: 0px;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}
    .accordion-button:not(.collapsed) {
        color: var(--primary-primary);
        background-color: var(--primary-pri4);
    }

        .accordion-button:not(.collapsed)::after {
            background-image: var(--bs-accordion-btn-active-icon);
            transform: var(--bs-accordion-btn-icon-transform)
        }

    .accordion-button::after {
        flex-shrink: 0;
        width: var(--bs-accordion-btn-icon-width);
        height: var(--bs-accordion-btn-icon-width);
        margin-left: auto;
        content: "";
        background-image: var(--bs-accordion-btn-icon);
        background-repeat: no-repeat;
        background-size: var(--bs-accordion-btn-icon-width);
        transition: var(--bs-accordion-btn-icon-transition)
    }
.accordion-body {
    padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
    border-radius: 14px;
    width: stretch;
}
.accordion-header {
    margin-bottom: 0;
    border-radius: 12px;
}

.accordion-header-container {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
}

.accordion-icon {
    width: 35px;
    height: auto;
    align-content: center;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.accordion-title-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
}

.accordion-title {
    flex: 1 0 0;
    color: var(--primary-primary);
    /* Text3 */
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.accordion-subtitle {
    flex: 1 0 0;
    color: var(--primary-primary);
    /* semi5 */
    font-family: font-family: 'Josefin Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.accordion-link-row {
    width: stretch;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}
    .accordion-link-row:hover .accordion-link-text{
        transform: translateY(-2px);
    }
    .accordion-link-row:hover .accordion-link-text a {
        color: var(--call-into-action);
    }
    .accordion-link-row:hover .accordion-link-icon {
        transform: translateY(-2px);
    }
.accordion-link-icon {
    width: 15px;
    height: 20px;
    aspect-ratio: 3/4;
    background-color: var(--primary-primary);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="15" height="20" viewBox="0 0 15 20" fill="none"%3E%3Cpath d="M4.375 8.75C4.02982 8.75 3.75 9.02982 3.75 9.375C3.75 9.72018 4.02982 10 4.375 10H10.625C10.9702 10 11.25 9.72018 11.25 9.375C11.25 9.02982 10.9702 8.75 10.625 8.75H4.375Z" fill="%23146D5E"/%3E%3Cpath d="M3.75 11.875C3.75 11.5298 4.02982 11.25 4.375 11.25H10.625C10.9702 11.25 11.25 11.5298 11.25 11.875C11.25 12.2202 10.9702 12.5 10.625 12.5H4.375C4.02982 12.5 3.75 12.2202 3.75 11.875Z" fill="%23146D5E"/%3E%3Cpath d="M3.75 14.375C3.75 14.0298 4.02982 13.75 4.375 13.75H6.875C7.22018 13.75 7.5 14.0298 7.5 14.375C7.5 14.7202 7.22018 15 6.875 15H4.375C4.02982 15 3.75 14.7202 3.75 14.375Z" fill="%23146D5E"/%3E%3Cpath d="M9.375 0H2.5C1.11929 0 0 1.11929 0 2.5V17.5C0 18.8807 1.11929 20 2.5 20H12.5C13.8807 20 15 18.8807 15 17.5V5.625L9.375 0ZM9.375 1.25V3.75C9.375 4.78553 10.2145 5.625 11.25 5.625H13.75V17.5C13.75 18.1904 13.1904 18.75 12.5 18.75H2.5C1.80964 18.75 1.25 18.1904 1.25 17.5V2.5C1.25 1.80964 1.80964 1.25 2.5 1.25H9.375Z" fill="%23146D5E"/%3E%3C/svg%3E');
    transition: transform 0.3s ease;
}

.accordion-link-text {
    transition: transform 0.3s ease;
}
    .accordion-link-text a {
        color: var(--primary-call-into-action);
        /* Text5 */
        font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 14px; /* 100% */
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
    }

.gallery {
    display: flex;
    height: auto;
    align-items: flex-start;
    align-content: flex-start;
    gap: 16px;
    align-self: stretch;
    flex-wrap: wrap;
}

.image-container {
    position: relative;
    overflow: visible;
    cursor: pointer;
}

.thumbnail {
    width: 100%;
    height: 118px;
    border-radius: 8px;
    border: 1px solid var(--visual-content-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .thumbnail:hover {
        transform: scale(1.05) translateY(-5px);
    }


@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content {
    position: relative;
    max-width: min(800px, 95vw);
    max-height: 95vh;
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from {
        transform: scale(0.7);
    }

    to {
        transform: scale(1);
    }
}

.modal-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

.close-btn {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    background-color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: transform 0.2s ease, background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

    .close-btn:hover {
        background-color: #ff4444;
        color: white;
        transform: scale(1.1);
    }
dialog.image-modal {
    border: none;
    padding: 0;
    background: transparent;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0; /* override browser default dialog centering */
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    dialog.image-modal:not([open]) {
        display: none;
        pointer-events: none;
    }

    dialog.image-modal[open] {
        display: flex;
    }

    dialog.image-modal::backdrop {
        background: rgba(0, 0, 0, 0.9);
    }

.image-modal-content {
    position: relative;
    max-width: min(800px, 90vw);
    max-height: 90vh;
    animation: zoomIn 0.3s ease;
}

/* Image modal content — separate from shared .modal-content */
.image-modal-content {
    position: relative;
    max-width: min(800px, 95vw);
    max-height: 95vh;
    animation: zoomIn 0.3s ease;
}

/* Container */
.weekly-calendar-container {
    max-width: 100%;
    margin: 0 auto;
    border: 1px solid var(--primary-primary);
    background: var(--calendar-container);
    border-radius: 12px;
}

.weekly-month-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 40px;
    background-color: none;
    margin-bottom: 0px;
    border-bottom: none; /* Connects to grid */
    color: var(--page-title-font);
}

/* Grid Container */
#weeklyCalendarGrid {
    display: flex;
    flex-direction: column;
    /* height: 600px; Fixed height for scrolling */
    min-height: 500px;
    overflow-y: auto;
    overflow-x: auto;
    border-top: 1px solid var(--primary-primary);
    background: var(--calendar-container);
    box-sizing: border-box;
}

    /* Webkit browsers (Chrome, Safari, Edge) */
    #weeklyCalendarGrid::-webkit-scrollbar {
        width: 12px; /* Width of the scrollbar */
    }

    #weeklyCalendarGrid::-webkit-scrollbar-track {
        background: transparent; /* Background of the scrollbar track */
        border-radius: 12px;
    }

    #weeklyCalendarGrid::-webkit-scrollbar-thumb {
        background: var(--grey-dis2);
        border-radius: 12px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }

        #weeklyCalendarGrid::-webkit-scrollbar-thumb:hover {
            background: var(--grey-dis3);
            background-clip: padding-box;
        }

/* Firefox */
#weeklyCalendarGrid {
    scrollbar-width: thin; /* Makes scrollbar thinner */
    scrollbar-color: var(--grey-dis2) transparent;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
    /* Header Row */
.weekly-header-row {
    display: flex;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 20;
    height: 40px;
    border: 1px solid var(--primary-primary);
    background: var(--calendar-container);
    line-height: 1.25;
}

.weekly-header-spacer {
    width: 40px; /* Matches sidebar width */
    flex-shrink: 0;
}

/* Main Body */
.weekly-body-row {
    display: flex;
    flex: 1;
    position: relative;
    height: auto; 
    border-radius: 12px;
}

/* Sidebar */
.weekly-time-sidebar {
    width: 40px;
    flex-shrink: 0;
    border: 1px solid var(--primary-primary);
    background: var(--calendar-container);
    border-bottom-left-radius: 12px;
}

.weekly-time-label {
    height: 50px;
    text-align: right;
    padding-right: 5px;
    font-size: 12px;
    color: var(--grey-dis2);
    border-bottom: 1px solid var(--grey-dis3);
    box-sizing: border-box;
    padding-top: 5px;
}

/* Columns */
.weekly-days-container {
    display: flex;
    flex: 1;
}

/* Container for the specific day column */
.weekly-day-header-column {
    flex: 1; /* Each column takes equal space */
    min-width: 0; /* Allows flex to shrink if needed */
    box-sizing: border-box;
    flex-direction: column;
    height: auto;
    border-right: 1px solid var(--primary-primary);
    border-bottom: 1px solid var(--primary-primary) !important;
    background: var(--calendar-container);
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--calendar-header);
}
/* Container for the specific day column */
.weekly-day-column {
    flex: 1; /* Each column takes equal space */
    min-width: 0; /* Allows flex to shrink if needed */
    box-sizing: border-box;
    flex-direction: column;
    height: auto;
    border-right: 1px solid var(--primary-primary);
    border-bottom: 1px solid var(--primary-primary) !important;
    color: var(--page-title-font);
    position: relative;
    height: 100%;
}

/* Area for All Day events at the top */
.weekly-allday-section {
    background-color: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
    padding: 2px;
    min-height: 20px; /* Small buffer if empty */
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Area for Timed events (Absolute positioning works relative to this) */
.weekly-timed-section {
    position: relative;
    flex-grow: 1; /* Takes remaining height */
    height: 100%;
}

/* Styling for All Day Event "Chips" */
.weekly-event-allday {
    font-size: 0.75rem;
    padding: 2px 4px;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weekly-event-box {
    position: absolute;
    /* Remove width: 90% and left: 5% as JS now handles this */
    padding: 2px 4px;
    border-radius: 4px;
    color: var(--icon-shape);
    cursor: pointer;
    z-index: 5;
    border: 1px solid var(--calendar-container);
    box-sizing: border-box; /* Crucial for width calculation */
    transition: width 0.2s, left 0.2s; /* Optional: smooth transition when filtering */
}

    /* Event Types */
    .weekly-event-box.type-normal {
        background-color: var(--tone-01teal);
    }

    .weekly-event-box.type-makeup {
        background-color: var(--tone-02green);
    }

    .weekly-event-box.type-cancel {
        background-color: var(--tone-06red);
    }
    .weekly-event-box.passed {
        background-color: var(--passed-cancel);
    }
    .weekly-event-box.type-normal:hover {
        background-color: var(--tint-01teal);
    }

    .weekly-event-box.type-makeup:hover {
        background-color: var(--tint-02green);
    }

    .weekly-event-box.type-cancel:hover {
        background-color: var(--tint-06red);
    }
    .weekly-event-box.passed:hover {
        background-color: var(--passed-makeup);
    }

.weekly-event-box-title-container {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0px;
    gap: 0px;
}
.weekly-event-box-status {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* Limit the text to 1 lines */
    width: auto;
}
.weekly-event-box-title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* Limit the text to 3 lines */
    width: auto;
}
.weekly-event-box-content {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* Limit the text to 3 lines */
    width: auto;
}

.user-dropdown {
    position: relative;
    border: none;
    display: inline-block;
}

    .user-dropdown.white-link {
        text-decoration: none;
        color: var(--white);
    }

    .user-dropdown.white-link:hover {
        text-decoration: none;
        color: var(--call-into-action);
    }


.dropbtn {
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    font-size: 20px;
    padding: 10px;
    font-weight: 500;
    font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* Rotate the arrow when the panel is open */
    transition: color 0.2s;
}

    .dropbtn:hover {
        color: var(--call-into-action);
    }

    .dropbtn.active {
        color: var(--call-into-action);
    }

.logout-panel {
    position: fixed;
    top: 54px;
    right: 0px;
    min-width: 150px;
    background: var(--button-base);
    border: 1px solid var(--button-stroke);
    border-top: none;
    border-radius: 0 0 0 10px;
    box-shadow: var(--shadow-sm);
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 32px;
    /* Slide-in animation: starts hidden above its own position */
    visibility: hidden; 
    transform: translateY(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

    .logout-panel.show {
        opacity: 1;
        transform: translateY(0);
    }

    .logout-panel a {
        color: var(--grey-darkgrey);
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
        font-size: 16px;
    }

        .logout-panel a:hover {
            color: var(--button-text-hover);
            background: var(--button-base-hover);
        }
.dropdown-content {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: -50px;
    top: 0px;
    min-height: 108px;
    min-width: 180px;
    padding-top: 54px;
    padding-left: 10px;
    background: var(--button-base);
    border: 1px solid var(--button-stroke);
    border-top: none;
    border-radius: 0 0 10px 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%); 
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
    z-index: -1 !important;
}

    .dropdown-content.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }


    /* Hover effect for the content itself */
    .dropdown-content:hover {
        background: var(--button-base-hover);
    }

        .dropdown-content:hover .button-text {
            color: var(--button-text-hover);
            transform: translateY(-3px);
        }

    .dropdown-content a {
        color: var(--grey-darkgrey);
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        .dropdown-content a:hover {
            color: var(--button-text-hover);
        }

.overall-schedule-container {
    width: 100%;
    height: 80vh; /* Adjust height as needed */
    display: flex;
    flex-direction: column;
}

.pdf-viewer {
    width: 100%;
    flex: 1;
    border: none;
    display: block;
}
#memoTooltip {
    position: absolute;
    width: 180px;
    height: auto;
    top: 120px;
    right: 130px;
    transform: translateX(-50%);
    background: var(--tone-04yellow);
    color: var(--grey-darkgrey);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 16px;
    white-space: normal;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.login-tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.login-tooltip {
    position: absolute;
    width: 140px;
    top: calc(100% + 4px); 
    left: 10%;
    transform: translateX(-50%);
    background: var(--tone-04yellow);
    color: var(--grey-darkgrey);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    white-space: normal;
    text-align: center;
    pointer-events: none !important;
    z-index: 1000;
    /* Hidden by default */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show on hover — pure CSS, no JS needed */
.login-tooltip-wrapper:hover .login-tooltip {
    opacity: 1;
}

/* Small arrow pointing up toward the login link */
.login-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--tone-04yellow);
}

.summary-layout-image {
    width: 100%;
}
.hamburger-btn {
    display: none !important;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
}

    .hamburger-btn svg {
        height: 40px;
        width: auto;
    }

.hamburger-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Animate to X when open */
.hamburger-btn.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger-btn.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger-btn.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


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

.dev-panel-fixed {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
    background: #fff3cd;
    color: var(--grey-darkgrey);
    border: 2px solid #ffc107;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    min-width: 220px;
    max-width: 220px;
}
#imageLightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    overflow: auto; 
    cursor: default;
}

#lightboxImgWrapper {
    min-width: 100%;
    min-height: 100%;
    display: inline-flex; 
    align-items: flex-start;
    justify-content: flex-start; 
    padding: 20px;
    box-sizing: border-box;
}

#lightboxImg {
    display: block;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    cursor: zoom-out;
}

#lightboxClose {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.2s ease;
}

    #lightboxClose:hover {
        background: rgba(255, 255, 255, 0.3);
    }
.contact-name-trigger .name-text {
    color: var(--primary-call-into-action); 
    transition: color 0.2s;
    border-bottom: none; 
}

.contact-name-trigger:hover .name-text {
    color: var(--call-into-action) 
}

/* Tooltip popup */
.person-tooltip {
    display: none;
    position: fixed; /* ← changed from absolute to fixed */
    z-index: 500; 
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    padding: 8px;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

    .person-tooltip img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        object-position: center 10%; 
        display: block;
    }

    .person-tooltip .tooltip-name {
        font-size: 12px;
        margin-top: 6px;
        color: #444;
    }

    /* Arrow */
    .person-tooltip::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: white;
    }

/* Show on hover */
.contact-name-trigger:hover .person-tooltip {
    display: block;
}
.contact-name-trigger.active .person-tooltip {
    display: block;
}
/* ========================================
   RESPONSIVE BREAKPOINT
   ======================================== */
@media (max-width: 1200px) {

    .content{
        padding-left: 32px;
    }

    .ict-logo {
        display: none;
    }

    .hamburger-btn {
        display: flex !important;
    }

    .sidebar {
        position: fixed;
        top: 54px;
        left: 0;
        width: 330px;
        height: calc(100vh - 54px);
        overflow-y: scroll;
        transform: translateX(-110%);
        transition: transform 0.35s ease;
        z-index: 1000;
        pointer-events: none;
        background: var(--bg);
        scrollbar-width: thin; /* "auto" or "thin" */
        scrollbar-color: var(--scrollbar) transparent; /* thumb color track color */
        box-shadow: 2px 0px 5px var(--side-menu-shadow);
    }
        .sidebar::-webkit-scrollbar {
            width: 8px; /* Adjust width as needed */
        }

        .sidebar::-webkit-scrollbar-track {
            background: transparent; /* Makes the track transparent */
        }

        .sidebar::-webkit-scrollbar-thumb {
            background-color: var(--primary-call-into-action); /* Color of the draggable handle, can use rgba for transparency */
        }

        .sidebar::-webkit-scrollbar-button {
            display: none;
            height: 0;
            width: 0;
        }

        .sidebar.open {
            transform: translateX(0);
            pointer-events: auto;
        }


    .sidebar-content.open {
        max-height: 9999px !important;
    }

    .sidebar-content.closed {
        max-height: 0 !important;
        opacity: 0 !important;
    }
}

@media (max-width: 1024px) {

    .feature-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {

    .button-base .text-medium3 {
        font-size: 18px !important;

    }
    .header {
        padding: 4px 16px 4px 4px;
    }
    .logout-panel {
        padding-right: 16px;
    }
    .sidebar {
        width: 350px !important;
    }

    .sidebar-item {
        padding: 10px 8px 10px 48px;
    }
    .content {
        padding: 61px 16px 16px 12px;
    }

    .feature-card {
        width: 96px;
        height: 96px;
    }
    .feature-card-icon svg {
        height: 38px; 
        width: auto;
    }

    .feature-card-label {
        font: var(--text5-medium);
        font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    }
    .button-row-memo {
        
        width: 120px;
    }

    .button-row-memo-image {
        width: 120px;
    }
    .button-row-container {
        width: calc(100% - 10px);
    }
    .accordion-link-row {
        margin-bottom: 16px !important;
    }
    .catagory {
        width: stretch !important;
    }

    .contact-person {
        width: 250px !important;
    }
}

@media (max-width: 768px) {
    .feature-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .calendar-section {
        padding: 16px;
    }
}

@media (max-width: 690px) {

    .button-row-memo {
        display: none;
    }

    .button-row-container {
        width: 100%;
        box-sizing: border-box;
    }

    .feature-cards {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        gap: 8px;
        box-sizing: border-box;
        padding-bottom: 8px;
        align-items: stretch; /* make all <a> tags same height */
    }

        .feature-cards > a {
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            align-items: stretch; /* stretch card to fill <a> height */
        }

    .feature-card {
        width: 100%;
        height: auto; /* remove aspect-ratio, let content + stretch control height */
        min-height: 0;
        box-sizing: border-box;
        padding: 4px;
        flex: 1; /* fill the <a> vertically */
    }

    .feature-card-icon svg {
        height: 80%;
        width: auto;
    }

    .feature-card-label {
        font: var(--text4-medium);
        margin-top: -10px;
    }
    #memoTooltip {
        top: 120px;
        right: -25px !important;
    }

    .accordion-link-row {
        margin-bottom: 16px !important;
    }

    .contact-header .text2-medium{
        font-size: 20px;
    }
    .main-card {
        padding: 16px;
    }

    .footer .text3-medium {
        font-size: 16px;
    
    }
    .footer .semi5-regular {
        font-size: 12px;
    }

}

@media (max-width: 640px) {
    
    .accordion-column-container {
        flex-wrap: wrap;
    }

    .accordion-column-item {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .month-navigation {
        margin-top: 16px;
    }
}
@media (max-width: 590px) {

    .feature-card-icon svg {
        margin-top: -10px;
        height: 75%;
        width: auto;
    }
    .feature-card-label {
        font: var(--text5-medium);
        margin-top: -15px;
    }
    .feature-cards {
        width: stretch;
        padding-bottom: 16px;
    }
    .button-row-container {
        width: 100%;
    }
    .page-title {
        padding-right: 8px;
    }

    .button-row-memo-schedule{
        visibility: hidden;
    }
    .content-page-header {
        width: 100%;
        min-width: 35%;
        height: 70px;
        display: inline-flex;
        flex-direction: row;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-end;
        border-bottom: solid 2px var(--content-page-header-line);
        margin-bottom: 24px;
    }
    .weekly-month-navigation {
        gap: 0px;
    }

        .weekly-month-navigation .text-medium {
            font-size: 28px;
        }

    .contact-row .text4-regular {
         font-size: 14px;
    }
    .contact-header .text2-medium {
        font-size: 18px;
    }
    
}

@media (max-width: 520px) {

    .badges {
        width: 185px;
    }

    .tab {
        border-radius: 20px;
    }

    .badge {
        border-radius: 20px;
    }

    .content-page-header .text-medium {
        font-size: 28px;
    }
    .weekly-month-navigation {
        margin-top: 50px;
    }
}

    @media (max-width: 480px) {
        .feature-card-icon svg {
            margin-top: -20px;
            height: 50%;
            width: auto;
        }

        .feature-card-label {
            font: var(--text6-medium);
            margin-top: -25px;
        }

        .header .text3-medium {
            font-size: 16px !important;
        }

        .header .header-action a {
            font-size: 16px;
        }

        .header-brand {
            gap: 0px !important;
        }

        .dropbtn {
            font-size: 16px;
        }

        .calendar-container {
            width: 100% !important;
            max-width: 1200px;
            box-sizing: border-box !important;
            padding: 12px 4px;
        }

        .calendar-grid {
            gap: 2px;
        }

        .month-navigation {
            gap: 0px;
        }

            .month-navigation .text-medium {
                font-size: 28px;
            }

        .month-year {
            min-width: 150px;
        }

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

        .weekly-day-header-column {
            font-size: 12px;
        }
        .contact-header .text2-medium {
            font-size: 16px;
        }
        .contact-row .text4-regular {
            font-size: 12px;
        }
    }

    @media (max-width: 430px) {

        .feature-card-icon svg {
            margin-top: -25px;
        }

        .feature-card-label {
            font: var(--text7-medium);
            margin-top: -25px;
        }
        .content-page-header .text-medium {
            font-size: 24px;
        }
        
    }

    @media (max-width: 370px) {
        .feature-card-icon svg {
            margin-top: 0px;
            height: 50%;
            width: auto;
            max-height: 60px;
        }

        .feature-card-label {
            visibility: hidden !important;
        }
        .content-page-header .text-medium {
            font-size: 20px;
        }
        .contact-header .text2-medium {
            font-size: 14px;
        }
    }