/**
 * APMTMVII Design Systeem v3 — "Dock Worker Modern"
 * @version 3.0
 */

/* ===== TOKENS ===== */
:root {
  --navy: #0B2545;
  --navy-light: #134074;
  --navy-mid: #13497B;
  --accent: #F97316;
  --accent-hover: #EA580C;

  --bg: #F1F5F9;
  --card: #FFFFFF;
  --card-alt: #F8FAFC;
  --text: #1E293B;
  --text2: #64748B;
  --text3: #94A3B8;
  --border: #E2E8F0;
  --border2: #CBD5E1;

  --ok: #10B981;
  --ok-hover: #059669;
  --err: #EF4444;
  --err-hover: #DC2626;
  --warn: #F59E0B;
  --warn-hover: #D97706;
  --info: #06B6D4;
  --info-hover: #0891B2;

  --alert-primary-bg: #EFF6FF;
  --alert-primary-text: #1E40AF;
  --alert-danger-bg: #FEF2F2;
  --alert-danger-text: #991B1B;
  --alert-warning-bg: #FFFBEB;
  --alert-warning-text: #92400E;
  --alert-success-bg: #F0FDF4;
  --alert-success-text: #166534;
  --alert-info-bg: #ECFEFF;
  --alert-info-text: #155E75;

  --r: 8px;
  --r-lg: 12px;
  --r-full: 9999px;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --ease: 150ms ease;
  --font: 'DM Sans', system-ui, -apple-system, sans-serif;
}

[data-theme="dark"] {
  --bg: #0A1628;
  --card: #132035;
  --card-alt: #162440;
  --text: #E2E8F0;
  --text2: #8DA9C4;
  --text3: #5A7A9B;
  --border: #1E3352;
  --border2: #2A4365;
  --navy: #060E1A;
  --navy-light: #0A1628;
  --accent: #FB923C;
  --ok: #34D399;
  --ok-hover: #10B981;
  --err: #F87171;
  --err-hover: #EF4444;
  --warn: #FBBF24;
  --warn-hover: #F59E0B;
  --info: #22D3EE;
  --info-hover: #06B6D4;

  --alert-primary-bg: #0C2240;
  --alert-primary-text: #7DD3FC;
  --alert-danger-bg: #2D0F0F;
  --alert-danger-text: #FCA5A5;
  --alert-warning-bg: #2D1F06;
  --alert-warning-text: #FCD34D;
  --alert-success-bg: #0A2418;
  --alert-success-text: #6EE7B7;
  --alert-info-bg: #082530;
  --alert-info-text: #67E8F9;

  --shadow: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy-mid); text-decoration: none; }
[data-theme="dark"] a { color: var(--accent); }
[data-theme="dark"] a.btn-primary,
[data-theme="dark"] a.btn-accent,
[data-theme="dark"] a.btn-danger,
[data-theme="dark"] a.btn-success,
[data-theme="dark"] a.btn-info,
[data-theme="dark"] a.btn-secondary { color: #fff; }
[data-theme="dark"] a.btn-warning { color: #000; }
[data-theme="dark"] a.btn-outline-secondary { color: var(--text2); }
[data-theme="dark"] a.btn-outline-primary { color: var(--navy-mid); }
[data-theme="dark"] a.btn-link { color: var(--accent); }
a:hover { text-decoration: underline; }
a.btn:hover { text-decoration: none; }
hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
img { max-width: 100%; height: auto; }
table { width: 100%; border-collapse: collapse; }
table th, table td { padding: 0.5rem 0.75rem; text-align: left; font-size: 0.8125rem; }
table th { font-weight: 600; color: var(--text2); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  font: 500 0.8125rem/1.5 var(--font);
  border-radius: var(--r); border: 1px solid transparent;
  cursor: pointer; transition: all var(--ease); text-decoration: none; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.4; pointer-events: none; }
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.btn-lg { padding: 0.625rem 1.25rem; font-size: 0.9375rem; }
.btn-primary { background: var(--navy-mid); color: #fff; }
.btn-primary:hover { background: var(--navy); color: #fff; }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-hover); color: #fff; border-color: var(--accent-hover); }
.btn-danger { background: var(--err); color: #fff; }
.btn-danger:hover { background: var(--err-hover); color: #fff; }
.btn-success { background: var(--ok); color: #fff; }
.btn-success:hover { background: var(--ok-hover); color: #fff; }
.btn-warning { background: var(--warn); color: #000; }
.btn-warning:hover { background: var(--warn-hover); color: #000; }
.btn-secondary { background: var(--text2); color: #fff; }
.btn-secondary:hover { background: var(--text3); color: #fff; }
.btn-info { background: var(--info); color: #fff; }
.btn-info:hover { background: var(--info-hover); color: #fff; }
.btn-outline-secondary { background: transparent; color: var(--text2); border-color: var(--border2); }
.btn-outline-secondary:hover { background: var(--card-alt); color: var(--text); }
.btn-outline-primary { background: transparent; color: var(--navy-mid); border-color: var(--border2); }
.btn-outline-primary:hover, .btn-outline-primary.active { background: var(--navy-mid); color: #fff; }
.btn-outline-danger { background: transparent; color: var(--err); border-color: var(--err); }
.btn-outline-danger:hover { background: var(--err); color: #fff; }
.btn-link { background: none; border: none; color: var(--navy-mid); padding: 0; cursor: pointer; text-decoration: underline; }
.btn-close { background: none; border: none; cursor: pointer; color: var(--text3); font-size: 1.25rem; padding: 0; line-height: 1; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-radius: var(--r) 0 0 var(--r); }
.btn-group .btn:last-child { border-radius: 0 var(--r) var(--r) 0; }

/* ===== FORMS ===== */
.form-control {
  width: 100%; padding: 0.5rem 0.75rem;
  font: 0.875rem/1.5 var(--font);
  color: var(--text); background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); transition: border-color var(--ease), box-shadow var(--ease);
}
.form-control:focus { outline: none; border-color: var(--navy-mid); box-shadow: 0 0 0 3px rgba(19,73,123,0.12); }
[data-theme="dark"] .form-control:focus { box-shadow: 0 0 0 3px rgba(34,211,238,0.15); }
.form-control::placeholder { color: var(--text3); }
.form-select {
  width: 100%; padding: 0.5rem 2rem 0.5rem 0.75rem;
  font: 0.875rem/1.5 var(--font); color: var(--text); background: var(--card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748B' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center;
  border: 1px solid var(--border); border-radius: var(--r); appearance: none;
}
.form-select:focus { outline: none; border-color: var(--navy-mid); box-shadow: 0 0 0 3px rgba(19,73,123,0.12); }
.form-label { display: block; margin-bottom: 0.25rem; font-size: 0.8125rem; font-weight: 500; color: var(--text); }
.form-text { font-size: 0.75rem; color: var(--text2); margin-top: 0.25rem; }
.form-check { display: flex; align-items: center; gap: 0.5rem; }
.form-check-input {
  width: 1rem; height: 1rem; border: 1.5px solid var(--border2); border-radius: 3px;
  appearance: none; cursor: pointer; flex-shrink: 0; transition: all var(--ease);
}
.form-check-input:checked { background: var(--navy-mid); border-color: var(--navy-mid); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.form-check-label { font-size: 0.875rem; cursor: pointer; }
.form-check-inline { display: inline-flex; margin-right: 1rem; }
.form-floating { position: relative; }
.form-floating label { position: absolute; top: 0.5rem; left: 0.75rem; font-size: 0.75rem; color: var(--text2); pointer-events: none; }
.input-group { display: flex; }
.input-group .form-control { border-radius: 0; }
.input-group .form-control:first-child { border-radius: var(--r) 0 0 var(--r); }
.input-group .form-control:last-child { border-radius: 0 var(--r) var(--r) 0; }
.input-group .btn:last-child { border-radius: 0 var(--r) var(--r) 0; }
.input-group-text { display: flex; align-items: center; padding: 0.5rem 0.75rem; font-size: 0.8125rem; color: var(--text2); background: var(--card-alt); border: 1px solid var(--border); }

/* ===== ALERTS ===== */
.alert { padding: 0.75rem 1rem; border-radius: var(--r); margin-bottom: 1rem; font-size: 0.8125rem; }
.alert-primary { background: var(--alert-primary-bg); color: var(--alert-primary-text); }
.alert-danger { background: var(--alert-danger-bg); color: var(--alert-danger-text); }
.alert-warning { background: var(--alert-warning-bg); color: var(--alert-warning-text); }
.alert-success { background: var(--alert-success-bg); color: var(--alert-success-text); }
.alert-info { background: var(--alert-info-bg); color: var(--alert-info-text); }

/* ===== CARD ===== */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow-x: auto; overflow-y: hidden; }
.card-header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 0.8125rem; background: var(--card-alt); }
.card-body { padding: 1rem; }

/* ===== PAGINATION ===== */
.pagination { display: flex; list-style: none; padding: 0; margin: 0; gap: 2px; }
.page-item { display: inline-block; }
.page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: var(--r); color: var(--text2); text-decoration: none; font-size: 0.8125rem; }
.page-link:hover { background: var(--card-alt); }
.page-item.active .page-link { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ===== NAV ===== */
.nav-link { display: inline-block; padding: 0.5rem 0.75rem; color: var(--text2); text-decoration: none; font-size: 0.8125rem; border-radius: var(--r); }
.nav-link:hover { color: var(--text); background: var(--card-alt); text-decoration: none; }
.nav-link.active { color: var(--navy-mid); font-weight: 600; }

/* ===== DROPDOWN ===== */
.dropdown-item { display: block; padding: 0.4375rem 0.75rem; font-size: 0.8125rem; color: var(--text); text-decoration: none; border-radius: var(--r); margin: 0 0.25rem; background: none; border: none; cursor: pointer; font-family: var(--font); }
.dropdown-item:hover { background: var(--card-alt); text-decoration: none; }
.dropdown-divider { border-top: 1px solid var(--border); margin: 0.25rem 0; }

/* ===== LIST GROUP ===== */
.list-group-flush > * + * { border-top: 1px solid var(--border); }
.list-group-item-action { display: block; padding: 0.75rem 1rem; color: var(--text); text-decoration: none; }
.list-group-item-action:hover { background: var(--card-alt); }
.list-group-item-action.active { background: var(--accent); color: #fff; }

/* ===== MISC ===== */
.badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; font-size: 0.6875rem; font-weight: 600; border-radius: var(--r-full); }
.text-bg-secondary { background: var(--text2); color: #fff; }
.bg-warning-subtle { background: var(--alert-warning-bg); color: var(--alert-warning-text); }
.bg-success-subtle { background: var(--alert-success-bg); color: var(--alert-success-text); }
.bg-dark-subtle { background: var(--card-alt); }
.text-body { color: var(--text); }
.text-primary { color: var(--navy-mid); }
.text-success { color: var(--ok); }
.text-danger { color: var(--err); }
.text-warning { color: var(--warn); }
.text-info { color: var(--info); }
.text-muted { color: var(--text2); }
.border { border: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.border-l { border-left: 1px solid var(--border); }
.float-right { float: right; }
.float-left { float: left; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.confirm-link { }
.inline { display: inline; }
:not(pre) > code { background: var(--card-alt); padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.8125rem; }

/* ===== GRID ===== */
.container { max-width: 1200px; margin: 0 auto; }
.row { display: flex; flex-wrap: wrap; }
.col { flex: 1 0 0%; }
.col-1{width:8.333%}.col-2{width:16.667%}.col-3{width:25%}.col-4{width:33.333%}.col-5{width:41.667%}
.col-6{width:50%}.col-8{width:66.667%}.col-9{width:75%}.col-10{width:83.333%}.col-11{width:91.667%}.col-12{width:100%}
@media(min-width:640px){.col-sm-3{width:25%}.col-sm-4{width:33.333%}.col-sm-8{width:66.667%}.col-sm-10{width:83.333%}.col-sm-12{width:100%}}
@media(min-width:768px){.col-md-3{width:25%}.col-md-9{width:75%}}
@media(min-width:1024px){.col-lg-2{width:16.667%}.col-lg-3{width:25%}.col-lg-8{width:66.667%}.col-lg-10{width:83.333%}}

/* ===== TOAST ===== */
.toast-notification { position: fixed; bottom: 5rem; right: 1rem; max-width: 350px; padding: 0.75rem 1rem; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-lg); z-index: 9999; display: flex; align-items: flex-start; gap: 0.75rem; opacity: 0; transform: translateY(1rem); transition: opacity 0.3s, transform 0.3s; }
.toast-notification.toast-show { opacity: 1; transform: translateY(0); }
.toast-content { flex: 1; font-size: 0.8125rem; }
.toast-close { background: none; border: none; font-size: 1rem; cursor: pointer; color: var(--text3); padding: 0; line-height: 1; }

/* ===== PASSWORD STRENGTH ===== */
.pwd-strength-bar { height: 4px; border-radius: var(--r-full); background: var(--border); margin-top: 0.5rem; overflow: hidden; }
.pwd-strength-bar .pwd-fill { height: 100%; border-radius: var(--r-full); transition: width 0.3s, background 0.3s; }
.pwd-strength-label { font-size: 0.75rem; margin-top: 0.25rem; }

/* ===== PROGRESS ===== */
.progress-bar { height: 100%; background: var(--accent); border-radius: var(--r-full); transition: width 0.3s; }
.progress-bar.complete { background: var(--ok); }

/* ===== SW UPDATE BANNER ===== */
.sw-update-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; background: var(--brand-primary, #0B2545); color: #fff; padding: 0.625rem 1rem; transform: translateY(-100%); transition: transform 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.sw-update-banner.sw-update-show { transform: translateY(0); }
.sw-update-content { display: flex; align-items: center; gap: 0.75rem; max-width: 640px; margin: 0 auto; font-size: 0.875rem; }
.sw-update-content i { color: var(--accent, #F97316); }
.sw-update-content span { flex: 1; }
.sw-update-btn { white-space: nowrap; }
.sw-update-close { background: none; border: none; color: rgba(255,255,255,.6); font-size: 1.25rem; cursor: pointer; padding: 0; line-height: 1; }
.sw-update-close:hover { color: #fff; }

/* Alpine.js cloak — verberg elementen tot Alpine geïnitialiseerd is */
[x-cloak] { display: none !important; }