/* T.A.R. - The Auditors of Reality */
/* Huisstijl volgens het Claude Design-systeem "TAR" — olijf · oker · oranje */

/* ---- Fonts (self-hosted, geen externe CDN — zie CLAUDE.md) --------------- */
@font-face {
	font-family: 'Baloo 2';
	font-style: normal;
	font-weight: 500 800;
	font-display: swap;
	src: url('/assets/fonts/baloo2/baloo2-latin-variable.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('/assets/fonts/inter/inter-latin-variable.woff2') format('woff2');
}

/* ---- 1. Design tokens ----------------------------------------------------- */
:root {
	/* Kernkleuren uit de huisstijl */
	--tar-olive: #C6B239;   /* chartreuse-olijf · merkaccent, focus-ring */
	--tar-orange:#F27431;   /* oranje · energie / warning */
	--tar-deep:  #655B24;   /* diep olijf · primair / links / knoppen */
	--tar-pink:  #F8DAD8;   /* zacht roze · accent */
	--tar-mist:  #E4E8EB;   /* mist · koel neutraal */

	/* Olijf-schaal */
	--tar-olive-50:#F9F7EB; --tar-olive-100:#F4F0D7; --tar-olive-200:#E9E2B4;
	--tar-olive-300:#DDD188; --tar-olive-400:#D0C05D; --tar-olive-500:#C6B239;
	--tar-olive-600:#A69530; --tar-olive-700:#867827; --tar-olive-800:#665C1D; --tar-olive-900:#4E4516;
	/* Oranje-schaal */
	--tar-orange-50:#FEF1EA; --tar-orange-100:#FCE3D6; --tar-orange-200:#FACAB1;
	--tar-orange-300:#F7AC83; --tar-orange-400:#F48D56; --tar-orange-500:#F27431;
	--tar-orange-600:#CB6329; --tar-orange-700:#A35122; --tar-orange-800:#7C401A; --tar-orange-900:#5D3214;
	/* Diep-olijf-schaal */
	--tar-deep-50:#F0EFE9; --tar-deep-100:#E0DED3; --tar-deep-200:#C4C1AC;
	--tar-deep-300:#A39D7C; --tar-deep-400:#81794B; --tar-deep-500:#655B24;
	--tar-deep-600:#574E1F; --tar-deep-700:#484119; --tar-deep-800:#3A3414; --tar-deep-900:#2F2910;

	/* Warme neutralen (geen grijs/blauw) */
	--tar-ink:      #2C2717;  /* hoofdtekst */
	--tar-heading:  #383016;  /* koppen */
	--tar-muted:    #6E6550;  /* secundaire tekst */
	--tar-border:   #E6E2D3;  /* randen */
	--tar-surface:  #FFFFFF;  /* kaarten/panelen */
	--tar-bg:       #F5F4EC;  /* app-achtergrond */

	/* Semantiek (WCAG AA) */
	--tar-success:#587A34; --tar-warning:#F27431; --tar-danger:#A83A1E; --tar-info:#4E7688;

	/* Tabelvlakken */
	--tar-table-hover:  #F3F1E6;
	--tar-table-stripe: #FAF9F2;

	/* Vorm & schaduw — zacht afgerond, warm getint */
	--tar-radius-sm: .375rem;
	--tar-radius:    .625rem;
	--tar-radius-lg: 1rem;
	--tar-radius-pill: 50rem;
	--tar-shadow-sm: 0 1px 2px rgba(51,41,17,.06), 0 1px 3px rgba(51,41,17,.08);
	--tar-shadow:    0 2px 6px rgba(51,41,17,.07), 0 8px 24px rgba(51,41,17,.08);
	--tar-shadow-lg: 0 10px 40px rgba(51,41,17,.14);

	/* Typografie */
	--tar-font-brand: "Baloo 2", ui-rounded, "Segoe UI", system-ui, sans-serif;
	--tar-font-body:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Shell-afmetingen */
	--tar-sidebar-width: 250px;
	--tar-topbar-height: 62px;
}

/* ---- 2. Bootstrap variabelen naar het merk --------------------------------- */
:root {
	--bs-primary:   #655B24; --bs-primary-rgb:   101,91,36;
	--bs-secondary: #6E6550; --bs-secondary-rgb: 110,101,80;
	--bs-success:   #587A34; --bs-success-rgb:   88,122,52;
	--bs-info:      #4E7688; --bs-info-rgb:      78,118,136;
	--bs-warning:   #F27431; --bs-warning-rgb:   242,116,49;
	--bs-danger:    #A83A1E; --bs-danger-rgb:    168,58,30;
	--bs-light:     #F5F4EC; --bs-light-rgb:     245,244,236;
	--bs-dark:      #2E2812; --bs-dark-rgb:      46,40,18;

	--bs-body-bg:         #F5F4EC;
	--bs-body-color:      #2C2717; --bs-body-color-rgb: 44,39,23;
	--bs-secondary-color: rgba(44,39,23,.66);
	--bs-tertiary-bg:     #EFEDE1;
	--bs-border-color:    #E6E2D3;
	--bs-emphasis-color:  #383016;
	--bs-link-color:      #655B24; --bs-link-color-rgb: 101,91,36;
	--bs-link-hover-color:#484119;
	--bs-border-radius:      .625rem;
	--bs-border-radius-sm:   .375rem;
	--bs-border-radius-lg:   1rem;
	--bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--bs-heading-color: #383016;
}

/* ---- 3. Basis --------------------------------------------------------------- */
body {
	font-family: var(--tar-font-body);
	color: var(--tar-ink);
	background-color: var(--tar-bg);
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	color: var(--tar-heading);
	font-weight: 600;
	letter-spacing: -.01em;
}

a { color: var(--bs-link-color); text-decoration-color: color-mix(in srgb, var(--bs-link-color) 35%, transparent); text-underline-offset: .15em; }
a:hover { color: var(--bs-link-hover-color); }
::selection { background: var(--tar-olive-200); color: var(--tar-deep-900); }
hr { border-color: var(--tar-border); opacity: 1; }

/* ---- 4. Knoppen --------------------------------------------------------------- */
.btn { --bs-btn-font-weight: 600; border-radius: var(--tar-radius); }
.btn-primary{ --bs-btn-bg:#655B24; --bs-btn-border-color:#655B24; --bs-btn-color:#fff;
	--bs-btn-hover-bg:#574E1F; --bs-btn-hover-border-color:#574E1F; --bs-btn-hover-color:#fff;
	--bs-btn-active-bg:#484119; --bs-btn-active-border-color:#484119;
	--bs-btn-disabled-bg:#655B24; --bs-btn-disabled-border-color:#655B24; }
.btn-secondary{ --bs-btn-bg:#6E6550; --bs-btn-border-color:#6E6550; --bs-btn-color:#fff;
	--bs-btn-hover-bg:#5b5344; --bs-btn-hover-border-color:#5b5344;
	--bs-btn-active-bg:#4c4538; --bs-btn-active-border-color:#4c4538; }
.btn-success{ --bs-btn-bg:#587A34; --bs-btn-border-color:#587A34; --bs-btn-color:#fff;
	--bs-btn-hover-bg:#4c6a2c; --bs-btn-hover-border-color:#4c6a2c; --bs-btn-active-bg:#425c26; --bs-btn-active-border-color:#425c26; }
.btn-danger{ --bs-btn-bg:#A83A1E; --bs-btn-border-color:#A83A1E; --bs-btn-color:#fff;
	--bs-btn-hover-bg:#8f3119; --bs-btn-hover-border-color:#8f3119; --bs-btn-active-bg:#7c2b16; --bs-btn-active-border-color:#7c2b16; }
.btn-warning{ --bs-btn-bg:#F27431; --bs-btn-border-color:#F27431; --bs-btn-color:#2C2717;
	--bs-btn-hover-bg:#e0651f; --bs-btn-hover-border-color:#e0651f; --bs-btn-hover-color:#fff;
	--bs-btn-active-bg:#cb5c1c; --bs-btn-active-border-color:#cb5c1c; --bs-btn-active-color:#fff; }
.btn-info{ --bs-btn-bg:#4E7688; --bs-btn-border-color:#4E7688; --bs-btn-color:#fff;
	--bs-btn-hover-bg:#426576; --bs-btn-hover-border-color:#426576; --bs-btn-active-bg:#385665; --bs-btn-active-border-color:#385665; }
.btn-light{ --bs-btn-bg:#F5F4EC; --bs-btn-border-color:#E6E2D3; --bs-btn-color:#383016;
	--bs-btn-hover-bg:#eceada; --bs-btn-hover-border-color:#dcd6c1; --bs-btn-hover-color:#383016; }
.btn-dark{ --bs-btn-bg:#2E2812; --bs-btn-border-color:#2E2812; --bs-btn-color:#F4F0D7;
	--bs-btn-hover-bg:#3d3418; --bs-btn-hover-border-color:#3d3418; }
.btn-outline-primary{ --bs-btn-color:#655B24; --bs-btn-border-color:#655B24;
	--bs-btn-hover-bg:#655B24; --bs-btn-hover-border-color:#655B24; --bs-btn-hover-color:#fff;
	--bs-btn-active-bg:#574E1F; --bs-btn-active-border-color:#574E1F; }
.btn-outline-secondary{ --bs-btn-color:#6E6550; --bs-btn-border-color:#cfc7b3;
	--bs-btn-hover-bg:#6E6550; --bs-btn-hover-border-color:#6E6550; --bs-btn-hover-color:#fff; }
.btn-accent{ --bs-btn-bg:#F27431; --bs-btn-border-color:#F27431; --bs-btn-color:#fff;
	--bs-btn-hover-bg:#e0651f; --bs-btn-hover-border-color:#e0651f; --bs-btn-active-bg:#cb5c1c; --bs-btn-active-border-color:#cb5c1c;
	border-radius: var(--tar-radius); font-weight: 600; }
.btn-link{ --bs-btn-color:#655B24; --bs-btn-hover-color:#484119; font-weight: 600; }
.btn:focus-visible, .btn.focus-visible{ box-shadow: 0 0 0 .25rem rgba(101,91,36,.35); }

/* ---- 5. Formulieren ------------------------------------------------------------ */
.form-control, .form-select{ border-color: var(--tar-border); border-radius: var(--tar-radius-sm); color: var(--tar-ink); }
.form-control::placeholder{ color: #a89e86; }
.form-control:focus, .form-select:focus, .form-check-input:focus{
	border-color: var(--tar-olive-500); box-shadow: 0 0 0 .2rem rgba(198,178,57,.35); }
.form-check-input:checked{ background-color: #655B24; border-color: #655B24; }
.form-switch .form-check-input:checked{ background-color: #655B24; border-color: #655B24; }
.form-label{ font-weight: 600; color: var(--tar-heading); margin-bottom: .35rem; }
.input-group-text{ background: var(--tar-olive-50); border-color: var(--tar-border); color: var(--tar-muted); }

/* ---- 6. Kaarten & panelen ------------------------------------------------------ */
.card{ border: 1px solid var(--tar-border); border-radius: var(--tar-radius-lg);
	background: var(--tar-surface); box-shadow: var(--tar-shadow-sm); }
.card-header{ background: transparent; border-bottom: 1px solid var(--tar-border); font-weight: 600; color: var(--tar-heading); }
.card-header:first-child{ border-radius: var(--tar-radius-lg) var(--tar-radius-lg) 0 0; }

.tar-card {
	background: var(--tar-surface);
	border-radius: var(--tar-radius-lg);
	border: 1px solid var(--tar-border);
	box-shadow: var(--tar-shadow-sm);
	transition: box-shadow .2s ease;
}

.tar-card:hover {
	box-shadow: var(--tar-shadow);
}

.tar-card .card-header {
	background: transparent;
	border-bottom: 1px solid var(--tar-border);
	font-weight: 600;
	color: var(--tar-heading);
	padding: 16px 20px;
}

.tar-card .card-body {
	padding: 20px;
}

/* ---- 7. Tabellen ---------------------------------------------------------------- */
.table{ --bs-table-color: var(--tar-ink); --bs-table-border-color: var(--tar-border); vertical-align: middle; }
.table > thead th{ background: transparent; text-transform: uppercase; font-size: .72rem; letter-spacing: .06em;
	color: var(--tar-muted); font-weight: 700; border-bottom: 2px solid var(--tar-border); }
.table-hover > tbody > tr:hover > *{ background-color: var(--tar-table-hover); }
.table-striped > tbody > tr:nth-of-type(odd) > *{ background-color: var(--tar-table-stripe); }
.table-striped.table-hover > tbody > tr:hover > *{ background-color: var(--tar-table-hover); }

.tar-table {
	border-radius: var(--tar-radius);
	overflow: hidden;
}

.tar-table thead th {
	background: var(--tar-deep-900);
	color: #fff;
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	border: none;
	padding: 12px 16px;
	font-size: 0.9rem;
}

.tar-table tbody td {
	padding: 12px 16px;
	vertical-align: middle;
	border-color: var(--tar-border);
}

.tar-table tbody tr:hover {
	background: var(--tar-table-hover);
}

/* ---- 8. Badges -------------------------------------------------------------------- */
.badge{ font-weight: 600; border-radius: var(--tar-radius-pill); padding: .4em .7em; }
.text-bg-primary{ background: #655B24 !important; color: #fff !important; }
.text-bg-secondary{ background: #6E6550 !important; color: #fff !important; }
.text-bg-success{ background: #587A34 !important; color: #fff !important; }
.text-bg-danger{ background: #A83A1E !important; color: #fff !important; }
.text-bg-warning{ background: #F27431 !important; color: #2C2717 !important; }
.text-bg-info{ background: #4E7688 !important; color: #fff !important; }
.text-bg-light{ background: #F5F4EC !important; color: #383016 !important; }
.text-bg-dark{ background: #2E2812 !important; color: #F4F0D7 !important; }
.text-bg-accent{ background: #F27431 !important; color: #fff !important; }
.badge.bg-primary{ background: #655B24 !important; }
.badge.bg-success{ background: #587A34 !important; }
.badge.bg-warning{ background: #F27431 !important; color: #2C2717 !important; }
.badge.bg-danger{ background: #A83A1E !important; }
.badge.bg-info{ background: #4E7688 !important; }
.badge.soft-primary{ background: var(--tar-deep-100); color: var(--tar-deep-800); }
.badge.soft-olive{ background: var(--tar-olive-100); color: var(--tar-olive-900); }
.badge.soft-success{ background: #E4EFD8; color: #3c5223; }
.badge.soft-warning{ background: var(--tar-orange-100); color: var(--tar-orange-900); }
.badge.soft-danger{ background: var(--tar-orange-100); color: #7c2b16; }

.badge-active {
	background: #E4EFD8;
	color: #3c5223;
}

.badge-inactive {
	background: var(--tar-orange-100);
	color: #7c2b16;
}

/* ---- 9. Meldingen (alerts) --------------------------------------------------------- */
.alert{ border: 1px solid transparent; border-radius: var(--tar-radius); border-left-width: .28rem; }
.alert-primary{ background: var(--tar-deep-50); border-color: var(--tar-deep-200); border-left-color: #655B24; color: #463a17; }
.alert-success{ background: #EBF2E1; border-color: #d3e3bf; border-left-color: #587A34; color: #3c5223; }
.alert-warning{ background: var(--tar-orange-50); border-color: var(--tar-orange-200); border-left-color: #F27431; color: #8a3f16; }
.alert-danger{ background: var(--tar-orange-50); border-color: #f0c3ac; border-left-color: #A83A1E; color: #7c2b16; }
.alert-info{ background: #EAF1F3; border-color: #cbdde3; border-left-color: #4E7688; color: #365460; }

/* ---- 10. Navigatie / tabs / paginering ---------------------------------------------- */
.nav-tabs{ --bs-nav-tabs-border-color: var(--tar-border); }
.nav-tabs .nav-link{ color: var(--tar-muted); font-weight: 600; border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active{ color: #655B24; background: transparent; border-bottom-color: #867827; }
.nav-pills .nav-link{ color: var(--tar-muted); font-weight: 600; border-radius: var(--tar-radius); }
.nav-pills .nav-link.active{ background: #655B24; color: #fff; }
.nav-tabs .nav-link.disabled, .nav-pills .nav-link.disabled{ color: var(--tar-muted); opacity: .45; pointer-events: none; }
.pagination{ --bs-pagination-bg: var(--tar-surface); --bs-pagination-hover-bg: var(--tar-olive-50);
	--bs-pagination-disabled-bg: var(--tar-deep-50); --bs-pagination-disabled-color: var(--tar-deep-300);
	--bs-pagination-disabled-border-color: var(--tar-border); }
.page-link{ color: #655B24; border-color: var(--tar-border); }
.page-item.active .page-link{ background: #655B24; border-color: #655B24; }
.breadcrumb{ --bs-breadcrumb-divider-color: #b7ad95; font-size: .9rem; }
.breadcrumb-item.active{ color: var(--tar-muted); }
.dropdown-menu{ border-color: var(--tar-border); border-radius: var(--tar-radius); box-shadow: var(--tar-shadow); }
.dropdown-item.active, .dropdown-item:active{ background: #655B24; }
.dropdown-item:hover{ background: var(--tar-olive-50); }

/* ---- 11. Overig ------------------------------------------------------------------------ */
.progress{ background: var(--tar-olive-100); border-radius: var(--tar-radius-pill); }
.progress-bar{ background: #655B24; }
.list-group-item.active{ background: #655B24; border-color: #655B24; }
.text-primary{ color: #655B24 !important; }
.text-accent{ color: #CB6329 !important; }
.text-muted{ color: var(--tar-muted) !important; }
.bg-primary{ background: #655B24 !important; }
.bg-accent{ background: #F27431 !important; }
.bg-light{ background: var(--tar-olive-50) !important; }
.border{ border-color: var(--tar-border) !important; }
.spinner-border, .spinner-grow{ color: #655B24; }
.tooltip-inner{ background: var(--tar-deep-900); }
.modal-content{ background: var(--tar-surface); border: 0; border-radius: var(--tar-radius-lg); box-shadow: var(--tar-shadow-lg); }
.modal-header{ padding: 1rem 1.25rem; justify-content: space-between; border-bottom: 1px solid var(--tar-border); }
.modal-header .btn-close{ margin-left: auto; }
.modal-body{ padding: 1.25rem; }
.modal-footer{ padding: .85rem 1.25rem; border-top: 1px solid var(--tar-border); }
.modal-header, .modal-footer{ border-color: var(--tar-border); }
.modal-title{ font-family: var(--tar-font-brand); font-weight: 700; letter-spacing: -.01em; }
.modal-backdrop.show{ background: #2F2910; opacity: .55; }
.modal .form-label{ font-weight: 600; color: var(--tar-heading); }

.toast{ background: var(--tar-surface); border: 1px solid var(--tar-border); border-radius: var(--tar-radius);
	box-shadow: var(--tar-shadow); color: var(--tar-ink); border-left: .28rem solid var(--tar-deep-500); }
.toast-header{ background: transparent; border-bottom: 1px solid var(--tar-border); color: var(--tar-heading); font-weight: 600; }
.toast-header .toast-ico{ margin-right: .5rem; color: var(--tar-deep-500); }
.toast.toast-success{ border-left-color: var(--tar-success); }
.toast.toast-success .toast-ico{ color: var(--tar-success); }
.toast.toast-warning{ border-left-color: var(--tar-warning); }
.toast.toast-warning .toast-ico{ color: var(--tar-orange-600); }
.toast.toast-danger{ border-left-color: var(--tar-danger); }
.toast.toast-danger .toast-ico{ color: var(--tar-danger); }

/* ---- 12. TAR shell (sidebar / topbar / merk) --------------------------------------------- */
.tar-brand{ display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.tar-brand svg{ width: 1.9rem; height: auto; flex: 0 0 auto; }
.tar-wordmark{ font-family: var(--tar-font-brand); font-weight: 800; font-size: 1.5rem;
	line-height: 1; letter-spacing: .01em; color: var(--tar-deep); }
.tar-brand--light .tar-wordmark{ color: #F4F0D7; }
.tar-tagline{ font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tar-muted); display: block; }
.tar-brand--light .tar-tagline{ color: #A69A6B; }

/* Sidebar */
.tar-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	width: var(--tar-sidebar-width);
	height: 100vh;
	background: var(--tar-deep-900);
	color: #E9E2CF;
	z-index: 1000;
	overflow-y: auto;
	transition: all 0.3s ease;
}

.tar-sidebar .logo-container {
	padding: 12px;
	background: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tar-sidebar .logo-container .tar-logo-horizontal {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
	max-height: 70px;
}

.tar-sidebar .nav-menu {
	list-style: none;
	padding: 15px 0;
	margin: 0;
}

.tar-sidebar .nav-menu li a {
	display: flex;
	align-items: center;
	padding: 12px 20px;
	color: #D8CEB6;
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	transition: background .12s, color .12s;
	border-left: 3px solid transparent;
}

.tar-sidebar .nav-menu li a:hover {
	color: #F4F0D7;
	background: #3A3414;
	border-left-color: transparent;
}

.tar-sidebar .nav-menu li a.active {
	color: #fff;
	background: #3A3414;
	border-left-color: var(--tar-olive);
}

.tar-sidebar .nav-menu li a i {
	margin-right: 12px;
	font-size: 1.1rem;
	width: 22px;
	text-align: center;
	opacity: .85;
}

.tar-sidebar .nav-menu li a.active i {
	opacity: 1;
	color: var(--tar-olive-300);
}

/* Topbar */
.tar-topbar {
	position: fixed;
	top: 0;
	left: var(--tar-sidebar-width);
	right: 0;
	height: var(--tar-topbar-height);
	background: var(--tar-surface);
	border-bottom: 1px solid var(--tar-border);
	box-shadow: var(--tar-shadow-sm);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
	z-index: 999;
}

.tar-topbar .quick-add .btn {
	background: var(--tar-orange);
	border-color: var(--tar-orange);
	color: #fff;
	border-radius: 50%;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	transition: all 0.2s ease;
}

.tar-topbar .quick-add .btn:hover {
	background: #cb5c1c;
	transform: scale(1.05);
}

.tar-topbar .user-menu .dropdown-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--tar-heading);
	text-decoration: none;
	font-weight: 500;
}

.tar-topbar .user-menu .dropdown-toggle::after {
	display: none;
}

.tar-topbar .user-menu .user-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--tar-deep-500);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.85rem;
}

/* Main content */
.tar-content {
	margin-left: var(--tar-sidebar-width);
	margin-top: var(--tar-topbar-height);
	padding: 24px;
	min-height: calc(100vh - var(--tar-topbar-height));
}

/* Page header */
.tar-page-header {
	margin-bottom: 24px;
}

.tar-page-header h1 {
	font-family: var(--tar-font-brand);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--tar-heading);
	margin: 0;
}

.tar-page-header p {
	color: var(--tar-muted);
	margin: 4px 0 0;
}

/* Work in progress badge */
.wip-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 400px;
	text-align: center;
}

.wip-container i {
	font-size: 4rem;
	color: var(--tar-deep);
	margin-bottom: 20px;
}

.wip-container h2 {
	color: var(--tar-heading);
	font-weight: 600;
}

.wip-container p {
	color: var(--tar-muted);
	font-size: 1.1rem;
}

/* ---- 13. Inlogscherm -------------------------------------------------------------------- */
.tar-login-page {
	min-height: 100vh;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	background: var(--tar-bg);
}

.tar-login-aside {
	background: var(--tar-deep-900);
	color: #E9E2CF;
	padding: 3.5rem 3rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.tar-login-heading {
	margin-top: auto;
	max-width: 26rem;
}

.tar-login-heading h1 {
	font-family: var(--tar-font-brand);
	font-weight: 800;
	font-size: 2.4rem;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: #F4F0D7;
	margin: 0 0 .9rem;
}

.tar-login-heading p {
	color: #C9BE9E;
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

.tar-login-trust {
	margin-top: auto;
	display: flex;
	gap: 1.75rem;
	font-size: .8rem;
	color: #8E8358;
}

.tar-login-trust i {
	margin-right: .4rem;
}

.tar-login-main {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 2rem;
}

.tar-login-form {
	width: 100%;
	max-width: 26rem;
}

.tar-login-form h2 {
	font-family: var(--tar-font-brand);
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--tar-heading);
	margin: 0 0 .3rem;
}

.tar-login-form .subtitle {
	color: var(--tar-muted);
	font-size: .95rem;
	margin: 0 0 1.75rem;
}

.tar-login-form .btn-primary {
	width: 100%;
	padding: 12px;
}

.tar-login-footer {
	margin: 2rem 0 0;
	font-size: .85rem;
	color: var(--tar-muted);
}

@media (max-width: 900px) {
	.tar-login-page { grid-template-columns: minmax(0, 1fr); }
	.tar-login-aside { padding: 2.5rem 2rem; }
	.tar-login-heading { margin-top: 0; }
	.tar-login-trust { margin-top: 1.5rem; }
}

/* Quick add dropdown */
.quick-add-menu {
	min-width: 200px;
}

.quick-add-menu .dropdown-item {
	padding: 8px 16px;
}

.quick-add-menu .dropdown-item i {
	margin-right: 8px;
	width: 18px;
	text-align: center;
}

/* ---- 14. Pipeline / Kanban board ---------------------------------------------------------- */
.pipeline-board {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 12px;
	min-height: 500px;
}

.pipeline-column {
	flex: 0 0 280px;
	background: var(--tar-olive-50);
	border-radius: var(--tar-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.pipeline-header {
	padding: 12px 16px;
	color: #fff;
	font-size: 0.9rem;
}

.pipeline-header .pipeline-total {
	font-size: 0.8rem;
	opacity: 0.9;
	margin-top: 4px;
}

.pipeline-add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	color: var(--tar-heading);
	text-decoration: none;
	font-size: 1rem;
	font-weight: bold;
	box-shadow: var(--tar-shadow-sm);
	border: 2px solid var(--tar-orange);
	transition: all 0.15s ease;
}

.pipeline-add-btn:hover {
	background: var(--tar-orange);
	color: #fff;
	transform: scale(1.15) rotate(90deg);
	box-shadow: var(--tar-shadow);
}

.pipeline-cards {
	padding: 10px;
	flex: 1;
	overflow-y: auto;
	min-height: 200px;
}

.deal-card {
	background: var(--tar-surface);
	border-radius: var(--tar-radius-sm);
	padding: 12px;
	margin-bottom: 10px;
	box-shadow: var(--tar-shadow-sm);
	cursor: grab;
	transition: box-shadow .2s ease, transform .2s ease;
	position: relative;
}

.deal-card:hover {
	box-shadow: var(--tar-shadow);
	transform: translateY(-1px);
}

.deal-card:active {
	cursor: grabbing;
}

.deal-card.dragging {
	opacity: 0.5;
}

.deal-card .deal-title {
	font-weight: 600;
	color: var(--tar-heading);
	margin-bottom: 6px;
	padding-right: 24px;
	font-size: 0.9rem;
}

.deal-card .deal-meta {
	font-size: 0.78rem;
	color: var(--tar-muted);
	margin-bottom: 3px;
}

.deal-card .deal-meta i {
	width: 14px;
}

.deal-card .deal-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--tar-border);
}

.deal-card .deal-value {
	font-weight: 600;
	color: var(--tar-deep);
	font-size: 0.85rem;
}

.deal-card .deal-date {
	font-size: 0.75rem;
}

.deal-card .deal-actions {
	position: absolute;
	top: 8px;
	right: 8px;
}

.pipeline-column.drop-target {
	background: var(--tar-olive-100);
	border: 2px dashed var(--tar-deep);
}

.pipeline-empty {
	border: 2px dashed var(--tar-border);
	border-radius: var(--tar-radius-sm);
	margin: 10px 0;
}