/*
 * APLsin Design System
 * v 1.0 — 2026-04-30
 * En källa, en sanning. Inline styles är förbjudna i nya sidor.
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ════════════════════════════════════════════════════════════
   1. TOKENS
   ════════════════════════════════════════════════════════════ */
:root {
    /* Färg — APLsin-brand */
    --primary:      #111827;
    --primary-2:    #1f2937;
    --navy:         #0d1424;
    --navy-2:       #121d32;
    --navy-3:       #1d2b46;
    --accent:       #2f6fe4;
    --accent-2:     #245cc4;
    --accent-soft:  #e8f0ff;
    --accent-rgb:   47, 111, 228;

    /* Bakgrund + ytor */
    --bg:           #eef3f8;
    --surface:      #ffffff;
    --surface-2:    #f8fafc;

    /* Text */
    --text:         #111827;
    --text-soft:    #475569;
    --muted:        #718096;
    --muted-2:      #a6b1c0;

    /* Linjer */
    --border:       #dce5ef;
    --border-strong:#c5d1df;

    /* Status */
    --success:      #16a34a;
    --success-soft: #dcfce7;
    --success-rgb:  22, 163, 74;
    --warning:      #f59e0b;
    --warning-soft: #fef3c7;
    --warning-rgb:  245, 158, 11;
    --danger:       #dc2626;
    --danger-soft:  #fee2e2;
    --danger-rgb:   220, 38, 38;
    --info:         #0284c7;
    --info-soft:    #dbeafe;
    --info-rgb:     2, 132, 199;

    /* Tema — default är nuvarande look. Ändra via ?theme=soft-blue / warm-neutral / sage / club-mint / default */
    --app-body-bg:
        radial-gradient(circle at 18% -12%, rgba(255, 122, 26, .12), transparent 28%),
        radial-gradient(circle at 92% 8%, rgba(13, 38, 56, .11), transparent 26%),
        linear-gradient(180deg, #fbf7ef 0%, #f2ede5 52%, #edf1f4 100%);
    --app-main-bg:
        radial-gradient(circle at 72% 4%, rgba(255, 122, 26, .10), transparent 26%),
        linear-gradient(180deg, rgba(255, 253, 248, .72), rgba(242, 237, 229, .96));
    --sidebar-bg:
        radial-gradient(circle at 86% 2%, rgba(255, 122, 26, .14), transparent 19%),
        linear-gradient(180deg, #102d42 0%, #0b2031 55%, #081522 100%);
    --sidebar-shadow: 22px 0 52px rgba(13, 38, 56, .16);
    --sidebar-fg: #ffffff;
    --sidebar-muted: rgba(205, 218, 229, .64);
    --sidebar-link: rgba(226, 235, 242, .78);
    --sidebar-link-icon: rgba(199, 214, 225, .86);
    --sidebar-link-hover: rgba(255, 255, 255, .075);
    --sidebar-link-active: rgba(255, 255, 255, .105);
    --sidebar-link-active-fg: var(--sidebar-fg);
    --sidebar-link-active-icon: var(--sidebar-fg);
    --sidebar-link-active-shadow: inset 0 0 0 1px var(--sidebar-border);
    --sidebar-border: rgba(255, 255, 255, .09);
    --sidebar-control-bg: rgba(255, 255, 255, .055);
    --sidebar-control-border: rgba(255, 255, 255, .13);
    --topbar-bg: rgba(255, 253, 248, .80);
    --topbar-border: rgba(214, 199, 182, .74);
    --topbar-control-bg: rgba(255, 253, 248, .92);
    --topbar-control-border: #e4dacb;
    --topbar-control-hover-bg: #fff7ed;
    --panel-bg: rgba(255, 253, 248, .90);
    --panel-bg-strong: #ffffff;
    --panel-bg-soft: rgba(255, 253, 248, .62);
    --panel-border: rgba(214, 199, 182, .86);
    --panel-border-soft: rgba(214, 199, 182, .68);
    --panel-shadow: 0 22px 58px rgba(23, 35, 52, .075);
    --panel-row-bg: #ffffff;
    --panel-row-hover: #f8fafc;
    --panel-unread-bg: var(--accent-soft);
    --theme-link: var(--accent);
    --theme-note-hover: #fff7ed;
    --theme-warning-text: #8a5a05;
    --theme-success-text: #15803d;
    --theme-danger-text: #b91c1c;
    --theme-info-text: #1d4ed8;
    --map-home: #4f46e5;
    --map-work: #15803d;
    --map-checkin: #ea580c;
    --attendance-drawer-bg:
        linear-gradient(90deg, rgba(255, 251, 245, .96), rgba(255, 255, 255, .98)),
        #fff;
    --attendance-card-bg: rgba(255,255,255,.58);
    --attendance-card-border: #e2d5c4;
    --attendance-hero-bg: linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,251,255,.72));
    --attendance-heading: #102033;
    --attendance-label: #728096;
    --attendance-muted: #6c7a91;
    --attendance-focus: #1f6dd8;
    --attendance-present-bg: #e9f8ef;
    --attendance-present-border: #b9e4cf;
    --attendance-present-text: #13724b;
    --attendance-absent-bg: #fff0f2;
    --attendance-absent-border: #f0c2c8;
    --attendance-absent-text: #a83240;
    --attendance-missing-bg: #f7f9fc;
    --attendance-missing-border: #d9e1eb;
    --attendance-missing-text: #6d7c91;
    --attendance-future-bg: #faf7f1;
    --attendance-future-border: #e4ded6;
    --attendance-future-text: #8a8176;

    /* Konceptfärger */
    --c-attendance: #16a34a;
    --c-logbook:    #2563eb;
    --c-review:     #7c3aed;
    --c-visit:      #64748b;
    --c-contract:   #6366f1;

    /* Layout */
    --sidebar-w:        204px;
    --sidebar-w-mini:   60px;
    --topbar-h:         60px;
    --content-max:      1280px;

    /* Spacing */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
    --s-12: 48px;--s-16: 64px;

    /* Radii */
    --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
    --r-xl: 18px; --r-pill: 999px;

    /* Skuggor */
    --sh-sm: 0 1px 2px rgba(28,25,23,.04);
    --sh-md: 0 8px 24px rgba(15,23,42,.045);
    --sh-lg: 0 18px 44px rgba(15,23,42,.065);
    --sh-xl: 0 24px 60px rgba(15,23,42,.10);
    --sh-focus: 0 0 0 3px rgba(249,115,22,.20);

    /* Typografi-skala */
    --fs-xs: .72rem;   /* 11.5 */
    --fs-sm: .82rem;   /* 13   */
    --fs-base: .88rem;  /* 14.08 */
    --fs-md: 1rem;     /* 16   */
    --fs-lg: 1.15rem;  /* 18.4 */
    --fs-xl: 1.4rem;   /* 22.4 */
    --fs-2xl: 1.75rem; /* 28   */
    --fs-3xl: 2.25rem; /* 36   */

    --lh-tight: 1.2;
    --lh-base:  1.5;

    --t-fast:  120ms;
    --t-base:  200ms;
    --t-slow:  320ms;
}

:root[data-aplsin-theme="soft-blue"] {
    --accent: #2f6fe4;
    --accent-2: #255ec4;
    --accent-soft: #eaf2ff;
    --accent-rgb: 47, 111, 228;
    --bg: #edf4fb;
    --surface-2: #f7fafc;
    --border: #d8e4f0;
    --border-strong: #c3d1df;
    --app-body-bg:
        radial-gradient(circle at 18% -12%, rgba(47, 111, 228, .13), transparent 28%),
        radial-gradient(circle at 92% 8%, rgba(15, 45, 75, .12), transparent 26%),
        linear-gradient(180deg, #f8fbff 0%, #eef4fb 54%, #e7edf5 100%);
    --app-main-bg:
        radial-gradient(circle at 72% 4%, rgba(47, 111, 228, .09), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(238,244,251,.96));
    --sidebar-bg:
        radial-gradient(circle at 86% 2%, rgba(47,111,228,.20), transparent 19%),
        linear-gradient(180deg, #0e2341 0%, #0a1a31 58%, #06111f 100%);
    --topbar-bg: rgba(249, 252, 255, .84);
    --topbar-border: rgba(194, 209, 225, .82);
    --topbar-control-bg: rgba(255,255,255,.94);
    --topbar-control-border: #d4e0ee;
    --topbar-control-hover-bg: #eef5ff;
    --panel-bg: rgba(255,255,255,.92);
    --panel-bg-soft: rgba(247,250,252,.84);
    --panel-border: rgba(202, 216, 232, .88);
    --panel-border-soft: rgba(202, 216, 232, .72);
    --panel-shadow: 0 22px 58px rgba(19, 42, 72, .075);
    --theme-note-hover: #eef5ff;
    --theme-warning-text: #90620c;
    --attendance-card-border: #d5e0ee;
    --attendance-drawer-bg:
        linear-gradient(90deg, rgba(248,251,255,.97), rgba(255,255,255,.98)),
        #fff;
    --attendance-hero-bg: linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,246,255,.76));
}

:root[data-aplsin-theme="warm-neutral"] {
    --primary: #1c1917;
    --primary-2: #292524;
    --navy: #1c1917;
    --navy-2: #292524;
    --navy-3: #44403c;
    --accent: #f97316;
    --accent-2: #ea580c;
    --accent-soft: #fff0e2;
    --accent-rgb: 249, 115, 22;
    --bg: #f5efe7;
    --surface-2: #fbf7f1;
    --border: #e6d9c9;
    --border-strong: #d4c2ad;
    --text: #1c1917;
    --text-soft: #57534e;
    --muted: #78716c;
    --muted-2: #a8a29e;
    --app-body-bg:
        radial-gradient(circle at 18% -12%, rgba(249, 115, 22, .13), transparent 28%),
        radial-gradient(circle at 92% 8%, rgba(28, 25, 23, .10), transparent 26%),
        linear-gradient(180deg, #fffaf3 0%, #f4ede4 54%, #ece7df 100%);
    --app-main-bg:
        radial-gradient(circle at 72% 4%, rgba(249, 115, 22, .10), transparent 26%),
        linear-gradient(180deg, rgba(255,253,248,.78), rgba(244,237,228,.96));
    --sidebar-bg:
        radial-gradient(circle at 86% 2%, rgba(249,115,22,.18), transparent 19%),
        linear-gradient(180deg, #1f2937 0%, #172033 58%, #101827 100%);
    --topbar-bg: rgba(255, 253, 248, .84);
    --topbar-border: rgba(218, 204, 187, .82);
    --topbar-control-bg: rgba(255,253,248,.94);
    --topbar-control-border: #e5d8c7;
    --topbar-control-hover-bg: #fff0e2;
    --panel-bg: rgba(255,253,248,.92);
    --panel-bg-soft: rgba(255,249,240,.76);
    --panel-border: rgba(218, 204, 187, .88);
    --panel-border-soft: rgba(218, 204, 187, .70);
    --theme-note-hover: #fff4e8;
    --theme-warning-text: #8a5a05;
    --theme-info-text: #245cc4;
    --attendance-card-border: #e1d2c0;
    --attendance-focus: #ea580c;
}

:root[data-aplsin-theme="sage"] {
    --primary: #15221e;
    --primary-2: #21332d;
    --navy: #10231f;
    --navy-2: #16312b;
    --navy-3: #25473d;
    --accent: #f97316;
    --accent-2: #2f7d68;
    --accent-soft: #eaf3df;
    --accent-rgb: 249, 115, 22;
    --bg: #eff4e7;
    --surface-2: #f7faf7;
    --border: #d8e5dc;
    --border-strong: #c1d2c7;
    --success: #4f8f3a;
    --success-rgb: 79, 143, 58;
    --success-soft: #e7f3df;
    --app-body-bg:
        radial-gradient(circle at 18% -12%, rgba(125, 154, 74, .16), transparent 28%),
        radial-gradient(circle at 92% 8%, rgba(16, 35, 31, .11), transparent 26%),
        linear-gradient(180deg, #fbfdf7 0%, #eff4e7 52%, #e7efdc 100%);
    --app-main-bg:
        radial-gradient(circle at 72% 4%, rgba(125, 154, 74, .13), transparent 26%),
        linear-gradient(180deg, rgba(255,255,249,.78), rgba(239,244,231,.96));
    --sidebar-bg:
        radial-gradient(circle at 82% -3%, rgba(150, 176, 91, .30), transparent 25%),
        radial-gradient(circle at 12% 34%, rgba(103, 132, 70, .26), transparent 30%),
        linear-gradient(180deg, #365640 0%, #284634 56%, #183124 100%);
    --sidebar-shadow: 24px 0 58px rgba(28, 52, 37, .18);
    --sidebar-link-hover: rgba(236, 244, 222, .12);
    --sidebar-link-active: #eff4e7;
    --sidebar-link-active-fg: #10231f;
    --sidebar-link-active-icon: #4f8f3a;
    --sidebar-link-active-shadow:
        16px 0 34px rgba(239, 244, 231, .32),
        inset 0 0 0 1px rgba(218, 228, 203, .90);
    --topbar-bg: rgba(253, 255, 248, .84);
    --topbar-border: rgba(207, 220, 194, .82);
    --topbar-control-bg: rgba(255,255,249,.94);
    --topbar-control-border: #dce7cf;
    --topbar-control-hover-bg: #eaf3df;
    --panel-bg: rgba(255,255,249,.92);
    --panel-bg-soft: rgba(248,251,242,.82);
    --panel-border: rgba(207, 220, 194, .88);
    --panel-border-soft: rgba(207, 220, 194, .72);
    --panel-shadow: 0 22px 58px rgba(42, 72, 48, .075);
    --theme-note-hover: #eaf3df;
    --theme-warning-text: #7a570a;
    --map-work: #4f8f3a;
    --attendance-card-border: #d8e4c9;
    --attendance-drawer-bg:
        linear-gradient(90deg, rgba(253,255,248,.97), rgba(255,255,255,.98)),
        #fff;
    --attendance-hero-bg: linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,247,230,.78));
}

/* ════════════════════════════════════════════════════════════
   2. RESET + BAS
   ════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--text);
    background:
        radial-gradient(circle at 18% 0%, rgba(148,163,184,.14), transparent 30%),
        linear-gradient(180deg, #f8fafc 0%, var(--bg) 42%, #edf3f8 100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6 { margin: 0; line-height: var(--lh-tight); font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p  { margin: 0; }
a  { color: var(--accent-2); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent); }
button { font-family: inherit; font-size: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
img { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-6) 0; }

/* Scrollbar — diskret */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* Selektion */
::selection { background: var(--accent-soft); color: var(--text); }

/* Focus */
:focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: var(--r-sm); }

/* ════════════════════════════════════════════════════════════
   3. LAYOUT-SHELL
   ════════════════════════════════════════════════════════════ */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
    transition: grid-template-columns var(--t-base);
}
.app-shell.is-collapsed {
    grid-template-columns: var(--sidebar-w-mini) 1fr;
}
.app-main {
    min-width: 0;       /* viktigt — annars overflow:auto-tabeller spränger gridden */
    display: flex;
    flex-direction: column;
}

/* ════════════════════════════════════════════════════════════
   4. SIDEBAR
   ════════════════════════════════════════════════════════════ */
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 50;
}
.sidebar-brand {
    height: var(--topbar-h);
    padding: 0 var(--s-5);
    display: flex;
    align-items: center;
    gap: var(--s-3);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    font-weight: 800;
    font-size: var(--fs-lg);
    letter-spacing: -.02em;
    flex-shrink: 0;
}
.sidebar-brand:hover { color: var(--text); }
.sidebar-brand .brand-i {
    position: relative;
    display: inline-block;
    color: inherit;
}

.sidebar-brand .brand-dot {
    position: absolute;
    left: 50%;
    top: -.28em;
    width: .22em;
    height: .22em;
    border-radius: 50%;
    background: #f97316;
    transform: translateX(-50%);
}
.sidebar-brand .brand-tagline {
    font-size: var(--fs-xs);
    color: var(--muted);
    font-weight: 600;
    letter-spacing: .01em;
}
.app-shell.is-collapsed .sidebar-brand .brand-text,
.app-shell.is-collapsed .sidebar-brand .brand-tagline { display: none; }

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--s-4) var(--s-3);
}
.sidebar-group { margin-bottom: var(--s-5); }
.sidebar-group-title {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 0 var(--s-3);
    margin-bottom: var(--s-2);
}
.app-shell.is-collapsed .sidebar-group-title {
    text-align: center;
    padding: 0;
    font-size: 9px;
    letter-spacing: .04em;
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-md);
    color: var(--text-soft);
    font-size: var(--fs-base);
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 2px;
    border-left: 3px solid transparent;
    transition: background var(--t-fast), color var(--t-fast);
    position: relative;
}
.sidebar-link i {
    font-size: 1.05rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.sidebar-link:hover {
    background: var(--surface-2);
    color: var(--text);
}
.sidebar-link.is-active {
    background: var(--accent-soft);
    color: var(--accent-2);
    border-left-color: var(--accent);
    padding-left: calc(var(--s-3) - 3px);
}
.sidebar-link.is-active i { color: var(--accent-2); }

.app-shell.is-collapsed .sidebar-link {
    justify-content: center;
    padding: var(--s-3);
    border-left-width: 0;
    border-radius: var(--r-md);
}
.app-shell.is-collapsed .sidebar-link.is-active {
    padding-left: var(--s-3);
}
.app-shell.is-collapsed .sidebar-link span { display: none; }

/* Tooltips på ihopfälld sidebar */
.app-shell.is-collapsed .sidebar-link[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary);
    color: #fff;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--t-fast) 100ms;
    z-index: 100;
}
.app-shell.is-collapsed .sidebar-link:hover[data-tip]::after { opacity: 1; }

.sidebar-bottom {
    border-top: 1px solid var(--border);
    padding: var(--s-3);
    flex-shrink: 0;
}
.sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--text);
    transition: background var(--t-fast);
}
.sidebar-user:hover { background: var(--surface-2); color: var(--text); }
.sidebar-user .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    font-weight: 800;
    flex-shrink: 0;
}
.sidebar-user .user-name { font-weight: 700; font-size: var(--fs-sm); line-height: 1.2; }
.sidebar-user .user-meta { font-size: var(--fs-xs); color: var(--muted); }
.app-shell.is-collapsed .sidebar-user .user-text { display: none; }
.app-shell.is-collapsed .sidebar-user { justify-content: center; padding: var(--s-2); }

.sidebar-toggle {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: 100%;
    padding: var(--s-2) var(--s-3);
    margin-top: var(--s-2);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t-fast);
}
.sidebar-toggle:hover { color: var(--text); background: var(--surface-2); }
.app-shell.is-collapsed .sidebar-toggle .toggle-text { display: none; }
.app-shell.is-collapsed .sidebar-toggle { justify-content: center; }
.app-shell.is-collapsed .sidebar-toggle i { transform: rotate(180deg); }

/* ════════════════════════════════════════════════════════════
   5. TOPBAR
   ════════════════════════════════════════════════════════════ */
.topbar {
    height: var(--topbar-h);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: 0 var(--s-6);
    position: sticky;
    top: 0;
    z-index: 40;
}
.topbar-mobile-toggle { display: none; }
.topbar-title {
    font-size: var(--fs-lg);
    font-weight: 800;
    letter-spacing: -.01em;
    flex: 0 0 auto;
}
.topbar-search {
    flex: 1;
    max-width: 420px;
    height: 38px;
    padding: 0 var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: var(--fs-sm);
    color: var(--text);
    transition: border-color var(--t-fast);
}
.topbar-search::placeholder { color: var(--muted-2); }
.topbar-search:focus {
    border-color: var(--accent);
    box-shadow: var(--sh-focus);
    outline: none;
}
.topbar-spacer { flex: 1; }
.topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-left: auto;
}
.topbar-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
    cursor: pointer;
    position: relative;
    transition: all var(--t-fast);
}
.topbar-icon-btn:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-strong);
}
.topbar-icon-btn .badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--danger);
    color: #fff;
    border-radius: var(--r-pill);
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    min-width: 16px;
    text-align: center;
    line-height: 1.4;
    border: 2px solid var(--bg);
}

/* App chrome polish — navy sidebar + crisp topbar */
.app-main {
    background:
        radial-gradient(circle at 72% -12%, rgba(37,99,235,.10), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.76), rgba(246,248,251,.94));
}

.sidebar {
    background:
        radial-gradient(circle at 88% 2%, rgba(59,130,246,.12), transparent 22%),
        linear-gradient(180deg, var(--navy) 0%, #0a1220 58%, #070d18 100%);
    border-right: 0;
    color: #e5edf8;
    box-shadow: 18px 0 46px rgba(2, 8, 23, .10);
}

.sidebar-brand {
    min-height: 72px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}

.sidebar-brand:hover {
    color: #fff;
}

.brand-mark {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.88);
    font-size: .92rem;
    font-weight: 700;
}

.sidebar-group-title {
    color: rgba(226,232,240,.58);
}

.sidebar-link {
    color: rgba(226,232,240,.78);
    border-left-color: transparent;
}

.sidebar-link i {
    color: rgba(191,219,254,.90);
}

.sidebar-link:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}

.sidebar-link:hover i {
    color: #fff;
}

.sidebar-link.is-active {
    background: linear-gradient(90deg, rgba(37,99,235,.34), rgba(37,99,235,.14));
    color: #fff;
    border-left-color: var(--accent);
}

.sidebar-link.is-active i {
    color: #fff;
}

.sidebar-bottom {
    border-top: 1px solid rgba(255,255,255,.10);
}

.sidebar-user {
    color: #fff;
}

.sidebar-user:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}

.sidebar-user .avatar {
    background: linear-gradient(135deg, #f97316, #fb923c);
    color: #fff;
}

.sidebar-user .user-text {
    flex: 1;
    min-width: 0;
}

.sidebar-user .user-name {
    display: block;
    overflow: hidden;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user .user-meta {
    color: rgba(226,232,240,.66);
}

.sidebar-user-logout {
    color: rgba(226,232,240,.66);
    font-size: 1rem;
}

.sidebar-toggle {
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(226,232,240,.74);
}

.sidebar-toggle:hover {
    border-color: rgba(249,115,22,.42);
    background: rgba(249,115,22,.14);
    color: #fff;
}

.topbar {
    height: 68px;
    background: rgba(255,255,255,.86);
    border-bottom: 1px solid rgba(203,213,225,.72);
    backdrop-filter: blur(14px);
}

.topbar-mobile-toggle {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: #fff;
    color: var(--navy);
}

.topbar-mobile-toggle i {
    font-size: 1.25rem;
}

.topbar-title {
    color: var(--navy);
}

.topbar-search {
    height: 42px;
    max-width: 520px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15,23,42,.035);
}

.topbar-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #fff;
    color: var(--navy);
    box-shadow: 0 8px 20px rgba(15,23,42,.035);
}

.topbar-icon-btn:hover {
    border-color: rgba(249,115,22,.42);
    background: #fff7ed;
    color: var(--accent-2);
}

.topbar-icon-btn .badge-count {
    border-color: #fff;
}

/* Notice drawer */
.notice-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(7,26,51,.42);
    opacity: 0;
    backdrop-filter: blur(4px);
    transition: opacity .22s ease;
}

.notice-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    width: 460px;
    max-width: 100vw;
    background: #fff;
    box-shadow: -28px 0 70px rgba(7,26,51,.24);
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
}

.notice-panel-head {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-4);
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(circle at 96% -40%, rgba(249,115,22,.22), transparent 42%),
        #fff;
    flex-shrink: 0;
}

.notice-panel-title {
    flex: 1;
    color: var(--navy);
    font-size: 1rem;
    font-weight: 900;
}

.notice-panel-back,
.notice-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    color: var(--text-soft);
    cursor: pointer;
}

.notice-panel-back:hover,
.notice-panel-close:hover {
    border-color: var(--border-strong);
    color: var(--navy);
}

.notice-panel-body {
    flex: 1;
    overflow-y: auto;
    background: #f8fafc;
    overscroll-behavior: contain;
}


/* ═══════════════════════ MESSAGE SLIDE-IN PANEL ═══════════════════════
   Speglar notice-panel-mönstret men öppnas via classList ('is-open').
   Innehåller en iframe som laddar ui/messages/index.php?embed=1. */

.message-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .42);
    opacity: 0;
    pointer-events: none;
    display: none;
    transition: opacity .22s ease;
}

.message-overlay.is-open {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

.message-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    width: 720px;
    max-width: 100vw;
    background: #fff;
    box-shadow: -18px 0 42px rgba(15, 23, 42, .16);
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.message-panel.is-open {
    transform: translateX(0);
}

.message-panel[aria-hidden="true"] {
    pointer-events: none;
}

.message-panel[aria-hidden="false"] {
    pointer-events: auto;
}

.message-panel-head {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: #fff;
    flex-shrink: 0;
}

.message-panel-title {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--navy);
    font-size: .95rem;
    font-weight: 800;
}

.message-panel-title i {
    color: #3b82f6;
    font-size: 18px;
    line-height: 1;
}

.message-panel-fullscreen,
.message-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .14s ease, color .14s ease, background .14s ease;
}

.message-panel-fullscreen:hover,
.message-panel-close:hover {
    border-color: var(--border-strong);
    color: var(--navy);
}

.message-panel-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #f4f6fa;
}

#message-panel-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #f4f6fa;
    display: block;
}

@media (max-width: 760px) {
    .message-panel { width: 100vw; }
}

.notice-empty {
    margin: var(--s-4);
    padding: var(--s-8) var(--s-4);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-align: center;
}

.notice-empty.is-error {
    border-color: #fecdd3;
    background: #fff1f2;
    color: var(--danger);
}

.notice-create {
    padding: var(--s-4);
}

.notice-help {
    margin: 0 0 var(--s-3);
    color: var(--muted);
    font-size: var(--fs-sm);
}

.field-hint {
    color: var(--muted);
    font-weight: 500;
}

.notice-actions {
    display: flex;
    gap: var(--s-2);
}

.notice-list-item {
    padding: var(--s-4);
    border-bottom: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
    transition: background var(--t-fast), transform var(--t-fast);
}

.notice-list-item:hover {
    background: #f8fbff;
}

.notice-list-item.is-unread {
    background: #fff7ed;
}

.notice-list-item.is-fresh:not(.is-unread) {
    background: #fff;
}

.notice-list-meta {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: 5px;
    min-width: 0;
}

.notice-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .14);
}

.notice-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #1f4f9e;
    color: #fff;
    font-size: .66rem;
    font-weight: 800;
    line-height: 1;
}

.notice-list-author {
    color: var(--navy);
    font-size: var(--fs-sm);
    font-weight: 850;
}

.notice-list-tag {
    overflow: hidden;
    max-width: 150px;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    background: #eef2ff;
    color: #334155;
    font-size: .68rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice-list-time {
    margin-left: auto;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
}

.notice-list-body {
    overflow: hidden;
    color: var(--text-soft);
    font-size: var(--fs-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice-thread-message {
    margin: var(--s-3) var(--s-4) 0;
    padding: var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: 0 8px 22px rgba(15,23,42,.045);
}

.notice-thread-message.is-root {
    border-color: rgba(249,115,22,.28);
    background: linear-gradient(180deg, #fff, #fffaf6);
}

.notice-thread-author {
    color: var(--navy);
    font-weight: 900;
}

.notice-thread-time {
    margin-top: 2px;
    margin-bottom: var(--s-2);
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 750;
}

.notice-thread-body {
    color: var(--text-soft);
    font-size: var(--fs-sm);
    white-space: pre-wrap;
}

.notice-thread-image {
    width: 100%;
    max-height: 230px;
    margin-top: var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    object-fit: cover;
}

.notice-reply-form {
    display: grid;
    gap: var(--s-2);
    margin: var(--s-4);
    padding: var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: #fff;
}

/* ════════════════════════════════════════════════════════════
   6. PAGE WRAPPER
   ════════════════════════════════════════════════════════════ */
.page {
    flex: 1;
    padding: var(--s-6) var(--s-6) var(--s-12);
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
}
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
    margin-bottom: var(--s-6);
}
.page-header h1 {
    font-size: var(--fs-2xl);
    margin-bottom: var(--s-1);
}
.page-header .page-sub {
    color: var(--muted);
    font-size: var(--fs-sm);
}
.page-header .page-actions {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════
   DASHBOARD — startsidans första vy
   ════════════════════════════════════════════════════════════ */
.dashboard-page {
    max-width: 1360px;
}

.dashboard-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 430px) minmax(170px, auto);
    gap: var(--s-4);
    align-items: stretch;
    margin-bottom: var(--s-4);
    padding: var(--s-6);
    border: 1px solid #dfe7ef;
    border-radius: var(--r-xl);
    background:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.72)),
        linear-gradient(135deg, #e8f2ff 0%, #fff7ed 52%, #f0fdf4 100%);
    box-shadow: var(--sh-md);
    overflow: hidden;
}

.dashboard-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(120deg, rgba(28,25,23,.045) 0 1px, transparent 1px 34px);
    pointer-events: none;
}

.dashboard-hero > * {
    position: relative;
    z-index: 1;
}

.dashboard-hero-main {
    min-width: 0;
}

.dashboard-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--s-2);
    padding: 4px 9px;
    border: 1px solid #bfdbfe;
    border-radius: var(--r-pill);
    background: #eff6ff;
    color: #1d4ed8;
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.dashboard-hero h1 {
    margin-bottom: var(--s-2);
    color: #111827;
    font-size: 2rem;
}

.dashboard-hero p {
    max-width: 62ch;
    color: #4b5563;
    font-size: var(--fs-base);
    font-weight: 600;
}

.dashboard-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-5);
}

.dashboard-focus {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
    padding: var(--s-4);
    border: 1px solid #e5e7eb;
    border-radius: var(--r-lg);
    background: rgba(255,255,255,.82);
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--sh-sm);
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

.dashboard-focus:hover {
    color: var(--text);
    border-color: #cbd5e1;
    box-shadow: var(--sh-md);
    transform: translateY(-1px);
}

.dashboard-focus-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    background: var(--info-soft);
    color: var(--info);
    font-size: 1.1rem;
}

.dashboard-focus-warn .dashboard-focus-icon {
    background: var(--warning-soft);
    color: #b45309;
}

.dashboard-focus-good .dashboard-focus-icon {
    background: var(--success-soft);
    color: var(--success);
}

.dashboard-focus-label {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.dashboard-focus strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: var(--fs-md);
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-focus small {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-focus > .bi {
    color: var(--muted);
    font-size: 1.3rem;
}

.dashboard-class-switcher {
    align-self: end;
    display: grid;
    gap: var(--s-1);
    min-width: 170px;
}

.dashboard-class-switcher label {
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-3);
}

.dashboard-metric {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--sh-sm);
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

.dashboard-metric:hover {
    color: var(--text);
    border-color: var(--border-strong);
    box-shadow: var(--sh-md);
    transform: translateY(-1px);
}

.dashboard-metric-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: 1.1rem;
}

.dashboard-metric strong {
    display: block;
    color: var(--text);
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: 1;
}

.dashboard-metric small {
    display: block;
    margin-top: var(--s-1);
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.dashboard-metric-warn .dashboard-metric-icon {
    background: var(--warning-soft);
    color: #b45309;
}

.dashboard-metric-good .dashboard-metric-icon {
    background: var(--success-soft);
    color: var(--success);
}

.dashboard-metric-info .dashboard-metric-icon {
    background: var(--info-soft);
    color: var(--info);
}

.dashboard-metric-neutral .dashboard-metric-icon {
    background: #f1f5f9;
    color: #475569;
}

.dashboard-checkin-card {
    scroll-margin-top: calc(var(--topbar-h) + var(--s-4));
}

.dashboard-card-stat,
.dashboard-legend-push {
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 800;
}

.dashboard-legend-push {
    margin-left: auto;
}

.dashboard-empty-compact {
    padding: var(--s-8) var(--s-4);
}

@media (max-width: 1180px) {
    .dashboard-hero {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
    }

    .dashboard-class-switcher {
        grid-column: 1 / -1;
        max-width: 260px;
    }

    .dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .dashboard-hero {
        grid-template-columns: 1fr;
        padding: var(--s-5);
    }

    .dashboard-hero h1 {
        font-size: var(--fs-2xl);
    }

    .dashboard-class-switcher {
        max-width: none;
    }

    .dashboard-metrics {
        grid-template-columns: 1fr;
    }

    .dashboard-focus strong,
    .dashboard-focus small {
        white-space: normal;
    }
}

/* Dashboard v2 — mentoröversikt */
.dashboard-page-v2 {
    max-width: 1560px;
    padding-top: var(--s-5);
}

.dash-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-4);
}

.dash-eyebrow {
    color: var(--accent-2);
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.dash-top h1 {
    margin-top: var(--s-1);
    color: #111827;
    font-size: 1.85rem;
}

.dash-top p {
    margin-top: var(--s-1);
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 650;
}

.dash-top-actions {
    display: flex;
    align-items: end;
    gap: var(--s-2);
    flex-wrap: wrap;
}

.dash-class-form {
    display: grid;
    gap: 3px;
    min-width: 150px;
}

.dash-class-form label {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.dash-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-4);
    margin-bottom: var(--s-4);
}

.dash-stat {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: var(--s-4);
    min-height: 112px;
    padding: var(--s-4);
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
}

.dash-stat:hover {
    color: var(--text);
    border-color: #d1d5db;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .075);
}

.dash-stat > i {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.45rem;
}

.dash-stat strong {
    display: block;
    color: #111827;
    font-size: 1.75rem;
    line-height: 1;
}

.dash-stat small,
.dash-stat em {
    display: block;
    font-style: normal;
}

.dash-stat small {
    margin-top: 6px;
    color: #4b5563;
    font-weight: 800;
}

.dash-stat em {
    margin-top: 4px;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 650;
}

.dash-stat-green > i { background: #ecfdf3; color: #159947; }
.dash-stat-orange > i { background: #fff7ed; color: #ea580c; }
.dash-stat-blue > i { background: #eff6ff; color: #2563eb; }
.dash-stat-red > i { background: #fff1f2; color: #e11d48; }

.dash-calendar-card,
.dash-main-card,
.dash-side-card,
.dash-other-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
}

.dash-calendar-card {
    margin-bottom: var(--s-4);
    padding: var(--s-4);
}

.dash-section-head,
.dash-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}

.dash-section-head {
    margin-bottom: var(--s-4);
}

.dash-section-head h2,
.dash-side-head h2 {
    color: #111827;
    font-size: 1.05rem;
}

.dash-section-head p {
    margin-top: 3px;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 650;
}

.dash-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dash-calendar-legend span,
.dash-event {
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
}

.dash-calendar-legend span {
    padding: 3px 8px;
}

.dash-calendar-legend .visit { background: #fff7ed; color: #c2410c; }
.dash-calendar-legend .call { background: #eef2ff; color: #4338ca; }
.dash-calendar-legend .attendance { background: #fff1f2; color: #be123c; }
.dash-calendar-legend .contract { background: #eff6ff; color: #1d4ed8; }

.dash-calendar-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--s-3);
}

.dash-calendar-day {
    min-height: 128px;
    padding: var(--s-3);
    border: 1px solid #eef0f3;
    border-radius: 8px;
    background: #fbfcfe;
}

.dash-calendar-day.is-today {
    border-color: #bfdbfe;
    background: #f8fbff;
}

.dash-calendar-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-2);
}

.dash-calendar-date strong {
    color: #111827;
    font-size: var(--fs-sm);
}

.dash-calendar-date span {
    padding: 2px 7px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: .65rem;
    font-weight: 800;
}

.dash-calendar-items {
    display: grid;
    gap: 6px;
}

.dash-calendar-empty {
    color: #9ca3af;
    font-size: var(--fs-xs);
    font-weight: 650;
}

.dash-event {
    display: grid;
    gap: 1px;
    padding: 6px 8px;
    text-decoration: none;
    border: 1px solid transparent;
}

.dash-event span,
.dash-event small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-event small {
    opacity: .78;
    font-size: .65rem;
}

.dash-event-visit { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.dash-event-call { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.dash-event-attendance { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.dash-event-contract { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }

.dash-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: var(--s-4);
    align-items: start;
}

.dash-main-card {
    overflow: hidden;
}

.dash-main-card > .dash-section-head {
    margin: 0;
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid #e5e7eb;
}

.dash-view-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: #f8fafc;
}

.dash-view-toggle span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 7px;
    color: #6b7280;
    font-size: var(--fs-xs);
    font-weight: 800;
}

.dash-view-toggle .is-active {
    background: #fff;
    color: #111827;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}

.dash-student-table {
    overflow-x: auto;
}

.dash-student-row {
    display: grid;
    grid-template-columns: minmax(230px, 1.3fr) minmax(125px, .75fr) minmax(116px, .7fr) minmax(135px, .78fr) minmax(180px, 1fr) 78px 98px;
    gap: var(--s-3);
    align-items: center;
    min-width: 980px;
    padding: var(--s-3) var(--s-5);
    border-bottom: 1px solid #edf0f3;
}

.dash-student-row:last-child {
    border-bottom: 0;
}

.dash-student-head {
    min-height: 44px;
    padding-top: var(--s-2);
    padding-bottom: var(--s-2);
    background: #f8fafc;
    color: #6b7280;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.dash-student-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
}

.dash-student-name {
    display: block;
    overflow: hidden;
    color: #111827;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-link-button {
    display: block;
    overflow: hidden;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2563eb;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 750;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.dash-link-button:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.dash-muted-line,
.dash-table-muted {
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 650;
}

.dash-table-strong {
    color: #374151;
    font-size: var(--fs-sm);
    font-weight: 800;
}

.dash-today-state,
.dash-period-track,
.dash-icon-cell {
    border: 0;
    background: transparent;
    font: inherit;
}

.dash-today-state {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: var(--s-2);
    width: 100%;
    padding: 0;
    color: #374151;
    text-align: left;
    cursor: pointer;
}

.dash-today-state[disabled],
.dash-period-track[disabled] {
    cursor: default;
    opacity: .65;
}

.dash-today-state i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: .95rem;
}

.dash-today-state strong,
.dash-today-state small {
    display: block;
}

.dash-today-state strong {
    font-size: var(--fs-sm);
    line-height: 1.15;
}

.dash-today-state small {
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 650;
}

.dash-state-present i { background: #16a34a; }
.dash-state-present strong { color: #15803d; }
.dash-state-missing i,
.dash-state-none i { background: #f97316; }
.dash-state-missing strong,
.dash-state-none strong { color: #ea580c; }
.dash-state-absent i { background: #dc2626; }
.dash-state-absent strong { color: #dc2626; }
.dash-state-planned i { background: #94a3b8; }

.dash-period-track {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    width: 100%;
    min-height: 28px;
    padding: 2px 0;
    cursor: pointer;
}

.dash-day {
    width: 9px;
    height: 18px;
    border-radius: 3px;
    background: #e5e7eb;
}

.dash-day-present { background: #16a34a; }
.dash-day-missing { background: #ef4444; }
.dash-day-future { background: #e5e7eb; }
.dash-period-empty { color: var(--muted); }

.dash-icon-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    min-width: 54px;
    padding: 6px 9px;
    border-radius: 999px;
    color: #64748b;
    cursor: pointer;
}

.dash-icon-cell:hover {
    background: #f1f5f9;
    color: #334155;
}

.dash-review-state {
    display: inline-grid;
    justify-items: center;
    gap: 3px;
    width: fit-content;
    min-width: 76px;
    font-size: var(--fs-xs);
    font-weight: 800;
}

.dash-review-state i {
    font-size: 1.3rem;
}

.dash-review-done {
    color: #16a34a;
}

.dash-review-missing {
    color: #f97316;
}

.dash-side {
    display: grid;
    gap: var(--s-4);
}

.dash-side-card {
    overflow: hidden;
}

.dash-side-head {
    padding: var(--s-4);
    border-bottom: 1px solid #e5e7eb;
}

.dash-side-head button {
    border: 0;
    background: transparent;
    color: #2563eb;
    font-weight: 800;
    cursor: pointer;
}

.dash-todo-list,
.dash-notice-list {
    display: grid;
}

.dash-todo {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4);
    border-bottom: 1px solid #edf0f3;
    color: var(--text);
    text-decoration: none;
}

.dash-todo:hover {
    background: #f8fafc;
    color: var(--text);
}

.dash-todo > i,
.dash-todo em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

.dash-todo > i {
    width: 36px;
    height: 36px;
    font-size: 1.05rem;
}

.dash-todo strong,
.dash-todo small {
    display: block;
}

.dash-todo strong {
    color: #374151;
    font-size: var(--fs-sm);
}

.dash-todo small {
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 650;
}

.dash-todo em {
    min-width: 28px;
    height: 28px;
    font-style: normal;
    font-size: var(--fs-xs);
    font-weight: 900;
}

.dash-todo-red > i,
.dash-todo-red em { background: #fee2e2; color: #dc2626; }
.dash-todo-orange > i,
.dash-todo-orange em { background: #ffedd5; color: #ea580c; }
.dash-todo-blue > i,
.dash-todo-blue em { background: #dbeafe; color: #2563eb; }
.dash-todo-gray > i,
.dash-todo-gray em { background: #f1f5f9; color: #475569; }

.dash-notice {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: var(--s-3);
    padding: var(--s-4);
    border: 0;
    border-bottom: 1px solid #edf0f3;
    background: #fff;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.dash-notice:hover {
    background: #f8fafc;
}

.dash-notice strong,
.dash-notice small,
.dash-notice em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-notice strong {
    color: #374151;
    font-size: var(--fs-sm);
}

.dash-notice small {
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--fs-xs);
}

.dash-notice em {
    margin-top: 3px;
    color: #2563eb;
    font-size: .68rem;
    font-style: normal;
    font-weight: 800;
}

.dash-notice time {
    color: #9ca3af;
    font-size: .68rem;
    font-weight: 750;
}

.dash-side-empty {
    padding: var(--s-6);
    color: var(--muted);
    font-size: var(--fs-sm);
    text-align: center;
}

.dash-other-card {
    margin-top: var(--s-4);
    padding: var(--s-4);
}

.dash-other-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid #edf0f3;
    border-radius: 8px;
    background: #edf0f3;
}

.dash-other-list a {
    display: grid;
    gap: 2px;
    padding: var(--s-3);
    background: #fff;
    color: var(--text);
    text-decoration: none;
}

.dash-other-list a:hover {
    background: #f8fafc;
    color: var(--text);
}

.dash-other-list span {
    color: #374151;
    font-size: var(--fs-sm);
    font-weight: 800;
}

.dash-other-list small,
.dash-other-list em {
    overflow: hidden;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-style: normal;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(15, 23, 42, .28);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base);
}

.dash-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    width: 480px;
    max-width: 100vw;
    background: #fff;
    box-shadow: -18px 0 42px rgba(15, 23, 42, .16);
    transform: translateX(100%);
    transition: transform var(--t-base);
}

.dash-drawer-open .dash-drawer-overlay {
    opacity: 1;
    pointer-events: auto;
}

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

.dash-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-5);
    border-bottom: 1px solid #e5e7eb;
}

.dash-drawer-head span {
    color: #2563eb;
    font-size: var(--fs-xs);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.dash-drawer-head h2 {
    margin-top: 3px;
    color: #111827;
    font-size: 1.25rem;
}

.dash-drawer-head button {
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #4b5563;
    cursor: pointer;
}

.dash-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--s-5);
}

.dash-drawer-section {
    margin-bottom: var(--s-5);
}

.dash-drawer-section h3 {
    margin-bottom: var(--s-3);
    color: #111827;
    font-size: var(--fs-md);
}

.dash-drawer-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--s-2);
}

.dash-drawer-summary div {
    padding: var(--s-3);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
}

.dash-drawer-summary small,
.dash-drawer-summary strong {
    display: block;
}

.dash-drawer-summary small {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.dash-drawer-summary strong {
    margin-top: 4px;
    color: #111827;
    font-size: var(--fs-sm);
}

.dash-map-card,
.dash-history-list {
    display: grid;
    gap: var(--s-2);
}

.dash-map-point {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: var(--s-3);
    padding: var(--s-3);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}

.dash-map-point > i {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.dash-map-home > i { background: #eef2ff; color: #4f46e5; }
.dash-map-work > i { background: #ecfdf3; color: #16a34a; }
.dash-map-checkin > i { background: #eff6ff; color: #2563eb; }

.dash-map-point strong,
.dash-map-point small,
.dash-map-point a,
.dash-map-point span {
    display: block;
}

.dash-map-point strong {
    color: #111827;
    font-size: var(--fs-sm);
}

.dash-map-point small,
.dash-map-point span {
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 650;
}

.dash-map-point a {
    margin-top: 4px;
    color: #2563eb;
    font-size: var(--fs-xs);
    font-weight: 850;
}

.dash-history-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.dash-history-row > span {
    width: 10px;
    height: 30px;
    border-radius: 999px;
}

.dash-history-ok > span {
    background: #16a34a;
}

.dash-history-miss > span {
    background: #ef4444;
}

.dash-history-row strong,
.dash-history-row small {
    display: block;
}

.dash-history-row strong {
    color: #111827;
    font-size: var(--fs-sm);
}

.dash-history-row small {
    color: var(--muted);
    font-size: var(--fs-xs);
}

.dash-history-row a {
    color: #2563eb;
    font-size: var(--fs-xs);
    font-weight: 850;
}

.dash-drawer-empty {
    padding: var(--s-6);
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    color: var(--muted);
    text-align: center;
}

.dash-drawer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    padding-top: var(--s-2);
}

@media (max-width: 1180px) {
    .dash-stat-grid,
    .dash-calendar-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-workspace {
        grid-template-columns: 1fr;
    }

    .dash-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-other-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .dash-top {
        align-items: stretch;
        flex-direction: column;
    }

    .dash-top-actions,
    .dash-top-actions .btn,
    .dash-class-form {
        width: 100%;
    }

    .dash-stat-grid,
    .dash-calendar-strip,
    .dash-side,
    .dash-other-list {
        grid-template-columns: 1fr;
    }

    .dash-calendar-legend {
        justify-content: flex-start;
    }

    .dash-main-card > .dash-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .dash-drawer {
        width: 100vw;
    }

    .dash-drawer-summary {
        grid-template-columns: 1fr;
    }
}

.crumb {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    margin-bottom: var(--s-3);
    transition: color var(--t-fast);
}
.crumb:hover { color: var(--text); }

/* ════════════════════════════════════════════════════════════
   7. KORT
   ════════════════════════════════════════════════════════════ */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
    overflow: hidden;
}
.card-h {
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}
.card-h h3 {
    font-size: var(--fs-md);
    font-weight: 800;
    margin: 0;
}
.card-h .card-h-action {
    font-size: var(--fs-sm);
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
}
.card-h .card-h-action:hover { color: var(--accent-2); }
.card-b { padding: var(--s-5); }
.card-b.tight { padding: var(--s-3); }
.card-b.flush { padding: 0; }

/* Card med vänster färg-stripe */
.card-stripe {
    border-left: 4px solid var(--accent);
    padding-left: calc(var(--s-5) - 4px);
}

/* ════════════════════════════════════════════════════════════
   8. KNAPPAR
   ════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 9px 18px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--t-fast);
    white-space: nowrap;
    line-height: 1.2;
}
.btn:focus-visible { box-shadow: var(--sh-focus); }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

.btn-primary {
    background: var(--primary);
    color: #fff !important;
    border-color: var(--primary);
}
.btn-primary:hover { background: var(--primary-2); border-color: var(--primary-2); transform: translateY(-1px); }

.btn-accent {
    background: var(--accent);
    color: #fff !important;
    border-color: var(--accent);
}
.btn-accent:hover { background: var(--accent-2); border-color: var(--accent-2); transform: translateY(-1px); }

.btn-outline {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}
.btn-outline:hover { border-color: var(--text); color: var(--text); }

.btn-ghost {
    background: transparent;
    color: var(--text-soft);
    border-color: transparent;
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.btn-danger {
    background: var(--danger);
    color: #fff !important;
    border-color: var(--danger);
}
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

.btn-sm { padding: 6px 12px; font-size: var(--fs-xs); }
.btn-lg { padding: 13px 22px; font-size: var(--fs-base); }
.btn-block { width: 100%; }

/* ════════════════════════════════════════════════════════════
   9. PILLS (ikon + text — för åtgärder och status)
   ════════════════════════════════════════════════════════════ */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    background: var(--surface-2);
    color: var(--text-soft);
    border: 1px solid var(--border);
}
.pill i { font-size: .85rem; }
.pill-attendance { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.pill-logbook    { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.pill-review     { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }
.pill-visit      { background: #ffedd5; color: #c2410c; border-color: #fed7aa; }
.pill-contract   { background: #e0e7ff; color: #4338ca; border-color: #c7d2fe; }
.pill-success    { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.pill-warning    { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.pill-danger     { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.pill-info       { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.pill-muted      { background: #f5f5f4; color: #57534e; border-color: #e7e5e4; }

a.pill { text-decoration: none; transition: filter var(--t-fast); }
a.pill:hover { filter: brightness(.96); }

/* Klickbar pill (action-pill, t.ex. snabbåtgärder) */
.pill-action {
    padding: 7px 14px;
    font-size: var(--fs-sm);
}

/* ════════════════════════════════════════════════════════════
   10. BADGES (status-indikatorer)
   ════════════════════════════════════════════════════════════ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1.4;
}
.badge-success { background: var(--success-soft); color: #15803d; }
.badge-warning { background: var(--warning-soft); color: #b45309; }
.badge-danger  { background: var(--danger-soft);  color: #b91c1c; }
.badge-info    { background: var(--info-soft);    color: #1d4ed8; }
.badge-muted   { background: #f5f5f4; color: #57534e; }

/* ════════════════════════════════════════════════════════════
   11. AVATARS
   ════════════════════════════════════════════════════════════ */
.avatar {
    border-radius: 50%;
    background: linear-gradient(135deg, #fed7aa, #fdba74);
    color: #c2410c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
    overflow: hidden;
    font-feature-settings: 'tnum';
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-md { width: 38px; height: 38px; font-size: 13px; }
.avatar-lg { width: 56px; height: 56px; font-size: 18px; border-radius: 14px; }
.avatar-xl { width: 88px; height: 88px; font-size: 28px; border-radius: 18px; }

/* Olika färgvariationer för avatarer (deterministiskt baserat på initial) */
.avatar.av-1 { background: linear-gradient(135deg,#fed7aa,#fdba74); color:#c2410c; }
.avatar.av-2 { background: linear-gradient(135deg,#bfdbfe,#93c5fd); color:#1e40af; }
.avatar.av-3 { background: linear-gradient(135deg,#bbf7d0,#86efac); color:#166534; }
.avatar.av-4 { background: linear-gradient(135deg,#ddd6fe,#c4b5fd); color:#5b21b6; }
.avatar.av-5 { background: linear-gradient(135deg,#fbcfe8,#f9a8d4); color:#9d174d; }
.avatar.av-6 { background: linear-gradient(135deg,#fef08a,#fde047); color:#854d0e; }

/* ════════════════════════════════════════════════════════════
   12. FORMULÄR
   ════════════════════════════════════════════════════════════ */
.field { margin-bottom: var(--s-4); }
.field-label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--s-1);
    letter-spacing: .01em;
}
.field-label .req { color: var(--danger); margin-left: 2px; }
.field-help { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s-1); }
.field-error { font-size: var(--fs-xs); color: var(--danger); margin-top: var(--s-1); font-weight: 600; }

.input, .select, .textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-sm);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--sh-focus);
}
.textarea { min-height: 90px; resize: vertical; line-height: var(--lh-base); }
.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2378716c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
}
@media (max-width: 720px) { .field-row { grid-template-columns: 1fr; } }

/* Checkbox/Radio */
.check-label {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.check-label input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ════════════════════════════════════════════════════════════
   13. TABELLER
   ════════════════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; }
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.table thead th {
    text-align: left;
    padding: var(--s-3) var(--s-4);
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.table tbody td {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }

/* ════════════════════════════════════════════════════════════
   14. ROW (label/value-par på detaljsidor)
   ════════════════════════════════════════════════════════════ */
.detail-row {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    border-top: 1px solid var(--border);
    align-items: flex-start;
}
.detail-row:first-child { border-top: 0; padding-top: 0; }
.detail-row > i { color: var(--muted); font-size: 1rem; margin-top: 2px; }
.detail-row .lbl {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.detail-row .v { font-size: var(--fs-sm); font-weight: 600; margin-top: 1px; }
.detail-row .v small { display: block; font-weight: 500; color: var(--muted); font-size: var(--fs-xs); margin-top: 1px; }

/* ════════════════════════════════════════════════════════════
   15. EMPTY STATES
   ════════════════════════════════════════════════════════════ */
.empty {
    padding: var(--s-12) var(--s-6);
    text-align: center;
    color: var(--muted);
}
.empty .empty-icon {
    font-size: 2rem;
    color: var(--muted-2);
    margin-bottom: var(--s-3);
    display: block;
}
.empty h3 {
    font-size: var(--fs-md);
    color: var(--text);
    margin-bottom: var(--s-2);
}
.empty p { font-size: var(--fs-sm); }
.empty.empty-good { color: var(--success); }
.empty.empty-good .empty-icon { color: var(--success); }

/* ════════════════════════════════════════════════════════════
   16. PROGRESS
   ════════════════════════════════════════════════════════════ */
.progress {
    height: 8px;
    background: var(--surface-2);
    border-radius: var(--r-pill);
    overflow: hidden;
}
.progress > div {
    height: 100%;
    transition: width var(--t-slow);
    border-radius: var(--r-pill);
}
.progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--muted);
    margin-top: var(--s-1);
}
.progress.green > div  { background: var(--success); }
.progress.amber > div  { background: var(--warning); }
.progress.red > div    { background: var(--danger); }

/* Närvaro-bar med procent inbyggt */
.attendance-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.attendance-bar .progress { flex: 1; height: 6px; }
.attendance-bar .att-pct {
    font-size: var(--fs-xs);
    font-weight: 800;
    min-width: 40px;
    text-align: right;
}
.attendance-bar.green .att-pct { color: var(--success); }
.attendance-bar.amber .att-pct { color: var(--warning); }
.attendance-bar.red   .att-pct { color: var(--danger); }

/* ════════════════════════════════════════════════════════════
   17. STATS (för statistik-sidan)
   ════════════════════════════════════════════════════════════ */
.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-4) var(--s-5);
}
.stat-label {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}
.stat-value {
    font-size: var(--fs-3xl);
    font-weight: 800;
    line-height: 1;
    margin-top: var(--s-2);
    letter-spacing: -.02em;
}
.stat-delta { font-size: var(--fs-xs); margin-top: var(--s-1); font-weight: 600; }
.stat-delta.up { color: var(--success); }
.stat-delta.down { color: var(--danger); }

/* ════════════════════════════════════════════════════════════
   18. TIMELINE
   ════════════════════════════════════════════════════════════ */
.timeline-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    border-left: 4px solid transparent;
    transition: background var(--t-fast);
}
.timeline-item:hover { background: var(--surface-2); }
.timeline-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .85rem;
}
.timeline-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-bottom: var(--s-1);
}
.timeline-title { font-weight: 800; font-size: var(--fs-sm); }
.timeline-title small { font-weight: 500; color: var(--muted); margin-left: var(--s-2); }
.timeline-date {
    font-size: 10px;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}
.timeline-body {
    font-size: var(--fs-sm);
    color: var(--text-soft);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ════════════════════════════════════════════════════════════
   19. TOOLTIP (snabb)
   ════════════════════════════════════════════════════════════ */
[data-tip] { position: relative; }
[data-tip]:hover::before {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    padding: 5px 9px;
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    transition: opacity var(--t-fast) 100ms;
}

/* ════════════════════════════════════════════════════════════
   20. FLASH / TOASTS
   ════════════════════════════════════════════════════════════ */
.flash {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    margin-bottom: var(--s-4);
    font-size: var(--fs-sm);
    font-weight: 600;
    border: 1px solid transparent;
}
.flash.flash-ok      { background: var(--success-soft); color: #15803d; border-color: #bbf7d0; }
.flash.flash-warn    { background: var(--warning-soft); color: #b45309; border-color: #fde68a; }
.flash.flash-error   { background: var(--danger-soft);  color: #b91c1c; border-color: #fecaca; }
.flash.flash-info    { background: var(--info-soft);    color: #1d4ed8; border-color: #bfdbfe; }

/* ════════════════════════════════════════════════════════════
   21. UTILITY-KLASSER (sparsamt)
   ════════════════════════════════════════════════════════════ */
.muted { color: var(--muted); }
.text-soft { color: var(--text-soft); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-accent { color: var(--accent-2); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--s-1); }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }

.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }

.grid { display: grid; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }

@media (max-width: 720px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Mobil-overlay — DOLD på desktop (annars stjäl den grid-cellen) */
.sidebar-overlay { display: none; }

/* ════════════════════════════════════════════════════════════
   24. STUDENT-ROW (kompakt rad i listor)
   ════════════════════════════════════════════════════════════ */
.student-row {
    display: grid;
    grid-template-columns: auto 1fr 1.3fr auto auto auto;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: background var(--t-fast);
}
.student-row:last-child { border-bottom: 0; }
.student-row:hover { background: var(--surface-2); color: var(--text); }
.student-row .student-name {
    font-weight: 500;
    font-size: var(--fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
}
.student-row { cursor: pointer; }
.student-row .student-workplace {
    font-size: var(--fs-xs);
    overflow: hidden;
    color: var(--muted);
}
.student-row .student-workplace > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .student-row { grid-template-columns: auto 1fr auto; }
    .student-row .student-workplace,
    .student-row .student-att { display: none; }
}

/* ════════════════════════════════════════════════════════════
   25. FILTER-CHIPS
   ════════════════════════════════════════════════════════════ */
.filter-chips {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all var(--t-fast);
}
.chip:hover { color: var(--text); border-color: var(--border-strong); }
.chip.is-active { background: var(--primary); color: #fff; }
.chip span {
    background: rgba(0,0,0,.08);
    border-radius: var(--r-pill);
    padding: 0 6px;
    font-size: 10px;
}
.chip.is-active span { background: rgba(255,255,255,.18); }

/* ════════════════════════════════════════════════════════════
   26. ACTION-ITEM (rad i Kräver åtgärd / Denna vecka / Trender)
   ════════════════════════════════════════════════════════════ */
.action-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: background var(--t-fast);
}
.action-item:last-child { border-bottom: 0; }
.action-item:hover { background: var(--surface-2); color: var(--text); }
.action-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    background: var(--warning-soft);
    color: var(--warning);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.action-body { flex: 1; min-width: 0; }
.action-title {
    font-weight: 700;
    font-size: var(--fs-sm);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.action-meta {
    font-size: var(--fs-xs);
    color: var(--muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.action-date {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.action-date-day { font-size: var(--fs-md); font-weight: 800; color: var(--text); }
.action-date-mon {
    font-size: 9px;
    font-weight: 800;
    color: var(--muted);
    letter-spacing: .05em;
    margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════
   27. CHECK-IN GRID (dashboard)
   ════════════════════════════════════════════════════════════ */
.checkin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}
.checkin-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-2);
    border-radius: var(--r-md);
    transition: background var(--t-fast);
    text-decoration: none;
}
.checkin-cell:hover { background: var(--surface-2); }
.checkin-cell .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px transparent; }
.checkin-cell.in       .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--success); }
.checkin-cell.pending  .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--warning); opacity: .85; }
.checkin-cell.sick     .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger); opacity: .6; }
.checkin-cell.absent   .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger); opacity: .5; }
.checkin-cell .status-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--muted-2);
}
.checkin-cell.in .status-dot      { background: var(--success); }
.checkin-cell.pending .status-dot { background: var(--warning); }
.checkin-cell.sick .status-dot    { background: var(--danger); }
.checkin-cell.absent .status-dot  { background: var(--danger); }
.checkin-legend {
    display: flex;
    gap: var(--s-4);
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    color: var(--text-soft);
    font-weight: 600;
    align-items: center;
}
.checkin-legend .legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}
.legend-dot.in       { background: var(--success); }
.legend-dot.pending  { background: var(--warning); }
.legend-dot.sick     { background: var(--danger); }

/* ════════════════════════════════════════════════════════════
   22. RESPONSIV — MOBIL SIDEBAR
   ════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
    .sidebar-overlay { display: block; }
    .app-shell {
        grid-template-columns: 1fr;
    }
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--sidebar-w);
        transform: translateX(-100%);
        transition: transform var(--t-base);
        box-shadow: var(--sh-xl);
    }
    .app-shell.is-mobile-open .sidebar { transform: translateX(0); }
    .topbar-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        background: var(--surface);
        color: var(--text);
        cursor: pointer;
    }
    .topbar { padding: 0 var(--s-4); }
    .topbar-search { display: none; }
    .page { padding: var(--s-4); }

    /* Mobile overlay när sidebar öppen */
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(28,25,23,.4);
        z-index: 45;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--t-base);
    }
    .app-shell.is-mobile-open .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }
}

/* På mobil ignorerar vi collapsed-state */
@media (max-width: 980px) {
    .app-shell.is-collapsed {
        grid-template-columns: 1fr;
    }
    .app-shell.is-collapsed .sidebar .brand-text,
    .app-shell.is-collapsed .sidebar .brand-tagline,
    .app-shell.is-collapsed .sidebar-link span,
    .app-shell.is-collapsed .sidebar-group-title,
    .app-shell.is-collapsed .sidebar-user .user-text,
    .app-shell.is-collapsed .sidebar-toggle .toggle-text { display: revert; }
}

/* ════════════════════════════════════════════════════════════
   Dashboard polish — mentoröversikt med calendar + drawer
   ════════════════════════════════════════════════════════════ */
.dashboard-page-v2 {
    max-width: 1580px;
    padding-top: var(--s-5);
}

.dash-top {
    align-items: center;
    padding: var(--s-5);
    border: 1px solid rgba(203,213,225,.70);
    border-radius: 24px;
    background:
        radial-gradient(circle at 88% -18%, rgba(249,115,22,.18), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 42px rgba(15,23,42,.06);
}

.dash-eyebrow {
    color: var(--accent-2);
}

.dash-top h1,
.dash-section-head h2,
.dash-side-head h2,
.dash-student-name,
.dash-table-strong,
.dash-review-state,
.dash-drawer-head h2 {
    color: var(--navy);
}

.dash-top p {
    color: var(--muted);
}

.dash-flash {
    margin-bottom: var(--s-4);
    padding: var(--s-3) var(--s-4);
    border: 1px solid rgba(249,115,22,.24);
    border-radius: 16px;
    background: #fff7ed;
    color: #9a3412;
    font-size: var(--fs-sm);
    font-weight: 800;
}

.dash-class-form .select {
    min-height: 42px;
    border-radius: 14px;
    background: #fff;
}

.dash-stat-grid {
    gap: var(--s-3);
}

.dash-stat {
    min-height: 104px;
    border-color: rgba(203,213,225,.78);
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(15,23,42,.055);
}

.dash-stat > i {
    border-radius: 18px;
}

.dash-stat:hover {
    border-color: rgba(249,115,22,.34);
    transform: translateY(-2px);
}

.dash-stat strong {
    color: var(--navy);
}

.dash-quick-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: var(--s-4);
    align-items: stretch;
    margin-bottom: var(--s-4);
}

.dash-presence-card,
.dash-month-card,
.dash-calendar-card,
.dash-main-card,
.dash-side-card,
.dash-other-card {
    border: 1px solid rgba(203,213,225,.78);
    border-radius: 22px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 42px rgba(15,23,42,.055);
}

.dash-presence-card {
    margin-bottom: 0;
    padding: var(--s-4);
}

.dash-month-card {
    padding: var(--s-4);
    background:
        radial-gradient(circle at 90% 0%, rgba(249,115,22,.12), transparent 34%),
        #fff;
}

.dash-presence-score {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--r-pill);
    background: #ecfdf5;
    color: #047857;
    font-weight: 850;
}

.dash-presence-score strong {
    font-size: var(--fs-lg);
}

.dash-presence-score span {
    font-size: var(--fs-xs);
}

.dash-presence-groups {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--s-3);
}

.dash-presence-group {
    min-width: 0;
    padding: var(--s-3);
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #f8fafc;
}

.dash-presence-label {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
    color: var(--text-soft);
    font-size: var(--fs-xs);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.dash-presence-label span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--success);
}

.dash-presence-label strong {
    margin-left: auto;
    color: var(--navy);
}

.dash-presence-warn .dash-presence-label span { background: var(--warning); }
.dash-presence-bad .dash-presence-label span { background: var(--danger); }

.dash-presence-people {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.dash-presence-people em {
    color: var(--muted);
    font-size: var(--fs-sm);
    font-style: normal;
    font-weight: 700;
}

.dash-presence-person {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s-2);
    max-width: 210px;
    padding: 7px 10px 7px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    cursor: pointer;
    text-align: left;
    box-shadow: 0 8px 16px rgba(15,23,42,.035);
}

.dash-presence-person:hover {
    border-color: rgba(249,115,22,.36);
    background: #fffaf6;
}

.dash-presence-person strong,
.dash-presence-person small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-presence-person strong {
    font-size: var(--fs-xs);
    font-weight: 900;
}

.dash-presence-person small {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
}

.dash-month-card .dash-section-head {
    margin-bottom: var(--s-3);
}

.dash-month-card .dash-section-head h2 {
    font-size: 1rem;
}

.dash-month-card .dash-section-head p {
    max-width: 34ch;
}

.dash-month-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #f8fafc;
}

.dash-month-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: var(--fs-xs);
    font-weight: 900;
    text-decoration: none;
}

.dash-month-nav a:hover {
    background: #fff;
    color: var(--accent-2);
    box-shadow: 0 6px 14px rgba(15,23,42,.05);
}

.dash-month-weekdays,
.dash-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.dash-month-weekdays {
    gap: 3px;
    margin-bottom: 5px;
}

.dash-month-weekdays span {
    color: var(--muted);
    font-size: .62rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dash-month-grid {
    gap: 4px;
}

.dash-month-day {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 42px;
    padding: 5px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #f8fafc;
    color: var(--navy);
    font: inherit;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

.dash-month-day:hover {
    color: var(--navy);
    border-color: rgba(249,115,22,.38);
    background: #fff7ed;
}

.dash-month-day span {
    position: relative;
    z-index: 1;
    font-size: .78rem;
    font-weight: 850;
    line-height: 1;
}

.dash-month-day em {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 6px;
    font-style: normal;
}

.dash-month-day.is-muted {
    opacity: .42;
}

.dash-month-day.is-apl {
    background: linear-gradient(180deg, rgba(219,234,254,.68), rgba(239,246,255,.72));
}

.dash-month-day.is-apl::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 9px;
    background: rgba(37,99,235,.055);
}

.dash-month-day.is-today {
    border-color: rgba(249,115,22,.62);
    box-shadow: inset 0 0 0 1px rgba(249,115,22,.28);
}

.dash-month-day.has-items span {
    color: var(--navy);
}

.dash-month-dot {
    width: 5px;
    height: 5px;
    display: inline-block;
    border-radius: 50%;
    background: var(--muted-2);
}

.dash-month-dot-visit { background: var(--accent); }
.dash-month-dot-call { background: #4f46e5; }
.dash-month-dot-attendance { background: #e11d48; }
.dash-month-dot-contract { background: #2563eb; }

.dash-month-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: var(--s-3);
}

.dash-month-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border-radius: var(--r-pill);
    color: var(--muted);
    font-size: .62rem;
    font-weight: 900;
}

.dash-month-legend span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted-2);
}

.dash-month-legend .apl {
    background: #eff6ff;
    color: #1d4ed8;
}

.dash-month-legend .apl::before {
    border-radius: 2px;
    background: #bfdbfe;
}

.dash-month-legend .visit::before { background: var(--accent); }
.dash-month-legend .call::before { background: #4f46e5; }
.dash-month-legend .attendance::before { background: #e11d48; }
.dash-month-legend .contract::before { background: #2563eb; }

.dash-event-overlay {
    position: fixed;
    inset: 0;
    z-index: 1004;
    background: rgba(7,26,51,.38);
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(4px);
    transition: opacity var(--t-base);
}

.dash-event-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1005;
    display: flex;
    flex-direction: column;
    width: 430px;
    max-width: 100vw;
    background: #f8fafc;
    box-shadow: -28px 0 70px rgba(7,26,51,.24);
    transform: translateX(100%);
    transition: transform var(--t-base);
}

.dash-event-open .dash-event-overlay {
    opacity: 1;
    pointer-events: auto;
}

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

.dash-event-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-5);
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(circle at 92% -28%, rgba(249,115,22,.18), transparent 34%),
        #fff;
}

.dash-event-head span {
    color: var(--accent-2);
    font-size: var(--fs-xs);
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.dash-event-head h2 {
    margin-top: 3px;
    color: var(--navy);
    font-size: 1.2rem;
}

.dash-event-head p {
    margin-top: 4px;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 750;
}

.dash-event-head button {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #fff;
    color: var(--text-soft);
    cursor: pointer;
}

.dash-event-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--s-5);
}

.dash-event-existing {
    display: grid;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
}

.dash-event-existing-title {
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.dash-event-existing-item,
.dash-event-empty {
    display: block;
    padding: var(--s-3);
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #fff;
    color: var(--navy);
    font-size: var(--fs-sm);
    font-weight: 850;
    text-decoration: none;
}

.dash-event-existing-item:hover {
    color: var(--accent-2);
    border-color: rgba(249,115,22,.32);
}

.dash-event-existing-visit { border-left: 4px solid var(--accent); }
.dash-event-existing-call { border-left: 4px solid #4f46e5; }
.dash-event-existing-attendance { border-left: 4px solid #e11d48; }
.dash-event-existing-contract { border-left: 4px solid #2563eb; }

.dash-event-empty {
    color: var(--muted);
    font-weight: 750;
}

.dash-event-form {
    display: grid;
    gap: var(--s-4);
}

.dash-event-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
}

.dash-event-type-grid label {
    cursor: pointer;
}

.dash-event-type-grid input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dash-event-type-grid span {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 46px;
    padding: var(--s-3);
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #fff;
    color: var(--text-soft);
    font-size: var(--fs-sm);
    font-weight: 850;
}

.dash-event-type-grid i {
    color: var(--accent-2);
}

.dash-event-type-grid input:checked + span {
    border-color: rgba(249,115,22,.45);
    background: #fff7ed;
    color: var(--navy);
    box-shadow: inset 0 0 0 1px rgba(249,115,22,.18);
}

.dash-event-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.dash-calendar-card {
    padding: var(--s-5);
    background:
        linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.dash-calendar-day {
    min-height: 138px;
    border-color: rgba(203,213,225,.72);
    border-radius: 18px;
    background: #fff;
}

.dash-calendar-day.is-today {
    border-color: rgba(249,115,22,.45);
    background: #fff7ed;
}

.dash-event {
    border-radius: 13px;
}

.dash-workspace {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.dash-main-card {
    overflow: hidden;
}

.dash-main-card > .dash-section-head,
.dash-side-head {
    padding: var(--s-5);
}

.dash-student-row {
    grid-template-columns: minmax(240px, 1.25fr) minmax(130px, .75fr) minmax(122px, .68fr) minmax(142px, .82fr) minmax(196px, 1fr) 82px 98px;
    border-bottom-color: rgba(226,232,240,.86);
}

.dash-student-row:not(.dash-student-head):hover {
    background: #f8fbff;
}

.dash-student-head {
    background: #f1f5f9;
    color: #64748b;
}

.dash-link-button {
    color: #1d4ed8;
}

.dash-period-track {
    min-height: 34px;
    padding: 5px 7px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
}

.dash-period-track:hover {
    border-color: rgba(249,115,22,.34);
    background: #fffaf6;
}

.dash-day {
    width: 10px;
    height: 17px;
    border-radius: 4px;
}

.dash-day-present { background: #16a34a; }
.dash-day-missing { background: #ef4444; }
.dash-day-future { background: #dbe2ea; }

.dash-icon-cell {
    border: 1px solid transparent;
    background: #f8fafc;
}

.dash-icon-cell:hover {
    border-color: var(--border);
    background: #fff;
}

.dash-side-card {
    overflow: hidden;
}

.dash-latest-notices .dash-side-head {
    align-items: center;
}

.dash-unread-badge {
    border: 0;
    border-radius: var(--r-pill);
    background: #e8f0ff;
    color: #2f5fb3;
    font-size: .72rem;
    font-weight: 700;
    padding: 5px 9px;
    cursor: pointer;
}

.dash-latest-notices .dash-notice-list {
    display: grid;
}

.dash-latest-notices .dash-notice {
    grid-template-columns: 10px minmax(0, 1fr) auto;
    padding: 13px 16px;
    background: #fff;
}

.dash-latest-notices .dash-notice.is-unread {
    background: #f7fbff;
}

.dash-notice-dot {
    width: 7px;
    height: 7px;
    margin-top: 7px;
    border-radius: 50%;
    background: #cbd5e1;
}

.dash-notice.is-unread .dash-notice-dot {
    background: #2f6fe4;
    box-shadow: 0 0 0 4px rgba(47,111,228,.10);
}

.dash-notice-footer {
    display: flex;
    gap: var(--s-2);
    padding: var(--s-3);
    border-top: 1px solid var(--border);
    background: #f8fafc;
}

.dash-notice-footer .btn {
    flex: 1;
    justify-content: center;
}

.dash-todo {
    border-bottom-color: rgba(226,232,240,.86);
}

.dash-todo:hover {
    background: #f8fbff;
}

.dash-focus-card {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-5);
    background:
        radial-gradient(circle at 92% 0%, rgba(249,115,22,.16), transparent 34%),
        linear-gradient(180deg, #fff, #f8fbff);
}

.dash-focus-card .dash-focus-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 1.25rem;
}

.dash-focus-card.dash-focus-warn .dash-focus-icon {
    background: #fff7ed;
    color: var(--accent-2);
}

.dash-focus-card.dash-focus-good .dash-focus-icon {
    background: #ecfdf5;
    color: var(--success);
}

.dash-focus-card span {
    color: var(--accent-2);
    font-size: var(--fs-xs);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.dash-focus-card h2 {
    margin-top: 4px;
    color: var(--navy);
    font-size: 1.12rem;
}

.dash-focus-card p {
    margin-top: 6px;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 650;
}

.dash-focus-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.dash-other-card {
    background: rgba(255,255,255,.78);
}

.dash-other-list {
    border-color: rgba(226,232,240,.88);
    background: rgba(226,232,240,.88);
}

.dash-drawer-overlay {
    z-index: 1002;
    background: rgba(7,26,51,.42);
    backdrop-filter: blur(4px);
}

.dash-drawer {
    z-index: 1003;
    width: 540px;
    background: #f8fafc;
    box-shadow: -28px 0 70px rgba(7,26,51,.24);
}

.dash-drawer-head {
    padding: var(--s-5);
    border-bottom-color: var(--border);
    background:
        radial-gradient(circle at 92% -28%, rgba(249,115,22,.18), transparent 34%),
        #fff;
}

.dash-drawer-head span {
    color: var(--accent-2);
}

.dash-drawer-head button {
    border-radius: 13px;
}

.dash-drawer-body {
    padding: var(--s-5);
}

.dash-drawer-hero {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
    padding: var(--s-4);
    border: 1px solid var(--border);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15,23,42,.055);
}

.dash-drawer-avatar {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(135deg, #dbeafe, #eef2ff);
    color: var(--navy);
    font-size: 1.1rem;
    font-weight: 950;
    overflow: hidden;
}

.dash-drawer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dash-drawer-kickerline {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 850;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}

.dash-drawer-hero h3 {
    overflow: hidden;
    margin-top: 3px;
    color: var(--navy);
    font-size: 1.18rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-drawer-hero p {
    margin-top: 3px;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 650;
}

.dash-status-pill {
    padding: 7px 10px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 950;
    white-space: nowrap;
}

.dash-status-ok { background: #dcfce7; color: #15803d; }
.dash-status-warn { background: #ffedd5; color: #c2410c; }
.dash-status-bad { background: #fee2e2; color: #b91c1c; }

.dash-drawer-summary div,
.dash-map-point,
.dash-history-row,
.dash-drawer-empty {
    border-radius: 16px;
    background: #fff;
}

.dash-map-preview {
    position: relative;
    min-height: 190px;
    margin-bottom: var(--s-3);
    overflow: hidden;
    border: 1px solid #bfdbfe;
    border-radius: 22px;
    background:
        linear-gradient(90deg, rgba(37,99,235,.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(37,99,235,.08) 1px, transparent 1px),
        radial-gradient(circle at 32% 34%, rgba(22,163,74,.18), transparent 18%),
        radial-gradient(circle at 70% 56%, rgba(249,115,22,.16), transparent 20%),
        linear-gradient(135deg, #eff6ff, #f8fafc);
    background-size: 32px 32px, 32px 32px, auto, auto, auto;
}

.dash-map-preview::after {
    content: "";
    position: absolute;
    inset: 24px -20px auto 28px;
    height: 72px;
    border-top: 8px solid rgba(37,99,235,.20);
    border-radius: 50%;
    transform: rotate(-13deg);
}

.dash-map-pin {
    position: absolute;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--navy);
    font-size: var(--fs-xs);
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(15,23,42,.12);
}

.dash-map-pin i {
    color: var(--accent-2);
}

.dash-map-pin-home {
    left: 12%;
    top: 24%;
}

.dash-map-pin-work {
    right: 11%;
    top: 38%;
}

.dash-map-pin-checkin {
    left: 43%;
    bottom: 18%;
}

.dash-map-pin.is-muted {
    opacity: .45;
    filter: grayscale(.35);
}

.dash-map-point {
    border-color: var(--border);
}

.dash-map-point > i {
    border-radius: 14px;
}

.dash-history-row {
    border-color: var(--border);
}

@media (max-width: 1180px) {
    .dash-quick-row,
    .dash-presence-groups,
    .dash-workspace {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .dash-top,
    .dash-presence-card,
    .dash-month-card,
    .dash-calendar-card {
        border-radius: 18px;
        padding: var(--s-4);
    }

    .dash-presence-groups {
        grid-template-columns: 1fr;
    }

    .dash-presence-score {
        width: 100%;
        justify-content: center;
    }

    .dash-drawer {
        width: 100vw;
    }

    .dash-drawer-hero {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .dash-status-pill {
        grid-column: 1 / -1;
        width: fit-content;
    }

    .dash-month-day {
        min-height: 38px;
        border-radius: 10px;
    }
}

/* Calm dashboard pass */
.dashboard-page-v2 {
    max-width: 1500px;
}

.dashboard-page-v2,
.dashboard-page-v2 button,
.dashboard-page-v2 input,
.dashboard-page-v2 select,
.dashboard-page-v2 textarea {
    font-weight: 500;
}

.dash-top,
.dash-stat,
.dash-presence-card,
.dash-month-card,
.dash-main-card,
.dash-side-card,
.dash-other-card {
    border-color: #d7e1ed;
    box-shadow: 0 14px 34px rgba(15,23,42,.045);
}

.dash-top {
    padding: 18px 22px;
    background: #fff;
}

.dash-top h1 {
    font-size: 1.8rem;
    font-weight: 750;
}

.dash-top p,
.dash-section-head p,
.dash-table-muted,
.dash-presence-people em {
    color: #6f7c8f;
}

.dash-stat {
    min-height: 92px;
    border-radius: 18px;
}

.dash-stat strong {
    font-size: 1.48rem;
    font-weight: 750;
}

.dash-stat small,
.dash-stat em,
.dash-section-head h2,
.dash-side-head h2,
.dash-presence-label,
.dash-student-name,
.dash-table-strong,
.dash-review-state,
.dash-month-nav a,
.dash-month-day span,
.dash-notice strong,
.dash-notice em,
.dash-today-state strong {
    font-weight: 650;
}

.dash-stat-green > i { background: #edf8f2; color: #2f8d63; }
.dash-stat-orange > i { background: #f8f2e8; color: #b7791f; }
.dash-stat-blue > i { background: #edf4ff; color: #2f6fe4; }
.dash-stat-red > i { background: #fbeef2; color: #c2415b; }

.dash-presence-group,
.dash-period-track,
.dash-month-day {
    background: #f7f9fc;
}

.dash-month-card {
    background: #fff;
}

.dash-month-day:hover,
.dash-period-track:hover,
.dash-presence-person:hover {
    border-color: #b8c8dc;
    background: #f8fbff;
}

.dash-month-day.is-apl {
    background: linear-gradient(180deg, rgba(232,240,255,.86), rgba(247,249,252,.94));
}

.dash-month-day.is-apl::before {
    background: rgba(47,111,228,.045);
}

.dash-month-day.is-today {
    border-color: #7ea4ec;
    box-shadow: inset 0 0 0 1px rgba(47,111,228,.20);
}

.dash-month-dot-visit { background: #78909c; }
.dash-month-dot-call { background: #5b6fc7; }
.dash-month-dot-attendance { background: #c85d6a; }
.dash-month-dot-contract { background: #4b7bd9; }

.dash-month-legend .visit::before { background: #78909c; }
.dash-month-legend .call::before { background: #5b6fc7; }
.dash-month-legend .attendance::before { background: #c85d6a; }
.dash-month-legend .contract::before { background: #4b7bd9; }

.dash-link-button,
.dash-map-point a,
.dash-history-row a {
    color: #2f6fe4;
}

.dash-side-head button:not(.dash-unread-badge):not(.dash-heading-button) {
    color: #2f6fe4;
}

.btn-primary {
    background: #111827;
    border-color: #111827;
}

.btn-accent {
    background: #2f6fe4;
    border-color: #2f6fe4;
}

.btn-accent:hover {
    background: #245cc4;
    border-color: #245cc4;
}

/* Compact calm shell/dashboard refinements */
.sidebar-user .avatar {
    background: rgba(255,255,255,.10);
    color: #fff;
}

.topbar-icon-btn:hover {
    border-color: #c7d7ec;
    background: #f5f8fc;
    color: #245cc4;
}

.dashboard-page-v2 {
    padding-top: 18px;
}

.dash-top {
    margin-bottom: 12px;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.dash-top h1 {
    font-size: 1.42rem;
}

.dash-top p {
    margin-top: 2px;
    font-size: .8rem;
}

.dash-class-form {
    min-width: 128px;
}

.dash-class-form label {
    color: #7b8798;
    font-size: .64rem;
    font-weight: 650;
}

.dash-class-form .select {
    min-height: 38px;
    border-radius: 13px;
}

.dash-stat-grid {
    gap: 12px;
    margin-bottom: 12px;
}

.dash-stat {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 78px;
    padding: 12px 14px;
    border-radius: 17px;
}

.dash-stat > i {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    font-size: 1.08rem;
}

.dash-stat small {
    margin-top: 4px;
    font-size: .76rem;
}

.dash-stat em {
    margin-top: 1px;
    font-size: .68rem;
}

.dash-stat:hover {
    border-color: #c7d7ec;
}

.dash-stat-orange > i {
    background: #f5f0e6;
    color: #9f7a2f;
}

.dash-flash {
    border-color: #bfd3f3;
    background: #f2f6ff;
    color: #245cc4;
    font-weight: 650;
}

.dash-state-missing i,
.dash-state-none i {
    background: #9f7a2f;
}

.dash-state-missing strong,
.dash-state-none strong {
    color: #8a6728;
}

.dash-month-card,
.dash-presence-card,
.dash-main-card,
.dash-side-card,
.dash-other-card {
    border-radius: 18px;
}

.dash-month-card {
    background: #fff;
}

.dash-month-day:hover,
.dash-event-type-grid input:checked + span {
    background: #f5f8fc;
    border-color: #c7d7ec;
}

.dash-event-head,
.dash-drawer-head,
.notice-panel-head {
    background: #fff;
}

.dash-event-head span,
.dash-drawer-head span,
.notice-panel-title {
    color: #245cc4;
}

.dash-status-warn {
    background: #f5f0e6;
    color: #8a6728;
}

/* Dashboard: startsida med notiser + kalender överst och expanderbara APL-rader */
.dash-start-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}

.dash-start-notices {
    min-height: 100%;
}

.dash-start-notices .dash-side-head {
    padding: 18px 20px;
}

.dash-start-notices .dash-side-head p {
    margin-top: 3px;
    color: #6f7c8f;
    font-size: .78rem;
    font-weight: 500;
}

.dash-start-notices .dash-notice {
    min-height: 58px;
    padding: 11px 18px;
}

.dash-start-notices .dash-notice small {
    max-width: 58ch;
}

.dash-workspace {
    grid-template-columns: 1fr;
}

.dash-main-card > .dash-section-head {
    padding: 18px 22px;
}

.dash-main-card > .dash-section-head p {
    font-size: .78rem;
}

.dash-student-row {
    grid-template-columns: minmax(240px, 1.25fr) minmax(132px, .72fr) minmax(122px, .66fr) minmax(142px, .78fr) minmax(190px, 1fr) 76px 92px 38px;
    min-width: 1120px;
    padding: 13px 22px;
}

.dash-student-parent {
    cursor: pointer;
    transition: background .14s ease, box-shadow .14s ease;
}

.dash-student-parent:hover,
.dash-student-parent.is-expanded {
    background: #f6f9fd;
}

.dash-student-parent.is-expanded {
    box-shadow: inset 0 -1px 0 #cfdcec;
}

.dash-expand-button {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #f5f7fb;
    color: #5f6f84;
    cursor: pointer;
}

.dash-expand-button:hover,
.dash-expand-button[aria-expanded="true"] {
    border-color: #cbd8e8;
    background: #fff;
    color: #2f5fb3;
}

.dash-expand-button i {
    transition: transform .16s ease;
}

.dash-expand-button[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.dash-student-detail-row {
    min-width: 1120px;
    padding: 0 22px 18px;
    border-bottom: 1px solid #e8eef6;
    background: #f6f9fd;
}

.dash-student-detail-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr .88fr 1.2fr 1fr;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    background: #fff;
}

.dash-student-detail-grid div {
    min-width: 0;
}

.dash-student-detail-grid small,
.dash-student-detail-grid strong,
.dash-student-detail-grid span {
    display: block;
}

.dash-student-detail-grid small {
    margin-bottom: 7px;
    color: #8793a4;
    font-size: .66rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.dash-student-detail-grid strong {
    overflow: hidden;
    color: #0f1e33;
    font-size: .88rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-student-detail-grid span {
    overflow: hidden;
    margin-top: 4px;
    color: #667589;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.45;
    text-overflow: ellipsis;
}

.dash-student-detail-grid .has-warning strong {
    color: #9f5f19;
}

.dash-student-detail-grid .is-calm strong {
    color: #24714f;
}

.dash-contact-stack,
.dash-detail-actions {
    display: grid;
    gap: 7px;
    margin-top: 7px;
}

.dash-contact-link,
.dash-detail-action {
    min-width: 0;
    border: 1px solid #dce6f1;
    border-radius: 10px;
    background: #f8fafc;
    color: #4a5c72;
    font: inherit;
    text-align: left;
    text-decoration: none;
}

.dash-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    padding: 5px 8px;
    cursor: pointer;
    font-size: .72rem;
    font-weight: 600;
}

.dash-contact-link:hover,
.dash-detail-action:hover {
    border-color: #b8c8dc;
    background: #fff;
    color: #1f4f9e;
}

.dash-detail-action {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 8px 10px;
    cursor: pointer;
}

.dash-detail-action:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.dash-detail-action strong,
.dash-detail-action span {
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-detail-action strong {
    color: #263547;
    font-size: .76rem;
    font-weight: 700;
}

.dash-detail-action span {
    color: #738197;
    font-size: .68rem;
    font-weight: 500;
}

@media (max-width: 1180px) {
    .dash-start-row {
        grid-template-columns: 1fr;
    }

    .dash-student-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .dash-start-row {
        gap: 14px;
    }

    .dash-student-detail-grid {
        grid-template-columns: 1fr;
        padding: 16px;
    }
}

/* Dashboard calm density pass — mindre brus, lättare tabell, kompakt notisyta */
.sidebar-brand {
    font-size: 1.34rem;
    font-weight: 700;
    letter-spacing: -.035em;
}

.sidebar-brand .brand-i {
    position: relative;
    display: inline-block;
    width: .24em;
    line-height: 1;
    color: #fff;
}

.sidebar-brand .brand-dot {
    top: .02em;
    width: .16em;
    height: .16em;
    background: #f97316;
}

.brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: .82rem;
}

.dashboard-page-v2 {
    max-width: 1460px;
    color: #2f3f53;
}

.dash-start-row {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    margin-bottom: 16px;
}

.dash-start-notices {
    align-self: start;
}

.dash-start-notices .dash-side-head,
.dash-month-card .dash-section-head {
    min-height: 48px;
    padding: 12px 16px;
}

.dash-start-notices .dash-side-head p {
    display: none;
}

.dash-notice-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dash-notice-actions button,
.dash-side-head button:not(.dash-unread-badge):not(.dash-heading-button) {
    padding: 0;
    color: #3a68b7;
    font-size: .78rem;
    font-weight: 600;
}

.dash-unread-badge {
    padding: 3px 8px;
    font-size: .68rem;
    font-weight: 600;
}

.dash-start-notices .dash-notice {
    grid-template-columns: 8px minmax(0, 1fr) 44px;
    min-height: 42px;
    padding: 8px 16px;
}

.dash-start-notices .dash-notice strong {
    display: inline;
    margin-right: 8px;
    color: #304052;
    font-size: .8rem;
    font-weight: 600;
}

.dash-start-notices .dash-notice small {
    display: inline;
    color: #738197;
    font-size: .76rem;
    font-weight: 500;
}

.dash-start-notices .dash-notice em {
    margin-top: 1px;
    color: #3a68b7;
    font-size: .68rem;
    font-weight: 600;
}

.dash-start-notices .dash-notice time {
    color: #97a3b4;
    font-size: .68rem;
    font-weight: 600;
    text-align: right;
}

.dash-start-notices .dash-notice time b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    margin-right: 4px;
    padding: 0 5px;
    border-radius: 999px;
    background: #1f4f9e;
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
}

.dash-notice-dot {
    width: 6px;
    height: 6px;
    margin-top: 8px;
}

.dash-month-card,
.dash-main-card,
.dash-side-card,
.dash-other-card {
    border-color: #dce6f1;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(15,23,42,.035);
}

.dash-month-card .dash-section-head h2,
.dash-main-card > .dash-section-head h2,
.dash-side-head h2 {
    color: #263547;
    font-size: .98rem;
    font-weight: 600;
    letter-spacing: -.015em;
}

.dash-month-card .dash-section-head p,
.dash-main-card > .dash-section-head p {
    color: #738197;
    font-size: .74rem;
    font-weight: 500;
}

.dash-student-head {
    background: #f4f7fa;
    color: #738197;
    font-size: .66rem;
    font-weight: 650;
}

.dash-student-row {
    grid-template-columns: minmax(230px, 1.2fr) minmax(122px, .68fr) minmax(112px, .6fr) minmax(112px, .62fr) minmax(174px, .92fr) 68px 78px 34px;
    min-width: 1050px;
    padding: 10px 18px;
    gap: 12px;
}

.dash-student-parent:hover,
.dash-student-parent.is-expanded {
    background: #f7fafd;
}

.dash-student-name {
    color: #263547;
    font-size: .84rem;
    font-weight: 600;
}

.dash-link-button,
.dash-muted-line,
.dash-table-muted,
.dash-today-state small {
    color: #738197;
    font-size: .74rem;
    font-weight: 500;
}

.dash-table-strong,
.dash-today-state strong,
.dash-review-state {
    color: #36475c;
    font-size: .8rem;
    font-weight: 600;
}

.dash-empty-cell {
    color: #a2adbb;
    font-size: .92rem;
    font-weight: 500;
}

.dash-today-state {
    grid-template-columns: 26px minmax(0, 1fr);
}

.dash-today-state i {
    width: 26px;
    height: 26px;
    font-size: .82rem;
}

.dash-state-missing i,
.dash-state-none i {
    background: #c3aa7d;
}

.dash-state-missing strong,
.dash-state-none strong {
    color: #8c7040;
}

.dash-period-track {
    min-height: 30px;
    border-color: #e2e9f2;
    background: #f8fafc;
}

.dash-day {
    width: 8px;
    height: 15px;
    border-radius: 3px;
}

.dash-icon-cell {
    color: #65758b;
    font-size: .8rem;
}

.dash-table-notice-cell {
    position: relative;
}

.dash-table-notice-cell.is-unread {
    border-color: #b9d0f8;
    background: #edf4ff;
    color: #1f4f9e;
}

.dash-table-notice-cell b {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #1f4f9e;
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    line-height: 1;
}

.dash-review-missing {
    color: #2f3f53;
}

.dash-review-missing i {
    color: #2f3f53;
}

.dash-expand-button {
    width: 30px;
    height: 30px;
    border-color: #dce6f1;
    border-radius: 11px;
    background: #f8fafc;
}

.dash-student-detail-row {
    min-width: 1050px;
    padding: 0 18px 14px;
    background: #f7fafd;
}

.dash-student-detail-grid {
    grid-template-columns: 1.18fr 1fr .72fr 1.14fr .95fr;
    gap: 14px;
    padding: 15px 16px;
    border-color: #dce6f1;
    border-radius: 16px;
}

.dash-student-detail-grid small {
    color: #8a96a6;
    font-size: .62rem;
    font-weight: 650;
}

.dash-student-detail-grid strong {
    color: #263547;
    font-size: .82rem;
    font-weight: 600;
}

.dash-student-detail-grid span {
    color: #6f7f92;
    font-size: .74rem;
    font-weight: 500;
}

.dash-student-detail-grid .has-warning strong {
    color: #8c7040;
}

.dash-student-detail-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 14px 16px;
    border: 1px solid #dce6f1;
    border-radius: 16px;
    background: #fff;
}

.dash-student-detail-empty strong {
    color: #263547;
    font-size: .84rem;
    font-weight: 600;
}

.dash-student-detail-empty span {
    color: #738197;
    font-size: .76rem;
    font-weight: 500;
}

@media (max-width: 1180px) {
    .dash-start-row {
        grid-template-columns: 1fr;
    }
}

/* Dashboard follow-up: kompakt notis/kalendar och synliga kontrakt/besök */
.dash-start-row {
    grid-template-columns: 360px 360px;
    justify-content: start;
    align-items: start;
}

.dash-start-notices {
    max-height: 198px;
}

.dash-start-notices .dash-side-head {
    min-height: 42px;
    padding: 10px 14px;
}

.dash-start-notices .dash-notice-list {
    max-height: 156px;
    overflow: hidden;
}

.dash-start-notices .dash-notice {
    grid-template-columns: 8px minmax(0, 1fr) 38px;
    min-height: 31px;
    padding: 6px 14px;
}

.dash-start-notices .dash-notice strong,
.dash-start-notices .dash-notice small,
.dash-start-notices .dash-notice em {
    display: inline;
}

.dash-start-notices .dash-notice em {
    display: block;
    line-height: 1.1;
}

.dash-start-notices .dash-notice.is-unread {
    background: #f1f6ff;
}

.notice-list-item.is-unread {
    background: #f6f9ff;
}

.notice-list-item.is-unread .notice-list-body {
    color: #263547;
    font-weight: 650;
}

.dash-month-card .dash-section-head {
    min-height: 42px;
}

.dash-student-row {
    grid-template-columns: minmax(220px, 1.12fr) minmax(118px, .62fr) minmax(108px, .56fr) minmax(104px, .56fr) minmax(160px, .86fr) 58px 104px 82px 34px;
    min-width: 1180px;
}

.dash-contract-state,
.dash-visit-state {
    border: 1px solid #dce6f1;
    border-radius: 12px;
    background: #f8fafc;
    color: #34465b;
    cursor: pointer;
    font: inherit;
}

.dash-contract-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 30px;
    padding: 4px 7px;
}

.dash-contract-state span {
    font-size: .72rem;
    font-weight: 650;
}

.dash-contract-ok {
    background: #edf8f2;
    border-color: #c8ead7;
    color: #24714f;
}

.dash-contract-warn {
    background: #fffaf0;
    border-color: #eed9ab;
    color: #8c7040;
}

.dash-visit-state {
    display: grid;
    justify-items: start;
    gap: 0;
    min-height: 32px;
    padding: 4px 8px;
    text-align: left;
}

.dash-visit-state strong {
    color: inherit;
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.1;
}

.dash-visit-state small {
    color: #738197;
    font-size: .64rem;
    font-weight: 600;
}

.dash-visit-done {
    background: #edf8f2;
    border-color: #c8ead7;
    color: #24714f;
}

.dash-visit-planned {
    background: #f1f6ff;
    border-color: #cbdcf6;
    color: #315fa8;
}

.dash-visit-none {
    color: #8a96a6;
}

.dash-contract-state:hover,
.dash-visit-state:hover {
    border-color: #b8c8dc;
    background: #fff;
}

.dash-contract-overview {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid #dce6f1;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15,23,42,.035);
}

.dash-contract-overview-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.dash-contract-overview-head h2 {
    color: #263547;
    font-size: 1rem;
    font-weight: 650;
}

.dash-contract-overview-head p {
    color: #738197;
    font-size: .76rem;
    font-weight: 500;
}

.dash-contract-all-clear {
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: #edf8f2;
    color: #24714f;
    font-size: .72rem;
    font-weight: 700;
}

.dash-contract-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.dash-contract-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 2px 10px;
    min-height: 72px;
    padding: 12px 13px;
    border: 1px solid #dce6f1;
    border-radius: 14px;
    background: #f8fafc;
    color: #263547;
    text-decoration: none;
}

.dash-contract-summary:hover {
    border-color: #b8c8dc;
    background: #fff;
    color: #263547;
}

.dash-contract-summary span {
    align-self: end;
    color: #54657a;
    font-size: .78rem;
    font-weight: 700;
}

.dash-contract-summary strong {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
    min-width: 44px;
    color: #263547;
    font-size: 2rem;
    font-weight: 750;
    line-height: 1;
    text-align: right;
}

.dash-contract-summary small {
    overflow: hidden;
    color: #738197;
    font-size: .7rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-contract-summary.is-alert {
    border-color: #f0d8a8;
    background: #fffaf0;
}

.dash-contract-summary.is-alert strong {
    color: #9a681c;
}

.dash-contract-summary.is-hot {
    border-color: #efc0bc;
    background: #fff5f4;
}

.dash-contract-summary.is-hot strong {
    color: #b54137;
}

.dash-contract-summary.is-ok {
    border-color: #c8ead7;
    background: #f3fbf6;
}

.dash-contract-summary.is-ok strong {
    color: #24714f;
}

.dash-contract-state {
    display: grid;
    justify-items: start;
    gap: 1px;
    padding: 4px 8px;
    text-align: left;
}

.dash-contract-state strong,
.dash-contract-state small {
    display: block;
    line-height: 1.12;
}

.dash-contract-state strong {
    color: inherit;
    font-size: .72rem;
    font-weight: 700;
}

.dash-contract-state small {
    color: #738197;
    font-size: .64rem;
    font-weight: 600;
}

.dash-contract-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.dash-contract-grid > div,
.dash-contract-grid > button {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid #dce6f1;
    border-radius: 14px;
    background: #fff;
    color: #263547;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.dash-contract-grid > button:hover {
    border-color: #b8c8dc;
    background: #f8fafc;
}

.dash-contract-grid small {
    color: #738197;
    font-size: .74rem;
}

.dash-contract-grid em {
    overflow: hidden;
    color: #738197;
    font-size: .7rem;
    font-style: normal;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-contract-preview-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.dash-contract-frame {
    width: 100%;
    min-height: 70vh;
    border: 1px solid #dce6f1;
    border-radius: 16px;
    background: #fff;
}

.dash-drawer-summary a {
    display: inline-flex;
    width: fit-content;
    margin-top: 5px;
    color: #1f4f9e;
    font-size: .78rem;
    font-weight: 650;
    text-decoration: none;
}

.dash-mini-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
}

.dash-mini-status.is-ok {
    background: #edf8f2;
    color: #24714f;
}

.dash-mini-status.is-warn {
    background: #fffaf0;
    color: #8c7040;
}

.dash-mail-compose {
    display: grid;
    gap: 9px;
}

.dash-mail-compose label {
    color: #738197;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.dash-visit-list {
    display: grid;
    gap: 10px;
}

.dash-visit-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid #dce6f1;
    border-radius: 14px;
    background: #fff;
    color: #263547;
    text-decoration: none;
}

.dash-visit-card:hover {
    border-color: #b8c8dc;
    color: #263547;
}

.dash-visit-card-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f1f6ff;
    color: #315fa8;
}

.dash-visit-card strong,
.dash-visit-card small,
.dash-visit-card em {
    display: block;
}

.dash-visit-card strong {
    font-size: .86rem;
    font-weight: 650;
}

.dash-visit-card small {
    margin-top: 2px;
    color: #738197;
    font-size: .74rem;
}

.dash-visit-card em {
    margin-top: 6px;
    color: #4f6177;
    font-size: .76rem;
    font-style: normal;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .dash-start-row {
        grid-template-columns: 1fr;
    }

    .dash-contract-overview,
    .dash-contract-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* Dashboard start cards: notiser, kalender, närvaro, loggbok */
.dash-start-row {
    grid-template-columns: repeat(4, minmax(248px, 1fr));
    align-items: stretch;
}

.dash-start-row > section {
    height: 260px;
    min-width: 0;
    overflow: hidden;
}

.dash-start-row .dash-month-card {
    padding: 12px;
}

.dash-start-row .dash-month-card .dash-section-head,
.dash-start-row .dash-start-notices .dash-side-head,
.dash-start-row .dash-start-status-card .dash-side-head {
    min-height: 38px;
    padding: 8px 12px;
    border-bottom: 1px solid #e5edf6;
}

.dash-start-row .dash-month-card .dash-section-head {
    margin: -12px -12px 8px;
}

.dash-section-head h2,
.dash-side-head h2,
.dash-contract-overview-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dash-section-head h2 i,
.dash-side-head h2 i,
.dash-contract-overview-head h2 i {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #edf4ff;
    color: #2f6fe4;
    font-size: .82rem;
    line-height: 1;
}

.dash-start-row .dash-section-head h2,
.dash-start-row .dash-side-head h2 {
    font-size: .92rem;
    font-weight: 650;
    letter-spacing: -.01em;
}

.dash-heading-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.dash-heading-button:hover,
.dash-heading-button:focus-visible {
    color: #2f6fe4;
}

.dash-heading-button:focus-visible {
    outline: 2px solid rgba(47, 111, 228, .35);
    outline-offset: 3px;
    border-radius: 9px;
}

.dash-start-row .dash-month-nav {
    gap: 2px;
    padding: 2px;
    border-radius: 11px;
}

.dash-start-row .dash-month-nav a {
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 8px;
    font-size: .66rem;
}

.dash-start-row .dash-month-grid {
    gap: 3px;
}

.dash-start-row .dash-month-weekdays {
    margin-bottom: 4px;
}

.dash-start-row .dash-month-day {
    min-height: 25px;
    padding: 3px;
    border-radius: 9px;
}

.dash-start-row .dash-month-day span {
    font-size: .72rem;
}

.dash-start-row .dash-month-day em {
    min-height: 4px;
}

.dash-start-row .dash-month-legend {
    gap: 3px;
    margin-top: 7px;
}

.dash-start-row .dash-month-legend span {
    padding: 2px 5px;
    font-size: .56rem;
}

.dash-start-notices {
    max-height: none;
}

.dash-start-notices .dash-notice-list,
.dash-mini-list {
    max-height: 206px;
    overflow-y: auto;
}

.dash-card-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #4f6177;
    font-size: .72rem;
    font-weight: 800;
}

.dash-card-count.is-unread {
    background: #edf4ff;
    color: #1f4f9e;
}

.dash-mini-list {
    display: grid;
    align-content: start;
}

.dash-mini-row {
    position: relative;
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
    width: 100%;
    padding: 7px 12px;
    border: 0;
    border-top: 1px solid #edf2f7;
    background: #fff;
    color: #263547;
    cursor: pointer;
    font: inherit;
    text-align: left;
    text-decoration: none;
}

.dash-mini-row:hover {
    background: #f8fbff;
    color: #263547;
}

.dash-mini-row > span:first-child {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #a7b2c2;
}

.dash-mini-row strong,
.dash-mini-row small,
.dash-mini-row em {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-mini-row strong {
    color: #263547;
    font-size: .76rem;
    font-weight: 650;
}

.dash-mini-row small {
    color: #738197;
    font-size: .68rem;
    font-weight: 600;
    text-align: right;
}

.dash-mini-row em {
    grid-column: 2 / -1;
    margin-top: -3px;
    color: #7c899a;
    font-size: .66rem;
    font-style: normal;
    font-weight: 500;
}

.dash-attendance-mini-in > span:first-child {
    background: #20a765;
    box-shadow: 0 0 0 4px rgba(32,167,101,.12);
}

.dash-attendance-mini-in small {
    color: #24714f;
}

.dash-attendance-mini-out > span:first-child {
    background: #d94b55;
    box-shadow: 0 0 0 4px rgba(217,75,85,.12);
}

.dash-attendance-mini-out small {
    color: #a13f48;
}

.dash-attendance-mini-off {
    cursor: default;
    opacity: .62;
}

.dash-log-mini-unread {
    background: #edf4ff;
    box-shadow: inset 3px 0 0 #1f4f9e;
}

.dash-log-mini-unread > span:first-child {
    background: #1f4f9e;
    box-shadow: 0 0 0 4px rgba(31,79,158,.13);
}

.dash-log-mini-unread small {
    color: #1f4f9e;
}

.dash-log-mini-read > span:first-child {
    background: #20a765;
}

.dash-log-mini-empty {
    cursor: default;
    opacity: .58;
}

.dash-table-notice-cell.is-empty {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    cursor: default;
}

.dash-table-notice-cell.is-empty:hover {
    border-color: transparent;
    background: transparent;
}

.notice-list-item.is-unread {
    background: #edf4ff;
    box-shadow: inset 4px 0 0 #1f4f9e;
}

.notice-list-item.is-unread .notice-list-author,
.notice-list-item.is-unread .notice-list-body {
    color: #1f3f78;
    font-weight: 750;
}

.notice-new-label {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1f4f9e;
    font-size: .62rem;
    font-weight: 850;
}

@media (max-width: 1280px) {
    .dash-start-row {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}

@media (max-width: 760px) {
    .dash-start-row {
        grid-template-columns: 1fr;
    }
}

/* APLsin redesign — warm navy reference direction */
:root {
    --primary: #132235;
    --primary-2: #203247;
    --navy: #0d2638;
    --navy-2: #14364d;
    --navy-3: #1d465f;
    --accent: #ff7a1a;
    --accent-2: #df6411;
    --accent-soft: #fff0e2;
    --bg: #f2ede5;
    --surface: #fffdf8;
    --surface-2: #f8f3eb;
    --text: #162334;
    --text-soft: #4d5f73;
    --muted: #75849a;
    --muted-2: #a5b0bf;
    --border: #e7ddce;
    --border-strong: #d6c7b6;
    --success: #2a9d67;
    --success-soft: #e8f7ef;
    --warning: #d9922e;
    --warning-soft: #fff3dc;
    --danger: #c84b55;
    --danger-soft: #fff0f1;
    --info: #2f7898;
    --info-soft: #e7f3f7;
    --content-max: 1480px;
    --topbar-h: 70px;
    --sidebar-w: 248px;
    --sh-focus: 0 0 0 3px rgba(255, 122, 26, .22);
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body {
    font-family: 'Manrope', 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 18% -12%, rgba(255, 122, 26, .12), transparent 28%),
        radial-gradient(circle at 92% 8%, rgba(13, 38, 56, .11), transparent 26%),
        linear-gradient(180deg, #fbf7ef 0%, #f2ede5 52%, #edf1f4 100%);
}

.app-main {
    background:
        radial-gradient(circle at 72% 4%, rgba(255, 122, 26, .10), transparent 26%),
        linear-gradient(180deg, rgba(255, 253, 248, .72), rgba(242, 237, 229, .96));
}

.sidebar {
    background:
        radial-gradient(circle at 86% 2%, rgba(255, 122, 26, .14), transparent 19%),
        linear-gradient(180deg, #102d42 0%, #0b2031 55%, #081522 100%);
    box-shadow: 22px 0 52px rgba(13, 38, 56, .16);
}

.sidebar-brand {
    min-height: 78px;
    padding: 0 22px;
    border-bottom-color: rgba(255, 255, 255, .09);
    color: #fff;
    font-size: 1.47rem;
    font-weight: 800;
    letter-spacing: -.045em;
}

.brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .10);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

.sidebar-brand .brand-text {
    line-height: 1;
}

.sidebar-brand .brand-i {
    position: relative;
    display: inline-block;
    width: .24em;
    margin: 0 .005em;
    color: #fff;
    line-height: .88;
}

.sidebar-brand .brand-dot {
    position: absolute;
    left: 50%;
    top: -.08em;
    width: .17em;
    height: .17em;
    border-radius: 50%;
    background: var(--accent);
    transform: translateX(-50%);
}

.sidebar-nav {
    padding: 18px 12px;
}

.sidebar-group {
    margin-bottom: 24px;
}

.sidebar-group-title {
    color: rgba(210, 224, 235, .52);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
}

.sidebar-link {
    min-height: 46px;
    margin-bottom: 5px;
    border-left: 3px solid transparent;
    border-radius: 15px;
    color: rgba(226, 235, 242, .78);
    font-size: .94rem;
    font-weight: 700;
}

.sidebar-link i {
    color: rgba(199, 214, 225, .86);
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, .075);
    color: #fff;
}

.sidebar-link.is-active {
    background: rgba(255, 255, 255, .105);
    border-left-color: var(--accent);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045);
}

.sidebar-link.is-active i {
    color: #fff;
}

.sidebar-bottom {
    border-top-color: rgba(255, 255, 255, .09);
    padding: 16px 12px;
}

.sidebar-user {
    border-radius: 16px;
    color: #fff;
}

.sidebar-user .avatar {
    background: rgba(255, 255, 255, .10);
    color: #fff;
}

.sidebar-user .user-name {
    color: #fff;
    font-weight: 800;
}

.sidebar-user .user-meta {
    color: rgba(205, 218, 229, .64);
}

.sidebar-toggle {
    min-height: 38px;
    border-color: rgba(255, 255, 255, .13);
    border-radius: 14px;
    background: rgba(255, 255, 255, .055);
}

.sidebar-toggle:hover {
    border-color: rgba(255, 122, 26, .50);
    background: rgba(255, 122, 26, .13);
}

.topbar {
    height: var(--topbar-h);
    padding: 0 28px;
    border-bottom-color: rgba(214, 199, 182, .74);
    background: rgba(255, 253, 248, .80);
    backdrop-filter: blur(18px);
}

.topbar-title {
    color: var(--text);
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -.035em;
}

.topbar-icon-btn,
.topbar-mobile-toggle {
    border-color: #e4dacb;
    border-radius: 16px;
    background: rgba(255, 253, 248, .92);
    color: var(--navy);
    box-shadow: 0 12px 30px rgba(22, 35, 52, .06);
}

.topbar-icon-btn:hover,
.topbar-mobile-toggle:hover {
    border-color: rgba(255, 122, 26, .38);
    background: #fff7ed;
    color: var(--accent-2);
}

.dashboard-page-v2 {
    max-width: 1480px;
    padding-top: 24px;
    color: var(--text);
}

.dash-contract-overview,
.dash-month-card,
.dash-main-card,
.dash-side-card,
.dash-other-card {
    border: 1px solid rgba(214, 199, 182, .86);
    border-radius: 24px;
    background: rgba(255, 253, 248, .90);
    box-shadow: 0 22px 58px rgba(23, 35, 52, .075);
}

.dash-contract-overview {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 18px;
    padding: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 122, 26, .08), transparent 34%),
        rgba(255, 253, 248, .93);
}

.dash-contract-overview-head h2,
.dash-section-head h2,
.dash-side-head h2 {
    color: var(--text);
    font-weight: 800;
    letter-spacing: -.035em;
}

.dash-contract-overview-head p,
.dash-section-head p,
.dash-side-head p {
    color: var(--muted);
    font-weight: 650;
}

.dash-contract-summary {
    min-height: 78px;
    border-color: rgba(214, 199, 182, .78);
    border-radius: 18px;
    background: rgba(255, 250, 243, .74);
}

.dash-contract-summary:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 122, 26, .34);
    background: #fffdf8;
}

.dash-contract-summary span {
    color: #596a7d;
    font-weight: 800;
}

.dash-contract-summary strong {
    color: var(--navy);
    font-size: 2.2rem;
    font-weight: 800;
}

.dash-contract-summary small {
    color: #7f8da0;
    font-weight: 650;
}

.dash-contract-summary.is-alert {
    border-color: #efd6a5;
    background: #fff8ea;
}

.dash-contract-summary.is-alert strong {
    color: #956418;
}

.dash-contract-summary.is-hot {
    border-color: #efbeb9;
    background: #fff3f1;
}

.dash-contract-summary.is-hot strong {
    color: #b44138;
}

.dash-contract-summary.is-ok {
    border-color: #bfe4cc;
    background: #f1fbf5;
}

.dash-start-row {
    gap: 18px;
}

.dash-start-row > section {
    height: 264px;
}

.dash-start-row .dash-month-card .dash-section-head,
.dash-start-row .dash-start-notices .dash-side-head,
.dash-start-row .dash-start-status-card .dash-side-head,
.dash-main-card > .dash-section-head {
    border-bottom-color: rgba(214, 199, 182, .68);
    background: rgba(255, 253, 248, .62);
}

.dash-section-head h2 i,
.dash-side-head h2 i,
.dash-contract-overview-head h2 i {
    border-radius: 10px;
    background: #fff0e2;
    color: var(--accent-2);
}

.dash-card-count {
    background: #f0ece4;
    color: #6d7888;
}

.dash-card-count.is-unread,
.dash-unread-badge,
.notice-unread-badge,
.dash-table-notice-cell b {
    background: var(--accent);
    color: #fff;
}

.dash-start-notices .dash-notice,
.dash-mini-row {
    border-top-color: rgba(231, 221, 206, .62);
    background: rgba(255, 253, 248, .82);
}

.dash-start-notices .dash-notice:hover,
.dash-mini-row:hover {
    background: #fff7ed;
}

.dash-start-notices .dash-notice.is-unread,
.notice-list-item.is-unread,
.dash-log-mini-unread {
    background: #fff4e8;
    box-shadow: inset 4px 0 0 var(--accent);
}

.dash-notice.is-unread .dash-notice-dot,
.dash-log-mini-unread > span:first-child {
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(255, 122, 26, .14);
}

.dash-start-notices .dash-notice strong,
.dash-mini-row strong,
.dash-student-name,
.dash-table-strong,
.dash-today-state strong,
.dash-review-state {
    color: var(--text);
    font-weight: 750;
}

.dash-start-notices .dash-notice small,
.dash-mini-row small,
.dash-mini-row em,
.dash-table-muted,
.dash-link-button,
.dash-today-state small {
    color: var(--muted);
    font-weight: 600;
}

.dash-start-notices .dash-notice em,
.dash-link-button,
.dash-map-point a,
.dash-history-row a {
    color: #2f7898;
}

.dash-month-nav {
    border-color: rgba(214, 199, 182, .72);
    background: #fffaf4;
}

.dash-month-nav a {
    color: #657388;
}

.dash-month-nav a:hover,
.dash-month-nav a:nth-child(2) {
    background: var(--navy);
    color: #fff;
}

.dash-month-weekdays span {
    color: #7b899a;
    font-weight: 800;
}

.dash-month-day {
    border: 0;
    background: #f6f2eb;
    color: var(--text);
}

.dash-month-day:hover {
    background: #fff7ed;
    color: var(--text);
}

.dash-month-day.is-muted {
    background: transparent;
    color: #b5bfcb;
}

.dash-month-day.is-apl {
    background: #ede9df;
    color: #263547;
}

.dash-month-day.is-apl::before {
    background: rgba(47, 120, 152, .08);
}

.dash-month-day.is-today {
    border: 1px solid rgba(13, 38, 56, .76);
    background: #fffdf8;
    box-shadow: 0 0 0 4px rgba(13, 38, 56, .07);
}

.dash-month-dot-visit,
.dash-month-legend .visit::before {
    background: var(--accent);
}

.dash-month-dot-call,
.dash-month-legend .call::before {
    background: #2f7898;
}

.dash-month-dot-attendance,
.dash-month-legend .attendance::before {
    background: #c84b55;
}

.dash-month-dot-contract,
.dash-month-legend .contract::before {
    background: #7462a8;
}

.dash-month-legend span {
    color: #738197;
    background: transparent;
}

.dash-calendar-tooltip {
    position: fixed;
    z-index: 1100;
    width: min(310px, calc(100vw - 24px));
    padding: 11px;
    border: 1px solid rgba(214, 199, 182, .88);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 122, 26, .11), transparent 34%),
        #fffdf8;
    box-shadow: 0 22px 58px rgba(13, 38, 56, .20);
    color: var(--text);
    pointer-events: none;
}

.dash-calendar-tooltip[hidden] {
    display: none;
}

.dash-calendar-tooltip-date {
    margin-bottom: 8px;
    color: #7b899a;
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.dash-calendar-tooltip-item {
    display: grid;
    gap: 2px;
    padding: 8px 0 8px 10px;
    border-left: 3px solid var(--accent);
}

.dash-calendar-tooltip-item + .dash-calendar-tooltip-item {
    border-top: 1px solid rgba(231, 221, 206, .72);
}

.dash-calendar-tooltip-item strong {
    color: var(--text);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.25;
}

.dash-calendar-tooltip-item small,
.dash-calendar-tooltip-more {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 650;
    line-height: 1.35;
}

.dash-calendar-tooltip-call {
    border-left-color: #2f7898;
}

.dash-calendar-tooltip-attendance {
    border-left-color: #c84b55;
}

.dash-calendar-tooltip-contract {
    border-left-color: #7462a8;
}

.dash-calendar-tooltip-more {
    padding: 6px 0 0 10px;
}

.dash-event-existing-item {
    display: grid;
    gap: 3px;
}

.dash-event-existing-item strong {
    color: var(--text);
    font-size: .82rem;
    font-weight: 800;
}

.dash-event-existing-item small {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 650;
    line-height: 1.35;
}

.dash-student-table {
    overflow-x: auto;
    border-radius: 0 0 24px 24px;
}

.dash-student-head {
    background: #f3efe7;
    color: #69798d;
    font-size: .68rem;
    font-weight: 850;
}

.dash-student-row {
    min-height: 64px;
    border-bottom-color: rgba(231, 221, 206, .74);
    background: rgba(255, 253, 248, .76);
}

.dash-student-parent:hover,
.dash-student-parent.is-expanded {
    background: #fff7ed;
}

.dash-period-track {
    border-color: #e7ddce;
    background: #f8f4ee;
}

.dash-period-track:hover {
    border-color: #d5c6b5;
    background: #fffdf8;
}

.dash-day-present {
    background: #2a9d67;
}

.dash-day-missing {
    background: #c84b55;
}

.dash-day-future {
    background: #d9d2c8;
}

.dash-today-state,
.dash-icon-cell,
.dash-contract-state,
.dash-visit-state,
.dash-expand-button {
    border-color: rgba(214, 199, 182, .78);
    background: #fffaf4;
}

.dash-today-state:hover,
.dash-icon-cell:hover,
.dash-contract-state:hover,
.dash-visit-state:hover,
.dash-expand-button:hover,
.dash-expand-button[aria-expanded="true"] {
    border-color: rgba(255, 122, 26, .36);
    background: #fff7ed;
}

.dash-state-present i {
    background: #2a9d67;
}

.dash-state-missing i,
.dash-state-none i {
    background: #d9922e;
}

.dash-state-missing strong,
.dash-state-none strong {
    color: #956418;
}

.dash-contract-ok,
.dash-visit-done,
.dash-mini-status.is-ok {
    border-color: #bfe4cc;
    background: #edf8f1;
    color: #24714f;
}

.dash-contract-warn,
.dash-mini-status.is-warn {
    border-color: #efd6a5;
    background: #fff8ea;
    color: #956418;
}

.dash-visit-planned {
    border-color: #bed5e1;
    background: #eef7fa;
    color: #2f7898;
}

.dash-student-detail-row {
    background: #fff7ed;
}

.dash-student-detail-grid,
.dash-student-detail-empty,
.dash-contract-grid > div,
.dash-contract-grid > button,
.dash-visit-card,
.dash-drawer-summary div,
.dash-map-point,
.dash-history-row,
.dash-drawer-empty {
    border-color: rgba(214, 199, 182, .82);
    background: #fffdf8;
}

.dash-student-detail-grid small,
.dash-mail-compose label {
    color: #7b899a;
    font-weight: 850;
}

.dash-contact-link,
.dash-detail-action {
    border-color: #e7ddce;
    background: #fffaf4;
    color: var(--text);
}

.dash-contact-link:hover,
.dash-detail-action:hover {
    border-color: rgba(255, 122, 26, .38);
    background: #fff7ed;
}

.dash-drawer,
.dash-event-drawer,
.notice-panel {
    background: #fffaf4;
    box-shadow: -28px 0 70px rgba(13, 38, 56, .24);
}

.dash-drawer-head,
.dash-event-head,
.notice-panel-head {
    border-bottom-color: #e7ddce;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 122, 26, .13), transparent 38%),
        #fffdf8;
}

.btn-accent {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}
.btn-accent:hover {
    border-color: var(--accent-2);
    background: var(--accent-2);
    color: #fff;
}

.btn-primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}
.btn-primary:hover {
    border-color: var(--primary-2);
    background: var(--primary-2);
    color: #fff;
}

.btn-outline,
.btn-ghost {
    border-color: #e7ddce;
    color: var(--text-soft);
}

.btn-outline:hover,
.btn-ghost:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
}

@media (max-width: 1280px) {
    .dash-contract-overview {
        grid-template-columns: 1fr;
    }
}

.dash-drawer {
    width: 560px;
}

.dash-attendance-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.dash-attendance-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #627086;
    font-size: .74rem;
    font-weight: 850;
}

.dash-attendance-legend span::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #cbd5e1;
}

.dash-attendance-legend .is-present::before { background: #2a9d67; }
.dash-attendance-legend .is-absent::before { background: #c84b55; }
.dash-attendance-legend .is-missing::before { background: #8b98a8; }
.dash-attendance-legend .is-future::before { background: #d9d2c8; }

.dash-period-week-list {
    display: grid;
    gap: 12px;
}

.dash-attendance-week {
    border: 1px solid #e7ddce;
    border-radius: 16px;
    background: #fffdf8;
    overflow: hidden;
}

.dash-attendance-week-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #efe5d7;
    background: #fffaf4;
}

.dash-attendance-week-head strong,
.dash-attendance-week-head small {
    display: block;
}

.dash-attendance-week-head strong {
    color: #172033;
    font-size: .9rem;
}

.dash-attendance-week-head small,
.dash-attendance-week-head span {
    color: #7b899a;
    font-size: .74rem;
    font-weight: 800;
}

.dash-attendance-days {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
}

.dash-attendance-day {
    position: relative;
    min-height: 86px;
    padding: 9px 8px;
    border: 1px solid #e6edf5;
    border-radius: 14px;
    background: #f8fafc;
    color: #172033;
    font: inherit;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

.dash-attendance-day:hover,
.dash-attendance-day.is-selected {
    border-color: #7aa7f7;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.dash-attendance-day.is-selected::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #2563eb;
}

.dash-attendance-day b,
.dash-attendance-day strong,
.dash-attendance-day small,
.dash-attendance-day em {
    display: block;
}

.dash-attendance-day b {
    color: #7b899a;
    font-size: .65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.dash-attendance-day strong {
    margin-top: 2px;
    color: #172033;
    font-size: 1rem;
}

.dash-attendance-day small,
.dash-attendance-day em {
    margin-top: 4px;
    color: #667085;
    font-size: .68rem;
    font-style: normal;
    font-weight: 750;
    line-height: 1.2;
}

.dash-attendance-day i {
    position: absolute;
    right: 7px;
    top: 7px;
    color: currentColor;
    font-size: .78rem;
}

.dash-attendance-day-present {
    border-color: #bfe8d1;
    background: #ebf9f1;
}

.dash-attendance-day-present small,
.dash-attendance-day-present em {
    color: #167245;
}

.dash-attendance-day-absent {
    border-color: #f2c3c8;
    background: #fff0f1;
}

.dash-attendance-day-absent small,
.dash-attendance-day-absent em {
    color: #a33a43;
}

.dash-attendance-day-missing {
    border-color: #d8e1eb;
    background: #f2f5f8;
}

.dash-attendance-day-future {
    border-color: #ebe3d8;
    background: #f7f3ed;
    opacity: .74;
}

.dash-map-preview {
    min-height: 260px;
    border-color: #d7e1ed;
    background: #eef3f7;
}

.dash-leaflet-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid #d7e1ed;
    border-radius: 22px;
    background: #eef3f7;
}

.dash-map-preview-real {
    height: 320px;
    min-height: 320px;
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    background: #eef3f7;
}

.dash-map-preview-class {
    height: 430px;
    min-height: 430px;
}

.dash-map-preview-real .leaflet-control-attribution {
    font-size: .58rem;
}

.dash-leaflet-marker {
    border: 0;
    background: transparent;
}

.dash-leaflet-marker span {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    max-width: 150px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #1f4f9e;
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 14px 26px rgba(15, 23, 42, .22);
    transform: translate(-50%, -112%);
}

.dash-leaflet-marker span::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% - 5px);
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
}

.dash-leaflet-marker-home span {
    background: #4f46e5;
}

.dash-leaflet-marker-work span {
    background: #15803d;
}

.dash-leaflet-marker-checkin span {
    background: #ea580c;
}

.dash-leaflet-popup strong {
    color: #162033;
    font-weight: 800;
}

.dash-leaflet-popup span,
.dash-leaflet-popup small,
.dash-leaflet-popup em {
    color: #5b6d83;
    font-style: normal;
}

.dash-class-map-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.dash-class-map-head h3 {
    margin: 0 0 3px;
}

.dash-class-map-head p {
    margin: 0;
    color: #6b7d94;
    font-size: .84rem;
    font-weight: 650;
}

.dash-class-checkin-list {
    display: grid;
    gap: 8px;
}

.dash-class-checkin-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #e1eaf5;
    border-radius: 14px;
    background: #fff;
    color: #263547;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.dash-class-checkin-row:hover {
    border-color: #b8cff1;
    background: #f7fbff;
}

.dash-class-checkin-row > span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #16a34a;
}

.dash-class-checkin-row strong,
.dash-class-checkin-row small {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-class-checkin-row strong {
    font-weight: 760;
}

.dash-class-checkin-row small {
    color: #6f7f92;
    font-size: .78rem;
}

.dash-map-preview::after {
    display: none;
}

.dash-map-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: saturate(.88) contrast(.98);
}

.dash-map-preview .dash-map-pin {
    right: auto;
    bottom: auto;
    transform: translate(-50%, -100%);
    border: 1px solid rgba(15, 23, 42, .08);
    pointer-events: none;
}

.dash-map-preview .dash-map-pin-home i { color: #4f46e5; }
.dash-map-preview .dash-map-pin-work i { color: #15803d; }
.dash-map-preview .dash-map-pin-checkin i { color: #ea580c; }

.dash-map-caption {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .92);
    color: #334155;
    font-size: .76rem;
    font-weight: 850;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .10);
}

@media (max-width: 640px) {
    .dash-drawer {
        width: 100vw;
    }

    .dash-attendance-days {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ════════════════════════════════════════════════════════════
   23. PRINT (för kontrakt-PDF om man vill skriva ut sida)
   ════════════════════════════════════════════════════════════ */
@media print {
    .sidebar, .topbar, .topbar-actions { display: none !important; }
    .app-shell { grid-template-columns: 1fr; }
    .page { padding: 0; max-width: none; }
}

/* ════════════════════════════════════════════════════════════
   24. PLACERINGAR — matchningssida
   ════════════════════════════════════════════════════════════ */

/* Sida — full bredd, extra padding-bottom för floating bar */
.placement-page {
    max-width: none;
    padding-bottom: 80px;
}

/* Header + toolbar */
.placement-header {
    padding-bottom: var(--s-4);
    margin-bottom: var(--s-4);
    border-bottom: 1px solid var(--border);
}
.placement-header h1 {
    font-size: var(--fs-xl);
    margin-bottom: var(--s-1);
}
.placement-header > p {
    color: var(--muted);
    font-size: var(--fs-sm);
    margin-bottom: var(--s-4);
}

.placement-toolbar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-4);
    box-shadow: var(--sh-sm);
}
.placement-toolbar-form {}

.placement-toolbar-row--main {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    align-items: flex-end;
}

.placement-field {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    min-width: 140px;
}
.placement-field label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.placement-field--checkbox {
    display: flex;
    align-items: flex-end;
    padding-bottom: 7px;
}
.placement-toolbar-row--main .placement-field:last-child {
    margin-left: auto;
}
.placement-field--button label {
    visibility: hidden;
}

/* Styla form-control inuti toolbar som systemets .select/.input */
.placement-toolbar .form-control {
    width: 100%;
    padding: 8px 36px 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background-color: var(--surface-2);
    color: var(--text);
    font-size: var(--fs-sm);
    font-family: inherit;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2378716c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    line-height: 1.4;
}
.placement-toolbar input.form-control {
    background-image: none;
    padding-right: 12px;
}
.placement-toolbar .form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(47,111,228,.15);
    background-color: var(--surface);
}

.placement-search-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.placement-search-autocomplete {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.placement-autocomplete-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}
.placement-autocomplete-item {
    padding: var(--s-2) var(--s-3);
    font-size: var(--fs-sm);
    cursor: pointer;
    color: var(--text);
}
.placement-autocomplete-item:hover,
.placement-autocomplete-item.is-active {
    background: var(--accent-soft);
    color: var(--accent);
}

.placement-check {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-sm);
    color: var(--text-soft);
    cursor: pointer;
    user-select: none;
}
.placement-check--inline {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
}

/* Kontextbadges (lärare, klass, program, inriktning) */
.placement-context-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-3);
}
.placement-context-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: var(--fs-xs);
    color: var(--text-soft);
}
.placement-context-badge .badge-label {
    font-weight: 600;
    color: var(--muted);
}

/* Progress */
.placement-progress {
    font-size: var(--fs-sm);
    color: var(--muted);
    margin-bottom: var(--s-2);
    font-weight: 500;
}

/* ── Huvud-layout: sidebar + main ── */
.placement-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--s-4);
    align-items: start;
    margin-top: var(--s-2);
}

/* Sidebar med elever */
.placement-sidebar {
    position: sticky;
    top: var(--s-4);
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.placement-student-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.placement-student-list-header {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.placement-student-list {
    display: flex;
    flex-direction: column;
}
.placement-student-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: background var(--t-fast);
    cursor: pointer;
    min-width: 0;
}
.placement-student-row:last-child {
    border-bottom: none;
}
.placement-student-row:hover {
    background: var(--surface-2);
    color: var(--text);
}
.placement-student-row.is-selected {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
.placement-student-row.is-draft-matched {
    background: var(--surface-2);
    color: var(--muted);
    cursor: default;
}
.placement-student-name {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-sm);
    min-width: 0;
    flex: 1;
    overflow: hidden;
}
.placement-student-name i {
    flex-shrink: 0;
    font-size: var(--fs-xs);
    color: var(--muted-2);
}
.placement-student-match {
    display: block;
    font-size: var(--fs-xs);
    color: var(--muted);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.placement-inline-form {
    display: contents;
}
.placement-student-remove-form {
    display: flex;
    flex-shrink: 0;
}
.placement-remove-btn {
    background: none;
    border: none;
    padding: 2px 6px;
    cursor: pointer;
    color: var(--muted-2);
    font-size: var(--fs-md);
    line-height: 1;
    border-radius: var(--r-sm);
    transition: color var(--t-fast), background var(--t-fast);
}
.placement-remove-btn:hover {
    color: var(--danger);
    background: var(--danger-soft);
}

/* ── Workplace-tabell ── */
.placement-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.placement-workplace-summary {
    font-size: var(--fs-sm);
    color: var(--muted);
}
.placement-workplace-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.placement-workplace-table {
    width: 100%;
    border-collapse: collapse;
}
.placement-workplace-table thead th {
    padding: var(--s-2) var(--s-3);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.placement-workplace-table tbody td {
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
    vertical-align: middle;
}
.placement-workplace-table tbody tr:last-child td {
    border-bottom: none;
}
.placement-workplace-table tfoot td {
    padding: var(--s-2);
}
.placement-table-safe-row td {
    padding: var(--s-1);
    border: none;
}

.placement-workplace-drop-target {
    transition: background var(--t-fast);
}
.placement-workplace-drop-target:hover {
    background: var(--surface-2);
}
.placement-workplace-drop-target.is-drag-over {
    background: var(--accent-soft);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.placement-table-heading {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}
.placement-company-cell {
    min-width: 160px;
}
.placement-company-name {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: 500;
}
.placement-company-name i {
    color: var(--muted-2);
    flex-shrink: 0;
}
.placement-note-cell {
    max-width: 180px;
}
.placement-note-cell span:not(.placement-empty) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.placement-students-cell {
    min-width: 120px;
}
.placement-students-line {
    display: block;
    font-size: var(--fs-xs);
}
.placement-students-line.is-draft {
    font-style: italic;
    color: var(--muted);
}
.placement-empty {
    color: var(--muted-2);
    font-style: italic;
}

/* Platsläge-badge */
.placement-place-state {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
}
.placement-place-state.is-free    { background: var(--success-soft); color: #15803d; }
.placement-place-state.is-partial { background: var(--warning-soft); color: #b45309; }
.placement-place-state.is-full    { background: var(--danger-soft);  color: #b91c1c; }

/* Matcha-knapp */
.placement-action-cell {
    display: none;
    padding: 0;
}

/* Klickbara rader — markeras när elev är vald */
.placement-workplace-table.has-active-student [data-workplace-row] {
    cursor: pointer;
}
.placement-workplace-table.has-active-student [data-workplace-row]:hover {
    background: var(--surface-2);
}

/* Matchad rad — grön tint */
[data-workplace-row].is-student-draft-match {
    background: #f0fdf4;
}
[data-workplace-row].is-student-draft-match:hover {
    background: #dcfce7;
}

/* ── Floating save-bar ── */
.placement-floating-save {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-w);
    right: 0;
    z-index: 100;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: var(--s-3) var(--s-6);
    box-shadow: 0 -4px 16px rgba(15,23,42,.06);
    transition: left var(--t-base);
}
.app-shell.is-collapsed .placement-floating-save {
    left: var(--sidebar-w-mini);
}
.placement-floating-actions {
    display: flex;
    gap: var(--s-3);
    justify-content: flex-end;
}
/* Spara matchningar = grön */
.placement-floating-actions .btn:not(.btn-secondary) {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}
.placement-floating-actions .btn:not(.btn-secondary):hover:not([disabled]) {
    background: #15803d;
    border-color: #15803d;
    transform: translateY(-1px);
}
/* Rensa = outline/grå */
.placement-floating-actions .btn-secondary {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-soft);
}
.placement-floating-actions .btn-secondary:hover:not([disabled]) {
    border-color: var(--text);
    color: var(--text);
}

/* ── Responsivt ── */
@media (max-width: 900px) {
    .placement-layout {
        grid-template-columns: 1fr;
    }
    .placement-sidebar {
        position: static;
        max-height: 320px;
    }
}
@media (max-width: 768px) {
    .placement-floating-save {
        left: 0;
    }
    .placement-page {
        padding-bottom: 100px;
    }
}

/* ════════════════════════════════════════════════════════════
   25. DASHBOARD — matcha placeringssidan visuellt
   ════════════════════════════════════════════════════════════ */

.dashboard-page-v2 {
    max-width: none;
    padding-bottom: 80px;
}

.dashboard-page-v2 .dash-start-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: var(--s-4);
    align-items: stretch;
    margin-bottom: var(--s-5);
    padding: var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--sh-sm);
}

.dashboard-page-v2 .dash-start-row > section {
    height: 254px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: none;
}

.dashboard-page-v2 .dash-start-row .dash-month-card {
    padding: var(--s-3);
}

.dashboard-page-v2 .dash-start-row .dash-month-card .dash-section-head,
.dashboard-page-v2 .dash-start-row .dash-start-notices .dash-side-head,
.dashboard-page-v2 .dash-start-row .dash-start-status-card .dash-side-head,
.dashboard-page-v2 .dash-main-card > .dash-section-head {
    min-height: 38px;
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.dashboard-page-v2 .dash-start-row .dash-month-card .dash-section-head {
    margin: calc(var(--s-3) * -1) calc(var(--s-3) * -1) var(--s-2);
}

.dashboard-page-v2 .dash-section-head h2,
.dashboard-page-v2 .dash-side-head h2 {
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0;
}

.dashboard-page-v2 .dash-section-head h2 i,
.dashboard-page-v2 .dash-side-head h2 i {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: var(--text-soft);
    font-size: var(--fs-sm);
}

.dashboard-page-v2 .dash-heading-button:hover,
.dashboard-page-v2 .dash-heading-button:focus-visible,
.dashboard-page-v2 .dash-link-button {
    color: var(--accent);
}

.dashboard-page-v2 .dash-notice-actions {
    gap: var(--s-2);
}

.dashboard-page-v2 .dash-notice-actions button,
.dashboard-page-v2 .dash-side-head button:not(.dash-unread-badge):not(.dash-heading-button) {
    color: var(--text-soft);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.dashboard-page-v2 .dash-notice-actions button:hover,
.dashboard-page-v2 .dash-side-head button:not(.dash-unread-badge):not(.dash-heading-button):hover {
    color: var(--accent);
}

.dashboard-page-v2 .dash-card-count,
.dashboard-page-v2 .dash-unread-badge {
    min-width: 24px;
    height: 22px;
    padding: 0 var(--s-2);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.dashboard-page-v2 .dash-card-count.is-unread,
.dashboard-page-v2 .dash-unread-badge:not([hidden]),
.dashboard-page-v2 .notice-unread-badge,
.dashboard-page-v2 .dash-table-notice-cell b {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.dashboard-page-v2 .dash-start-notices .dash-notice-list,
.dashboard-page-v2 .dash-mini-list {
    max-height: 214px;
}

.dashboard-page-v2 .dash-start-notices .dash-notice,
.dashboard-page-v2 .dash-mini-row {
    min-height: 40px;
    padding: var(--s-2) var(--s-3);
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}

.dashboard-page-v2 .dash-start-notices .dash-notice:hover,
.dashboard-page-v2 .dash-mini-row:hover {
    background: var(--surface-2);
}

.dashboard-page-v2 .dash-start-notices .dash-notice.is-unread,
.dashboard-page-v2 .notice-list-item.is-unread,
.dashboard-page-v2 .dash-log-mini-unread {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--accent);
}

.dashboard-page-v2 .dash-notice.is-unread .dash-notice-dot,
.dashboard-page-v2 .dash-log-mini-unread > span:first-child,
.dashboard-page-v2 .dash-table-notice-cell.is-unread i {
    background: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 3px rgba(47, 111, 228, .12);
}

.dashboard-page-v2 .dash-mini-row > span:first-child,
.dashboard-page-v2 .dash-notice-dot {
    background: var(--muted-2);
}

.dashboard-page-v2 .dash-attendance-mini-in > span:first-child,
.dashboard-page-v2 .dash-log-mini-read > span:first-child {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
}

.dashboard-page-v2 .dash-attendance-mini-out > span:first-child,
.dashboard-page-v2 .dash-day-missing,
.dashboard-page-v2 .dash-month-dot-attendance,
.dashboard-page-v2 .dash-month-legend .attendance::before {
    background: var(--warning);
}

.dashboard-page-v2 .dash-calendar-tooltip-attendance {
    border-left-color: var(--warning);
}

.dashboard-page-v2 .dash-attendance-mini-out small,
.dashboard-page-v2 .dash-state-missing strong,
.dashboard-page-v2 .dash-state-none strong {
    color: #8a5a05;
}

.dashboard-page-v2 .dash-month-nav {
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}

.dashboard-page-v2 .dash-month-nav a {
    min-width: 26px;
    height: 26px;
    padding: 0 var(--s-2);
    border-radius: var(--r-sm);
    color: var(--text-soft);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.dashboard-page-v2 .dash-month-nav a:hover,
.dashboard-page-v2 .dash-month-nav a:nth-child(2) {
    background: var(--surface-2);
    color: var(--text);
}

.dashboard-page-v2 .dash-month-weekdays span,
.dashboard-page-v2 .dash-month-legend span {
    color: var(--text-soft);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.dashboard-page-v2 .dash-month-day {
    min-height: 25px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
}

.dashboard-page-v2 .dash-month-day:hover {
    border-color: var(--border-strong);
    background: var(--surface);
}

.dashboard-page-v2 .dash-month-day.is-muted {
    background: transparent;
    color: var(--muted-2);
}

.dashboard-page-v2 .dash-month-day.is-apl {
    background: #eef5ff;
}

.dashboard-page-v2 .dash-month-day.is-today {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(47, 111, 228, .12);
}

.dashboard-page-v2 .dash-month-dot-visit,
.dashboard-page-v2 .dash-month-legend .visit::before {
    background: var(--accent);
}

.dashboard-page-v2 .dash-month-dot-call,
.dashboard-page-v2 .dash-month-legend .call::before {
    background: var(--muted);
}

.dashboard-page-v2 .dash-month-dot-contract,
.dashboard-page-v2 .dash-month-legend .contract::before {
    background: var(--c-contract);
}

.dashboard-page-v2 .dash-main-card,
.dashboard-page-v2 .dash-other-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--sh-sm);
}

.dashboard-page-v2 .dash-student-table {
    overflow-x: auto;
    border-radius: 0;
}

.dashboard-page-v2 .dash-student-row {
    min-height: 48px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}

.dashboard-page-v2 .dash-student-head {
    min-height: 38px;
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dashboard-page-v2 .dash-student-parent:hover,
.dashboard-page-v2 .dash-student-parent.is-expanded {
    background: var(--surface-2);
}

.dashboard-page-v2 .dash-student-detail-row {
    background: var(--surface-2);
}

.dashboard-page-v2 .dash-student-detail-grid,
.dashboard-page-v2 .dash-student-detail-empty {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
}

.dashboard-page-v2 .dash-student-name,
.dashboard-page-v2 .dash-table-strong,
.dashboard-page-v2 .dash-today-state strong,
.dashboard-page-v2 .dash-review-state {
    color: var(--text);
    font-weight: 600;
}

.dashboard-page-v2 .dash-start-notices .dash-notice small,
.dashboard-page-v2 .dash-mini-row small,
.dashboard-page-v2 .dash-mini-row em,
.dashboard-page-v2 .dash-table-muted,
.dashboard-page-v2 .dash-today-state small {
    color: var(--muted);
    font-weight: 500;
}

.dashboard-page-v2 .dash-period-track,
.dashboard-page-v2 .dash-today-state,
.dashboard-page-v2 .dash-icon-cell,
.dashboard-page-v2 .dash-contract-state,
.dashboard-page-v2 .dash-visit-state,
.dashboard-page-v2 .dash-expand-button {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    box-shadow: none;
}

.dashboard-page-v2 .dash-period-track:hover,
.dashboard-page-v2 .dash-today-state:hover,
.dashboard-page-v2 .dash-icon-cell:hover,
.dashboard-page-v2 .dash-contract-state:hover,
.dashboard-page-v2 .dash-visit-state:hover,
.dashboard-page-v2 .dash-expand-button:hover,
.dashboard-page-v2 .dash-expand-button[aria-expanded="true"] {
    border-color: var(--border-strong);
    background: var(--surface);
}

.dashboard-page-v2 .dash-state-present i {
    background: var(--success);
}

.dashboard-page-v2 .dash-state-missing i,
.dashboard-page-v2 .dash-state-none i {
    background: var(--warning);
}

.dashboard-page-v2 .dash-contract-ok,
.dashboard-page-v2 .dash-visit-done,
.dashboard-page-v2 .dash-mini-status.is-ok {
    border-color: #bfe4cc;
    background: var(--success-soft);
    color: #15803d;
}

.dashboard-page-v2 .dash-contract-warn,
.dashboard-page-v2 .dash-mini-status.is-warn {
    border-color: #f2d79b;
    background: var(--warning-soft);
    color: #8a5a05;
}

.dashboard-page-v2 .dash-visit-planned {
    border-color: #bfdbfe;
    background: var(--info-soft);
    color: #1d4ed8;
}

@media (max-width: 1280px) {
    .dashboard-page-v2 .dash-start-row {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}

@media (max-width: 760px) {
    .dashboard-page-v2 .dash-start-row {
        grid-template-columns: 1fr;
    }
}

/* Lugnare typografi + konsekvent företagsnamnslinje */
.placement-page .placement-workplace-table tbody td,
.placement-page .placement-student-row,
.placement-page .placement-company-name,
.dashboard-page-v2 .dash-student-row,
.dashboard-page-v2 .dash-student-name,
.dashboard-page-v2 .dash-link-button,
.dashboard-page-v2 .dash-table-strong,
.dashboard-page-v2 .dash-today-state strong,
.dashboard-page-v2 .dash-contract-state strong,
.dashboard-page-v2 .dash-visit-state strong,
.dashboard-page-v2 .dash-mini-row strong,
.dashboard-page-v2 .dash-start-notices .dash-notice strong,
.dashboard-page-v2 .dash-student-detail-grid strong,
.dashboard-page-v2 .dash-detail-action strong,
.dashboard-page-v2 .dash-contact-link,
.dashboard-page-v2 .dash-view-toggle button {
    font-weight: 400;
}

.placement-page .placement-workplace-table thead th,
.placement-page .placement-student-list-header,
.placement-page .placement-field label,
.dashboard-page-v2 .dash-student-head,
.dashboard-page-v2 .dash-section-head h2,
.dashboard-page-v2 .dash-side-head h2,
.dashboard-page-v2 .dash-card-count,
.dashboard-page-v2 .dash-unread-badge {
    font-weight: 500;
}

.placement-page .placement-company-name span,
.dashboard-page-v2 .dash-student-identity .dash-link-button,
.dashboard-page-v2 .dash-drawer-kickerline,
.dashboard-page-v2 .dash-student-detail-grid > div:first-child strong,
.dashboard-page-v2 .dash-drawer-summary div:nth-child(2) strong,
.dashboard-page-v2 .dash-map-work strong,
.dashboard-page-v2 .dash-class-checkin-row small {
    text-transform: uppercase;
    letter-spacing: .01em;
}

.dashboard-page-v2 .dash-view-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface-2);
}

.dashboard-page-v2 .dash-view-toggle button {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 34px;
    padding: 0 var(--s-3);
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-sm);
}

.dashboard-page-v2 .dash-view-toggle button:hover {
    color: var(--text);
}

.dashboard-page-v2 .dash-view-toggle button.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--sh-sm);
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-student-table {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--s-3);
    padding: var(--s-3);
    overflow: visible;
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-student-head {
    display: none;
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-student-row.dash-student-parent {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-3);
    align-items: start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    padding: var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-student-identity {
    grid-column: 1 / -1;
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-table-muted,
.dashboard-page-v2 .dash-main-card.is-card-mode .dash-student-row.dash-student-parent > div:nth-child(3) {
    grid-column: 1 / -1;
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-period-track {
    grid-column: 1 / -1;
    width: 100%;
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-today-state,
.dashboard-page-v2 .dash-main-card.is-card-mode .dash-contract-state,
.dashboard-page-v2 .dash-main-card.is-card-mode .dash-visit-state {
    width: 100%;
    min-width: 0;
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-icon-cell,
.dashboard-page-v2 .dash-main-card.is-card-mode .dash-expand-button {
    justify-self: end;
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-student-detail-row {
    grid-column: 1 / -1;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface-2);
}

/* Dashboard: period och incheckning i tabellen */
.dashboard-page-v2 .dash-period-cell {
    display: grid;
    gap: 2px;
}

.dashboard-page-v2 .dash-period-cell .dash-table-strong {
    font-weight: 400;
    color: var(--text);
}

.dashboard-page-v2 .dash-period-cell .dash-table-muted {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.dashboard-page-v2 .dash-today-state {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: fit-content;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-soft);
}

.dashboard-page-v2 .dash-today-state:hover {
    background: var(--surface-2);
}

.dashboard-page-v2 .dash-today-state i {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    color: #fff;
    font-size: .78rem;
    line-height: 1;
}

.dashboard-page-v2 .dash-today-state span {
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--text-soft);
    line-height: 1;
}

.dashboard-page-v2 .dash-state-present i {
    background: var(--success);
}

.dashboard-page-v2 .dash-state-missing i,
.dashboard-page-v2 .dash-state-absent i,
.dashboard-page-v2 .dash-state-planned i,
.dashboard-page-v2 .dash-state-none i {
    background: var(--danger);
}

/* Dashboard: separera elever utan aktiv APL från huvudlistan */
.dashboard-page-v2 .dash-student-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 10px 18px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dashboard-page-v2 .dash-student-group-head span,
.dashboard-page-v2 .dash-student-group-head small {
    font-weight: 500;
}

.dashboard-page-v2 .dash-student-no-apl {
    min-height: 44px;
    background: var(--surface);
    color: var(--text-soft);
}

.dashboard-page-v2 .dash-student-no-apl .dash-student-name {
    color: var(--text-soft);
}

.dashboard-page-v2 .dash-no-apl-inline {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--fs-xs);
}

.dashboard-page-v2 .dash-student-no-apl .avatar {
    opacity: .82;
}

.dashboard-page-v2 .dash-student-no-apl:hover {
    background: var(--surface-2);
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-student-group-head {
    grid-column: 1 / -1;
    min-width: 0;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    padding: 2px 4px 0;
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-student-row.dash-student-no-apl {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-student-row.dash-student-no-apl > :not(.dash-student-identity) {
    display: none;
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-student-no-apl .dash-student-identity {
    grid-column: auto;
    width: 100%;
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-student-no-apl .avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

/* Dashboard: kompaktare statuskolumner */
.dashboard-page-v2 .dash-student-row:not(.dash-student-group-head) {
    grid-template-columns:
        minmax(190px, 1fr)
        minmax(210px, 1.05fr)
        minmax(104px, .52fr)
        minmax(92px, .45fr)
        minmax(92px, .42fr)
        54px
        62px
        68px
        34px;
}

.dashboard-page-v2 .dash-student-head {
    grid-template-columns:
        minmax(190px, 1fr)
        minmax(210px, 1.05fr)
        minmax(104px, .52fr)
        minmax(92px, .45fr)
        minmax(92px, .42fr)
        54px
        62px
        68px
        34px;
}

.dashboard-page-v2 .dash-workplace-cell {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.dashboard-page-v2 .dash-workplace-cell .dash-link-button {
    justify-self: start;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-page-v2 .dash-period-cell .dash-table-muted {
    font-size: .66rem;
}

.dashboard-page-v2 .dash-status-icon {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
    font: inherit;
}

.dashboard-page-v2 .dash-status-icon i {
    font-size: .92rem;
    line-height: 1;
}

.dashboard-page-v2 .dash-status-icon.dash-table-notice-cell i {
    background: transparent;
    color: currentColor;
    box-shadow: none;
}

.dashboard-page-v2 .dash-status-icon.is-read,
.dashboard-page-v2 .dash-status-icon.dash-status-ok {
    border-color: #bfe4cc;
    background: var(--success-soft);
    color: #15803d;
}

.dashboard-page-v2 .dash-status-icon.is-unread,
.dashboard-page-v2 .dash-status-icon.dash-status-warn {
    border-color: #f2d79b;
    background: var(--warning-soft);
    color: #a16207;
}

.dashboard-page-v2 .dash-status-icon.is-empty {
    cursor: default;
    color: var(--muted);
}

.dashboard-page-v2 .dash-status-dash {
    color: var(--muted);
    font-size: var(--fs-sm);
}

.dashboard-page-v2 .dash-visit-compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-soft);
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-xs);
    line-height: 1;
}

.dashboard-page-v2 .dash-visit-compact.dash-visit-done {
    border-color: #bfe4cc;
    background: var(--success-soft);
    color: #15803d;
}

.dashboard-page-v2 .dash-visit-compact.dash-visit-planned {
    border-color: #bfdbfe;
    background: var(--info-soft);
    color: #1d4ed8;
}

.dashboard-page-v2 .dash-visit-compact.dash-visit-none {
    border-color: #f2d79b;
    background: var(--warning-soft);
    color: #a16207;
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-workplace-cell {
    grid-column: 1 / -1;
}

.dash-custom-tooltip {
    position: fixed;
    z-index: 9999;
    max-width: 220px;
    padding: 7px 10px;
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 10px;
    background: #111827;
    color: #fff;
    font-size: .74rem;
    line-height: 1.25;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .08s ease, transform .08s ease;
}

.dash-custom-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.dash-custom-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 9px;
    height: 9px;
    background: #111827;
    border-right: 1px solid rgba(15, 23, 42, .14);
    border-bottom: 1px solid rgba(15, 23, 42, .14);
    transform: translateX(-50%) rotate(45deg);
}

/* Dashboard: närvaro per aktuell vecka */
.dashboard-page-v2 .dash-period-track {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-width: 0;
    min-height: 24px;
    gap: 3px;
    padding: 3px;
}

.dashboard-page-v2 .dash-period-track .dash-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 0;
    border-radius: 6px;
    color: #fff;
    font-size: .47rem;
    line-height: 1;
    font-weight: 500;
}

.dashboard-page-v2 .dash-period-track .dash-day-present {
    background: #2a9d67;
}

.dashboard-page-v2 .dash-period-track .dash-day-absent,
.dashboard-page-v2 .dash-period-track .dash-day-missing {
    background: #c84b55;
}

.dashboard-page-v2 .dash-period-track .dash-day-future {
    background: #d9d2c8;
    color: #7b7166;
}

/* Dashboard: kompakt närvaromodal i veckorader */
.dashboard-page-v2 .dash-period-week-list {
    gap: 6px;
}

.dashboard-page-v2 .dash-attendance-week {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    border-radius: 12px;
    overflow: hidden;
}

.dashboard-page-v2 .dash-attendance-week-head {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 2px;
    padding: 5px 6px;
    border-right: 1px solid var(--border);
    border-bottom: 0;
}

.dashboard-page-v2 .dash-attendance-week-head strong {
    font-size: .72rem;
}

.dashboard-page-v2 .dash-attendance-week-head span {
    font-size: .58rem;
    font-weight: 500;
}

.dashboard-page-v2 .dash-attendance-days {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px;
}

.dashboard-page-v2 .dash-attendance-day {
    width: 36px;
    min-height: 30px;
    padding: 3px 2px;
    border-radius: 9px;
}

.dashboard-page-v2 .dash-attendance-day span {
    display: block;
    font-size: .52rem;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}

.dashboard-page-v2 .dash-attendance-day strong {
    display: none;
}

.dashboard-page-v2 .dash-attendance-day em {
    display: block;
    margin-top: 2px;
    font-size: .48rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1;
}

.dashboard-page-v2 .dash-attendance-day i {
    right: 3px;
    top: 3px;
    font-size: .5rem;
}

.dashboard-page-v2 .dash-attendance-day.is-selected::after {
    right: 3px;
    bottom: 3px;
    width: 5px;
    height: 5px;
}

/* Dashboard: kompakt incheckningsdrawer */
.dashboard-page-v2 .dash-drawer {
    width: 500px;
}

.dashboard-page-v2 .dash-drawer-head,
.dashboard-page-v2 .dash-drawer-body {
    padding: var(--s-4);
}

.dashboard-page-v2 .dash-drawer-section {
    margin-bottom: var(--s-3);
}

.dashboard-page-v2 .dash-drawer-section h3 {
    margin-bottom: var(--s-2);
    font-size: .95rem;
    font-weight: 500;
}

.dashboard-page-v2 .dash-drawer-hero {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
    padding: 12px;
    border-radius: 16px;
}

.dashboard-page-v2 .dash-drawer-hero-link {
    color: inherit;
    text-decoration: none;
}

.dashboard-page-v2 .dash-drawer-hero-link:hover {
    border-color: #c9d8e8;
    background: var(--surface-2);
}

.dashboard-page-v2 .dash-drawer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
}

.dashboard-page-v2 .dash-drawer-hero h3 {
    font-size: .98rem;
    font-weight: 500;
}

.dashboard-page-v2 .dash-drawer-hero p,
.dashboard-page-v2 .dash-drawer-kickerline {
    font-size: .68rem;
    font-weight: 400;
}

.dashboard-page-v2 .dash-status-pill {
    padding: 5px 8px;
    font-size: .68rem;
    font-weight: 500;
}

.dashboard-page-v2 .dash-drawer-summary-compact {
    grid-template-columns: 1fr;
    gap: 6px;
}

.dashboard-page-v2 .dash-drawer-summary-card {
    display: block;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.dashboard-page-v2 .dash-drawer-summary-link {
    color: inherit;
    text-decoration: none;
}

.dashboard-page-v2 .dash-drawer-summary-link:hover {
    border-color: #c9d8e8;
    background: var(--surface-2);
}

.dashboard-page-v2 .dash-drawer-summary-card small,
.dashboard-page-v2 .dash-drawer-summary-card strong,
.dashboard-page-v2 .dash-drawer-summary-card span {
    display: block;
}

.dashboard-page-v2 .dash-drawer-summary-card small {
    color: var(--text-soft);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dashboard-page-v2 .dash-drawer-summary-card strong {
    margin-top: 3px;
    color: var(--text);
    font-size: .86rem;
    font-weight: 400;
}

.dashboard-page-v2 .dash-drawer-summary-card span {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 400;
}

.dashboard-page-v2 .dash-attendance-legend {
    gap: 8px;
    margin-bottom: 8px;
}

.dashboard-page-v2 .dash-attendance-legend span {
    font-size: .66rem;
    font-weight: 400;
}

.dashboard-page-v2 .dash-map-preview {
    min-height: 150px;
    border-radius: 16px;
}

.dashboard-page-v2 .dash-map-card {
    grid-template-columns: 1fr;
    gap: 6px;
}

.dashboard-page-v2 .dash-map-point {
    padding: 8px 10px;
    border-radius: 12px;
}

.dashboard-page-v2 .dash-safe-attendance-days {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.dashboard-page-v2 .dash-safe-attendance-day {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 46px;
    padding: 7px 4px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-soft);
}

.dashboard-page-v2 .dash-safe-attendance-day b {
    font-size: .66rem;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}

.dashboard-page-v2 .dash-safe-attendance-day small {
    margin-top: 4px;
    font-size: .62rem;
    font-weight: 400;
    line-height: 1;
}

.dashboard-page-v2 .dash-safe-attendance-day.dash-attendance-day-present {
    border-color: #bfe4cc;
    background: var(--success-soft);
    color: #15803d;
}

.dashboard-page-v2 .dash-safe-attendance-day.dash-attendance-day-absent,
.dashboard-page-v2 .dash-safe-attendance-day.dash-attendance-day-missing {
    border-color: #f3b7bd;
    background: #fff1f2;
    color: #b4232d;
}

.dashboard-page-v2 .dash-safe-attendance-day.dash-attendance-day-future {
    border-color: #e7ddce;
    background: #f8f4ee;
    color: #837569;
}

/* Dashboard: attendance drawer v2 */
.dash-drawer-attendance-mode {
    width: min(620px, 100vw);
    background:
        linear-gradient(90deg, rgba(255, 251, 245, .96), rgba(255, 255, 255, .98)),
        #fff;
}

.dash-drawer-attendance-mode .dash-drawer-head {
    padding: 22px 26px;
}

.dash-drawer-attendance-mode .dash-drawer-head span {
    color: #1d5fbb;
    font-size: .7rem;
    font-weight: 650;
    letter-spacing: .11em;
}

.dash-drawer-attendance-mode .dash-drawer-head h2 {
    margin-top: 4px;
    color: #102033;
    font-size: 1.28rem;
    font-weight: 560;
    letter-spacing: -.02em;
}

.dash-drawer-attendance-mode .dash-drawer-body {
    padding: 22px 26px 30px;
}

.dash-attendance-modal {
    display: grid;
    gap: 16px;
}

.dash-attendance-hero {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border: 1px solid #e2d5c4;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,251,255,.72));
    color: inherit;
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(20, 31, 45, .055);
}

.dash-attendance-hero:hover {
    border-color: #c4d6ee;
    background: #fff;
}

.dash-attendance-photo {
    display: grid;
    width: 76px;
    height: 76px;
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
    background: #eef4fb;
    color: #1e3552;
    font-size: 1rem;
    font-weight: 560;
}

.dash-attendance-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.dash-attendance-hero-copy {
    min-width: 0;
}

.dash-attendance-hero-copy span,
.dash-attendance-info-card span {
    display: block;
    color: #728096;
    font-size: .66rem;
    font-weight: 640;
    letter-spacing: .11em;
    line-height: 1.2;
    text-transform: uppercase;
}

.dash-attendance-hero-copy h3 {
    margin: 5px 0 3px;
    overflow: hidden;
    color: #102033;
    font-size: 1.28rem;
    font-weight: 560;
    letter-spacing: -.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-attendance-hero-copy p,
.dash-attendance-hero small {
    margin: 0;
    color: #6c7a91;
    font-size: .8rem;
    font-style: normal;
    font-weight: 430;
}

.dash-attendance-hero small {
    padding: 7px 10px;
    border: 1px solid #dbe5f1;
    border-radius: 999px;
    background: #f7fafc;
    white-space: nowrap;
}

.dash-attendance-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.dash-attendance-info-card {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid #e2d5c4;
    border-radius: 18px;
    background: rgba(255,255,255,.74);
    color: inherit;
    text-decoration: none;
}

a.dash-attendance-info-card:hover {
    border-color: #c4d6ee;
    background: #fff;
}

.dash-attendance-info-card strong {
    display: block;
    margin-top: 7px;
    overflow-wrap: anywhere;
    color: #142033;
    font-size: .9rem;
    font-weight: 520;
    line-height: 1.3;
}

.dash-attendance-info-card:first-child strong {
    color: #f97316;
    font-size: .82rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.dash-attendance-info-card em {
    display: block;
    margin-top: 4px;
    overflow-wrap: anywhere;
    color: #6c7a91;
    font-size: .78rem;
    font-style: normal;
    font-weight: 420;
    line-height: 1.35;
}

.dash-attendance-week-card {
    display: grid;
    gap: 12px;
    padding: 15px;
    border: 1px solid #e2d5c4;
    border-radius: 22px;
    background: rgba(255,255,255,.58);
}

.dash-attendance-section-head {
    display: grid;
    gap: 9px;
}

.dash-attendance-section-head h3 {
    margin: 0;
    color: #102033;
    font-size: 1rem;
    font-weight: 560;
    letter-spacing: -.01em;
}

.dash-attendance-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.dash-attendance-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #66758c;
    font-size: .72rem;
    font-weight: 440;
}

.dash-attendance-legend span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #94a3b8;
}

.dash-attendance-legend .is-present::before {
    background: #2aa46f;
}

.dash-attendance-legend .is-absent::before {
    background: #cf4c58;
}

.dash-attendance-legend .is-future::before {
    background: #d8d3cb;
}

.dash-attendance-week-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.dash-attendance-week-day {
    display: grid;
    min-height: 78px;
    align-content: center;
    gap: 4px;
    padding: 10px 8px;
    border: 1px solid #e8ddd0;
    border-radius: 16px;
    background: #fbf8f3;
    color: #66758c;
    cursor: default;
    font-family: inherit;
    text-align: center;
}

.dash-attendance-week-day.is-clickable {
    cursor: pointer;
}

.dash-attendance-week-day.is-clickable:hover,
.dash-attendance-week-day.is-selected {
    border-color: #1f6dd8;
    box-shadow: 0 0 0 2px rgba(31, 109, 216, .14);
}

.dash-attendance-week-day b {
    color: #142033;
    font-size: .8rem;
    font-weight: 560;
    line-height: 1;
}

.dash-attendance-week-day small,
.dash-attendance-week-day time {
    display: block;
    font-size: .7rem;
    font-weight: 430;
    line-height: 1.15;
}

.dash-attendance-week-day time {
    color: inherit;
}

.dash-attendance-week-day.is-present {
    border-color: #b9e4cf;
    background: #e9f8ef;
    color: #13724b;
}

.dash-attendance-week-day.is-absent {
    border-color: #f0c2c8;
    background: #fff0f2;
    color: #a83240;
}

.dash-attendance-week-day.is-missing {
    border-color: #d9e1eb;
    background: #f7f9fc;
    color: #6d7c91;
}

.dash-attendance-week-day.is-future {
    border-color: #e4ded6;
    background: #faf7f1;
    color: #8a8176;
}

.dash-attendance-period-card,
.dash-attendance-location-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #e2d5c4;
    border-radius: 22px;
    background: rgba(255,255,255,.55);
}

.dash-attendance-period-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.dash-attendance-period-head h3 {
    margin: 0;
    color: #102033;
    font-size: .96rem;
    font-weight: 560;
    letter-spacing: -.01em;
}

.dash-attendance-period-head span {
    color: #6c7a91;
    font-size: .76rem;
    font-weight: 460;
    white-space: nowrap;
}

.dash-attendance-period-list {
    display: grid;
    gap: 7px;
}

.dash-attendance-period-week {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.dash-attendance-period-week > strong {
    color: #48586d;
    font-size: .72rem;
    font-weight: 540;
    white-space: nowrap;
}

.dash-attendance-period-days {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
}

.dash-attendance-period-day {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5ddd3;
    border-radius: 9px;
    background: #faf7f1;
    color: #788598;
    cursor: default;
    font-size: .62rem;
    font-weight: 520;
    line-height: 1;
    font-family: inherit;
}

.dash-attendance-period-day.is-clickable {
    cursor: pointer;
}

.dash-attendance-period-day.is-clickable:hover,
.dash-attendance-period-day.is-selected {
    border-color: #1f6dd8;
    box-shadow: 0 0 0 2px rgba(31, 109, 216, .14);
}

.dash-attendance-period-day.is-present {
    border-color: #b9e4cf;
    background: #e9f8ef;
    color: #13724b;
}

.dash-attendance-period-day.is-absent {
    border-color: #f0c2c8;
    background: #fff0f2;
    color: #a83240;
}

.dash-attendance-period-day.is-missing {
    border-color: #d9e1eb;
    background: #f7f9fc;
    color: #6d7c91;
}

.dash-attendance-period-day.is-future {
    border-color: #e4ded6;
    background: #faf7f1;
    color: #8a8176;
}

.dash-attendance-map-shell {
    border-radius: 18px;
}

.dash-attendance-map {
    height: 230px;
    min-height: 230px;
}

@media (max-width: 680px) {
    .dash-drawer-attendance-mode .dash-drawer-body {
        padding: 18px;
    }

    .dash-attendance-hero,
    .dash-attendance-info-grid {
        grid-template-columns: 1fr;
    }

    .dash-attendance-hero {
        text-align: left;
    }

    .dash-attendance-photo {
        width: 68px;
        height: 68px;
    }

    .dash-attendance-week-grid {
        grid-template-columns: repeat(5, minmax(48px, 1fr));
        overflow-x: auto;
        padding-bottom: 2px;
    }
}

/* ── Floating Action Button (FAB) ── */
.fab {
    position: fixed;
    bottom: var(--s-6);
    right: var(--s-6);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 4px 16px rgba(22,163,74,.35);
    text-decoration: none;
    z-index: 50;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(22,163,74,.5);
    color: #fff;
}

/* ════════════════════════════════════════════════════════════
   Theme layer — sist i filen så färgtester kan göras säkert.
   Testa: ?theme=soft-blue, ?theme=warm-neutral, ?theme=sage, ?theme=club-mint, ?theme=default
   ════════════════════════════════════════════════════════════ */
:root {
    --sh-focus: 0 0 0 3px rgba(var(--accent-rgb), .20);
}

body {
    background: var(--app-body-bg);
}

.app-main {
    background: var(--app-main-bg);
}

.sidebar {
    background: var(--sidebar-bg);
    box-shadow: var(--sidebar-shadow);
}

.sidebar-brand {
    border-bottom-color: var(--sidebar-border);
    color: var(--sidebar-fg);
}

.sidebar-brand .brand-text {
    font-size: 1.56rem;
}

.sidebar-brand .brand-dot {
    width: .22em;
    height: .22em;
    background: #f97316;
    box-shadow:
        inset -1px -2px 0 rgba(154, 52, 18, .18),
        0 0 0 2px rgba(249, 115, 22, .10);
}

.brand-mark,
.sidebar-user .avatar {
    background: var(--sidebar-link-active);
    color: var(--sidebar-fg);
    box-shadow: inset 0 0 0 1px var(--sidebar-border);
}

.sidebar-brand .brand-i,
.sidebar-user,
.sidebar-user .user-name {
    color: var(--sidebar-fg);
}

.sidebar-group-title,
.sidebar-user .user-meta {
    color: var(--sidebar-muted);
}

.sidebar-link {
    color: var(--sidebar-link);
}

.sidebar-link i {
    color: var(--sidebar-link-icon);
}

.sidebar-link:hover {
    background: var(--sidebar-link-hover);
    color: var(--sidebar-fg);
}

.sidebar-link.is-active {
    background: var(--sidebar-link-active);
    border-left-color: var(--accent);
    color: var(--sidebar-link-active-fg);
    box-shadow: var(--sidebar-link-active-shadow);
}

.sidebar-link.is-active i {
    color: var(--sidebar-link-active-icon);
}

:root[data-aplsin-theme="sage"] .sidebar-link.is-active {
    margin-right: -12px;
    padding-right: 26px;
    border-left-color: transparent;
    border-radius: 17px 0 0 17px;
}

:root[data-aplsin-theme="sage"] .app-shell.is-collapsed .sidebar-link.is-active {
    margin-right: 0;
    padding-right: var(--s-3);
    border-radius: var(--r-md);
}

.sidebar-bottom {
    border-top-color: var(--sidebar-border);
}

.sidebar-toggle {
    border-color: var(--sidebar-control-border);
    background: var(--sidebar-control-bg);
}

.sidebar-toggle:hover {
    border-color: rgba(var(--accent-rgb), .50);
    background: rgba(var(--accent-rgb), .13);
}

.topbar {
    border-bottom-color: var(--topbar-border);
    background: var(--topbar-bg);
}

.topbar-icon-btn,
.topbar-mobile-toggle {
    border-color: var(--topbar-control-border);
    background: var(--topbar-control-bg);
    color: var(--navy);
}

.topbar-icon-btn:hover,
.topbar-mobile-toggle:hover {
    border-color: rgba(var(--accent-rgb), .38);
    background: var(--topbar-control-hover-bg);
    color: var(--accent-2);
}

.dash-top,
.dash-stat,
.dash-contract-overview,
.dash-presence-card,
.dash-month-card,
.dash-main-card,
.dash-side-card,
.dash-other-card,
.dashboard-page-v2 .dash-start-row,
.dashboard-page-v2 .dash-start-row > section,
.dashboard-page-v2 .dash-main-card,
.dashboard-page-v2 .dash-other-card {
    border-color: var(--panel-border);
    background: var(--panel-bg);
    box-shadow: var(--panel-shadow);
}

.dashboard-page-v2 .dash-start-row .dash-month-card .dash-section-head,
.dashboard-page-v2 .dash-start-row .dash-start-notices .dash-side-head,
.dashboard-page-v2 .dash-start-row .dash-start-status-card .dash-side-head,
.dashboard-page-v2 .dash-main-card > .dash-section-head,
.dash-start-row .dash-month-card .dash-section-head,
.dash-start-row .dash-start-notices .dash-side-head,
.dash-start-row .dash-start-status-card .dash-side-head,
.dash-main-card > .dash-section-head {
    border-bottom-color: var(--panel-border-soft);
    background: var(--panel-bg-soft);
}

.dashboard-page-v2 .dash-start-notices .dash-notice,
.dashboard-page-v2 .dash-mini-row,
.dashboard-page-v2 .dash-student-row {
    border-color: var(--border);
    background: var(--panel-row-bg);
}

.dashboard-page-v2 .dash-start-notices .dash-notice:hover,
.dashboard-page-v2 .dash-mini-row:hover,
.dashboard-page-v2 .dash-student-parent:hover,
.dashboard-page-v2 .dash-student-parent.is-expanded {
    background: var(--panel-row-hover);
}

.dashboard-page-v2 .dash-start-notices .dash-notice.is-unread,
.dashboard-page-v2 .notice-list-item.is-unread,
.dashboard-page-v2 .dash-log-mini-unread {
    background: var(--panel-unread-bg);
    box-shadow: inset 3px 0 0 var(--accent);
}

.dashboard-page-v2 .dash-heading-button:hover,
.dashboard-page-v2 .dash-heading-button:focus-visible,
.dashboard-page-v2 .dash-link-button,
.dash-map-point a,
.dash-history-row a {
    color: var(--theme-link);
}

.dashboard-page-v2 .dash-card-count.is-unread,
.dashboard-page-v2 .dash-unread-badge:not([hidden]),
.dashboard-page-v2 .notice-unread-badge,
.dashboard-page-v2 .dash-table-notice-cell b {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.dashboard-page-v2 .dash-notice.is-unread .dash-notice-dot,
.dashboard-page-v2 .dash-log-mini-unread > span:first-child,
.dashboard-page-v2 .dash-table-notice-cell.is-unread i {
    background: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12);
}

.dashboard-page-v2 .dash-attendance-mini-in > span:first-child,
.dashboard-page-v2 .dash-log-mini-read > span:first-child,
.dash-attendance-legend .is-present::before {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(var(--success-rgb), .12);
}

.dashboard-page-v2 .dash-attendance-mini-out > span:first-child,
.dashboard-page-v2 .dash-day-missing,
.dashboard-page-v2 .dash-month-dot-attendance,
.dashboard-page-v2 .dash-month-legend .attendance::before,
.dash-attendance-legend .is-missing::before {
    background: var(--warning);
}

.dashboard-page-v2 .dash-attendance-mini-out small,
.dashboard-page-v2 .dash-state-missing strong,
.dashboard-page-v2 .dash-state-none strong,
.dashboard-page-v2 .dash-contract-warn,
.dashboard-page-v2 .dash-mini-status.is-warn {
    color: var(--theme-warning-text);
}

.dashboard-page-v2 .dash-month-day.is-apl {
    background: var(--accent-soft);
}

.dashboard-page-v2 .dash-month-day.is-today {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12);
}

.dashboard-page-v2 .dash-month-dot-visit,
.dashboard-page-v2 .dash-month-legend .visit::before {
    background: var(--accent);
}

.dashboard-page-v2 .dash-contract-ok,
.dashboard-page-v2 .dash-visit-done,
.dashboard-page-v2 .dash-mini-status.is-ok {
    border-color: color-mix(in srgb, var(--success) 34%, white);
    background: var(--success-soft);
    color: var(--theme-success-text);
}

.dashboard-page-v2 .dash-contract-warn,
.dashboard-page-v2 .dash-mini-status.is-warn {
    border-color: color-mix(in srgb, var(--warning) 34%, white);
    background: var(--warning-soft);
}

.dashboard-page-v2 .dash-visit-planned {
    border-color: color-mix(in srgb, var(--info) 34%, white);
    background: var(--info-soft);
    color: var(--theme-info-text);
}

.dash-map-home > i,
.dash-leaflet-marker-home span {
    color: var(--map-home);
}

.dash-map-work > i,
.dash-leaflet-marker-work span {
    color: var(--map-work);
}

.dash-map-checkin > i,
.dash-leaflet-marker-checkin span {
    color: var(--map-checkin);
}

.dash-leaflet-marker-home span {
    background: var(--map-home);
}

.dash-leaflet-marker-work span {
    background: var(--map-work);
}

.dash-leaflet-marker-checkin span {
    background: var(--map-checkin);
}

.dash-drawer-attendance-mode {
    background: var(--attendance-drawer-bg);
}

.dash-drawer-attendance-mode .dash-drawer-head span {
    color: var(--accent-2);
}

.dash-drawer-attendance-mode .dash-drawer-head h2,
.dash-attendance-hero-copy h3,
.dash-attendance-section-head h3,
.dash-attendance-period-head h3 {
    color: var(--attendance-heading);
}

.dash-attendance-hero {
    border-color: var(--attendance-card-border);
    background: var(--attendance-hero-bg);
}

.dash-attendance-photo {
    background: var(--accent-soft);
    color: var(--navy);
}

.dash-attendance-hero-copy span,
.dash-attendance-info-card span {
    color: var(--attendance-label);
}

.dash-attendance-hero-copy p,
.dash-attendance-hero small,
.dash-attendance-info-card em,
.dash-attendance-period-head span {
    color: var(--attendance-muted);
}

.dash-attendance-info-card,
.dash-attendance-week-card,
.dash-attendance-period-card,
.dash-attendance-location-card {
    border-color: var(--attendance-card-border);
    background: var(--attendance-card-bg);
}

.dash-attendance-week-day.is-clickable:hover,
.dash-attendance-week-day.is-selected,
.dash-attendance-period-day.is-clickable:hover,
.dash-attendance-period-day.is-selected {
    border-color: var(--attendance-focus);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .14);
}

.dash-attendance-week-day.is-present,
.dash-attendance-period-day.is-present {
    border-color: var(--attendance-present-border);
    background: var(--attendance-present-bg);
    color: var(--attendance-present-text);
}

.dash-attendance-week-day.is-absent,
.dash-attendance-period-day.is-absent {
    border-color: var(--attendance-absent-border);
    background: var(--attendance-absent-bg);
    color: var(--attendance-absent-text);
}

.dash-attendance-week-day.is-missing,
.dash-attendance-period-day.is-missing {
    border-color: var(--attendance-missing-border);
    background: var(--attendance-missing-bg);
    color: var(--attendance-missing-text);
}

.dash-attendance-week-day.is-future,
.dash-attendance-period-day.is-future {
    border-color: var(--attendance-future-border);
    background: var(--attendance-future-bg);
    color: var(--attendance-future-text);
}

.fab {
    background: var(--success);
    box-shadow: 0 4px 16px rgba(var(--success-rgb), .35);
}

.fab:hover {
    box-shadow: 0 6px 22px rgba(var(--success-rgb), .50);
}

/* Dashboard status polish: rena ikoner + referensnära röd/grön */
:root {
    --dash-status-green: #3f7f36;
    --dash-status-red: #c94d5a;
    --dash-status-green-soft: #ddf8e6;
    --dash-status-red-soft: #fde1e5;
    --dash-status-green-border: #b6e4bf;
    --dash-status-red-border: #efaab3;
    --dash-status-amber: #b8791c;
    --dash-status-amber-soft: #fff3dc;
    --dash-status-amber-border: #ead29a;
    --dash-status-beige: #faf7f1;
    --dash-status-beige-border: #ded7cb;
    --dash-status-beige-text: #8a8176;
    --dash-status-grey: var(--dash-status-beige);
    --dash-status-grey-text: var(--dash-status-beige-text);
    --attendance-present-bg: var(--dash-status-green-soft);
    --attendance-present-border: var(--dash-status-green-border);
    --attendance-present-text: var(--dash-status-green);
    --attendance-absent-bg: var(--dash-status-red-soft);
    --attendance-absent-border: var(--dash-status-red-border);
    --attendance-absent-text: var(--dash-status-red);
    --attendance-missing-bg: var(--dash-status-amber-soft);
    --attendance-missing-border: var(--dash-status-amber-border);
    --attendance-missing-text: var(--dash-status-amber);
    --attendance-future-bg: var(--dash-status-beige);
    --attendance-future-border: var(--dash-status-beige-border);
    --attendance-future-text: var(--dash-status-beige-text);
    --sidebar-active-bg: var(--accent-soft);
    --sidebar-accent: var(--accent);
}

/* Theme: club-mint — inspired by dark graphite + airy mint dashboards */
:root[data-aplsin-theme="club-mint"] {
    --primary: #111615;
    --primary-2: #222927;
    --navy: #161c1a;
    --navy-2: #202624;
    --navy-3: #313b37;
    --accent: #2f9ac5;
    --accent-2: #267f9f;
    --accent-soft: #e4f4f7;
    --accent-rgb: 47, 154, 197;
    --bg: #dbe9d6;
    --surface: #ffffff;
    --surface-2: #f1f8f2;
    --text: #101716;
    --text-soft: #566764;
    --muted: #798985;
    --muted-2: #b5c3be;
    --border: #d7e5d5;
    --border-strong: #bfd1c3;
    --success: #2f7d52;
    --success-soft: #ddf2e5;
    --success-rgb: 47, 125, 82;
    --warning: #cc8522;
    --warning-soft: #fff4df;
    --warning-rgb: 204, 133, 34;
    --danger: #bf4b58;
    --danger-soft: #f9e0e4;
    --danger-rgb: 191, 75, 88;
    --info: #2f9ac5;
    --info-soft: #e4f4f7;
    --info-rgb: 47, 154, 197;
    --app-body-bg:
        radial-gradient(circle at 88% -10%, rgba(191, 223, 236, .72), transparent 34%),
        radial-gradient(circle at 68% 18%, rgba(221, 242, 229, .86), transparent 36%),
        linear-gradient(135deg, #b7c5a7 0%, #d9e8d3 32%, #e9f4ee 100%);
    --app-main-bg:
        radial-gradient(circle at 76% 1%, rgba(198, 230, 241, .64), transparent 31%),
        radial-gradient(circle at 60% 30%, rgba(221, 242, 229, .84), transparent 38%),
        linear-gradient(180deg, rgba(245, 251, 247, .82), rgba(229, 240, 229, .96));
    --sidebar-bg:
        radial-gradient(circle at 82% -4%, rgba(75, 111, 91, .24), transparent 26%),
        linear-gradient(180deg, #222826 0%, #1b211f 48%, #111615 100%);
    --sidebar-shadow: 24px 0 62px rgba(12, 17, 16, .22);
    --sidebar-fg: #f7fbf8;
    --sidebar-muted: rgba(203, 214, 209, .62);
    --sidebar-link: rgba(224, 234, 229, .76);
    --sidebar-link-icon: rgba(195, 210, 203, .82);
    --sidebar-link-hover: rgba(255, 255, 255, .075);
    --sidebar-link-active: #eef7ee;
    --sidebar-link-active-fg: #111615;
    --sidebar-link-active-icon: #2f7d52;
    --sidebar-link-active-shadow:
        18px 0 36px rgba(238, 247, 238, .26),
        inset 0 0 0 1px rgba(205, 223, 210, .86);
    --sidebar-border: rgba(255, 255, 255, .08);
    --sidebar-control-bg: rgba(255, 255, 255, .065);
    --sidebar-control-border: rgba(255, 255, 255, .13);
    --sidebar-active-bg: #eef7ee;
    --sidebar-accent: #2f7d52;
    --topbar-bg: rgba(249, 253, 250, .82);
    --topbar-border: rgba(195, 214, 198, .76);
    --topbar-control-bg: rgba(255, 255, 255, .88);
    --topbar-control-border: #d6e5d7;
    --topbar-control-hover-bg: #edf8f1;
    --panel-bg: rgba(255, 255, 255, .78);
    --panel-bg-strong: #ffffff;
    --panel-bg-soft: rgba(244, 250, 245, .72);
    --panel-border: rgba(194, 215, 197, .84);
    --panel-border-soft: rgba(210, 226, 211, .76);
    --panel-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .86),
        0 18px 36px rgba(38, 55, 45, .10),
        0 38px 82px rgba(38, 55, 45, .10);
    --panel-row-bg: rgba(255, 255, 255, .68);
    --panel-row-hover: rgba(236, 247, 240, .80);
    --panel-unread-bg: #fff6e6;
    --theme-link: #267f9f;
    --theme-note-hover: #edf8f1;
    --theme-warning-text: #9a6118;
    --theme-success-text: #2f7d52;
    --theme-danger-text: #ad3f4c;
    --theme-info-text: #267f9f;
    --map-home: #4c55d9;
    --map-work: #2f7d52;
    --map-checkin: #cc8522;
    --attendance-drawer-bg:
        linear-gradient(90deg, rgba(251, 255, 252, .96), rgba(246, 252, 247, .98)),
        #fff;
    --attendance-card-bg: rgba(255, 255, 255, .64);
    --attendance-card-border: #c8dec8;
    --attendance-hero-bg: linear-gradient(135deg, rgba(255,255,255,.92), rgba(224, 244, 235, .76));
    --attendance-heading: #101716;
    --attendance-label: #6d7f7b;
    --attendance-muted: #60736f;
    --attendance-focus: #2f9ac5;
    --dash-status-green: #3d8b41;
    --dash-status-red: #cf4f5e;
    --dash-status-green-soft: #dff6e8;
    --dash-status-red-soft: #f9dfe4;
    --dash-status-green-border: #b9e4c2;
    --dash-status-red-border: #f0adb6;
    --dash-status-amber: #c9831e;
    --dash-status-amber-soft: #fff3df;
    --dash-status-amber-border: #edcc8a;
    --dash-status-beige: #f8f5ef;
    --dash-status-beige-border: #ded8cd;
    --dash-status-beige-text: #81796e;
    --attendance-present-bg: var(--dash-status-green-soft);
    --attendance-present-border: var(--dash-status-green-border);
    --attendance-present-text: var(--dash-status-green);
    --attendance-absent-bg: var(--dash-status-red-soft);
    --attendance-absent-border: var(--dash-status-red-border);
    --attendance-absent-text: var(--dash-status-red);
    --attendance-missing-bg: var(--dash-status-amber-soft);
    --attendance-missing-border: var(--dash-status-amber-border);
    --attendance-missing-text: var(--dash-status-amber);
    --attendance-future-bg: var(--dash-status-beige);
    --attendance-future-border: var(--dash-status-beige-border);
    --attendance-future-text: var(--dash-status-beige-text);
}

.dashboard-page-v2 .dash-today-state i {
    width: 32px;
    height: 32px;
    color: currentColor;
    font-size: .9rem;
    box-shadow: none;
}

.dashboard-page-v2 .dash-state-present i {
    background: var(--dash-status-green-soft);
    color: var(--dash-status-green);
}

.dashboard-page-v2 .dash-state-missing i,
.dashboard-page-v2 .dash-state-absent i,
.dashboard-page-v2 .dash-state-planned i,
.dashboard-page-v2 .dash-state-none i {
    background: var(--dash-status-red-soft);
    color: var(--dash-status-red);
}

.dashboard-page-v2 .dash-period-track .dash-day-present {
    border: 1px solid var(--dash-status-green-border);
    background: var(--dash-status-green-soft);
    color: var(--dash-status-green);
}

.dashboard-page-v2 .dash-period-track .dash-day-absent {
    border: 1px solid var(--dash-status-red-border);
    background: var(--dash-status-red-soft);
    color: var(--dash-status-red);
}

.dashboard-page-v2 .dash-period-track .dash-day-missing {
    border: 1px solid var(--dash-status-amber-border);
    background: var(--dash-status-amber-soft);
    color: var(--dash-status-amber);
}

.dashboard-page-v2 .dash-period-track .dash-day-future {
    border: 1px solid var(--dash-status-beige-border);
    background: var(--dash-status-grey);
    color: var(--dash-status-grey-text);
}

.dashboard-page-v2 .dash-status-icon.dash-table-notice-cell,
.dashboard-page-v2 .dash-status-icon.dash-contract-status {
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--dash-status-beige-border);
    border-radius: 10px;
    background: var(--dash-status-beige);
    box-shadow: none;
    color: var(--dash-status-beige-text);
}

.dashboard-page-v2 .dash-status-icon.dash-table-notice-cell:hover,
.dashboard-page-v2 .dash-status-icon.dash-table-notice-cell:focus-visible,
.dashboard-page-v2 .dash-status-icon.dash-contract-status:hover,
.dashboard-page-v2 .dash-status-icon.dash-contract-status:focus-visible {
    border-color: var(--border-strong);
    background: var(--surface);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .08);
}

.dashboard-page-v2 .dash-status-icon.dash-table-notice-cell i,
.dashboard-page-v2 .dash-status-icon.dash-contract-status i {
    background: transparent !important;
    color: currentColor !important;
    box-shadow: none !important;
    font-size: 1.02rem;
}

.dashboard-page-v2 .dash-status-icon.dash-table-notice-cell.is-read {
    border-color: var(--dash-status-green-border);
    background: var(--dash-status-green-soft);
    color: var(--dash-status-green);
}

.dashboard-page-v2 .dash-status-icon.dash-table-notice-cell.is-unread {
    border-color: var(--dash-status-amber-border);
    background: var(--dash-status-amber-soft);
    color: var(--dash-status-amber);
}

.dashboard-page-v2 .dash-status-icon.dash-table-notice-cell.is-empty {
    border-color: transparent;
    background: transparent;
    color: var(--dash-status-beige-text);
}

.dashboard-page-v2 .dash-status-icon.dash-table-notice-cell b {
    top: -6px;
    right: -7px;
    min-width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--dash-status-amber);
    box-shadow: none;
    font-size: .62rem;
    font-weight: 600;
    line-height: 1;
}

.dashboard-page-v2 .dash-status-icon.dash-contract-status.dash-status-ok {
    border-color: var(--dash-status-green-border);
    background: var(--dash-status-green-soft);
    color: var(--dash-status-green);
}

.dashboard-page-v2 .dash-status-icon.dash-contract-status.dash-status-warn {
    border-color: var(--dash-status-red-border);
    background: var(--dash-status-red-soft);
    color: var(--dash-status-red);
}

.dashboard-page-v2 .dash-attendance-mini-in > span:first-child,
.dashboard-page-v2 .dash-attendance-legend .is-present::before {
    background: var(--dash-status-green);
}

.dashboard-page-v2 .dash-attendance-mini-out > span:first-child,
.dashboard-page-v2 .dash-attendance-legend .is-absent::before {
    background: var(--dash-status-red);
}

.dashboard-page-v2 .dash-attendance-legend .is-missing::before {
    background: var(--dash-status-amber);
}

.dashboard-page-v2 .dash-attendance-legend .is-future::before {
    background: var(--dash-status-beige-border);
}

.dashboard-page-v2 .dash-attendance-week-day.is-present,
.dashboard-page-v2 .dash-attendance-period-day.is-present {
    border-color: var(--attendance-present-border);
    background: var(--attendance-present-bg);
    color: var(--attendance-present-text);
}

.dashboard-page-v2 .dash-attendance-week-day.is-absent,
.dashboard-page-v2 .dash-attendance-period-day.is-absent {
    border-color: var(--attendance-absent-border);
    background: var(--attendance-absent-bg);
    color: var(--attendance-absent-text);
}

.dashboard-page-v2 .dash-attendance-week-day.is-missing,
.dashboard-page-v2 .dash-attendance-period-day.is-missing {
    border-color: var(--attendance-missing-border);
    background: var(--attendance-missing-bg);
    color: var(--attendance-missing-text);
}

.dashboard-page-v2 .dash-attendance-week-day.is-future,
.dashboard-page-v2 .dash-attendance-period-day.is-future {
    border-color: var(--attendance-future-border);
    background: var(--attendance-future-bg);
    color: var(--attendance-future-text);
}

.dashboard-page-v2 .dash-contract-ok,
.dashboard-page-v2 .dash-visit-done,
.dashboard-page-v2 .dash-mini-status.is-ok,
.dashboard-page-v2 .dash-visit-compact.dash-visit-done {
    border-color: var(--dash-status-green-border);
    background: var(--dash-status-green-soft);
    color: var(--dash-status-green);
}

.dashboard-page-v2 .dash-contract-warn,
.dashboard-page-v2 .dash-mini-status.is-warn {
    border-color: var(--dash-status-red-border);
    background: var(--dash-status-red-soft);
    color: var(--dash-status-red);
}

.dashboard-page-v2 .dash-visit-planned,
.dashboard-page-v2 .dash-visit-none,
.dashboard-page-v2 .dash-visit-compact.dash-visit-planned,
.dashboard-page-v2 .dash-visit-compact.dash-visit-none {
    border-color: var(--dash-status-beige-border);
    background: var(--dash-status-beige);
    color: var(--dash-status-beige-text);
}

.dashboard-page-v2 .dash-card-count.is-unread,
.dashboard-page-v2 .dash-unread-badge:not([hidden]),
.dashboard-page-v2 .notice-unread-badge {
    border-color: var(--dash-status-amber-border);
    background: var(--dash-status-amber-soft);
    color: var(--dash-status-amber);
    box-shadow: none;
}

.dashboard-page-v2 .dash-start-notices .dash-notice.is-unread,
.dashboard-page-v2 .notice-list-item.is-unread,
.dashboard-page-v2 .dash-log-mini-unread {
    background: color-mix(in srgb, var(--dash-status-amber-soft) 56%, white);
    box-shadow: inset 3px 0 0 var(--dash-status-amber);
}

.dashboard-page-v2 .dash-workplace-cell .dash-link-button {
    color: var(--text);
    font-weight: 450;
    letter-spacing: .005em;
    text-transform: uppercase;
}

.dashboard-page-v2 .dash-workplace-cell .dash-link-button:hover,
.dashboard-page-v2 .dash-workplace-cell .dash-link-button:focus-visible {
    color: var(--accent);
}

.dash-leaflet-marker span,
.dashboard-page-v2 .dash-leaflet-marker span {
    gap: 6px;
    min-width: 0;
    max-width: 180px;
    padding: 7px 11px 7px 9px;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: -.01em;
}

.dash-leaflet-marker span i,
.dash-leaflet-marker span strong,
.dashboard-page-v2 .dash-leaflet-marker span i,
.dashboard-page-v2 .dash-leaflet-marker span strong {
    display: inline-flex;
    align-items: center;
    color: #fff !important;
    font: inherit;
    line-height: 1;
}

.dash-leaflet-marker span i,
.dashboard-page-v2 .dash-leaflet-marker span i {
    font-size: .78rem;
}

.dash-leaflet-marker-home span,
.dash-leaflet-marker-work span,
.dash-leaflet-marker-checkin span,
.dashboard-page-v2 .dash-leaflet-marker-home span,
.dashboard-page-v2 .dash-leaflet-marker-work span,
.dashboard-page-v2 .dash-leaflet-marker-checkin span {
    color: #fff !important;
}

/* Dashboard start: four calm overview cards */
.dashboard-page-v2 .dash-start-row {
    gap: 16px;
    align-items: stretch;
}

.dashboard-page-v2 .dash-start-row > section {
    display: flex;
    flex-direction: column;
    height: 276px;
    min-height: 276px;
    overflow: hidden;
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(253,252,248,.96));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82),
        0 14px 26px rgba(29, 45, 36, .09),
        0 34px 72px rgba(29, 45, 36, .115);
}

.dashboard-page-v2 .dash-start-row .dash-month-card {
    padding: 0;
}

.dashboard-page-v2 .dash-start-row .dash-month-card .dash-section-head,
.dashboard-page-v2 .dash-start-row .dash-start-notices .dash-side-head,
.dashboard-page-v2 .dash-start-row .dash-start-status-card .dash-side-head {
    flex: 0 0 auto;
    min-height: 58px;
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--panel-border-soft);
    background: rgba(255,255,255,.58);
}

.dashboard-page-v2 .dash-start-row .dash-section-head h2,
.dashboard-page-v2 .dash-start-row .dash-side-head h2,
.dashboard-page-v2 .dash-heading-button {
    gap: 10px;
    color: var(--text);
    font-size: .95rem;
    font-weight: 520;
    letter-spacing: -.01em;
}

.dashboard-page-v2 .dash-start-row .dash-section-head h2 i,
.dashboard-page-v2 .dash-start-row .dash-side-head h2 i,
.dashboard-page-v2 .dash-heading-button i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--sidebar-active-bg) 72%, white);
    color: var(--sidebar-accent);
    font-size: .9rem;
}

.dashboard-page-v2 .dash-heading-button:hover,
.dashboard-page-v2 .dash-heading-button:focus-visible {
    color: var(--sidebar-accent);
}

.dashboard-page-v2 .dash-notice-actions {
    align-items: center;
    gap: 12px;
}

.dashboard-page-v2 .dash-notice-actions button:not(.dash-unread-badge) {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-soft);
    font-size: .74rem;
    font-weight: 520;
}

.dashboard-page-v2 .dash-notice-actions button:not(.dash-unread-badge):hover {
    color: var(--sidebar-accent);
}

.dashboard-page-v2 .dash-unread-badge:not([hidden]) {
    height: 26px;
    padding: 0 12px;
    min-width: 30px;
    border-color: var(--dash-status-amber-border);
    background: var(--dash-status-amber-soft);
    color: var(--dash-status-amber);
    font-size: .72rem;
    font-weight: 600;
}

.dashboard-page-v2 .dash-card-count {
    height: 26px;
    min-width: 34px;
    padding: 0 10px;
    border-color: color-mix(in srgb, var(--panel-border) 74%, white);
    background: rgba(255,255,255,.72);
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 560;
}

.dashboard-page-v2 .dash-card-count.is-unread {
    border-color: var(--dash-status-amber-border);
    background: var(--dash-status-amber-soft);
    color: var(--dash-status-amber);
}

.dashboard-page-v2 .dash-start-notices .dash-notice-list,
.dashboard-page-v2 .dash-start-status-card .dash-mini-list {
    flex: 1 1 auto;
    max-height: none;
    overflow-y: auto;
}

.dashboard-page-v2 .dash-start-notices .dash-notice,
.dashboard-page-v2 .dash-start-status-card .dash-mini-row {
    min-height: 44px;
    padding: 9px 16px;
    border-top: 0;
    border-bottom: 1px solid var(--panel-border-soft);
    background: transparent;
    color: var(--text);
}

.dashboard-page-v2 .dash-start-notices .dash-notice:hover,
.dashboard-page-v2 .dash-start-status-card .dash-mini-row:hover {
    background: rgba(246, 249, 245, .82);
}

.dashboard-page-v2 .dash-start-notices .dash-notice.is-unread,
.dashboard-page-v2 .dash-start-logbook .dash-log-mini-unread {
    background: transparent;
    box-shadow: none;
}

.dashboard-page-v2 .dash-notice-dot,
.dashboard-page-v2 .dash-mini-row > span:first-child {
    width: 7px;
    height: 7px;
    background: #bdc8d4;
    box-shadow: none;
}

.dashboard-page-v2 .dash-notice.is-unread .dash-notice-dot,
.dashboard-page-v2 .dash-log-mini-unread > span:first-child {
    background: var(--dash-status-amber);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dash-status-amber-soft) 72%, transparent);
}

.dashboard-page-v2 .dash-attendance-mini-in > span:first-child {
    background: var(--dash-status-green);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dash-status-green-soft) 72%, transparent);
}

.dashboard-page-v2 .dash-start-logbook .dash-log-mini-read > span:first-child {
    background: #bdc8d4;
    box-shadow: none;
}

.dashboard-page-v2 .dash-attendance-mini-out > span:first-child {
    background: var(--dash-status-red);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dash-status-red-soft) 72%, transparent);
}

.dashboard-page-v2 .dash-start-notices .dash-notice strong,
.dashboard-page-v2 .dash-start-status-card .dash-mini-row strong {
    color: var(--text);
    font-size: .76rem;
    font-weight: 500;
}

.dashboard-page-v2 .dash-start-notices .dash-notice small,
.dashboard-page-v2 .dash-start-status-card .dash-mini-row small,
.dashboard-page-v2 .dash-start-status-card .dash-mini-row em {
    color: var(--text-soft);
    font-size: .68rem;
    font-weight: 440;
}

.dashboard-page-v2 .dash-start-notices .dash-notice em {
    color: var(--sidebar-accent);
    font-size: .68rem;
    font-weight: 520;
}

.dashboard-page-v2 .dash-start-notices .dash-notice time {
    color: var(--text-soft);
    font-size: .68rem;
    font-weight: 520;
}

.dashboard-page-v2 .dash-start-card-footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--panel-border-soft);
    background: rgba(255,255,255,.64);
}

.dashboard-page-v2 .dash-start-card-footer a,
.dashboard-page-v2 .dash-start-card-footer button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: var(--text-soft);
    font: inherit;
    font-size: .74rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.dashboard-page-v2 .dash-start-card-footer a:hover,
.dashboard-page-v2 .dash-start-card-footer button:hover {
    color: var(--sidebar-accent);
    background: rgba(246, 249, 245, .82);
}

.dashboard-page-v2 .dash-start-card-footer i {
    font-size: .82rem;
}

.dashboard-page-v2 .dash-start-row .dash-month-weekdays {
    padding: 0 14px;
    margin: 12px 0 6px;
    grid-template-columns: 18px repeat(7, minmax(0, 1fr));
}

.dashboard-page-v2 .dash-start-row .dash-month-grid {
    padding: 0 14px;
    gap: 5px;
    grid-template-columns: 18px repeat(7, minmax(0, 1fr));
}

.dashboard-page-v2 .dash-start-row .dash-month-weekdays span:first-child {
    color: transparent;
}

.dashboard-page-v2 .dash-start-row .dash-month-week-number {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
    font-size: .62rem;
    font-weight: 540;
    line-height: 1;
}

.dashboard-page-v2 .dash-start-row .dash-month-day {
    min-height: 27px;
    border-radius: 9px;
    background: rgba(248, 250, 248, .9);
}

.dashboard-page-v2 .dash-start-row .dash-month-day.is-apl {
    border-color: #d9e8cf;
    background: #f7fbf1;
}

.dashboard-page-v2 .dash-start-row .dash-month-day.is-apl::before {
    display: none;
}

.dashboard-page-v2 .dash-start-row .dash-month-day.is-today {
    border-color: var(--dash-status-amber-soft);
    background: var(--dash-status-amber-soft);
    color: var(--dash-status-amber);
    box-shadow: none;
}

.dashboard-page-v2 .dash-start-row .dash-month-legend {
    padding: 0 14px 12px;
    margin-top: auto;
}

.dashboard-page-v2 .dash-start-row .dash-month-legend .apl {
    border: 1px solid #d9e8cf;
    background: #f7fbf1;
    color: var(--text-soft);
}

.dashboard-page-v2 .dash-start-row .dash-month-legend .apl::before {
    border-radius: 3px;
    background: #eef8ea;
    box-shadow: inset 0 0 0 1px #d9e8cf;
}

.dashboard-page-v2 .dash-start-row .dash-month-nav a:nth-child(2),
.dashboard-page-v2 .dash-start-attendance .dash-card-count {
    border-color: var(--dash-status-amber-soft);
    background: var(--dash-status-amber-soft);
    color: var(--dash-status-amber);
    box-shadow: none;
}

/* Dashboard/workplaces visual alignment */
.dashboard-page-v2 {
    max-width: 1560px;
}

.dashboard-page-v2 .dash-start-row,
.dashboard-page-v2 .dash-main-card {
    border-color: var(--panel-border);
    background: rgba(255, 255, 255, .64);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .76),
        0 10px 22px rgba(38, 55, 45, .045);
}

.dashboard-page-v2 .dash-start-row {
    padding: 18px;
}

.dashboard-page-v2 .dash-start-row > section {
    border-color: var(--panel-border);
    background: rgba(255, 255, 255, .86);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 8px 18px rgba(38, 55, 45, .04);
}

.dashboard-page-v2 .dash-start-row .dash-month-card .dash-section-head,
.dashboard-page-v2 .dash-start-row .dash-start-notices .dash-side-head,
.dashboard-page-v2 .dash-start-row .dash-start-status-card .dash-side-head,
.dashboard-page-v2 .dash-main-card > .dash-section-head {
    background: rgba(242, 249, 243, .82);
    border-bottom-color: var(--panel-border);
}

.dashboard-page-v2 .dash-start-row .dash-start-notices .dash-side-head,
.dashboard-page-v2 .dash-start-row .dash-start-status-card .dash-side-head {
    border-radius: 18px 18px 0 0;
}

.dashboard-page-v2 .dash-start-row .dash-section-head h2,
.dashboard-page-v2 .dash-start-row .dash-side-head h2,
.dashboard-page-v2 .dash-heading-button,
.dashboard-page-v2 .dash-main-card > .dash-section-head h2 {
    font-weight: 560;
}

.dashboard-page-v2 .dash-unread-badge:not([hidden]),
.dashboard-page-v2 .dash-card-count.is-unread {
    border-color: #111615;
    background: #111615;
    color: #fff;
    box-shadow: none;
}

.dashboard-page-v2 .dash-start-notices .dash-notice,
.dashboard-page-v2 .dash-start-status-card .dash-mini-row,
.dashboard-page-v2 .dash-student-row {
    border-color: var(--panel-border-soft);
}

.dashboard-page-v2 .dash-start-notices .dash-notice:hover,
.dashboard-page-v2 .dash-start-status-card .dash-mini-row:hover,
.dashboard-page-v2 .dash-student-parent:hover,
.dashboard-page-v2 .dash-student-parent.is-expanded {
    background: rgba(241, 248, 242, .76);
}

.dashboard-page-v2 .dash-start-notices .dash-notice em,
.dashboard-page-v2 .dash-workplace-cell .dash-link-button,
.dashboard-page-v2 .dash-workplace-cell .dash-link-button:hover,
.dashboard-page-v2 .dash-workplace-cell .dash-link-button:focus-visible {
    color: var(--accent);
}

.dashboard-page-v2 .dash-student-head {
    background: rgba(242, 249, 243, .88);
    color: var(--muted);
}

.dashboard-page-v2 .dash-student-head span {
    font-weight: 600;
    letter-spacing: .05em;
}

.dashboard-page-v2 .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) {
    background: rgba(255, 255, 255, .72);
}

.dashboard-page-v2 .dash-view-toggle {
    background: rgba(255, 255, 255, .66);
    border-color: var(--panel-border);
}

.dashboard-page-v2 .dash-view-toggle button.is-active {
    background: #111615;
    color: #fff;
    box-shadow: none;
}

:root[data-aplsin-theme="club-mint"] .dashboard-page-v2 .dash-start-row,
:root[data-aplsin-theme="club-mint"] .dashboard-page-v2 .dash-main-card {
    background: rgba(255, 255, 255, .62);
}

:root[data-aplsin-theme="club-mint"] .dashboard-page-v2 .dash-start-row > section {
    background: rgba(255, 255, 255, .82);
}

/* Global app background — exact blue/cyan surface from Praktikplatser */
:root {
    --aplsin-page-blue-bg: linear-gradient(180deg, #edf9fb 0%, #d8f0f6 18%, #d8f0f6 100%);
}

body,
.app-main {
    background: var(--aplsin-page-blue-bg) !important;
}

:root[data-aplsin-theme] .app-main,
:root[data-aplsin-theme] body {
    background: var(--aplsin-page-blue-bg) !important;
}

.dashboard-page-v2 .dash-start-row {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

:root[data-aplsin-theme] .dashboard-page-v2 .dash-start-row {
    border-color: transparent;
    background: transparent !important;
    box-shadow: none !important;
}

.dashboard-page-v2 .dash-main-card,
.dashboard-page-v2 .dash-start-row > section {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        0 8px 18px rgba(25,54,68,.03);
}

:root[data-aplsin-theme] .dashboard-page-v2 .dash-main-card,
:root[data-aplsin-theme] .dashboard-page-v2 .dash-start-row > section {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        0 8px 18px rgba(25,54,68,.03) !important;
}

.app-main::before,
.app-main::after,
.dashboard-page-v2::before,
.dashboard-page-v2::after {
    display: none !important;
    content: none !important;
}

/* Off-canvas panels must not cast a shadow while they are hidden. */
body:not(.dash-drawer-open) .dash-drawer,
body:not(.dash-event-open) .dash-event-drawer,
.notice-panel[aria-hidden="true"] {
    box-shadow: none !important;
    pointer-events: none;
}

.dash-drawer-open .dash-drawer,
.dash-event-open .dash-event-drawer,
.notice-panel[aria-hidden="false"] {
    box-shadow: -18px 0 42px rgba(13, 38, 56, .14) !important;
}

/* Active sidebar link should meet the page background without a dark gutter. */
.sidebar-nav {
    overflow-x: hidden;
}

.sidebar-link.is-active {
    margin-right: -12px !important;
    padding-right: 28px !important;
    border-left-color: transparent !important;
    border-radius: 17px 0 0 17px !important;
}

.app-shell.is-collapsed .sidebar-link.is-active {
    margin-right: 0 !important;
    padding-right: var(--s-3) !important;
    border-radius: var(--r-md) !important;
}

/* Sidebar ergonomics: keep scrolling, but remove the chunky visual scrollbar. */
.sidebar-nav {
    padding-top: 14px !important;
    padding-bottom: 10px !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.sidebar-group {
    margin-bottom: 20px !important;
}

.sidebar-link {
    min-height: 43px !important;
    margin-bottom: 4px !important;
}

.sidebar-bottom {
    padding: 10px 10px 12px !important;
}

.sidebar-user {
    gap: 10px !important;
    padding: 7px 10px !important;
    border-radius: 13px !important;
}

.sidebar-user .avatar {
    width: 30px !important;
    height: 30px !important;
    font-size: .68rem !important;
}

.sidebar-user .user-name {
    font-size: .82rem !important;
    line-height: 1.14 !important;
}

.sidebar-user .user-meta {
    display: block;
    max-width: 155px;
    overflow: hidden;
    font-size: .68rem !important;
    line-height: 1.22 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-logout {
    margin-left: auto;
    font-size: .9rem !important;
}

.sidebar-toggle {
    min-height: 34px !important;
    margin-top: 6px !important;
    padding: 7px 10px !important;
    border-radius: 12px !important;
    font-size: .78rem !important;
}

/* Topbar now carries user + class context instead of a duplicate notice bell. */
.topbar-user-info {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 11px;
}

.topbar-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(183, 206, 196, .82);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: #2f7d52;
    font-size: .72rem;
    font-weight: 650;
}

.topbar-user-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.topbar-user-copy strong {
    overflow: hidden;
    color: var(--text);
    font-size: .92rem;
    font-weight: 650;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-user-copy small {
    overflow: hidden;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 520;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-actions:empty {
    display: none;
}

.dashboard-page-v2 .dash-student-toolbar {
    display: none;
}

.dashboard-page-v2 .dash-student-head .dash-view-toggle {
    margin: -8px 0 -8px auto;
    text-transform: none;
    letter-spacing: 0;
}

/* Acero-inspired dashboard layout: students first, notices/calendar as right rail. */
:root {
    --aplsin-acero-bg: #f7f1ea;
    --aplsin-acero-cream: #fffaf4;
    --aplsin-acero-peach: #f5b18e;
    --aplsin-acero-peach-soft: #fff0e6;
    --aplsin-acero-purple: #5d668e;
    --aplsin-acero-purple-2: #4e587d;
    --aplsin-acero-purple-soft: #eef0fa;
    --aplsin-acero-ink: #202433;
    --aplsin-acero-muted: #7d8494;
    --aplsin-page-blue-bg:
        radial-gradient(circle at 86% 10%, rgba(245, 177, 142, .20), transparent 28%),
        linear-gradient(135deg, #f8f3ec 0%, #f4efe7 40%, #eef2f8 100%);
}

.dashboard-page-v2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    grid-auto-flow: dense;
    gap: 22px;
    align-items: start;
    max-width: 1560px;
    padding-top: 20px;
}

.dashboard-page-v2 > .dash-flash,
.dashboard-page-v2 > .card,
.dashboard-page-v2 > .dash-other-card {
    grid-column: 1 / -1;
}

.dashboard-page-v2 > .dash-workspace {
    display: block;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.dashboard-page-v2 > .dash-start-row {
    display: grid !important;
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: 1fr !important;
    gap: 18px;
    align-self: start;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.dashboard-page-v2:has(> .dash-flash) > .dash-workspace,
.dashboard-page-v2:has(> .dash-flash) > .dash-start-row {
    grid-row: 2;
}

.dashboard-page-v2 .dash-start-attendance,
.dashboard-page-v2 .dash-start-logbook {
    display: none !important;
}

.dashboard-page-v2 > .dash-start-row > section {
    width: 100%;
    min-width: 0;
}

.dashboard-page-v2 .dash-main-card {
    overflow: hidden;
    border-color: rgba(93, 102, 142, .18);
    background: var(--aplsin-acero-purple) !important;
    box-shadow: 0 24px 60px rgba(77, 86, 126, .14) !important;
}

.dashboard-page-v2 .dash-student-table {
    margin: 12px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255, 255, 255, .96);
}

.dashboard-page-v2 .dash-student-head {
    background: var(--aplsin-acero-purple) !important;
    color: rgba(255, 255, 255, .82) !important;
}

.dashboard-page-v2 .dash-student-head span {
    color: inherit;
}

.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-row:not(.dash-student-group-head),
.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-head {
    grid-template-columns:
        minmax(142px, .86fr)
        minmax(166px, .96fr)
        minmax(82px, .48fr)
        minmax(76px, .38fr)
        minmax(92px, .42fr)
        48px
        54px
        60px
        28px !important;
    gap: 10px;
    min-width: 0;
    padding-left: 18px;
    padding-right: 18px;
}

.dashboard-page-v2 .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) {
    background: rgba(255, 255, 255, .96) !important;
    border-color: rgba(93, 102, 142, .13) !important;
}

.dashboard-page-v2 .dash-student-parent:hover,
.dashboard-page-v2 .dash-student-parent.is-expanded {
    background: #fbf7ff !important;
}

.dashboard-page-v2 .dash-view-toggle {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .18);
}

.dashboard-page-v2 .dash-view-toggle button {
    color: rgba(255, 255, 255, .78);
}

.dashboard-page-v2 .dash-view-toggle button.is-active {
    background: var(--aplsin-acero-peach) !important;
    color: var(--aplsin-acero-ink) !important;
}

.dashboard-page-v2 .dash-start-notices {
    background: rgba(255, 255, 255, .92) !important;
    border-color: rgba(93, 102, 142, .16) !important;
    box-shadow: 0 22px 48px rgba(77, 86, 126, .10) !important;
}

.dashboard-page-v2 .dash-start-notices .dash-side-head {
    background: rgba(255, 250, 246, .92) !important;
    border-bottom-color: rgba(245, 177, 142, .35) !important;
}

.dashboard-page-v2 .dash-start-notices .dash-side-head h2,
.dashboard-page-v2 .dash-start-notices .dash-side-head h2 i {
    color: var(--aplsin-acero-purple);
}

.dashboard-page-v2 .dash-start-notices .dash-notice.is-unread {
    background: var(--aplsin-acero-peach-soft) !important;
}

.dashboard-page-v2 .dash-start-notices .dash-notice.is-unread .dash-notice-dot {
    background: var(--aplsin-acero-peach);
    box-shadow: 0 0 0 6px rgba(245, 177, 142, .20);
}

.dashboard-page-v2 .dash-month-card {
    overflow: hidden;
    border-color: rgba(93, 102, 142, .22) !important;
    background: var(--aplsin-acero-purple) !important;
    color: rgba(255, 255, 255, .86);
    box-shadow: 0 26px 56px rgba(77, 86, 126, .18) !important;
}

.dashboard-page-v2 .dash-start-row .dash-month-card .dash-section-head {
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, .14) !important;
}

.dashboard-page-v2 .dash-month-card .dash-section-head h2,
.dashboard-page-v2 .dash-month-card .dash-section-head h2 i,
.dashboard-page-v2 .dash-month-card .dash-month-week-number,
.dashboard-page-v2 .dash-month-card .dash-month-weekdays span,
.dashboard-page-v2 .dash-month-card .dash-month-legend span {
    color: rgba(255, 255, 255, .72) !important;
}

.dashboard-page-v2 .dash-month-card .dash-section-head h2 {
    color: #fff !important;
}

.dashboard-page-v2 .dash-month-nav {
    border-color: rgba(255, 255, 255, .22) !important;
    background: rgba(255, 255, 255, .10) !important;
}

.dashboard-page-v2 .dash-month-nav a {
    color: rgba(255, 255, 255, .86) !important;
}

.dashboard-page-v2 .dash-month-nav a:nth-child(2),
.dashboard-page-v2 .dash-month-nav a:hover {
    background: var(--aplsin-acero-peach) !important;
    color: var(--aplsin-acero-ink) !important;
}

.dashboard-page-v2 .dash-start-row .dash-month-day {
    background: rgba(255, 255, 255, .12) !important;
    color: rgba(255, 255, 255, .80) !important;
    border-color: transparent !important;
}

.dashboard-page-v2 .dash-start-row .dash-month-day.is-apl {
    background: rgba(255, 255, 255, .20) !important;
    border-color: rgba(255, 255, 255, .18) !important;
}

.dashboard-page-v2 .dash-start-row .dash-month-day.is-today {
    background: var(--aplsin-acero-peach) !important;
    color: var(--aplsin-acero-ink) !important;
    box-shadow: none !important;
}

.dashboard-page-v2 .dash-start-row .dash-month-legend .apl {
    background: rgba(255, 255, 255, .13) !important;
    color: rgba(255, 255, 255, .82) !important;
}

@media (max-width: 1180px) {
    .dashboard-page-v2 {
        display: block;
    }

    .dashboard-page-v2 > .dash-start-row {
        margin-top: 18px;
    }
}

/* Reference-theme tightening: purple table, peach rail, user context top-right. */
:root {
    --aplsin-acero-peach: #f4ad8c;
    --aplsin-acero-peach-soft: #fff1e8;
    --aplsin-acero-purple: #5e678f;
    --aplsin-acero-purple-2: #535c82;
    --aplsin-acero-ink: #202333;
    --aplsin-page-blue-bg:
        radial-gradient(circle at 78% 12%, rgba(244, 173, 140, .26), transparent 30%),
        linear-gradient(135deg, #fbf7f0 0%, #f5eee5 48%, #efe9df 100%);
}

.topbar {
    background: rgba(255, 251, 245, .86) !important;
    border-bottom-color: rgba(226, 210, 192, .70) !important;
}

.topbar-user-info {
    justify-content: flex-end;
    margin-left: 12px;
}

.topbar-user-copy {
    text-align: right;
}

.topbar-user-copy small {
    max-width: 360px;
}

.topbar-user-avatar {
    width: 42px;
    height: 42px;
    border-color: rgba(244, 173, 140, .58);
    background: linear-gradient(135deg, #fff6ef, #f7e0d0);
    color: #2b2f45;
}

.dashboard-page-v2 {
    width: 100%;
    max-width: none !important;
    grid-template-columns: minmax(920px, 1fr) 316px;
    gap: 22px;
    padding: 28px 30px 64px;
}

.dashboard-page-v2 .dash-main-card {
    border-color: rgba(94, 103, 143, .38);
    background: var(--aplsin-acero-purple) !important;
    box-shadow: 0 26px 64px rgba(67, 70, 107, .22) !important;
}

.dashboard-page-v2 .dash-student-table {
    margin: 11px;
    border-radius: 20px;
}

.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-row:not(.dash-student-group-head),
.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-head {
    grid-template-columns:
        minmax(132px, .78fr)
        minmax(156px, .92fr)
        minmax(82px, .42fr)
        minmax(78px, .38fr)
        minmax(104px, .48fr)
        58px
        70px
        58px
        34px !important;
    gap: 10px;
    min-width: 0 !important;
    padding-left: 18px;
    padding-right: 18px;
}

.dashboard-page-v2 .dash-student-head {
    position: relative;
    min-height: 52px;
    background: var(--aplsin-acero-purple) !important;
}

.dashboard-page-v2 .dash-student-head span {
    overflow: visible;
    white-space: nowrap;
}

.dashboard-page-v2 .dash-student-head > span:nth-child(6),
.dashboard-page-v2 .dash-student-head > span:nth-child(7),
.dashboard-page-v2 .dash-student-head > span:nth-child(8) {
    text-align: center;
}

.dashboard-page-v2 .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) > :nth-child(6),
.dashboard-page-v2 .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) > :nth-child(7),
.dashboard-page-v2 .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) > :nth-child(8),
.dashboard-page-v2 .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) > :nth-child(9) {
    justify-self: center;
}

.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-head > span:last-child {
    position: absolute;
    top: 9px;
    right: 12px;
    width: auto;
}

.dashboard-page-v2 .dash-student-head .dash-view-toggle {
    height: 34px;
    margin: 0;
    padding: 3px;
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .14);
}

.dashboard-page-v2 .dash-student-head .dash-view-toggle button {
    width: 30px;
    min-width: 30px;
    padding: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .78);
    font-size: 0;
}

.dashboard-page-v2 .dash-student-head .dash-view-toggle button i {
    margin: 0;
    font-size: .9rem;
}

.dashboard-page-v2 .dash-student-head .dash-view-toggle button.is-active {
    background: var(--aplsin-acero-peach) !important;
    color: #222433 !important;
}

.dashboard-page-v2 .dash-start-notices {
    background: rgba(255, 255, 255, .94) !important;
    border-color: rgba(244, 173, 140, .30) !important;
}

.dashboard-page-v2 .dash-start-notices .dash-side-head {
    background: rgba(255, 244, 235, .82) !important;
}

.dashboard-page-v2 .dash-start-notices .dash-side-head h2,
.dashboard-page-v2 .dash-start-notices .dash-side-head h2 i {
    color: var(--aplsin-acero-purple) !important;
}

.dashboard-page-v2 .dash-month-card {
    background: var(--aplsin-acero-purple) !important;
    border-color: rgba(94, 103, 143, .32) !important;
}

@media (max-width: 1500px) {
    .dashboard-page-v2 {
        grid-template-columns: minmax(860px, 1fr) 300px;
        padding-left: 22px;
        padding-right: 22px;
    }

    .dashboard-page-v2 .dash-student-row:not(.dash-student-group-head),
    .dashboard-page-v2 .dash-student-head {
        grid-template-columns:
            minmax(122px, .74fr)
            minmax(144px, .88fr)
            78px
            72px
            98px
            52px
            64px
            54px
            30px !important;
        gap: 8px;
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* Final pass: ACERO-style graphite nav, single view toggle, neutral notices. */
.sidebar {
    background:
        linear-gradient(180deg, #2f312f 0%, #272a28 48%, #202321 100%) !important;
    border-right-color: rgba(255, 255, 255, .08) !important;
    box-shadow: none !important;
}

.sidebar-brand {
    color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, .09) !important;
}

.sidebar-link {
    color: rgba(238, 238, 232, .70) !important;
}

.sidebar-link i {
    color: rgba(238, 238, 232, .62) !important;
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}

.sidebar-link.is-active {
    background: #fbf4ed !important;
    color: #111615 !important;
    box-shadow:
        -2px 0 0 rgba(244, 173, 140, .88),
        0 14px 34px rgba(0, 0, 0, .18) !important;
}

.sidebar-link.is-active i {
    color: #5e678f !important;
}

.sidebar-group-title {
    color: rgba(238, 238, 232, .54) !important;
}

.sidebar-bottom {
    border-top-color: rgba(255, 255, 255, .10) !important;
    background: linear-gradient(180deg, rgba(32, 35, 33, .80), rgba(22, 24, 23, .92)) !important;
}

.sidebar-user,
.sidebar-user .user-name {
    color: #fff !important;
}

.sidebar-user .user-meta {
    color: rgba(238, 238, 232, .58) !important;
}

.sidebar-toggle {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    color: rgba(255, 255, 255, .72) !important;
}

.sidebar-user .avatar.has-photo,
.topbar-user-avatar.has-photo {
    padding: 0 !important;
    overflow: hidden;
    background: transparent !important;
}

.sidebar-user .avatar.has-photo img,
.topbar-user-avatar.has-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.dashboard-page-v2 .dash-student-head .dash-view-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto;
    min-width: 72px;
    height: 34px;
    margin: 0;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 14px;
    background: rgba(255, 255, 255, .14) !important;
    color: rgba(255, 255, 255, .88) !important;
    font-size: .78rem;
    line-height: 1;
    cursor: pointer;
}

.dashboard-page-v2 .dash-student-head .dash-view-toggle:hover {
    background: rgba(255, 255, 255, .20) !important;
}

.dashboard-page-v2 .dash-student-head .dash-view-toggle i {
    font-size: .95rem;
    color: inherit !important;
}

.dashboard-page-v2 .dash-student-head .dash-view-toggle span {
    position: static !important;
    display: inline !important;
    width: auto !important;
    color: inherit !important;
    font-size: inherit !important;
    letter-spacing: 0;
    text-transform: none;
}

.dashboard-page-v2 .dash-start-notices .dash-notice,
.dashboard-page-v2 .dash-start-notices .dash-notice.is-unread {
    background: transparent !important;
}

.dashboard-page-v2 .dash-start-notices .dash-notice:hover {
    background: rgba(94, 103, 143, .06) !important;
}

.dashboard-page-v2 .dash-start-notices .dash-notice strong {
    display: block;
}

.dashboard-page-v2 .dash-start-notices .dash-notice .dash-notice-company {
    display: inline !important;
    margin-left: 5px;
    color: var(--aplsin-acero-purple) !important;
    font-style: normal;
    font-weight: 600;
}

.dashboard-page-v2 .dash-month-card .dash-section-head h2 i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    border-radius: 11px;
    background: var(--aplsin-acero-purple-2) !important;
    color: #fff !important;
}

/* Card/list fix: keep the toggle reachable and restore readable table headers. */
.dashboard-page-v2 .dash-student-row:not(.dash-student-head):not(.dash-student-group-head),
.dashboard-page-v2 .dash-student-head {
    grid-template-columns:
        minmax(118px, .70fr)
        minmax(150px, .84fr)
        86px
        86px
        118px
        74px
        82px
        68px
        42px !important;
    gap: 12px !important;
}

.dashboard-page-v2 .dash-student-head > span:nth-child(6),
.dashboard-page-v2 .dash-student-head > span:nth-child(7),
.dashboard-page-v2 .dash-student-head > span:nth-child(8) {
    min-width: 0;
    text-align: center;
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-student-table {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 14px !important;
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-student-head {
    display: flex !important;
    grid-column: 1 / -1;
    justify-content: flex-end;
    align-items: center;
    min-width: 0 !important;
    min-height: 48px;
    padding: 8px 12px !important;
    border: 0;
    border-radius: 16px;
    background: var(--aplsin-acero-purple) !important;
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-student-head > span {
    display: none !important;
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-student-head > span:last-child {
    position: static !important;
    display: block !important;
    width: auto !important;
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-student-head .dash-view-toggle {
    min-width: 42px;
    background: var(--aplsin-acero-peach) !important;
    border-color: rgba(255, 255, 255, .32);
    color: var(--aplsin-acero-ink) !important;
}

.dashboard-page-v2 .dash-student-head .dash-view-toggle {
    min-width: 42px !important;
    width: 42px !important;
    padding: 0 !important;
    gap: 0 !important;
}

.dashboard-page-v2 .dash-student-head .dash-view-toggle span {
    display: none !important;
}

.dashboard-page-v2 .dash-student-head .dash-view-toggle i {
    margin: 0 !important;
}

/* 1-5: ACERO dashboard pass: grey nav, peach notices, grey table rhythm, no purple table frame. */
:root {
    --aplsin-ref-orange: #f4ad8c;
    --aplsin-ref-orange-soft: #fff0e6;
    --aplsin-ref-orange-line: #ffd3bd;
    --aplsin-ref-purple: #5f6892;
    --aplsin-ref-purple-soft: #eef0f8;
    --aplsin-ref-grey-bg: #f4f2ef;
    --aplsin-ref-grey-row: #f6f5f2;
    --aplsin-ref-grey-line: #e4e0d9;
    --aplsin-ref-grey-text: #8b8a86;
    --aplsin-ref-ink: #202126;
}

.sidebar {
    background: var(--aplsin-ref-grey-bg) !important;
    border-right: 1px solid var(--aplsin-ref-grey-line) !important;
    color: var(--aplsin-ref-ink) !important;
}

.sidebar-brand {
    color: var(--aplsin-ref-ink) !important;
    border-bottom-color: var(--aplsin-ref-grey-line) !important;
}

.sidebar-link,
.sidebar-bottom-link {
    color: var(--aplsin-ref-grey-text) !important;
}

.sidebar-link i,
.sidebar-bottom-link i {
    color: #bebbb5 !important;
}

.sidebar-link:hover,
.sidebar-bottom-link:hover {
    background: rgba(255, 255, 255, .64) !important;
    color: var(--aplsin-ref-ink) !important;
}

.sidebar-link.is-active,
.sidebar-bottom-link.is-active {
    background: #fff !important;
    color: var(--aplsin-ref-ink) !important;
    box-shadow: inset -5px 0 0 var(--aplsin-ref-purple) !important;
}

.sidebar-link.is-active i,
.sidebar-bottom-link.is-active i {
    color: var(--aplsin-ref-orange) !important;
}

.sidebar-group-title {
    color: #aaa6a0 !important;
}

.sidebar-bottom {
    background: var(--aplsin-ref-grey-bg) !important;
    border-top-color: var(--aplsin-ref-grey-line) !important;
}

.sidebar-bottom-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 16px;
    text-decoration: none;
    font-weight: 500;
}

.sidebar-bottom-link i {
    font-size: 1.1rem;
}

.sidebar-toggle {
    background: rgba(255, 255, 255, .72) !important;
    border-color: var(--aplsin-ref-grey-line) !important;
    color: var(--aplsin-ref-grey-text) !important;
}

.dashboard-page-v2 .dash-main-card {
    overflow: hidden;
    border: 1px solid var(--aplsin-ref-grey-line) !important;
    background: #fff !important;
    box-shadow: 0 18px 46px rgba(95, 104, 146, .10) !important;
}

.dashboard-page-v2 .dash-student-table {
    margin: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
}

.dashboard-page-v2 .dash-student-head {
    background: var(--aplsin-ref-grey-row) !important;
    color: #757b82 !important;
    border-bottom: 1px solid var(--aplsin-ref-grey-line) !important;
}

.dashboard-page-v2 .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) {
    background: #fff !important;
    border-bottom: 12px solid var(--aplsin-ref-grey-row) !important;
}

.dashboard-page-v2 .dash-student-row:not(.dash-student-head):not(.dash-student-group-head):hover {
    background: #fffaf6 !important;
}

.dashboard-page-v2 .dash-student-group-head,
.dashboard-page-v2 .dash-student-group-head-no-apl {
    background: var(--aplsin-ref-grey-row) !important;
    border-top: 1px solid var(--aplsin-ref-grey-line) !important;
    border-bottom: 1px solid var(--aplsin-ref-grey-line) !important;
    color: #666b72 !important;
}

.dashboard-page-v2 .dash-start-notices {
    background: var(--aplsin-ref-orange-soft) !important;
    border-color: var(--aplsin-ref-orange-line) !important;
    box-shadow: 0 20px 42px rgba(244, 173, 140, .18) !important;
}

.dashboard-page-v2 .dash-start-notices .dash-side-head {
    background: var(--aplsin-ref-orange) !important;
    border-bottom-color: var(--aplsin-ref-orange-line) !important;
}

.dashboard-page-v2 .dash-start-notices .dash-side-head h2,
.dashboard-page-v2 .dash-start-notices .dash-side-head h2 i {
    color: var(--aplsin-ref-ink) !important;
}

.dashboard-page-v2 .dash-start-notices .dash-notice,
.dashboard-page-v2 .dash-start-notices .dash-notice.is-unread {
    background: transparent !important;
    border-bottom-color: rgba(244, 173, 140, .28) !important;
}

.dashboard-page-v2 .dash-start-notices .dash-notice:hover {
    background: rgba(255, 255, 255, .42) !important;
}

.dashboard-page-v2 .dash-notice-dot,
.dashboard-page-v2 .dash-notice.is-unread .dash-notice-dot {
    background: var(--aplsin-ref-orange) !important;
    box-shadow: 0 0 0 6px rgba(244, 173, 140, .22) !important;
}

.dashboard-page-v2 .dash-start-notices .dash-notice:not(.is-unread) .dash-notice-dot {
    background: #bcb8b2 !important;
    box-shadow: none !important;
}

.dashboard-page-v2 .dash-today-state,
.dashboard-page-v2 .dash-status-icon,
.dashboard-page-v2 .dash-contract-status,
.dashboard-page-v2 .dash-visit-compact,
.dashboard-page-v2 .dash-expand-button {
    border-color: var(--aplsin-ref-grey-line) !important;
    background: #fff !important;
    color: var(--aplsin-ref-grey-text) !important;
}

.dashboard-page-v2 .dash-state-in,
.dashboard-page-v2 .dash-state-present,
.dashboard-page-v2 .dash-table-notice-cell.is-read,
.dashboard-page-v2 .dash-status-ok,
.dashboard-page-v2 .dash-visit-done {
    background: var(--aplsin-ref-purple-soft) !important;
    border-color: rgba(95, 104, 146, .28) !important;
    color: var(--aplsin-ref-purple) !important;
}

.dashboard-page-v2 .dash-state-in i,
.dashboard-page-v2 .dash-state-present i,
.dashboard-page-v2 .dash-table-notice-cell.is-read i,
.dashboard-page-v2 .dash-status-ok i {
    color: var(--aplsin-ref-purple) !important;
}

.dashboard-page-v2 .dash-state-missing,
.dashboard-page-v2 .dash-state-absent,
.dashboard-page-v2 .dash-state-pending,
.dashboard-page-v2 .dash-state-planned,
.dashboard-page-v2 .dash-table-notice-cell.is-unread,
.dashboard-page-v2 .dash-status-warn,
.dashboard-page-v2 .dash-visit-planned {
    background: var(--aplsin-ref-orange-soft) !important;
    border-color: var(--aplsin-ref-orange-line) !important;
    color: #bd6f37 !important;
}

.dashboard-page-v2 .dash-state-missing i,
.dashboard-page-v2 .dash-state-absent i,
.dashboard-page-v2 .dash-state-pending i,
.dashboard-page-v2 .dash-state-planned i,
.dashboard-page-v2 .dash-table-notice-cell.is-unread i,
.dashboard-page-v2 .dash-status-warn i {
    color: #bd6f37 !important;
}

.dashboard-page-v2 .dash-period-track {
    background: #fff !important;
    border-color: var(--aplsin-ref-grey-line) !important;
}

.dashboard-page-v2 .dash-period-track .dash-day {
    color: #77736d !important;
}

.dashboard-page-v2 .dash-period-track .dash-day-present {
    background: var(--aplsin-ref-purple-soft) !important;
    border-color: rgba(95, 104, 146, .26) !important;
    color: var(--aplsin-ref-purple) !important;
}

.dashboard-page-v2 .dash-period-track .dash-day-absent,
.dashboard-page-v2 .dash-period-track .dash-day-missing {
    background: var(--aplsin-ref-orange-soft) !important;
    border-color: var(--aplsin-ref-orange-line) !important;
    color: #bd6f37 !important;
}

.dashboard-page-v2 .dash-period-track .dash-day-upcoming,
.dashboard-page-v2 .dash-period-track .dash-day-future,
.dashboard-page-v2 .dash-period-track .dash-day-empty {
    background: #f2f0ec !important;
    border-color: #ebe6de !important;
    color: #9d9891 !important;
}

.dashboard-page-v2 .dash-student-head .dash-view-toggle {
    background: var(--aplsin-ref-orange) !important;
    border-color: var(--aplsin-ref-orange-line) !important;
    color: var(--aplsin-ref-ink) !important;
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-student-head {
    background: var(--aplsin-ref-grey-row) !important;
}

.dashboard-page-v2 .dash-main-card.is-card-mode .dash-student-head .dash-view-toggle {
    background: var(--aplsin-ref-orange) !important;
    color: var(--aplsin-ref-ink) !important;
}

.dashboard-page-v2 .dash-side-head h2 i,
.dashboard-page-v2 .dash-start-card-footer i,
.dashboard-page-v2 .dash-expand-button i {
    color: var(--aplsin-ref-purple) !important;
}

.dashboard-page-v2 .dash-empty-cell,
.dashboard-page-v2 .dash-status-dash {
    color: #aaa6a0 !important;
}

.app-shell.is-collapsed .sidebar-bottom-link span {
    display: none;
}

.app-shell.is-collapsed .sidebar-bottom-link {
    justify-content: center;
    padding: 0;
}

/* Dashboard status refinement: filled purple/peach chips and icon-only notice/contract cells. */
.dashboard-page-v2 .dash-workplace-cell .dash-link-button,
.dashboard-page-v2 .dash-workplace-cell .dash-link-button:hover,
.dashboard-page-v2 .dash-workplace-cell .dash-link-button:focus-visible {
    color: var(--aplsin-ref-purple) !important;
}

.dashboard-page-v2 .dash-today-state {
    justify-content: center !important;
    gap: 8px !important;
    width: 92px !important;
    min-width: 92px !important;
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: .78rem !important;
}

.dashboard-page-v2 .dash-today-state i {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-size: .86rem !important;
    color: currentColor !important;
}

.dashboard-page-v2 .dash-today-state span {
    color: currentColor !important;
    font-size: .78rem !important;
}

.dashboard-page-v2 .dash-today-state.dash-state-present {
    background: var(--aplsin-ref-purple) !important;
    border-color: var(--aplsin-ref-purple) !important;
    color: #fff !important;
}

.dashboard-page-v2 .dash-today-state.dash-state-missing,
.dashboard-page-v2 .dash-today-state.dash-state-absent,
.dashboard-page-v2 .dash-today-state.dash-state-planned,
.dashboard-page-v2 .dash-today-state.dash-state-none {
    background: var(--aplsin-ref-orange) !important;
    border-color: var(--aplsin-ref-orange) !important;
    color: var(--aplsin-ref-ink) !important;
}

.dashboard-page-v2 .dash-period-track {
    gap: 4px !important;
    padding: 3px !important;
    background: #fff !important;
    border-color: var(--aplsin-ref-grey-line) !important;
}

.dashboard-page-v2 .dash-period-track .dash-day {
    width: 24px !important;
    height: 22px !important;
    border-radius: 8px !important;
    border: 0 !important;
    color: #fff !important;
    font-size: .58rem !important;
    font-weight: 500 !important;
}

.dashboard-page-v2 .dash-period-track .dash-day-present {
    background: var(--aplsin-ref-purple) !important;
    color: #fff !important;
}

.dashboard-page-v2 .dash-period-track .dash-day-absent,
.dashboard-page-v2 .dash-period-track .dash-day-missing {
    background: var(--aplsin-ref-orange) !important;
    color: var(--aplsin-ref-ink) !important;
}

.dashboard-page-v2 .dash-period-track .dash-day-future,
.dashboard-page-v2 .dash-period-track .dash-day-empty {
    background: #e8e3dc !important;
    color: #77716a !important;
}

.dashboard-page-v2 .dash-status-icon.dash-table-notice-cell,
.dashboard-page-v2 .dash-status-icon.dash-contract-status {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.dashboard-page-v2 .dash-status-icon.dash-table-notice-cell i,
.dashboard-page-v2 .dash-status-icon.dash-contract-status i {
    font-size: 1.12rem !important;
    color: currentColor !important;
}

.dashboard-page-v2 .dash-status-icon.dash-table-notice-cell.is-read,
.dashboard-page-v2 .dash-status-icon.dash-contract-status.dash-status-ok {
    background: transparent !important;
    color: var(--aplsin-ref-purple) !important;
}

.dashboard-page-v2 .dash-status-icon.dash-table-notice-cell.is-unread,
.dashboard-page-v2 .dash-status-icon.dash-contract-status.dash-status-warn {
    background: transparent !important;
    color: #bd6f37 !important;
}

.dashboard-page-v2 .dash-status-icon.dash-table-notice-cell.is-empty {
    background: transparent !important;
    color: #aaa6a0 !important;
}

.dashboard-page-v2 .dash-visit-compact {
    min-width: 60px !important;
    height: 30px !important;
    border-radius: 10px !important;
    font-size: .72rem !important;
}

.dashboard-page-v2 .dash-visit-compact.dash-visit-done {
    background: var(--aplsin-ref-purple) !important;
    border-color: var(--aplsin-ref-purple) !important;
    color: #fff !important;
}

.dashboard-page-v2 .dash-visit-compact.dash-visit-planned,
.dashboard-page-v2 .dash-visit-compact.dash-visit-none {
    background: var(--aplsin-ref-orange) !important;
    border-color: var(--aplsin-ref-orange) !important;
    color: var(--aplsin-ref-ink) !important;
}

/* Dashboard table alignment pass: no notice column, tighter identity columns. */
.dashboard-page-v2 .dash-student-row:not(.dash-student-head):not(.dash-student-group-head),
.dashboard-page-v2 .dash-student-head {
    grid-template-columns:
        minmax(108px, .58fr)
        minmax(132px, .70fr)
        82px
        72px
        132px
        44px
        58px
        34px !important;
    gap: 10px !important;
    align-items: center !important;
}

.dashboard-page-v2 .dash-student-head > span {
    min-width: 0;
}

.dashboard-page-v2 .dash-student-head > span:nth-child(n+3):not(:last-child) {
    justify-self: center;
    text-align: center;
}

.dashboard-page-v2 .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) > :nth-child(n+3) {
    justify-self: center;
}

.dashboard-page-v2 .dash-student-identity {
    min-width: 0;
}

.dashboard-page-v2 .dash-student-name {
    white-space: nowrap;
}

.dashboard-page-v2 .dash-workplace-cell {
    min-width: 0;
}

.dashboard-page-v2 .dash-workplace-cell .dash-link-button {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-page-v2 .dash-workplace-cell .dash-table-muted {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-page-v2 .dash-today-state {
    width: 70px !important;
    min-width: 70px !important;
    height: 32px !important;
    padding: 0 10px !important;
}

.dashboard-page-v2 .dash-today-state i {
    display: none !important;
}

.dashboard-page-v2 .dash-today-state span {
    font-size: .76rem !important;
    line-height: 1 !important;
}

.dashboard-page-v2 .dash-period-track {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    gap: 3px !important;
    padding: 3px !important;
}

.dashboard-page-v2 .dash-period-track .dash-day {
    flex: 0 0 22px !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    border-radius: 7px !important;
    font-size: .55rem !important;
    line-height: 1 !important;
}

.dashboard-page-v2 .dash-status-icon.dash-contract-status {
    justify-self: center !important;
}

.dashboard-page-v2 .dash-visit-compact {
    justify-self: center !important;
    min-width: 56px !important;
    width: 56px !important;
}

.dashboard-page-v2 .dash-expand-button {
    justify-self: center !important;
}

/* Dashboard table hard lock: headers and cells share the exact same columns. */
.dashboard-page-v2 {
    --dash-dashboard-table-columns:
        minmax(150px, 190px)
        minmax(210px, 320px)
        112px
        112px
        152px
        58px
        76px
        44px;
}

.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-row:not(.dash-student-group-head),
.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-head {
    display: grid !important;
    grid-template-columns: var(--dash-dashboard-table-columns) !important;
    justify-content: space-between !important;
    column-gap: 12px !important;
}

.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-head > span:last-child {
    position: static !important;
    inset: auto !important;
    width: auto !important;
}

.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-head > span:nth-child(1),
.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) > :nth-child(1) {
    grid-column: 1 !important;
}

.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-head > span:nth-child(2),
.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) > :nth-child(2) {
    grid-column: 2 !important;
}

.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-head > span:nth-child(3),
.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) > :nth-child(3) {
    grid-column: 3 !important;
}

.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-head > span:nth-child(4),
.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) > :nth-child(4) {
    grid-column: 4 !important;
}

.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-head > span:nth-child(5),
.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) > :nth-child(5) {
    grid-column: 5 !important;
}

.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-head > span:nth-child(6),
.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) > :nth-child(6) {
    grid-column: 6 !important;
}

.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-head > span:nth-child(7),
.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) > :nth-child(7) {
    grid-column: 7 !important;
}

.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-head > span:nth-child(8),
.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) > :nth-child(8) {
    grid-column: 8 !important;
}

.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-head > span:nth-child(n+3),
.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) > :nth-child(n+3) {
    justify-self: center !important;
    text-align: center !important;
}

.dashboard-page-v2 .dash-period-cell {
    width: 112px !important;
    justify-items: center !important;
    text-align: center !important;
}

/* Global page/table harmonisation: make app pages follow the dashboard table language. */
:root {
    --aplsin-table-head-bg: var(--aplsin-ref-grey-row);
    --aplsin-table-row-gap: var(--aplsin-ref-grey-row);
    --aplsin-table-border: var(--aplsin-ref-grey-line);
    --aplsin-table-link: var(--aplsin-ref-purple);
    --aplsin-table-muted: #78827f;
    --aplsin-table-shadow: 0 18px 46px rgba(95, 104, 146, .10);
}

body,
button,
input,
select,
textarea {
    font-family: "Manrope", "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.page:not(.dashboard-page-v2),
.placement-page,
.contract-page {
    color: var(--aplsin-ref-ink);
}

.page:not(.dashboard-page-v2) h1,
.placement-header h1,
.contract-header h1,
.rev-header h1 {
    color: var(--aplsin-ref-ink) !important;
    font-weight: 600 !important;
    letter-spacing: -.035em !important;
}

.card,
.wp-card,
.wp-sidebar-card,
.placement-toolbar,
.placement-student-panel,
.placement-workplace-table-wrap,
.contract-card,
.rev-card {
    background: #fff !important;
    border: 1px solid var(--aplsin-table-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--aplsin-table-shadow) !important;
}

.card:has(table),
.wp-card:has(table),
.placement-workplace-table-wrap,
.po-card:has(table) {
    overflow: hidden !important;
}

.field-label,
.placement-field label,
.wp-filter-field label,
.card-h h3,
.wp-sidebar-card h3 {
    color: #757b82 !important;
    font-weight: 500 !important;
    letter-spacing: .055em !important;
}

.input,
.select,
.textarea,
.form-control,
.placement-toolbar .form-control,
.wp-filter-field input,
.wp-filter-field select {
    background: #fff !important;
    border: 1px solid var(--aplsin-table-border) !important;
    color: var(--aplsin-ref-ink) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    font-weight: 400 !important;
}

.input:focus,
.select:focus,
.textarea:focus,
.form-control:focus,
.placement-toolbar .form-control:focus,
.wp-filter-field input:focus,
.wp-filter-field select:focus {
    border-color: var(--aplsin-ref-purple) !important;
    box-shadow: 0 0 0 3px rgba(95, 104, 146, .14) !important;
}

.adm-tbl,
.wp-table,
.placement-workplace-table,
.po-tbl,
.imp-table,
.page table:not(.dash-student-table) {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: #fff !important;
    color: var(--aplsin-ref-ink) !important;
    font-size: var(--fs-sm) !important;
}

.adm-tbl thead th,
.wp-table thead th,
.placement-workplace-table thead th,
.po-tbl thead th,
.imp-table thead th,
.page table:not(.dash-student-table) thead th {
    background: var(--aplsin-table-head-bg) !important;
    color: #757b82 !important;
    border-bottom: 1px solid var(--aplsin-table-border) !important;
    padding: 16px 18px !important;
    font-size: .78rem !important;
    font-weight: 500 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.adm-tbl tbody td,
.wp-table tbody td,
.placement-workplace-table tbody td,
.po-tbl tbody td,
.imp-table tbody td,
.page table:not(.dash-student-table) tbody td {
    background: #fff !important;
    border-bottom: 12px solid var(--aplsin-table-row-gap) !important;
    color: var(--aplsin-ref-ink) !important;
    padding: 16px 18px !important;
    font-size: var(--fs-sm) !important;
    font-weight: 400 !important;
    vertical-align: middle !important;
}

.adm-tbl tbody tr:last-child td,
.wp-table tbody tr:last-child td,
.placement-workplace-table tbody tr:last-child td,
.po-tbl tbody tr:last-child td,
.imp-table tbody tr:last-child td,
.page table:not(.dash-student-table) tbody tr:last-child td {
    border-bottom-width: 0 !important;
}

.adm-tbl tbody tr:hover td,
.wp-table tbody tr:hover td,
.placement-workplace-table tbody tr:hover td,
.po-tbl tbody tr:hover td,
.imp-table tbody tr:hover td,
.page table:not(.dash-student-table) tbody tr:hover td {
    background: #fffaf6 !important;
}

.adm-tbl td a,
.wp-table td a,
.placement-workplace-table td a,
.po-tbl td a,
.imp-table td a,
.placement-company-name,
.placement-company-name span,
.placement-workplace-table .placement-students-line,
.wp-table .note-mini a {
    color: var(--aplsin-table-link) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.adm-tbl td small,
.adm-tbl td [style*="muted"],
.wp-table .note-meta,
.wp-table td,
.placement-empty,
.placement-note-cell,
.placement-students-cell,
.placement-workplace-summary,
.placement-student-match,
.placement-workplace-table tbody td {
    color: var(--aplsin-table-muted);
}

.placement-workplace-table tfoot td,
.placement-table-safe-row td {
    background: var(--aplsin-table-row-gap) !important;
    border: 0 !important;
    height: 8px !important;
    padding: 0 !important;
}

.pill,
.badge,
.risk-badge,
.placement-place-state,
.track-chip,
.council-chip {
    border-radius: 999px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.pill-success,
.risk-approved,
.placement-place-state.is-free {
    background: var(--aplsin-ref-purple-soft) !important;
    color: var(--aplsin-ref-purple) !important;
}

.pill-warning,
.risk-unknown,
.placement-place-state.is-partial,
.placement-place-state.is-full {
    background: var(--aplsin-ref-orange-soft) !important;
    color: #bd6f37 !important;
}

.btn-primary,
.placement-floating-actions .btn:not(.btn-secondary) {
    background: var(--aplsin-ref-purple) !important;
    border-color: var(--aplsin-ref-purple) !important;
    color: #fff !important;
}

.btn-accent,
.placement-add-btn {
    background: var(--aplsin-ref-orange) !important;
    border-color: var(--aplsin-ref-orange-line) !important;
    color: var(--aplsin-ref-ink) !important;
}

.btn-outline,
.btn-ghost,
.placement-remove-btn {
    border-color: var(--aplsin-table-border) !important;
    color: #6f7883 !important;
}

.placement-layout {
    gap: 22px !important;
}

.placement-student-list-header {
    background: var(--aplsin-table-head-bg) !important;
    color: #757b82 !important;
    border-bottom: 1px solid var(--aplsin-table-border) !important;
    font-weight: 500 !important;
}

.placement-student-row {
    background: #fff !important;
    border-bottom: 1px solid var(--aplsin-table-border) !important;
    color: var(--aplsin-ref-ink) !important;
    font-weight: 400 !important;
}

.placement-student-row:hover,
.placement-student-row.is-selected,
.placement-student-row.is-draft-matched {
    background: #fffaf6 !important;
}

.placement-student-row.is-selected {
    box-shadow: inset 4px 0 0 var(--aplsin-ref-purple) !important;
}

.wp-sidebar-card .wp-note-item,
.dash-side-card,
.dash-month-card {
    border-color: var(--aplsin-table-border) !important;
}

/* Global app-shell finish: every page gets the same start-page surface and title treatment. */
:root {
    --aplsin-app-page-bg: var(--aplsin-page-blue-bg);
    --aplsin-topbar-title-icon-bg: var(--aplsin-ref-orange);
    --aplsin-topbar-title-icon-fg: var(--aplsin-ref-ink);
}

body,
.app-main {
    background: var(--aplsin-app-page-bg) !important;
}

.topbar {
    background: rgba(255, 251, 245, .90) !important;
    border-bottom: 1px solid rgba(226, 210, 192, .72) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .56) !important;
}

.topbar-page-title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--aplsin-ref-ink);
}

.topbar-page-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--aplsin-topbar-title-icon-bg);
    color: var(--aplsin-topbar-title-icon-fg);
    box-shadow: 0 10px 24px rgba(244, 173, 140, .24);
}

.topbar-page-icon i {
    font-size: 1rem;
    line-height: 1;
}

.topbar-page-label {
    display: block;
    overflow: hidden;
    max-width: min(34vw, 420px);
    color: var(--aplsin-ref-ink);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page:not(.dashboard-page-v2),
.placement-page,
.contract-page {
    max-width: none !important;
    background: transparent !important;
}

.page:not(.dashboard-page-v2) > .page-header,
.placement-header,
.contract-header,
.rev-header {
    color: var(--aplsin-ref-ink);
}

@media (max-width: 760px) {
    .topbar-page-label {
        max-width: 44vw;
        font-size: .96rem;
    }

    .topbar-page-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        border-radius: 12px;
    }
}

/* Topbar is the single page title: black icon/text, no duplicate local page h1. */
.topbar-page-title {
    gap: 10px !important;
}

.topbar-page-icon {
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--aplsin-ref-ink) !important;
    box-shadow: none !important;
}

.topbar-page-icon i {
    color: currentColor !important;
    font-size: 1.05rem !important;
}

.topbar-page-label {
    color: var(--aplsin-ref-ink) !important;
}

.app-main > .page:not(.dashboard-page-v2) > .page-header h1,
.app-main > .page:not(.dashboard-page-v2) > .placement-header > h1,
.app-main > .page:not(.dashboard-page-v2) > .contract-header h1,
.app-main > .page:not(.dashboard-page-v2) > .rev-header h1,
.app-main > .page:not(.dashboard-page-v2) > div:first-child h1:first-child,
.app-main > .page:not(.dashboard-page-v2) > section:first-child h1:first-child {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* ACERO reference pass: white workspace, grey controls/tables, peach + purple as accents only. */
:root {
    --aplsin-ref-page: #ffffff;
    --aplsin-ref-sidebar: #f6f5f3;
    --aplsin-ref-sidebar-line: #ece8e2;
    --aplsin-ref-control: #f8f7f5;
    --aplsin-ref-control-2: #f3f2ef;
    --aplsin-ref-table-band: #f4f3f0;
    --aplsin-ref-table-head: #f7f6f3;
    --aplsin-ref-line: #e8e3dc;
    --aplsin-ref-muted: #96948f;
    --aplsin-ref-muted-2: #777c79;
    --aplsin-ref-peach: #f4ad8c;
    --aplsin-ref-peach-soft: #fff2ea;
    --aplsin-ref-lilac: #5f6892;
    --aplsin-ref-lilac-soft: #eef0f8;
    --aplsin-page-blue-bg: var(--aplsin-ref-page);
    --aplsin-app-page-bg: var(--aplsin-ref-page);
    --aplsin-table-head-bg: var(--aplsin-ref-table-head);
    --aplsin-table-row-gap: var(--aplsin-ref-table-band);
    --aplsin-table-border: var(--aplsin-ref-line);
    --aplsin-table-link: var(--aplsin-ref-lilac);
    --aplsin-table-muted: var(--aplsin-ref-muted-2);
    --aplsin-table-shadow: 0 18px 44px rgba(39, 35, 31, .055);
}

html,
body,
.app-shell,
.app-main {
    background: var(--aplsin-ref-page) !important;
}

.topbar {
    background: var(--aplsin-ref-page) !important;
    border-bottom: 1px solid var(--aplsin-ref-sidebar-line) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.topbar-page-title,
.topbar-page-icon,
.topbar-page-label {
    color: var(--aplsin-ref-ink) !important;
}

.topbar-user-copy small,
.page-sub,
.wp-table small,
.adm-tbl small {
    color: var(--aplsin-ref-muted-2) !important;
}

.sidebar {
    background: var(--aplsin-ref-sidebar) !important;
    border-right: 1px solid var(--aplsin-ref-sidebar-line) !important;
    color: var(--aplsin-ref-ink) !important;
    box-shadow: none !important;
}

.sidebar-brand,
.sidebar-bottom {
    background: var(--aplsin-ref-sidebar) !important;
    border-color: var(--aplsin-ref-sidebar-line) !important;
}

.sidebar-brand {
    color: var(--aplsin-ref-ink) !important;
}

.sidebar-link,
.sidebar-bottom-link {
    color: var(--aplsin-ref-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sidebar-link i,
.sidebar-bottom-link i {
    color: #b8b5ae !important;
}

.sidebar-link:hover,
.sidebar-bottom-link:hover {
    background: rgba(255, 255, 255, .68) !important;
    color: var(--aplsin-ref-ink) !important;
}

.sidebar-link.is-active,
.sidebar-bottom-link.is-active {
    background: #fff !important;
    color: var(--aplsin-ref-ink) !important;
    box-shadow:
        inset -5px 0 0 var(--aplsin-ref-lilac),
        0 12px 28px rgba(35, 35, 31, .045) !important;
}

.sidebar-link.is-active i,
.sidebar-bottom-link.is-active i {
    color: var(--aplsin-ref-peach) !important;
}

.sidebar-group-title {
    color: #aaa6a0 !important;
}

.sidebar-toggle {
    background: #fff !important;
    border-color: var(--aplsin-ref-sidebar-line) !important;
    color: var(--aplsin-ref-muted) !important;
}

.page:not(.dashboard-page-v2),
.placement-page,
.contract-page {
    background: var(--aplsin-ref-page) !important;
}

.dashboard-page-v2 {
    background: var(--aplsin-ref-page) !important;
}

.dashboard-page-v2 .dash-start-row {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.card,
.wp-card,
.wp-sidebar-card,
.placement-toolbar,
.placement-student-panel,
.placement-workplace-table-wrap,
.contract-card,
.rev-card,
.dashboard-page-v2 .dash-main-card,
.dashboard-page-v2 .dash-start-row > section,
.dashboard-page-v2 .dash-month-card,
.dashboard-page-v2 .dash-start-notices {
    background: #fff !important;
    border: 1px solid var(--aplsin-ref-line) !important;
    box-shadow: var(--aplsin-table-shadow) !important;
}

.input,
.select,
.textarea,
.form-control,
.placement-toolbar .form-control,
.wp-filter-field input,
.wp-filter-field select,
.placement-field input,
.placement-field select,
.placement-field textarea,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
    background: var(--aplsin-ref-control) !important;
    border: 1px solid var(--aplsin-ref-line) !important;
    color: var(--aplsin-ref-ink) !important;
    box-shadow: none !important;
}

.input::placeholder,
.form-control::placeholder,
.wp-filter-field input::placeholder,
input::placeholder,
textarea::placeholder {
    color: #aaa7a1 !important;
}

.input:focus,
.select:focus,
.textarea:focus,
.form-control:focus,
.placement-toolbar .form-control:focus,
.wp-filter-field input:focus,
.wp-filter-field select:focus,
input:focus,
select:focus,
textarea:focus {
    background: #fff !important;
    border-color: rgba(95, 104, 146, .42) !important;
    box-shadow: 0 0 0 3px rgba(95, 104, 146, .10) !important;
}

.filter-chips .chip,
.chip,
.track-chip,
.council-chip {
    background: var(--aplsin-ref-control) !important;
    color: #64706b !important;
    border-color: transparent !important;
}

.filter-chips .chip.is-active,
.chip.is-active {
    background: #111615 !important;
    color: #fff !important;
}

.filter-chips .chip span,
.chip span {
    background: rgba(17, 22, 21, .10) !important;
    color: inherit !important;
}

.filter-chips .chip.is-active span,
.chip.is-active span {
    background: rgba(255, 255, 255, .22) !important;
}

.adm-tbl thead th,
.wp-table thead th,
.placement-workplace-table thead th,
.po-tbl thead th,
.imp-table thead th,
.page table:not(.dash-student-table) thead th,
.dashboard-page-v2 .dash-student-head {
    background: var(--aplsin-ref-table-head) !important;
    color: #7d8381 !important;
    border-bottom: 1px solid var(--aplsin-ref-line) !important;
    font-weight: 500 !important;
}

.adm-tbl tbody td,
.wp-table tbody td,
.placement-workplace-table tbody td,
.po-tbl tbody td,
.imp-table tbody td,
.page table:not(.dash-student-table) tbody td {
    background: #fff !important;
    border-bottom: 12px solid var(--aplsin-ref-table-band) !important;
}

.dashboard-page-v2 .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) {
    background: #fff !important;
    border-bottom-color: var(--aplsin-ref-table-band) !important;
}

.adm-tbl tbody tr:hover td,
.wp-table tbody tr:hover td,
.placement-workplace-table tbody tr:hover td,
.po-tbl tbody tr:hover td,
.imp-table tbody tr:hover td,
.page table:not(.dash-student-table) tbody tr:hover td,
.dashboard-page-v2 .dash-student-row:not(.dash-student-head):not(.dash-student-group-head):hover {
    background: #fbfaf8 !important;
}

.adm-tbl td a,
.wp-table td a,
.placement-workplace-table td a,
.po-tbl td a,
.imp-table td a,
.placement-company-name,
.placement-company-name span,
.dashboard-page-v2 .dash-workplace-cell .dash-link-button,
.dashboard-page-v2 .dash-workplace-cell .dash-link-button:hover,
.dashboard-page-v2 .dash-workplace-cell .dash-link-button:focus-visible {
    color: var(--aplsin-ref-lilac) !important;
}

.btn-primary,
.placement-floating-actions .btn:not(.btn-secondary) {
    background: var(--aplsin-ref-lilac) !important;
    border-color: var(--aplsin-ref-lilac) !important;
}

.btn-accent,
.placement-add-btn,
.dashboard-page-v2 .dash-student-head .dash-view-toggle {
    background: var(--aplsin-ref-peach) !important;
    border-color: #f0b18f !important;
    color: var(--aplsin-ref-ink) !important;
}

.pill-success,
.risk-approved,
.placement-place-state.is-free {
    background: var(--aplsin-ref-lilac-soft) !important;
    color: var(--aplsin-ref-lilac) !important;
}

.pill-warning,
.risk-unknown,
.placement-place-state.is-partial,
.placement-place-state.is-full {
    background: var(--aplsin-ref-peach-soft) !important;
    color: #b96c35 !important;
}

/* APLSIN_REFERENCE_THEME_001
   Final ACERO reference layer. Visual only: keep markup, hooks and data intact. */
:root {
    --apl-bg: #f8f8f5;
    --apl-sidebar-bg: #f8f7f4;
    --apl-card: #ffffff;
    --apl-card-soft: #fbfaf8;
    --apl-border: #ece8e2;
    --apl-border-soft: #f2eee8;

    --apl-text: #252833;
    --apl-text-soft: #5f6472;
    --apl-muted: #9b9995;
    --apl-muted-light: #c9c6c0;

    --apl-blue: #58638f;
    --apl-blue-dark: #4f5b84;
    --apl-blue-soft: #eef0f8;

    --apl-peach: #f4ad8f;
    --apl-peach-dark: #e9906e;
    --apl-peach-soft: #fff0e8;

    --apl-row-alt: #f3f1ed;
    --apl-shadow: 0 18px 42px rgba(31, 35, 48, 0.06);
    --apl-shadow-soft: 0 10px 28px rgba(31, 35, 48, 0.045);

    --primary: var(--apl-blue);
    --primary-600: var(--apl-blue-dark);
    --primary-soft: var(--apl-blue-soft);
    --accent: var(--apl-peach);
    --accent-600: var(--apl-peach-dark);
    --accent-soft: var(--apl-peach-soft);
    --success: var(--apl-blue);
    --success-soft: var(--apl-blue-soft);
    --warning: var(--apl-peach);
    --warning-soft: var(--apl-peach-soft);
    --danger: var(--apl-peach-dark);
    --danger-soft: var(--apl-peach-soft);
    --surface: var(--apl-card);
    --surface-2: var(--apl-card-soft);
    --border: var(--apl-border);
    --border-strong: var(--apl-border);
    --text: var(--apl-text);
    --text-soft: var(--apl-text-soft);
    --muted: var(--apl-muted);
}

html,
body {
    background: var(--apl-bg) !important;
    color: var(--apl-text) !important;
}

body,
button,
input,
select,
textarea {
    font-family: "Manrope", "Plus Jakarta Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.app-shell,
.app-main,
.page,
.placement-page,
.contract-page,
.dashboard-page-v2 {
    background: var(--apl-bg) !important;
    color: var(--apl-text) !important;
}

.app-main::before,
.app-main::after,
.page::before,
.page::after {
    display: none !important;
}

body::-webkit-scrollbar,
.page::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.dash-notice-list::-webkit-scrollbar,
.dash-mini-list::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

body::-webkit-scrollbar-thumb,
.page::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb,
.dash-notice-list::-webkit-scrollbar-thumb,
.dash-mini-list::-webkit-scrollbar-thumb {
    background: rgba(155, 153, 149, 0.42) !important;
    border-radius: 999px !important;
}

body::-webkit-scrollbar-track,
.page::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track,
.dash-notice-list::-webkit-scrollbar-track,
.dash-mini-list::-webkit-scrollbar-track {
    background: transparent !important;
}

/* Shell and navigation */
.sidebar {
    background: var(--apl-sidebar-bg) !important;
    border-right: 1px solid var(--apl-border) !important;
    box-shadow: none !important;
    color: var(--apl-text) !important;
}

.sidebar-brand,
.sidebar-bottom {
    background: var(--apl-sidebar-bg) !important;
    border-color: var(--apl-border-soft) !important;
    box-shadow: none !important;
}

.sidebar-brand {
    color: var(--apl-text) !important;
}

.sidebar-logo-mark,
.sidebar-brand .brand-mark,
.sidebar-brand .logo-mark {
    background: transparent !important;
    color: var(--apl-text) !important;
    box-shadow: none !important;
}

.sidebar-link,
.sidebar-bottom-link {
    position: relative !important;
    background: transparent !important;
    color: var(--apl-muted) !important;
    border: 0 !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

.sidebar-link i,
.sidebar-bottom-link i {
    color: var(--apl-muted-light) !important;
}

.sidebar-link::before,
.sidebar-bottom-link::before {
    display: none !important;
}

.sidebar-link:hover,
.sidebar-bottom-link:hover {
    background: rgba(255, 255, 255, 0.72) !important;
    color: var(--apl-text) !important;
}

.sidebar-link:hover i,
.sidebar-bottom-link:hover i {
    color: var(--apl-peach) !important;
}

.sidebar-link.is-active,
.sidebar-bottom-link.is-active {
    background: var(--apl-card) !important;
    color: var(--apl-text) !important;
    border-radius: 18px !important;
    box-shadow: var(--apl-shadow-soft) !important;
}

.sidebar-link.is-active::after,
.sidebar-bottom-link.is-active::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 16px !important;
    bottom: 16px !important;
    width: 5px !important;
    border-radius: 999px 0 0 999px !important;
    background: var(--apl-blue) !important;
}

.sidebar-link.is-active i,
.sidebar-bottom-link.is-active i {
    color: var(--apl-peach) !important;
}

.sidebar-group-title {
    color: var(--apl-muted) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}

.sidebar-user-name,
.sidebar-user-meta,
.sidebar-bottom small {
    color: var(--apl-text-soft) !important;
}

.sidebar-toggle {
    background: var(--apl-card) !important;
    border: 1px solid var(--apl-border) !important;
    color: var(--apl-text-soft) !important;
    box-shadow: none !important;
}

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

.topbar {
    background: var(--apl-card) !important;
    border-bottom: 1px solid var(--apl-border) !important;
    box-shadow: none !important;
}

.topbar-page-title,
.topbar-page-icon,
.topbar-page-label,
.topbar h1,
.page-title,
.page h1 {
    color: var(--apl-text) !important;
    font-weight: 700 !important;
}

.topbar-page-icon {
    background: transparent !important;
    color: var(--apl-text) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.topbar-user,
.topbar-user-trigger,
.topbar-notice {
    background: transparent !important;
    border-color: var(--apl-border) !important;
    color: var(--apl-text) !important;
}

.topbar-user-copy small,
.page-sub,
.page-subtitle,
.muted,
small {
    color: var(--apl-text-soft) !important;
}

/* Cards, panels and common containers */
.card,
.empty,
.wp-card,
.wp-sidebar-card,
.placement-toolbar,
.placement-student-panel,
.placement-workplace-table-wrap,
.placement-floating-save,
.contract-card,
.rev-card,
.s-card,
.adm-tbl,
.po-wrap,
.po-bulk,
.imp-box,
.imp-card,
.sc,
.dashboard-page-v2 .dash-main-card,
.dashboard-page-v2 .dash-side-card,
.dashboard-page-v2 .dash-start-row > section,
.dashboard-page-v2 .dash-drawer-section,
.dashboard-page-v2 .dash-attendance-period-card,
.dashboard-page-v2 .dash-attendance-location-card {
    background: var(--apl-card) !important;
    border: 1px solid var(--apl-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--apl-shadow-soft) !important;
}

.dashboard-page-v2 .dash-start-row {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.card-h,
.dash-side-head,
.dash-section-head,
.placement-student-list-header,
.wp-sidebar-card h3,
.s-card > h3,
.adm-card h3 {
    border-bottom: 1px solid var(--apl-border) !important;
    color: var(--apl-text) !important;
}

/* Forms */
.input,
.select,
.textarea,
.form-control,
.placement-toolbar .form-control,
.wp-filter-field input,
.wp-filter-field select,
.placement-field input,
.placement-field select,
.placement-field textarea,
.form-group input,
.form-group textarea,
.form-group select,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
input[type="number"],
select,
textarea {
    background: var(--apl-card-soft) !important;
    border: 1px solid var(--apl-border) !important;
    border-radius: 14px !important;
    color: var(--apl-text) !important;
    box-shadow: none !important;
}

.input::placeholder,
.form-control::placeholder,
.wp-filter-field input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--apl-muted) !important;
}

.input:focus,
.select:focus,
.textarea:focus,
.form-control:focus,
.placement-toolbar .form-control:focus,
.wp-filter-field input:focus,
.wp-filter-field select:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
input:focus,
select:focus,
textarea:focus {
    background: var(--apl-card) !important;
    border-color: var(--apl-blue) !important;
    box-shadow: 0 0 0 4px rgba(88, 99, 143, 0.12) !important;
    outline: none !important;
}

.dropzone,
.upload-zone,
.imp-drop {
    background: var(--apl-card-soft) !important;
    border: 1px dashed var(--apl-muted-light) !important;
    color: var(--apl-text-soft) !important;
}

/* Buttons, pills and badges */
.btn-primary,
.btn-save,
.btn-po,
.placement-floating-actions .btn:not(.btn-secondary):not(.btn-outline):not(.btn-ghost) {
    background: var(--apl-blue) !important;
    border-color: var(--apl-blue) !important;
    color: #fff !important;
    box-shadow: var(--apl-shadow-soft) !important;
}

.btn-primary:hover,
.btn-save:hover,
.btn-po:hover {
    background: var(--apl-blue-dark) !important;
    border-color: var(--apl-blue-dark) !important;
}

.btn-accent,
.placement-add-btn,
.fab {
    background: var(--apl-peach) !important;
    border-color: var(--apl-peach) !important;
    color: var(--apl-text) !important;
    box-shadow: var(--apl-shadow-soft) !important;
}

.btn-outline,
.btn-ghost,
.btn-secondary,
.btn-reset,
.placement-floating-actions .btn-secondary,
.secondary-action,
.dash-start-card-footer a,
.dash-start-card-footer button {
    background: var(--apl-card) !important;
    border-color: var(--apl-border) !important;
    color: var(--apl-text-soft) !important;
    box-shadow: none !important;
}

.btn-outline:hover,
.btn-ghost:hover,
.btn-secondary:hover,
.btn-reset:hover {
    background: var(--apl-card-soft) !important;
    color: var(--apl-text) !important;
}

.chip,
.filter-chips .chip,
.track-chip,
.council-chip,
.tag,
.tag-list .tag,
.badge,
.pill,
.status-pill,
.risk-badge,
.cls-chip,
.track-badge,
.placement-place-state {
    background: var(--apl-card-soft) !important;
    border: 1px solid var(--apl-border) !important;
    color: var(--apl-text-soft) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

.chip.is-active,
.filter-chips .chip.is-active,
.tab-btn.active,
.track-tab.active,
.active-chip,
.is-active > .chip {
    background: var(--apl-blue) !important;
    border-color: var(--apl-blue) !important;
    color: #fff !important;
}

.chip span,
.filter-chips .chip span {
    background: rgba(88, 99, 143, 0.10) !important;
    color: inherit !important;
}

.chip.is-active span,
.filter-chips .chip.is-active span {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

.pill-success,
.badge-success,
.status-active,
.risk-approved,
.placement-place-state.is-free,
.dash-status-ok,
.dash-status-icon.dash-status-ok {
    background: var(--apl-blue-soft) !important;
    border-color: rgba(88, 99, 143, 0.22) !important;
    color: var(--apl-blue-dark) !important;
}

.pill-warning,
.badge-warning,
.status-warning,
.risk-unknown,
.risk-rejected,
.placement-place-state.is-partial,
.placement-place-state.is-full,
.dash-status-warn,
.dash-status-icon.dash-status-warn {
    background: var(--apl-peach-soft) !important;
    border-color: rgba(244, 173, 143, 0.55) !important;
    color: #a95f42 !important;
}

.pill-neutral,
.badge-neutral,
.status-inactive {
    background: var(--apl-card-soft) !important;
    border-color: var(--apl-border) !important;
    color: var(--apl-muted) !important;
}

button[style*="var(--error)"],
.btn-del-row,
.btn-danger {
    color: var(--apl-peach-dark) !important;
    border-color: rgba(244, 173, 143, 0.55) !important;
    background: var(--apl-peach-soft) !important;
}

/* Table system */
.aplsin-table-card,
.table-card,
.adm-tbl,
.wp-card:has(.wp-table),
.placement-workplace-table-wrap,
.po-wrap,
.imp-table,
.dashboard-page-v2 .dash-main-card {
    background: var(--apl-card) !important;
    border: 1px solid var(--apl-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--apl-shadow-soft) !important;
    overflow: hidden !important;
}

.page table,
.adm-tbl,
.wp-table,
.placement-workplace-table,
.po-tbl,
.imp-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.adm-tbl thead th,
.wp-table thead th,
.placement-workplace-table thead th,
.po-tbl thead th,
.imp-table thead th,
.page table:not(.dash-student-table) thead th,
.dashboard-page-v2 .dash-student-head {
    background: var(--apl-card-soft) !important;
    color: var(--apl-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 18px 22px !important;
    border-bottom: 1px solid var(--apl-border) !important;
}

.adm-tbl tbody td,
.wp-table tbody td,
.placement-workplace-table tbody td,
.po-tbl tbody td,
.imp-table tbody td,
.page table:not(.dash-student-table) tbody td {
    background: var(--apl-card) !important;
    color: var(--apl-text) !important;
    padding: 18px 22px !important;
    border-bottom: 8px solid var(--apl-row-alt) !important;
}

.adm-tbl tbody tr:last-child td,
.wp-table tbody tr:last-child td,
.placement-workplace-table tbody tr:last-child td,
.po-tbl tbody tr:last-child td,
.imp-table tbody tr:last-child td,
.page table:not(.dash-student-table) tbody tr:last-child td {
    border-bottom: 0 !important;
}

.adm-tbl tbody tr:hover td,
.wp-table tbody tr:hover td,
.placement-workplace-table tbody tr:hover td,
.po-tbl tbody tr:hover td,
.imp-table tbody tr:hover td,
.page table:not(.dash-student-table) tbody tr:hover td {
    background: #fdfcfb !important;
}

.adm-tbl td a,
.wp-table td a,
.placement-workplace-table td a,
.po-tbl td a,
.imp-table td a,
.placement-company-name,
.placement-company-name span,
.dashboard-page-v2 .dash-workplace-cell .dash-link-button,
.dashboard-page-v2 .dash-notice-company,
.wp-note-title,
.wp-note-company {
    color: var(--apl-blue) !important;
}

/* Dashboard */
.dashboard-page-v2 .dash-start-row {
    gap: 24px !important;
}

.dashboard-page-v2 .dash-side-card,
.dashboard-page-v2 .dash-main-card {
    border-radius: 26px !important;
}

.dashboard-page-v2 .dash-start-notices {
    background: var(--apl-peach-soft) !important;
    border-color: rgba(244, 173, 143, 0.52) !important;
}

.dashboard-page-v2 .dash-start-notices .dash-side-head {
    background: rgba(244, 173, 143, 0.30) !important;
    border-bottom-color: rgba(244, 173, 143, 0.35) !important;
}

.dashboard-page-v2 .dash-start-notices h2 i,
.dashboard-page-v2 .dash-start-notices .dash-notice-dot {
    color: var(--apl-peach-dark) !important;
}

.dashboard-page-v2 .dash-unread-badge,
.dashboard-page-v2 .dash-card-count {
    background: var(--apl-blue) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
}

.dashboard-page-v2 .dash-card-count:not(.is-unread) {
    background: var(--apl-peach-soft) !important;
    color: #a95f42 !important;
}

.dashboard-page-v2 .dash-notice,
.dashboard-page-v2 .dash-mini-row {
    background: transparent !important;
    border-bottom: 1px solid rgba(236, 232, 226, 0.92) !important;
    color: var(--apl-text) !important;
}

.dashboard-page-v2 .dash-notice:hover,
.dashboard-page-v2 .dash-mini-row:hover {
    background: rgba(255, 255, 255, 0.52) !important;
}

.dashboard-page-v2 .dash-notice.is-unread {
    background: transparent !important;
}

.dashboard-page-v2 .dash-notice.is-unread .dash-notice-dot,
.dashboard-page-v2 .dash-log-mini-unread > span,
.dashboard-page-v2 .dash-attendance-mini-warning > span,
.dashboard-page-v2 .dash-attendance-mini-missing > span {
    background: var(--apl-peach-dark) !important;
}

.dashboard-page-v2 .dash-notice-dot,
.dashboard-page-v2 .dash-mini-row > span {
    background: var(--apl-muted-light) !important;
}

.dashboard-page-v2 .dash-log-mini-read > span,
.dashboard-page-v2 .dash-attendance-mini-present > span {
    background: var(--apl-blue) !important;
}

.dashboard-page-v2 .dash-month-card {
    background: var(--apl-blue) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border-radius: 28px !important;
    box-shadow: var(--apl-shadow) !important;
}

.dashboard-page-v2 .dash-month-card .dash-section-head {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.dashboard-page-v2 .dash-month-card h2,
.dashboard-page-v2 .dash-month-card h2 i,
.dashboard-page-v2 .dash-month-card .dash-section-head h2 {
    color: #fff !important;
}

.dashboard-page-v2 .dash-month-nav {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

.dashboard-page-v2 .dash-month-nav a {
    color: #fff !important;
}

.dashboard-page-v2 .dash-month-nav a:nth-child(2) {
    background: var(--apl-peach) !important;
    color: var(--apl-text) !important;
    border-radius: 10px !important;
}

.dashboard-page-v2 .dash-month-weekdays span,
.dashboard-page-v2 .dash-month-week-number {
    color: rgba(255, 255, 255, 0.70) !important;
}

.dashboard-page-v2 .dash-month-day {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

.dashboard-page-v2 .dash-month-day.is-muted {
    color: rgba(255, 255, 255, 0.38) !important;
}

.dashboard-page-v2 .dash-month-day.is-apl {
    background: rgba(255, 255, 255, 0.16) !important;
}

.dashboard-page-v2 .dash-month-day.is-today {
    background: var(--apl-peach) !important;
    border-color: var(--apl-peach) !important;
    color: var(--apl-text) !important;
}

.dashboard-page-v2 .dash-month-day.is-apl::before {
    background: transparent !important;
}

.dashboard-page-v2 .dash-month-dot,
.dashboard-page-v2 .dash-month-dot-visit,
.dashboard-page-v2 .dash-month-dot-attendance {
    background: var(--apl-peach) !important;
}

.dashboard-page-v2 .dash-month-dot-call {
    background: rgba(255, 255, 255, 0.72) !important;
}

.dashboard-page-v2 .dash-month-dot-contract {
    background: #cbd3ff !important;
}

.dashboard-page-v2 .dash-month-legend span {
    color: rgba(255, 255, 255, 0.82) !important;
}

.dashboard-page-v2 .dash-month-legend .apl {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.dashboard-page-v2 .dash-student-table {
    background: var(--apl-card) !important;
}

.dashboard-page-v2 .dash-student-row {
    border-bottom: 8px solid var(--apl-row-alt) !important;
}

.dashboard-page-v2 .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) {
    background: var(--apl-card) !important;
}

.dashboard-page-v2 .dash-student-row:not(.dash-student-head):not(.dash-student-group-head):hover {
    background: #fdfcfb !important;
}

.dashboard-page-v2 .dash-student-group-head {
    background: var(--apl-card-soft) !important;
    color: var(--apl-text-soft) !important;
}

.dashboard-page-v2 .dash-view-toggle {
    background: var(--apl-peach) !important;
    border-color: rgba(244, 173, 143, 0.52) !important;
    color: var(--apl-text) !important;
    box-shadow: var(--apl-shadow-soft) !important;
}

.dashboard-page-v2 .dash-view-toggle span {
    display: inline !important;
}

.dashboard-page-v2 .dash-today-state,
.dashboard-page-v2 .dash-period-track,
.dashboard-page-v2 .dash-visit-compact {
    border-color: var(--apl-border) !important;
    box-shadow: none !important;
}

.dashboard-page-v2 .dash-state-present,
.dashboard-page-v2 .dash-today-state.dash-state-present {
    background: var(--apl-blue) !important;
    color: #fff !important;
}

.dashboard-page-v2 .dash-state-present i,
.dashboard-page-v2 .dash-state-present strong {
    background: transparent !important;
    color: #fff !important;
}

.dashboard-page-v2 .dash-state-missing,
.dashboard-page-v2 .dash-state-none,
.dashboard-page-v2 .dash-state-absent {
    background: var(--apl-peach) !important;
    color: var(--apl-text) !important;
}

.dashboard-page-v2 .dash-state-missing i,
.dashboard-page-v2 .dash-state-none i,
.dashboard-page-v2 .dash-state-absent i,
.dashboard-page-v2 .dash-state-missing strong,
.dashboard-page-v2 .dash-state-none strong,
.dashboard-page-v2 .dash-state-absent strong {
    background: transparent !important;
    color: var(--apl-text) !important;
}

.dashboard-page-v2 .dash-day {
    border: 1px solid var(--apl-border) !important;
    color: var(--apl-text-soft) !important;
}

.dashboard-page-v2 .dash-day-present,
.dashboard-page-v2 .dash-attendance-period-day.is-present,
.dashboard-page-v2 .dash-attendance-week-day.is-present {
    background: var(--apl-blue) !important;
    border-color: var(--apl-blue) !important;
    color: #fff !important;
}

.dashboard-page-v2 .dash-day-missing,
.dashboard-page-v2 .dash-day-absent,
.dashboard-page-v2 .dash-attendance-period-day.is-absent,
.dashboard-page-v2 .dash-attendance-period-day.is-missing,
.dashboard-page-v2 .dash-attendance-week-day.is-absent,
.dashboard-page-v2 .dash-attendance-week-day.is-missing {
    background: var(--apl-peach) !important;
    border-color: var(--apl-peach) !important;
    color: var(--apl-text) !important;
}

.dashboard-page-v2 .dash-day-future,
.dashboard-page-v2 .dash-attendance-period-day.is-future,
.dashboard-page-v2 .dash-attendance-week-day.is-future {
    background: var(--apl-card-soft) !important;
    border-color: var(--apl-border) !important;
    color: var(--apl-muted) !important;
}

.dashboard-page-v2 .dash-contract-status,
.dashboard-page-v2 .dash-status-icon,
.dashboard-page-v2 .dash-visit-compact {
    border-radius: 14px !important;
}

.dashboard-page-v2 .dash-visit-done,
.dashboard-page-v2 .dash-visit-ok {
    background: var(--apl-blue) !important;
    border-color: var(--apl-blue) !important;
    color: #fff !important;
}

.dashboard-page-v2 .dash-visit-planned,
.dashboard-page-v2 .dash-visit-missing,
.dashboard-page-v2 .dash-visit-warn {
    background: var(--apl-peach) !important;
    border-color: var(--apl-peach) !important;
    color: var(--apl-text) !important;
}

.dashboard-page-v2 .dash-drawer,
.dashboard-page-v2 .dash-drawer-body {
    background: var(--apl-bg) !important;
    color: var(--apl-text) !important;
}

.dashboard-page-v2 .dash-drawer-head {
    background: var(--apl-card) !important;
    border-bottom: 1px solid var(--apl-border) !important;
}

.dashboard-page-v2 .dash-drawer-overlay {
    background: rgba(37, 40, 51, 0.42) !important;
    backdrop-filter: blur(5px) !important;
}

.dashboard-page-v2 .dash-attendance-hero,
.dashboard-page-v2 .dash-attendance-info-card,
.dashboard-page-v2 .dash-attendance-week-card,
.dashboard-page-v2 .dash-attendance-period-card,
.dashboard-page-v2 .dash-attendance-location-card,
.dashboard-page-v2 .dash-drawer-summary-card {
    background: var(--apl-card) !important;
    border: 1px solid var(--apl-border) !important;
    box-shadow: var(--apl-shadow-soft) !important;
}

/* Admin/settings pages */
.tab-bar,
.track-tabs {
    background: var(--apl-card) !important;
    border: 1px solid var(--apl-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--apl-shadow-soft) !important;
}

.tab-btn,
.track-tab {
    background: var(--apl-card-soft) !important;
    border: 1px solid var(--apl-border) !important;
    color: var(--apl-text-soft) !important;
    border-radius: 999px !important;
}

.tab-btn.active,
.track-tab.active {
    background: var(--apl-blue) !important;
    color: #fff !important;
}

.form-group label,
.placement-field label,
.wp-filter-field label,
.s-card label {
    color: var(--apl-text-soft) !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* Students */
.sc-group-header {
    color: var(--apl-text) !important;
}

.sc {
    background: var(--apl-card) !important;
    border-color: var(--apl-border) !important;
    box-shadow: var(--apl-shadow-soft) !important;
}

.sc:hover {
    box-shadow: var(--apl-shadow) !important;
}

.sc-apl,
.sc-apl-company {
    background: var(--apl-blue-soft) !important;
    color: var(--apl-blue-dark) !important;
    border-color: rgba(88, 99, 143, 0.18) !important;
}

/* Workplaces */
.wp-layout {
    gap: 24px !important;
}

.wp-filter {
    background: var(--apl-card) !important;
}

.wp-sidebar-card {
    background: var(--apl-card) !important;
}

.wp-note-item,
.wp-sidebar-card li,
.wp-sidebar-card a {
    border-color: var(--apl-border) !important;
}

/* Matching and period overview */
.placement-student-row.is-selected,
.placement-student-row.is-draft-matched {
    background: var(--apl-blue-soft) !important;
    color: var(--apl-text) !important;
    box-shadow: inset 5px 0 0 var(--apl-blue) !important;
}

.placement-student-row.is-selected .placement-student-name {
    color: var(--apl-text) !important;
}

.placement-floating-save,
.po-bulk {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid var(--apl-border) !important;
    box-shadow: var(--apl-shadow) !important;
    backdrop-filter: blur(10px) !important;
}

.po-btn,
.po-btn-blue,
.po-btn-green,
.po-btn-info,
.po-btn-yellow {
    background: var(--apl-blue-soft) !important;
    border-color: rgba(88, 99, 143, 0.22) !important;
    color: var(--apl-blue-dark) !important;
}

.po-btn-yellow,
.po-btn-green:not([href]) {
    background: var(--apl-peach-soft) !important;
    border-color: rgba(244, 173, 143, 0.55) !important;
    color: #a95f42 !important;
}

/* Import/class/admin tables */
.cls-chip.checked,
.track-badge,
.required-chip {
    background: var(--apl-blue-soft) !important;
    color: var(--apl-blue-dark) !important;
    border-color: rgba(88, 99, 143, 0.22) !important;
}

.imp-table code,
.variable-pill,
.tag-list code {
    background: var(--apl-blue-soft) !important;
    color: var(--apl-blue-dark) !important;
    border-color: rgba(88, 99, 143, 0.18) !important;
}

/* Remove old green visual language without touching data previews. */
.page :where([class*="success"], [class*="approved"], [class*="active"], [class*="done"], [class*="present"]) {
    --success: var(--apl-blue);
    --success-soft: var(--apl-blue-soft);
}

.page :where([class*="warning"], [class*="missing"], [class*="rejected"], [class*="absent"], [class*="danger"]) {
    --warning: var(--apl-peach);
    --warning-soft: var(--apl-peach-soft);
    --danger: var(--apl-peach-dark);
    --danger-soft: var(--apl-peach-soft);
}

@media (max-width: 1180px) {
    .dashboard-page-v2 .dash-start-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .dashboard-page-v2 .dash-start-row {
        grid-template-columns: 1fr !important;
    }

    .adm-tbl tbody td,
    .wp-table tbody td,
    .placement-workplace-table tbody td,
    .po-tbl tbody td,
    .imp-table tbody td,
    .page table:not(.dash-student-table) tbody td {
        padding: 14px 16px !important;
    }
}

/* ==========================================================================
   APLSIN_REFERENCE_THEME_002
   ACERO-inspired final visual layer. This intentionally sits last so legacy
   page CSS keeps behavior while the shared chrome, cards, tables and controls
   use one coherent palette.
   ========================================================================== */
:root,
html {
    --apl-bg: #f8f8f5;
    --apl-sidebar-bg: #f8f7f4;
    --apl-card: #ffffff;
    --apl-card-soft: #fbfaf8;
    --apl-border: #ece8e2;
    --apl-border-soft: #f2eee8;
    --apl-row-gap: #f3f1ed;
    --apl-text: #252833;
    --apl-text-soft: #5f6472;
    --apl-muted: #9b9995;
    --apl-muted-light: #c9c6c0;
    --apl-blue: #58638f;
    --apl-blue-dark: #4f5b84;
    --apl-blue-soft: #eef0f8;
    --apl-peach: #f4ad8f;
    --apl-peach-dark: #e9906e;
    --apl-peach-soft: #fff0e8;
    --apl-shadow: 0 18px 42px rgba(31, 35, 48, 0.06);
    --apl-shadow-soft: 0 10px 28px rgba(31, 35, 48, 0.045);

    /* Map older semantic tokens to the reference palette. */
    --bg: var(--apl-bg);
    --surface: var(--apl-card);
    --surface-2: var(--apl-card-soft);
    --border: var(--apl-border);
    --border-soft: var(--apl-border-soft);
    --text: var(--apl-text);
    --muted: var(--apl-text-soft);
    --muted-2: var(--apl-muted);
    --primary: var(--apl-blue);
    --primary-soft: var(--apl-blue-soft);
    --accent: var(--apl-peach);
    --accent-soft: var(--apl-peach-soft);
    --warning: var(--apl-peach-dark);
    --warning-soft: var(--apl-peach-soft);
    --danger: var(--apl-peach-dark);
    --danger-soft: var(--apl-peach-soft);
    --success: var(--apl-blue);
    --success-soft: var(--apl-blue-soft);
    --success-rgb: 88, 99, 143;
    --theme-success-text: var(--apl-blue-dark);
    --r-card: 24px;
    --r-lg: 22px;
    --r-md: 16px;
    --r-sm: 12px;
    --r-pill: 999px;
}

html,
body {
    background: var(--apl-bg) !important;
    color: var(--apl-text) !important;
}

body {
    color-scheme: light !important;
}

.app-shell,
.app-main,
.page,
.page:not(.dashboard-page-v2),
.dashboard-page-v2 {
    background: var(--apl-bg) !important;
}

.page::before,
.page::after,
.dashboard-page-v2::before,
.dashboard-page-v2::after,
.app-main::before,
.app-main::after {
    display: none !important;
}

/* Sidebar + header --------------------------------------------------------- */
.sidebar {
    background: var(--apl-sidebar-bg) !important;
    border-right: 1px solid var(--apl-border) !important;
    color: var(--apl-muted) !important;
    box-shadow: none !important;
}

.sidebar::before,
.sidebar::after {
    display: none !important;
}

.sidebar-brand {
    color: var(--apl-text) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--apl-border-soft) !important;
    box-shadow: none !important;
}

.brand-text {
    color: var(--apl-text) !important;
    letter-spacing: -0.05em !important;
}

.brand-dot {
    background: var(--apl-peach-dark) !important;
    box-shadow: 0 0 0 4px rgba(244, 173, 143, 0.22) !important;
}

.sidebar-nav {
    scrollbar-color: rgba(155, 153, 149, 0.35) transparent !important;
}

.sidebar-nav::-webkit-scrollbar {
    width: 8px !important;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent !important;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(155, 153, 149, 0.28) !important;
    border-radius: 999px !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
}

.sidebar-group-title {
    color: var(--apl-muted) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
}

.sidebar-link,
.sidebar-bottom-link {
    color: var(--apl-muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

.sidebar-link i,
.sidebar-bottom-link i {
    color: var(--apl-muted-light) !important;
}

.sidebar-link:hover,
.sidebar-bottom-link:hover {
    background: rgba(255, 255, 255, 0.68) !important;
    color: var(--apl-text) !important;
}

.sidebar-link:hover i,
.sidebar-bottom-link:hover i {
    color: var(--apl-peach-dark) !important;
}

.sidebar-link.is-active,
.sidebar-bottom-link.is-active {
    position: relative !important;
    background: var(--apl-card) !important;
    color: var(--apl-text) !important;
    border-color: var(--apl-border) !important;
    box-shadow: var(--apl-shadow-soft) !important;
}

.sidebar-link.is-active::after,
.sidebar-bottom-link.is-active::after {
    content: "" !important;
    position: absolute !important;
    right: -10px !important;
    top: 12px !important;
    bottom: 12px !important;
    width: 5px !important;
    border-radius: 999px !important;
    background: var(--apl-blue) !important;
}

.sidebar-link.is-active i,
.sidebar-bottom-link.is-active i {
    color: var(--apl-peach-dark) !important;
}

.sidebar-bottom {
    background: var(--apl-sidebar-bg) !important;
    border-top: 1px solid var(--apl-border-soft) !important;
    box-shadow: none !important;
}

.sidebar-toggle {
    background: var(--apl-card) !important;
    border: 1px solid var(--apl-border) !important;
    color: var(--apl-text-soft) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

.topbar {
    background: var(--apl-card) !important;
    border-bottom: 1px solid var(--apl-border) !important;
    box-shadow: none !important;
    color: var(--apl-text) !important;
}

.topbar-page-title,
.topbar-page-label,
.topbar-user-info strong {
    color: var(--apl-text) !important;
}

.topbar-page-icon {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--apl-text) !important;
    box-shadow: none !important;
}

.topbar-page-icon i {
    color: var(--apl-text) !important;
}

.topbar-user-info {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 12px !important;
}

.topbar-user-info small {
    color: var(--apl-muted) !important;
}

.topbar-user-avatar,
.avatar {
    background: var(--apl-blue-soft) !important;
    color: var(--apl-blue-dark) !important;
    border-color: var(--apl-border) !important;
}

.topbar-user-avatar.has-photo,
.avatar.has-photo {
    background: transparent !important;
}

/* Shared surfaces --------------------------------------------------------- */
.card,
.dash-main-card,
.dash-side-card,
.dash-other-card,
.table-card,
.aplsin-table-card,
.admin-card,
.settings-card,
.template-card,
.placement-filter-panel,
.placement-student-list,
.placement-workplace-card,
.wp-card,
.wp-side-card,
.cls-card,
.imp-card,
.po-card,
.rev-card,
.period-card,
.user-card,
.school-card,
.student-card,
.student-filter-card,
.dash-drawer-section,
.dash-attendance-info-card,
.dash-attendance-week-card,
.dash-attendance-period-card,
.dash-attendance-location-card,
.dash-drawer-summary-card {
    background: var(--apl-card) !important;
    border: 1px solid var(--apl-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--apl-shadow-soft) !important;
    color: var(--apl-text) !important;
}

.page-header,
.placement-header,
.contract-header,
.rev-header,
.wp-hero,
.classes-header,
.admin-header,
.school-header,
.templates-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--apl-text) !important;
}

.page h1,
.page h2,
.page h3,
.card h1,
.card h2,
.card h3,
.page-title,
.section-title {
    color: var(--apl-text) !important;
    font-weight: 650 !important;
    letter-spacing: -0.03em !important;
}

.page p,
.page small,
.muted,
.text-muted,
.field-hint,
.help-text {
    color: var(--apl-text-soft) !important;
}

/* Tables ------------------------------------------------------------------ */
.table-card,
.aplsin-table-card,
.adm-table-card,
.wp-table-card,
.placement-workplace-card,
.po-table-card,
.imp-table-card,
.classes-table-card,
.users-table-card,
.periods-table-card,
.dashboard-page-v2 .dash-main-card {
    overflow: hidden !important;
    background: var(--apl-card) !important;
    border: 1px solid var(--apl-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--apl-shadow-soft) !important;
}

.page table,
.adm-tbl,
.wp-table,
.placement-workplace-table,
.po-tbl,
.imp-table,
.cls-table,
.users-table,
.periods-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--apl-card) !important;
}

.page table thead th,
.adm-tbl thead th,
.wp-table thead th,
.placement-workplace-table thead th,
.po-tbl thead th,
.imp-table thead th,
.cls-table thead th,
.users-table thead th,
.periods-table thead th {
    background: var(--apl-card-soft) !important;
    color: var(--apl-muted) !important;
    border-bottom: 1px solid var(--apl-border) !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 17px 20px !important;
}

.page table tbody td,
.adm-tbl tbody td,
.wp-table tbody td,
.placement-workplace-table tbody td,
.po-tbl tbody td,
.imp-table tbody td,
.cls-table tbody td,
.users-table tbody td,
.periods-table tbody td {
    background: var(--apl-card) !important;
    color: var(--apl-text) !important;
    border-bottom: 1px solid var(--apl-border-soft) !important;
    box-shadow: inset 0 -7px 0 var(--apl-row-gap) !important;
    padding: 18px 20px !important;
}

.page table tbody tr:last-child td,
.adm-tbl tbody tr:last-child td,
.wp-table tbody tr:last-child td,
.placement-workplace-table tbody tr:last-child td,
.po-tbl tbody tr:last-child td,
.imp-table tbody tr:last-child td,
.cls-table tbody tr:last-child td,
.users-table tbody tr:last-child td,
.periods-table tbody tr:last-child td {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.page table tbody tr:hover td,
.adm-tbl tbody tr:hover td,
.wp-table tbody tr:hover td,
.placement-workplace-table tbody tr:hover td,
.po-tbl tbody tr:hover td,
.imp-table tbody tr:hover td,
.cls-table tbody tr:hover td,
.users-table tbody tr:hover td,
.periods-table tbody tr:hover td {
    background: #fffdfa !important;
}

/* Forms + buttons --------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
select,
textarea,
.input,
.select,
.textarea,
.field-input,
.form-control,
.form-select,
.search-input {
    background: var(--apl-card-soft) !important;
    border: 1px solid var(--apl-border) !important;
    border-radius: 14px !important;
    color: var(--apl-text) !important;
    box-shadow: none !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus,
select:focus,
textarea:focus,
.input:focus,
.select:focus,
.textarea:focus,
.field-input:focus,
.form-control:focus,
.form-select:focus,
.search-input:focus {
    border-color: rgba(88, 99, 143, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(88, 99, 143, 0.10) !important;
    outline: none !important;
}

::placeholder {
    color: var(--apl-muted) !important;
}

.btn,
button.btn,
a.btn,
.button,
.action-btn,
.primary-btn,
.save-btn {
    border-radius: 14px !important;
    font-weight: 650 !important;
    box-shadow: none !important;
}

.btn-primary,
.button-primary,
.primary-btn,
.save-btn,
.placement-save-btn,
.po-bulk-primary,
.btn-save,
button[type="submit"].btn:not(.btn-ghost):not(.btn-danger) {
    background: var(--apl-blue) !important;
    border-color: var(--apl-blue) !important;
    color: #fff !important;
}

.btn-primary:hover,
.button-primary:hover,
.primary-btn:hover,
.save-btn:hover,
.placement-save-btn:hover,
.po-bulk-primary:hover,
.btn-save:hover {
    background: var(--apl-blue-dark) !important;
    border-color: var(--apl-blue-dark) !important;
}

.btn-accent,
.btn-orange,
.accent-btn,
.btn-warning {
    background: var(--apl-peach) !important;
    border-color: var(--apl-peach) !important;
    color: var(--apl-text) !important;
}

.btn-ghost,
.btn-secondary,
.button-secondary,
.clear-btn,
.btn-out {
    background: var(--apl-card) !important;
    border: 1px solid var(--apl-border) !important;
    color: var(--apl-text-soft) !important;
}

.btn-danger,
.delete-btn,
.danger-btn {
    background: var(--apl-peach-soft) !important;
    border-color: rgba(244, 173, 143, 0.7) !important;
    color: #a95f42 !important;
}

.fab,
.floating-add,
.floating-action,
.wp-floating-add,
.student-floating-add,
.period-floating-add,
.user-floating-add,
.btn-fab {
    width: 58px !important;
    height: 58px !important;
    border-radius: 999px !important;
    background: var(--apl-blue) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: var(--apl-shadow) !important;
}

.fab:hover,
.floating-add:hover,
.floating-action:hover,
.wp-floating-add:hover,
.student-floating-add:hover,
.period-floating-add:hover,
.user-floating-add:hover,
.btn-fab:hover {
    background: var(--apl-blue-dark) !important;
}

/* Badges/pills/status ----------------------------------------------------- */
.pill,
.badge,
.status-badge,
.chip,
.filter-chip,
.tag,
.role-badge,
.track-badge,
.required-chip,
.variable-pill {
    border-radius: 999px !important;
    border: 1px solid var(--apl-border) !important;
    background: var(--apl-card-soft) !important;
    color: var(--apl-text-soft) !important;
    font-weight: 650 !important;
}

.pill-success,
.badge-success,
.status-active,
.status-done,
.status-sent,
.status-approved,
.risk-approved,
.is-complete,
.is-approved,
.is-sent,
.is-active .status-badge,
.role-admin,
.role-badge-admin {
    background: var(--apl-blue-soft) !important;
    border-color: rgba(88, 99, 143, 0.24) !important;
    color: var(--apl-blue-dark) !important;
}

.pill-warning,
.pill-danger,
.badge-warning,
.badge-danger,
.status-warning,
.status-missing,
.status-unsent,
.status-upcoming,
.risk-pending,
.risk-unknown,
.is-missing,
.is-unsent,
.is-warning,
.role-teacher,
.role-badge-teacher {
    background: var(--apl-peach-soft) !important;
    border-color: rgba(244, 173, 143, 0.55) !important;
    color: #a95f42 !important;
}

.pill-muted,
.badge-muted,
.status-muted,
.status-neutral,
.is-neutral,
.is-inactive {
    background: var(--apl-card-soft) !important;
    color: var(--apl-muted) !important;
    border-color: var(--apl-border) !important;
}

.status-dot,
.active-dot,
.dot-active {
    background: var(--apl-blue) !important;
}

.dot-warning,
.dot-missing,
.dot-unsent {
    background: var(--apl-peach-dark) !important;
}

/* Dashboard layout -------------------------------------------------------- */
.dashboard-page-v2 {
    display: grid !important;
    grid-template-columns: minmax(780px, 1fr) 360px !important;
    gap: 26px !important;
    align-items: start !important;
    max-width: none !important;
    padding: 34px 38px 46px !important;
}

.dashboard-page-v2 > .dash-flash,
.dashboard-page-v2 > .dash-summary-row {
    grid-column: 1 / -1 !important;
}

.dashboard-page-v2 > .dash-workspace {
    grid-column: 1 !important;
    grid-row: 3 !important;
}

.dashboard-page-v2 > .dash-start-row {
    grid-column: 2 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    align-self: start !important;
}

.dashboard-page-v2 > .dash-other-card {
    grid-column: 1 / -1 !important;
}

.dash-summary-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.dash-summary-card {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 106px !important;
    padding: 22px !important;
    background: var(--apl-card) !important;
    border: 1px solid var(--apl-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--apl-shadow-soft) !important;
}

.dash-summary-icon {
    display: inline-grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 18px !important;
    background: var(--apl-blue-soft) !important;
    color: var(--apl-blue-dark) !important;
    font-size: 1.35rem !important;
}

.dash-summary-card-peach .dash-summary-icon {
    background: var(--apl-peach-soft) !important;
    color: var(--apl-peach-dark) !important;
}

.dash-summary-card strong {
    display: block !important;
    color: var(--apl-blue-dark) !important;
    font-size: 1.65rem !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
}

.dash-summary-card small {
    display: block !important;
    margin-top: 5px !important;
    color: var(--apl-text-soft) !important;
    font-weight: 600 !important;
}

.dashboard-page-v2 .dash-start-row > section {
    min-height: 0 !important;
}

.dashboard-page-v2 .dash-month-card {
    order: 1 !important;
    background: var(--apl-blue) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border-radius: 28px !important;
    box-shadow: var(--apl-shadow) !important;
}

.dashboard-page-v2 .dash-start-notices {
    order: 2 !important;
    background: var(--apl-peach-soft) !important;
    border-color: rgba(244, 173, 143, 0.45) !important;
}

.dashboard-page-v2 .dash-start-attendance {
    order: 3 !important;
}

.dashboard-page-v2 .dash-start-logbook {
    order: 4 !important;
}

.dashboard-page-v2 .dash-start-notices .dash-side-head {
    background: var(--apl-peach) !important;
    color: var(--apl-text) !important;
    border-bottom: 1px solid rgba(233, 144, 110, 0.26) !important;
}

.dashboard-page-v2 .dash-start-notices h2,
.dashboard-page-v2 .dash-start-notices h2 i {
    color: var(--apl-text) !important;
}

.dashboard-page-v2 .dash-unread-badge,
.dashboard-page-v2 .dash-card-count {
    background: var(--apl-blue) !important;
    color: #fff !important;
    border: 0 !important;
}

.dashboard-page-v2 .dash-notice,
.dashboard-page-v2 .dash-mini-row {
    background: transparent !important;
    border-bottom: 1px solid var(--apl-border) !important;
}

.dashboard-page-v2 .dash-notice.is-unread {
    background: rgba(244, 173, 143, 0.13) !important;
}

.dashboard-page-v2 .dash-notice-dot,
.dashboard-page-v2 .dash-mini-row > span:first-child {
    background: var(--apl-muted-light) !important;
}

.dashboard-page-v2 .dash-notice.is-unread .dash-notice-dot,
.dashboard-page-v2 .dash-log-mini-unread > span:first-child,
.dashboard-page-v2 .dash-attendance-mini-warning > span:first-child,
.dashboard-page-v2 .dash-attendance-mini-missing > span:first-child {
    background: var(--apl-peach-dark) !important;
    box-shadow: 0 0 0 7px rgba(244, 173, 143, 0.18) !important;
}

.dashboard-page-v2 .dash-month-card .dash-section-head {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.dashboard-page-v2 .dash-month-card h2,
.dashboard-page-v2 .dash-month-card h2 i,
.dashboard-page-v2 .dash-month-card .dash-section-head h2 {
    color: #fff !important;
}

.dashboard-page-v2 .dash-month-nav {
    background: rgba(255, 255, 255, 0.13) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
}

.dashboard-page-v2 .dash-month-nav a {
    color: rgba(255, 255, 255, 0.74) !important;
}

.dashboard-page-v2 .dash-month-nav a:nth-child(2),
.dashboard-page-v2 .dash-month-day.is-today {
    background: var(--apl-peach) !important;
    border-color: var(--apl-peach) !important;
    color: var(--apl-text) !important;
}

.dashboard-page-v2 .dash-month-weekdays span,
.dashboard-page-v2 .dash-month-week-number,
.dashboard-page-v2 .dash-month-legend span {
    color: rgba(255, 255, 255, 0.70) !important;
}

.dashboard-page-v2 .dash-month-day {
    background: rgba(255, 255, 255, 0.10) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dashboard-page-v2 .dash-month-day.is-muted {
    color: rgba(255, 255, 255, 0.36) !important;
}

.dashboard-page-v2 .dash-month-day.is-apl {
    background: rgba(255, 255, 255, 0.16) !important;
}

.dashboard-page-v2 .dash-month-dot,
.dashboard-page-v2 .dash-month-dot-visit,
.dashboard-page-v2 .dash-month-dot-attendance {
    background: var(--apl-peach) !important;
}

.dashboard-page-v2 .dash-month-dot-call {
    background: rgba(255, 255, 255, 0.78) !important;
}

.dashboard-page-v2 .dash-month-dot-contract {
    background: #bcc3e2 !important;
}

.dashboard-page-v2 .dash-month-legend .apl {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

.dashboard-page-v2 .dash-main-card {
    padding: 0 !important;
}

.dashboard-page-v2 .dash-student-table {
    background: var(--apl-card) !important;
}

.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-head,
.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-row:not(.dash-student-group-head) {
    display: grid !important;
    grid-template-columns: minmax(150px, 0.95fr) minmax(190px, 1.15fr) 116px 108px 164px 78px 88px 54px !important;
    gap: 16px !important;
    align-items: center !important;
}

.dashboard-page-v2 .dash-student-head {
    background: var(--apl-card-soft) !important;
    border-bottom: 1px solid var(--apl-border) !important;
    color: var(--apl-muted) !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.dashboard-page-v2 .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) {
    background: var(--apl-card) !important;
    border-bottom: 1px solid var(--apl-border-soft) !important;
    box-shadow: inset 0 -7px 0 var(--apl-row-gap) !important;
}

.dashboard-page-v2 .dash-student-row:not(.dash-student-head):not(.dash-student-group-head):hover {
    background: #fffdfa !important;
}

.dashboard-page-v2 .dash-student-group-head {
    background: var(--apl-card-soft) !important;
    border-top: 1px solid var(--apl-border) !important;
    border-bottom: 1px solid var(--apl-border) !important;
    color: var(--apl-text-soft) !important;
}

.dashboard-page-v2 .dash-view-toggle {
    min-width: 44px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 15px !important;
    background: var(--apl-peach) !important;
    border-color: rgba(244, 173, 143, 0.8) !important;
    color: var(--apl-text) !important;
}

.dashboard-page-v2 .dash-view-toggle span {
    display: none !important;
}

.dashboard-page-v2 .dash-link-button,
.dashboard-page-v2 .dash-workplace-cell .dash-link-button,
.dashboard-page-v2 .dash-notice-company {
    color: var(--apl-blue) !important;
}

.dashboard-page-v2 .dash-today-state,
.dashboard-page-v2 .dash-period-track,
.dashboard-page-v2 .dash-visit-compact,
.dashboard-page-v2 .dash-contract-status,
.dashboard-page-v2 .dash-status-icon,
.dashboard-page-v2 .dash-expand-button {
    border-radius: 14px !important;
}

.dashboard-page-v2 .dash-state-present,
.dashboard-page-v2 .dash-today-state.dash-state-present {
    background: var(--apl-blue) !important;
    border-color: var(--apl-blue) !important;
    color: #fff !important;
}

.dashboard-page-v2 .dash-state-present i,
.dashboard-page-v2 .dash-state-present strong,
.dashboard-page-v2 .dash-state-present small {
    color: #fff !important;
}

.dashboard-page-v2 .dash-state-missing,
.dashboard-page-v2 .dash-state-none,
.dashboard-page-v2 .dash-state-absent {
    background: var(--apl-peach) !important;
    border-color: var(--apl-peach) !important;
    color: var(--apl-text) !important;
}

.dashboard-page-v2 .dash-day,
.dashboard-page-v2 .dash-attendance-period-day,
.dashboard-page-v2 .dash-attendance-week-day {
    border-radius: 8px !important;
    border: 1px solid var(--apl-border) !important;
    background: var(--apl-card-soft) !important;
    color: var(--apl-text-soft) !important;
}

.dashboard-page-v2 .dash-day-present,
.dashboard-page-v2 .dash-attendance-period-day.is-present,
.dashboard-page-v2 .dash-attendance-week-day.is-present {
    background: var(--apl-blue) !important;
    border-color: var(--apl-blue) !important;
    color: #fff !important;
}

.dashboard-page-v2 .dash-day-missing,
.dashboard-page-v2 .dash-day-absent,
.dashboard-page-v2 .dash-attendance-period-day.is-absent,
.dashboard-page-v2 .dash-attendance-period-day.is-missing,
.dashboard-page-v2 .dash-attendance-week-day.is-absent,
.dashboard-page-v2 .dash-attendance-week-day.is-missing {
    background: var(--apl-peach) !important;
    border-color: var(--apl-peach) !important;
    color: var(--apl-text) !important;
}

.dashboard-page-v2 .dash-day-future,
.dashboard-page-v2 .dash-attendance-period-day.is-future,
.dashboard-page-v2 .dash-attendance-week-day.is-future {
    background: var(--apl-card-soft) !important;
    border-color: var(--apl-border) !important;
    color: var(--apl-muted) !important;
}

.dashboard-page-v2 .dash-contract-ok,
.dashboard-page-v2 .dash-visit-done,
.dashboard-page-v2 .dash-visit-ok,
.dashboard-page-v2 .dash-mini-status.is-ok {
    background: var(--apl-blue-soft) !important;
    border-color: rgba(88, 99, 143, 0.25) !important;
    color: var(--apl-blue-dark) !important;
}

.dashboard-page-v2 .dash-contract-warn,
.dashboard-page-v2 .dash-visit-planned,
.dashboard-page-v2 .dash-visit-missing,
.dashboard-page-v2 .dash-visit-warn,
.dashboard-page-v2 .dash-mini-status.is-warn {
    background: var(--apl-peach-soft) !important;
    border-color: rgba(244, 173, 143, 0.55) !important;
    color: #a95f42 !important;
}

/* Matching/workplaces/students/admin refinements ------------------------- */
.placement-filter-panel,
.filters-card,
.filter-panel,
.wp-filter-card,
.student-filter-card,
.imp-step-card,
.school-form-card {
    background: var(--apl-card) !important;
    border: 1px solid var(--apl-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--apl-shadow-soft) !important;
}

.placement-student-row.is-selected,
.student-filter-chip.is-active,
.filter-chip.is-active,
.wp-chip.is-active,
.tab.is-active,
.template-tab.is-active {
    background: var(--apl-blue) !important;
    border-color: var(--apl-blue) !important;
    color: #fff !important;
}

.placement-student-row.is-selected {
    box-shadow: inset 5px 0 0 var(--apl-blue) !important;
}

.placement-place-state.is-free,
.capacity-badge.is-free {
    background: var(--apl-blue-soft) !important;
    color: var(--apl-blue-dark) !important;
}

.placement-place-state.is-full,
.capacity-badge.is-full,
.capacity-badge.is-warning {
    background: var(--apl-peach-soft) !important;
    color: #a95f42 !important;
}

.placement-floating-save,
.po-bulk,
.sticky-action-bar,
.bulk-actions {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid var(--apl-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--apl-shadow) !important;
    backdrop-filter: blur(12px) !important;
}

.role-admin,
.role-badge-admin,
.user-role-admin {
    background: var(--apl-blue) !important;
    color: #fff !important;
}

.role-program,
.role-program-admin,
.user-role-program_admin {
    background: var(--apl-blue-soft) !important;
    color: var(--apl-blue-dark) !important;
}

.role-teacher,
.role-larare,
.user-role-teacher {
    background: var(--apl-peach-soft) !important;
    color: #a95f42 !important;
}

.upload-zone,
.drop-zone,
.import-dropzone {
    background: var(--apl-card-soft) !important;
    border: 1.5px dashed var(--apl-muted-light) !important;
    border-radius: 24px !important;
    color: var(--apl-text-soft) !important;
}

.template-section,
.template-block,
.mail-template,
.review-template,
.contract-template {
    background: var(--apl-card) !important;
    border: 1px solid var(--apl-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--apl-shadow-soft) !important;
}

.template-section::before,
.template-block::before,
.mail-template::before,
.review-template::before,
.contract-template::before {
    background: linear-gradient(90deg, var(--apl-blue), var(--apl-peach)) !important;
}

.school-logo-card,
.school-preview-card,
.program-card {
    background: var(--apl-card) !important;
    border: 1px solid var(--apl-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--apl-shadow-soft) !important;
}

/* Old inline/class green fallbacks on app pages. */
.page .pill-success,
.page .badge-success,
.page .flash-ok,
.page .risk-approved,
.page .sig-box--signed,
.page .sig-box--done,
.page .entry-pill-green,
.page .badge-done,
.page .gps-btn.got,
.page .sh-tab-badge-green,
.page .sh-sig-done,
.page .vp-chip--green .vp-chip__val {
    background: var(--apl-blue-soft) !important;
    border-color: rgba(88, 99, 143, 0.25) !important;
    color: var(--apl-blue-dark) !important;
}

.page [style*="#16a34a"],
.page [style*="#15803d"],
.page [style*="#166534"],
.page [style*="#22c55e"] {
    color: var(--apl-blue-dark) !important;
}

.po-tbl [style*="#16a34a"],
.po-tbl [style*="#15803d"],
.po-tbl [style*="#166534"],
.wp-table [style*="#16a34a"],
.wp-table [style*="#15803d"],
.wp-table [style*="#166534"],
.users-table [style*="#16a34a"],
.users-table [style*="#15803d"],
.users-table [style*="#166534"] {
    color: var(--apl-blue-dark) !important;
}

.po-tbl [style*="#ef4444"],
.wp-table [style*="#ef4444"],
.users-table [style*="#ef4444"] {
    color: var(--apl-peach-dark) !important;
}

.po-grp-handle,
.po-grp-handle-sub,
.po-cell-handle {
    background: var(--apl-blue-soft) !important;
    border-color: rgba(88, 99, 143, 0.22) !important;
    color: var(--apl-blue-dark) !important;
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1440px) {
    .dashboard-page-v2 {
        grid-template-columns: minmax(0, 1fr) 340px !important;
        padding-inline: 26px !important;
    }

    .dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-head,
    .dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-row:not(.dash-student-group-head) {
        grid-template-columns: minmax(138px, 0.9fr) minmax(170px, 1.05fr) 104px 96px 145px 68px 78px 48px !important;
        gap: 12px !important;
    }
}

@media (max-width: 1180px) {
    .dashboard-page-v2 {
        display: block !important;
        padding: 24px 18px 36px !important;
    }

    .dashboard-page-v2 > .dash-start-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin: 22px 0 !important;
    }

    .dash-summary-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .dash-summary-row,
    .dashboard-page-v2 > .dash-start-row {
        grid-template-columns: 1fr !important;
    }

    .sidebar {
        background: var(--apl-sidebar-bg) !important;
    }
}

/* ==========================================================================
   APLSIN_REPAIR_2026_05_09
   Correction layer: keep APLsin layout/data, repair ACERO-style chrome only.
   ========================================================================== */
:root {
    --apl-page: #ffffff;
    --apl-panel: #f6f5f2;
    --apl-card: #ffffff;

    --apl-border: #dedbd4;
    --apl-border-strong: #d3d0c8;
    --apl-row-gap: #f0efeb;

    --apl-text: #252833;
    --apl-text-soft: #5f6472;
    --apl-muted: #9b9995;

    --apl-slate: #58638f;
    --apl-slate-dark: #4f5b84;
    --apl-slate-soft: #eef0f8;

    --apl-peach: #f4ad8f;
    --apl-peach-dark: #e9906e;
    --apl-peach-soft: #fff0e8;

    --apl-shadow: 0 14px 34px rgba(31, 35, 48, 0.055);

    /* Backwards-compatible aliases used by older pages. */
    --apl-bg: var(--apl-page);
    --apl-card-soft: #fbfaf8;
    --apl-border-soft: var(--apl-row-gap);
    --apl-blue: var(--apl-slate);
    --apl-blue-dark: var(--apl-slate-dark);
    --apl-blue-soft: var(--apl-slate-soft);
    --apl-shadow-soft: var(--apl-shadow);
    --surface: var(--apl-card);
    --surface-2: var(--apl-card-soft);
    --border: var(--apl-border);
    --text: var(--apl-text);
    --muted: var(--apl-muted);
    --primary: var(--apl-slate);
    --primary-2: var(--apl-slate-dark);
    --primary-soft: var(--apl-slate-soft);
    --accent: var(--apl-peach);
    --accent-2: var(--apl-peach-dark);
    --accent-soft: var(--apl-peach-soft);
    --success: var(--apl-slate);
    --success-soft: var(--apl-slate-soft);
    --success-rgb: 88, 99, 143;
    --warning: var(--apl-peach-dark);
    --warning-soft: var(--apl-peach-soft);
    --error: var(--apl-peach-dark);
    --error-soft: var(--apl-peach-soft);
    --danger: var(--apl-peach-dark);
    --danger-soft: var(--apl-peach-soft);
}

html,
body,
.app-shell,
.app-main,
.page,
.page.dashboard-page-v2 {
    background: var(--apl-page) !important;
    color: var(--apl-text) !important;
}

.page::before,
.page::after,
.dashboard-page-v2::before,
.dashboard-page-v2::after,
.app-main::before,
.app-main::after {
    display: none !important;
    content: none !important;
}

/* Sidebar + header -------------------------------------------------------- */
.sidebar {
    background: var(--apl-sidebar-bg, var(--apl-panel)) !important;
    border-right: 1px solid var(--apl-border) !important;
    box-shadow: none !important;
    color: var(--apl-text-soft) !important;
}

.sidebar-brand,
.sidebar-bottom {
    background: var(--apl-sidebar-bg, var(--apl-panel)) !important;
    border-color: var(--apl-border) !important;
    box-shadow: none !important;
}

.sidebar-brand,
.sidebar-brand .brand-text,
.sidebar-brand .brand-word {
    color: var(--apl-text) !important;
}

.sidebar-brand .brand-dot,
.sidebar-brand .brand-i,
.sidebar-user .avatar {
    background: var(--apl-peach) !important;
    color: var(--apl-text) !important;
}

.sidebar-nav::-webkit-scrollbar {
    width: 7px !important;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent !important;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(155, 153, 149, 0.34) !important;
    border-radius: 999px !important;
}

.sidebar-link,
.sidebar-bottom-link {
    color: var(--apl-text-soft) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.sidebar-link i,
.sidebar-bottom-link i {
    color: var(--apl-muted) !important;
}

.sidebar-link:hover,
.sidebar-bottom-link:hover {
    background: rgba(255, 255, 255, 0.58) !important;
    color: var(--apl-text) !important;
}

.sidebar-link.is-active,
.sidebar-bottom-link.is-active {
    background: var(--apl-card) !important;
    color: var(--apl-text) !important;
    border-radius: 18px !important;
    box-shadow: var(--apl-shadow) !important;
}

.sidebar-link.is-active::after,
.sidebar-bottom-link.is-active::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 12px !important;
    bottom: 12px !important;
    width: 5px !important;
    border-radius: 999px 0 0 999px !important;
    background: var(--apl-slate) !important;
}

.sidebar-link.is-active i,
.sidebar-bottom-link.is-active i {
    color: var(--apl-peach-dark) !important;
}

.sidebar-group-title {
    color: var(--apl-muted) !important;
    letter-spacing: .12em !important;
}

.topbar,
.app-topbar,
.page-topbar {
    background: var(--apl-card) !important;
    border-bottom: 1px solid var(--apl-border) !important;
    box-shadow: none !important;
    color: var(--apl-text) !important;
}

.topbar h1,
.app-topbar h1,
.page-topbar h1 {
    color: var(--apl-text) !important;
    font-weight: 700 !important;
}

/* Cards, forms and buttons ----------------------------------------------- */
.card,
.table-card,
.apl-table-card,
.aplsin-table-card,
.adm-card,
.wp-sidebar-card,
.dash-side-card,
.template-section,
.template-block,
.mail-template,
.review-template,
.contract-template,
.imp-step-card,
.school-logo-card,
.school-preview-card,
.program-card,
.placement-filter-panel,
.placement-sidebar,
.filters-card,
.filter-panel,
.wp-filter-card,
.student-filter-card {
    background: var(--apl-card) !important;
    border: 2px solid var(--apl-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--apl-shadow) !important;
    color: var(--apl-text) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
select,
textarea,
.input,
.select,
.field,
.search-input {
    background: var(--apl-card-soft) !important;
    border: 1.5px solid var(--apl-border) !important;
    border-radius: 14px !important;
    color: var(--apl-text) !important;
    box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.input:focus,
.select:focus {
    border-color: var(--apl-slate) !important;
    box-shadow: 0 0 0 4px rgba(88, 99, 143, 0.13) !important;
    outline: none !important;
}

.btn-primary,
.btn.btn-primary,
button.btn-primary,
.button-primary,
.btn-save,
.btn-po-both,
.placement-floating-save .btn:not(.btn-secondary):not(:disabled) {
    background: var(--apl-slate) !important;
    border-color: var(--apl-slate) !important;
    color: #fff !important;
    box-shadow: 0 12px 22px rgba(88, 99, 143, 0.18) !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover,
.button-primary:hover,
.btn-save:hover,
.btn-po-both:hover,
.placement-floating-save .btn:not(.btn-secondary):not(:disabled):hover {
    background: var(--apl-slate-dark) !important;
    border-color: var(--apl-slate-dark) !important;
    color: #fff !important;
}

.btn-accent,
.btn-warning,
.btn-po-student,
.btn-po-workplace {
    background: var(--apl-peach) !important;
    border-color: var(--apl-peach) !important;
    color: var(--apl-text) !important;
}

.btn-secondary,
.btn-outline,
.btn-ghost,
.btn.btn-secondary,
.placement-floating-save .btn-secondary {
    background: var(--apl-card) !important;
    border-color: var(--apl-border) !important;
    color: var(--apl-text-soft) !important;
}

.btn:disabled,
button:disabled,
.btn-po:disabled {
    background: var(--apl-row-gap) !important;
    border-color: var(--apl-border) !important;
    color: var(--apl-muted) !important;
    opacity: 1 !important;
}

.fab,
.floating-action,
.floating-add,
[class*="floating"][class*="add"] {
    background: var(--apl-slate) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: var(--apl-shadow) !important;
}

.fab i,
.floating-action i,
.floating-add i {
    color: #fff !important;
}

/* Strict shared table style ---------------------------------------------- */
.apl-table-card,
.table-card,
.aplsin-table-card,
.dash-main-card,
.card:has(> table),
.card:has(.wp-table),
.card:has(.po-tbl),
.card:has(.placement-workplace-table),
.card:has(.adm-tbl),
.placement-workplace-table-wrap {
    background: var(--apl-card) !important;
    border: 2px solid var(--apl-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--apl-shadow) !important;
    overflow: hidden !important;
}

.apl-table-card table,
.table-card table,
.aplsin-table-card table,
.card > table,
.wp-table,
.po-tbl,
.adm-tbl,
.users-table,
.periods-table,
.cls-table,
.classes-table,
.placement-workplace-table,
.imp-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--apl-card) !important;
    box-shadow: none !important;
}

.apl-table-card thead th,
.table-card thead th,
.aplsin-table-card thead th,
.card > table thead th,
.wp-table thead th,
.po-tbl thead th,
.adm-tbl thead th,
.users-table thead th,
.periods-table thead th,
.cls-table thead th,
.classes-table thead th,
.placement-workplace-table thead th,
.imp-table thead th {
    background: var(--apl-card-soft) !important;
    color: var(--apl-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    padding: 18px 22px !important;
    border-bottom: 1px solid var(--apl-border) !important;
}

.apl-table-card tbody td,
.table-card tbody td,
.aplsin-table-card tbody td,
.card > table tbody td,
.wp-table tbody td,
.po-tbl tbody td,
.adm-tbl tbody td,
.users-table tbody td,
.periods-table tbody td,
.cls-table tbody td,
.classes-table tbody td,
.placement-workplace-table tbody td,
.imp-table tbody td {
    background: var(--apl-card) !important;
    color: var(--apl-text) !important;
    padding: 18px 22px !important;
    border-bottom: 6px solid var(--apl-row-gap) !important;
}

.apl-table-card tbody tr:last-child td,
.table-card tbody tr:last-child td,
.aplsin-table-card tbody tr:last-child td,
.card > table tbody tr:last-child td,
.wp-table tbody tr:last-child td,
.po-tbl tbody tr:last-child td,
.adm-tbl tbody tr:last-child td,
.users-table tbody tr:last-child td,
.periods-table tbody tr:last-child td,
.cls-table tbody tr:last-child td,
.classes-table tbody tr:last-child td,
.placement-workplace-table tbody tr:last-child td,
.imp-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* Dashboard repair: no KPI row, main mentor class table first ------------ */
.dashboard-page-v2 {
    --dash-status-green: var(--apl-slate);
    --dash-status-green-soft: var(--apl-slate-soft);
    --dash-status-green-border: rgba(88, 99, 143, 0.28);
    --attendance-present-bg: var(--apl-slate);
    --attendance-present-border: var(--apl-slate);
    --attendance-present-text: #fff;
    background: var(--apl-page) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) !important;
    grid-template-rows: auto auto auto !important;
    gap: 24px !important;
    align-items: start !important;
    padding: 28px clamp(24px, 3vw, 48px) 44px !important;
}

.dashboard-page-v2 > .dash-summary-row {
    display: none !important;
}

.dashboard-page-v2 > .dash-flash {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
}

.dashboard-page-v2 > .dash-workspace {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
}

.dashboard-page-v2 > .dash-start-row {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    margin: 0 !important;
    min-width: 0 !important;
}

.dashboard-page-v2 > .dash-other-card {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
}

.dashboard-page-v2 .dash-main-card {
    background: var(--apl-card) !important;
    border: 2px solid var(--apl-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--apl-shadow) !important;
    overflow: hidden !important;
}

.dashboard-page-v2 .dash-student-table {
    background: var(--apl-card) !important;
}

.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-head,
.dashboard-page-v2 .dash-main-card:not(.is-card-mode) .dash-student-row:not(.dash-student-group-head) {
    grid-template-columns: minmax(126px, 0.8fr) minmax(150px, 1fr) 92px 90px 125px 56px 64px 38px !important;
    gap: 8px !important;
}

.dashboard-page-v2 .dash-workspace {
    min-width: 0 !important;
}

.dashboard-page-v2 .dash-student-head {
    background: var(--apl-card-soft) !important;
    color: var(--apl-muted) !important;
    border-bottom: 1px solid var(--apl-border) !important;
    text-transform: uppercase !important;
}

.dashboard-page-v2 .dash-student-row:not(.dash-student-head):not(.dash-student-group-head) {
    background: var(--apl-card) !important;
    border-bottom: 6px solid var(--apl-row-gap) !important;
    color: var(--apl-text) !important;
}

.dashboard-page-v2 .dash-student-row:not(.dash-student-head):not(.dash-student-group-head):hover {
    background: #fffdfb !important;
}

.dashboard-page-v2 .dash-student-group-head {
    background: var(--apl-card-soft) !important;
    color: var(--apl-text-soft) !important;
    border-bottom: 1px solid var(--apl-border) !important;
}

.dashboard-page-v2 .dash-today-state {
    min-width: 92px !important;
    justify-content: center !important;
}

.dashboard-page-v2 .dash-today-state:empty::after {
    content: "—";
}

.dashboard-page-v2 .dash-today-state:not(:has(span))::after {
    content: "—";
}

.dashboard-page-v2 .dash-state-present,
.dashboard-page-v2 .dash-today-state.dash-state-present,
.dashboard-page-v2 .dash-day-present,
.dashboard-page-v2 .dash-attendance-period-day.is-present,
.dashboard-page-v2 .dash-attendance-week-day.is-present {
    background: var(--apl-slate) !important;
    border-color: var(--apl-slate) !important;
    color: #fff !important;
}

.dashboard-page-v2 .dash-state-present *,
.dashboard-page-v2 .dash-today-state.dash-state-present *,
.dashboard-page-v2 .dash-day-present *,
.dashboard-page-v2 .dash-attendance-period-day.is-present *,
.dashboard-page-v2 .dash-attendance-week-day.is-present * {
    color: #fff !important;
}

.dashboard-page-v2 .dash-state-missing,
.dashboard-page-v2 .dash-state-none,
.dashboard-page-v2 .dash-state-absent,
.dashboard-page-v2 .dash-day-missing,
.dashboard-page-v2 .dash-day-absent,
.dashboard-page-v2 .dash-attendance-period-day.is-absent,
.dashboard-page-v2 .dash-attendance-period-day.is-missing,
.dashboard-page-v2 .dash-attendance-week-day.is-absent,
.dashboard-page-v2 .dash-attendance-week-day.is-missing {
    background: var(--apl-peach-soft) !important;
    border-color: rgba(244, 173, 143, 0.72) !important;
    color: var(--apl-text) !important;
}

.dashboard-page-v2 .dash-contract-ok,
.dashboard-page-v2 .dash-visit-done,
.dashboard-page-v2 .dash-visit-ok,
.dashboard-page-v2 .dash-mini-status.is-ok,
.dashboard-page-v2 .dash-status-ok {
    background: var(--apl-slate-soft) !important;
    border-color: rgba(88, 99, 143, 0.28) !important;
    color: var(--apl-slate-dark) !important;
}

.dashboard-page-v2 .dash-contract-warn,
.dashboard-page-v2 .dash-visit-planned,
.dashboard-page-v2 .dash-visit-missing,
.dashboard-page-v2 .dash-visit-warn,
.dashboard-page-v2 .dash-mini-status.is-warn,
.dashboard-page-v2 .dash-status-warn {
    background: var(--apl-peach-soft) !important;
    border-color: rgba(244, 173, 143, 0.72) !important;
    color: #9c553b !important;
}

.dashboard-page-v2 .dash-start-row > section {
    background: var(--apl-card) !important;
    border: 2px solid var(--apl-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--apl-shadow) !important;
    overflow: hidden !important;
}

.dashboard-page-v2 .dash-start-notices .dash-side-head {
    background: var(--apl-peach-soft) !important;
    border-bottom: 1px solid rgba(244, 173, 143, 0.45) !important;
}

.dashboard-page-v2 .dash-start-notices .dash-notice,
.dashboard-page-v2 .dash-mini-row {
    background: var(--apl-card) !important;
    border-bottom: 1px solid var(--apl-border) !important;
    color: var(--apl-text) !important;
}

.dashboard-page-v2 .dash-notice.is-unread {
    background: var(--apl-card) !important;
}

.dashboard-page-v2 .dash-notice.is-unread .dash-notice-dot,
.dashboard-page-v2 .dash-log-mini-unread > span:first-child,
.dashboard-page-v2 .dash-attendance-mini-warning > span:first-child,
.dashboard-page-v2 .dash-attendance-mini-missing > span:first-child {
    background: var(--apl-peach-dark) !important;
}

.dashboard-page-v2 .dash-notice-dot,
.dashboard-page-v2 .dash-mini-row > span:first-child {
    background: var(--apl-muted-light, #c9c6c0) !important;
}

.dashboard-page-v2 .dash-unread-badge,
.dashboard-page-v2 .dash-card-count {
    background: var(--apl-slate) !important;
    color: #fff !important;
}

.dashboard-page-v2 .dash-card-count:not(.is-unread) {
    background: var(--apl-peach-soft) !important;
    color: #9c553b !important;
}

.dashboard-page-v2 .dash-month-card {
    background: var(--apl-slate) !important;
    border-color: var(--apl-slate-dark) !important;
    color: #fff !important;
}

.dashboard-page-v2 .dash-start-row > section.dash-month-card {
    background: var(--apl-slate) !important;
    border-color: var(--apl-slate-dark) !important;
    color: #fff !important;
}

.dashboard-page-v2 .dash-start-row > section.dash-month-card .dash-section-head,
.dashboard-page-v2 .dash-start-row > section.dash-month-card .dash-side-head {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.dashboard-page-v2 .dash-month-card *,
.dashboard-page-v2 .dash-month-card h2,
.dashboard-page-v2 .dash-month-card h2 i,
.dashboard-page-v2 .dash-month-card .dash-section-head h2 {
    color: #fff !important;
}

.dashboard-page-v2 .dash-month-nav {
    background: rgba(255, 255, 255, 0.13) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.dashboard-page-v2 .dash-month-nav a {
    color: #fff !important;
}

.dashboard-page-v2 .dash-month-nav a:nth-child(2),
.dashboard-page-v2 .dash-month-day.is-today {
    background: var(--apl-peach) !important;
    color: var(--apl-text) !important;
}

.dashboard-page-v2 .dash-month-weekdays span,
.dashboard-page-v2 .dash-month-week-number,
.dashboard-page-v2 .dash-month-legend span {
    color: rgba(255, 255, 255, 0.72) !important;
}

.dashboard-page-v2 .dash-month-day {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

.dashboard-page-v2 .dash-month-day.is-muted {
    opacity: .45 !important;
}

.dashboard-page-v2 .dash-month-day.is-apl:not(.is-today) {
    background: rgba(255, 255, 255, 0.16) !important;
}

.dashboard-page-v2 .dash-month-dot,
.dashboard-page-v2 .dash-month-dot-visit,
.dashboard-page-v2 .dash-month-dot-attendance {
    background: var(--apl-peach) !important;
}

.dashboard-page-v2 .dash-month-dot-call,
.dashboard-page-v2 .dash-month-dot-contract {
    background: rgba(255, 255, 255, 0.82) !important;
}

/* Repair selected/active contrast on slate backgrounds ------------------- */
.placement-student-row.is-selected,
.placement-student-row.is-selected *,
.student-filter-chip.is-active,
.student-filter-chip.is-active *,
.filter-chip.is-active,
.filter-chip.is-active *,
.wp-chip.is-active,
.wp-chip.is-active *,
.tab.is-active,
.tab.is-active *,
.template-tab.is-active,
.template-tab.is-active *,
.pn-btn.active,
.pn-btn.active * {
    background-color: var(--apl-slate) !important;
    border-color: var(--apl-slate) !important;
    color: #fff !important;
}

.placement-student-row.is-selected i,
.placement-student-row.is-selected svg,
.tab.is-active i,
.template-tab.is-active i {
    color: #fff !important;
    stroke: #fff !important;
}

/* Status/badge mapping: no green UI chrome ------------------------------- */
.pill-success,
.badge-success,
.status-active,
.status-dot.active,
.dot-active,
.risk-approved,
.sig-box--signed,
.sig-box--done,
.entry-pill-green,
.badge-done,
.gps-btn.got,
.sh-tab-badge-green,
.sh-sig-done,
.vp-chip--green .vp-chip__val,
.po-btn-green,
.po-btn-blue,
.po-btn-info {
    background: var(--apl-slate-soft) !important;
    border-color: rgba(88, 99, 143, 0.28) !important;
    color: var(--apl-slate-dark) !important;
}

.pill-warning,
.badge-warning,
.pill-danger,
.badge-danger,
.risk-untested,
.risk-warning,
.po-btn-yellow,
.po-btn-red,
.capacity-badge.is-full,
.capacity-badge.is-warning,
.placement-place-state.is-full {
    background: var(--apl-peach-soft) !important;
    border-color: rgba(244, 173, 143, 0.72) !important;
    color: #9c553b !important;
}

.capacity-badge.is-free,
.placement-place-state.is-free {
    background: var(--apl-slate-soft) !important;
    color: var(--apl-slate-dark) !important;
}

.role-admin,
.role-badge-admin,
.user-role-admin {
    background: var(--apl-slate) !important;
    color: #fff !important;
}

.role-program,
.role-program-admin,
.user-role-program_admin {
    background: var(--apl-slate-soft) !important;
    color: var(--apl-slate-dark) !important;
}

.role-teacher,
.role-larare,
.user-role-teacher {
    background: var(--apl-peach-soft) !important;
    color: #9c553b !important;
}

.users-table .status-dot,
.wp-table .status-dot,
.cls-table .status-dot,
.periods-table .status-dot {
    background: var(--apl-slate) !important;
}

/* Templates and import pages -------------------------------------------- */
.template-section,
.template-block,
.mail-template,
.review-template,
.contract-template,
.templates-panel,
.tpl-card {
    background: var(--apl-card) !important;
    border: 2px solid var(--apl-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--apl-shadow) !important;
}

.template-section::before,
.template-block::before,
.mail-template::before,
.review-template::before,
.contract-template::before {
    background: var(--apl-slate) !important;
}

.template-variable,
.variable-chip,
.tpl-var,
.var-pill {
    background: var(--apl-slate-soft) !important;
    border: 1px solid rgba(88, 99, 143, 0.22) !important;
    color: var(--apl-slate-dark) !important;
}

.upload-zone,
.drop-zone,
.import-dropzone,
[class*="dropzone"],
[class*="upload-zone"] {
    background: var(--apl-card-soft) !important;
    border: 2px dashed var(--apl-border-strong) !important;
    border-radius: 24px !important;
    color: var(--apl-text-soft) !important;
}

.page [style*="#dff3e8"],
.page [style*="#dcfce7"],
.page [style*="#bbf7d0"] {
    background: var(--apl-slate-soft) !important;
    border-color: rgba(88, 99, 143, 0.28) !important;
}

.page [style*="#16a34a"],
.page [style*="#15803d"],
.page [style*="#166534"],
.page [style*="#22c55e"],
.page [style*="#4f8f3a"] {
    color: var(--apl-slate-dark) !important;
}

.page [style*="#f97316"],
.page [style*="#fb923c"],
.page [style*="#f59e0b"],
.page [style*="#92400e"],
.page [style*="#854d0e"] {
    color: #9c553b !important;
}

.page [style*="background:#111"],
.page [style*="background: #111"],
.page [style*="background:#000"],
.page [style*="background: #000"],
.page [style*="background:#111827"],
.page [style*="background: #111827"] {
    background: var(--apl-slate) !important;
    color: #fff !important;
}

.po-bulk,
.placement-floating-save,
.sticky-action-bar,
.bulk-actions {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 2px solid var(--apl-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--apl-shadow) !important;
}

@media (max-width: 1180px) {
    .dashboard-page-v2 {
        display: flex !important;
        flex-direction: column !important;
        padding: 22px 18px 36px !important;
    }

    .dashboard-page-v2 > .dash-flash {
        order: 0 !important;
    }

    .dashboard-page-v2 > .dash-workspace {
        order: 1 !important;
    }

    .dashboard-page-v2 > .dash-start-row {
        order: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin-top: 22px !important;
    }

    .dashboard-page-v2 > .dash-other-card {
        order: 3 !important;
    }
}

@media (max-width: 760px) {
    .dashboard-page-v2 > .dash-start-row {
        grid-template-columns: 1fr !important;
    }
}

/* APLSIN_REPAIR_FINAL_PASS ---------------------------------------------- */
body,
.app-shell,
.app-main,
.page,
.page-body,
.main-content,
.app-content {
    background: var(--apl-page) !important;
}

body::before,
body::after,
.app-main::before,
.app-main::after,
.page::before,
.page::after,
.main-content::before,
.main-content::after {
    background: transparent !important;
    box-shadow: none !important;
}

.placement-sidebar .placement-student-row.is-selected,
.placement-sidebar .placement-student-row.is-selected *,
.placement-student-list .placement-student-row.is-selected,
.placement-student-list .placement-student-row.is-selected *,
.placement-students .placement-student-row.is-selected,
.placement-students .placement-student-row.is-selected * {
    background-color: var(--apl-slate) !important;
    border-color: var(--apl-slate) !important;
    color: #fff !important;
}

.placement-sidebar .placement-student-row.is-selected a,
.placement-student-list .placement-student-row.is-selected a,
.placement-students .placement-student-row.is-selected a,
.placement-sidebar .placement-student-row.is-selected i,
.placement-student-list .placement-student-row.is-selected i,
.placement-students .placement-student-row.is-selected i,
.placement-sidebar .placement-student-row.is-selected svg,
.placement-student-list .placement-student-row.is-selected svg,
.placement-students .placement-student-row.is-selected svg {
    color: #fff !important;
    stroke: #fff !important;
}

.dashboard-page-v2 .dash-today-state:not(.dash-state-present):not(:has(span)) i {
    display: none !important;
}

.dashboard-page-v2 .dash-today-state:empty::after,
.dashboard-page-v2 .dash-today-state:not(.dash-state-present):not(:has(span))::after {
    content: "—";
    color: #9c553b;
    font-weight: 700;
}

.dashboard-page-v2 .dash-today-state:not(.dash-state-present):not(:has(span)) {
    background: var(--apl-peach-soft) !important;
    border-color: rgba(244, 173, 143, 0.72) !important;
    color: #9c553b !important;
}

.adm-tbl span[style*="border-radius:50%"][style*="background"],
.adm-tbl span[style*="border-radius: 50%"][style*="background"],
.users-table span[style*="border-radius:50%"][style*="background"],
.users-table span[style*="border-radius: 50%"][style*="background"],
.user-avatar[style*="background"],
.avatar[style*="background"] {
    background: var(--apl-slate-soft) !important;
    border-color: rgba(88, 99, 143, 0.24) !important;
    color: var(--apl-slate-dark) !important;
}

.adm-tbl .pill[style*="background"],
.users-table .pill[style*="background"],
.periods-table .pill[style*="background"],
.classes-table .pill[style*="background"],
.cls-table .pill[style*="background"],
.wp-table .pill[style*="background"] {
    background: var(--apl-slate-soft) !important;
    border: 1px solid rgba(88, 99, 143, 0.24) !important;
    color: var(--apl-slate-dark) !important;
}

.page [style*="--success-soft"],
.page [style*="--success"],
.page [style*="--green"],
.page [style*="green"] {
    background-color: var(--apl-slate-soft) !important;
    border-color: rgba(88, 99, 143, 0.24) !important;
    color: var(--apl-slate-dark) !important;
}

.page [style*="--warning-soft"],
.page [style*="--danger-soft"],
.page [style*="--error-soft"],
.page [style*="--orange"],
.page [style*="--amber"],
.page [style*="yellow"] {
    background-color: var(--apl-peach-soft) !important;
    border-color: rgba(244, 173, 143, 0.72) !important;
    color: #9c553b !important;
}

.fab,
.floating-add,
.floating-action,
.btn-floating,
.add-floating,
.page-fab {
    background: var(--apl-slate) !important;
    border-color: var(--apl-slate) !important;
    color: #fff !important;
}

.fab svg,
.floating-add svg,
.floating-action svg,
.btn-floating svg,
.add-floating svg,
.page-fab svg,
.fab i,
.floating-add i,
.floating-action i,
.btn-floating i,
.add-floating i,
.page-fab i {
    color: #fff !important;
    stroke: #fff !important;
}

a.aplsin-floating-add.aplsin-floating-add {
    align-items: center !important;
    background: #238050 !important;
    border: 1px solid #238050 !important;
    border-radius: 999px !important;
    bottom: clamp(22px, 3vw, 36px) !important;
    box-shadow: 0 16px 34px rgba(35, 128, 80, 0.28) !important;
    color: #fff !important;
    display: inline-flex !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    gap: 9px !important;
    min-height: 54px !important;
    padding: 0 21px 0 18px !important;
    position: fixed !important;
    right: clamp(22px, 3vw, 36px) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    z-index: 80 !important;
}

a.aplsin-floating-add.aplsin-floating-add i {
    align-items: center !important;
    color: #fff !important;
    display: inline-flex !important;
    font-size: 1.1rem !important;
    justify-content: center !important;
    line-height: 1 !important;
    stroke: #fff !important;
}

a.aplsin-floating-add.aplsin-floating-add span {
    color: #fff !important;
}

a.aplsin-floating-add.aplsin-floating-add:hover,
a.aplsin-floating-add.aplsin-floating-add:focus-visible {
    background: #17663e !important;
    border-color: #17663e !important;
    box-shadow: 0 20px 42px rgba(35, 128, 80, 0.36) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

@media (max-width: 720px) {
    a.aplsin-floating-add.aplsin-floating-add {
        bottom: 18px !important;
        min-height: 50px !important;
        right: 16px !important;
        padding: 0 17px 0 15px !important;
    }
}

/* APLSIN_REPAIR_CARD_TABS_FINAL ----------------------------------------- */
.s-card,
.settings-card,
.school-card,
.template-card,
.template-editor-card,
.admin-card {
    background: var(--apl-card) !important;
    border: 2px solid var(--apl-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--apl-shadow) !important;
    color: var(--apl-text) !important;
    overflow: hidden !important;
}

.s-card > h3,
.settings-card > h3,
.school-card > h3,
.template-card > h3,
.admin-card > h3 {
    background: var(--apl-card-soft) !important;
    border-bottom: 1px solid var(--apl-border) !important;
    color: var(--apl-text) !important;
    margin-top: 0 !important;
}

.tab-bar,
.track-tabs,
.template-tabs,
.program-tabs,
.inriktning-tabs {
    background: var(--apl-card) !important;
    border: 1px solid var(--apl-border) !important;
    border-radius: 999px !important;
    box-shadow: var(--apl-shadow-soft, var(--apl-shadow)) !important;
    gap: 8px !important;
    padding: 8px !important;
}

.tab-btn,
.track-tab,
.template-tab,
.program-tab,
.inriktning-tab {
    background: var(--apl-card) !important;
    border: 1px solid var(--apl-border) !important;
    border-radius: 999px !important;
    color: var(--apl-text-soft) !important;
    box-shadow: none !important;
}

.tab-btn.active,
.track-tab.active,
.template-tab.active,
.program-tab.active,
.inriktning-tab.active,
.tab-btn[aria-selected="true"],
.track-tab[aria-selected="true"],
.template-tab[aria-selected="true"] {
    background: var(--apl-slate) !important;
    border-color: var(--apl-slate) !important;
    color: #fff !important;
}

.tab-btn.active *,
.track-tab.active *,
.template-tab.active *,
.program-tab.active *,
.inriktning-tab.active * {
    color: #fff !important;
}

/* APLSIN_RESTORE_NAVY_SIDEBAR -------------------------------------------
   Shared chrome should keep the APLsin dark blue navigation. Several older
   reference-theme passes above intentionally experimented with a light sidebar;
   this final layer restores the production direction. */
:root {
    --apl-sidebar-navy-top: #1c5487;
    --apl-sidebar-navy-mid: #123f6f;
    --apl-sidebar-navy-bottom: #082b4b;
    --apl-sidebar-navy-line: rgba(255, 255, 255, 0.12);
    --apl-sidebar-navy-text: #f4f8ff;
    --apl-sidebar-navy-muted: rgba(222, 234, 248, 0.68);
    --apl-sidebar-navy-link: rgba(232, 240, 250, 0.86);
    --apl-sidebar-navy-hover: rgba(255, 255, 255, 0.10);
    --apl-sidebar-navy-active: rgba(255, 255, 255, 0.16);
}

.sidebar {
    background:
        linear-gradient(180deg,
            var(--apl-sidebar-navy-top) 0%,
            var(--apl-sidebar-navy-mid) 44%,
            var(--apl-sidebar-navy-bottom) 100%) !important;
    border-right: 0 !important;
    box-shadow: 18px 0 42px rgba(8, 43, 75, 0.18) !important;
    color: var(--apl-sidebar-navy-link) !important;
}

.sidebar-brand,
.sidebar-bottom {
    background: transparent !important;
    border-color: var(--apl-sidebar-navy-line) !important;
    box-shadow: none !important;
}

.sidebar-brand,
.sidebar-brand .brand-text,
.sidebar-brand .brand-word,
.sidebar-brand .brand-i {
    color: var(--apl-sidebar-navy-text) !important;
    background: transparent !important;
}

.sidebar-brand .brand-dot {
    background: #f97316 !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18) !important;
}

.sidebar-group-title {
    color: var(--apl-sidebar-navy-muted) !important;
}

.sidebar-link,
.sidebar-bottom-link,
.sidebar-toggle {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--apl-sidebar-navy-link) !important;
    box-shadow: none !important;
}

.sidebar-link i,
.sidebar-bottom-link i,
.sidebar-toggle i {
    color: rgba(220, 234, 249, 0.82) !important;
}

.sidebar-link:hover,
.sidebar-bottom-link:hover,
.sidebar-toggle:hover {
    background: var(--apl-sidebar-navy-hover) !important;
    color: var(--apl-sidebar-navy-text) !important;
}

.sidebar-link:hover i,
.sidebar-bottom-link:hover i,
.sidebar-toggle:hover i {
    color: #fff !important;
}

.sidebar-link.is-active,
.sidebar-bottom-link.is-active {
    background: var(--apl-sidebar-navy-active) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    border-radius: 18px !important;
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.86) !important;
}

.sidebar-link.is-active::after,
.sidebar-bottom-link.is-active::after {
    display: none !important;
}

.sidebar-link.is-active i,
.sidebar-bottom-link.is-active i {
    color: #fff !important;
}