/* =============================================================================
   Online Elements Workforce - Stylesheet
   Palette: inkt-navy sidebar, koel lichtgrijs canvas, amber accent voor focus,
   groen/oranje/rood voor uren- en roosterstatus (functioneel, niet decoratief).
   ============================================================================= */

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

:root{
  --ink-950:#0f1420;
  --ink-900:#141a24;
  --ink-800:#1c2432;
  --ink-700:#2a3345;
  --ink-600:#3d4a61;

  --canvas:#f3f5f8;
  --surface:#ffffff;
  --surface-muted:#f8f9fb;
  --border:#e4e7ee;
  --border-strong:#d3d8e3;

  --text-900:#111827;
  --text-700:#374151;
  --text-500:#6b7280;
  --text-400:#9ca3af;

  --accent:#e8a33d;
  --accent-dark:#c7841f;
  --accent-ink:#3a2a09;

  --blue:#3b6fd6;
  --blue-soft:#e8effc;
  --green:#1c9a6c;
  --green-soft:#e4f7ee;
  --orange:#d9832b;
  --orange-soft:#fdf1e1;
  --red:#d9483d;
  --red-soft:#fbe9e7;
  --grey-soft:#eef0f3;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;

  --shadow-sm:0 1px 2px rgba(15,20,32,.06);
  --shadow-md:0 8px 24px -8px rgba(15,20,32,.18);

  --font-display:'Manrope', 'Inter', sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text-900);
  background:var(--canvas);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; margin:0 0 .4em; color:var(--text-900); letter-spacing:-0.01em; }
h1{ font-size:1.7rem; } h2{ font-size:1.3rem; } h3{ font-size:1.05rem; } h4{font-size:.95rem;}
p{ margin:0 0 .75em; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }
.tabular{ font-variant-numeric: tabular-nums; }

/* Focus visibility (a11y) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent-dark); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* =============================================================================
   App shell: sidebar + topbar + content
   ============================================================================= */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:248px; flex-shrink:0; background:var(--ink-900);
  color:#cfd6e4; display:flex; flex-direction:column;
  position:fixed; top:0; bottom:0; left:0; z-index:40;
  transition:transform .2s ease;
}
.sidebar-brand{
  display:flex; align-items:center; gap:.6rem; padding:1.25rem 1.25rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand .mark{
  width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg, var(--accent), var(--accent-dark));
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; color:var(--accent-ink); font-size:.95rem;
}
.sidebar-brand .name{ font-family:var(--font-display); font-weight:700; color:#fff; font-size:.98rem; line-height:1.2; }
.sidebar-brand .sub{ font-size:.72rem; color:#8b96ad; }

.sidebar-nav{ flex:1; overflow-y:auto; padding:.9rem .7rem; }
.sidebar-group-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:#6f7c93; padding:1rem .6rem .35rem; }
.sidebar-link{
  display:flex; align-items:center; gap:.65rem; padding:.55rem .65rem; border-radius:9px;
  color:#c3cbdc; font-size:.87rem; font-weight:500; margin-bottom:2px;
}
.sidebar-link:hover{ background:rgba(255,255,255,.06); text-decoration:none; color:#fff; }
.sidebar-link.active{ background:rgba(232,163,61,.15); color:#f4d9a8; }
.sidebar-link .ico{ width:18px; text-align:center; flex-shrink:0; opacity:.9; }
.sidebar-link .badge-count{
  margin-left:auto; background:var(--red); color:#fff; font-size:.68rem; font-weight:700;
  padding:.05rem .4rem; border-radius:99px; min-width:18px; text-align:center;
}

.sidebar-footer{ padding:.9rem 1.1rem 1.1rem; border-top:1px solid rgba(255,255,255,.08); }
.sidebar-user{ display:flex; align-items:center; gap:.6rem; }
.sidebar-user .avatar{ width:34px; height:34px; }
.sidebar-user .who{ min-width:0; }
.sidebar-user .who .n{ color:#fff; font-size:.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user .who .r{ font-size:.72rem; color:#8b96ad; }
.logout-link{ margin-left:auto; color:#8b96ad; font-size:1rem; }
.logout-link:hover{ color:#fff; }

.main-col{ flex:1; margin-left:248px; display:flex; flex-direction:column; min-width:0; }

.topbar{
  height:64px; background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:1rem; padding:0 1.5rem; position:sticky; top:0; z-index:30;
}
.topbar .page-title{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.topbar-spacer{ flex:1; }
.menu-toggle{ display:none; background:none; border:0; font-size:1.3rem; color:var(--text-700); cursor:pointer; }

.content{ padding:1.5rem; max-width:1400px; width:100%; margin:0 auto; }

/* =============================================================================
   Avatars, badges, buttons
   ============================================================================= */
.avatar{
  width:38px; height:38px; border-radius:50%; background:var(--blue-soft); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem;
  flex-shrink:0; overflow:hidden; border:1px solid rgba(0,0,0,.04);
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar.sm{ width:28px; height:28px; font-size:.68rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.55rem 1.05rem; border-radius:9px; font-size:.87rem; font-weight:600;
  border:1px solid transparent; cursor:pointer; background:var(--ink-900); color:#fff;
  transition:filter .12s ease, transform .05s ease;
}
.btn:hover{ filter:brightness(1.15); text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn.btn-accent{ background:var(--accent); color:var(--accent-ink); }
.btn.btn-outline{ background:transparent; border-color:var(--border-strong); color:var(--text-700); }
.btn.btn-outline:hover{ background:var(--surface-muted); filter:none; }
.btn.btn-danger{ background:var(--red); }
.btn.btn-ghost{ background:transparent; color:var(--text-500); }
.btn.btn-ghost:hover{ background:var(--surface-muted); filter:none; }
.btn.btn-sm{ padding:.35rem .75rem; font-size:.78rem; border-radius:7px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.badge{
  display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .55rem; border-radius:99px;
  font-size:.72rem; font-weight:700; white-space:nowrap;
}
.badge-green{ background:var(--green-soft); color:var(--green); }
.badge-orange{ background:var(--orange-soft); color:var(--orange); }
.badge-red{ background:var(--red-soft); color:var(--red); }
.badge-blue{ background:var(--blue-soft); color:var(--blue); }
.badge-grey{ background:var(--grey-soft); color:var(--text-500); }

/* =============================================================================
   Cards & stat tiles
   ============================================================================= */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.card-header{ padding:1.1rem 1.3rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.75rem; }
.card-header h2, .card-header h3{ margin:0; }
.card-body{ padding:1.3rem; }
.card-header .actions{ margin-left:auto; display:flex; gap:.5rem; }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.stat-tile{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.1rem 1.2rem; box-shadow:var(--shadow-sm); }
.stat-tile .label{ font-size:.76rem; color:var(--text-500); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.35rem; }
.stat-tile .value{ font-family:var(--font-display); font-size:1.65rem; font-weight:800; }
.stat-tile.accent{ border-color:rgba(232,163,61,.4); background:linear-gradient(180deg, rgba(232,163,61,.06), transparent); }
.stat-tile.warn .value{ color:var(--orange); }
.stat-tile.danger .value{ color:var(--red); }

/* =============================================================================
   Forms
   ============================================================================= */
.form-group{ margin-bottom:1.1rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
label{ display:block; font-size:.83rem; font-weight:600; color:var(--text-700); margin-bottom:.35rem; }
.hint{ font-size:.76rem; color:var(--text-500); margin-top:.3rem; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=time],
input[type=number], select, textarea{
  width:100%; padding:.6rem .75rem; border:1px solid var(--border-strong); border-radius:8px;
  font-size:.9rem; font-family:var(--font-body); background:var(--surface); color:var(--text-900);
}
textarea{ resize:vertical; min-height:5.5em; }
input:focus, select:focus, textarea:focus{ border-color:var(--accent-dark); }
.field-error{ color:var(--red); font-size:.78rem; margin-top:.3rem; }
.error-banner{ background:var(--red-soft); color:#8a271f; border:1px solid rgba(217,72,61,.25); padding:.75rem 1rem; border-radius:9px; margin-bottom:1rem; font-size:.87rem; }
.success-banner{ background:var(--green-soft); color:#0f6b48; border:1px solid rgba(28,154,108,.25); padding:.75rem 1rem; border-radius:9px; margin-bottom:1rem; font-size:.87rem; }
.checkbox-row{ display:flex; align-items:center; gap:.5rem; }
.checkbox-row input{ width:auto; }

/* =============================================================================
   Tables
   ============================================================================= */
.table-wrap{ overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--border); }
table.data-table{ width:100%; border-collapse:collapse; background:var(--surface); font-size:.85rem; }
table.data-table th{
  text-align:left; padding:.7rem .9rem; background:var(--surface-muted); color:var(--text-500);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700; border-bottom:1px solid var(--border);
  white-space:nowrap;
}
table.data-table td{ padding:.65rem .9rem; border-bottom:1px solid var(--border); vertical-align:middle; }
table.data-table tr:last-child td{ border-bottom:none; }
table.data-table tr:hover td{ background:var(--surface-muted); }
.name-cell{ display:flex; align-items:center; gap:.6rem; font-weight:600; }
.empty-state{ padding:2.5rem 1.5rem; text-align:center; color:var(--text-500); }
.empty-state .big-ico{ font-size:2rem; margin-bottom:.5rem; opacity:.5; }

/* =============================================================================
   Filters bar
   ============================================================================= */
.filters-bar{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.1rem; align-items:center; }
.filters-bar select, .filters-bar input[type=text], .filters-bar input[type=date]{ width:auto; min-width:150px; }
.week-nav{ display:flex; align-items:center; gap:.6rem; background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:.35rem .5rem; }
.week-nav .lbl{ font-weight:700; font-size:.85rem; padding:0 .3rem; }
.week-nav a{ color:var(--text-700); padding:.25rem .5rem; border-radius:6px; }
.week-nav a:hover{ background:var(--surface-muted); text-decoration:none; }

/* =============================================================================
   SIGNATURE COMPONENT: het weekrooster
   ============================================================================= */
.roster-wrap{ overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-sm); }
table.roster{ width:100%; border-collapse:separate; border-spacing:0; min-width:820px; }
table.roster thead th{
  background:var(--ink-900); color:#c8d0e0; text-align:center; padding:.85rem .5rem; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.05em; font-weight:700; position:sticky; top:0; z-index:2;
}
table.roster thead th .dow{ display:block; color:#fff; font-size:.82rem; font-family:var(--font-display); margin-bottom:.15rem; }
table.roster thead th.today{ background:var(--accent-dark); color:#3a2a09; }
table.roster thead th.today .dow{ color:var(--accent-ink); }
table.roster thead th:first-child{ text-align:left; position:sticky; left:0; z-index:3; }
table.roster tbody th{
  text-align:left; padding:.6rem .9rem; background:var(--surface); position:sticky; left:0; z-index:1;
  border-right:1px solid var(--border); border-bottom:1px solid var(--border); min-width:190px;
}
table.roster tbody td{ border-bottom:1px solid var(--border); border-right:1px solid var(--border); padding:.4rem; text-align:center; min-width:108px; }
table.roster tbody tr:last-child td, table.roster tbody tr:last-child th{ border-bottom:none; }
table.roster tbody td:last-child{ border-right:none; }

.roster-employee{ display:flex; align-items:center; gap:.55rem; }
.roster-employee .n{ font-weight:600; font-size:.85rem; }
.roster-hours{ font-size:.72rem; color:var(--text-500); margin-top:.1rem; }

.shift-cell{
  border-radius:9px; padding:.5rem .4rem; font-size:.76rem; font-weight:700; line-height:1.25;
  cursor:default; transition:filter .1s ease;
}
.shift-cell.gepland{ background:var(--green-soft); color:#0f6b48; }
.shift-cell.vrij{ background:var(--grey-soft); color:var(--text-500); font-weight:500; }
.shift-cell.ziek{ background:var(--red-soft); color:#8a271f; }
.shift-cell.verlof{ background:var(--blue-soft); color:#274c92; }
.shift-cell.editable{ cursor:pointer; }
.shift-cell.editable:hover{ filter:brightness(0.96); outline:2px solid var(--accent-dark); outline-offset:1px; }
.shift-cell .time{ display:block; font-size:.7rem; opacity:.85; font-weight:600; }

.hours-pill{ display:inline-block; padding:.2rem .55rem; border-radius:99px; font-size:.72rem; font-weight:700; }
.hours-pill.green{ background:var(--green-soft); color:var(--green); }
.hours-pill.orange{ background:var(--orange-soft); color:var(--orange); }
.hours-pill.red{ background:var(--red-soft); color:var(--red); }
.hours-pill.grey{ background:var(--grey-soft); color:var(--text-500); }

/* Modal for editing a schedule cell */
.modal-backdrop{ position:fixed; inset:0; background:rgba(15,20,32,.5); display:none; align-items:center; justify-content:center; z-index:100; padding:1rem; }
.modal-backdrop.open{ display:flex; }
.modal{ background:var(--surface); border-radius:var(--radius-lg); width:100%; max-width:420px; padding:1.5rem; box-shadow:var(--shadow-md); }
.modal h3{ margin-bottom:1rem; }
.modal-actions{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.3rem; }

/* =============================================================================
   Availability form (mobile-first)
   ============================================================================= */
.avail-day{ border:1px solid var(--border); border-radius:var(--radius-md); padding:1rem; margin-bottom:.8rem; background:var(--surface); }
.avail-day .day-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.avail-day .day-head .dname{ font-family:var(--font-display); font-weight:700; }
.avail-toggle{ display:flex; border-radius:8px; overflow:hidden; border:1px solid var(--border-strong); width:fit-content; }
.avail-toggle button{ border:0; background:var(--surface); padding:.4rem .8rem; font-size:.78rem; font-weight:600; color:var(--text-500); cursor:pointer; }
.avail-toggle button.active.beschikbaar{ background:var(--green); color:#fff; }
.avail-toggle button.active.niet{ background:var(--text-500); color:#fff; }
.avail-times{ display:flex; gap:.7rem; margin-top:.7rem; }
.avail-times .fld{ flex:1; }

/* =============================================================================
   Team-today list (medewerker dashboard)
   ============================================================================= */
.team-today-list{ display:flex; flex-direction:column; gap:.5rem; }
.team-today-row{ display:flex; align-items:center; gap:.7rem; padding:.55rem .3rem; border-bottom:1px solid var(--border); }
.team-today-row:last-child{ border-bottom:none; }
.status-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.status-dot.gepland{ background:var(--green); }
.status-dot.vrij{ background:var(--text-400); }
.status-dot.ziek{ background:var(--red); }
.status-dot.verlof{ background:var(--blue); }
.team-today-row .meta{ margin-left:auto; font-size:.78rem; color:var(--text-500); }

/* =============================================================================
   Notification bell / dropdown
   ============================================================================= */
.notif-bell{ position:relative; background:none; border:0; font-size:1.25rem; cursor:pointer; color:var(--text-700); padding:.4rem; }
.notif-dot{ position:absolute; top:2px; right:2px; background:var(--red); color:#fff; font-size:.62rem; font-weight:700; border-radius:99px; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.notif-dropdown{
  position:absolute; right:1.5rem; top:60px; width:360px; max-height:70vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-md);
  display:none; z-index:50;
}
.notif-dropdown.open{ display:block; }
.notif-item{ padding:.85rem 1.1rem; border-bottom:1px solid var(--border); display:flex; gap:.6rem; }
.notif-item:last-child{ border-bottom:none; }
.notif-item .t{ font-size:.68rem; color:var(--text-400); margin-top:.15rem; }
.notif-item.unread{ background:var(--surface-muted); }
.notif-item .title{ font-weight:700; font-size:.85rem; }
.notif-item .msg{ font-size:.8rem; color:var(--text-500); }
.notif-empty{ padding:2rem; text-align:center; color:var(--text-400); font-size:.85rem; }

/* =============================================================================
   Auth pages (login / activatie)
   ============================================================================= */
.auth-shell{ min-height:100vh; display:flex; }
.auth-visual{
  flex:1.1; background:radial-gradient(1200px 700px at 20% 10%, #1e2738, var(--ink-950)); color:#fff;
  display:flex; flex-direction:column; justify-content:space-between; padding:3rem; position:relative; overflow:hidden;
}
.auth-visual .brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:800; font-size:1.1rem; }
.auth-visual .brand .mark{ width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, var(--accent), var(--accent-dark)); display:flex; align-items:center; justify-content:center; color:var(--accent-ink); font-weight:800; }
.auth-visual .pitch h1{ color:#fff; font-size:2rem; max-width:420px; }
.auth-visual .pitch p{ color:#aab4c8; max-width:400px; }
.auth-visual .grid-deco{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size:36px 36px; pointer-events:none; }
.auth-visual .foot{ color:#6f7c93; font-size:.78rem; }

.auth-panel{ flex:1; display:flex; align-items:center; justify-content:center; padding:2rem; background:var(--surface); }
.auth-box{ width:100%; max-width:380px; }
.auth-box h1{ font-size:1.5rem; }
.auth-box .sub{ color:var(--text-500); margin-bottom:1.6rem; font-size:.9rem; }
.auth-box .btn{ width:100%; padding:.7rem; }

@media (max-width: 900px){
  .auth-visual{ display:none; }
}

/* =============================================================================
   Install wizard
   ============================================================================= */
.install-shell{ min-height:100vh; background:var(--ink-950); display:flex; align-items:center; justify-content:center; padding:2rem; }
.install-card{ width:100%; max-width:640px; background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden; }
.install-head{ background:var(--ink-900); color:#fff; padding:1.6rem 2rem; }
.install-head .steps{ display:flex; gap:.4rem; margin-top:.9rem; }
.install-head .steps span{ height:4px; flex:1; border-radius:99px; background:rgba(255,255,255,.18); }
.install-head .steps span.done{ background:var(--accent); }
.install-body{ padding:2rem; }
.check-row{ display:flex; align-items:center; gap:.6rem; padding:.55rem 0; border-bottom:1px solid var(--border); font-size:.88rem; }
.check-row:last-child{ border-bottom:none; }
.check-ico.ok{ color:var(--green); }
.check-ico.fail{ color:var(--red); }

/* =============================================================================
   Error pages
   ============================================================================= */
.error-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--canvas); padding:2rem; }
.error-box{ text-align:center; max-width:440px; }
.error-box .code{ font-family:var(--font-display); font-size:4rem; font-weight:800; color:var(--ink-900); line-height:1; }
.error-box h1{ margin-top:.5rem; }
.error-box p{ color:var(--text-500); }

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 980px){
  .sidebar{ transform:translateX(-100%); box-shadow:var(--shadow-md); }
  .sidebar.open{ transform:translateX(0); }
  .main-col{ margin-left:0; }
  .menu-toggle{ display:inline-flex; }
  .form-row{ grid-template-columns:1fr; }
  .notif-dropdown{ right:1rem; width:calc(100vw - 2rem); }
}
@media (max-width: 600px){
  .content{ padding:1rem; }
  .topbar{ padding:0 1rem; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
}

.sidebar-scrim{ position:fixed; inset:0; background:rgba(15,20,32,.45); z-index:35; display:none; }
.sidebar-scrim.open{ display:block; }

.section-title-row{ display:flex; align-items:center; margin-bottom:1rem; gap:.75rem; flex-wrap:wrap; }
.section-title-row .actions{ margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap; }

.tag-list{ display:flex; flex-wrap:wrap; gap:.4rem; }

.divider{ height:1px; background:var(--border); margin:1.3rem 0; border:0; }

.mb-0{margin-bottom:0;} .mt-0{margin-top:0;}