/* =========================================================
 FlexHero Vakkracht-Portaal — friendly mini-admin
 Brand: cream + green (matches main site) · larger touch targets
========================================================= */
:root {
 --green: #88D932;
 --green-bright: #9CFF36;
 --green-deep: #0C261B;
 --green-darker: #061410;
 --green-mid: #143426;
 --green-ink: #6FB827;
 --green-text: #3F7A0E;
 --green-soft: #E8F5D5;
 --green-tint: #F4FAEA;

 --cream: #FCF7F2;
 --cream-2: #F4ECE1;
 --rule: #E5DCCD;
 --rule-soft: #F0E8DA;
 --paper: #FFFFFF;

 --ink: #1D1D1B;
 --ink-2: #2A2A28;
 --muted: #5F5F5B;
 --muted-2: #9B9B95;

 --red: #D43F3F;
 --red-soft: #FCE8E8;
 --amber: #C77900;
 --amber-soft: #FFE8C2;
 --blue: #2A6FDB;
 --blue-soft: #E1ECFB;

 --f-display: 'Poppins', system-ui, sans-serif;
 --f-sans: 'Open Sans', system-ui, sans-serif;
 --f-mono: ui-monospace, 'SF Mono', Menlo, monospace;

 --r-sm: 8px;
 --r-md: 12px;
 --r-lg: 18px;
 --r-xl: 24px;

 --side-w: 240px;
 --top-h: 64px;
 --bottom-nav-h: 64px;

 --shadow-1: 0 1px 2px rgba(12,38,27,.06), 0 1px 1px rgba(12,38,27,.04);
 --shadow-2: 0 8px 24px rgba(12,38,27,.10), 0 2px 4px rgba(12,38,27,.05);
 --shadow-3: 0 24px 60px rgba(12,38,27,.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
 font-family: var(--f-sans);
 font-size: 16px;
 color: var(--ink);
 background: var(--cream);
 line-height: 1.55;
 -webkit-font-smoothing: antialiased;
 -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) {
 body { font-size: 15px; }
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea {
 font: inherit; color: inherit;
}
img { max-width: 100%; display: block; }
h1,h2,h3,h4,h5 {
 font-family: var(--f-display);
 margin: 0;
 letter-spacing: -0.02em;
 color: var(--green-deep);
 font-weight: 700;
}
::selection { background: var(--green); color: var(--green-deep); }

/* ============ A11Y: focus-visible ============ */
:focus-visible {
 outline: 3px solid var(--green-bright);
 outline-offset: 2px;
 border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
 position: absolute; top: -50px; left: 16px; z-index: 99999;
 background: var(--green-deep); color: var(--green);
 padding: 10px 18px; border-radius: 8px;
 font-family: var(--f-display); font-weight: 700; font-size: 14px;
 text-decoration: none;
 transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* ============ LAYOUT ============ */
.app {
 display: grid;
 grid-template-columns: var(--side-w) 1fr;
 min-height: 100vh;
}
@media (max-width: 900px) {
 .app { grid-template-columns: 1fr; }
}

/* ============ SIDEBAR (desktop) ============ */
.side {
 background: var(--green-deep);
 color: var(--cream);
 padding: 20px 16px;
 position: sticky;
 top: 0;
 height: 100vh;
 display: flex;
 flex-direction: column;
 gap: 4px;
 overflow-y: auto;
}
@media (max-width: 900px) {
 .side { display: none; }
}
.side-logo {
 display: flex; align-items: center; gap: 10px;
 padding: 8px 12px 24px;
 font-family: var(--f-display); font-weight: 800; font-size: 20px;
 letter-spacing: -0.02em;
}
.side-logo .dot { color: var(--green); }
.side-logo .sub {
 display: block;
 font-size: 11px;
 letter-spacing: 0.15em;
 text-transform: uppercase;
 color: var(--green);
 font-weight: 600;
 margin-top: 2px;
}
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
 display: flex; align-items: center; gap: 12px;
 padding: 12px 14px;
 border-radius: var(--r-md);
 color: rgba(252,247,242,0.78);
 font-size: 15px;
 font-weight: 500;
 transition: background .15s, color .15s;
}
.side-nav a:hover { background: rgba(255,255,255,0.05); color: var(--cream); }
.side-nav a.active {
 background: var(--green);
 color: var(--green-deep);
 font-weight: 700;
}
.side-nav .icon {
 width: 20px; height: 20px;
 display: inline-flex; align-items: center; justify-content: center;
 font-size: 18px;
}
.side-bot {
 margin-top: auto;
 padding-top: 24px;
 border-top: 1px solid rgba(255,255,255,0.08);
}
.side-user {
 display: flex; align-items: center; gap: 10px;
 padding: 10px 12px;
 border-radius: var(--r-md);
 background: rgba(255,255,255,0.04);
 margin-bottom: 8px;
}
.side-user .avatar {
 width: 36px; height: 36px;
 border-radius: 50%;
 background: var(--green);
 color: var(--green-deep);
 display: inline-flex; align-items: center; justify-content: center;
 font-family: var(--f-display); font-weight: 700; font-size: 14px;
}
.side-user .name { font-size: 13px; font-weight: 600; color: var(--cream); }
.side-user .role { font-size: 11px; color: rgba(252,247,242,0.55); }
.side-lang {
 display: flex; gap: 4px; padding: 8px 4px; flex-wrap: wrap;
}
.side-lang button {
 flex: 1; min-width: 32px;
 font-family: var(--f-mono);
 font-size: 11px;
 font-weight: 600;
 color: rgba(252,247,242,0.55);
 padding: 6px 4px;
 border-radius: 6px;
 text-transform: uppercase;
}
.side-lang button.active {
 background: rgba(136,217,50,0.18);
 color: var(--green);
}
.side-logout {
 display: block;
 text-align: left;
 width: 100%;
 padding: 10px 14px;
 color: rgba(252,247,242,0.65);
 font-size: 13px;
 border-radius: var(--r-md);
}
.side-logout:hover { color: var(--cream); background: rgba(255,255,255,0.04); }

/* ============ TOPBAR (mobile) ============ */
.topbar {
 display: none;
 height: var(--top-h);
 background: var(--green-deep);
 color: var(--cream);
 align-items: center;
 justify-content: space-between;
 padding: 0 16px;
 position: sticky;
 top: 0;
 z-index: 50;
}
@media (max-width: 900px) {
 .topbar { display: flex; }
}
.topbar .logo {
 font-family: var(--f-display);
 font-weight: 800;
 font-size: 18px;
}
.topbar .logo .dot { color: var(--green); }
.topbar .greet {
 font-size: 13px;
 color: rgba(252,247,242,0.7);
}
.topbar .lang-pick {
 background: rgba(255,255,255,0.08);
 color: var(--cream);
 padding: 6px 10px;
 border-radius: 8px;
 font-family: var(--f-mono);
 font-size: 12px;
 font-weight: 600;
 text-transform: uppercase;
 border: 0;
}

/* ============ MAIN ============ */
.main {
 padding: 28px 32px 80px;
 max-width: 1100px;
 width: 100%;
}
@media (max-width: 900px) {
 .main {
 padding: 18px 16px calc(var(--bottom-nav-h) + 32px);
 }
}

.page-head {
 display: flex; justify-content: space-between; align-items: flex-start;
 gap: 16px;
 margin-bottom: 24px;
 flex-wrap: wrap;
}
.page-head .eyebrow {
 font-family: var(--f-display);
 font-size: 11px;
 letter-spacing: 0.15em;
 text-transform: uppercase;
 color: var(--green-text);
 margin-bottom: 6px;
 display: block;
}
.page-head h1 {
 font-size: clamp(24px, 4vw, 34px);
 letter-spacing: -0.025em;
 line-height: 1.1;
}
.page-head .sub {
 color: var(--muted);
 font-size: 15px;
 margin-top: 6px;
 max-width: 56ch;
}

/* ============ CARDS ============ */
.card {
 background: var(--paper);
 border-radius: var(--r-lg);
 border: 1px solid var(--rule);
 padding: 24px;
 box-shadow: var(--shadow-1);
}
.card + .card { margin-top: 16px; }
.card h2 {
 font-size: 18px;
 margin-bottom: 4px;
}
.card .hint {
 color: var(--muted);
 font-size: 14px;
 margin-bottom: 16px;
}

/* Grid of cards */
.grid {
 display: grid;
 gap: 16px;
}
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
 .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 600px) and (max-width: 900px) {
 .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
}

/* ============ STAT CARDS ============ */
.stat {
 background: var(--paper);
 border: 1px solid var(--rule);
 border-radius: var(--r-lg);
 padding: 20px;
 position: relative;
 overflow: hidden;
}
.stat .label {
 font-family: var(--f-display);
 font-size: 11px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--muted);
 margin-bottom: 8px;
}
.stat .value {
 font-family: var(--f-display);
 font-size: 32px;
 font-weight: 700;
 color: var(--green-deep);
 letter-spacing: -0.025em;
 line-height: 1;
}
.stat .unit { font-size: 16px; color: var(--muted-2); font-weight: 500; margin-left: 4px; }
.stat .note {
 margin-top: 8px;
 font-size: 13px;
 color: var(--muted);
}
.stat.accent {
 background: linear-gradient(135deg, var(--green-deep), var(--green-mid));
 color: var(--cream);
 border-color: var(--green-deep);
}
.stat.accent .label { color: rgba(252,247,242,0.6); }
.stat.accent .value { color: var(--green); }
.stat.accent .note { color: rgba(252,247,242,0.7); }

/* ============ BUTTONS ============ */
.btn {
 display: inline-flex; align-items: center; justify-content: center; gap: 8px;
 padding: 14px 22px;
 border-radius: var(--r-md);
 font-family: var(--f-display);
 font-weight: 600;
 font-size: 15px;
 cursor: pointer;
 transition: transform .08s, background .15s, box-shadow .15s;
 min-height: 48px;
 line-height: 1.2;
 text-align: center;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
 background: var(--green-deep);
 color: var(--cream);
}
.btn-primary:hover { background: var(--green-mid); }
.btn-accent {
 background: var(--green);
 color: var(--green-deep);
}
.btn-accent:hover { background: var(--green-bright); }
.btn-ghost {
 background: transparent;
 color: var(--green-deep);
 border: 1.5px solid var(--rule);
}
.btn-ghost:hover { background: var(--cream-2); }
.btn-block { width: 100%; }
.btn-sm {
 padding: 8px 14px;
 font-size: 13px;
 min-height: 36px;
}

/* ============ FORMS ============ */
.field { margin-bottom: 16px; }
.field label {
 display: block;
 font-family: var(--f-display);
 font-weight: 600;
 font-size: 13px;
 color: var(--green-deep);
 margin-bottom: 6px;
}
.field .req { color: var(--red); }
.field input[type=text],
.field input[type=email],
.field input[type=password],
.field input[type=time],
.field input[type=number],
.field input[type=date],
.field textarea,
.field select,
.input {
 width: 100%;
 padding: 13px 14px;
 border-radius: var(--r-md);
 border: 1.5px solid var(--rule);
 background: var(--paper);
 font-size: 15px;
 transition: border .15s, box-shadow .15s;
 min-height: 48px;
}
.field input:focus,
.field textarea:focus,
.field select:focus,
.input:focus {
 outline: none;
 border-color: var(--green-ink);
 box-shadow: 0 0 0 3px rgba(136,217,50,0.20);
}
.field .help {
 font-size: 12px;
 color: var(--muted);
 margin-top: 4px;
}

/* ============ LOGIN ============ */
.login-wrap {
 min-height: 100vh;
 display: grid;
 grid-template-columns: 1fr 1.1fr;
 background: var(--cream);
}
@media (max-width: 900px) {
 .login-wrap { grid-template-columns: 1fr; }
 .login-aside { display: none; }
}
.login-aside {
 background: linear-gradient(160deg, var(--green-deep) 0%, var(--green-mid) 100%);
 color: var(--cream);
 padding: 48px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 position: relative;
 overflow: hidden;
}
.login-aside::before {
 content: "";
 position: absolute;
 inset: 0;
 background: radial-gradient(circle at 20% 100%, rgba(136,217,50,0.18), transparent 50%);
 pointer-events: none;
}
.login-aside-top, .login-aside-bot { position: relative; z-index: 1; }
.login-aside .logo {
 font-family: var(--f-display);
 font-weight: 800;
 font-size: 24px;
 letter-spacing: -0.02em;
}
.login-aside .logo .dot { color: var(--green); }
.login-aside h1 {
 font-size: clamp(32px, 4vw, 48px);
 color: var(--cream);
 line-height: 1.05;
 margin: 80px 0 24px;
 font-weight: 700;
 letter-spacing: -0.035em;
 max-width: 540px;
}
.login-aside h1 em { color: var(--green); font-style: italic; font-weight: 500; }
.login-aside p {
 color: rgba(252,247,242,0.75);
 max-width: 420px;
 font-size: 16px;
 line-height: 1.6;
 margin-bottom: 28px;
}
.login-aside .perks {
 display: flex; flex-direction: column; gap: 12px;
}
.login-aside .perk {
 display: flex; align-items: center; gap: 12px;
 color: rgba(252,247,242,0.85);
 font-size: 14px;
}
.login-aside .perk::before {
 content: ""; width: 6px; height: 6px; border-radius: 50%;
 background: var(--green); flex-shrink: 0;
}
.login-aside .footnote {
 font-size: 12px;
 color: rgba(252,247,242,0.45);
 font-family: var(--f-mono);
 display: flex;
 gap: 16px;
 flex-wrap: wrap;
}
.login-main {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 32px;
}
.login-card {
 width: 100%;
 max-width: 420px;
}
.login-card .crumb {
 font-family: var(--f-display);
 font-size: 11px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--green-text);
 margin-bottom: 16px;
 display: inline-flex;
 align-items: center;
 gap: 10px;
}
.login-card .crumb::before {
 content: ""; width: 24px; height: 2px; background: var(--green-ink);
}
.login-card h1 {
 font-size: clamp(28px, 4vw, 36px);
 letter-spacing: -0.03em;
 margin-bottom: 10px;
 line-height: 1.1;
}
.login-card .lead {
 color: var(--muted);
 font-size: 15px;
 margin-bottom: 28px;
}
.login-card form { margin-top: 16px; }
.login-card .test-cred {
 margin-top: 14px;
 padding: 12px 14px;
 background: var(--green-tint);
 border: 1px dashed var(--green-ink);
 border-radius: var(--r-md);
 font-size: 13px;
 color: var(--green-deep);
}
.login-card .test-cred code {
 background: rgba(12,38,27,0.06);
 padding: 1px 6px;
 border-radius: 4px;
 font-family: var(--f-mono);
 font-size: 12px;
}
.login-card .signup-link {
 display: block;
 text-align: center;
 margin-top: 22px;
 padding-top: 22px;
 border-top: 1px solid var(--rule);
 font-size: 14px;
 color: var(--muted);
}
.login-card .signup-link a {
 color: var(--green-text);
 font-weight: 600;
}

.login-mobile-logo {
 display: none;
 text-align: center;
 padding: 24px 16px 0;
 font-family: var(--f-display);
 font-weight: 800;
 font-size: 22px;
}
.login-mobile-logo .dot { color: var(--green-text); }
@media (max-width: 900px) {
 .login-mobile-logo { display: block; }
}

/* ============ TABLES ============ */
.tbl {
 width: 100%;
 border-collapse: collapse;
 font-size: 14px;
}
.tbl th, .tbl td {
 text-align: left;
 padding: 14px 12px;
 border-bottom: 1px solid var(--rule);
}
.tbl th {
 font-family: var(--f-display);
 font-size: 11px;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--muted);
 font-weight: 600;
 background: var(--cream);
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: var(--cream); }
.tbl td .pdf-link {
 color: var(--green-text);
 font-weight: 600;
 display: inline-flex; align-items: center; gap: 6px;
}

/* Mobile table → card */
@media (max-width: 700px) {
 .tbl thead { display: none; }
 .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
 .tbl tr {
 border: 1px solid var(--rule);
 border-radius: var(--r-md);
 margin-bottom: 12px;
 padding: 8px;
 background: var(--paper);
 }
 .tbl td {
 border: 0;
 padding: 6px 8px;
 display: flex;
 justify-content: space-between;
 gap: 12px;
 }
 .tbl td::before {
 content: attr(data-lbl);
 font-family: var(--f-display);
 font-size: 11px;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--muted);
 font-weight: 600;
 flex-shrink: 0;
 }
}

/* ============ URENROOSTER ============ */
.uren-week {
 display: grid;
 gap: 12px;
}
.uren-day {
 background: var(--paper);
 border: 1px solid var(--rule);
 border-radius: var(--r-md);
 padding: 14px 16px;
 display: grid;
 grid-template-columns: 110px 1fr 1fr 90px 90px;
 gap: 12px;
 align-items: center;
}
@media (max-width: 700px) {
 .uren-day {
 grid-template-columns: 1fr 1fr;
 grid-template-areas:
 "day day"
 "start end"
 "pauze total";
 gap: 8px 12px;
 }
 .uren-day .day-label { grid-area: day; font-size: 16px; }
 .uren-day .field-start { grid-area: start; }
 .uren-day .field-end { grid-area: end; }
 .uren-day .field-pauze { grid-area: pauze; }
 .uren-day .field-total { grid-area: total; }
}
.uren-day .day-label {
 font-family: var(--f-display);
 font-weight: 700;
 color: var(--green-deep);
 font-size: 14px;
}
.uren-day .day-label .date {
 display: block;
 font-family: var(--f-sans);
 font-size: 12px;
 color: var(--muted);
 font-weight: 400;
 margin-top: 2px;
}
.uren-day .mini-input {
 padding: 10px 12px;
 border-radius: 8px;
 border: 1px solid var(--rule);
 font-size: 14px;
 background: var(--cream);
 min-height: 44px;
 width: 100%;
}
.uren-day .mini-input:focus {
 background: var(--paper);
 border-color: var(--green-ink);
 outline: none;
 box-shadow: 0 0 0 3px rgba(136,217,50,0.15);
}
.uren-day .day-total {
 text-align: right;
 font-family: var(--f-display);
 font-weight: 700;
 font-size: 16px;
 color: var(--green-deep);
}
.uren-day.off .day-total { color: var(--muted-2); }
.uren-summary {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 18px 20px;
 background: var(--green-deep);
 color: var(--cream);
 border-radius: var(--r-md);
 margin-top: 8px;
 flex-wrap: wrap;
 gap: 12px;
}
.uren-summary .total-label {
 font-family: var(--f-display);
 font-size: 13px;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: rgba(252,247,242,0.7);
}
.uren-summary .total-value {
 font-family: var(--f-display);
 font-size: 28px;
 font-weight: 700;
 color: var(--green);
}

.week-switcher {
 display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
 background: var(--paper);
 padding: 8px;
 border-radius: var(--r-md);
 border: 1px solid var(--rule);
}
.week-switcher button {
 padding: 8px 12px;
 border-radius: 8px;
 color: var(--muted);
 font-size: 14px;
}
.week-switcher button:hover { background: var(--cream); color: var(--green-deep); }
.week-switcher .week-current {
 flex: 1;
 text-align: center;
 font-family: var(--f-display);
 font-weight: 700;
 color: var(--green-deep);
}

/* ============ AGENDA ============ */
.agenda-week {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 gap: 10px;
}
@media (max-width: 900px) {
 .agenda-week { grid-template-columns: 1fr; }
}
.agenda-day {
 background: var(--paper);
 border: 1px solid var(--rule);
 border-radius: var(--r-md);
 padding: 14px;
 min-height: 160px;
}
.agenda-day h3 {
 font-size: 13px;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: var(--muted);
 font-family: var(--f-display);
 margin-bottom: 12px;
 display: flex; justify-content: space-between; align-items: baseline;
}
.agenda-day h3 .dt {
 font-size: 18px;
 color: var(--green-deep);
 letter-spacing: -0.02em;
 text-transform: none;
}
.agenda-day.today {
 border-color: var(--green-ink);
 box-shadow: 0 0 0 2px rgba(136,217,50,0.20);
}
.agenda-day.today h3 { color: var(--green-text); }
.shift {
 background: var(--green-soft);
 border-left: 3px solid var(--green-ink);
 padding: 8px 10px;
 border-radius: 6px;
 margin-bottom: 6px;
 font-size: 13px;
}
.shift .shift-time {
 font-family: var(--f-display);
 font-weight: 700;
 color: var(--green-deep);
 font-size: 12px;
}
.shift .shift-name {
 margin-top: 2px;
 color: var(--ink);
}
.shift .shift-place {
 color: var(--muted);
 font-size: 11px;
 margin-top: 2px;
}
.shift.meeting {
 background: var(--blue-soft);
 border-left-color: var(--blue);
}
.shift.meeting .shift-time { color: var(--blue); }

/* ============ BADGES ============ */
.badge {
 display: inline-flex; align-items: center; gap: 6px;
 padding: 4px 10px;
 font-family: var(--f-display);
 font-size: 11px;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 border-radius: 999px;
 font-weight: 600;
}
.badge.green { background: var(--green-soft); color: var(--green-text); }
.badge.amber { background: var(--amber-soft); color: var(--amber); }
.badge.red { background: var(--red-soft); color: var(--red); }
.badge.blue { background: var(--blue-soft); color: var(--blue); }
.badge.gray { background: var(--cream-2); color: var(--muted); }

/* ============ TIPS ============ */
.tip {
 display: flex; align-items: flex-start; gap: 12px;
 padding: 14px 16px;
 background: var(--green-tint);
 border: 1px solid var(--green-soft);
 border-radius: var(--r-md);
 margin: 16px 0;
}
.tip .tip-icon {
 width: 28px; height: 28px;
 flex-shrink: 0;
 background: var(--green);
 color: var(--green-deep);
 border-radius: 50%;
 display: inline-flex; align-items: center; justify-content: center;
 font-family: var(--f-display); font-weight: 700; font-size: 14px;
}
.tip .tip-content { flex: 1; }
.tip .tip-title {
 font-family: var(--f-display);
 font-weight: 700;
 font-size: 13px;
 color: var(--green-deep);
 margin-bottom: 2px;
}
.tip .tip-text {
 font-size: 13px;
 color: var(--ink-2);
}

/* ============ PROFILE ============ */
.prof-head {
 display: flex; align-items: center; gap: 18px;
 background: var(--paper);
 padding: 24px;
 border-radius: var(--r-lg);
 border: 1px solid var(--rule);
 margin-bottom: 16px;
}
.prof-avatar {
 width: 72px; height: 72px;
 border-radius: 50%;
 background: var(--green-deep);
 color: var(--green);
 display: inline-flex; align-items: center; justify-content: center;
 font-family: var(--f-display); font-weight: 700; font-size: 26px;
 flex-shrink: 0;
}
.prof-head h2 { font-size: 22px; letter-spacing: -0.02em; }
.prof-head .meta { color: var(--muted); font-size: 14px; margin-top: 4px; }

.chip-list {
 display: flex; gap: 8px; flex-wrap: wrap;
}
.chip {
 display: inline-flex; align-items: center; gap: 6px;
 padding: 8px 14px;
 border-radius: 999px;
 background: var(--cream-2);
 border: 1px solid var(--rule);
 font-size: 13px;
 color: var(--ink);
 font-weight: 500;
}
.chip.green {
 background: var(--green-soft);
 border-color: var(--green-ink);
 color: var(--green-text);
}

.cert-row {
 display: flex; align-items: center; justify-content: space-between;
 padding: 14px 0;
 border-bottom: 1px solid var(--rule);
 gap: 12px;
 flex-wrap: wrap;
}
.cert-row:last-child { border-bottom: 0; }
.cert-row .cert-name {
 font-family: var(--f-display);
 font-weight: 600;
 color: var(--green-deep);
}
.cert-row .cert-meta {
 font-size: 13px;
 color: var(--muted);
 margin-top: 2px;
}

/* ============ CONTRACT ============ */
.contract-hero {
 background: linear-gradient(135deg, var(--green-deep), var(--green-mid));
 color: var(--cream);
 padding: 28px;
 border-radius: var(--r-lg);
 margin-bottom: 16px;
}
.contract-hero .eyebrow {
 font-family: var(--f-display);
 font-size: 11px;
 letter-spacing: 0.15em;
 text-transform: uppercase;
 color: var(--green);
 margin-bottom: 8px;
}
.contract-hero h2 {
 color: var(--cream);
 font-size: 24px;
 margin-bottom: 6px;
}
.contract-hero .meta {
 color: rgba(252,247,242,0.7);
 font-size: 14px;
}
.contract-detail {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 24px;
 margin-top: 20px;
}
@media (max-width: 600px) {
 .contract-detail { grid-template-columns: 1fr; }
}
.contract-detail .label {
 font-family: var(--f-display);
 font-size: 10px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: rgba(252,247,242,0.55);
 margin-bottom: 4px;
}
.contract-detail .value {
 font-family: var(--f-display);
 font-weight: 600;
 color: var(--cream);
 font-size: 16px;
}

/* ============ TOAST ============ */
.toast {
 position: fixed;
 bottom: calc(var(--bottom-nav-h) + 16px);
 left: 50%;
 transform: translateX(-50%) translateY(80px);
 background: var(--green-deep);
 color: var(--cream);
 padding: 14px 22px;
 border-radius: 999px;
 font-family: var(--f-display);
 font-weight: 600;
 font-size: 14px;
 box-shadow: var(--shadow-3);
 z-index: 1000;
 opacity: 0;
 transition: opacity .25s, transform .3s cubic-bezier(.2,.7,.3,1);
 pointer-events: none;
 display: inline-flex; align-items: center; gap: 10px;
 max-width: calc(100vw - 32px);
}
.toast.show {
 transform: translateX(-50%) translateY(0);
 opacity: 1;
}
.toast.success::before { content: "✓"; color: var(--green); font-weight: 700; }
@media (min-width: 901px) {
 .toast { bottom: 28px; }
}

/* ============ BOTTOM NAV (mobile) ============ */
.bottom-nav {
 display: none;
 position: fixed;
 bottom: 0; left: 0; right: 0;
 height: var(--bottom-nav-h);
 background: var(--paper);
 border-top: 1px solid var(--rule);
 z-index: 100;
 box-shadow: 0 -2px 10px rgba(12,38,27,0.05);
}
@media (max-width: 900px) {
 .bottom-nav { display: flex; }
}
.bottom-nav a {
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 2px;
 color: var(--muted);
 font-size: 11px;
 font-family: var(--f-display);
 font-weight: 600;
 padding: 6px;
 transition: color .15s;
}
.bottom-nav a .ic {
 font-size: 20px;
 line-height: 1;
}
.bottom-nav a.active {
 color: var(--green-text);
}
.bottom-nav a.active .ic {
 transform: scale(1.1);
}

/* ============ FOOTER ============ */
.portaal-footer {
 margin-top: 32px;
 padding-top: 20px;
 border-top: 1px solid var(--rule);
 font-size: 13px;
 color: var(--muted);
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 12px;
}
.portaal-footer a {
 color: var(--green-text);
 font-weight: 600;
}
.portaal-footer a:hover { text-decoration: underline; }

/* ============ EMPTY STATE ============ */
.empty {
 text-align: center;
 padding: 32px 20px;
 color: var(--muted);
}
.empty .empty-ic {
 width: 48px; height: 48px;
 margin: 0 auto 12px;
 border-radius: 50%;
 background: var(--cream-2);
 display: inline-flex; align-items: center; justify-content: center;
 font-size: 22px;
 color: var(--muted);
}
.empty h3 {
 font-size: 16px;
 color: var(--ink);
 margin-bottom: 4px;
}

/* ============ PRINT ============ */
@media print {
 .side, .bottom-nav, .topbar, .btn, .week-switcher, .tip { display: none !important; }
 .app { display: block; }
 .main { padding: 0; max-width: none; }
 body { background: white; color: black; font-size: 11pt; }
 .card { border: 1px solid #ccc; box-shadow: none; page-break-inside: avoid; }
 .tbl th { background: #f5f5f5; }
 a { color: black; text-decoration: underline; }
}

/* ============ MOTION ============ */
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
 animation-duration: 0.01ms !important;
 transition-duration: 0.01ms !important;
 }
}

/* ============ POLISH (S-tier finish) ============
 subtle entrance animations, hover lift on cards/buttons,
 improved focus ring contrast, scroll-padding for bottom-nav.
================================================================ */

/* Smooth page entrance */
.main > * { animation: fhFadeUp .35s cubic-bezier(.2,.7,.3,1) backwards; }
.main > *:nth-child(1) { animation-delay: .00s; }
.main > *:nth-child(2) { animation-delay: .04s; }
.main > *:nth-child(3) { animation-delay: .08s; }
.main > *:nth-child(4) { animation-delay: .12s; }
.main > *:nth-child(5) { animation-delay: .16s; }
.main > *:nth-child(6) { animation-delay: .20s; }
@keyframes fhFadeUp {
 from { opacity: 0; transform: translateY(8px); }
 to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
 .main > * { animation: none; }
}

/* Card hover lift on desktop */
@media (hover: hover) {
 .stat, .card {
 transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
 }
 .stat:hover {
 transform: translateY(-2px);
 box-shadow: 0 12px 28px rgba(12,38,27,.10), 0 4px 8px rgba(12,38,27,.06);
 }
 .agenda-day:hover { background: var(--cream); }
}

/* Avoid bottom-nav overlap when anchor scrolls into view */
html { scroll-padding-bottom: calc(var(--bottom-nav-h) + 16px); }

/* Better hit-area on small icon-only buttons */
.btn-sm { min-height: 40px; }

/* Tabular numbers in stat values and totals */
.stat .value, .uren-summary .total-value, .uren-day .day-total, .tbl td:nth-child(n+2) {
 font-variant-numeric: tabular-nums;
}

/* Subtle separator inside multi-card stacks */
.card + .card { margin-top: 14px; }

/* Visible focus on links in hero-contract block (dark bg) */
.contract-hero a:focus-visible {
 outline-color: var(--green);
}

/* Improve toast contrast on light pages */
.toast { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* Form fields: clearer disabled state */
input[readonly], input[disabled], select[disabled] {
 background: var(--cream-2) !important;
 color: var(--muted) !important;
 cursor: not-allowed;
}

/* Login card subtle lift */
.login-card { animation: fhFadeUp .4s cubic-bezier(.2,.7,.3,1) backwards; }
.login-aside .perks { animation: fhFadeUp .5s .15s cubic-bezier(.2,.7,.3,1) backwards; }