/* ============================================================
   AtSea CRM - Global Styles (refined, consolidated)
   ============================================================ */

:root {
  /* Accent / merk-kleur (fallback; kan runtime vanuit PHP overschreven worden) */
  /* removed: --primary: #4284ff; */
  /* removed: --brand: #4284ff; */

  --bg-body: #f3f4f6;
  --bg-surface: #ffffff;
  --bg-soft: #f9fafb;

  --border-subtle: #e5e7eb;
  --border-strong: #d1d5db;

  --text-main: #111827;
  --text-muted: #6b7280;
  --text-soft: #484d55;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.07);
  --shadow-card: 0 14px 30px rgba(15, 23, 42, 0.07);

  --sidebar-bg: #020617;
  --sidebar-border: #0f172a;
  --sidebar-text: #e5e7eb;

  --topbar-bg: #ffffff;

  --primary-soft-bg: color-mix(in srgb, var(--primary) 14%, #ffffff);
}

/* ============================================================
   Reset / Base
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-main);
  background: #ecedf0;
  min-height: 100vh;
}

/* Links */
a { color:#0f172a; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   App Shell / Sidebar
   ============================================================ */

.app-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}

/* Sidebar */

.app-sidebar {
  /* Informer-achtige sidebar (donker blauw, rustig, veel contrast) */
  background: linear-gradient(180deg, #071f35 0%, #041628 55%, #03101f 100%);
  color: var(--sidebar-text);
  border-right: 1px solid rgba(255,255,255,.06);
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Logo */
.app-logo { padding: 2px 6px 8px; margin-bottom: 2px; }
.app-logo a {
  font-weight: 700; letter-spacing: .06em; font-size: 16px;
  text-transform: uppercase; color: #f9fafb; text-decoration: none;
}
.app-logo span { color: var(--primary); }

/* Sidebar nav */
.app-nav { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }

.nav-section{
  margin: 8px 6px 4px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(226,232,240,.55);
}

.app-nav .nav-item{
  display:flex; align-items:center; gap:.5rem;
  padding:8px 10px;
  border-radius:10px;
  font-size: 13px;
  line-height: 1.2;
  color:rgba(226,232,240,.88);
  text-decoration:none; position:relative;
  transition: background .18s, color .18s, transform .12s, box-shadow .18s;
}
/* Geen harde linkerstreep (meer zoals screenshot) */
.app-nav .nav-item::before{ content:none; }
.app-nav .nav-item .nav-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px;
  height:20px;
  border-radius:999px;
  background: transparent;
  box-shadow:none;
  flex-shrink:0;
}
.app-nav .nav-item .nav-ico svg,
.app-nav .nav-item .nav-ico i { color: rgba(147,197,253,.95) !important; stroke: currentColor !important; }

.app-nav .nav-item:hover{
  background: rgba(255,255,255,.06);
  transform: none;
}
.app-nav .nav-item.active{
  background: rgba(255,255,255,.08);
  box-shadow: none;
  color:#fff;
}
.app-nav .nav-item.active .nav-ico{
  background: transparent;
  box-shadow:none;
}

.flex-1 { flex: 1 1 auto; }

/* Submenu */
.nav-sub { margin: 2px 0 10px; padding-left: 34px; border-left: 0; }
.nav-sub-item{
  display:block;
  padding:8px 12px;
  border-radius:12px;
  color:rgba(226,232,240,.82);
  font-size:13px;
  transition: background .16s, color .16s, transform .12s;
}
.nav-sub-item:hover { background: rgba(255,255,255,.05); transform:none; }
.nav-sub-item.active{ background: rgba(255,255,255,.08); color:#fff; font-weight:600; }

/* Caret / chevron */
.app-sidebar .nav-item .caret{
  margin-left:auto;
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.7;
  transform: rotate(0deg);
  transition: transform .2s, opacity .2s;
}
.app-sidebar .nav-item .caret::before{ content:"›"; font-size:18px; line-height:1; }
.app-sidebar .nav-item[aria-expanded="true"] .caret{ transform:rotate(90deg); opacity:1; }

/* Sidebar footer */
.app-sidebar-footer{ margin-top:auto; font-size:11px; color:rgba(148,163,184,.8); padding:6px 4px 2px; }

/* ============================================================
   Main / Topbar / Content
   ============================================================ */

.app-main { display:flex; flex-direction:column; min-height:100vh; }

/* Topbar */
.app-topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 22px;
  background: linear-gradient(to right, rgba(255,255,255,.96), rgba(248,250,252,.98));
  backdrop-filter: blur(16px);
  border-bottom:1px solid rgba(226,232,240,.95);
}
.app-topbar-left,.app-topbar-center,.app-topbar-right{ display:flex; align-items:center; }
.app-topbar-left{ min-width:0; font-size:12px; color:var(--text-muted); }
.topbar-meta{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.app-topbar-center{ flex:1 1 auto; justify-content:center; }

.topbar-search{ width:100%; max-width:480px; }
.topbar-search input{
  width:100%; border-radius:999px; border:1px solid rgba(209,213,219,.9); padding:7px 12px; font-size:13px;
  background: linear-gradient(to right, #f9fafb, #fff);
  transition: border-color .16s, box-shadow .16s, background-color .16s;
}
.topbar-search input:focus{
  outline:none; border-color:var(--primary);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent),
    0 10px 25px rgba(15,23,42,.08);
  background:#fff;
}

/* User menu */
.app-topbar-right{ gap:10px; }
.user-menu{ position:relative; }
/* Hover-bridge: voorkomt dat het menu dichtklapt door het kleine gat tussen knop en dropdown */
.user-menu::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:8px;
}
.user-btn{
  border:0; background:rgba(15,23,42,.03); border-radius:999px; padding:4px 10px 4px 4px;
  display:flex; align-items:center; gap:6px; cursor:pointer; box-shadow:0 1px 1px rgba(15,23,42,.04);
  transition: background .16s, box-shadow .16s, transform .08s;
}
.user-btn:hover{ background:rgba(15,23,42,.05); box-shadow:0 4px 12px rgba(15,23,42,.08); transform:translateY(-1px); }

.user-name{ font-size:13px; font-weight:500; color:#111827; }
.user-role{ font-size:11px; }

/* Dropdown */
.user-dropdown{
  position:absolute; right:0; top:calc(100% + 4px); min-width:180px; background:#fff; border-radius:10px;
  border:1px solid rgba(226,232,240,.9); box-shadow:0 18px 35px rgba(15,23,42,.18); padding:6px 0; display:none; z-index:30;
}
.user-menu:hover .user-dropdown,
.user-menu:focus-within .user-dropdown{ display:block; }
/* Mobile/touch support: open dropdown via JS (class "open") */
.user-menu.open .user-dropdown{ display:block; }
.user-dropdown a{ display:block; padding:7px 12px; font-size:13px; color:#111827; text-decoration:none; }
.user-dropdown a:hover{ background:#f3f4f6; }
.user-dropdown a.danger{ color:#b91c1c; }

/* Topbar meta (tijd/weer) */
.topbar-meta{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.meta-dot{ opacity:.55; }
.meta-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px; border-radius:999px;
  border:1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.65);
  box-shadow: 0 1px 1px rgba(15,23,42,.04);
  color: var(--text-muted);
}
.meta-pill .meta-ico{ width:16px; height:16px; color: rgba(15,23,42,.55); }
.meta-weather{ cursor:pointer; transition: background .16s, border-color .16s, transform .08s; }
.meta-weather:hover{ background:#fff; border-color: rgba(203,213,225,.9); transform: translateY(-1px); }
.meta-weather-text{ font-size:12px; color: var(--text-muted); }
.meta-refresh{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; opacity:.55; }
.meta-refresh svg{ width:18px; height:18px; }
.meta-weather:hover .meta-refresh{ opacity:.9; }

/* Header tool buttons + dropdowns (quick actions / recent) */
.header-menu{ position:relative; }
.header-menu::after{
  content:"";
  position:absolute;
  left:-6px;
  right:-6px;
  top:100%;
  height:8px;
}
.icon-btn{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; cursor:pointer;
  background: rgba(15,23,42,.03);
  border-radius: 12px;
  box-shadow:0 1px 1px rgba(15,23,42,.04);
  transition: background .16s, box-shadow .16s, transform .08s;
}
.icon-btn svg{ width:18px; height:18px; color:#0f172a; opacity:.7; }
.icon-btn:hover{ background: rgba(15,23,42,.06); box-shadow:0 10px 25px rgba(15,23,42,.10); transform: translateY(-1px); }

.header-dropdown{
  position:absolute; right:0; top:calc(100% + 4px);
  min-width:220px; background:#fff; border-radius:12px;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 18px 35px rgba(15,23,42,.18);
  padding:8px; display:none; z-index:30;
}
.header-menu:hover .header-dropdown,
.header-menu:focus-within .header-dropdown{ display:block; }
.header-menu.open .header-dropdown{ display:block; }

.dropdown-title{ font-size:12px; font-weight:700; color:#0f172a; padding:6px 6px 8px; }
.dropdown-sep{ height:1px; background: rgba(226,232,240,.9); margin:6px 4px; }
.header-dropdown a{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:10px;
  font-size:13px; color:#0f172a; text-decoration:none;
}
.header-dropdown a:hover{ background:#f3f4f6; }
.dropdown-empty{ font-size:12px; color: var(--text-muted); padding:8px 10px; }
.dropdown-list{ display:flex; flex-direction:column; gap:4px; padding:0 2px; }
.dropdown-action{
  width:100%; border:0; background:transparent; cursor:pointer;
  padding:8px 10px; border-radius:10px; text-align:left;
  font-size:13px; color: var(--text-muted);
}
.dropdown-action:hover{ background:#f3f4f6; color:#0f172a; }

/* Responsive: maak meta compacter */
@media (max-width: 920px){
  .meta-weather-text{ display:none; }
  .meta-pill{ padding:4px 8px; }
}

/* Content wrapper */
.app-content{ padding:18px 22px 28px; max-width:1500px; width:100%; margin:0 auto; }

/* Ensure CRM pages span the full content width (legacy pages could appear narrower) */
.crm-page,
.crm-page__header,
.crm-page__body{
  width:100%;
  max-width:none;
}

/* Page header */
.page-header{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px;
}
.page-header-main{ flex:1 1 auto; }
.page-title{ font-size:22px; font-weight:700; letter-spacing:-.02em; margin:0 0 4px; }
.page-subtitle{ margin:0; font-size:13px; color:var(--text-muted); }

/* Header action pill */
.page-header-action{
  font-size:12px; color:var(--primary); display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:999px; border:1px solid transparent; background:rgba(15,23,42,.02);
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.page-header-action:hover{
  background: color-mix(in srgb, var(--primary) 10%, #ffffff);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  box-shadow:0 6px 14px rgba(15,23,42,.12);
}

/* ============================================================
   Grid helpers
   ============================================================ */

/*
  Bootstrap-achtige flex grid met vaste gutters.
  Veel views gebruiken col-2/3/4/5/6/8/12. In v33 ontbraken sommige
  kolomklassen, waardoor formulieren (o.a. Relaties) "scheef" stonden.
*/
.row{
  display:flex;
  flex-wrap:wrap;
  margin:0 -9px;             /* horizontale gutter */
  row-gap:18px;              /* verticale spacing */
}
.row > [class^="col-"]{
  padding:0 9px;
  box-sizing:border-box;
  min-width:0;
}
.nowrap{ white-space:nowrap; }
.js-widget-column{ display:flex; flex-direction:column; gap:18px; }

/* ============================================================
   Dashboard layout (desktop + responsive)
   ============================================================ */

/*
  Het dashboard is opgebouwd uit twee widget-kolommen.
  Bij bepaalde schermbreedtes/zoom kon de flex-grid breakpoint (900px)
  ervoor zorgen dat alles onder elkaar valt. We forceren daarom voor
  het dashboard een eigen grid-layout die altijd netjes blijft.
*/
.dashboard-widgets.row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(420px, 1fr));
  gap:18px;
  margin:0; /* override .row gutters */
}
.dashboard-widgets.row > [class^="col-"]{
  padding:0; /* override .row gutters */
}
.dashboard-widgets.row > .col-6{
  flex:unset !important;
  max-width:none !important;
}
.dashboard-widgets .card{ margin-bottom:0; }


.col-12{ flex:0 0 100%; max-width:100%; }
.col-8 { flex:0 0 66.6667%; max-width:66.6667%; }
.col-6 { flex:0 0 50%;      max-width:50%; }
.col-5 { flex:0 0 41.6667%; max-width:41.6667%; }
.col-4 { flex:0 0 33.3333%; max-width:33.3333%; }
.col-3 { flex:0 0 25%;      max-width:25%; }
.col-2 { flex:0 0 16.6667%; max-width:16.6667%; }

@media (max-width:900px){
  .app-shell{ grid-template-columns:1fr; }
  .app-sidebar{ position:sticky; top:0; z-index:40; padding-bottom:10px; }
  .col-8,.col-6,.col-5,.col-4,.col-3,.col-2{ flex:0 0 100%; max-width:100%; }
}


/* ============================================================
   Dashboard – widgets grid + KPI tiles (v23)
   ============================================================ */

.dashboard-page .dashboard-widgets-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  align-items:start;
}

@media (max-width:1100px){
  .dashboard-page .dashboard-widgets-grid{ grid-template-columns:1fr; }
}

/* Make dashboard widgets a bit more compact */
.dashboard-page .card{
  padding:12px 14px 10px;
}
.dashboard-page .card-head{
  padding-bottom:6px;
  margin-bottom:10px;
}
.dashboard-page .table-wrapper{ margin-top:8px; }
.dashboard-page table th{ font-size:11px; letter-spacing:.08em; }
.dashboard-page table td{ font-size:13px; }

/* KPI grid inside a widget */
.kpi-grid{
  display:grid;
  gap:12px;
}
.kpi-grid--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.kpi-grid--4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.kpi-grid--2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

@media (max-width:1200px){
  .kpi-grid--4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .kpi-grid--3{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:620px){
  .kpi-grid--4, .kpi-grid--3, .kpi-grid--2{ grid-template-columns:1fr; }
}

.kpi-item{
  border:1px solid rgba(226,232,240,.9);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(248,250,252,.7);
}
.card--soft .kpi-item{
  background:#0a84ff0f;
  border-color:#0a84ff75;
}
.kpi-label{
  font-size:11px;
  color:#6b7280;
  margin-bottom:4px;
  line-height:1.2;
}
.kpi-value{
  font-size:22px;
  font-weight:800;
  letter-spacing:-.02em;
  color:#0f172a;
}

/* Dashboard: Strippenkaarten & kleding – show blocks side-by-side */
.dashboard-page .widget-kleding-strippen .dash-split{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  align-items:start;
}
@media (max-width:760px){
  .dashboard-page .widget-kleding-strippen .dash-split{ grid-template-columns:1fr; }
}

.dashboard-page .widget-kleding-strippen .dash-split__label{
  font-size:13px;
  color:#6b7280;
  margin-bottom:4px;
}
.dashboard-page .widget-kleding-strippen .dash-split__value{
  font-size:22px;
  font-weight:800;
  letter-spacing:-.02em;
  color:#0f172a;
}
.dashboard-page .widget-kleding-strippen .dash-split__hint{
  font-size:12px;
  color:#6b7280;
  margin-top:2px;
}
.dashboard-page .widget-kleding-strippen .dash-split__actions{ margin-top:10px; }
.dashboard-page .widget-kleding-strippen .dash-split__actions--row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}


/* ============================================================
   Cards & Tables
   ============================================================ */

.card{
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: var(--shadow-card);
  padding:14px 16px 12px;
  display:flex; flex-direction:column;
  margin-bottom: 10px;
}
.card--soft{ background: #ffffff; border:1px solid rgba(209,250,229,.7); }

.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding-bottom:6px; margin-bottom:8px; border-bottom:1px solid rgba(229,231,235,.8);
}
.card-head h2{ margin:0; font-size:15px; font-weight:600; letter-spacing:-.01em; }
.card-body{ font-size:13px; }

/*
  Table wrapper
  ------------
  Let the OUTER wrapper stay non-scrollable (overflow: visible).
  Some browsers (notably Chrome on Windows) can show an unwanted VERTICAL
  scrollbar when an element becomes a scroll container (even if we only
  need horizontal scrolling). We therefore move horizontal scrolling to
  an inner wrapper (.table-scroll-x).
*/
.table-wrapper{
  width:100%;
  overflow: visible;
  border-radius:12px;
  border:1px solid var(--border-subtle);
  background:#fff;
}

.table-scroll-x{
  width:100%;
  /*
    Default: keep NOT scrollable to avoid the unwanted vertical scrollbar
    that Chrome/Windows can show when an element becomes a scroll container.
    We only enable horizontal scrolling on smaller viewports.
  */
  overflow: visible;
  border-radius:12px;
}

/* Enable horizontal scrolling only on smaller screens */
@media (max-width: 1024px){
  .table-scroll-x{
    overflow-x:auto;
    overflow-y:hidden;
  }
  /* sticky headers only make sense when we scroll */
  .table-scroll-x thead th{ position:sticky; top:0; z-index:3; }
}

.tab-panel > section.card,
.tab-panel form > section.card {
  margin-bottom: 16px;
}

.tab-panel > section.card:last-of-type,
.tab-panel form > section.card:last-of-type {
  margin-bottom: 0;
}

.page-header {
  margin-bottom: 18px; /* stond lager, ietsje groter nu */
}

table{ border-collapse:collapse; width:100%; font-size:13px; }
thead{ background:#f9fafb; }

th,td{ padding:7px 10px; border-bottom:1px solid #edf0f3; text-align:left; white-space:nowrap; }
th{ font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover td{ background:#f9fafb; }

/* ============================================================
   Apple-clean CRM list pages (Relaties / Projecten)
   ============================================================ */

/* Flatter cards for overview pages */
.card.card--flat{
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(226, 232, 240, 0.95);
}

/* Page header refinements */
.crm-page-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin: 10px 0 16px;
}
.crm-page-title{
  margin:0;
  font-size:26px;
  font-weight:650;
  letter-spacing:-.02em;
}
.crm-page-subtitle{
  margin:4px 0 0;
  color: var(--text-muted);
  font-size:13px;
}
.crm-page-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-start; }

/* Filter pills (Apple segmented feel, but flexible) */
.filter-pills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 14px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 11px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  color:#0f172a;
  text-decoration:none;
  font-size:13px;
  line-height:1;
  transition: background .14s, border-color .14s, box-shadow .14s;
}
.pill:hover{ background: rgba(15,23,42,.02); }
.pill-active{
  background:#f3f4f6;
  border-color: rgba(15,23,42,.18);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
}
.pill-label{ font-weight:650; }
.pill-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.06);
  color:#0f172a;
  font-size:12px;
  font-weight:650;
}

/* Accordion (details/summary) – cleaner */
.crm-accordion{ border-radius: 14px; overflow: hidden; }
.crm-accordion-summary{
  list-style:none;
  cursor:pointer;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  background: transparent;
}
.crm-accordion-summary::-webkit-details-marker{ display:none; }
.crm-accordion-icon{ opacity:.65; font-size:14px; }
details[open] .crm-accordion-icon{ transform: rotate(180deg); }

/* Datagrid tweaks */
.crm-table{ width:100%; }
.crm-table th{ white-space:nowrap; }
.crm-table td{ white-space:nowrap; position:relative; }

.cell-primary{ font-weight:650; color:#0f172a; }
.cell-secondary{ margin-top:2px; font-size:12px; color: var(--text-muted); }

.table-row-link{ cursor:pointer; }
.table-cell-actions{ width:56px; text-align:right; }

/* Small, Apple-like icon action */
.btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  color:#0f172a;
  text-decoration:none;
  box-shadow:none;
  transition: background .14s, box-shadow .14s, transform .08s;
}
.btn-icon:hover{ background:#f8fafc; box-shadow:none; transform:none; }
.btn-icon:active{ transform:none; }

/* Inline action group */
.actions-inline{ display:flex; gap:6px; justify-content:flex-end; align-items:center; }
.table-cell-actions{ width:86px; text-align:right; }
.table-cell-actions form{ display:inline; }

/* Bulk bar – calmer */
.crm-bulkbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  padding-top:10px;
  border-top: 1px solid rgba(226,232,240,.8);
}
.crm-bulkbar .text-muted{ font-size:12px; }

/* Right-aligned numeric cells */
.text-right{ text-align:right; }


/* ============================================================
   Buttons (single source of truth)
   ============================================================ */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 14px; border-radius:999px;
  font-size:13px; font-weight:600; line-height:1;
  border:1px solid rgba(0,0,0,.08); background:#fff; color:#111827;
  /* Buttons should feel flat/clean (no heavy drop-shadows) */
  box-shadow:none;
  cursor:pointer; text-decoration:none;
  transition: background .16s, color .16s, box-shadow .16s, transform .08s, border-color .16s;
}
.btn:hover{ transform:none; box-shadow:none; }
.btn:active{ transform:translateY(0); }
.btn[disabled], .btn:disabled{ opacity:.5; cursor:default; box-shadow:none; transform:none; }

/* Sizes */
.btn-sm{ height:30px; padding:0 10px; font-size:12px; }

/* Variants */
.btn-primary{
  background: var(--primary, #4284ff); color:#fff; border-color:transparent;
  box-shadow:none;
}
.btn-primary:hover{ filter:brightness(.95); }

.btn-secondary{
  background:#0f172a; color:#e5e7eb; border-color:#1f2937;
  box-shadow:none;
}
.btn-secondary:hover{ background:#020617; border-color:#020617; transform:none; }

.btn-light{
  background:#fff; color:#0f172a; border-color:rgba(209,213,219,.9);
}
.btn-light:hover{
  background:rgba(249,250,251,.95); border-color:rgba(148,163,184,.9);
  box-shadow:none; transform:none;
}

.btn-outline{
  background:transparent; color:var(--primary); border-color:var(--primary);
}
.btn-outline:hover{ background:rgba(16,179,163,.08); box-shadow:none; transform:none; }

.btn-ghost{
  background:#f8fafc; color:#111827; border-color:rgba(0,0,0,.06);
}
.btn-ghost:hover{ background:#eef2f7; }

/* Header acties naast elkaar */
.page-header-actions{
  display:flex; align-items:center; gap:12px; flex-wrap:nowrap; white-space:nowrap;
}
.page-header-actions .btn{ width:auto; flex:0 0 auto; }

/* ============================================================
   Badges
   ============================================================ */

.badge{
  display:inline-flex; align-items:center; border-radius:999px;
  padding:2px 8px; font-size:11px; font-weight:500;
}
.badge-soft{ background:rgba(148,163,184,.15); color:#4b5563; }
.badge-primary{
  background: color-mix(in srgb, var(--primary) 14%, #ffffff);
  color: color-mix(in srgb, var(--primary) 75%, #0b1220);
}
.badge-success{ background:rgba(22,163,74,.10); color:#166534; }
.badge.bg-secondary{ background:rgba(148,163,184,.2); color:#111827; }

/* ============================================================
   Forms
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
select,
textarea{
  font-family:inherit; font-size:13px; border-radius:12px;
  border:1px solid var(--border-subtle);
  padding:10px 12px;
  background:#fff; color:var(--text-main);
  transition: border-color .16s, box-shadow .16s, background-color .16s; width:100%;
}
textarea{ min-height:80px; }

input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--primary);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent),
    0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent);
  background:#fff;
}

label{ font-size:12px; font-weight:500; color:#0d0d0d; margin-bottom:4px; display:block; }
.form-group{ margin-bottom:10px; }

.form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px 18px;
}

/* ------------------------------------------------------------
   Apple-clean form layout helpers (used in o.a. projecten/create)
   ------------------------------------------------------------ */
.form-row{ display:flex; flex-direction:column; gap:4px; }

/* Helptext/paragraph in a grid should span full width */
.form-grid > p,
.form-grid > .span-all{ grid-column:1 / -1; }

/* Two column groups inside forms (dates/budget blocks) */
.form-row.grid-2col{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px 18px;
  align-items:start;
}

/* Error state */
.has-error input,
.has-error select,
.has-error textarea{
  border-color: #dc2626;
}
.form-error{
  color:#b91c1c;
  font-size:12px;
  margin-top:2px;
}

/* A tiny help text style */
.form-help{ color: var(--text-muted); font-size:12px; margin: -2px 0 6px; }
.form-section-title{
  font-size:13px;
  font-weight:600;
  color:#6b7280;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:6px;
}
.form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:12px;
}

/* In grid forms, actions should span full width and align right (Apple-like) */
.form-grid .form-actions{ grid-column:1 / -1; justify-content:flex-end; margin-top:4px; }

/* Form actions binnen tab-panels/card-forms mogen iets naar links uitlijnen */
.tab-panel .form-actions{
  padding-left:4px;
}

/* ============================================================
   Account page (mijn-account) layout polish
   ============================================================ */

.account-page{ max-width:1200px; margin:0 auto; }

.account-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr);
  gap:16px;
  align-items:start;
}

.account-form{ display:grid; gap:12px; }

.account-row{ display:grid; gap:12px; }
.account-row--2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.account-row--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.account-row--name{ grid-template-columns:1.2fr .8fr 1.2fr; }
.account-row--street{ grid-template-columns:2fr .7fr; }
.account-row--funckleur{ grid-template-columns:2fr 1fr; }

.account-card-head h2{ margin:0; font-size:15px; font-weight:600; }

.account-avatar{
  width:40px; height:40px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:#fff;
}

.account-color-row{ display:flex; align-items:center; gap:8px; }
.account-color-input{
  width:44px; height:32px; padding:0;
  border-radius:6px; border:1px solid rgba(15,23,42,.12);
  background:#fff;
}
.account-hex-input{ flex:1 1 auto; }
.account-help{ display:block; margin-top:4px; color:#6b7280; font-size:11px; }

.form-actions--end{ justify-content:flex-end; }

@media (max-width:1100px){
  .account-grid{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .account-row--2,
  .account-row--3,
  .account-row--name,
  .account-row--street,
  .account-row--funckleur{ grid-template-columns:1fr; }
}
.text-xs{
  font-size:12px;
}
.muted{
  color:var(--text-muted);
}


/* ============================================================
   Flash messages
   ============================================================ */

.flash{
  border-radius:var(--radius-md); padding:8px 10px; margin-bottom:12px; font-size:13px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.flash-success{ background:rgba(22,163,74,.07); border:1px solid rgba(22,163,74,.3); color:#166534; }
.flash-error{ background:rgba(220,38,38,.06); border:1px solid rgba(220,38,38,.3); color:#b91c1c; }

/* ============================================================
   Dashboard widgets
   ============================================================ */

.dashboard-widgets .card{ position:relative; }
.widget-actions{ display:inline-flex; align-items:center; gap:4px; }
.widget-toggle{
  border:none; background:transparent; cursor:pointer; font-size:13px; line-height:1; padding:2px 4px;
  color:var(--text-soft); border-radius:999px; transition: background .12s, color .12s, transform .08s;
}
.widget-toggle:hover{ background:rgba(148,163,184,.15); color:#111827; transform:translateY(-1px); }
.widget-drag-handle{
  cursor:grab; padding:2px 4px; border-radius:999px; font-size:13px; color:var(--text-soft);
  user-select:none; transition: background .12s, color .12s;
}
.widget-drag-handle:hover{ background:rgba(148,163,184,.12); color:#111827; }
.js-widget.is-dragging{ opacity:.75; box-shadow:0 16px 34px rgba(15,23,42,.28); }
.js-widget-column.is-drag-over{ outline:2px dashed rgba(148,163,184,.6); outline-offset:3px; border-radius:var(--radius-lg); }
.widget-hidden{ display:none !important; }

/* ============================================================
   Dashboard widgets manager (slide-over)
   ============================================================ */

.dashboard-widgets-manager{ position:fixed; inset:0; background:rgba(15,23,42,.25); display:none; z-index:40; }
.dashboard-widgets-manager.open{ display:block; }
.dashboard-widgets-manager__inner{
  position:absolute; top:0; right:0; width:320px; max-width:100%; height:100%;
  background:#fff; box-shadow:-12px 0 30px rgba(15,23,42,.18);
  padding:1.5rem 1.4rem; display:flex; flex-direction:column;
}
.dashboard-widgets-manager__header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.dashboard-widgets-manager__close{ border:none; background:transparent; font-size:1.4rem; cursor:pointer; color:#6b7280; }
.dashboard-widgets-manager__close:hover{ color:#111827; }
.dashboard-widgets-manager__intro,.dashboard-widgets-manager__hint{ font-size:13px; color:#6b7280; margin-bottom:.5rem; }
.dashboard-widgets-manager__list{ list-style:none; margin:0; padding:0; flex:1 1 auto; overflow:auto; }
.dashboard-widgets-manager__list li{ padding:.25rem 0; }
.dashboard-widgets-manager__list label{ display:flex; align-items:center; gap:.5rem; font-size:14px; }
.dashboard-widgets-manager__list input[type="checkbox"]{ width:14px; height:14px; }

/* ============================================================
   Sidebar compact mode
   ============================================================ */

.app-shell.is-sidebar-collapsed{ grid-template-columns:74px minmax(0,1fr); }
.app-shell.is-sidebar-collapsed .app-sidebar{ padding:14px 10px; }
.app-shell.is-sidebar-collapsed .app-sidebar-header{ justify-content:center; }
.app-shell.is-sidebar-collapsed .app-nav .nav-item{ justify-content:center; padding:.55rem .4rem; }
.app-shell.is-sidebar-collapsed .app-nav .nav-item span:not(.nav-ico):not(.caret){ display:none; }
.app-shell.is-sidebar-collapsed .app-nav .nav-item .caret{ display:none; }
.app-shell.is-sidebar-collapsed .nav-section{ display:none; }
.app-shell.is-sidebar-collapsed .nav-sub{ display:none !important; }
.app-shell.is-sidebar-collapsed .app-nav .nav-item .nav-ico{ margin:0; }
.app-shell.is-sidebar-collapsed .sidebar-toggle-icon{ transform:rotate(180deg); }

/* ============================================================
   Tabs (pills) + Relatiepagina polish
   ============================================================ */

:root{
  --tab-gap: 8px; --tab-font: 13px; --tab-pad-y: 8px; --tab-pad-x: 12px;
  --c-tab-bg:#f6f8fb; --c-tab-bg-hover:#eef3f9; --c-tab-border:#e6eaef; --c-tab-border-h:#d9e2ec; --c-tab-text:#2a2f3a;
  /* Accent kleur */
  --c-active:#4284ff;
  --shadow-active:0 4px 14px rgba(8,106,181,.18);
  --focus-ring:0 0 0 3px rgba(8,106,181,.18);
}

.tabs{ margin-top:12px; }
.tabs-nav{ display:flex; flex-wrap:wrap; gap:var(--tab-gap); margin-bottom:12px; }

/* Buttons in tabnavigatie: ondersteunt data-tab, data-tab-target én .tab-pill */
.tabs-nav [data-tab],
.tabs-nav [data-tab-target],
.tabs-nav .tab-pill{
  appearance:none; border:1px solid var(--c-tab-border); background:var(--c-tab-bg); color:var(--c-tab-text);
  padding:var(--tab-pad-y) var(--tab-pad-x); border-radius:999px; font-size:var(--tab-font); line-height:1; cursor:pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s, transform .04s;
}
.tabs-nav [data-tab]:hover,
.tabs-nav [data-tab-target]:hover,
.tabs-nav .tab-pill:hover{
  background:var(--c-tab-bg-hover); border-color:var(--c-tab-border-h);
}
.tabs-nav [data-tab]:active,
.tabs-nav [data-tab-target]:active,
.tabs-nav .tab-pill:active{
  transform:translateY(1px);
}
.tabs-nav [data-tab]:focus-visible,
.tabs-nav [data-tab-target]:focus-visible,
.tabs-nav .tab-pill:focus-visible{
  outline:none; box-shadow:var(--focus-ring); border-color:var(--c-active);
}
.tabs-nav [data-tab].is-active,
.tabs-nav [data-tab-target].is-active,
.tabs-nav .tab-pill.is-active{
  background:var(--c-active); border-color:var(--c-active); color:#fff; box-shadow:var(--shadow-active);
}
.tabs-nav [data-tab][disabled],
.tabs-nav [data-tab-target][disabled],
.tabs-nav .tab-pill[disabled]{
  opacity:.6; cursor:not-allowed;
}

.tabs.tabs--compact .tabs-nav [data-tab],
.tabs.tabs--compact .tabs-nav [data-tab-target],
.tabs.tabs--compact .tabs-nav .tab-pill{
  padding:6px 10px; font-size:12px;
}

/* Panels */
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }

/* Relaties > Portaal tab: houd het formulier luchtig en breed */
.portal-form{ max-width: 100%; }

/* In dit formulier willen we géén CSS-grid (form-grid), maar volle-breedte rijen */
.portal-form .portal-row{
  width:100%;
  margin:0;              /* override .row negatieve gutters */
  gap:14px;
}
.portal-form .portal-row > [class^="col-"]{
  padding:0;             /* we gebruiken gap i.p.v. gutters */
}
.portal-form label{ min-width:0; }

.portal-form .checkbox-inline{ display:flex; align-items:center; gap:8px; }

@media (max-width: 900px){
  .portal-form .portal-row > .col-8,
  .portal-form .portal-row > .col-4{
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Dark theme tabs */
:root[data-theme="dark"] .tabs-nav [data-tab],
:root[data-theme="dark"] .tabs-nav [data-tab-target],
:root[data-theme="dark"] .tabs-nav .tab-pill{
  background:#111827; border-color:#1f2937; color:#e5e7eb;
}
:root[data-theme="dark"] .tabs-nav [data-tab]:hover,
:root[data-theme="dark"] .tabs-nav [data-tab-target]:hover,
:root[data-theme="dark"] .tabs-nav .tab-pill:hover{
  background:#0f172a; border-color:#334155;
}
:root[data-theme="dark"] .tabs-nav [data-tab].is-active,
:root[data-theme="dark"] .tabs-nav [data-tab-target].is-active,
:root[data-theme="dark"] .tabs-nav .tab-pill.is-active{
  background:var(--c-active); border-color:var(--c-active); color:#fff;
}

/* Extra pagina header alignment + relaties search */
.relaties-search{ display:flex; align-items:center; gap:8px; flex:0 1 auto; }
.relaties-search input[type="text"]{ width:260px; max-width:260px; }
@media (max-width:680px){
  .page-header-actions{ flex-wrap:wrap; white-space:normal; gap:8px; }
  .relaties-search input[type="text"]{ width:100%; max-width:100%; }
}

/* Sidebar submenu helpers (legacy; styling staat bovenaan bij App Shell / Sidebar) */
.app-sidebar .nav-sub.collapse{ display:none; }
.app-sidebar .nav-sub.collapse.show{ display:block; }

/* ============================================================
   Helpers
   ============================================================ */

.text-muted{ color:var(--text-muted); }
.text-soft{ color:var(--text-soft); }
.text-right{ text-align:right; }
.mt-1{ margin-top:4px; } .mt-2{ margin-top:8px; } .mt-3{ margin-top:12px; }
.mb-0{ margin-bottom:0; } .mb-1{ margin-bottom:4px; } .mb-2{ margin-bottom:8px; }

/* Sidebar icon ring (extra accent) */
.sidebar-nav a .icon-circle{
  width:30px; height:30px; border-radius:999px; border:1px solid rgba(255,255,255,.7);
  display:inline-flex; align-items:center; justify-content:center; margin-right:10px;
  background: radial-gradient(circle at 30% 0, rgba(255,255,255,.06), transparent 55%);
}
.sidebar-nav a .icon-circle svg,
.sidebar-nav a .icon-circle i{ color:rgba(255,255,255,.9); }

/* Narrow pages (login e.d.) */
.page-narrow{ max-width:420px; margin:0 auto; }


/* ====== Kleding – item selectie modal ====== */

.item-modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  z-index: 400;
}

.item-modal-backdrop[hidden] {
  display: none !important;
}

.item-modal {
  width: min(960px, 96vw);
  max-height: 90vh;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.35);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
}

.item-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}

.item-modal-head h3 {
  margin: 0;
  font-size: 16px;
}

.item-modal-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 12px 18px 4px 18px;
  overflow: hidden;
}

.item-modal-body .table-wrapper {
  max-height: 420px;
}

.table-compact th,
.table-compact td {
  padding: 6px 8px;
  font-size: 13px;
}

@media (max-width: 640px) {
  .item-modal {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
}

body.modal-open {
  overflow: hidden;
}

.regels-layout {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: flex-start;
}

@media (max-width: 960px) {
    .regels-layout {
        grid-template-columns: 1fr;
    }
}

.card-regels {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
}

.card-regels h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.regel-mode-toggle {
    display: inline-flex;
    border-radius: 999px;
    padding: 2px;
    background: #f3f4f6;
    margin-bottom: 1rem;
}

.regel-mode-toggle button {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    cursor: pointer;
}

.regel-mode-toggle button.is-active {
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.regel-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 640px) {
    .regel-form-row {
        grid-template-columns: 1fr;
    }
}

.regel-table-wrapper {
    margin-top: 1.75rem;
}

.regel-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1rem;
    flex-wrap: wrap;
}



/* === CRM UI enhancements: sticky actions, empty states, table density === */

.form-actions-sticky{
  position:sticky;
  bottom:0;
  background:var(--bg-surface);
  padding:12px 16px;
  margin:0 -16px -16px;
  box-shadow:0 -4px 12px rgba(15,23,42,.04);
  z-index:20;
}

.table-toolbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  font-size:12px;
  color:#6b7280;
}

.table-toolbar-label{
  font-weight:500;
}

.table--compact tbody tr{
  height:32px;
}

.table--compact td,
.table--compact th{
  padding-top:6px;
  padding-bottom:6px;
  font-size:13px;
}

.table-empty .empty-state{
  padding:24px 0;
  text-align:center;
}

.empty-title{
  font-weight:600;
  margin-bottom:4px;
}

.empty-subtitle{
  margin:0 0 12px;
  color:#6b7280;
  font-size:14px;
}

.empty-actions{
  display:inline-flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}


/* ============================================================
   Mobile tweaks
   ============================================================ */

@media (max-width: 768px){
  .app-content{
    padding:12px 10px 18px;
  }

  .page-header{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .page-header-actions{
    width:100%;
    flex-wrap:wrap;
    justify-content:flex-start;
    white-space:normal;
    row-gap:8px;
  }

  .card{
    border-radius:14px;
    padding:12px 12px 10px;
  }

  .card-header{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }

  .card-header-actions{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
    row-gap:8px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .table-wrapper{
    margin:0 -10px;
    padding:0 10px 6px;
    border-left:none;
    border-right:none;
    border-radius:0;
  }

  table th,
  table td{
    padding:8px 8px;
  }

  .page-title{
    font-size:20px;
  }

  .page-subtitle{
    font-size:12px;
  }

  .btn{
    font-size:12px;
    padding:6px 10px;
  }
}

@media (max-width: 480px){
  .app-topbar{
    padding:8px 10px;
  }

  .app-logo a{
    font-size:16px;
  }

  .app-nav{
    gap:4px;
  }

  .app-nav .nav-item{
    padding:4px 6px;
  }

  .app-content{
    padding:10px 8px 16px;
  }
}


/* ============================================================
   Mobile tuning v2 (topbar, sidebar, dashboard widgets)
   ============================================================ */

@media (max-width: 768px){
  .app-topbar{
    padding:8px 10px;
    flex-wrap:wrap;
    row-gap:8px;
    align-items:flex-start;
  }

  .app-topbar-left{
    order:2;
    width:100%;
    font-size:12px;
  }

  .app-topbar-center{
    order:3;
    width:100%;
  }

  .app-topbar-right{
    order:1;
    margin-left:auto;
  }

  .user-name,
  .user-role{
    display:none;
  }

  .topbar-search input{
    width:100%;
  }

  .app-shell{
    grid-template-columns:72px minmax(0,1fr);
  }

  .app-sidebar{
    padding:12px 8px;
  }

  /* Kerncijfers widget: 2 kolommen */
  .card[data-widget-id="kpi_stats"] .card-body .row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
  }

  .card[data-widget-id="kpi_stats"] .card-body .row .col-6{
    flex:0 0 calc(50% - 6px);
  }

  /* Snelle acties: grid */
  .card[data-widget-id="quick_actions"] .card-body > div{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:8px;
  }

  .card[data-widget-id="quick_actions"] .card-body .btn{
    width:100%;
    justify-content:center;
  }
}

@media (max-width: 480px){
  .card[data-widget-id="quick_actions"] .card-body > div{
    grid-template-columns:1fr;
  }

  .app-topbar{
    padding:8px 8px;
  }

  .app-content{
    padding:10px 8px 16px;
  }
}


/* ============================================================
   Top navigation on mobile (overrides)
   ============================================================ */

@media (max-width: 768px){
  .app-shell{
    grid-template-columns: minmax(0, 1fr);
  }

  .app-sidebar{
    display: none;
  }

  .app-topnav-main{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px 6px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-bottom:1px solid var(--border-subtle);
    background:#f9fafb;
  }

  .topnav-item{
    flex:0 0 auto;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    text-decoration:none;
    color:#4b5563;
    background:#fff;
    border:1px solid rgba(148,163,184,.4);
    white-space:nowrap;
  }

  .topnav-item:hover{
    background:#eef2ff;
  }

  .topnav-item.active{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
    box-shadow:0 4px 10px rgba(15,23,42,.18);
  }
}

/* Hide mobile top nav on desktop */
@media (min-width: 769px){
  .app-topnav-main{
    display:none;
  }
}


/* === Cross-browser nav icon + topbar search button tweaks === */

.app-nav .nav-item .nav-ico svg{
  width:18px;
  height:18px;
  display:block;
}

.app-nav .nav-item .nav-ico svg *,
.app-nav .nav-item .nav-ico i{
  stroke:currentColor;
}

/* topbar search button */
.topbar-search{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
}

.topbar-search input{
  flex:1 1 auto;
  padding-right:34px; /* ruimte voor icon button */
}

.topbar-search-btn{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  cursor:pointer;
  color:#6b7280;
}

.topbar-search-btn svg{
  width:16px;
  height:16px;
}

/* op hover/dark bg */
.topbar-search-btn:hover{
  color:var(--primary);
}

/* topbar live suggest */
.topbar-suggest{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  box-shadow:0 18px 45px rgba(15,23,42,.12);
  overflow:hidden;
  z-index:60;
}

.topbar-suggest .suggest-empty{
  padding:12px 14px;
  font-size:13px;
  color:#6b7280;
}

.topbar-suggest-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  text-decoration:none;
  color:#0f172a;
  border-top:1px solid rgba(15,23,42,.06);
}

.topbar-suggest-item:first-child{ border-top:none; }

.topbar-suggest-item:hover,
.topbar-suggest-item.is-active{
  background:rgba(34,197,94,.08);
}

.topbar-suggest-main{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.topbar-suggest-title{
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.topbar-suggest-sub{
  font-size:12px;
  color:#6b7280;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.topbar-suggest-badge{
  flex:0 0 auto;
  font-size:11px;
  font-weight:600;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(2,132,199,.12);
  color:#0f172a;
}


/* ===========================
   Zoeken
   =========================== */

.search-list{
  margin:0;
  padding:0;
  list-style:none;
}

.search-item + .search-item{
  margin-top:6px;
}

.search-link{
  display:block;
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
  border:1px solid transparent;
}

.search-link:hover{
  background:#f3f4f6;
  border-color:#e5e7eb;
}

.search-title{
  font-weight:500;
  font-size:14px;
  color:#111827;
}

.search-meta{
  font-size:12px;
  color:#6b7280;
}


/* ===== Zoekpagina componenten ===== */
.search-list{
  list-style:none;
  margin:0;
  padding:0;
}
.search-item + .search-item{
  margin-top:6px;
}
.search-link{
  display:block;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.04);
  background:rgba(255,255,255,.9);
  text-decoration:none;
  color:#0f172a;
}
.search-link:hover{
  border-color:rgba(16,185,129,.5);
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
.search-title{
  font-weight:600;
  margin-bottom:2px;
}
.search-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:12px;
  color:#6b7280;
}
.badge.badge-soft{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:2px 8px;
  background:rgba(15,23,42,.04);
  font-size:11px;
}


/* ================================================
   Zoekpagina
   ================================================ */
.search-layout{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
}

.search-card .card-body{
  padding-top:8px;
}

.search-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.search-item{
  border-radius:999px;
  background:rgba(15,23,42,0.02);
  transition:background .15s ease, transform .12s ease, box-shadow .15s ease;
}

.search-link{
  display:flex;
  flex-direction:column;
  padding:8px 12px;
  text-decoration:none;
  color:inherit;
}

.search-title{
  font-weight:500;
  font-size:14px;
  margin-bottom:2px;
}

.search-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:12px;
  color:#6b7280;
}

.search-item:hover{
  background:#ffffff;
  box-shadow:0 10px 30px rgba(15,23,42,0.08);
  transform:translateY(-1px);
}

.search-empty{
  font-size:13px;
  color:#6b7280;
}

/* zachte badge */
.badge.badge-soft{
  background:rgba(16,185,129,0.08);
  color:#047857;
  border-radius:999px;
  padding:2px 8px;
  font-size:11px;
}

/* Mobile */
@media (max-width: 768px){
  .search-layout{
    grid-template-columns:1fr;
  }

  .search-link{
    padding:10px 12px;
  }
}


/* ============================================================
   Sidebar branding + toggle arrow
   ============================================================ */
.app-sidebar-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
 .app-logo{ padding:0; margin:0; }
 .app-logo a:hover{ text-decoration:none; }

.app-logo .logo-link{ display:flex; align-items:center; gap:10px; }
.app-logo .logo-img{ height:28px; width:auto; display:block; }

.sidebar-toggle{
  width:34px; height:34px; border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.85);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition: background .15s, transform .08s, border-color .15s;
}
.sidebar-toggle:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.16); }
.sidebar-toggle:active{ transform:translateY(1px); }
.sidebar-toggle-icon{ width:18px; height:18px; display:block; transition:transform .18s ease; }

/* Compact mode: verberg logo, toon alleen het pijltje */
.app-shell.is-sidebar-collapsed .app-logo{ display:none; }


/* ============================================================
   Relaties: Notities
   ============================================================ */
.notes-compose{ border:1px solid rgba(0,0,0,.06); background:#fff; border-radius:16px; padding:12px; }
.notes-compose-row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:10px; }
.notes-compose .notes-field{ display:flex; flex-direction:column; gap:6px; }
.notes-compose .notes-pin{ min-width:160px; }
.notes-compose-actions{ display:flex; justify-content:flex-end; margin-top:10px; }

.notes-toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:12px 0; }
.notes-search{ flex:1 1 260px; }
.notes-filter{ width:180px; }
.notes-only-pinned{ display:flex; align-items:center; gap:8px; padding:0 10px; height:36px; border:1px solid rgba(0,0,0,.08); border-radius:999px; background:#fff; }

.notes-list{ margin-top:10px; border-top:1px solid #edf0f3; }
.note-item{ padding:12px 0; border-bottom:1px solid #edf0f3; }
.note-head{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.note-meta{ font-size:11px; }
.note-body{ margin-top:8px; line-height:1.5; }
.note-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.note-edit{ margin-top:10px; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:12px; background:#f8fafc; }
.note-edit-row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.note-edit-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:10px; }

.notes-log{ margin-top:14px; }
.notes-log summary{ font-size:12px; cursor:pointer; }
.notes-log-body{ max-height:220px; overflow:auto; margin-top:8px; font-size:12px; }
.notes-log-item{ padding:6px 0; border-bottom:1px dashed #e5e7eb; }


.inline{ display:inline; }


/* === Project pagina: top tabs + 2-koloms layout (UI refresh) === */
.project-topnav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 0 0 0;
  margin:10px 0 14px 0;
  border-bottom:1px solid #e5e7eb;
}
.project-topnav a{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  font-size:13px;
  color:#6b7280;
}
.project-topnav a:hover{ background:#f3f4f6; color:#111827; }
.project-topnav a.is-active{
  color:#111827;
  border-bottom:3px solid var(--primary, #10b981);
  border-radius:10px 10px 0 0;
}

#overview.row{ display:flex; gap:18px; align-items:flex-start; }
#overview > div:first-child{ flex:1 1 auto; min-width:0; }
#overview > div:last-child{ width:320px; flex:0 0 320px; }
@media (max-width: 980px){
  #overview.row{ flex-direction:column; }
  #overview > div:last-child{ width:100%; flex:1 1 auto; position:static; }
}

/* maak sidebar sticky en rustiger */
#overview > div:last-child{ position:sticky; top:12px; }
#overview > div:last-child .card-head h2{ font-size:14px; margin:0; }
#overview > div:last-child .card-body{ font-size:13px; line-height:1.45; }

/* financieel als KPI-rijen */
.kpi-list{ display:flex; flex-direction:column; gap:6px; }
.kpi-row{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed #e5e7eb; }
.kpi-row:last-child{ border-bottom:none; }
.kpi-row .kpi-label{ color:#6b7280; }
.kpi-row .kpi-value{ font-weight:700; }

/* =========================================================
   Apple-clean CRM: sticky filter cards + ellipsis row menu
   ========================================================= */

/* Sticky filter card (gebruik op de filter-sectie boven een tabel) */
.crm-sticky{
  position: sticky;
  top: 12px;
  z-index: 30;
}

/* Subtiele “glass” look zodat het op wit blijft maar loskomt van de content */
.crm-sticky.card--flat{
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Rij-klik */
.table-row-link{ cursor: pointer; }
.table-row-link a{ text-decoration: none; }
tr.table-row-link:hover > td{ background: rgba(0,0,0,.03); }



/* Inline action icons (tables) */
.inline-actions{ display:flex; gap:10px; justify-content:flex-end; align-items:center; }
.inline-actions .icon-btn{ width:34px; height:34px; border-radius:12px; }
.icon-btn-danger svg{ color:#B42318; opacity:.85; }
.icon-btn-danger:hover{ background: rgba(180,35,24,.08); }
/* Ellipsis menu */
.row-actions{ position: relative; display: inline-flex; justify-content: flex-end; }
.row-actions .btn-icon{ width: 34px; height: 34px; border-radius: 12px; }

/* <details>-based action menu (no JS required) */
.row-actions-dd{ position: relative; display: inline-flex; justify-content: flex-end; }
.row-actions-dd > summary.btn-icon{ cursor: pointer; }
.row-actions-dd > summary{ list-style: none; }
.row-actions-dd > summary::-webkit-details-marker{ display: none; }
.row-actions-dd .row-menu{ display: block; }
.row-actions-dd:not([open]) .row-menu{ display: none; }
.row-actions-dd .row-menu{ position: absolute; right: 0; top: calc(100% + 8px); z-index: 10000; min-width: 190px; }
.crm-table td.actions-cell{ overflow: visible; }

/* Ensure row action dropdowns are never clipped */
.crm-table td:last-child{overflow: visible;}
.crm-table td.col-actions, .crm-table td.row-actions-cell{overflow: visible;}
.row-menu--floating{z-index: 99999;}

.row-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 190px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
  padding: 6px;
  z-index: 50;
}

/* When the row menu is portalled to <body>, force it above scroll containers */
.row-menu.row-menu--floating{
  position: fixed !important;
  z-index: 10000 !important;
}

/* Portal container id (extra safety) */
#rowmenu-portal{
  max-width: 320px;
}

.row-menu a,
.row-menu button{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  text-decoration: none;
  color: #0B1220;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.row-menu a:hover,
.row-menu button:hover{ background: #F3F4F6; }

.row-menu .danger{ color: #B42318; }
.row-menu .danger:hover{ background: rgba(180,35,24,.08); }

/* Ensure table dropdowns are not clipped */
.crm-table td.actions-cell{ overflow: visible; }

/* Taken pagina – compacter & overzichtelijker */
@media (max-width: 1100px){
  .tasks-top-grid{ grid-template-columns: 1fr !important; }
}

@media (max-width: 700px){
  .tasks-create{ grid-template-columns: 1fr !important; }
  .tasks-create > div{ grid-column: auto !important; }
}


/* Ensure row action menus can overflow table cells */
.crm-table td.actions-cell,
.crm-table td.col-actions,
.crm-table td:last-child{ overflow: visible; }



/* ============================================================
   Header notifications (belletje)
   ============================================================ */
.notif-badge{
  position:absolute;
  top:-6px; right:-6px;
  min-width:18px; height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:11px;
  line-height:18px;
  display:flex;
  align-items:center;
  justify-content:center;FL
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
#notif-menu .icon-btn{ position:relative; }

.header-dropdown-notif{ width:340px; }
.header-dropdown-notif .notif-item{
  display:block;
  padding:10px 12px;
  text-decoration:none;
  color:inherit;
  border-radius:12px;
  margin:6px;
  border:1px solid rgba(0,0,0,.06);
}
.header-dropdown-notif .notif-item.unread{
  background: color-mix(in srgb, var(--primary) 10%, #ffffff);
  border-color: color-mix(in srgb, var(--primary) 20%, rgba(0,0,0,.06));
}
.header-dropdown-notif .notif-msg{ font-size:13px; font-weight:600; }
.header-dropdown-notif .notif-time{ font-size:12px; opacity:.65; margin-top:3px; }

.link-btn{
  background:none;
  border:none;
  padding:0;
  color: #0a84ff;
  cursor:pointer;
  font-weight:600;
}
.link-btn:hover{ text-decoration:underline; }


/* Notifications page */
.notification-list{ display:flex; flex-direction:column; gap:10px; }
.notification-item{
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:12px;
  background:#fff;
}
.notification-item.unread{
  background: color-mix(in srgb, var(--primary) 8%, #ffffff);
  border-color: color-mix(in srgb, var(--primary) 25%, rgba(0,0,0,.06));
}
.notification-item:hover{ background: rgba(0,0,0,.02); }
.notification-row{ display:flex; gap:14px; justify-content:space-between; align-items:flex-start; }
.notification-title{ font-weight:700; display:flex; align-items:center; gap:10px; }
.notification-body{ margin-top:4px; opacity:.85; }
.notification-time{ font-size:12px; opacity:.65; white-space:nowrap; }


/* Contactpersoon form: disable auto grid so rows/cols determine widths */
.contactpersoon-form{ display:block; width:100%; }

/* Calmer spacing/labels for contactpersoon forms */
.contactpersoon-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
  font-weight:500;
  color:#111827;
}

.contactpersoon-form .row{ row-gap:14px; }

/* Make textarea match the CRM input look & feel (but keep comfy radius) */
.contactpersoon-form textarea,
.contactpersoon-form .crm-textarea{
  width:100%;
  border-radius:14px;
  background: linear-gradient(to right, #f9fafb, #fff);
  border:1px solid rgba(209,213,219,.9);
  padding:10px 12px;
  font-size:13px;
  box-sizing:border-box;
}


/* CRM input force styling (used for email/tel fields that may be overridden elsewhere) */
input.crm-input{
  width:100%;
  border-radius:999px;
  border:1px solid rgba(209,213,219,.9);
  padding:7px 12px;
  font-size:13px;
  background: linear-gradient(to right, #f9fafb, #fff);
  transition: border-color .16s, box-shadow .16s, background-color .16s;
  box-sizing:border-box;
}


/* Simple link style used in tables */
a.link{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
a.link:hover{ opacity:.85; }


/* Dashboard: 'Widgets beheren' button color */
#btn-manage-widgets{
  background:#4284ff;
  border:1px solid rgba(66,132,255,.45);
  color:#fff;
}
#btn-manage-widgets:hover{ filter:brightness(.97); }
#btn-manage-widgets:active{ filter:brightness(.94); }


/* Inline action icons (ensure horizontal alignment) */
.task-actions-inline{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
}
.task-actions-inline form{ margin:0; display:inline-flex; }

/* =========================================================
   Relaties – Portaal tab polish
   ========================================================= */
.portal-actions{
  display:flex;
  justify-content:flex-end; /* button right */
}
.portal-help{
  display:block;
  font-size:12px;
  margin-top:2px;
}

/* =========================================================
   Relaties – Taken empty state
   ========================================================= */
.empty-state{
  border:1px dashed var(--border, #e6e8ee);
  border-radius:14px;
  padding:14px;
  background: rgba(255,255,255,0.6);
}
.empty-state-title{
  font-weight:700;
  margin-bottom:4px;
}
.empty-state-text{
  color: var(--muted, #6b7280);
  font-size:13px;
  margin-bottom:10px;
}
.empty-state-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* =========================================================
   Relaties – Activiteit filters
   ========================================================= */
.activity-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.filter-pill{
  border:1px solid var(--border, #e6e8ee);
  background: transparent;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
}
.filter-pill.is-active{
  background: var(--primary, #2f6fed);
  color:#fff;
  border-color: transparent;
}