/**
 * Lerncampus – Premium Design System v2
 * Brand: #9e1623 (Dunkelrot) · #c73e23 (Ziegelrot) · #f18700 (Orange)
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* ── Design Tokens ────────────────────────────────────────────────────── */
:root {
    /* Brand */
    --c-brand:        #9e1623;
    --c-brand-dark:   #6e0b14;
    --c-brand-deeper: #3d0409;
    --c-brand-light:  #fdf0f1;
    --c-brand-mid:    #c73e23;
    --c-accent:       #f18700;
    --c-accent-light: #fff4e0;

    /* Functional */
    --c-success:      #059669;
    --c-success-bg:   #ecfdf5;
    --c-warning:      #d97706;
    --c-warning-bg:   #fffbeb;
    --c-danger:       #dc2626;
    --c-danger-bg:    #fef2f2;
    --c-info:         #2563eb;
    --c-info-bg:      #eff6ff;

    /* Neutrals */
    --c-bg:           #f1f3f7;
    --c-surface:      #ffffff;
    --c-border:       #e2e8f0;
    --c-border-strong:#c8d4e0;
    --c-text:         #0d1117;
    --c-text-muted:   #5a6a7e;
    --c-text-subtle:  #94a3b8;

    /* Sidebar */
    --sidebar-bg-top:    #1a0408;
    --sidebar-bg-bottom: #2d0a10;
    --sidebar-width:     300px;

    /* Spacing */
    --sp-xs: .25rem;
    --sp-sm: .5rem;
    --sp-md: 1rem;
    --sp-lg: 1.5rem;
    --sp-xl: 2rem;
    --sp-2xl: 3rem;

    /* Radius */
    --r-sm:  6px;
    --r-md:  10px;
    --r-lg:  22px;
    --r-xl:  32px;
    --r-pill: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 3px rgba(15, 23, 42, .08);
    --shadow-sm: 0 14px 28px rgba(15, 23, 42, .10), 0 3px 8px rgba(15, 23, 42, .06);
    --shadow-md: 0 24px 48px rgba(15, 23, 42, .14), 0 8px 16px rgba(15, 23, 42, .08);
    --shadow-lg: 0 34px 72px rgba(15, 23, 42, .18), 0 14px 26px rgba(15, 23, 42, .11);
    --shadow-brand: 0 8px 24px rgba(158,22,35,.22);

    /* Font */
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;

    /* Compatibility aliases for forms-premium.css */
    --color-primary:       var(--c-brand);
    --color-primary-dark:  var(--c-brand-dark);
    --color-primary-light: var(--c-brand-light);
    --color-secondary:     var(--c-brand-mid);
    --color-accent:        var(--c-accent);
    --color-accent-light:  var(--c-accent-light);
    --color-success:       var(--c-success);
    --color-success-light: var(--c-success-bg);
    --color-danger:        var(--c-danger);
    --color-danger-light:  var(--c-danger-bg);
    --color-warning:       var(--c-warning);
    --color-warning-light: var(--c-warning-bg);
    --color-background:    var(--c-bg);
    --color-card:          var(--c-surface);
    --color-border:        var(--c-border);
    --color-text-dark:     var(--c-text);
    --color-text-muted:    var(--c-text-muted);

    --spacing-xs:          var(--sp-xs);
    --spacing-sm:          var(--sp-sm);
    --spacing-md:          var(--sp-md);
    --spacing-lg:          var(--sp-lg);
    --spacing-xl:          var(--sp-xl);

    --border-radius-sm:    var(--r-sm);
    --border-radius-md:    var(--r-md);
    --border-radius-lg:    var(--r-lg);
}

/* ── Animations ───────────────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity:0; transform:translateY(12px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes ambientShift {
    0%   { background-position: 0% 0%, 100% 0%, center; }
    50%  { background-position: 8% 12%, 92% 10%, center; }
    100% { background-position: 0% 0%, 100% 0%, center; }
}
@keyframes orbDrift {
    0% { transform:translate3d(0,0,0) scale(1); }
    50% { transform:translate3d(18px,-12px,0) scale(1.04); }
    100% { transform:translate3d(0,0,0) scale(1); }
}
@keyframes shimmer {
    from { left:-150%; }
    to   { left:150%; }
}
@keyframes pulse-dot {
    0%,100% { transform:scale(1); opacity:1; }
    50%     { transform:scale(1.4); opacity:.7; }
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

body {
    font-family: var(--font-body);
    background:
        radial-gradient(1200px 520px at -8% -10%, rgba(158,22,35,.2), transparent 62%),
        radial-gradient(960px 460px at 108% -6%, rgba(241,135,0,.18), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(241,243,247,.88) 100%),
        var(--c-bg);
    background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
    background-size:cover, cover, cover;
    color: var(--c-text);
    line-height: 1.62;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    animation:ambientShift 16s ease-in-out infinite;
    position:relative;
    isolation:isolate;
}

html,
body {
    max-width:100%;
    overflow-x:hidden;
}

img,
video,
canvas,
iframe {
    max-width:100%;
    height:auto;
}

body::before,
body::after {
    content:'';
    position:fixed;
    z-index:-1;
    filter:blur(8px);
    pointer-events:none;
}

body::before {
    width:420px;
    height:420px;
    top:-120px;
    right:-120px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.8), rgba(199,62,35,.22) 45%, transparent 72%);
    animation:orbDrift 14s ease-in-out infinite;
}

body::after {
    width:360px;
    height:360px;
    left:-120px;
    bottom:-120px;
    border-radius:50%;
    background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.76), rgba(241,135,0,.24) 48%, transparent 74%);
    animation:orbDrift 12s ease-in-out infinite reverse;
}

a {
    color: var(--c-brand);
    text-decoration: none;
    font-weight: 500;
    transition: color .18s ease;
}
a:hover { color: var(--c-brand-mid); }

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: -.02em;
    line-height: 1.24;
    margin-bottom: var(--sp-sm);
}

.content-body p,
.content-body li {
    line-height: 1.68;
}

/* ── Scrollbar ────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--c-border-strong); border-radius:var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background:var(--c-brand); }

/* ── Layout ───────────────────────────────────────────────────────────── */
.container {
    width:100%;
    max-width:1320px;
    margin:0 auto;
    padding:0 var(--sp-lg);
}

.app-wrapper {
    display:flex;
    min-height:100vh;
}

/* ── Grid ─────────────────────────────────────────────────────────────── */
.row, .dashboard-grid {
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:var(--sp-lg);
    margin-bottom:var(--sp-lg);
}
.col-1{grid-column:span 1}  .col-2{grid-column:span 2}
.col-3{grid-column:span 3}  .col-4{grid-column:span 4}
.col-5{grid-column:span 5}  .col-6{grid-column:span 6}
.col-7{grid-column:span 7}  .col-8{grid-column:span 8}
.col-9{grid-column:span 9}  .col-10{grid-column:span 10}
.col-11{grid-column:span 11} .col-12{grid-column:span 12}

.row>div, .dashboard-grid>div { animation:fadeUp .62s cubic-bezier(.16,1,.3,1) both; }
.row>div:nth-child(1),.dashboard-grid>div:nth-child(1){animation-delay:.05s}
.row>div:nth-child(2),.dashboard-grid>div:nth-child(2){animation-delay:.11s}
.row>div:nth-child(3),.dashboard-grid>div:nth-child(3){animation-delay:.17s}
.row>div:nth-child(4),.dashboard-grid>div:nth-child(4){animation-delay:.23s}
.row>div:nth-child(5),.dashboard-grid>div:nth-child(5){animation-delay:.29s}
.row>div:nth-child(6),.dashboard-grid>div:nth-child(6){animation-delay:.35s}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.sidebar-backdrop {
    position:fixed; inset:0;
    background:rgba(10,5,6,.55);
    backdrop-filter:blur(4px);
    z-index:999;
    opacity:0; pointer-events:none;
    transition:opacity .35s ease;
}
.sidebar-backdrop.open { opacity:1; pointer-events:auto; }

.sidebar {
    position:fixed;
    top:0; left:0; bottom:0;
    width:var(--sidebar-width);
    background:linear-gradient(165deg, rgba(255,255,255,.54) 0%, rgba(248,250,252,.42) 100%);
    color:var(--c-text);
    display:flex;
    flex-direction:column;
    z-index:1000;
    transform:translateX(-100%);
    transition:transform .38s cubic-bezier(.16,1,.3,1);
    box-shadow:12px 0 30px rgba(15,23,42,.12);
    border-right:1px solid rgba(255,255,255,.78);
    backdrop-filter:blur(20px) saturate(138%);
    -webkit-backdrop-filter:blur(20px) saturate(138%);
}
.sidebar.open { transform:translateX(0); }

.sidebar::before {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(140deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 42%),
        linear-gradient(0deg, rgba(255,255,255,.12), rgba(255,255,255,.1));
}

/* Sidebar brand */
.sidebar-brand {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:0;
    min-height:0;
    border-bottom:1px solid rgba(148,163,184,.18);
    background:linear-gradient(180deg,rgba(158,22,35,.12) 0%,rgba(255,255,255,0) 100%);
    position:relative;
}
.sidebar-brand::after {
    content:'';
    position:absolute;
    bottom:0; left:20%; right:20%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(241,135,0,.5),transparent);
}
.sidebar-brand img {
    width:116%;
    max-width:none;
    max-height:520px;
    height:auto;
    display:block;
    object-fit:contain;
    margin:-14px 0 -16px;
    border-radius:10px;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));
    transition:transform .3s ease;
}
.sidebar-brand img:hover { transform:scale(1.05); }

.sidebar-school-brand {
    padding:.55rem .7rem .7rem;
    border-bottom:1px solid rgba(148,163,184,.14);
    background:linear-gradient(180deg,rgba(255,255,255,.64) 0%,rgba(255,255,255,.2) 100%);
}

.sidebar-school-brand img {
    width:100%;
    max-width:164px;
    max-height:92px;
    height:auto;
    object-fit:contain;
    display:block;
    margin:0 auto;
    border-radius:8px;
    filter:drop-shadow(0 3px 8px rgba(15,23,42,.18));
}

/* Sidebar menu */
.sidebar-menu {
    list-style:none;
    flex-grow:1;
    overflow-y:auto;
    padding:.9rem .6rem;
}
.sidebar-item a {
    display:flex;
    align-items:center;
    gap:12px;
    padding:.7rem var(--sp-md);
    color:rgba(15,23,42,.82);
    font-weight:580;
    font-size:.9rem;
    letter-spacing:.008em;
    border-radius:var(--r-md);
    transition:all .22s cubic-bezier(.16,1,.3,1);
    margin-bottom:5px;
    position:relative;
    border:1px solid transparent;
    overflow:hidden;
}
.sidebar-item a svg {
    opacity:.82;
    flex-shrink:0;
    color:rgba(51,65,85,.82);
    filter:drop-shadow(0 1px 1px rgba(255,255,255,.5));
    transition:opacity .2s,transform .2s,color .2s,filter .2s;
}
.sidebar-item a:hover {
    color:var(--c-text);
    background:linear-gradient(135deg, rgba(255,255,255,.74), rgba(255,255,255,.52));
    border-color:rgba(203,213,225,.54);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.82), 0 6px 14px rgba(15,23,42,.09);
}
.sidebar-item a:hover svg {
    opacity:1;
    color:var(--c-brand);
    filter:drop-shadow(0 2px 6px rgba(158,22,35,.25));
    transform:scale(1.05);
}

.sidebar-item.active a {
    color:#61131b;
    background:linear-gradient(135deg, rgba(158,22,35,.18) 0%, rgba(199,62,35,.1) 100%);
    border-color:rgba(158,22,35,.24);
    box-shadow:0 8px 16px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.72);
    font-weight:700;
}

.sidebar-item.active a::after {
    content:'';
    position:absolute;
    left:7px;
    top:10px;
    bottom:10px;
    width:3px;
    border-radius:9999px;
    background:linear-gradient(180deg, var(--c-brand) 0%, var(--c-brand-mid) 100%);
    box-shadow:0 0 0 1px rgba(255,255,255,.36), 0 0 12px rgba(158,22,35,.28);
}
.sidebar-item.active a svg {
    opacity:1;
    color:var(--c-brand);
    filter:drop-shadow(0 2px 6px rgba(158,22,35,.22));
}

/* Section separator in sidebar */
.sidebar-section-label {
    font-size:.66rem; font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; color:rgba(71,85,105,.64);
    padding:.75rem var(--sp-md) .35rem;
    margin-top:.25rem;
}

.sidebar-footer {
    padding:var(--sp-md) var(--sp-lg);
    font-size:.78rem; color:rgba(71,85,105,.62);
    border-top:1px solid rgba(203,213,225,.36);
    margin-top:auto;
}

/* ── Navbar ───────────────────────────────────────────────────────────── */
.main-content {
    flex-grow:1; display:flex; flex-direction:column;
    overflow-x:hidden; width:100%;
    min-width:0;
}

.navbar {
    background:rgba(255,255,255,.64);
    border-bottom:1px solid rgba(200,212,224,.78);
    height:72px;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 calc(var(--sp-xl) * .95);
    position:sticky; top:0; z-index:90;
    box-shadow:0 20px 42px rgba(15,23,42,.12);
    backdrop-filter:blur(20px) saturate(150%);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    /* Accent line at top */
    border-top:1px solid rgba(255,255,255,.72);
    margin:14px 18px 12px;
    border-radius:20px;
}

.navbar h2 {
    font-family:var(--font-display);
    font-weight:700; font-size:1.1rem;
    color:var(--c-text);
}

.navbar-user { display:flex; align-items:center; gap:var(--sp-md); }

.layout-density-switch {
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:3px;
    border:1px solid rgba(200,212,224,.95);
    border-radius:var(--r-pill);
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.layout-density-option {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:70px;
    padding:.34rem .62rem;
    border-radius:var(--r-pill);
    font-size:.74rem;
    font-weight:700;
    color:var(--c-text-muted);
    letter-spacing:.02em;
}

.layout-density-option:hover {
    color:var(--c-brand);
    background:rgba(158,22,35,.08);
}

.layout-density-option.is-active {
    color:#fff;
    background:linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-mid) 100%);
    box-shadow:0 4px 12px rgba(158,22,35,.28);
}

.user-avatar {
    width:40px; height:40px;
    border-radius:var(--r-pill);
    background:linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-mid) 100%);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:.9rem;
    box-shadow:var(--shadow-brand);
}

/* Hamburger */
.menu-trigger {
    display:flex; flex-direction:column; justify-content:space-between;
    width:24px; height:18px;
    background:none; border:none; cursor:pointer;
    padding:0; z-index:1001; outline:none;
}
.menu-trigger .line {
    width:100%; height:2.5px;
    background:var(--c-text);
    border-radius:2px;
    transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .3s ease, background-color .3s;
}
.menu-trigger.open .line:nth-child(1){ transform:translateY(7.75px) rotate(45deg); background:var(--c-brand); }
.menu-trigger.open .line:nth-child(2){ opacity:0; }
.menu-trigger.open .line:nth-child(3){ transform:translateY(-7.75px) rotate(-45deg); background:var(--c-brand); }

/* ── Content body ─────────────────────────────────────────────────────── */
.content-body {
    padding:calc(var(--sp-xl) * 1.15);
    flex-grow:1;
    animation:fadeUp .45s cubic-bezier(.16,1,.3,1) both;
    min-width:0;
}

/* Coordinator pages: larger spacing between content blocks */
.main-content.role-coordinator .content-body {
    padding-top: 3rem !important;
}

.main-content.role-coordinator .content-body > .row:first-of-type,
.main-content.role-coordinator .content-body > .dashboard-grid:first-of-type {
    margin-top: 1.5rem !important;
    margin-bottom: 3rem !important;
}

.main-content.role-coordinator .content-body .row,
.main-content.role-coordinator .content-body .dashboard-grid {
    margin-bottom: 2.5rem !important;
    gap: 2rem !important;
}

.main-content.role-coordinator .content-body .card {
    margin-bottom: 2rem !important;
    padding: 2.25rem !important;
}

.main-content.role-coordinator .content-body .card .card-header {
    margin-bottom: 1.25rem !important;
    padding-bottom: .9rem !important;
}

.main-content.role-coordinator .content-body .stat-card {
    padding: 2rem !important;
}

.main-content.role-coordinator .content-body > * + * {
    margin-top: 2rem !important;
}

.main-content.role-coordinator .content-body .col-12 > .card + .card,
.main-content.role-coordinator .content-body .col-10 > .card + .card,
.main-content.role-coordinator .content-body .col-9 > .card + .card,
.main-content.role-coordinator .content-body .col-8 > .card + .card,
.main-content.role-coordinator .content-body .col-7 > .card + .card,
.main-content.role-coordinator .content-body .col-6 > .card + .card,
.main-content.role-coordinator .content-body .col-5 > .card + .card,
.main-content.role-coordinator .content-body .col-4 > .card + .card,
.main-content.role-coordinator .content-body .col-3 > .card + .card,
.main-content.role-coordinator .content-body .col-2 > .card + .card,
.main-content.role-coordinator .content-body .col-1 > .card + .card {
    margin-top: 2rem !important;
}

.main-content.role-coordinator .content-body .col-4 > .card:first-child {
    margin-bottom: 2.5rem !important;
}

.main-content.role-coordinator .content-body .col-4 > .card + .card {
    margin-top: 2.5rem !important;
}

.main-content.role-coordinator .content-body .card-title {
    margin-bottom: 1rem !important;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--c-border);
}

/* Page header */
.page-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:var(--sp-xl);
    padding-bottom:var(--sp-md);
    border-bottom:2px solid var(--c-border);
    animation:fadeUp .4s cubic-bezier(.16,1,.3,1) both;
}
.page-header h1 {
    font-size:1.9rem; font-weight:800;
    background:linear-gradient(135deg, var(--c-brand-dark) 0%, var(--c-brand) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}

/* ── Cards ────────────────────────────────────────────────────────────── */
.card {
    background:linear-gradient(155deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.48) 100%);
    border:1px solid rgba(255,255,255,.58);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-sm);
    padding:var(--sp-lg);
    margin-bottom:var(--sp-lg);
    transition:box-shadow .28s ease, border-color .28s ease, transform .28s ease;
    position:relative;
    overflow:hidden;
    backdrop-filter:blur(24px) saturate(145%);
    -webkit-backdrop-filter:blur(24px) saturate(145%);
    box-shadow:
        0 1px 0 rgba(255,255,255,.6) inset,
        0 0 0 1px rgba(255,255,255,.18) inset,
        var(--shadow-sm);
}
.card:hover {
    box-shadow:var(--shadow-lg);
    border-color:rgba(255,255,255,.82);
    transform:translateY(-5px);
}
/* Top accent stripe on hover */
.card::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--c-brand), var(--c-brand-mid), var(--c-accent));
    opacity:0; transition:opacity .3s ease;
}
.card:hover::before { opacity:1; }

.card-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:var(--sp-md);
    padding-bottom:var(--sp-md);
    border-bottom:1px solid var(--c-border);
}

.card-title {
    font-family:var(--font-display);
    font-size:1.14rem; font-weight:700;
    color:var(--c-text);
    margin:0;
    display:flex; align-items:center; gap:8px;
    line-height:1.32;
    letter-spacing:-.01em;
}

/* Stat cards */
.stat-card {
    background:linear-gradient(145deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.55) 100%);
    border:1px solid rgba(255,255,255,.62);
    border-radius:var(--r-lg);
    padding:var(--sp-lg);
    box-shadow:var(--shadow-sm);
    transition:all .25s ease;
    position:relative; overflow:hidden;
    backdrop-filter:blur(18px) saturate(138%);
    -webkit-backdrop-filter:blur(18px) saturate(138%);
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stat-card-value {
    font-family:var(--font-display);
    font-size:2.4rem; font-weight:900;
    color:var(--c-brand); line-height:1;
    margin-bottom:.25rem;
}
.stat-card-label {
    font-size:.82rem; font-weight:600;
    color:var(--c-text-muted); text-transform:uppercase; letter-spacing:.06em;
}

/* Special card variants */
.material-card  { border-left:4px solid var(--c-info); }
.matching-card  { border-left:4px solid var(--c-brand); }
.matching-card.active { border-left-color:var(--c-success); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font-body);
    font-weight:700; font-size:.92rem;
    padding:.68rem 1.46rem;
    border-radius:var(--r-pill);
    border:1.5px solid transparent;
    cursor:pointer;
    transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s cubic-bezier(.16,1,.3,1), border-color .22s ease, background-color .22s ease, color .22s ease;
    position:relative; overflow:hidden;
    white-space:nowrap;
    text-decoration:none;
}
/* Shimmer on hover */
.btn::after {
    content:''; position:absolute;
    top:0; left:-150%; width:150%; height:100%;
    background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.22) 50%,rgba(255,255,255,0) 100%);
    transform:skewX(-20deg); transition:left .5s ease;
}
.btn:hover::after { left:150%; }
.btn:hover { transform:translateY(-0.5px); }
.btn:active { transform:translateY(1px); }

.btn-primary {
    background:linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-mid) 100%);
    color:#fff;
    box-shadow:0 10px 20px rgba(158,22,35,.28);
    border-color:rgba(255,255,255,.24);
}
.btn-primary:hover {
    background:linear-gradient(135deg, var(--c-brand-dark) 0%, var(--c-brand) 100%);
    box-shadow:0 14px 26px rgba(158,22,35,.38);
    color:#fff;
}

.btn-secondary {
    background:rgba(255,255,255,.58);
    border-color:rgba(255,255,255,.6);
    color:var(--c-text);
    box-shadow:var(--shadow-xs);
    backdrop-filter:blur(16px) saturate(142%);
    -webkit-backdrop-filter:blur(16px) saturate(142%);
}
.btn-secondary:hover {
    background:var(--c-brand-light);
    border-color:rgba(158,22,35,.3);
    color:var(--c-brand);
    box-shadow:var(--shadow-sm);
}

.btn-success {
    background:linear-gradient(135deg, var(--c-success) 0%, #047857 100%);
    color:#fff;
    box-shadow:0 4px 14px rgba(5,150,105,.25);
}
.btn-success:hover {
    box-shadow:0 6px 20px rgba(5,150,105,.35);
    color:#fff;
}

.btn-danger {
    background:linear-gradient(135deg, var(--c-danger) 0%, #b91c1c 100%);
    color:#fff;
    box-shadow:0 4px 14px rgba(220,38,38,.25);
}
.btn-danger:hover {
    box-shadow:0 6px 20px rgba(220,38,38,.35);
    color:#fff;
}

.btn-warning {
    background:linear-gradient(135deg, var(--c-accent) 0%, var(--c-warning) 100%);
    color:#fff;
    box-shadow:0 4px 14px rgba(217,119,6,.25);
}
.btn-warning:hover {
    box-shadow:0 6px 20px rgba(217,119,6,.35);
    color:#fff;
}

.btn-sm {
    padding:.38rem .9rem;
    font-size:.8rem;
    border-radius:var(--r-sm);
}
.btn-block { width:100%; display:flex; }

/* ── Badges ───────────────────────────────────────────────────────────── */
.status-badge, .badge {
    display:inline-flex; align-items:center;
    padding:.25rem .75rem;
    font-size:.72rem; font-weight:700;
    border-radius:var(--r-pill);
    text-transform:uppercase; letter-spacing:.07em;
    border:1px solid transparent;
    white-space:nowrap;
}
.badge-success, .status-badge-success {
    background:var(--c-success-bg); color:#047857;
    border-color:rgba(5,150,105,.2);
}
.badge-danger, .status-badge-danger {
    background:var(--c-danger-bg); color:var(--c-danger);
    border-color:rgba(220,38,38,.2);
}
.badge-warning, .status-badge-warning {
    background:var(--c-warning-bg); color:var(--c-warning);
    border-color:rgba(217,119,6,.25);
}
.badge-info, .status-badge-info {
    background:var(--c-info-bg); color:var(--c-info);
    border-color:rgba(37,99,235,.2);
}
.badge-primary {
    background:var(--c-brand-light); color:var(--c-brand);
    border-color:rgba(158,22,35,.2);
}

/* ── Forms ────────────────────────────────────────────────────────────── */
.form-group { margin-bottom:var(--sp-md); }

.form-group label, .form-label {
    display:block; font-weight:600; font-size:.85rem;
    margin-bottom:.35rem; color:var(--c-text);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select,
.form-group textarea,
.form-control,
input[type="text"]:not([class]),
input[type="email"]:not([class]),
input[type="password"]:not([class]),
select:not([class]),
textarea:not([class]) {
    width:100%; padding:.65rem 1rem;
    border:1.5px solid var(--c-border);
    border-radius:var(--r-md);
    font-family:var(--font-body); font-size:.93rem;
    background:rgba(255,255,255,.9); color:var(--c-text);
    transition:border-color .18s, box-shadow .18s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-control:focus {
    outline:none;
    border-color:var(--c-brand);
    box-shadow:0 0 0 4px rgba(158,22,35,.12);
}

.form-hint {
    display:block; font-size:.76rem;
    color:var(--c-text-muted); margin-top:4px;
}

/* ── Tables ───────────────────────────────────────────────────────────── */
.table-responsive {
    width:100%; overflow-x:auto;
    border-radius:var(--r-lg);
    border:1px solid rgba(255,255,255,.62);
    background:rgba(255,255,255,.58);
    box-shadow:var(--shadow-sm);
    backdrop-filter:blur(22px) saturate(140%);
    -webkit-backdrop-filter:blur(22px) saturate(140%);
    box-shadow:
        0 1px 0 rgba(255,255,255,.55) inset,
        var(--shadow-sm);
}

.table {
    width:100%; border-collapse:collapse;
}

.table-responsive,
.table,
.card,
.navbar,
.page-header {
    min-width:0;
}

.table th {
    background:linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    color:var(--c-text); font-weight:700;
    font-size:.75rem; text-transform:uppercase; letter-spacing:.07em;
    padding:.85rem var(--sp-lg);
    text-align:left;
    border-bottom:2px solid var(--c-border-strong);
    white-space:normal;
    word-break: break-word;
}

/* Dashboard table overrides - compact and no scroll */
.dashboard-grid .table-responsive {
    overflow-x: visible !important;
    overflow: visible !important;
    width: 100% !important;
}
.dashboard-grid .table {
    table-layout: auto !important;
    width: 100% !important;
}
.dashboard-grid .table th {
    padding: .4rem .3rem !important;
    font-size: .65rem !important;
    white-space: normal !important;
    word-wrap: break-word;
}
.dashboard-grid .table td {
    padding: .4rem .3rem !important;
    font-size: .75rem !important;
    white-space: normal !important;
    word-wrap: break-word;
}
.dashboard-grid .table td:last-child {
    width: auto !important;
    min-width: 120px !important;
}

.table td {
    padding:.85rem var(--sp-lg);
    font-size:.9rem;
    line-height:1.5;
    border-bottom:1px solid var(--c-border);
    color:var(--c-text);
}

/* Alternating rows */
.table tbody tr:nth-child(even) { background:#fafbfc; }
.table tbody tr {
    transition:background .15s ease, transform .15s ease;
}
.table tbody tr:hover {
    background:var(--c-brand-light) !important;
    outline:1px solid rgba(158,22,35,.1);
}

/* ── Alerts ───────────────────────────────────────────────────────────── */
.alert {
    padding:var(--sp-md) var(--sp-lg);
    border-radius:var(--r-md);
    font-size:.9rem; font-weight:500;
    margin-bottom:var(--sp-md);
    border:1.5px solid transparent;
    display:flex; align-items:center; gap:12px;
    animation:fadeUp .35s cubic-bezier(.16,1,.3,1) both;
}
.alert-success {
    background:var(--c-success-bg); color:#065f46;
    border-color:rgba(5,150,105,.25);
}
.alert-danger, .alert-error {
    background:var(--c-danger-bg); color:#991b1b;
    border-color:rgba(220,38,38,.25);
}
.alert-warning {
    background:var(--c-warning-bg); color:#92400e;
    border-color:rgba(217,119,6,.25);
}
.alert-info {
    background:var(--c-info-bg); color:#1e40af;
    border-color:rgba(37,99,235,.25);
}

.flash-error-list {
    margin:6px 0 0 20px; padding:0;
    list-style:disc; display:grid; gap:3px;
}
.flash-error-list li { font-size:.86rem; line-height:1.45; }

/* ── Privacy hint ─────────────────────────────────────────────────────── */
.privacy-hint {
    background:linear-gradient(135deg, var(--c-warning-bg) 0%, #fff 100%);
    color:#92400e;
    border:1.5px solid rgba(217,119,6,.22);
    padding:var(--sp-lg); border-radius:var(--r-lg);
    font-size:.87rem; margin-bottom:var(--sp-lg);
    display:flex; align-items:flex-start; gap:12px;
    box-shadow:var(--shadow-sm); line-height:1.6;
}

/* ── Auth pages ───────────────────────────────────────────────────────── */
.auth-divider {
    margin:var(--sp-md) 0;
    border-top:1px solid var(--c-border);
    position:relative;
}
.auth-divider span {
    position:absolute; top:-10px; left:50%; transform:translateX(-50%);
    background:#fff; padding:0 10px;
    font-size:.78rem; color:var(--c-text-muted);
}

.demo-login-box {
    background:var(--c-bg);
    border:1.5px solid var(--c-border);
    padding:var(--sp-md); border-radius:var(--r-md);
    margin-top:var(--sp-md); box-shadow:var(--shadow-xs);
}
.demo-login-box h3 {
    font-size:.92rem; color:var(--c-brand);
    margin-bottom:var(--sp-xs); font-weight:700;
}
.demo-login-box p {
    font-size:.76rem; color:var(--c-text-muted);
    margin-bottom:var(--sp-sm);
}

/* ── Legal footer ─────────────────────────────────────────────────────── */
.global-legal-footer {
    width:100%; border-top:1px solid var(--c-border);
    background:rgba(255,255,255,.82); padding:10px 16px;
    text-align:center; font-size:.8rem; color:var(--c-text-muted);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.global-legal-footer a { color:var(--c-brand); font-weight:600; }
.global-legal-footer span { margin:0 8px; color:var(--c-text-subtle); }

/* ── Density Modes ───────────────────────────────────────────────────── */
body.ui-density-airy .content-body {
    padding:calc(var(--sp-xl) * 1.05);
}

body.ui-density-airy .row,
body.ui-density-airy .dashboard-grid {
    gap:calc(var(--sp-lg) * 1.05);
}

body.ui-density-airy .card,
body.ui-density-airy .stat-card {
    padding:calc(var(--sp-lg) * 1.04);
}

body.ui-density-dense .content-body {
    padding:calc(var(--sp-xl) * .84);
}

body.ui-density-dense .row,
body.ui-density-dense .dashboard-grid {
    gap:calc(var(--sp-lg) * .82);
    margin-bottom:calc(var(--sp-lg) * .82);
}

body.ui-density-dense .card,
body.ui-density-dense .stat-card {
    padding:calc(var(--sp-lg) * .8);
    margin-bottom:calc(var(--sp-lg) * .8);
}

body.ui-density-dense .card-title {
    font-size:1.05rem;
}

body.ui-density-dense .table th,
body.ui-density-dense .table td {
    padding:.66rem calc(var(--sp-lg) * .74);
    font-size:.84rem;
}

body.ui-density-dense .btn {
    padding:.52rem 1.12rem;
}

body.ui-density-dense .btn-sm {
    padding:.34rem .74rem;
}

body.ui-density-dense .form-group,
body.ui-density-dense .alert {
    margin-bottom:calc(var(--sp-md) * .78);
}

body.ui-density-dense .form-group input[type="text"],
body.ui-density-dense .form-group input[type="email"],
body.ui-density-dense .form-group input[type="password"],
body.ui-density-dense .form-group select,
body.ui-density-dense .form-group textarea,
body.ui-density-dense .form-control {
    padding:.56rem .86rem;
    font-size:.88rem;
}

.auth-legal-links {
    display:inline-flex; align-items:center; gap:8px; margin-top:6px;
}
.auth-legal-links a {
    color:rgba(255,255,255,.9); font-weight:600; text-decoration:underline;
}

/* ── Public legal pages ───────────────────────────────────────────────── */
.public-legal-wrapper {
    min-height:100vh; display:flex; flex-direction:column;
    align-items:center; justify-content:center; padding:24px;
    background:linear-gradient(135deg, #f8fafc 0%, var(--c-brand-light) 100%);
}
.public-legal-card {
    width:min(980px,100%); background:#fff;
    border:1px solid var(--c-border); border-radius:var(--r-lg);
    box-shadow:var(--shadow-md); padding:24px;
}
.public-legal-head {
    border-bottom:1px solid var(--c-border);
    padding-bottom:10px; margin-bottom:18px;
}
.public-legal-head h1 { margin-bottom:4px; font-size:1.35rem; }
.public-legal-head p  { margin:0; color:var(--c-text-muted); }
.legal-content h2 { margin-bottom:4px; }
.legal-content h3 { margin-top:16px; margin-bottom:6px; font-size:1rem; }
.legal-content p,
.legal-content li { font-size:.94rem; }
.legal-content ul { padding-left:20px; }
.legal-note { color:var(--c-text-muted); font-size:.82rem !important; }
.legal-disclaimer {
    margin-top:16px; padding:10px 12px;
    border-radius:var(--r-sm);
    background:var(--c-warning-bg);
    border:1px solid rgba(217,119,6,.24); color:#92400e;
}
.public-legal-nav { margin-top:14px; font-size:.84rem; color:var(--c-text-muted); }
.public-legal-nav a { font-weight:700; }

/* ── Cookie banner ────────────────────────────────────────────────────── */
.cookie-banner {
    position:fixed; left:16px; right:16px; bottom:16px; z-index:2000;
    background:rgba(13,17,23,.96); color:#f8fafc;
    border:1px solid rgba(148,163,184,.2);
    border-radius:var(--r-lg);
    box-shadow:0 20px 48px rgba(0,0,0,.4);
    padding:16px; display:grid;
    grid-template-columns:1fr auto; gap:14px;
    opacity:0; transform:translateY(12px); pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
}
.cookie-banner.is-visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.cookie-banner__content h3 { color:#fff; margin:0 0 4px; font-size:.95rem; }
.cookie-banner__content p  { margin:0; font-size:.82rem; color:rgba(248,250,252,.85); line-height:1.45; }
.cookie-banner__links {
    margin-top:6px; display:inline-flex; align-items:center; gap:8px; font-size:.77rem;
}
.cookie-banner__links a { color:#fcd34d; text-decoration:underline; }
.cookie-banner__actions { display:flex; align-items:flex-end; gap:8px; }
.cookie-banner__actions .btn { min-height:38px; width:auto; }
.cookie-banner__actions .btn[data-cookie-action="decline"] {
    background:transparent; border-color:rgba(148,163,184,.35);
    color:rgba(241,245,249,.86); box-shadow:none;
}
.cookie-banner__actions .btn[data-cookie-action="decline"]:hover {
    background:rgba(148,163,184,.16); border-color:rgba(148,163,184,.5); color:#fff;
}
.cookie-banner__actions .btn[data-cookie-action="necessary"] {
    background:rgba(248,250,252,.12); border-color:rgba(248,250,252,.28); color:#fff; box-shadow:none;
}
.cookie-banner__actions .btn[data-cookie-action="necessary"]:hover {
    background:rgba(248,250,252,.2); border-color:rgba(248,250,252,.45);
}

/* ── Responsive ───────────────────────────────────────────────────────── */

/* Desktop: Sidebar immer sichtbar, Content daneben */
@media (min-width:993px) {
    .sidebar {
        transform:translateX(0) !important;
        position:relative;
        flex-shrink:0;
    }
    .sidebar-backdrop { display:none !important; }
    .menu-trigger { display:none !important; }
    .main-content { width:calc(100% - var(--sidebar-width)); }
}

@media (max-width:1024px) {
    .navbar { padding:0 var(--sp-lg); }
    .content-body { padding:var(--sp-lg); }
    .card { padding:var(--sp-md); margin-bottom:var(--sp-md); }
}

@media (max-width:1200px) {
    .navbar {
        margin:10px 12px 10px;
        border-radius:16px;
    }

    .layout-navbar-left {
        min-width:0;
    }

    .layout-navbar-title {
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:100%;
    }
}

@media (max-width:992px) {
    .row, .dashboard-grid {
        grid-template-columns:1fr; gap:var(--sp-md);
    }
    .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
    .col-7,.col-8,.col-9,.col-10,.col-11,.col-12 { grid-column:span 12 !important; }
    .content-body { padding:var(--sp-md); }
    /* Mobile: Sidebar als Overlay */
    .sidebar { position:fixed; }

    .navbar {
        margin:8px;
        border-radius:14px;
    }

    .navbar-user {
        gap:var(--sp-sm);
    }
}

@media (max-width:768px) {
    .sidebar { width:min(86vw,300px); }
    .navbar { height:auto; min-height:62px; flex-wrap:wrap; padding:8px var(--sp-md); gap:8px; border-top-width:2px; margin:6px; }
    .navbar h2 { font-size:.95rem; }
    .layout-navbar-left { width:100%; }
    .navbar-user { width:100%; justify-content:space-between; }
    .layout-navbar-user-info { display:none; }
    .layout-density-switch { display:none; }
    .layout-logout-btn { padding:.38rem .7rem; font-size:.78rem; gap:4px; }
    .user-avatar { width:36px; height:36px; font-size:.8rem; }
    .page-header { flex-direction:column; align-items:flex-start; gap:8px; }
    .page-header h1 { font-size:1.45rem; }
    .table th, .table td { padding:.7rem .85rem; font-size:.82rem; }
    .cookie-banner { grid-template-columns:1fr; }
    .cookie-banner__actions {
        width:100%; display:grid; grid-template-columns:1fr; gap:8px;
    }
    .cookie-banner__actions .btn { width:100%; min-height:44px; }
    .cookie-banner__actions .btn[data-cookie-action="decline"] { order:1; }
    .cookie-banner__actions .btn[data-cookie-action="necessary"] { order:2; }
    .cookie-banner__actions .btn[data-cookie-action="all"] { order:3; }
}

@media (max-width:576px) {
    .content-body { padding:12px; }
    .table { min-width:520px; }
    .card { border-radius:var(--r-md); padding:.9rem; }
    .card-title { font-size:1rem; }
    .btn, .btn-sm { width:100%; justify-content:center; min-height:44px; }
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="password"],
    .form-group select,
    .form-group textarea,
    .form-control {
        font-size:16px;
    }
    .public-legal-wrapper { padding:14px; }
    .public-legal-card { padding:16px; }
    .public-legal-nav {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:6px 10px;
        text-align:center;
    }
    .public-legal-nav span { display:none; }
    .sidebar-brand img { height:60px; }
    .sidebar-school-brand img { max-height:74px; }
    .sidebar-brand span { font-size:1.15rem; }
    .sidebar-item a { padding:.65rem .85rem; font-size:.87rem; }
}

@media (max-width:420px) {
    .navbar { min-height:56px; }
    .navbar h2 { font-size:.88rem; }
    .layout-logout-btn { min-height:40px; padding:.34rem .6rem; font-size:.76rem; }
    .menu-trigger { width:22px; height:16px; }
    .sidebar-item a { min-height:44px; }
}

@media (max-width:360px) {
    .navbar {
        padding:7px 10px;
        gap:6px;
        margin:4px;
    }

    .navbar h2 {
        font-size:.82rem;
    }

    .content-body {
        padding:10px;
    }

    .card {
        padding:.75rem;
        border-radius:12px;
    }

    .btn,
    .btn-sm {
        min-height:42px;
        font-size:.8rem;
        padding:.5rem .65rem;
    }

    .table {
        min-width:460px;
    }

    .public-legal-card {
        padding:14px;
    }
}

@media (max-width:320px) {
    .content-body {
        padding:8px;
    }

    .sidebar {
        width:92vw;
    }

    .sidebar-item a {
        font-size:.84rem;
        padding:.6rem .72rem;
    }

    .navbar {
        border-radius:12px;
    }

    .navbar h2 {
        font-size:.78rem;
    }

    .layout-logout-btn {
        padding:.32rem .52rem;
        font-size:.72rem;
    }

    .user-avatar {
        width:32px;
        height:32px;
        font-size:.72rem;
    }

    .table {
        min-width:420px;
    }

    .public-legal-wrapper {
        padding:10px;
    }

    .public-legal-card {
        padding:12px;
    }

    .public-legal-head h1 {
        font-size:1.1rem;
    }
}

/* ── Print ────────────────────────────────────────────────────────────── */
@media print {
    .no-print, .sidebar, .navbar, .menu-trigger,
    .btn, .demo-login-box, .auth-divider, footer, aside, header {
        display:none !important;
    }
    .app-wrapper { display:block !important; }
    .main-content { margin:0 !important; padding:0 !important; width:100% !important; }
    .content-body { padding:0 !important; margin:0 !important; }
    body { background:#fff !important; color:#000 !important; font-size:11pt !important; }
    .card { border:none !important; box-shadow:none !important; padding:0 !important; }
    .table th { background:#f1f5f9 !important; color:#000 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    a { color:#000 !important; text-decoration:underline !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}