:root {
    --bg: #f4f1e9;
    --surface: #ffffff;
    --surface-soft: #fbfaf6;
    --surface-green: #eaf3ee;
    --text: #10251d;
    --muted: #66746c;
    --line: #e2ddd2;
    --primary: #06382f;
    --primary-2: #0f5949;
    --primary-3: #1e725f;
    --accent: #b78945;
    --accent-soft: #fff4dc;
    --danger: #af302b;
    --danger-soft: #fde9e6;
    --success-soft: #e6f6eb;
    --warning-soft: #fff3d5;
    --blue-soft: #e7f3fb;
    --purple-soft: #f0e8ff;
    --shadow: 0 18px 45px rgba(8, 35, 28, .10);
    --shadow-soft: 0 10px 25px rgba(8, 35, 28, .07);
    --radius: 20px;
    --sidebar-width: 280px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 12% -12%, rgba(183, 137, 69, .18), transparent 34rem),
        radial-gradient(circle at 85% 0%, rgba(15, 89, 73, .10), transparent 32rem),
        linear-gradient(180deg, #faf8f2 0%, var(--bg) 100%);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.45;
}

a { color: var(--primary-2); text-decoration: none; }
a:hover { text-decoration: none; color: var(--primary); }
img { max-width: 100%; display: block; }
.icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    padding: 1.35rem 1rem;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(3, 46, 38, .97), rgba(4, 57, 47, .98)),
        radial-gradient(circle at 20% 10%, rgba(183, 137, 69, .20), transparent 18rem);
    box-shadow: 15px 0 45px rgba(3, 26, 21, .18);
    overflow-y: auto;
}
.side-brand, .auth-topbar .side-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: inherit;
    min-height: 3.2rem;
}
.side-brand:hover { color: inherit; }
.side-logo { width: 42px; height: 42px; }
.brand-text { display: grid; line-height: 1.05; }
.brand-text strong { font-size: 1.04rem; letter-spacing: -.02em; }
.brand-text small { color: rgba(255,255,255,.78); font-weight: 650; }

.side-nav { display: grid; gap: .35rem; margin-top: .4rem; }
.nav-item, .logout-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: .78rem;
    width: 100%;
    min-height: 3.05rem;
    padding: .78rem .85rem;
    border: 0;
    border-radius: 14px;
    color: rgba(255,255,255,.90);
    background: transparent;
    font: inherit;
    font-weight: 760;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.nav-item:hover, .logout-button:hover { color: #fff; background: rgba(255,255,255,.10); transform: translateX(2px); }
.nav-item.active { color: #fff; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.nav-badge {
    margin-left: auto;
    min-width: 1.4rem;
    height: 1.4rem;
    display: inline-grid;
    place-items: center;
    padding: 0 .35rem;
    border-radius: 999px;
    color: #fff;
    background: #d8403a;
    font-size: .76rem;
    font-weight: 900;
}
.side-logout { margin: .35rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.13); }
.sidebar-card {
    position: relative;
    margin-top: auto;
    min-height: 205px;
    overflow: hidden;
    padding: 1rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.sidebar-card strong, .sidebar-card span { position: relative; z-index: 2; display: block; }
.sidebar-card strong { max-width: 12rem; margin-bottom: .55rem; }
.sidebar-card span { color: rgba(255,255,255,.78); }
.sidebar-card img { position: absolute; inset: auto 0 0; width: 100%; opacity: .88; }
.mini-shield { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .7rem; border-radius: .7rem; color: #f7d38d; background: rgba(183,137,69,.15); }

.main-shell { min-width: 0; }
.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 78px;
    padding: .9rem clamp(1rem, 2.4vw, 2rem);
    background: rgba(250,248,242,.86);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(226, 221, 210, .75);
}
.mobile-menu { display: none; }
.topbar-title { display: grid; gap: .15rem; }
.topbar-title strong { font-size: 1rem; }
.topbar-title span { color: var(--muted); font-size: .86rem; }
.topbar-actions { display: flex; align-items: center; gap: .65rem; }
.icon-button {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--primary);
    background: rgba(255,255,255,.85);
    box-shadow: 0 8px 20px rgba(8, 35, 28, .05);
}
.ghost-icon { opacity: .72; }
.notify-badge { position: absolute; top: -.25rem; right: -.2rem; display: grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 .32rem; border-radius: 999px; background: #d8403a; color: #fff; font-size: .7rem; font-weight: 900; border: 2px solid #fff; }
.user-chip { display: flex; align-items: center; gap: .65rem; padding: .35rem .65rem .35rem .35rem; border-radius: 999px; background: rgba(255,255,255,.85); border: 1px solid var(--line); }
.user-chip span:last-child { display: grid; line-height: 1.1; }
.user-chip small { color: var(--muted); font-weight: 700; }
.avatar { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-3)); font-weight: 900; }
.small-avatar { width: 2.1rem; height: 2.1rem; font-size: .82rem; }

.container { width: min(1530px, calc(100% - 2rem)); margin: 0 auto; padding: 1.7rem 0 4rem; }
.auth-container { width: min(680px, calc(100% - 2rem)); padding-top: min(9vh, 5rem); }
.auth-body { min-height: 100vh; background: radial-gradient(circle at 20% 0%, rgba(183,137,69,.18), transparent 32rem), linear-gradient(135deg, #f9f6ed, #e9eee9); }
.auth-topbar { padding: 1.25rem clamp(1rem, 3vw, 2rem); color: var(--primary); }
.auth-topbar .brand-text small { color: var(--muted); }
.auth-card { width: min(680px, 100%); margin: 0 auto; }

h1, h2, h3 { margin: 0 0 .55rem; line-height: 1.12; letter-spacing: -.035em; }
h1 { font-size: clamp(2.1rem, 4.2vw, 3.25rem); }
h2 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
p { margin: 0 0 1rem; }
.muted { color: var(--muted); }
.small-text { font-size: .9rem; }
.eyebrow { margin-bottom: .4rem; color: var(--accent); font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

.panel, .auth-card, .stat-card, .hero-card {
    border: 1px solid rgba(226, 221, 210, .86);
    border-radius: var(--radius);
    background: rgba(255,255,255,.88);
    box-shadow: var(--shadow-soft);
}
.panel, .auth-card { padding: clamp(1rem, 2vw, 1.35rem); }
.panel.narrow { width: min(760px, 100%); margin-inline: auto; }
.alert { margin-bottom: 1rem; padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--line); background: #fff; font-weight: 780; }
.alert.success { background: var(--success-soft); border-color: rgba(25,130,70,.22); }
.alert.error { background: var(--danger-soft); border-color: rgba(175,48,43,.22); }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.55rem;
    padding: .68rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    background: #fff;
    font: inherit;
    font-weight: 820;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease, background .13s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(8,35,28,.10); border-color: rgba(15,89,73,.28); }
.button.primary { color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2)); border-color: transparent; box-shadow: 0 13px 25px rgba(6,56,47,.18); }
.button.ghost { background: transparent; }
.button.danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.button.small { min-height: 2rem; padding: .45rem .72rem; font-size: .86rem; }
.button.active { background: var(--surface-green); color: var(--primary); border-color: rgba(15,89,73,.22); }
.text-action { display: inline-flex; align-items: center; gap: .35rem; color: var(--primary-2); font-weight: 850; }

.dashboard-hero-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(330px, .95fr); gap: 1.3rem; margin-bottom: 1.2rem; }
.hero-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); min-height: 220px; overflow: hidden; padding: clamp(1.3rem, 3vw, 2rem); background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.74)); }
.hero-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 35%, rgba(15,89,73,.10), transparent 25rem); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; align-self: center; }
.hero-copy h1 { margin-bottom: .55rem; }
.hero-copy p:not(.eyebrow) { max-width: 45rem; color: #4b5b53; font-size: 1.05rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.hero-graphic { position: relative; z-index: 1; align-self: end; width: 100%; min-height: 160px; object-fit: contain; object-position: right bottom; }
.approval-card { display: flex; flex-direction: column; gap: .8rem; }
.approval-list { display: grid; gap: .6rem; }
.approval-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .65rem; border-radius: 14px; background: var(--surface-soft); }
.approval-row span:nth-child(2) { display: grid; min-width: 0; }
.approval-row small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.big-number { display: inline-grid; place-items: center; min-width: 2.4rem; height: 2.4rem; border-radius: 999px; background: var(--surface-green); color: var(--primary); font-weight: 950; font-size: 1.4rem; }
.permission-summary { display: grid; gap: .45rem; }
.permission-summary span { padding: .55rem .7rem; border-radius: 12px; background: var(--surface-soft); font-weight: 780; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat-card { display: flex; align-items: center; gap: 1rem; min-height: 112px; padding: 1rem 1.15rem; }
.stat-card.attention { background: linear-gradient(135deg, #fff, var(--warning-soft)); border-color: rgba(183,137,69,.28); }
.stat-icon { display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 999px; }
.stat-icon.green { color: #13744f; background: #dff3e8; }
.stat-icon.blue { color: #1d6b88; background: #dff3fa; }
.stat-icon.gold { color: #9c6720; background: #fff0d3; }
.stat-icon.purple { color: #7149a7; background: #eee2ff; }
.stat-card div { display: grid; gap: .15rem; min-width: 0; }
.stat-label { color: var(--muted); font-size: .86rem; font-weight: 850; }
.stat-value { display: block; font-size: 2.1rem; line-height: 1; font-weight: 950; letter-spacing: -.04em; }
.stat-value.small-stat { font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.stat-card small { color: var(--muted); font-weight: 700; }

.dashboard-workspace { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(365px, .9fr); gap: 1.2rem; align-items: start; }
.page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.premium-title h1 { margin-bottom: .35rem; }
.actions-row, .form-actions, .helper-actions, .item-actions, .user-actions { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.split-actions { justify-content: space-between; }

.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.compact-heading { align-items: flex-start; }
.panel-heading h2 { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .1rem; }
.round-icon, .panel-icon { display: inline-grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
.panel-icon { width: 3.4rem; height: 3.4rem; margin-bottom: .8rem; }
.locked-panel { min-height: 220px; display: grid; align-content: center; justify-items: start; }

.calendar-panel { overflow: hidden; }
.calendar-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.calendar-controls { display: flex; align-items: center; justify-content: center; gap: .45rem; }
.month-title { padding: .45rem .65rem; font-size: 1.15rem; }
.view-switch { display: inline-flex; align-self: start; padding: .25rem; gap: .25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.view-switch a, .view-switch span, .view-switch button { padding: .45rem .7rem; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font: inherit; font-weight: 800; font-size: .86rem; text-decoration: none; cursor: pointer; }
.view-switch a:hover, .view-switch button:hover { color: var(--primary); background: rgba(15,89,73,.08); }
.view-switch .active { color: #fff; background: var(--primary); }
.calendar-board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--line); gap: 1px; }
.weekday { min-height: 2.2rem; display: grid; place-items: center; color: var(--muted); background: #fbfaf7; font-size: .84rem; font-weight: 950; }
.calendar-day { min-height: 128px; padding: .55rem; background: rgba(255,255,255,.96); }
.compact-calendar .calendar-day { min-height: 122px; }
.calendar-day.muted-day { background: #f7f5ef; color: rgba(16,37,29,.45); }
.calendar-day.today { box-shadow: inset 0 0 0 2px var(--primary-2); }
.day-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .45rem; font-weight: 900; }
.day-add { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 999px; color: var(--primary); background: var(--surface-green); font-weight: 950; }
.day-add:hover { color: #fff; background: var(--primary); }
.day-items { display: grid; gap: .34rem; }
.calendar-item { display: grid; gap: .06rem; padding: .46rem .5rem; border-radius: 10px; color: var(--text); font-size: .78rem; line-height: 1.22; overflow: hidden; }
.calendar-item strong, .calendar-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-item span { color: rgba(16,37,29,.72); font-weight: 750; }
.event-color-1 { background: #dff2e4; }
.event-color-2 { background: #e9ddfb; }
.event-color-3 { background: #dfeeff; }
.event-color-4 { background: #ffe7d2; }
.event-color-5 { background: #fff0bc; }
.event-color-6 { background: #dff5f8; }
.calendar-item.reminder { background: var(--warning-soft); }
.more-items { color: var(--muted); font-size: .78rem; font-weight: 800; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; justify-content: flex-start; padding-top: 1rem; color: var(--muted); font-size: .86rem; font-weight: 800; }
.calendar-legend a { margin-left: auto; }
.dot { display: inline-block; width: .72rem; height: .72rem; margin-right: .28rem; border-radius: 999px; vertical-align: -.05rem; }
.color-1 { background: #41a868; }.color-2 { background: #a276db; }.color-3 { background: #6aa0df; }.color-4 { background: #ee923e; }.color-5 { background: #e8c735; }.color-6 { background: #2ca0bd; }

.week-board {
    display: grid;
    grid-template-columns: repeat(7, minmax(155px, 1fr));
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}
.week-day-card {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 18px rgba(8,35,28,.04);
}
.week-day-card.today {
    border-color: rgba(15,89,73,.42);
    box-shadow: inset 0 0 0 2px rgba(15,89,73,.16), 0 8px 18px rgba(8,35,28,.05);
}
.week-day-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: .6rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--line);
}
.week-day-header span {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.week-day-header strong { font-size: 1.25rem; }
.week-title { min-width: max-content; }
.mini-empty { padding: .65rem; font-size: .82rem; }
.calendar-list { display: grid; gap: .9rem; }
.agenda-day {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 1rem;
    padding: .95rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.78);
}
.agenda-date {
    display: grid;
    align-content: start;
    gap: .15rem;
    padding: .8rem;
    border-radius: 14px;
    background: var(--surface-green);
    color: var(--primary);
}
.agenda-date strong { font-size: 2.05rem; line-height: 1; letter-spacing: -.06em; }
.agenda-date span { color: var(--muted); font-size: .84rem; font-weight: 850; }
.agenda-items { display: grid; gap: .55rem; }
.agenda-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .85rem .95rem;
    border-radius: 14px;
    color: var(--text);
    border: 1px solid rgba(255,255,255,.42);
}
.agenda-item:hover { color: var(--text); box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.agenda-item strong { display: block; margin-bottom: .12rem; }
.agenda-item p { margin: 0; }
.agenda-item.reminder { background: var(--warning-soft); border-color: rgba(183,137,69,.24); }


.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.compact-form { gap: .82rem; }
label, .field-block { display: grid; gap: .35rem; color: var(--muted); font-size: .9rem; font-weight: 850; }
label.full, .form-grid .full { grid-column: 1 / -1; }
input, textarea, select {
    width: 100%; min-height: 2.8rem; padding: .74rem .82rem;
    border: 1px solid var(--line); border-radius: 12px;
    color: var(--text); background: #fff; font: inherit;
    transition: border-color .12s ease, outline-color .12s ease, box-shadow .12s ease;
}
textarea { min-height: 7rem; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 3px solid rgba(15,89,73,.16); border-color: rgba(15,89,73,.48); }
input:disabled, textarea:disabled, select:disabled { color: #6c756f; background: #f2f0ea; cursor: not-allowed; }
.field-extra { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.form-grid > p.full { margin: -.35rem 0 0; }
.quick-form-panel { position: sticky; top: 96px; }
.form-panel-premium { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)); }
.auto-reminder-panel { position: relative; overflow: hidden; }
.auto-reminder-panel::after { content: ""; position: absolute; right: -4rem; bottom: -4rem; width: 11rem; height: 11rem; border-radius: 999px; background: rgba(15,89,73,.07); }

.two-column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .75fr); gap: 1.2rem; align-items: start; }
.two-column.wide-left { grid-template-columns: minmax(0, 1.38fr) minmax(320px, .72fr); }
.searchbar { display: flex; gap: .55rem; margin-bottom: 1rem; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .9rem .75rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
.table-actions { text-align: right; }

.item-list { display: grid; gap: .75rem; }
.item-list.compact { gap: .55rem; }
.list-item { display: flex; gap: .8rem; justify-content: space-between; align-items: center; padding: .85rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.link-item { color: var(--text); }
.link-item:hover { border-color: rgba(15,89,73,.25); box-shadow: var(--shadow-soft); }
.item-main { min-width: 0; }
.item-actions form, .user-actions form { margin: 0; }
.chevron { color: var(--muted); font-size: 1.4rem; }
.empty { padding: .95rem; color: var(--muted); background: var(--surface-soft); border: 1px dashed var(--line); border-radius: 14px; }
.small-empty { margin-bottom: .2rem; }
.is-overdue { border-color: rgba(183,137,69,.45) !important; background: var(--warning-soft) !important; }
.contact-line { margin-top: .25rem; margin-bottom: 0; font-weight: 750; }

.status-pill { display: inline-flex; align-items: center; min-height: 1.8rem; padding: .28rem .62rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-soft); font-weight: 850; font-size: .86rem; white-space: nowrap; }
.status-approved { background: var(--success-soft); }
.status-pending { background: var(--warning-soft); border-color: rgba(183,137,69,.35); }
.status-disabled { background: var(--danger-soft); border-color: rgba(175,48,43,.25); }
.status-admin { color: #fff; background: var(--primary); border-color: var(--primary); }
.user-card-list { display: grid; gap: 1rem; }
.user-permission-card { display: grid; gap: 1rem; }
.user-card-header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.user-title { display: flex; gap: .8rem; align-items: center; min-width: 0; }
.user-title h2 { margin-bottom: .15rem; }
.permissions-form { display: grid; gap: .9rem; }
.permission-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.permission-group { margin: 0; padding: .9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.permission-group legend { padding: 0 .35rem; color: var(--primary); font-weight: 950; }
.checkbox-line { display: flex; align-items: flex-start; gap: .5rem; margin: .45rem 0; color: var(--text); font-weight: 750; }
.checkbox-line input { width: 1.05rem; height: 1.05rem; min-height: auto; margin-top: .15rem; accent-color: var(--primary); }
.user-actions { padding-top: .9rem; border-top: 1px solid var(--line); }

@media (max-width: 1180px) {
    .dashboard-hero-grid, .dashboard-workspace, .two-column, .two-column.wide-left { grid-template-columns: 1fr; }
    .quick-form-panel { position: static; }
    .hero-card { grid-template-columns: 1fr; }
    .hero-graphic { max-height: 220px; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .permission-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(86vw, 320px); transform: translateX(-105%); transition: transform .18s ease; }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open::after { content: ""; position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.32); }
    .mobile-menu { display: inline-grid; place-items: center; width: 2.7rem; height: 2.7rem; border: 1px solid var(--line); border-radius: 12px; color: var(--primary); background: #fff; font-size: 1.2rem; }
    .topbar { min-height: 68px; }
    .container { width: min(100% - 1rem, 1530px); padding-top: 1rem; }
    .topbar-title span { display: none; }
    .user-chip span:last-child { display: none; }
    .calendar-heading { grid-template-columns: 1fr; }
    .view-switch { justify-self: start; }
}

@media (max-width: 680px) {
    h1 { font-size: 2rem; }
    .stats-grid, .form-grid { grid-template-columns: 1fr; }
    .dashboard-hero-grid, .dashboard-workspace { gap: .85rem; }
    .hero-card { padding: 1rem; }
    .hero-graphic { display: none; }
    .page-title-row, .user-card-header { align-items: stretch; flex-direction: column; }
    .actions-row, .form-actions, .item-actions, .user-actions, .searchbar { align-items: stretch; flex-direction: column; }
    .button, .searchbar input { width: 100%; }
    .topbar-actions { gap: .35rem; }
    .icon-button { width: 2.45rem; height: 2.45rem; }
    .calendar-board { display: grid; grid-template-columns: 1fr; border: 0; background: transparent; gap: .55rem; }
    .weekday { display: none; }
    .calendar-day { min-height: auto; border: 1px solid var(--line); border-radius: 14px; }
    .calendar-day.muted-day { display: none; }
    .week-board { grid-template-columns: 1fr; overflow-x: visible; }
    .week-day-card { min-height: auto; }
    .agenda-day { grid-template-columns: 1fr; }
    .agenda-date { grid-template-columns: auto 1fr; align-items: center; }
    .agenda-date strong { font-size: 1.55rem; }
    .calendar-controls { flex-wrap: wrap; justify-content: flex-start; }
    .view-switch { width: 100%; }
    .view-switch a, .view-switch span, .view-switch button { flex: 1 1 0; text-align: center; }
    .calendar-legend a { margin-left: 0; }
    .stat-card { min-height: auto; }
    th:nth-child(3), td:nth-child(3), th:nth-child(4), td:nth-child(4) { display: none; }
}


/* Version 2.3: Provisions-Export und robuste Kalenderumschaltung */
.view-switch { margin: 0; }
.view-switch button.active { color: #fff; background: var(--primary); }
.commission-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.commission-card { display: grid; gap: .25rem; padding: 1rem; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.9); box-shadow: var(--shadow-soft); }
.commission-card span { color: var(--muted); font-size: .85rem; font-weight: 850; }
.commission-card strong { font-size: 1.65rem; line-height: 1.1; letter-spacing: -.03em; }
.commission-filter { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(150px, .8fr) minmax(150px, .8fr) auto; gap: .75rem; align-items: end; margin-bottom: 1rem; }
.commission-table .amount { text-align: right; font-weight: 950; white-space: nowrap; }
.commission-table .user-name { display: grid; gap: .1rem; }
.commission-table .user-name small { color: var(--muted); font-weight: 700; }
.readonly-note { display: inline-flex; align-items: center; gap: .45rem; padding: .65rem .85rem; border-radius: 999px; background: var(--surface-green); color: var(--primary); font-weight: 850; }
.admin-create-panel { margin-bottom: 1rem; }
.admin-create-panel details { border-radius: 18px; border: 1px dashed rgba(15,89,73,.35); background: rgba(255,255,255,.62); padding: .8rem 1rem; }
.admin-create-panel summary { cursor: pointer; font-weight: 950; color: var(--primary); }
.admin-create-panel form { margin-top: 1rem; }
@media (max-width: 900px) {
    .commission-summary { grid-template-columns: 1fr; }
    .commission-filter { grid-template-columns: 1fr; }
}

/* Version 2.3: Exportbereich Provisionsabrechnung */
.export-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: linear-gradient(135deg, rgba(7,59,50,.05), rgba(201,156,77,.08)); }
.export-panel h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.export-panel .actions-row { justify-content: flex-end; }
@media (max-width: 760px) { .export-panel { align-items: stretch; flex-direction: column; } .export-panel .actions-row { justify-content: stretch; } }

/* Version 2.6: Live-Uhr und Datumsanzeige auffällig rot */
.live-inline-clock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .42rem;
    color: #d10000;
    font-size: 26px;
    font-weight: 950;
    line-height: 1.15;
}
.live-inline-clock span,
.live-inline-clock strong,
.live-inline-clock [data-live-clock-time],
.live-inline-clock [data-live-clock-date] {
    color: #d10000;
    font-size: 26px;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}
.live-separator { color: #d10000; opacity: .82; }
.live-clock-card {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    min-width: 285px;
    padding: .78rem .95rem;
    border: 1px solid rgba(209,0,0,.22);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,241,241,.9)),
        radial-gradient(circle at 20% 0%, rgba(209,0,0,.12), transparent 10rem);
    box-shadow: 0 10px 24px rgba(8,35,28,.06);
}
.live-clock-icon {
    display: inline-grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #d10000, #9f0000);
    box-shadow: 0 10px 18px rgba(209,0,0,.18);
}
.live-clock-copy { display: grid; gap: .12rem; min-width: 0; }
.live-clock-label {
    color: #9f0000;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.live-clock-card strong,
.live-clock-card small,
.live-clock-card [data-live-clock-time],
.live-clock-card [data-live-clock-date] {
    color: #d10000;
    font-size: 26px;
    line-height: 1.05;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.live-clock-card small { white-space: nowrap; }
.calendar-heading-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem 1rem;
    min-width: 0;
}
.calendar-live-clock { align-self: center; }
@media (max-width: 900px) {
    .topbar-title .live-inline-clock,
    .topbar-title .live-inline-clock span,
    .topbar-title .live-inline-clock strong { display: inline-flex; }
    .calendar-heading-main { align-items: stretch; }
    .calendar-live-clock { width: 100%; }
}
@media (max-width: 680px) {
    .live-inline-clock,
    .live-inline-clock span,
    .live-inline-clock strong,
    .live-inline-clock [data-live-clock-time],
    .live-inline-clock [data-live-clock-date],
    .live-clock-card strong,
    .live-clock-card small,
    .live-clock-card [data-live-clock-time],
    .live-clock-card [data-live-clock-date] { font-size: 26px; }
    .live-clock-card { width: 100%; min-width: 0; }
    .live-clock-card small { white-space: normal; }
}

.owner-note {
    padding: .85rem 1rem;
    border: 1px solid rgba(15, 89, 73, .18);
    border-radius: 14px;
    color: var(--primary);
    background: var(--surface-green);
    font-size: .92rem;
    font-weight: 650;
}
.owner-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    color: var(--primary);
    background: var(--surface-green);
    font-weight: 800;
    font-size: .82rem;
}