/* ==========================================================
   BERWIEN VARIABLES
========================================================== */

:root {

    --wine: #7d1629;
    --wine-dark: #57101d;

    --cream: #f3ede5;
    --cream-light: #faf7f2;

    --white: #ffffff;

    --text: #2d2722;
    --text-soft: #776e65;
    --text-muted: #a39a91;

    --border: #ded4c8;
    --border-soft: #ece5dc;

    /* KEUKEN */
    --kitchen: #d7e5d0;
    --kitchen-light: #eef4ea;
    --kitchen-dark: #506748;

    /* VASTE BEDIENING */
    --service: #f4cda5;
    --service-light: #faead8;
    --service-dark: #875421;

    /* STUDENTJOBS */
    --student: #dcd8f3;
    --student-light: #f1effb;
    --student-dark: #595584;
    --student-border: #c7c1e8;

    /* STATUS */
    --green: #61775a;
    --green-light: #e8f0e4;

    /* INGEPLANDE STUDENT */
    --accepted: #dce9d7;
    --accepted-light: #eef5eb;
    --accepted-dark: #46613f;
    --accepted-border: #b8cfb0;

    /* FEESTDAG / SPECIALE DAG */
    --special-day: #f2b53d;
    --special-day-light: #fff0bd;
    --special-day-dark: #6b3d00;
    --special-day-border: #d98c09;

    --danger: #922d40;
    --danger-light: #f4e2e5;

    --weekend: #fbf7ec;

    --shadow:
        0 15px 50px
        rgba(51, 34, 25, .07);

}


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

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;

    min-height: 100%;
}

body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--text);

    background-color: var(--cream-light);
    background-image:
        linear-gradient(
            rgba(250, 247, 242, .90),
            rgba(250, 247, 242, .93)
        ),
        url('/static/Bistro_Berwien_Achtergrond.png');
    background-position:
        center center,
        center 64%;
    background-size:
        auto,
        clamp(560px, 72vw, 980px) auto;
    background-repeat:
        no-repeat,
        no-repeat;
    background-attachment:
        fixed,
        fixed;
}

.dashboard-body {
    color: var(--text);

    background-color: #e7dbce;
    background-image:
        radial-gradient(
            circle at top,
            rgba(248, 239, 230, 0.78),
            rgba(233, 221, 209, 0.92) 56%,
            rgba(223, 209, 195, 0.97)
        ),
        linear-gradient(
            rgba(233, 221, 209, 0.72),
            rgba(226, 213, 200, 0.86)
        ),
        url('/static/Bistro_Berwien_Achtergrond.png');
    background-position:
        center center,
        center center,
        center 68%;
    background-size:
        auto,
        auto,
        clamp(560px, 70vw, 960px) auto;
    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat;
    background-attachment:
        fixed,
        fixed,
        fixed;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;

    text-decoration: none;
}


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

.eyebrow {
    margin-bottom: 7px;

    color: var(--wine);

    font-size: 10px;
    font-weight: 850;

    letter-spacing: 2px;
}

.alert {
    margin-bottom: 22px;

    padding: 13px 16px;

    border:
        1px solid
        #e4d0ac;

    border-radius: 10px;

    color: #765b1f;

    background: #fff4d9;

    font-size: 12px;
}

.dev-alert {
    border-color: #cddbc5;

    color: var(--green);

    background: var(--green-light);
}


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

.login-page {
    min-height: 100vh;

    background-color: var(--cream);
    background-image:
        linear-gradient(
            rgba(243, 237, 229, 0.76),
            rgba(243, 237, 229, 0.82)
        ),
        url('/static/Bistro_Berwien_Achtergrond.png');
    background-position:
        center center,
        center center;
    background-size:
        auto,
        clamp(620px, 78vw, 1050px) auto;
    background-repeat:
        no-repeat,
        no-repeat;
    background-attachment:
        fixed,
        fixed;
}

.login-layout {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        1fr
        1.15fr;
}

.login-brand {
    position: relative;

    padding:
        clamp(
            45px,
            7vw,
            120px
        );

    display: flex;

    flex-direction: column;

    justify-content: center;

    color: white;

    background:
        linear-gradient(
            145deg,
            rgba(130, 24, 45, 0.97),
            rgba(91, 18, 30, 0.97)
        );
}

.login-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at top left,
            rgba(255,255,255,.08),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.015),
            rgba(0,0,0,.06)
        );
    pointer-events: none;
}

.login-brand::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.024),
            rgba(255,255,255,.024) 2px,
            transparent 2px,
            transparent 8px
        );
    mix-blend-mode: screen;
    opacity: .7;
    pointer-events: none;
}

.brand-mark {
    position: relative;
    z-index: 1;

    width: clamp(180px, 17vw, 250px);
    height: clamp(180px, 17vw, 250px);
    margin-bottom: 24px;

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

    border:
        2px solid
        rgba(255,255,255,.42);
    border-radius: 50%;

    background:
        rgba(255,255,255,.02);

    box-shadow:
        inset 0 0 25px
        rgba(255,255,255,.04),
        0 18px 35px
        rgba(32, 8, 13, .15);
}

.brand-logo {
    position: relative;
    z-index: 1;

    width: 74%;
    height: auto;

    display: block;

    filter:
        drop-shadow(
            0 10px 18px
            rgba(0,0,0,.12)
        );
}

.brand-small {
    position: relative;
    z-index: 1;

    margin-bottom: 8px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 7px;
    text-transform: uppercase;
}

.brand-large {
    position: relative;
    z-index: 1;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            58px,
            5.7vw,
            96px
        );

    line-height: .9;

    letter-spacing: -4px;
    text-shadow:
        0 10px 24px
        rgba(17, 8, 11, .18);
}

.brand-line {
    position: relative;
    z-index: 1;

    width: 80px;
    height: 1px;

    margin:
        38px 0
        22px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.8),
            rgba(255,255,255,.25)
        );
}

.login-brand p {
    position: relative;
    z-index: 1;

    margin: 0;

    color:
        rgba(255,255,255,.8);

    font-family:
        Georgia,
        serif;

    font-size: 19px;

    font-style: italic;
    letter-spacing: .2px;
}

.login-card {
    padding: 40px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.login-card-inner {
    position: relative;

    width: 100%;

    max-width: 440px;

    padding:
        28px
        28px
        12px;

    border:
        1px solid
        rgba(123, 96, 82, .18);
    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.32),
            rgba(246,241,236,.44)
        );

    box-shadow:
        0 18px 40px
        rgba(35, 24, 17, .07),
        inset 0 1px 0
        rgba(255,255,255,.5);

    backdrop-filter: blur(3px);
}

.login-card-inner::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(123, 96, 82, .06);
    border-radius: 16px;
    pointer-events: none;
}

.login-card h1 {
    margin:
        0 0
        12px;

    font-family:
        Georgia,
        serif;

    font-size: 43px;

    font-weight: 500;
    letter-spacing: -.04em;
}

.login-intro {
    margin:
        0 0
        34px;

    color: var(--text-soft);

    line-height: 1.6;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;

    margin-bottom: 7px;

    font-size: 12px;

    font-weight: 750;
}

.form-group input {
    width: 100%;
    height: 48px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(125, 96, 81, .16);

    border-radius: 12px;

    background:
        rgba(255,255,255,.72);

    outline: none;
    box-shadow:
        inset 0 1px 2px
        rgba(70, 45, 40, .03);
}

.form-group input:focus {
    border-color: var(--wine);

    box-shadow:
        0 0 0 3px
        rgba(125,22,41,.08),
        inset 0 1px 2px
        rgba(70, 45, 40, .03);
}

.button {
    min-height: 46px;

    border: 0;

    border-radius: 12px;

    font-weight: 750;
    letter-spacing: .02em;
}

.button-primary {
    color: white;

    background:
        linear-gradient(
            180deg,
            #8d1b2f,
            #6d1223
        );

    box-shadow:
        0 12px 26px
        rgba(125,22,41,.2),
        inset 0 1px 0
        rgba(255,255,255,.12);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.button-primary:hover {
    transform: translateY(-1px);

    box-shadow:
        0 16px 30px
        rgba(125,22,41,.25),
        inset 0 1px 0
        rgba(255,255,255,.12);

    filter: brightness(1.02);
}

.button-full {
    width: 100%;
}

textarea {
    width: 100%;

    min-height: 120px;

    padding: 12px 14px;

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

    border-radius: 11px;

    background: white;

    color: var(--text);

    resize: vertical;
}

textarea:focus {
    border-color: var(--wine);

    box-shadow:
        0 0 0 3px
        rgba(125,22,41,.08);

    outline: none;
}


/* ==========================================================
   APP
========================================================== */

.app-shell {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        220px
        minmax(0, 1fr);
}


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

.sidebar {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 30;

    width: 220px;
    height: 100vh;

    padding:
        31px
        20px
        24px;

    display: flex;

    flex-direction: column;

    color: white;

    background:
        linear-gradient(
            180deg,
            rgba(124, 20, 38, 0.97),
            rgba(92, 15, 28, 0.97)
        );

    box-shadow:
        inset -1px 0 0
        rgba(255,255,255,.08),
        20px 0 40px
        rgba(54, 12, 19, .12);
}

.sidebar-logo {
    padding:
        10px 8px 28px;

    display: flex;

    justify-content: center;

    align-items: center;
}

.sidebar-logo-image {
    width: 100%;
    max-width: 170px;
    height: auto;

    display: block;

    background: transparent;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.12));
}

.sidebar-navigation {
    flex: 1;
}

.navigation-item {
    min-height: 49px;

    padding:
        0 14px;

    display: flex;

    align-items: center;

    gap: 12px;

    border-radius: 11px;

    color:
        rgba(255,255,255,.75);

    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;

    transition:
        transform .14s ease,
        background .14s ease,
        color .14s ease;
}

.navigation-item:hover {
    color: white;
    background: rgba(255,255,255,.06);
    transform: translateX(2px);
}

.navigation-item.active {
    color: white;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.06)
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.08);
}

.navigation-icon {
    font-size: 20px;
}

.sidebar-bottom {
    padding-top: 20px;

    border-top:
        1px solid
        rgba(255,255,255,.14);
}

.sidebar-user {
    display: flex;

    align-items: center;

    gap: 10px;
}

.avatar {
    width: 37px;
    height: 37px;

    flex: none;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: var(--wine);

    background: var(--cream);

    font-family:
        Georgia,
        serif;

    font-weight: 700;
}

.sidebar-user > div:last-child {
    display: flex;

    flex-direction: column;
}

.sidebar-user strong {
    font-size: 12px;
}

.sidebar-user span {
    margin-top: 2px;

    font-size: 9px;

    opacity: .68;
}

.logout-button {
    display: inline-block;

    margin:
        15px 0
        0 47px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .75;
}


/* ==========================================================
   MAIN
========================================================== */

.main-content {
    grid-column: 2;

    width: 100%;

    min-width: 0;

    padding:
        38px
        clamp(
            24px,
            3.5vw,
            56px
        )
        55px;
}

.main-content > * + * {
    margin-top: 22px;
}

.page-header {
    max-width: 1500px;

    margin-bottom: 10px;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 30px;
}

.page-header h1 {
    margin: 0;

    font-family:
        Georgia,
        serif;

    font-size: 42px;

    font-weight: 500;
    letter-spacing: -.04em;
}

.page-header p {
    max-width: 720px;

    margin:
        8px 0
        0;

    color: var(--text-soft);

    font-size: 13px;

    line-height: 1.55;
}

.user-role {
    padding:
        8px
        12px;

    border-radius: 50px;

    color: #6c6258;

    background: linear-gradient(180deg, #f3eee9, #e9e1d8);

    border: 1px solid rgba(123, 96, 82, .12);

    font-size: 10px;

    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}


/* ==========================================================
   BESCHIKBAARHEID
========================================================== */

.availability-panel {
    max-width: 1100px;

    margin-bottom: 32px;

    padding: 24px;

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

    border-radius: 15px;

    background: white;

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

.availability-panel-heading {
    margin-bottom: 20px;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 30px;
}

.availability-panel-heading h2 {
    margin: 0;

    font-family:
        Georgia,
        serif;

    font-size: 26px;

    font-weight: 500;
}

.availability-panel-heading p {
    max-width: 650px;

    margin:
        7px 0
        0;

    color: var(--text-soft);

    font-size: 11px;

    line-height: 1.55;
}

.save-summary {
    display: flex;

    flex-direction: column;

    align-items: flex-end;
}

.save-summary strong {
    color: var(--green);

    font-family:
        Georgia,
        serif;

    font-size: 32px;

    font-weight: 500;
}

.unavailable-summary strong {
    color: var(--danger);
}

.save-summary span {
    color: var(--text-soft);

    font-size: 9px;
}


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

.preset-buttons {
    margin-bottom: 17px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap: 9px;
}

.preset-button {
    min-height: 66px;

    padding:
        10px
        12px;

    display: flex;

    align-items: center;

    gap: 10px;

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

    border-radius: 10px;

    color: var(--text);

    background: var(--cream-light);

    text-align: left;
}

.preset-button.active {
    border-color: var(--green);

    background: var(--green-light);

    box-shadow:
        inset 0 0 0 1px
        var(--green);
}

.preset-button.remove.active {
    border-color: var(--danger);

    background: var(--danger-light);

    box-shadow:
        inset 0 0 0 1px
        var(--danger);
}

.preset-icon {
    width: 31px;
    height: 31px;

    flex: none;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: var(--green);

    background: white;

    font-weight: 800;
}

.preset-button > span:last-child {
    display: flex;

    flex-direction: column;
}

.preset-button strong {
    font-size: 11px;
}

.preset-button small {
    margin-top: 3px;

    color: var(--text-soft);

    font-size: 8px;
}

.save-availability-button {
    width: 100%;
    height: 47px;

    border: 0;

    border-radius: 10px;

    color: white;

    background: var(--wine);

    font-size: 12px;

    font-weight: 800;
}


/* ==========================================================
   STUDENT JOBS / VERLOF
========================================================== */

.request-page-grid {
    display: grid;

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

    gap: 24px;
}

.panel {
    padding: 24px;

    border:
        1px solid
        rgba(123, 96, 82, .14);
    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.75),
            rgba(248,245,240,.9)
        );

    box-shadow:
        0 12px 28px
        rgba(62, 42, 33, .06),
        inset 0 1px 0
        rgba(255,255,255,.6);

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

.panel:hover {
    transform: translateY(-1px);

    box-shadow:
        0 14px 34px
        rgba(62, 42, 33, .08),
        inset 0 1px 0
        rgba(255,255,255,.6);
}

.panel-heading {
    margin-bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;
}

.panel-heading h2 {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 28px;

    font-weight: 500;
    letter-spacing: -.03em;
}

.status-pill {
    padding: 7px 10px;

    border-radius: 999px;

    color: var(--wine);

    background: #f5e7eb;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .8px;

    text-transform: uppercase;
}

.status-pill.muted {
    color: var(--text-soft);

    background: #f0ece7;
}

.status-pill.accent {
    color: var(--student-dark);

    background: var(--student-light);
}

.request-row {
    display: grid;

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

    gap: 16px;
}

.request-panel form {
    display: flex;

    flex-direction: column;

    gap: 16px;
}

.request-list,
.history-list {
    display: flex;

    flex-direction: column;

    gap: 12px;
}

.request-card,
.history-row {
    padding: 14px 16px;

    display: grid;

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

    gap: 14px;

    border:
        1px solid
        rgba(123, 96, 82, .12);
    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.6),
            rgba(245,239,233,.7)
        );

    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

.status-approved {
    border-color: #bed3b8;

    background: #f2f8ee;
}

.history-list {
    gap: 14px;
}

.history-row {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 18px;
    border: 1px solid rgba(125, 22, 41, .08);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(248,240,234,.8));
    box-shadow: 0 8px 18px rgba(41, 26, 20, .04);
}

.history-person,
.history-dates,
.history-reason,
.history-status {
    display: flex;
    flex-direction: column;
}

.history-person strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.history-person span {
    margin-top: 4px;
    color: var(--text-soft);
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: lowercase;
}

.history-dates {
    justify-content: center;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 600;
}

.history-reason {
    justify-content: center;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 500;
}

.history-status {
    align-items: flex-end;
    justify-content: center;
}

.badge.approved {
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--green);
    background: linear-gradient(180deg, #edf5ec, #e0eddc);
    border: 1px solid rgba(97, 119, 90, .15);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.status-pending {
    border-color: #ead8ad;

    background: #fff8ea;
}

.status-rejected {
    border-color: #ebc0c9;

    background: #fdf1f3;
}

.request-date-block,
.request-status-block,
.history-person,
.history-dates,
.history-reason,
.history-status {
    display: flex;

    flex-direction: column;
}

.request-date-block strong,
.history-person strong {
    font-size: 12px;
}

.request-date-block small,
.history-reason,
.history-dates,
.history-person span,
.request-status-block small {
    margin-top: 5px;

    color: var(--text-soft);

    font-size: 10px;
    line-height: 1.5;
}

.request-status-block {
    align-items: flex-end;

    justify-content: center;
}

.badge {
    padding: 6px 9px;

    border-radius: 999px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .7px;

    text-transform: uppercase;
}

.badge.pending {
    color: #8b6122;

    background: #f9e9bf;
}

.badge.approved {
    color: var(--green);

    background: var(--green-light);
}

.badge.rejected {
    color: var(--danger);

    background: var(--danger-light);
}

.empty-state {
    padding: 18px 16px;

    border: 1px dashed rgba(123, 96, 82, .2);

    border-radius: 12px;

    color: var(--text-soft);

    background: rgba(255,255,255,.35);

    font-size: 12px;
}

.approvals-panel {
    grid-column: 1 / -1;
}

.approval-card {
    padding: 16px;

    display: grid;

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

    gap: 18px;

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

    border-radius: 12px;

    background: var(--cream-light);
}

.approval-person {
    display: flex;

    align-items: center;

    gap: 10px;
}

.avatar.small {
    width: 32px;
    height: 32px;

    font-size: 13px;
}

.approval-person > div:last-child {
    display: flex;

    flex-direction: column;
}

.approval-person strong,
.approval-info strong {
    font-size: 12px;
}

.approval-person span,
.approval-info small {
    margin-top: 4px;

    color: var(--text-soft);

    font-size: 10px;
}

.approval-info {
    display: flex;

    flex-direction: column;

    justify-content: center;
}

.approval-info p {
    margin: 6px 0 0;

    color: var(--text-soft);

    font-size: 10px;
    line-height: 1.5;
}

.approval-form {
    display: flex;

    align-items: center;

    justify-content: flex-end;
}

.approval-actions {
    display: flex;

    gap: 8px;
}

.action-approve,
.action-reject {
    min-height: 38px;

    padding: 0 14px;

    border: 0;

    border-radius: 9px;

    font-size: 10px;

    font-weight: 800;
}

.action-approve {
    color: white;

    background: var(--green);
}

.action-reject {
    color: var(--danger);

    background: var(--danger-light);
}

.history-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 2fr) auto;

    align-items: center;
}

.full-width {
    grid-column: 1 / -1;
}

.request-card:hover,
.history-row:hover {
    box-shadow: 0 8px 18px rgba(54, 36, 28, .05);
    transform: translateY(-1px);
}


/* ==========================================================
   MY DATA / TIPS
========================================================== */

.stats-panel {
    margin-bottom: 24px;
}

.stats-grid {
    display: grid;

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

    gap: 16px;
}

.stat-box {
    padding: 18px 16px;

    display: flex;

    flex-direction: column;

    gap: 8px;

    border:
        1px solid
        rgba(123, 96, 82, .12);
    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.62),
            rgba(240,234,228,.76)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.5);
}

.stat-box span {
    color: var(--text-soft);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .8px;
}

.stat-box strong {
    font-size: 20px;

    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -.02em;
}

.tip-row {
    margin-bottom: 14px;

    padding: 14px 16px;

    display: grid;

    grid-template-columns: minmax(0, 1.4fr) 180px 170px;

    gap: 16px;

    align-items: center;

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

    border-radius: 12px;

    background: var(--cream-light);
}

.tip-employee {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.tip-employee strong {
    font-size: 13px;
}

.tip-employee span {
    color: var(--text-soft);

    font-size: 10px;
}

.tip-rate-wrap {
    display: flex;

    flex-direction: column;

    gap: 6px;
}

.tip-rate-wrap label {
    color: var(--text-soft);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .7px;

    text-transform: uppercase;
}

.tip-rate-wrap input {
    width: 100%;

    height: 42px;

    padding: 0 12px;

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

    border-radius: 9px;

    background: white;
}

.tip-total-box {
    display: flex;

    flex-direction: column;

    gap: 6px;

    padding: 8px 10px;

    border-radius: 9px;

    background: #f3f0fb;
}

.tip-total-box span {
    color: var(--student-dark);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .7px;

    text-transform: uppercase;
}

.tip-total-box strong {
    font-size: 18px;

    color: var(--student-dark);
}

.tip-pool-box {
    margin-top: 18px;

    margin-bottom: 18px;

    display: flex;

    flex-direction: column;

    gap: 8px;
}

.tip-pool-box label {
    color: var(--text-soft);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .7px;

    text-transform: uppercase;
}

.tip-pool-box input {
    width: 100%;

    height: 42px;

    padding: 0 12px;

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

    border-radius: 9px;

    background: white;
}

.tip-summary-box {
    margin-top: 22px;

    padding: 18px 16px;

    display: grid;

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

    gap: 12px;

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

    border-radius: 12px;

    background: #f8f5f1;
}

.tip-summary-box > div {
    display: flex;

    flex-direction: column;

    gap: 6px;
}

.tip-summary-box span {
    color: var(--text-soft);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .7px;

    text-transform: uppercase;
}

.tip-summary-box strong {
    font-size: 22px;

    font-family: Georgia, "Times New Roman", serif;
}

.tips-main {
    max-width: 1500px;
}

.tips-overview {
    margin-bottom: 16px;
}

.tips-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.kpi-card {
    padding: 18px 18px 16px;
    border-radius: 14px;
    border: 1px solid rgba(123, 96, 82, .12);
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(244,238,232,.8));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

.kpi-card span {
    display: block;
    margin-bottom: 10px;
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.kpi-card strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(24px, 2vw, 34px);
    letter-spacing: -.04em;
}

.kpi-card-accent {
    background: linear-gradient(180deg, rgba(140, 27, 47, .08), rgba(125, 22, 41, .02));
    border-color: rgba(125, 22, 41, .18);
}

.kpi-card-accent strong {
    color: var(--wine);
}

.tips-panel {
    padding-bottom: 20px;
}

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

.tips-table {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tips-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(120px, .9fr) minmax(150px, 1fr) minmax(120px, .8fr);
    align-items: center;
    gap: 18px;
    padding: 18px 18px;
    border: 1px solid rgba(125, 22, 41, .08);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(246,238,232,.8));
    box-shadow: 0 10px 22px rgba(41, 26, 20, .04);
}

.person-block,
.hours-block,
.rate-block,
.payout-block {
    display: flex;
    flex-direction: column;
}

.person-block strong {
    font-size: 15px;
}

.person-block span,
.hours-block small {
    margin-top: 6px;
    color: var(--text-soft);
    font-size: 11px;
}

.hours-block {
    justify-content: center;
}

.hours-block strong {
    margin-top: 6px;
    font-size: 18px;
    font-family: Georgia, "Times New Roman", serif;
}

.rate-block label {
    margin-bottom: 6px;
    color: var(--text-soft);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
}

.rate-block input,
.pool-input-wrap input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(125, 96, 81, .18);
    border-radius: 12px;
    background: rgba(255,255,255,.74);
    color: var(--text);
    font-size: 16px;
    outline: none;
}

.rate-block input:focus,
.pool-input-wrap input:focus {
    border-color: var(--wine);
    box-shadow: 0 0 0 3px rgba(125,22,41,.08);
}

.payout-block {
    align-items: flex-end;
    justify-content: center;
}

.payout-block span {
    color: var(--text-soft);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
}

.payout-block strong {
    margin-top: 7px;
    font-size: 18px;
    font-family: Georgia, "Times New Roman", serif;
    color: var(--wine);
}

.tips-footer-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 18px;
}

.pool-card {
    padding: 18px 18px 16px;
    border: 1px solid rgba(123, 96, 82, .12);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(246,238,232,.8));
}

.pool-card label,
.pool-card span {
    display: block;
    margin-bottom: 10px;
    color: var(--text-soft);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
}

.pool-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid rgba(125, 96, 81, .18);
    background: rgba(255,255,255,.74);
}

.pool-input-wrap span {
    margin: 0;
    color: var(--wine);
    font-size: 18px;
    letter-spacing: 0;
    text-transform: none;
}

.pool-input-wrap input {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding-left: 0;
}

.summary-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.summary-card strong {
    display: block;
    margin-top: 8px;
    font-size: clamp(26px, 2vw, 36px);
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -.04em;
    color: var(--wine);
}

@media (max-width: 980px) {
    .tips-kpis,
    .tips-footer-grid,
    .tips-row {
        grid-template-columns: 1fr;
    }

    .tips-row {
        gap: 12px;
    }
}


/* ==========================================================
   FEESTDAGEN / SPECIALE DAGEN
========================================================== */

.special-days-panel {
    margin-bottom: 22px;
    padding: 20px;

    display: grid;
    grid-template-columns: minmax(260px, 1.05fr) minmax(420px, 1.35fr);
    gap: 18px 28px;
    align-items: end;

    border: 1px solid #e2d4bc;
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 249, 235, .96),
            rgba(248, 239, 221, .92)
        );

    box-shadow:
        0 12px 28px
        rgba(73, 48, 20, .05);
}

.special-days-panel-copy h2 {
    margin: 0;

    font-family:
        Georgia,
        serif;

    font-size: 24px;
    font-weight: 500;
    letter-spacing: -.025em;
}

.special-days-panel-copy p {
    max-width: 560px;
    margin: 8px 0 0;

    color: var(--text-soft);

    font-size: 10px;
    line-height: 1.55;
}

.special-day-form {
    display: grid;
    grid-template-columns: 150px minmax(190px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.special-day-form label {
    min-width: 0;
}

.special-day-form label > span {
    display: block;
    margin-bottom: 6px;

    color: var(--text-soft);

    font-size: 8px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.special-day-form input {
    width: 100%;
    height: 42px;

    padding: 0 11px;

    border: 1px solid #ddcfb6;
    border-radius: 9px;

    color: var(--text);
    background: rgba(255,255,255,.86);

    outline: none;
}

.special-day-form input:focus {
    border-color: var(--special-day-border);

    box-shadow:
        0 0 0 3px
        rgba(224, 183, 95, .14);
}

.special-day-save-button {
    min-width: 128px;
    height: 42px;

    padding: 0 14px;

    border: 1px solid #c79e47;
    border-radius: 9px;

    color: #fff;
    background: #8a5d12;

    font-size: 9px;
    font-weight: 850;

    box-shadow:
        0 5px 14px
        rgba(121, 80, 12, .14);
}

.special-day-save-button:hover {
    background: #724b0d;
}

.special-days-current-month {
    grid-column: 1 / -1;

    padding-top: 14px;

    border-top: 1px solid rgba(121, 80, 12, .12);
}

.special-days-current-month > strong {
    display: block;
    margin-bottom: 9px;

    color: var(--special-day-dark);

    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.special-day-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.special-day-chip {
    min-height: 42px;

    padding: 7px 8px 7px 9px;

    display: flex;
    align-items: center;
    gap: 8px;

    border: 1px solid #e1bd73;
    border-radius: 10px;

    color: var(--special-day-dark);
    background: rgba(255,255,255,.72);
}

.special-day-chip-icon {
    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    flex: 0 0 22px;

    border-radius: 50%;

    color: #fff;
    background: #a66d13;

    font-size: 10px;
    font-weight: 900;
}

.special-day-chip > div {
    min-width: 0;
}

.special-day-chip strong,
.special-day-chip small {
    display: block;
}

.special-day-chip strong {
    font-size: 9px;
}

.special-day-chip small {
    margin-top: 2px;

    color: #8e744c;

    font-size: 7px;
}

.special-day-chip form {
    margin-left: 2px;
}

.special-day-delete-button {
    width: 26px;
    height: 26px;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 7px;

    color: #9c6a1a;
    background: rgba(240, 197, 111, .18);

    font-size: 16px;
    line-height: 1;
}

.special-day-delete-button:hover {
    color: var(--danger);
    background: var(--danger-light);
}

.special-days-empty {
    color: var(--text-soft);

    font-size: 9px;
    font-style: italic;
}

@media (max-width: 1050px) {
    .special-days-panel {
        grid-template-columns: 1fr;
    }

    .special-day-form {
        grid-template-columns: 150px minmax(180px, 1fr) auto;
    }
}

@media (max-width: 720px) {
    .special-day-form {
        grid-template-columns: 1fr;
    }

    .special-day-save-button {
        width: 100%;
    }
}


/* ==========================================================
   PLANNER HEADER
========================================================== */

.planner-header {
    margin-bottom: 14px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 20px;
}

.planner-header h2 {
    margin: 0;

    font-family:
        Georgia,
        serif;

    font-size: 31px;

    font-weight: 500;
}

.planner-actions {
    display: flex;

    align-items: center;

    gap: 10px;
}

.month-navigation {
    display: flex;

    align-items: center;

    gap: 6px;
}

.month-arrow,
.today-button {
    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 9px;

    color: var(--text);

    background: white;

    font-size: 11px;

    font-weight: 700;
}

.month-arrow {
    width: 40px;

    font-size: 17px;
}

.today-button {
    padding:
        0 15px;
}


/* ==========================================================
   PRINT BUTTON
========================================================== */

.print-button {
    height: 40px;

    padding:
        0 15px;

    display: flex;

    align-items: center;

    gap: 8px;

    border: 0;

    border-radius: 9px;

    color: white;

    background: var(--wine);

    font-size: 10px;

    font-weight: 800;

    box-shadow:
        0 5px 14px
        rgba(125,22,41,.13);
}

.print-button:hover {
    background: var(--wine-dark);
}

.print-button-icon {
    font-size: 17px;

    line-height: 1;
}


/* ==========================================================
   LEGENDA
========================================================== */

.planner-legend {
    min-height: 45px;

    margin-bottom: 11px;

    padding:
        8px 13px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 16px;

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

    border-radius: 9px;

    color: var(--text-soft);

    background: #f8f4ee;

    font-size: 9px;
}

.planner-legend > strong {
    color: var(--text);
}

.planner-legend > span {
    display: flex;

    align-items: center;

    gap: 6px;
}

.legend-color {
    width: 16px;
    height: 16px;

    display: inline-block;

    border-radius: 4px;
}

.legend-color.keuken {
    border:
        1px solid
        #c3d3bc;

    background: var(--kitchen);
}

.legend-color.bediening {
    border:
        1px solid
        #edc08e;

    background: var(--service);
}

.legend-color.studentjob {
    border:
        1px solid
        var(--student-border);

    background: var(--student);
}

.legend-separator {
    width: 1px;
    height: 20px;

    background: var(--border);
}

.legend-available {
    width: 8px;
    height: 8px;

    display: inline-block;

    border-radius: 50%;

    background: #7970b1;
}

.legend-planned-student {
    width: 16px;
    height: 16px;

    display: inline-block;

    border: 1px solid var(--accepted-border);
    border-radius: 4px;

    background: var(--accepted);
}

.legend-special-day {
    width: 16px;
    height: 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--special-day-border);
    border-radius: 4px;

    color: var(--special-day-dark);
    background: var(--special-day);

    font-style: normal;
    font-size: 9px;
    font-weight: 900;
}

.legend-unavailable {
    width: 16px;
    height: 16px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: var(--danger);

    background: var(--danger-light);

    font-style: normal;

    font-weight: 900;
}


/* ==========================================================
   PLANNER CARD
========================================================== */

.planner-card {
    width: 100%;

    overflow: hidden;

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

    border-radius: 14px;

    background: white;

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

.planner-scroll {
    width: 100%;

    overflow: auto;

    max-height:
        calc(
            100vh - 260px
        );
}


/* ==========================================================
   TABLE
========================================================== */

.planner-table {
    width: max-content;

    min-width: 100%;

    border-spacing: 0;

    border-collapse: separate;

    table-layout: fixed;
}

.planner-table th,
.planner-table td {
    border-right:
        1px solid
        var(--border-soft);

    border-bottom:
        1px solid
        var(--border-soft);
}


/* ==========================================================
   STICKY HEADER
========================================================== */

.planner-table thead th {
    position: sticky;

    top: 0;

    z-index: 12;

    background: #f3eee7;
}

.staff-column {
    width: 205px;

    min-width: 205px;

    max-width: 205px;
}

.planner-corner {
    position: sticky !important;

    left: 0;

    z-index: 20 !important;

    height: 58px;

    padding:
        9px
        13px;

    text-align: left;

    background:
        #eee6dc !important;
}

.corner-title {
    color: var(--text);

    font-size: 11px;

    font-weight: 850;
}

.planner-corner > span {
    display: block;

    margin-top: 3px;

    color: var(--text-soft);

    font-size: 8px;

    font-weight: 500;
}


/* ==========================================================
   DAY HEADERS
========================================================== */

.day-column {
    width: 86px;

    min-width: 86px;

    height: 58px;

    text-align: center;

    vertical-align: middle;
}

.day-column.weekend {
    background: #f6f0e3;
}

.day-column.today-column {
    position: sticky;

    background: #f5e4e7;
}

.day-column.today-column::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background: var(--wine);
}

.day-column.special-day-column {
    position: relative;
    overflow: hidden;

    height: 58px;
    padding-bottom: 12px;

    color: #4f2b00;

    background:
        linear-gradient(
            180deg,
            #ffe391 0%,
            #f8c557 100%
        );

    box-shadow:
        inset 0 0 0 2px rgba(190, 112, 0, .34),
        inset 0 -4px 0 #b96f00;
}

.day-column.special-day-column .weekday {
    color: #6f4304;
    font-weight: 900;
}

.day-column.special-day-column > strong {
    color: #2f1b05;
}

.special-day-badge {
    position: absolute;
    top: 4px;
    right: 4px;

    min-height: 12px;
    padding: 0 4px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.30);
    border-radius: 999px;

    color: #fff;
    background: #9d5700;

    box-shadow: 0 2px 5px rgba(111, 61, 0, .16);

    font-size: 5px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .08em;
}

.special-day-name {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;

    display: block;
    margin: 0;
    padding: 2px 3px;

    overflow: hidden;

    border: 1px solid rgba(111, 61, 0, .16);
    border-radius: 4px;

    color: #3f2200;
    background: rgba(255, 248, 221, .72);

    box-shadow:
        0 1px 3px
        rgba(111, 61, 0, .10);

    font-size: 7.5px;
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: .01em;
    text-align: center;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.weekday {
    display: block;

    margin-bottom: 3px;

    color: var(--text-soft);

    font-size: 8px;

    font-weight: 750;

    text-transform: uppercase;
}

.day-column strong {
    display: block;

    font-size: 14px;

    font-weight: 850;
}


/* ==========================================================
   GROUP DIVIDERS
========================================================== */

.group-divider-row td {
    height: 31px;

    padding: 0;

    border-right: 0;

    background: #f5f0e9;
}

.group-divider-label {
    position: sticky;

    left: 0;

    width: max-content;

    height: 31px;

    padding:
        0 12px;

    display: flex;

    align-items: center;

    gap: 7px;

    color: var(--text);

    font-size: 9px;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .8px;
}

.group-divider-label small {
    margin-left: 4px;

    color: var(--text-muted);

    font-size: 7px;

    font-weight: 500;

    text-transform: none;

    letter-spacing: 0;
}

.group-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;
}

.group-dot.kitchen {
    background: #8ca780;
}

.group-dot.service {
    background: #db9958;
}

.group-dot.student {
    background: #7970b1;
}

.group-divider-label.kitchen {
    color: var(--kitchen-dark);
}

.group-divider-label.service {
    color: var(--service-dark);
}

.group-divider-label.student {
    color: var(--student-dark);
}


/* ==========================================================
   STAFF ROWS
========================================================== */

.staff-row {
    height: 60px;
}

.staff-person {
    position: sticky;

    left: 0;

    z-index: 8;

    height: 60px;

    padding:
        8px
        10px;

    display: flex;

    align-items: center;

    gap: 9px;

    background: white;

    text-align: left;
}

.group-student
.staff-person {
    background: #faf9fe;
}

.current-person-row
.staff-person {
    box-shadow:
        inset 4px 0 0
        var(--wine);
}

.staff-avatar {
    width: 34px;
    height: 34px;

    flex: none;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-family:
        Georgia,
        serif;

    font-size: 14px;

    font-weight: 800;
}

.staff-avatar.kitchen {
    color: var(--kitchen-dark);

    background: var(--kitchen);
}

.staff-avatar.service {
    color: var(--service-dark);

    background: var(--service);
}

.staff-avatar.student {
    color: var(--student-dark);

    background: var(--student);
}

.staff-info {
    min-width: 0;

    display: flex;

    flex-direction: column;
}

.staff-info strong {
    overflow: hidden;

    color: var(--text);

    font-size: 10px;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.staff-info span {
    margin-top: 3px;

    color: var(--text-soft);

    font-size: 7px;

    white-space: nowrap;
}

.group-student
.staff-info span {
    color: var(--student-dark);
}


/* ==========================================================
   MATRIX CELL
========================================================== */

.planner-cell {
    position: relative;

    width: 86px;

    min-width: 86px;

    height: 60px;

    padding: 5px;

    vertical-align: middle;

    background: white;

    cursor: pointer;

    transition:
        background .12s ease,
        box-shadow .12s ease;
}

.planner-cell.weekend {
    background: #fffdf7;
}

.planner-cell.group-student {
    background: #fcfbff;
}

.planner-cell.group-student.weekend {
    background: #f9f7fd;
}

.planner-cell.today-column {
    background: #fff6f7;
}

.planner-cell.special-day-column {
    background:
        linear-gradient(
            180deg,
            rgba(255, 224, 132, .38),
            rgba(255, 239, 190, .46)
        );

    box-shadow:
        inset 2px 0 0 rgba(208, 126, 0, .28),
        inset -2px 0 0 rgba(208, 126, 0, .28);
}

.planner-cell.group-student.special-day-column {
    background:
        linear-gradient(
            180deg,
            rgba(255, 220, 116, .34),
            rgba(255, 238, 184, .44)
        );

    box-shadow:
        inset 2px 0 0 rgba(208, 126, 0, .28),
        inset -2px 0 0 rgba(208, 126, 0, .28);
}

.planner-cell.special-day-column:hover {
    background: #ffe6a3;

    box-shadow:
        inset 2px 0 0 rgba(185, 111, 0, .40),
        inset -2px 0 0 rgba(185, 111, 0, .40),
        inset 0 0 0 2px rgba(185, 111, 0, .16);
}

.planner-cell:hover {
    z-index: 5;

    background: #faf7f2;

    box-shadow:
        inset 0 0 0 2px
        rgba(125,22,41,.16);
}

.planner-cell.group-student:hover {
    background: #f6f4fc;
}


/* ==========================================================
   SHIFT BLOKKEN
========================================================== */

.matrix-shift {
    width: 100%;

    height: 45px;

    padding: 5px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    text-align: center;
}

.matrix-shift.kitchen {
    border:
        1px solid
        #c4d4bc;

    color: var(--kitchen-dark);

    background: var(--kitchen);
}

.matrix-shift.service {
    border:
        1px solid
        #edbe89;

    color: var(--service-dark);

    background: var(--service);
}

.matrix-shift.student {
    border:
        1px solid
        var(--accepted-border);

    color: var(--accepted-dark);

    background: var(--accepted);

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.24);
}

.matrix-shift strong {
    font-size: 8px;

    font-weight: 850;

    white-space: nowrap;
}

.matrix-shift strong span {
    margin:
        0 1px;

    opacity: .55;
}

.print-time {
    display: none;
}


/* ==========================================================
   STUDENT BESCHIKBAAR
========================================================== */

.matrix-available {
    width: 100%;

    min-height: 39px;

    padding: 5px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3px;

    border:
        1px dashed
        #9490bd;

    border-radius: 6px;

    color: var(--student-dark);

    background: var(--student-light);

    font-size: 7px;

    font-weight: 800;

    text-align: center;
}

.matrix-available > span {
    width: 6px;
    height: 6px;

    display: block;

    border-radius: 50%;

    background: #7970b1;
}


/* ==========================================================
   NIET BESCHIKBAAR
========================================================== */

.matrix-unavailable {
    width: 100%;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    color: var(--danger);

    background: var(--danger-light);

    font-size: 16px;

    font-weight: 500;
}


/* ==========================================================
   EIGEN RIJ
========================================================== */

.own-cell {
    cursor: pointer !important;
}

.employee-availability-overlay {
    position: absolute;

    inset: 4px;

    pointer-events: none;
}

.employee-selection {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    font-size: 7px;

    font-weight: 850;

    text-align: center;
}

.employee-selection.available {
    border:
        1px solid
        var(--student-border);

    color: var(--student-dark);

    background: var(--student-light);
}

.employee-selection.unavailable {
    border:
        1px solid
        #dfabb5;

    color: var(--danger);

    background: var(--danger-light);
}


/* ==========================================================
   SUMMARY
========================================================== */

.summary-row {
    height: 54px;
}

.summary-name {
    position: sticky;

    left: 0;

    z-index: 8;

    padding:
        8px
        12px;

    background: #eee7df;

    text-align: left;
}

.summary-name strong {
    display: block;

    font-size: 10px;
}

.summary-name span {
    display: block;

    margin-top: 3px;

    color: var(--text-soft);

    font-size: 7px;
}

.summary-cell {
    width: 86px;

    min-width: 86px;

    background: #f5f0e9;

    text-align: center;
}

.summary-cell.weekend {
    background: #f3ecdd;
}

.summary-cell.today-column {
    background: #f5e4e7;
}

.summary-cell.special-day-column {
    background: #f7d785;

    box-shadow:
        inset 2px 0 0 rgba(185, 111, 0, .30),
        inset -2px 0 0 rgba(185, 111, 0, .30);
}

.summary-cell.special-day-column strong {
    color: #6f3f00;
}

.summary-cell strong {
    display: block;

    color: var(--wine);

    font-family:
        Georgia,
        serif;

    font-size: 14px;
}

.summary-cell span {
    display: block;

    margin-top: 2px;

    color: var(--text-soft);

    font-size: 7px;
}


/* ==========================================================
   PLANNER HINT
========================================================== */

.planner-hint {
    margin-top: 9px;

    color: var(--text-muted);

    font-size: 9px;
}

.planner-hint span {
    margin-right: 5px;

    color: var(--wine);
}


/* ==========================================================
   DRAWER
========================================================== */

.planning-drawer {
    position: fixed;

    top: 0;
    right: 0;

    z-index: 100;

    width:
        min(
            430px,
            96vw
        );

    height: 100vh;

    display: flex;

    flex-direction: column;

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

    background: var(--cream-light);

    box-shadow:
        -25px 0 80px
        rgba(45,28,20,.16);

    transform:
        translateX(103%);

    transition:
        transform .23s ease;
}

.planning-drawer.open {
    transform:
        translateX(0);
}

.drawer-overlay {
    position: fixed;

    inset: 0;

    z-index: 90;

    pointer-events: none;

    opacity: 0;

    background:
        rgba(35,24,19,.22);

    transition:
        opacity .18s ease;
}

.drawer-overlay.open {
    pointer-events: all;

    opacity: 1;
}

.drawer-header {
    padding:
        28px
        28px
        22px;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

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

    background: white;
}

.drawer-header h2 {
    margin: 0;

    font-family:
        Georgia,
        serif;

    font-size: 27px;

    font-weight: 500;
}

.drawer-header p {
    margin:
        5px 0
        0;

    color: var(--text-soft);

    font-size: 10px;

    text-transform: capitalize;
}

.drawer-close {
    width: 36px;
    height: 36px;

    flex: none;

    border: 0;

    border-radius: 50%;

    color: var(--text);

    background: #f1ece5;

    font-size: 21px;
}

.drawer-content {
    padding:
        22px
        27px
        45px;

    overflow-y: auto;
}


/* ==========================================================
   DRAWER PERSON
========================================================== */

.drawer-person-summary {
    padding-bottom: 20px;

    display: flex;

    align-items: center;

    gap: 11px;

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

.drawer-avatar {
    width: 45px;
    height: 45px;

    flex: none;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-family:
        Georgia,
        serif;

    font-size: 18px;

    font-weight: 800;
}

.drawer-avatar.kitchen {
    color: var(--kitchen-dark);

    background: var(--kitchen);
}

.drawer-avatar.service {
    color: var(--service-dark);

    background: var(--service);
}

.drawer-avatar.student {
    color: var(--student-dark);

    background: var(--student);
}

.drawer-person-summary > div:last-child {
    display: flex;

    flex-direction: column;
}

.drawer-person-summary strong {
    font-size: 13px;
}

.drawer-person-summary span {
    margin-top: 4px;

    color: var(--text-soft);

    font-size: 9px;
}


/* ==========================================================
   DRAWER SECTIONS
========================================================== */

.drawer-section {
    padding:
        23px 0;
}

.drawer-section-label {
    margin-bottom: 11px;

    color: var(--wine);

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 1.5px;
}

.drawer-shift-options {
    display: flex;

    flex-direction: column;

    gap: 9px;
}

.drawer-plan-form {
    margin: 0;
}

.drawer-shift-button {
    width: 100%;

    min-height: 62px;

    padding:
        10px
        12px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid
        transparent;

    border-radius: 10px;

    text-align: left;
}

.drawer-shift-button.day {
    border-color: #edcfac;

    color: var(--service-dark);

    background: var(--service-light);
}

.drawer-shift-button.evening {
    color: white;

    background: var(--wine);
}

.drawer-shift-button.kitchen {
    border-color: #cbd9c4;

    color: var(--kitchen-dark);

    background: var(--kitchen-light);
}

.drawer-shift-button.student {
    border-color: var(--student-border);

    color: var(--student-dark);

    background: var(--student-light);
}

.drawer-shift-icon {
    width: 31px;
    height: 31px;

    flex: none;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,.65);

    font-size: 16px;

    font-weight: 500;
}

.drawer-shift-button > span:last-child {
    display: flex;

    flex-direction: column;
}

.drawer-shift-button strong {
    font-size: 11px;
}

.drawer-shift-button small {
    margin-top: 3px;

    font-size: 8px;

    opacity: .7;
}


/* ==========================================================
   STUDENT AVAILABILITY DRAWER
========================================================== */

.student-availability-card {
    margin-bottom: 13px;

    padding: 12px;

    display: flex;

    align-items: center;

    gap: 9px;

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

    border-radius: 9px;

    color: var(--student-dark);

    background: var(--student-light);
}

.student-availability-dot {
    width: 9px;
    height: 9px;

    flex: none;

    border-radius: 50%;

    background: #7970b1;
}

.student-availability-card > div {
    display: flex;

    flex-direction: column;
}

.student-availability-card strong {
    font-size: 10px;
}

.student-availability-card small {
    margin-top: 2px;

    font-size: 8px;
}


/* ==========================================================
   AANGEPASTE DIENST DRAWER
========================================================== */

.custom-shift-divider {
    margin: 15px 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #a0978f;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

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

.drawer-custom-shift-form { margin: 0; }

.custom-shift-card {
    padding: 14px;
    border: 1px solid #d7cec5;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,244,239,.96));
    box-shadow: 0 8px 22px rgba(60, 41, 31, .045);
}

.custom-shift-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
}

.custom-shift-heading-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: white;
    background: var(--wine);
    font-size: 15px;
    font-weight: 800;
}

.custom-shift-heading > div:last-child {
    display: flex;
    flex-direction: column;
}

.custom-shift-heading strong { color: var(--text); font-size: 11px; }
.custom-shift-heading span { margin-top: 3px; color: var(--text-soft); font-size: 8px; }

.custom-time-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.custom-time-grid label { display: flex; flex-direction: column; gap: 5px; }
.custom-time-grid label > span {
    color: #81776e;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.custom-time-grid input[type="time"] {
    width: 100%;
    height: 39px;
    padding: 0 9px;
    border: 1px solid #d9cec4;
    border-radius: 8px;
    color: var(--text);
    background: white;
    font-size: 10px;
    font-weight: 750;
    outline: none;
}

.custom-time-grid input[type="time"]:focus {
    border-color: var(--wine);
    box-shadow: 0 0 0 3px rgba(125,22,41,.07);
}

.custom-time-grid input[type="time"]:disabled {
    color: #aaa199;
    background: #f1ece7;
    opacity: .65;
}

.custom-until-close {
    margin-top: 10px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #e3d9d0;
    border-radius: 9px;
    background: rgba(255,255,255,.7);
    cursor: pointer;
}

.custom-until-close input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.custom-until-close-check {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    border: 1px solid #cabdb2;
    border-radius: 7px;
    color: transparent;
    background: white;
    font-size: 12px;
    font-weight: 900;
}

.custom-until-close input:checked + .custom-until-close-check {
    border-color: var(--wine);
    color: white;
    background: var(--wine);
}

.custom-until-close > span:last-child { display: flex; flex-direction: column; }
.custom-until-close strong { color: var(--text); font-size: 9px; }
.custom-until-close small { margin-top: 2px; color: var(--text-soft); font-size: 7px; }

.custom-shift-submit {
    width: 100%;
    min-height: 42px;
    margin-top: 11px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 9px;
    color: white;
    background: linear-gradient(180deg, #8b1b30, #701225);
    font-size: 9px;
    font-weight: 850;
    box-shadow: 0 8px 17px rgba(125,22,41,.16);
}

.custom-shift-submit:hover { filter: brightness(1.04); }
.custom-shift-submit > span {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    font-size: 13px;
}


/* ==========================================================
   CURRENT SHIFT
========================================================== */

.current-shift-card {
    margin-bottom: 10px;

    padding: 14px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-radius: 10px;
}

.current-shift-card.kitchen {
    color: var(--kitchen-dark);

    background: var(--kitchen-light);
}

.current-shift-card.service {
    color: var(--service-dark);

    background: var(--service-light);
}

.current-shift-card.student {
    color: var(--student-dark);

    background: var(--student-light);
}

.current-shift-card > div:first-child {
    display: flex;

    flex-direction: column;
}

.current-shift-card span {
    margin-bottom: 3px;

    font-size: 8px;
}

.current-shift-card strong {
    font-size: 13px;
}

.current-shift-check {
    width: 31px;
    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,.65);

    font-weight: 850;
}

.delete-shift-button {
    width: 100%;

    height: 42px;

    border:
        1px solid
        #e4c1c8;

    border-radius: 9px;

    color: var(--danger);

    background: white;

    font-size: 9px;

    font-weight: 750;
}


/* ==========================================================
   BLOCKED
========================================================== */

.not-available-card,
.waiting-card {
    padding: 14px;

    display: flex;

    align-items: flex-start;

    gap: 11px;

    border-radius: 10px;
}

.not-available-card {
    border:
        1px solid
        #e5bbc3;

    color: var(--danger);

    background: var(--danger-light);
}

.waiting-card {
    border:
        1px solid
        var(--student-border);

    color: var(--student-dark);

    background: var(--student-light);
}

.not-available-card > span,
.waiting-card > span {
    width: 29px;
    height: 29px;

    flex: none;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,.7);

    font-weight: 850;
}

.not-available-card strong,
.waiting-card strong {
    display: block;

    font-size: 10px;
}

.not-available-card p,
.waiting-card p {
    margin:
        4px 0
        0;

    font-size: 8px;

    line-height: 1.5;
}


/* ==========================================================
   PRINT ELEMENTS NORMAAL VERBERGEN
========================================================== */

.print-header,
.print-legend,
.print-footer {
    display: none;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1000px) {

    .app-shell {
        grid-template-columns:
            78px
            minmax(0, 1fr);
    }

    .sidebar {
        width: 78px;

        padding:
            24px
            12px;
    }

    .sidebar-logo {
        padding:
            6px 0
            35px;

        align-items: center;
    }

    .sidebar-logo span {
        display: none;
    }

    .sidebar-logo strong {
        font-size: 19px;
    }

    .navigation-item {
        padding: 0;

        justify-content: center;
    }

    .navigation-item span:last-child {
        display: none;
    }

    .sidebar-user {
        justify-content: center;
    }

    .sidebar-user > div:last-child,
    .logout-button {
        display: none;
    }

    .preset-buttons {
        grid-template-columns:
            1fr
            1fr;
    }

}


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

@media (max-width: 760px) {

    .app-shell {
        display: block;
    }

    .sidebar {
        position: relative;

        width: 100%;

        height: 67px;

        padding:
            0 16px;

        flex-direction: row;

        align-items: center;
    }

    .sidebar-logo {
        flex: 1;

        padding: 0;

        align-items: flex-start;
    }

    .sidebar-logo strong {
        font-size: 25px;
    }

    .sidebar-navigation {
        flex: none;
    }

    .navigation-item {
        width: 40px;
        height: 40px;
    }

    .sidebar-bottom {
        margin-left: 7px;

        padding: 0;

        border: none;
    }

    .main-content {
        padding:
            25px
            13px
            40px;
    }

    .page-header {
        margin-bottom: 27px;
    }

    .page-header h1 {
        font-size: 34px;
    }

    .user-role {
        display: none;
    }

    .availability-panel-heading {
        display: block;
    }

    .save-summary {
        margin-top: 13px;

        align-items: flex-start;
    }

    .planner-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .planner-actions {
        width: 100%;

        justify-content: space-between;
    }

    .planner-scroll {
        max-height:
            calc(
                100vh - 210px
            );
    }

    .staff-column {
        width: 170px;

        min-width: 170px;

        max-width: 170px;
    }

    .day-column,
    .planner-cell,
    .summary-cell {
        width: 80px;

        min-width: 80px;
    }

}


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

@media (max-width: 500px) {

    .planning-drawer {
        width: 100%;
    }

    .drawer-header {
        padding:
            21px
            19px;
    }

    .drawer-content {
        padding:
            20px
            19px
            40px;
    }

}


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

@media (max-width: 700px) {

    .login-layout {
        grid-template-columns: 1fr;
    }

    .login-brand {
        min-height: 250px;

        padding:
            45px
            28px;
    }

    .brand-large {
        font-size: 65px;
    }

    .login-card {
        padding:
            43px
            24px;
    }

}


/* ==========================================================
   A4 PRINT VERSIE
========================================================== */

@page {
    size: A4 landscape;

    margin: 6mm;
}


@media print {

    * {
        -webkit-print-color-adjust: exact !important;

        print-color-adjust: exact !important;
    }


    html,
    body {
        width: 100%;

        height: auto;

        margin: 0 !important;

        padding: 0 !important;

        background: white !important;

        overflow: visible !important;
    }


    body {
        font-family:
            Arial,
            Helvetica,
            sans-serif;
    }


    /* ======================================================
       ALLES VAN DE APP VERBERGEN WAT NIET OP PAPIER HOORT
    ====================================================== */

    .no-print,
    .sidebar,
    .planning-drawer,
    .drawer-overlay,
    .planner-hint {
        display: none !important;
    }


    .app-shell {
        display: block !important;

        min-height: auto !important;
    }


    .main-content {
        display: block !important;

        width: 100% !important;

        max-width: none !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* ======================================================
       PRINT HEADER
    ====================================================== */

    .print-header {
        height: 17mm;

        margin-bottom: 3mm;

        display: flex !important;

        align-items: center;

        justify-content: space-between;

        border-bottom:
            .5mm solid
            var(--wine);
    }


    .print-brand {
        width: 42mm;

        display: flex;

        flex-direction: column;
    }


    .print-brand span {
        color: var(--wine);

        font-size: 5.5pt;

        font-weight: 700;

        letter-spacing: 2.5pt;
    }


    .print-brand strong {
        margin-top: 1mm;

        color: var(--wine);

        font-family:
            Georgia,
            serif;

        font-size: 17pt;

        font-weight: 500;

        line-height: 1;
    }


    .print-title {
        flex: 1;

        text-align: center;
    }


    .print-title h1 {
        margin: 0;

        font-family:
            Georgia,
            serif;

        font-size: 15pt;

        font-weight: 500;
    }


    .print-title p {
        margin:
            1mm 0
            0;

        color: var(--wine);

        font-size: 8pt;

        font-weight: 700;
    }


    .print-meta {
        width: 42mm;

        display: flex;

        flex-direction: column;

        align-items: flex-end;
    }


    .print-meta span {
        font-size: 6pt;

        font-weight: 700;
    }


    .print-meta small {
        margin-top: 1mm;

        color: #777;

        font-size: 5pt;
    }


    /* ======================================================
       PRINT LEGENDA
    ====================================================== */

    .print-legend {
        height: 8mm;

        margin-bottom: 2mm;

        padding:
            0 2mm;

        display: flex !important;

        align-items: center;

        gap: 5mm;

        border:
            .2mm solid
            #ddd5cc;

        border-radius: 2mm;

        font-size: 5.5pt;
    }


    .print-legend span {
        display: flex;

        align-items: center;

        gap: 1.2mm;
    }


    .print-legend .legend-color {
        width: 3.5mm;

        height: 3.5mm;

        border-radius: .8mm;
    }


    .print-explanation {
        margin-left: auto;

        color: #777;
    }


    /* ======================================================
       PLANNER
    ====================================================== */

    .planner-card {
        width: 100% !important;

        overflow: visible !important;

        border:
            .2mm solid
            #cfc6bc !important;

        border-radius: 0 !important;

        box-shadow: none !important;
    }


    .planner-scroll {
        width: 100% !important;

        max-height: none !important;

        overflow: visible !important;
    }


    .planner-table {
        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        table-layout: fixed !important;

        border-collapse: collapse !important;

        border-spacing: 0 !important;
    }


    .planner-table th,
    .planner-table td {
        border:
            .15mm solid
            #d9d2ca !important;
    }


    /* ======================================================
       LINKER NAAMKOLOM
    ====================================================== */

    .staff-column {
        position: static !important;

        width: 38mm !important;

        min-width: 38mm !important;

        max-width: 38mm !important;
    }


    .planner-corner {
        position: static !important;

        width: 38mm !important;

        min-width: 38mm !important;

        max-width: 38mm !important;

        height: 10mm !important;

        padding:
            1.5mm 2mm !important;

        background:
            #eee6dc !important;
    }


    .corner-title {
        font-size: 6pt !important;
    }


    .planner-corner > span {
        margin-top: .5mm !important;

        font-size: 4.5pt !important;
    }


    /* ======================================================
       DAGKOLOMMEN
    ====================================================== */

    .day-column,
    .planner-cell,
    .summary-cell {
        width: auto !important;

        min-width: 0 !important;

        max-width: none !important;
    }


    .day-column {
        position: static !important;

        height: 10mm !important;

        padding: 0 !important;

        background:
            #f3eee7 !important;
    }


    .day-column.weekend {
        background:
            #f3eddf !important;
    }


    .day-column.today-column {
        background:
            #f3eee7 !important;
    }


    .day-column.today-column::after {
        display: none !important;
    }


    .day-column.special-day-column {
        position: relative !important;
        overflow: hidden !important;

        background: #f0c76f !important;

        box-shadow:
            inset 0 0 0 .35mm rgba(155, 101, 17, .35),
            inset 0 -0.6mm 0 #9b6511 !important;
    }


    .special-day-badge {
        position: absolute !important;
        top: .6mm !important;
        right: .6mm !important;

        min-height: 2.2mm !important;
        margin: 0 !important;
        padding: 0 .6mm !important;

        font-size: 2.4pt !important;
    }


    .special-day-name {
        display: none !important;
    }


    .weekday {
        margin-bottom: .4mm !important;

        font-size: 4pt !important;

        line-height: 1 !important;
    }


    .day-column strong {
        font-size: 7pt !important;

        line-height: 1 !important;
    }


    /* ======================================================
       GROEPEN
    ====================================================== */

    .group-divider-row td {
        height: 5mm !important;

        padding: 0 !important;

        background:
            #f4efe9 !important;
    }


    .group-divider-label {
        position: static !important;

        width: auto !important;

        height: 5mm !important;

        padding:
            0 2mm !important;

        gap: 1.2mm !important;

        font-size: 5pt !important;

        letter-spacing: .4pt !important;
    }


    .group-divider-label small {
        margin-left: 1mm !important;

        font-size: 4pt !important;
    }


    .group-dot {
        width: 2mm !important;

        height: 2mm !important;
    }


    /* ======================================================
       PERSONEELSRIJEN
    ====================================================== */

    .staff-row {
        height: 9mm !important;
    }


    .staff-person {
        position: static !important;

        width: 38mm !important;

        min-width: 38mm !important;

        max-width: 38mm !important;

        height: 9mm !important;

        padding:
            .7mm 1.5mm !important;

        gap: 1.4mm !important;

        background: white !important;

        box-shadow: none !important;
    }


    .group-student
    .staff-person {
        background:
            #faf9fe !important;
    }


    .staff-avatar {
        width: 5.7mm !important;

        height: 5.7mm !important;

        font-size: 6pt !important;
    }


    .staff-info strong {
        font-size: 5.5pt !important;

        line-height: 1 !important;
    }


    .staff-info span {
        margin-top: .5mm !important;

        font-size: 3.8pt !important;

        line-height: 1 !important;
    }


    /* ======================================================
       PLANNINGSCELLEN
    ====================================================== */

    .planner-cell {
        position: static !important;

        height: 9mm !important;

        padding: .5mm !important;

        background: white !important;

        box-shadow: none !important;
    }


    .planner-cell.weekend {
        background:
            #fffdf7 !important;
    }


    .planner-cell.group-student {
        background:
            #fcfbff !important;
    }


    .planner-cell.special-day-column,
    .planner-cell.group-student.special-day-column {
        background:
            #f9e7b6 !important;

        box-shadow:
            inset .35mm 0 0 rgba(155, 101, 17, .20),
            inset -.35mm 0 0 rgba(155, 101, 17, .20) !important;
    }


    /* ======================================================
       ALLEEN ECHTE DIENSTEN OP OFFICIEEL PRINTROOSTER
    ====================================================== */

    .screen-status,
    .employee-availability-overlay {
        display: none !important;
    }


    /* ======================================================
       SHIFT
    ====================================================== */

    .matrix-shift {
        width: 100% !important;

        height: 7.7mm !important;

        min-height: 0 !important;

        padding: 0 !important;

        border-radius: 1.2mm !important;
    }


    .matrix-shift.kitchen {
        border:
            .2mm solid
            #b7cbae !important;

        background:
            var(--kitchen) !important;

        color:
            var(--kitchen-dark) !important;
    }


    .matrix-shift.service {
        border:
            .2mm solid
            #e4ad73 !important;

        background:
            var(--service) !important;

        color:
            var(--service-dark) !important;
    }


    .matrix-shift.student {
        border:
            .2mm solid
            var(--accepted-border) !important;

        background:
            var(--accepted) !important;

        color:
            var(--accepted-dark) !important;
    }


    .screen-time {
        display: none !important;
    }


    .print-time {
        display: block !important;

        font-size: 4.5pt !important;

        font-weight: 800 !important;

        line-height: 1 !important;

        white-space: nowrap !important;
    }


    /* ======================================================
       SUMMARY
    ====================================================== */

    .summary-row {
        height: 8mm !important;
    }


    .summary-name {
        position: static !important;

        width: 38mm !important;

        min-width: 38mm !important;

        max-width: 38mm !important;

        height: 8mm !important;

        padding:
            1mm 1.5mm !important;

        background:
            #eee7df !important;
    }


    .summary-name strong {
        font-size: 5.5pt !important;
    }


    .summary-name span {
        margin-top: .4mm !important;

        font-size: 4pt !important;
    }


    .summary-cell {
        height: 8mm !important;

        padding: 0 !important;

        background:
            #f5f0e9 !important;
    }


    .summary-cell.weekend {
        background:
            #f1eadc !important;
    }


    .summary-cell.today-column {
        background:
            #f5f0e9 !important;
    }


    .summary-cell.special-day-column {
        background:
            #efcf83 !important;
    }


    .summary-cell.special-day-column strong {
        color:
            #684000 !important;
    }


    .summary-cell strong {
        font-size: 6pt !important;

        line-height: 1 !important;
    }


    .screen-summary {
        display: none !important;
    }


    /* ======================================================
       FOOTER
    ====================================================== */

    .print-footer {
        margin-top: 2mm;

        padding-top: 1.5mm;

        display: flex !important;

        align-items: center;

        justify-content: space-between;

        border-top:
            .2mm solid
            #ddd4ca;

        color: #80776f;

        font-size: 4.5pt;
    }

}

/* ==========================================================
   BERWIEN UI REFINEMENT — MIJN GEGEVENS + FOOI
   Plak dit blok ONDERAAN style.css
========================================================== */

/* ---------- Shared refinement ---------- */
.my-data-main,
.tips-main {
    max-width: 1500px;
}

.my-data-main .page-header,
.tips-main .page-header {
    margin-bottom: 26px;
}

.my-data-main .page-header h1,
.tips-main .page-header h1 {
    font-size: clamp(34px, 3.2vw, 46px);
    letter-spacing: -0.045em;
}

.my-data-main .page-header p,
.tips-main .page-header p {
    max-width: 610px;
    margin-top: 9px;
    font-size: 13px;
    line-height: 1.6;
}

.my-data-main .section-kicker,
.tips-main .section-kicker,
.my-data-main .summary-label {
    display: block;
    margin-bottom: 8px;
    color: var(--wine);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* ==========================================================
   MIJN GEGEVENS
========================================================== */

.my-data-summary {
    display: grid;
    grid-template-columns: minmax(280px, .85fr) minmax(0, 2fr);
    overflow: hidden;
    border: 1px solid rgba(73, 57, 49, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 10px 30px rgba(44, 30, 23, .045);
}

.my-data-total {
    padding: 28px 30px;
    border-right: 1px solid rgba(73, 57, 49, .12);
    background: rgba(125, 22, 41, .035);
}

.my-data-total .summary-value {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.my-data-total .summary-value strong {
    color: var(--text);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 4vw, 58px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.055em;
    font-variant-numeric: tabular-nums;
}

.my-data-total .summary-value span {
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 650;
}

.my-data-total p {
    max-width: 290px;
    margin: 14px 0 0;
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.55;
}

.my-data-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.my-data-meta-item {
    min-width: 0;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid rgba(73, 57, 49, .10);
}

.my-data-meta-item:last-child {
    border-right: 0;
}

.my-data-meta-item span {
    margin-bottom: 8px;
    color: var(--text-soft);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.my-data-meta-item strong {
    overflow: hidden;
    color: var(--text);
    font-size: 14px;
    font-weight: 720;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.my-shifts-section {
    margin-top: 26px;
    overflow: hidden;
    border: 1px solid rgba(73, 57, 49, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 10px 30px rgba(44, 30, 23, .045);
}

.my-section-heading {
    padding: 24px 26px 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid rgba(73, 57, 49, .12);
}

.my-section-heading h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.035em;
}

.my-shift-count {
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.my-shifts-table-head,
.my-shift-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.05fr) minmax(140px, 1fr) minmax(200px, 1.2fr) 100px;
    gap: 20px;
    align-items: center;
}

.my-shifts-table-head {
    min-height: 42px;
    padding: 0 26px;
    color: #8b8179;
    background: rgba(239, 233, 226, .55);
    border-bottom: 1px solid rgba(73, 57, 49, .10);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.my-shift-row {
    min-height: 64px;
    padding: 12px 26px;
    border-bottom: 1px solid rgba(73, 57, 49, .09);
    transition: background .14s ease;
}

.my-shift-row:last-child {
    border-bottom: 0;
}

.my-shift-row:hover {
    background: rgba(125, 22, 41, .025);
}

.my-shift-date strong,
.my-shift-hours {
    font-variant-numeric: tabular-nums;
}

.my-shift-date strong {
    font-size: 13px;
    font-weight: 750;
}

.my-shift-department {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 550;
}

.my-shift-time {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text);
    font-size: 12px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.my-shift-time .time-divider {
    color: #b1a79f;
    font-weight: 400;
}

.my-shift-hours {
    text-align: right;
    color: var(--wine);
    font-size: 13px;
    font-weight: 800;
}

.my-empty-state {
    padding: 44px 26px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.my-empty-state strong {
    font-size: 14px;
}

.my-empty-state span {
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.55;
}

/* ==========================================================
   FOOI
========================================================== */

.tips-summary-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(73, 57, 49, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .74);
    box-shadow: 0 10px 30px rgba(44, 30, 23, .045);
}

.tips-summary-cell {
    min-width: 0;
    padding: 20px 22px;
    border-right: 1px solid rgba(73, 57, 49, .10);
}

.tips-summary-cell:last-child {
    border-right: 0;
}

.tips-summary-cell span {
    display: block;
    margin-bottom: 8px;
    color: var(--text-soft);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.tips-summary-cell strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(21px, 2vw, 30px);
    font-weight: 500;
    letter-spacing: -.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tips-summary-cell.emphasis {
    background: rgba(125, 22, 41, .045);
}

.tips-summary-cell.emphasis strong {
    color: var(--wine);
}

.tips-workspace {
    margin-top: 26px;
    overflow: hidden;
    border: 1px solid rgba(73, 57, 49, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 10px 30px rgba(44, 30, 23, .045);
}

.tips-form-pro {
    display: block;
}

.tips-workspace-heading {
    padding: 24px 26px 20px;
    border-bottom: 1px solid rgba(73, 57, 49, .12);
}

.tips-workspace-heading h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    font-weight: 500;
    letter-spacing: -.035em;
}

.tips-workspace-heading p {
    max-width: 650px;
    margin: 7px 0 0;
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.6;
}

.tips-ledger-head,
.tips-ledger-row {
    display: grid;
    grid-template-columns: minmax(190px, 1.8fr) minmax(120px, .75fr) minmax(170px, 1fr) minmax(130px, .8fr);
    gap: 22px;
    align-items: center;
}

.tips-ledger-head {
    min-height: 42px;
    padding: 0 26px;
    color: #8b8179;
    background: rgba(239, 233, 226, .55);
    border-bottom: 1px solid rgba(73, 57, 49, .10);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.tips-ledger-row {
    min-height: 72px;
    padding: 12px 26px;
    border-bottom: 1px solid rgba(73, 57, 49, .09);
    transition: background .14s ease;
}

.tips-ledger-row:last-child {
    border-bottom: 0;
}

.tips-ledger-row:hover {
    background: rgba(125, 22, 41, .022);
}

.tip-person-cell,
.tip-hours-cell,
.tip-payout-cell {
    min-width: 0;
}

.tip-person-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tip-person-cell strong {
    font-size: 13px;
    font-weight: 760;
}

.tip-person-cell span {
    color: var(--text-soft);
    font-size: 10px;
}

.tip-hours-cell {
    display: flex;
    align-items: baseline;
    gap: 5px;
    color: var(--text-soft);
}

.tip-hours-cell strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 760;
    font-variant-numeric: tabular-nums;
}

.tip-hours-cell span {
    font-size: 10px;
}

.tip-rate-control {
    width: 140px;
    height: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
    border: 1px solid #d8cec5;
    border-radius: 8px;
    background: #fff;
    transition: border-color .14s ease, box-shadow .14s ease;
}

.tip-rate-control:focus-within {
    border-color: rgba(125, 22, 41, .65);
    box-shadow: 0 0 0 3px rgba(125, 22, 41, .07);
}

.tip-rate-control input {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0 10px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 720;
    font-variant-numeric: tabular-nums;
}

.tip-rate-control span {
    padding: 0 10px;
    color: var(--text-soft);
    border-left: 1px solid #ebe4de;
    font-size: 9px;
    font-weight: 750;
    line-height: 40px;
    white-space: nowrap;
}

.tip-payout-cell {
    text-align: right;
}

.tip-payout-cell strong {
    color: var(--wine);
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.tips-pool-section {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, .85fr) minmax(220px, .85fr);
    gap: 28px;
    align-items: center;
    padding: 26px;
    border-top: 1px solid rgba(73, 57, 49, .12);
    background: rgba(248, 244, 239, .62);
}

.tips-pool-copy h3 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
    letter-spacing: -.03em;
}

.tips-pool-copy p {
    max-width: 520px;
    margin: 8px 0 0;
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.55;
}

.tips-pool-control label,
.tips-pool-result > span {
    display: block;
    margin-bottom: 8px;
    color: var(--text-soft);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.tips-euro-input {
    height: 44px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    border: 1px solid #d8cec5;
    border-radius: 8px;
    background: #fff;
    transition: border-color .14s ease, box-shadow .14s ease;
}

.tips-euro-input:focus-within {
    border-color: rgba(125, 22, 41, .65);
    box-shadow: 0 0 0 3px rgba(125, 22, 41, .07);
}

.tips-euro-input > span {
    height: 100%;
    padding: 0 12px;
    display: flex;
    align-items: center;
    color: var(--wine);
    border-right: 1px solid #ebe4de;
    font-size: 14px;
    font-weight: 800;
}

.tips-euro-input input {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0 12px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 720;
    font-variant-numeric: tabular-nums;
}

.tips-pool-control small {
    display: block;
    margin-top: 7px;
    color: #938981;
    font-size: 9px;
    line-height: 1.45;
}

.tips-pool-result {
    padding-left: 26px;
    border-left: 1px solid rgba(73, 57, 49, .12);
}

.tips-pool-result strong {
    display: block;
    color: var(--wine);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(24px, 2vw, 31px);
    font-weight: 500;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
}

.tips-save-bar {
    min-height: 76px;
    padding: 16px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid rgba(73, 57, 49, .12);
    background: rgba(255, 255, 255, .82);
}

.tips-save-bar p {
    margin: 0;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.5;
}

.tips-save-button {
    min-height: 42px;
    padding: 0 20px;
    border: 1px solid var(--wine-dark);
    border-radius: 8px;
    color: #fff;
    background: var(--wine);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 5px 14px rgba(87, 16, 29, .13);
    transition: background .14s ease, transform .14s ease, box-shadow .14s ease;
}

.tips-save-button:hover {
    background: var(--wine-dark);
    box-shadow: 0 7px 18px rgba(87, 16, 29, .17);
    transform: translateY(-1px);
}

/* ---------- Tablet ---------- */
@media (max-width: 1050px) {
    .my-data-summary {
        grid-template-columns: 1fr;
    }

    .my-data-total {
        border-right: 0;
        border-bottom: 1px solid rgba(73, 57, 49, .12);
    }

    .tips-summary-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tips-summary-cell:nth-child(2) {
        border-right: 0;
    }

    .tips-summary-cell:nth-child(-n+2) {
        border-bottom: 1px solid rgba(73, 57, 49, .10);
    }

    .tips-pool-section {
        grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr);
    }

    .tips-pool-result {
        grid-column: 1 / -1;
        padding: 20px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(73, 57, 49, .12);
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
    .my-data-main .page-header,
    .tips-main .page-header {
        margin-bottom: 22px;
    }

    .my-data-summary,
    .my-shifts-section,
    .tips-summary-bar,
    .tips-workspace {
        border-radius: 9px;
    }

    .my-data-meta {
        grid-template-columns: 1fr;
    }

    .my-data-meta-item {
        padding: 18px 20px;
        border-right: 0;
        border-bottom: 1px solid rgba(73, 57, 49, .10);
    }

    .my-data-meta-item:last-child {
        border-bottom: 0;
    }

    .my-data-total {
        padding: 22px 20px;
    }

    .my-section-heading,
    .tips-workspace-heading {
        padding: 20px;
    }

    .my-shifts-table-head,
    .tips-ledger-head {
        display: none;
    }

    .my-shift-row,
    .tips-ledger-row {
        grid-template-columns: 1fr 1fr;
        gap: 16px 20px;
        padding: 18px 20px;
    }

    .my-shift-row > div,
    .tips-ledger-row > div {
        position: relative;
        padding-top: 16px;
    }

    .my-shift-row > div::before,
    .tips-ledger-row > div::before {
        content: attr(data-label);
        position: absolute;
        top: 0;
        left: 0;
        color: #958b83;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: .10em;
        text-transform: uppercase;
    }

    .my-shift-hours,
    .tip-payout-cell {
        text-align: left;
    }

    .tips-summary-bar {
        grid-template-columns: 1fr 1fr;
    }

    .tips-summary-cell {
        padding: 17px 18px;
    }

    .tips-pool-section {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 22px 20px;
    }

    .tips-pool-result {
        grid-column: auto;
        padding: 18px 0 0;
    }

    .tips-save-bar {
        padding: 16px 20px;
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .tips-save-button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .my-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .my-shift-row,
    .tips-ledger-row {
        grid-template-columns: 1fr;
    }

    .tips-summary-bar {
        grid-template-columns: 1fr;
    }

    .tips-summary-cell,
    .tips-summary-cell:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid rgba(73, 57, 49, .10);
    }

    .tips-summary-cell:last-child {
        border-bottom: 0;
    }

    .tip-rate-control {
        width: 100%;
    }
}


/* ==========================================================
   FOOI — ALGEMEEN STUDENTJOBTARIEF
========================================================== */

.tips-global-rate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 34px;
    align-items: center;
    padding: 26px;
    border-bottom: 1px solid rgba(73, 57, 49, .12);
    background: rgba(125, 22, 41, .025);
}

.tips-global-rate-copy h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.035em;
}

.tips-global-rate-copy p {
    max-width: 610px;
    margin: 8px 0 0;
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.55;
}

.tips-global-rate-control {
    padding-left: 26px;
    border-left: 1px solid rgba(73, 57, 49, .12);
}

.tips-global-rate-control label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-soft);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.tips-cent-input {
    height: 46px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
    border: 1px solid #d8cec5;
    border-radius: 8px;
    background: #fff;
    transition: border-color .14s ease, box-shadow .14s ease;
}

.tips-cent-input:focus-within {
    border-color: rgba(125, 22, 41, .65);
    box-shadow: 0 0 0 3px rgba(125, 22, 41, .07);
}

.tips-cent-input input {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0 13px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 15px;
    font-weight: 760;
    font-variant-numeric: tabular-nums;
}

.tips-cent-input span {
    height: 100%;
    padding: 0 13px;
    display: flex;
    align-items: center;
    color: var(--wine);
    border-left: 1px solid #ebe4de;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.tips-global-rate-control small {
    display: block;
    margin-top: 7px;
    color: #938981;
    font-size: 9px;
}

.tips-ledger-title {
    align-items: flex-end;
}

.tips-rate-readout {
    text-align: right;
    white-space: nowrap;
}

.tips-rate-readout span {
    display: block;
    margin-bottom: 5px;
    color: var(--text-soft);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.tips-rate-readout strong {
    color: var(--wine);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.tips-ledger-general .tips-ledger-head,
.tips-ledger-general .tips-ledger-row {
    grid-template-columns: minmax(0, 2fr) minmax(140px, 1fr) minmax(140px, .8fr);
}

.tips-ledger-general .tip-payout-cell {
    text-align: right;
}

@media (max-width: 760px) {
    .tips-global-rate {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 22px 20px;
    }

    .tips-global-rate-control {
        padding: 18px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(73, 57, 49, .12);
    }

    .tips-ledger-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .tips-rate-readout {
        text-align: left;
    }

    .tips-ledger-general .tips-ledger-row {
        grid-template-columns: 1fr 1fr;
    }

    .tips-ledger-general .tip-payout-cell {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .tips-ledger-general .tips-ledger-row {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   ROOSTER — GROEPFILTERS
========================================================== */

.planner-group-filter-wrap {
    flex: 1 1 auto;
    min-width: 420px;
    padding: 0 22px 2px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    gap: 7px;
}

.planner-group-filter-title {
    color: #8b8178;

    font-size: 8px;
    font-weight: 850;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.planner-group-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 7px;
}

.roster-filter-option {
    min-height: 34px;

    padding: 0 11px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    border: 1px solid #e2d8ce;
    border-radius: 9px;

    color: #61574f;
    background: rgba(255, 255, 255, .78);

    font-size: 9px;
    font-weight: 760;

    white-space: nowrap;

    cursor: pointer;

    box-shadow:
        0 3px 10px
        rgba(56, 39, 31, .035);

    transition:
        transform .14s ease,
        border-color .14s ease,
        background .14s ease,
        box-shadow .14s ease;
}

.roster-filter-option:hover {
    transform: translateY(-1px);

    border-color: #cfc1b5;

    background: white;

    box-shadow:
        0 6px 14px
        rgba(56, 39, 31, .055);
}

.roster-filter-option input {
    width: 15px;
    height: 15px;

    margin: 0;

    flex: 0 0 auto;

    cursor: pointer;

    accent-color: var(--wine);
}

.roster-filter-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;
}

.roster-filter-option.kitchen .roster-filter-dot {
    background: #8bab80;

    box-shadow:
        0 0 0 3px
        rgba(139, 171, 128, .13);
}

.roster-filter-option.service .roster-filter-dot {
    background: #d99d59;

    box-shadow:
        0 0 0 3px
        rgba(217, 157, 89, .13);
}

.roster-filter-option.student .roster-filter-dot {
    background: #7d73bb;

    box-shadow:
        0 0 0 3px
        rgba(125, 115, 187, .13);
}

.roster-filter-option:has(input:checked) {
    color: var(--text);

    border-color: rgba(125, 22, 41, .20);

    background: rgba(255, 255, 255, .97);

    box-shadow:
        0 4px 12px
        rgba(65, 43, 34, .05),
        inset 0 0 0 1px
        rgba(125, 22, 41, .025);
}

.roster-filter-option:has(input:not(:checked)) {
    opacity: .52;

    background: rgba(248, 244, 238, .75);
}

.roster-filter-option:has(input:not(:checked)) .roster-filter-dot {
    filter: grayscale(1);

    opacity: .55;
}

[data-roster-group][hidden] {
    display: none !important;
}


@media (max-width: 1180px) {

    .planner-header {
        flex-wrap: wrap;
    }

    .planner-group-filter-wrap {
        order: 3;

        width: 100%;
        min-width: 0;

        padding:
            5px 0 0;

        align-items: flex-start;
    }

    .planner-group-filters {
        justify-content: flex-start;
    }

}


@media (max-width: 760px) {

    .planner-group-filter-wrap {
        width: 100%;

        padding-top: 2px;
    }

    .planner-group-filters {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;
    }

    .roster-filter-option {
        width: 100%;
        min-height: 39px;

        justify-content: flex-start;

        font-size: 10px;
    }

}


/* ==========================================================
   LOGIN — 4-CIJFERIGE PIN
========================================================== */

.pin-login-form {
    display: grid;
    gap: 4px;
}

.login-user-select {
    width: 100%;
    height: 50px;
    padding: 0 42px 0 14px;

    border: 1px solid rgba(125, 96, 81, .16);
    border-radius: 12px;

    color: var(--text);
    background:
        linear-gradient(45deg, transparent 50%, #8e8177 50%)
            calc(100% - 19px) 21px / 5px 5px no-repeat,
        linear-gradient(135deg, #8e8177 50%, transparent 50%)
            calc(100% - 14px) 21px / 5px 5px no-repeat,
        rgba(255,255,255,.78);

    font: inherit;
    font-size: 14px;
    font-weight: 650;

    appearance: none;
    outline: none;
}

.login-user-select:focus {
    border-color: var(--wine);
    box-shadow:
        0 0 0 3px rgba(125,22,41,.08);
}

.pin-input {
    height: 58px !important;

    text-align: center;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 28px !important;
    font-weight: 800 !important;

    letter-spacing: 12px;

    font-variant-numeric: tabular-nums;
}

.pin-input::placeholder {
    color: #c5bbb3;
    letter-spacing: 8px;
}

.pin-help {
    display: block;
    margin-top: 7px;

    color: var(--text-muted);

    font-size: 10px;
}

.pin-login-button {
    margin-top: 10px;
    min-height: 50px;
}


/* ==========================================================
   PRE-LIVEGANG UITBREIDINGEN
========================================================== */

/* VANDAAG */

.today-overview {
    margin: 22px 0;
    padding: 22px;

    border: 1px solid rgba(125, 22, 41, .10);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.90),
            rgba(249,244,237,.92)
        );

    box-shadow:
        0 12px 34px
        rgba(63, 42, 31, .05);
}

.today-overview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.today-overview-head h2 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 24px;
}

.today-special-badge {
    padding: 9px 13px;

    border-radius: 999px;

    color: #5d3500;
    background: #ffd469;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
}

.today-overview-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );
    gap: 12px;
}

.today-person-card {
    padding: 16px;

    border: 1px solid
        rgba(113, 85, 62, .15);
    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            rgba(246, 237, 228, .96),
            rgba(234, 223, 210, .94)
        );

    box-shadow:
        0 10px 24px rgba(83, 62, 46, .04),
        inset 0 1px 0 rgba(255,248,242,.26);
}

.today-person-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.today-person-top strong {
    font-size: 13px;
}

.today-person-department {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 9px;
}

.today-status {
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 900;
}

.today-status.present {
    color: #36523c;
    background: #dfeede;
}

.today-status.done {
    color: #57505f;
    background: #eeeaf4;
}

.today-status.waiting {
    color: #815116;
    background: #f7e2b4;
}

.today-person-times {
    margin-top: 13px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.today-person-times span {
    color: var(--text-muted);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.today-person-times strong {
    display: block;
    margin-top: 4px;
    color: var(--text);
    font-size: 10px;
    letter-spacing: 0;
    text-transform: none;
}

.today-person-note {
    margin: 11px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(98, 74, 56, .10);
    color: #665a51;
    font-size: 9px;
}

.today-empty {
    grid-column: 1 / -1;
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
}

/* DIENSTNOTITIES + BEWERKEN */

.drawer-note-input.compact {
    width: 100%;
    margin: 8px 0;
    padding: 9px 10px;
    border: 1px solid #e2d9cf;
    border-radius: 8px;
    background: #fff;
    font-size: 10px;
}

.custom-note-field,
.edit-note-field {
    display: grid;
    gap: 6px;
    margin-top: 12px;
}

.custom-note-field > span,
.edit-note-field > span,
.edit-shift-time-grid label > span {
    color: #80756c;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.custom-note-field input,
.edit-note-field input,
.edit-shift-time-grid input {
    width: 100%;
    height: 40px;
    padding: 0 11px;
    border: 1px solid #ded4c8;
    border-radius: 8px;
    background: #fff;
    font-size: 11px;
}

.current-shift-note {
    margin: 10px 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #5d5249;
    background: #f6f1ea;
    font-size: 10px;
}

.edit-shift-form {
    margin: 15px 0;
    padding: 14px;
    border: 1px solid #e8dfd5;
    border-radius: 10px;
    background: #fcfaf7;
}

.edit-shift-time-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 9px 0;
}

.edit-shift-time-grid label {
    display: grid;
    gap: 6px;
}

.edit-shift-submit {
    width: 100%;
    min-height: 40px;
    margin-top: 12px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: var(--wine);
    font-size: 10px;
    font-weight: 850;
}

/* PIN WIJZIGEN */

.pin-settings-card {
    margin: 22px 0;
    padding: 22px;
    display: grid;
    grid-template-columns: 1fr minmax(360px, 1.25fr);
    gap: 28px;
    align-items: start;

    border: 1px solid rgba(74, 55, 44, .10);
    border-radius: 13px;
    background: rgba(255,255,255,.84);
}

.pin-settings-card h2 {
    margin: 5px 0 6px;
    font-family: Georgia, serif;
    font-size: 22px;
}

.pin-settings-card p {
    margin: 0;
    color: var(--text-soft);
    font-size: 10px;
}

.pin-change-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pin-change-form label {
    display: grid;
    gap: 6px;
}

.pin-change-form label span {
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.pin-change-form input {
    height: 42px;
    padding: 0 11px;
    border: 1px solid #ded4c8;
    border-radius: 8px;
    background: #fff;
    text-align: center;
    letter-spacing: 5px;
}

.pin-change-form button {
    grid-column: 1 / -1;
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: var(--wine);
    font-weight: 850;
}

/* PLANNING VS GEKLOKT */

.hours-compare-table {
    width: 100%;
}

.hours-compare-head,
.hours-compare-row {
    display: grid;
    grid-template-columns:
        1.05fr
        1.15fr
        1.15fr
        .9fr
        .9fr
        1.4fr;
    gap: 12px;
    align-items: center;
}

.hours-compare-head {
    padding: 11px 18px;
    color: #8a8078;
    background: #f4eee7;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.hours-compare-row {
    padding: 14px 18px;
    border-top: 1px solid #eee6dc;
    background: rgba(255,255,255,.75);
    font-size: 10px;
}

/* PERSONEELSBEHEER */

.staff-add-card,
.staff-list-card {
    margin-top: 22px;
    overflow: hidden;
    border: 1px solid rgba(74,55,44,.10);
    border-radius: 13px;
    background: rgba(255,255,255,.86);
}

.staff-card-heading {
    padding: 20px 22px;
    border-bottom: 1px solid #eee6dd;
}

.staff-card-heading h2 {
    margin: 5px 0 0;
    font-family: Georgia, serif;
    font-size: 22px;
}

.staff-add-form {
    padding: 20px 22px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr .8fr auto;
    gap: 12px;
    align-items: end;
}

.staff-add-form label {
    display: grid;
    gap: 6px;
}

.staff-add-form label span {
    color: #8c8179;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.staff-add-form input,
.staff-add-form select,
.staff-pin-reset input {
    height: 42px;
    padding: 0 11px;
    border: 1px solid #ddd3c8;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 10px;
}

.staff-add-form button,
.staff-main .staff-pin-reset button,
.staff-main .staff-toggle-button {
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 850;
    white-space: nowrap;
}

.staff-add-form button,
.staff-main .staff-pin-reset button {
    color: #fff;
    background: var(--wine);
}

.staff-list {
    display: grid;
}

.staff-main .staff-row {
    padding: 14px 18px;
    display: grid;
    grid-template-columns: minmax(180px, 1.3fr) .6fr minmax(250px, 1fr) auto;
    gap: 14px;
    align-items: center;
    border-top: 1px solid #eee6dc;
}

.staff-main .staff-row:first-child {
    border-top: 0;
}

.staff-main .staff-row.inactive {
    opacity: .55;
    background: #f6f3ef;
}

.staff-main .staff-row-person {
    display: flex;
    align-items: center;
    gap: 10px;
}

.staff-main .staff-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--wine);
    background: #f3e6e9;
    font-weight: 900;
}

.staff-main .staff-row-person strong {
    display: block;
    font-size: 11px;
}

.staff-main .staff-row-person span {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 8px;
}

.staff-main .staff-state {
    color: #756b63;
    font-size: 9px;
    font-weight: 800;
}

.staff-main .staff-pin-reset {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.staff-main .staff-toggle-button {
    color: #4f7255;
    background: #e6efe5;
}

.staff-main .staff-toggle-button.danger {
    color: #7d1629;
    background: #f5e2e5;
}

/* FOOI MAAND */

.tips-month-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tips-month-nav > span {
    min-width: 120px;
    text-align: center;
    color: #6c625a;
    font-size: 10px;
    font-weight: 850;
}

/* RESPONSIVE */

@media (max-width: 1050px) {

    .pin-settings-card {
        grid-template-columns: 1fr;
    }

    .staff-add-form {
        grid-template-columns: 1fr 1fr;
    }

    .staff-main .staff-row {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 760px) {

    .today-person-times {
        grid-template-columns: 1fr;
    }

    .pin-change-form,
    .staff-add-form,
    .staff-main .staff-row {
        grid-template-columns: 1fr;
    }

    .hours-compare-head {
        display: none;
    }

    .hours-compare-row {
        grid-template-columns: 1fr 1fr;
    }

    .hours-compare-row > div {
        position: relative;
        padding-top: 14px;
    }

    .hours-compare-row > div::before {
        content: attr(data-label);
        position: absolute;
        top: 0;
        left: 0;
        color: #9b9188;
        font-size: 7px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .staff-main .staff-pin-reset {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   ALGEMEEN / HOME
========================================================== */

.home-main {
    padding-bottom: 70px;
}

.home-page-header {
    align-items: center;

    padding: 30px 32px;

    border: 1px solid rgba(114, 83, 60, .14);
    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(246, 235, 224, .88),
            rgba(232, 218, 204, .94)
        );

    box-shadow:
        0 18px 42px rgba(68, 47, 33, .06),
        inset 0 1px 0 rgba(255,250,245,.40);

    backdrop-filter: blur(10px);
}

.home-roster-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 0 18px;

    border: 1px solid rgba(96, 18, 33, .18);
    border-radius: 12px;

    color: #fff;
    background:
        linear-gradient(
            180deg,
            #8d1e34,
            #721528
        );

    font-size: 10px;
    font-weight: 850;

    box-shadow:
        0 12px 26px rgba(125, 22, 41, .16);

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
}

.home-roster-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow:
        0 14px 30px rgba(125, 22, 41, .20);
}

.home-kpis {
    display: grid;
    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );
    gap: 14px;

    margin: 24px 0 18px;
}

.home-kpi {
    position: relative;
    overflow: hidden;

    min-height: 126px;
    padding: 20px 20px 18px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border:
        1px solid
        rgba(101, 74, 52, .15);
    border-radius: 20px;

    background:
        linear-gradient(
            160deg,
            rgba(243, 233, 223, .95),
            rgba(231, 219, 206, .96)
        );

    box-shadow:
        0 14px 32px rgba(68, 47, 33, .05),
        inset 0 1px 0 rgba(255,248,242,.30);
}

.home-kpi::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            rgba(125, 22, 41, .90),
            rgba(183, 99, 79, .55)
        );
}

.home-kpi > span {
    color: #675a50;

    font-size: 8px;
    font-weight: 850;

    letter-spacing: .10em;
    text-transform: uppercase;
}

.home-kpi strong {
    margin-top: 10px;

    font-family:
        Georgia,
        serif;

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

    color: #2f231d;
}

.home-kpi small {
    color: #786b61;

    font-size: 9px;
}

.home-kpi.warning {
    background:
        linear-gradient(
            150deg,
            rgba(244, 231, 200, .98),
            rgba(232, 214, 172, .96)
        );

    border-color:
        rgba(
            185,
            134,
            54,
            .22
        );
}

.home-kpi.warning::before {
    background:
        linear-gradient(
            90deg,
            rgba(190, 134, 41, .95),
            rgba(232, 190, 111, .62)
        );
}

.home-kpi.special {
    background:
        linear-gradient(
            150deg,
            rgba(242, 223, 184, .98),
            rgba(232, 204, 145, .96)
        );

    border-color:
        rgba(
            181,
            111,
            8,
            .24
        );
}

.home-kpi.special::before {
    background:
        linear-gradient(
            90deg,
            rgba(185, 117, 10, .96),
            rgba(241, 183, 73, .66)
        );
}

.home-panel {
    margin-top: 16px;
    padding: 22px;

    border:
        1px solid
        rgba(103, 76, 55, .15);
    border-radius: 22px;

    background:
        linear-gradient(
            160deg,
            rgba(244, 235, 225, .86),
            rgba(231, 218, 204, .92)
        );

    box-shadow:
        0 16px 34px rgba(63, 44, 31, .04),
        inset 0 1px 0 rgba(255,248,242,.30);

    backdrop-filter: blur(8px);
}

.home-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 16px;
}

.home-panel-heading h2 {
    margin: 5px 0 0;

    font-family:
        Georgia,
        serif;

    font-size: 21px;

    color: #2f2520;
}

.home-today-panel {
    padding: 22px;
}

.home-today-grid {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );
}

.home-grid-two {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, .85fr);
    gap: 16px;
}

/* horizontale bezettingsgrafiek */

.home-bar-chart {
    display: grid;
    gap: 12px;
}

.home-bar-row {
    display: grid;
    grid-template-columns:
        78px
        1fr
        28px;
    gap: 10px;
    align-items: center;
}

.home-bar-label {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.home-bar-label strong {
    font-size: 10px;
}

.mini-special {
    color: #a5650c;

    font-size: 7px;
    font-weight: 850;
}

.home-bar-track {
    height: 12px;

    overflow: hidden;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(212, 198, 184, .90),
            rgba(229, 220, 210, .95)
        );
}

.home-bar-fill {
    min-width: 4px;
    height: 100%;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #8b2237,
            #c46a76
        );

    box-shadow:
        0 2px 8px rgba(125, 22, 41, .16);
}

.home-bar-value {
    text-align: right;

    font-size: 10px;
    font-weight: 850;
}

.home-chart-legend {
    margin-top: 14px;

    color: #8f8378;

    font-size: 8px;
}

/* donut */

.home-donut-layout {
    min-height: 210px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
}

.home-donut {
    width: 168px;
    height: 168px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    filter: drop-shadow(0 12px 24px rgba(70, 53, 39, .08));
}

.home-donut-inner {
    width: 102px;
    height: 102px;

    display: grid;
    place-items: center;
    align-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            #f7eee5,
            #eadfce
        );

    box-shadow:
        inset
        0 0 0 1px
        rgba(67, 49, 40, .07),
        0 6px 16px rgba(74, 58, 46, .06);
}

.home-donut-inner strong {
    font-family:
        Georgia,
        serif;

    font-size: 25px;
}

.home-donut-inner span {
    margin-top: 2px;

    color: #8f837a;

    font-size: 8px;
}

.home-donut-legend {
    display: grid;
    gap: 12px;

    min-width: 150px;
}

.home-donut-legend > div {
    display: grid;
    grid-template-columns:
        10px
        1fr
        auto;
    gap: 8px;
    align-items: center;

    font-size: 9px;
}

.home-donut-legend i {
    width: 9px;
    height: 9px;

    border-radius: 3px;
}

.home-donut-legend i.kitchen {
    background: #9ebc91;
}

.home-donut-legend i.service {
    background: #edae70;
}

.home-donut-legend i.student {
    background: #8d86cf;
}

/* verticale uren grafiek */

.home-column-chart {
    min-height: 220px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;

    padding: 20px 8px 0;
}

.home-column-item {
    flex: 1;

    min-width: 34px;

    display: grid;
    grid-template-rows:
        18px
        150px
        20px;
    gap: 6px;

    text-align: center;
}

.home-column-value {
    color: #766a62;

    font-size: 8px;
    font-weight: 800;
}

.home-column-track {
    position: relative;

    overflow: hidden;

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            rgba(220, 208, 196, .88),
            rgba(233, 224, 214, .94)
        );

    box-shadow: inset 0 1px 0 rgba(255,248,242,.22);
}

.home-column-fill {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    min-height: 3px;

    border-radius: 10px 10px 0 0;

    background:
        linear-gradient(
            180deg,
            #bf5a6c,
            #7d1629
        );

    box-shadow: 0 -4px 10px rgba(125, 22, 41, .10);
}

.home-column-label {
    color: #8c8179;

    font-size: 8px;
    font-weight: 850;
}

/* tabel drukste dagen */

.home-table {
    overflow: hidden;

    border:
        1px solid
        rgba(141, 119, 99, .22);
    border-radius: 14px;

    background: rgba(244, 236, 226, .56);
}

.home-table-head,
.home-table-row {
    display: grid;
    grid-template-columns:
        1.5fr
        .7fr
        .7fr
        .8fr;
    gap: 10px;
    align-items: center;

    padding: 11px 13px;
}

.home-table-head {
    color: #7c6e63;

    background:
        linear-gradient(
            180deg,
            rgba(224, 212, 199, .96),
            rgba(216, 203, 190, .96)
        );

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.home-table-row {
    border-top:
        1px solid
        rgba(150, 129, 111, .20);

    font-size: 9px;

    background: rgba(245,239,232,.28);
}

.home-table-row strong {
    font-size: 9px;
}

.home-table-empty {
    padding: 18px;

    color: #988d84;

    text-align: center;

    font-size: 9px;
}

/* speciale dagen */

.home-special-list {
    display: grid;
    gap: 10px;
}

.home-special-row {
    min-height: 64px;

    display: grid;
    grid-template-columns:
        42px
        1fr
        auto;
    gap: 14px;
    align-items: center;

    padding: 12px 14px;

    border:
        1px solid
        rgba(168, 135, 103, .22);
    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            rgba(245, 234, 220, .95),
            rgba(233, 219, 202, .95)
        );

    box-shadow:
        0 8px 20px rgba(84, 64, 44, .04),
        inset 0 1px 0 rgba(255,255,255,.65);
}

.home-special-icon {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #fff;
    background:
        linear-gradient(
            180deg,
            #c88513,
            #ab690a
        );

    font-weight: 900;

    box-shadow:
        0 8px 16px rgba(177, 109, 10, .18);
}

.home-special-row strong {
    display: block;

    font-size: 10px;
}

.home-special-row span {
    display: block;

    margin-top: 2px;

    color: #8c8076;

    font-size: 8px;
}

.home-special-link {
    color: var(--wine);

    font-size: 8px;
    font-weight: 850;
}

@media (max-width: 1180px) {

    .home-kpis {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}

@media (max-width: 900px) {

    .home-grid-two {
        grid-template-columns:
            1fr;
    }

    .home-kpis {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}

@media (max-width: 620px) {

    .home-kpis {
        grid-template-columns:
            1fr;
    }

    .home-donut-layout {
        flex-direction: column;
    }

    .home-bar-row {
        grid-template-columns:
            64px
            1fr
            24px;
    }

}



/* ==========================================================
   LIVE AANWEZIGHEID — MAX DASHBOARD
========================================================== */

.home-kpi.live-kpi {
    border-top-color: #6f9677;
    background:
        linear-gradient(
            180deg,
            rgba(221, 238, 220, .95),
            rgba(231, 241, 228, .92)
        );
}

.home-live-panel {
    margin-bottom: 24px;
}

.home-live-description {
    max-width: 760px;
    margin: 6px 0 0;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.55;
}

.home-live-total {
    min-width: 106px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #c6dbc8;
    border-radius: 14px;
    background: #edf6eb;
}

.home-live-dot {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
    background: #5c8764;
    box-shadow:
        0 0 0 5px
        rgba(92, 135, 100, .10);
}

.home-live-total strong {
    display: block;
    color: #416549;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 26px;
    line-height: 1;
}

.home-live-total small {
    display: block;
    margin-top: 2px;
    color: #66806b;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.home-live-list {
    display: grid;
    gap: 9px;
    margin-top: 14px;
}

.home-live-person {
    min-height: 72px;
    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        120px
        120px;
    gap: 18px;
    align-items: center;
    padding: 13px 15px;
    border: 1px solid rgba(91, 69, 58, .11);
    border-radius: 14px;
    background: rgba(255, 253, 249, .78);
}

.home-live-person-main {
    min-width: 0;
}

.home-live-person-title {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.home-live-person-title strong {
    font-size: 13px;
}

.home-live-person-type,
.home-live-planned-time {
    display: block;
    margin-top: 4px;
    color: var(--text-soft);
    font-size: 9px;
}

.home-live-planning-status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.home-live-planning-status.planned {
    color: #45634a;
    background: #e5f0e3;
    border: 1px solid #c5d9c4;
}

.home-live-planning-status.called-in {
    color: #7b4b0d;
    background: #fff0d4;
    border: 1px solid #ebca8f;
}

.home-live-clock {
    text-align: right;
}

.home-live-clock span {
    display: block;
    margin-bottom: 3px;
    color: var(--text-soft);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.home-live-clock strong {
    color: var(--text);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.home-live-duration {
    color: var(--wine) !important;
}

.home-live-empty {
    padding: 18px;
    border: 1px dashed rgba(91, 69, 58, .16);
    border-radius: 13px;
    background: rgba(255, 255, 255, .30);
    color: var(--text-soft);
    font-size: 10px;
    text-align: center;
}


/* ==========================================================
   NL / BE FEESTDAGEN & SCHOOLVAKANTIES
========================================================== */

.official-calendar-markers {
    width: 100%;
    display: grid;
    gap: 2px;
    margin-top: 3px;
}

.official-calendar-badge,
.official-calendar-name {
    width: calc(100% - 4px);
    margin: 0 auto;
    overflow: hidden;
    border-radius: 5px;
    text-align: left;
    text-overflow: ellipsis;
}

.official-calendar-badge {
    padding: 3px 4px;
    font-size: 5.6px;
    font-weight: 950;
    letter-spacing: .025em;
    white-space: nowrap;
}

.official-calendar-name {
    padding: 0 4px 2px;
    font-size: 5.8px;
    font-weight: 800;
    line-height: 1.12;
    white-space: normal;
}

.official-calendar-badge.national-holiday {
    color: #1d567c;
    background: #dcecf8;
    border: 1px solid #acd0ea;
}

.official-calendar-name.national-holiday {
    color: #285f83;
}

.official-calendar-badge.school-holiday {
    color: #66518b;
    background: #eee8f8;
    border: 1px solid #cec1e6;
}

.official-calendar-name.school-holiday {
    color: #6a5988;
}

.day-column.official-holiday-column,
.planner-cell.official-holiday-column,
.summary-cell.official-holiday-column {
    background:
        linear-gradient(
            180deg,
            rgba(218, 236, 249, .52),
            rgba(242, 248, 252, .62)
        );
}

.day-column.school-holiday-column,
.planner-cell.school-holiday-column,
.summary-cell.school-holiday-column {
    background:
        linear-gradient(
            180deg,
            rgba(236, 229, 248, .50),
            rgba(248, 245, 252, .68)
        );
}

/* Als een feestdag midden in een schoolvakantie valt,
   krijgt de feestdag voorrang in de dagkop. */
.day-column.official-holiday-column.school-holiday-column {
    background:
        linear-gradient(
            180deg,
            rgba(218, 236, 249, .72),
            rgba(238, 234, 249, .68)
        );
}

.legend-official-holiday,
.legend-school-holiday {
    width: 11px;
    height: 11px;
    display: inline-block;
    border-radius: 3px;
    vertical-align: middle;
}

.legend-official-holiday {
    background: #dcecf8;
    border: 1px solid #acd0ea;
}

.legend-school-holiday {
    background: #eee8f8;
    border: 1px solid #cec1e6;
}

@media (max-width: 900px) {

    .home-live-person {
        grid-template-columns:
            minmax(0, 1fr)
            100px;
    }

    .home-live-clock:last-child {
        grid-column: 1 / -1;
        text-align: left;
    }
}

@media print {

    .official-calendar-markers {
        display: none !important;
    }

    .home-live-panel {
        display: none !important;
    }
}



/* ==========================================================
   STUDENTJOBS KEUKEN
========================================================== */

.roster-filter-option.student-kitchen .roster-filter-dot,
.group-dot.student-kitchen {
    background: #4f8b7a;
}

.roster-filter-option.student-kitchen .roster-filter-dot {
    box-shadow:
        0 0 0 3px
        rgba(79, 139, 122, .13);
}

.group-divider-label.student-kitchen {
    color: #3f6d60;
}

.staff-avatar.student-kitchen,
.drawer-avatar.student-kitchen {
    color: #31594f;
    background: #d4e9e2;
    border-color: #a8cdc1;
}

.planner-cell.group-student-kitchen {
    background: #f8fcfa;
}

.planner-cell.group-student-kitchen.weekend {
    background: #f4faf7;
}

.planner-cell.group-student-kitchen:hover {
    background: #edf7f2;
}

.legend-color.studentjob-kitchen {
    border: 1px solid #a8cdc1;
    background: #d4e9e2;
}


/* ==========================================================
   WIJNBIBLIOTHEEK
========================================================== */

.wine-main {
    max-width: 1700px;
}

.wine-page-header {
    align-items: flex-start;
}

.wine-access-badge {
    padding: 9px 12px;
    border: 1px solid rgba(125, 22, 41, .16);
    border-radius: 999px;
    color: var(--wine);
    background: rgba(125, 22, 41, .05);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wine-search-card,
.wine-add-card,
.wine-library-section {
    margin-bottom: 22px;
    padding: 22px;
    border: 1px solid rgba(73, 57, 49, .12);
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 12px 34px rgba(44, 30, 23, .045);
}

.wine-search-form {
    display: grid;
    grid-template-columns:
        minmax(280px, 1fr)
        minmax(170px, 220px)
        auto
        auto;
    gap: 12px;
    align-items: end;
}

.wine-search-form label,
.wine-form label,
.wine-edit-form label {
    display: grid;
    gap: 6px;
}

.wine-search-form label > span,
.wine-form label > span,
.wine-edit-form label > span {
    color: var(--text-soft);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.wine-search-form input,
.wine-search-form select,
.wine-form input,
.wine-form select,
.wine-form textarea,
.wine-edit-form input,
.wine-edit-form select,
.wine-edit-form textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, .94);
    color: var(--text);
    font: inherit;
}

.wine-search-form input,
.wine-search-form select,
.wine-form input,
.wine-form select,
.wine-edit-form input,
.wine-edit-form select {
    min-height: 42px;
    padding: 9px 11px;
}

.wine-form textarea,
.wine-edit-form textarea {
    padding: 10px 11px;
    resize: vertical;
}

.wine-search-form button,
.wine-primary-button,
.wine-edit-form button {
    min-height: 42px;
    padding: 10px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--wine);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.wine-reset-link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-soft);
    text-decoration: none;
}

.wine-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.wine-section-heading h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    font-weight: 500;
}

.wine-section-heading > span {
    max-width: 360px;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.5;
    text-align: right;
}

.wine-form-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.wine-form-grid.compact {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    margin-bottom: 14px;
}

.wine-span-2 {
    grid-column: span 2;
}

.wine-primary-button {
    margin-top: 16px;
}

.wine-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(320px, 1fr)
        );
    gap: 16px;
}

.wine-card {
    padding: 18px;
    border: 1px solid rgba(73, 57, 49, .12);
    border-radius: 16px;
    background: rgba(255, 253, 249, .88);
}

.wine-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.wine-card-head h3 {
    margin: 8px 0 4px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    line-height: 1.15;
}

.wine-card-head p {
    margin: 0;
    color: var(--text-soft);
    font-size: 10px;
}

.wine-type-pill {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    color: var(--wine);
    background: rgba(125, 22, 41, .07);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.wine-vintage {
    color: var(--wine);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
}

.wine-card-meta {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}

.wine-card-meta span {
    color: var(--text-soft);
    font-size: 9px;
    line-height: 1.4;
}

.wine-card-meta b {
    display: block;
    margin-bottom: 2px;
    color: var(--text);
    font-size: 8px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wine-detail-block {
    margin-top: 12px;
}

.wine-detail-block > span {
    display: block;
    margin-bottom: 4px;
    color: var(--wine);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.wine-detail-block p {
    margin: 0;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.55;
}

.wine-card-footer {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.wine-card-footer span {
    color: var(--text-soft);
    font-size: 9px;
}

.wine-card-footer strong {
    color: var(--wine);
    font-size: 13px;
}

.wine-stock-note,
.wine-notes {
    margin-top: 9px;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: 9px;
    line-height: 1.5;
}

.wine-stock-note {
    color: #52614c;
    background: #edf4e9;
}

.wine-notes {
    color: var(--text-soft);
    background: #f5f0e9;
}

.wine-edit-details {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

.wine-edit-details summary {
    color: var(--wine);
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}

.wine-edit-form {
    margin-top: 14px;
}

.wine-delete-form {
    margin-top: 9px;
}

.wine-delete-form button {
    padding: 8px 10px;
    border: 1px solid #dfc4c9;
    border-radius: 9px;
    color: var(--danger);
    background: var(--danger-light);
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}

.wine-empty-state {
    grid-column: 1 / -1;
    padding: 34px;
    border: 1px dashed var(--border);
    border-radius: 14px;
    text-align: center;
}

.wine-empty-state strong,
.wine-empty-state span {
    display: block;
}

.wine-empty-state span {
    margin-top: 5px;
    color: var(--text-soft);
    font-size: 10px;
}

@media (max-width: 1050px) {

    .wine-search-form {
        grid-template-columns:
            1fr
            1fr;
    }

    .wine-form-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {

    .wine-search-form,
    .wine-form-grid,
    .wine-form-grid.compact {
        grid-template-columns: 1fr;
    }

    .wine-span-2 {
        grid-column: span 1;
    }

    .wine-card-meta {
        grid-template-columns: 1fr;
    }

    .wine-section-heading {
        display: block;
    }

    .wine-section-heading > span {
        display: block;
        margin-top: 8px;
        text-align: left;
    }
}



/* ==========================================================
   IPHONE / MOBIELE PERSONEELSAPP
========================================================== */

.mobile-roster,
.mobile-bottom-nav {
    display: none;
}

.wine-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wine-scan-button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 13px;
    border-radius: 10px;
    color: #fff;
    background: var(--wine);
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}

.wine-card-images {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.wine-card-images img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: #f5efe7;
}

.wine-barcode-line {
    margin: 7px 0;
    color: var(--text-soft);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
}


/* ==========================================================
   WIJN SCANNER
========================================================== */

.wine-scan-main {
    max-width: 920px;
}

.wine-mobile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.wine-mobile-header h1 {
    margin: 6px 0 5px;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 38px;
    font-weight: 500;
}

.wine-mobile-header p {
    max-width: 600px;
    margin: 0;
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.55;
}

.wine-mobile-back {
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    background: rgba(255,255,255,.65);
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}

.wine-scan-form {
    display: grid;
    gap: 14px;
}

.wine-scan-card {
    position: relative;
    padding: 20px;
    border: 1px solid rgba(73, 57, 49, .12);
    border-radius: 18px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 12px 34px rgba(44, 30, 23, .045);
}

.wine-scan-step {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: 50%;
    color: #fff;
    background: var(--wine);
    font-family: Georgia, serif;
    font-size: 16px;
}

.wine-scan-card-copy {
    margin-bottom: 16px;
}

.wine-scan-card-copy strong,
.wine-scan-card-copy span {
    display: block;
}

.wine-scan-card-copy strong {
    font-size: 14px;
}

.wine-scan-card-copy span {
    max-width: 620px;
    margin-top: 4px;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.5;
}

.wine-camera-grid,
.wine-preview-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.wine-camera-button {
    min-height: 135px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: 1px dashed rgba(125, 22, 41, .30);
    border-radius: 14px;
    color: var(--wine);
    background: rgba(125, 22, 41, .035);
    text-align: center;
    cursor: pointer;
}

.wine-camera-button input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.wine-camera-icon {
    margin-bottom: 8px;
    font-size: 25px;
}

.wine-camera-button strong {
    font-size: 12px;
}

.wine-camera-button small {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 8px;
}

.wine-preview-grid {
    margin-top: 10px;
}

.wine-label-preview {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 12px;
    background: #eee7df;
}

.wine-barcode-scanner {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.wine-camera-live-button,
.wine-stop-scanner {
    min-height: 46px;
    border: 0;
    border-radius: 11px;
    font-weight: 850;
    cursor: pointer;
}

.wine-camera-live-button {
    color: #fff;
    background: var(--wine);
}

.wine-stop-scanner {
    color: var(--wine);
    background: #f4e4e7;
}

.wine-barcode-video {
    width: 100%;
    max-height: 320px;
    border-radius: 14px;
    background: #111;
}

.wine-scan-field {
    display: grid;
    gap: 6px;
}

.wine-scan-field > span {
    color: var(--text-soft);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.wine-scan-field input,
.wine-scan-field select,
.wine-scan-field textarea {
    width: 100%;
    min-height: 45px;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font: inherit;
}

.wine-scan-field textarea {
    resize: vertical;
}

.wine-scan-hint {
    margin: 8px 0 0;
    color: var(--text-soft);
    font-size: 9px;
    line-height: 1.45;
}

.wine-mobile-form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.wine-mobile-wide {
    grid-column: span 2;
}

.wine-mobile-save {
    min-height: 54px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: var(--wine);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}


/* ==========================================================
   IPHONE LAYOUT
========================================================== */

@media (max-width: 760px) {

    body {
        background-attachment: scroll;
    }

    .app-shell {
        display: block;
    }

    .sidebar {
        display: none !important;
    }

    .main-content {
        width: 100%;
        max-width: none;
        padding:
            18px
            14px
            calc(
                92px
                +
                env(safe-area-inset-bottom)
            );
    }

    .page-header {
        margin-bottom: 16px;
    }

    .page-header h1 {
        font-size: 31px;
    }

    .mobile-roster {
        display: block;
        margin-bottom: 18px;
    }

    .mobile-page-title {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
    }

    .mobile-page-title h2 {
        margin: 3px 0 0;
        font-family: Georgia, serif;
        font-size: 28px;
        font-weight: 500;
    }

    .mobile-month-arrows {
        display: flex;
        gap: 5px;
    }

    .mobile-month-arrows a {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 7px 9px;
        border: 1px solid var(--border);
        border-radius: 9px;
        color: var(--text);
        background: rgba(255,255,255,.78);
        font-size: 8px;
        font-weight: 800;
        text-decoration: none;
    }

    .mobile-own-roster,
    .mobile-admin-roster,
    .mobile-admin-shifts {
        display: grid;
        gap: 8px;
    }

    .mobile-day-card,
    .mobile-admin-day {
        display: grid;
        grid-template-columns:
            70px
            minmax(0, 1fr);
        gap: 12px;
        padding: 13px;
        border: 1px solid rgba(73,57,49,.12);
        border-radius: 14px;
        background: rgba(255,255,255,.78);
    }

    .mobile-day-date strong,
    .mobile-day-date span {
        display: block;
    }

    .mobile-day-date strong {
        font-size: 13px;
    }

    .mobile-day-date span {
        margin-top: 3px;
        color: var(--text-soft);
        font-size: 8px;
    }

    .mobile-shift-time {
        display: block;
        margin-bottom: 4px;
        color: var(--wine);
        font-size: 16px;
    }

    .mobile-shift-label {
        display: inline-flex;
        margin-top: 3px;
        padding: 4px 7px;
        border-radius: 999px;
        color: var(--text-soft);
        background: #eee8e0;
        font-size: 7px;
        font-weight: 850;
    }

    .mobile-shift-label.available {
        color: #46613f;
        background: #e7f0e3;
    }

    .mobile-shift-label.unavailable {
        color: #8c3041;
        background: #f5e3e6;
    }

    .mobile-calendar-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 6px;
    }

    .mobile-calendar-tag {
        padding: 4px 6px;
        border-radius: 6px;
        font-size: 6.8px;
        font-weight: 900;
    }

    .mobile-calendar-tag.holiday {
        color: #285f83;
        background: #dcecf8;
    }

    .mobile-calendar-tag.school {
        color: #66518b;
        background: #eee8f8;
    }

    .mobile-availability-card {
        margin-top: 16px;
        padding: 14px;
        border: 1px solid rgba(73,57,49,.12);
        border-radius: 15px;
        background: rgba(255,255,255,.80);
    }

    .mobile-availability-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
    }

    .mobile-availability-head h3 {
        margin: 2px 0 0;
        font-family: Georgia, serif;
        font-size: 22px;
    }

    .mobile-availability-head > span {
        color: var(--text-soft);
        font-size: 7px;
    }

    .mobile-availability-list {
        display: grid;
        gap: 6px;
    }

    .mobile-availability-row {
        display: grid;
        grid-template-columns:
            78px
            minmax(0, 1fr);
        gap: 9px;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--border-soft);
    }

    .mobile-availability-date strong,
    .mobile-availability-date small {
        display: block;
    }

    .mobile-availability-date strong {
        font-size: 10px;
    }

    .mobile-availability-date small {
        margin-top: 2px;
        color: var(--text-soft);
        font-size: 6.5px;
        line-height: 1.3;
    }

    .mobile-availability-controls {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            auto;
        gap: 5px;
    }

    .mobile-availability-select,
    .mobile-start-time {
        min-height: 38px;
        width: 100%;
        padding: 7px 8px;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: #fff;
        font-size: 9px;
    }

    .mobile-start-time {
        width: 105px;
    }

    .mobile-save-availability {
        width: 100%;
        min-height: 48px;
        margin-top: 12px;
        border: 0;
        border-radius: 11px;
        color: #fff;
        background: var(--wine);
        font-size: 10px;
        font-weight: 900;
    }

    .mobile-fixed-unavailable {
        min-height: 38px;
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: #fff;
        font-size: 9px;
    }

    .mobile-admin-day {
        display: block;
    }

    .mobile-admin-day-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 9px;
    }

    .mobile-admin-day-head strong,
    .mobile-admin-day-head span {
        display: block;
    }

    .mobile-admin-day-head span {
        margin-top: 2px;
        color: var(--text-soft);
        font-size: 8px;
    }

    .mobile-special-tag {
        padding: 4px 6px;
        border-radius: 6px;
        color: var(--special-day-dark) !important;
        background: var(--special-day-light);
        font-size: 7px !important;
        font-weight: 900;
    }

    .mobile-admin-shift {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            auto;
        gap: 2px 8px;
        padding: 8px 9px;
        border-radius: 10px;
        background: #f7f1e9;
    }

    .mobile-admin-shift strong {
        font-size: 10px;
    }

    .mobile-admin-shift span {
        font-size: 10px;
        font-weight: 800;
    }

    .mobile-admin-shift small {
        grid-column: 1 / -1;
        color: var(--text-soft);
        font-size: 7px;
    }

    /* Desktop matrix remains untouched but is hidden on iPhone. */
    .planner-section,
    .special-days-panel,
    .today-overview,
    .print-header {
        display: none !important;
    }

    .mobile-bottom-nav {
        position: fixed;
        z-index: 999;
        left: 0;
        right: 0;
        bottom: 0;
        min-height: 66px;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        padding:
            7px
            6px
            calc(
                7px
                +
                env(safe-area-inset-bottom)
            );
        border-top: 1px solid rgba(73,57,49,.13);
        background: rgba(250,247,242,.97);
        backdrop-filter: blur(14px);
    }

    .mobile-nav-item {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border-radius: 9px;
        color: var(--text-soft);
        text-decoration: none;
    }

    .mobile-nav-item > span {
        font-size: 18px;
        line-height: 1;
    }

    .mobile-nav-item small {
        font-size: 7px;
        font-weight: 800;
    }

    .mobile-nav-item.active {
        color: var(--wine);
        background: rgba(125,22,41,.06);
    }

    .student-jobs-main,
    .wine-main,
    .wine-scan-main {
        padding-bottom:
            calc(
                92px
                +
                env(safe-area-inset-bottom)
            );
    }

    .student-jobs-main section,
    .student-jobs-main .student-section {
        border-radius: 14px;
    }

    .wine-page-header,
    .wine-mobile-header {
        display: block;
    }

    .wine-header-actions {
        margin-top: 12px;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .wine-scan-button {
        min-height: 44px;
        padding: 10px 14px;
    }

    .wine-search-card,
    .wine-add-card,
    .wine-library-section {
        padding: 14px;
        border-radius: 15px;
    }

    .wine-add-card {
        display: none;
    }

    .wine-grid {
        grid-template-columns: 1fr;
    }

    .wine-card {
        padding: 14px;
    }

    .wine-mobile-header h1 {
        font-size: 33px;
    }

    .wine-mobile-back {
        display: inline-flex;
        margin-top: 10px;
    }

    .wine-scan-card {
        padding: 14px;
        border-radius: 15px;
    }

    .wine-camera-grid,
    .wine-preview-grid,
    .wine-mobile-form-grid {
        grid-template-columns: 1fr;
    }

    .wine-mobile-wide {
        grid-column: span 1;
    }

    .wine-camera-button {
        min-height: 122px;
    }

    .wine-mobile-save {
        position: sticky;
        bottom:
            calc(
                77px
                +
                env(safe-area-inset-bottom)
            );
        z-index: 20;
        box-shadow:
            0 12px 30px
            rgba(87,16,29,.22);
    }

    .wine-card-images img {
        height: 190px;
    }
}



/* ==========================================================
   WIJN ETIKET OCR / AUTOMATISCH INVULLEN
========================================================== */

.wine-ocr-panel {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(125, 22, 41, .14);
    border-radius: 13px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 250, 247, .96),
            rgba(248, 239, 235, .92)
        );
}

.wine-ocr-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wine-ocr-head strong,
.wine-ocr-head span {
    display: block;
}

.wine-ocr-head strong {
    color: var(--text);
    font-size: 11px;
}

.wine-ocr-head span {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 8px;
}

.wine-ocr-percent {
    min-width: 44px;
    color: var(--wine) !important;
    font-family: Georgia, serif;
    font-size: 17px !important;
    font-weight: 700;
    text-align: right;
}

.wine-ocr-progress {
    height: 7px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(125, 22, 41, .08);
}

.wine-ocr-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--wine);
    transition: width .2s ease;
}

.wine-ocr-button {
    width: 100%;
    min-height: 42px;
    margin-top: 11px;
    border: 1px solid rgba(125, 22, 41, .18);
    border-radius: 10px;
    color: var(--wine);
    background: #fff;
    font-size: 9px;
    font-weight: 850;
    cursor: pointer;
}

.wine-ocr-button:disabled {
    opacity: .55;
    cursor: wait;
}

.wine-ocr-debug {
    margin-top: 10px;
}

.wine-ocr-debug summary {
    color: var(--text-soft);
    font-size: 8px;
    cursor: pointer;
}

.wine-ocr-debug pre {
    max-height: 260px;
    margin: 9px 0 0;
    padding: 10px;
    overflow: auto;
    border-radius: 9px;
    background: #f3eee8;
    color: #54473f;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
    font-size: 8px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.wine-auto-fill-message {
    margin-bottom: 14px;
    padding: 10px 11px;
    border: 1px solid #e4d8ca;
    border-radius: 10px;
    color: var(--text-soft);
    background: #f7f2ec;
    font-size: 9px;
    line-height: 1.45;
}

.wine-auto-fill-message.success {
    border-color: #bfd6bf;
    color: #416449;
    background: #eaf3e8;
}

.wine-auto-filled {
    border-color: #9ebf9f !important;
    background:
        linear-gradient(
            180deg,
            #fbfffb,
            #f1f8ef
        ) !important;
    box-shadow:
        0 0 0 2px
        rgba(89, 133, 93, .05);
}

@media (max-width: 760px) {

    .wine-ocr-panel {
        padding: 12px;
    }

    .wine-ocr-button {
        min-height: 46px;
        font-size: 10px;
    }

    .wine-auto-fill-message {
        font-size: 9px;
    }
}



/* ==========================================================
   PRODUCTIE-AFWERKING — UNIFORM MENU / HOME / WIJNBIBLIOTHEEK
========================================================== */

/* Op brede desktops blijven alle zes hoofdwidgets netjes naast elkaar. */
@media (min-width: 1320px) {

    .home-kpis {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px;
        align-items: stretch;
    }

    .home-kpi {
        min-width: 0;
        min-height: 112px;
        padding: 17px 17px 15px;
        border-radius: 16px;
        overflow: hidden;
    }

    .home-kpi > span {
        display: block;
        min-height: 20px;
        letter-spacing: .08em;
    }

    .home-kpi > strong {
        margin-top: 9px;
        font-size: 29px;
        line-height: 1;
    }

    .home-kpi > small {
        display: block;
        margin-top: 8px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
}

@media (min-width: 900px) and (max-width: 1319px) {

    .home-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
}

/* De kaarten krijgen een iets duidelijkere, consistente hiërarchie. */
.home-kpi {
    position: relative;
    box-shadow:
        0 12px 28px
        rgba(65, 42, 31, .045);
}

.home-kpi::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.20),
            transparent 45%
        );
}

.home-kpi.live-kpi {
    border-top-color: #6f9677;
}

.home-kpi.warning,
.home-kpi.special {
    box-shadow:
        0 12px 28px
        rgba(174, 126, 22, .055);
}


/* ==========================================================
   WIJNBIBLIOTHEEK ALS ZOEK- EN BEHEEROVERZICHT
========================================================== */

.wine-library-toolbar {
    margin-bottom: 18px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid rgba(73, 57, 49, .11);
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.78),
            rgba(249,242,235,.74)
        );
}

.wine-library-toolbar strong,
.wine-library-toolbar small {
    display: block;
}

.wine-library-toolbar strong {
    margin-top: 4px;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 20px;
    font-weight: 500;
}

.wine-library-toolbar small {
    margin-top: 4px;
    color: var(--text-soft);
    font-size: 9px;
}

.wine-primary-library-action {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border-radius: 10px;
    color: #fff;
    background: var(--wine);
    text-decoration: none;
    font-size: 9px;
    font-weight: 850;
    white-space: nowrap;
}

.wine-edit-images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(125, 22, 41, .10);
    border-radius: 12px;
    background: rgba(250, 245, 240, .72);
}

.wine-edit-image-field {
    min-width: 0;
}

.wine-edit-image-field > span {
    display: block;
    margin-bottom: 7px;
    color: var(--text);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.wine-edit-image-field input[type="file"] {
    min-height: auto;
    padding: 8px;
    background: #fff;
}

.wine-edit-image-field small {
    display: block;
    margin-top: 6px;
    color: var(--text-soft);
    font-size: 8px;
    line-height: 1.4;
}

.wine-edit-image-preview {
    width: 100%;
    height: 150px;
    display: block;
    margin-bottom: 8px;
    object-fit: contain;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: #f4eee7;
}

@media (max-width: 760px) {

    .wine-library-toolbar {
        display: block;
    }

    .wine-primary-library-action {
        width: 100%;
        margin-top: 12px;
    }

    .wine-edit-images {
        grid-template-columns: 1fr;
    }
}



/* ==========================================================
   PERSONEEL SUBMENU / UREN / QUALITY CHECKS
========================================================== */

.staff-hours-toolbar {
    padding: 18px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: rgba(255,255,255,.74);
}

.staff-hours-month-form {
    display: flex;
    align-items: end;
    gap: 10px;
}

.staff-hours-month-form label {
    display: grid;
    gap: 6px;
}

.staff-hours-month-form span {
    color: var(--text-soft);
    font-size: 8px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.staff-hours-month-form input {
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
}

.staff-hours-month-form button {
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: var(--wine);
    font-weight: 800;
}

.staff-hours-summary {
    display: flex;
    gap: 10px;
}

.staff-hours-summary > div {
    min-width: 165px;
    padding: 10px 13px;
    border-radius: 11px;
    background: #f7f1eb;
}

.staff-hours-summary span,
.staff-hours-summary strong {
    display: block;
}

.staff-hours-summary span {
    color: var(--text-soft);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.staff-hours-summary strong {
    margin-top: 5px;
    font-size: 17px;
}

.staff-hours-card {
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: rgba(255,255,255,.79);
}

.staff-hours-head,
.staff-hours-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) 1fr .7fr .7fr;
    gap: 16px;
    align-items: center;
}

.staff-hours-head {
    padding: 11px 16px;
    color: var(--text-soft);
    background: #f6f0ea;
    font-size: 8px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.staff-hours-row {
    padding: 13px 16px;
    border-top: 1px solid var(--border-soft);
    font-size: 10px;
}

.staff-hours-row.inactive {
    opacity: .5;
}

.staff-hours-person {
    display: flex;
    align-items: center;
    gap: 10px;
}

.staff-hours-person strong,
.staff-hours-person span {
    display: block;
}

.staff-hours-person span {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: 8px;
}

.hours-number {
    font-weight: 750;
}

.hours-number.rounded {
    color: var(--wine);
    font-size: 12px;
    font-weight: 900;
}

.staff-hours-note {
    padding: 13px 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 12px;
    background: #f7f2ec;
    color: var(--text-soft);
    font-size: 9px;
}

.staff-hours-note strong {
    color: var(--text);
}

.quality-grid {
    display: grid;
    grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.2fr);
    gap: 18px;
}

.quality-check-card,
.quality-message-card,
.quality-guidance {
    padding: 22px;
    border: 1px solid var(--border-soft);
    border-radius: 17px;
    background: rgba(255,255,255,.77);
}

.quality-card-number {
    width: 34px;
    height: 34px;
    margin-bottom: 15px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--wine);
    font-family: Georgia, serif;
}

.quality-check-card h2,
.quality-message-card h2 {
    margin: 5px 0 8px;
    font-family: Georgia, serif;
    font-size: 25px;
    font-weight: 500;
}

.quality-check-card p {
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.55;
}

.quality-status-list {
    margin-top: 20px;
    display: grid;
    gap: 9px;
}

.quality-status-list > div {
    padding: 11px 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-radius: 10px;
    background: #f7f2ec;
    font-size: 9px;
}

.quality-ok {
    color: #4f7255;
}

.quality-warning {
    color: #9b6b14;
}

.quality-form {
    margin-top: 14px;
}

.quality-form label,
.quality-form label > span {
    display: block;
}

.quality-form label > span {
    margin-bottom: 7px;
    color: var(--text-soft);
    font-size: 8px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.quality-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #fff;
    font: inherit;
    resize: vertical;
}

.quality-send-button {
    width: 100%;
    min-height: 48px;
    margin-top: 12px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: var(--wine);
    font-weight: 850;
}

.quality-result {
    margin-top: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 750;
}

.quality-result.success {
    color: #47694e;
    background: #e8f0e6;
}

.quality-result.warning {
    color: #855b17;
    background: #fff2d6;
}

.quality-guidance {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.quality-guidance > div {
    flex: 1 1 320px;
}

.quality-guidance strong,
.quality-guidance span {
    display: block;
}

.quality-guidance span {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 9px;
}

.quality-guidance code {
    padding: 7px 9px;
    border-radius: 8px;
    background: #f4eee8;
    font-size: 8px;
}

@media (max-width: 900px) {
    .staff-hours-toolbar,
    .quality-grid {
        display: block;
    }

    .staff-hours-summary {
        margin-top: 12px;
    }

    .quality-message-card {
        margin-top: 12px;
    }
}




/* ==========================================================
   PRODUCTIE UPDATE - SIDEBAR + WIJNPAGINA'S
========================================================== */

.sidebar-navigation {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.navigation-spacer {
    flex: 1;
}

.navigation-group {
    margin-top: 6px;
}

.navigation-group summary {
    list-style: none;
    cursor: pointer;
}

.navigation-group summary::-webkit-details-marker {
    display: none;
}

.navigation-group-trigger {
    justify-content: flex-start;
}

.navigation-label {
    flex: 1;
}

.navigation-caret {
    margin-left: auto;
    font-size: 12px;
    line-height: 1;
    opacity: .82;
    transition: transform .18s ease;
}

.navigation-group[open] .navigation-caret {
    transform: rotate(180deg);
}

.navigation-submenu {
    margin: 6px 0 2px 18px;
    padding: 4px 0 4px 14px;
    display: grid;
    gap: 6px;
    border-left: 1px solid rgba(255,255,255,.14);
}

.navigation-subitem {
    min-height: 38px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    color: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    transition:
        background .14s ease,
        color .14s ease,
        transform .14s ease;
}

.navigation-subitem:hover {
    color: #fff;
    background: rgba(255,255,255,.06);
    transform: translateX(2px);
}

.navigation-subitem.active {
    color: #fff;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.06)
        );
    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.08);
}

.wine-main,
.wine-scan-main {
    width: 100%;
    max-width: none;
}

.wine-page-header,
.wine-mobile-header,
.wine-search-card,
.wine-library-toolbar,
.wine-library-section,
.wine-scan-form {
    width: 100%;
    max-width: none;
}

.wine-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.wine-library-section {
    padding: 24px;
}

.wine-scan-form {
    display: grid;
    gap: 18px;
}

.wine-scan-card {
    width: 100%;
}

@media (min-width: 1100px) {
    .wine-scan-main,
    .wine-main {
        padding-right: clamp(28px, 4vw, 72px);
    }
}

@media (max-width: 900px) {
    .navigation-submenu {
        margin-left: 16px;
        padding-left: 12px;
    }
}



/* ==========================================================
   STANDALONE QUALITY CHECKS
========================================================== */

.quality-overview {
    padding: 22px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: stretch;
    border: 1px solid var(--border-soft);
    border-radius: 17px;
    background: rgba(255,255,255,.78);
}

.quality-overview h2 {
    margin: 5px 0 8px;
    font-family: Georgia, serif;
    font-size: 27px;
    font-weight: 500;
}

.quality-overview p {
    max-width: 760px;
    margin: 0;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.55;
}

.quality-run-form {
    margin-top: 16px;
    max-width: 310px;
}

.quality-notification-card {
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 14px;
    background: #f6f0ea;
}

.quality-notification-card span,
.quality-notification-card strong,
.quality-notification-card small {
    display: block;
}

.quality-notification-card span {
    color: var(--text-soft);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.quality-notification-card strong {
    margin-top: 7px;
    font-size: 15px;
}

.quality-notification-card small {
    margin-top: 6px;
    color: var(--text-soft);
}

.quality-results {
    padding: 22px;
    border: 1px solid var(--border-soft);
    border-radius: 17px;
    background: rgba(255,255,255,.78);
}

.quality-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.quality-results-header h2 {
    margin: 4px 0 0;
    font-family: Georgia, serif;
    font-size: 25px;
    font-weight: 500;
}

.quality-total-status {
    padding: 9px 12px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 850;
}

.quality-total-status.success {
    color: #47694e;
    background: #e7f0e5;
}

.quality-total-status.danger {
    color: #8c2c3e;
    background: #f7e5e8;
}

.quality-test-list {
    display: grid;
    gap: 9px;
}

.quality-test-row {
    padding: 12px 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 11px;
}

.quality-test-row.success {
    background: #fbfdfb;
}

.quality-test-row.danger {
    background: #fff8f9;
}

.quality-test-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #53765c;
    font-weight: 900;
}

.quality-test-row.danger .quality-test-icon {
    background: var(--wine);
}

.quality-test-row strong,
.quality-test-row span {
    display: block;
}

.quality-test-row span {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 9px;
}

.quality-external-note {
    padding: 13px 15px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-radius: 12px;
    background: #f6f0ea;
    color: var(--text-soft);
    font-size: 9px;
    line-height: 1.5;
}

.quality-external-note strong {
    color: var(--text);
    white-space: nowrap;
}

.quality-external-note code {
    color: var(--wine);
}

@media (max-width: 900px) {
    .quality-overview {
        grid-template-columns: 1fr;
    }

    .quality-results-header {
        align-items: flex-start;
        flex-direction: column;
    }
}