/* ============================================================
   Ticketsysteem — Speck Pompen huisstijl
   Kleuren: Grijs #555452 | Blauw #0E79BD | Wit #ffffff | Zwart #000000
   Font: 'Myriad Pro', 'Open Sans', sans-serif
   Dubbel thema: donker (standaard) / licht via [data-thema="licht"]
   ============================================================ */

/* ── Google Fonts: Open Sans (web-fallback voor Myriad Pro) ── */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap');

/* ── DONKER THEMA (standaard) ── */
:root {
  --speck-blauw:         #0E79BD;   /* alleen voor accenten & logo X */
  --speck-blauw-hover:   #0b649e;
  --speck-grijs:         #555452;   /* primaire kleur */
  --speck-grijs-donker:  #3d3c3b;
  --speck-grijs-licht:   #6e6c6a;

  --ts-body-bg:          #0f172a;
  --ts-card-bg:          #1e293b;
  --ts-card-border:      #334155;
  --ts-text:             #e2e8f0;
  --ts-text-muted:       #94a3b8;
  --ts-text-dark:        #e2e8f0;
  --ts-border:           #334155;
  --ts-input-bg:         #0f1f35;
  --ts-input-border:     #334155;
  --ts-table-head-bg:    #1e293b;
  --ts-table-hover:      #273548;
  --ts-omschr-bg:        #0f1f35;
  --ts-navbar-bg:        #555452;   /* Speck grijs */

  /* Stat-kaart kleuren */
  --ts-stat-open:        #38b2f4;
  --ts-stat-klant:       #c084fc;
  --ts-stat-lev:         #2dd4bf;
  --ts-stat-hoog:        #f87171;

  /* Badge-neutrals */
  --ts-badge-neutraal-bg: #334155;
  --ts-badge-neutraal-fg: #cbd5e1;

  /* Badges — status */
  --ts-badge-open-bg:    #0a3a52;   --ts-badge-open-fg:    #38b2f4;
  --ts-badge-klant-bg:   #3b1f4e;   --ts-badge-klant-fg:   #c084fc;
  --ts-badge-lev-bg:     #0c3431;   --ts-badge-lev-fg:     #2dd4bf;
  --ts-badge-gesloten-bg:#2a3649;   --ts-badge-gesloten-fg:#94a3b8;

  /* Badges — prioriteit */
  --ts-badge-hoog-bg:    #3f1515;   --ts-badge-hoog-fg:    #fca5a5;
  --ts-badge-norm-bg:    #3d2b00;   --ts-badge-norm-fg:    #fcd34d;
  --ts-badge-laag-bg:    #0f3522;   --ts-badge-laag-fg:    #6ee7b7;

  /* Alerts */
  --ts-alert-ok-bg:      #0f3522;   --ts-alert-ok-border:  #166534;   --ts-alert-ok-fg:    #bbf7d0;
  --ts-alert-err-bg:     #3f1515;   --ts-alert-err-border: #991b1b;   --ts-alert-err-fg:   #fecaca;
  --ts-alert-info-bg:    #072a42;   --ts-alert-info-border:#0E79BD;   --ts-alert-info-fg:  #bae6fd;
  --ts-alert-warn-bg:    #3d2b00;   --ts-alert-warn-border:#92400e;   --ts-alert-warn-fg:  #fde68a;

  /* Tabel rij-kleuren urgentie */
  --ts-row-danger:  rgba(239, 68, 68, .15);
  --ts-row-warning: rgba(245,158, 11, .12);

  /* Dropdown */
  --ts-dropdown-bg:     #1e293b;
  --ts-dropdown-hover:  #334155;
}

/* ── LICHT THEMA ── */
[data-thema="licht"] {
  --ts-body-bg:          #f5f5f5;
  --ts-card-bg:          #ffffff;
  --ts-card-border:      #e2e8f0;
  --ts-text:             #1e293b;
  --ts-text-muted:       #64748b;
  --ts-text-dark:        #1e293b;
  --ts-border:           #e2e8f0;
  --ts-input-bg:         #ffffff;
  --ts-input-border:     #cbd5e1;
  --ts-table-head-bg:    #f8fafc;
  --ts-table-hover:      #edf6fc;
  --ts-omschr-bg:        #f8fafc;
  --ts-navbar-bg:        #555452;   /* Speck grijs — zelfde in beide thema's */

  /* Stat-kaart kleuren */
  --ts-stat-open:        #0E79BD;
  --ts-stat-klant:       #6d28d9;
  --ts-stat-lev:         #0f766e;
  --ts-stat-hoog:        #b91c1c;

  /* Badge-neutrals */
  --ts-badge-neutraal-bg: #e2e8f0;
  --ts-badge-neutraal-fg: #374151;

  /* Badges — status */
  --ts-badge-open-bg:    #dbeafe;   --ts-badge-open-fg:    #0E79BD;
  --ts-badge-klant-bg:   #ede9fe;   --ts-badge-klant-fg:   #6d28d9;
  --ts-badge-lev-bg:     #ccfbf1;   --ts-badge-lev-fg:     #0f766e;
  --ts-badge-gesloten-bg:#f1f5f9;   --ts-badge-gesloten-fg:#475569;

  /* Badges — prioriteit */
  --ts-badge-hoog-bg:    #fee2e2;   --ts-badge-hoog-fg:    #b91c1c;
  --ts-badge-norm-bg:    #fef3c7;   --ts-badge-norm-fg:    #b45309;
  --ts-badge-laag-bg:    #dcfce7;   --ts-badge-laag-fg:    #15803d;

  /* Alerts */
  --ts-alert-ok-bg:      #f0fdf4;   --ts-alert-ok-border:  #86efac;   --ts-alert-ok-fg:    #166534;
  --ts-alert-err-bg:     #fef2f2;   --ts-alert-err-border: #fecaca;   --ts-alert-err-fg:   #991b1b;
  --ts-alert-info-bg:    #e0f2fe;   --ts-alert-info-border:#7dd3fc;   --ts-alert-info-fg:  #075985;
  --ts-alert-warn-bg:    #fffbeb;   --ts-alert-warn-border:#fde68a;   --ts-alert-warn-fg:  #92400e;

  /* Tabel rij-kleuren urgentie */
  --ts-row-danger:  #fff1f1;
  --ts-row-warning: #fffbeb;

  /* Dropdown */
  --ts-dropdown-bg:     #ffffff;
  --ts-dropdown-hover:  #edf6fc;
}

/* ============================================================
   BASISELEMENTEN
   ============================================================ */

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

html { height: 100%; }

body {
  background: var(--ts-body-bg);
  color: var(--ts-text);
  font-family: 'Myriad Pro', 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: .95rem;
  min-height: 100%;
  transition: background .2s, color .2s;
}

a { color: var(--speck-blauw); }
a:hover { color: var(--speck-grijs); }
[data-thema="licht"] a { color: var(--speck-grijs); }
[data-thema="licht"] a:hover { color: var(--speck-grijs-donker); }

/* ============================================================
   NAVIGATIE — Speck grijs #555452
   ============================================================ */

.navbar {
  background: var(--speck-grijs) !important;
  border-bottom: 3px solid var(--speck-blauw);
}

/* Speck logo in navbar */
.speck-navbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.speck-navbar-logo img {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1); /* wit op grijze navbar */
}

.speck-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.speck-logo-text .speck-wordmark {
  font-family: 'Myriad Pro', 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.speck-logo-text .speck-wordmark .speck-x {
  color: var(--speck-blauw);
  font-size: 1.3rem;
}

.speck-logo-text .speck-payoff {
  font-size: .62rem;
  color: rgba(255,255,255,.7);
  letter-spacing: .08em;
  text-transform: lowercase;
  margin-top: 1px;
}

.navbar-brand {
  font-size: 1.15rem;
  letter-spacing: -.01em;
}

.navbar-nav .nav-link {
  color: rgba(255,255,255,.85) !important;
  font-size: .88rem;
  font-weight: 400;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color: #fff !important;
  border-bottom: 2px solid var(--speck-blauw);
}

/* Thema-toggle knop */
.thema-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,.35);
  color: rgba(255,255,255,.85);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: .85rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.thema-toggle:hover {
  background: rgba(255,255,255,.15);
  color: #fff;
}

/* ============================================================
   KAARTEN
   ============================================================ */

.card {
  background: var(--ts-card-bg) !important;
  border: 1px solid var(--ts-card-border) !important;
  border-radius: 8px;
  color: var(--ts-text);
  transition: background .2s, border-color .2s;
}

.card-header {
  background: rgba(0,0,0,.12) !important;
  border-bottom-color: var(--ts-card-border) !important;
  font-size: .9rem;
  border-radius: 8px 8px 0 0 !important;
  color: var(--ts-text);
}

[data-thema="licht"] .card-header {
  background: #f8fafc !important;
}

/* Kaartkoppen met Speck blauw accent */
.card-header.speck-header {
  background: var(--speck-grijs) !important;
  color: #fff !important;
  border-bottom: 2px solid var(--speck-blauw) !important;
  border-radius: 8px 8px 0 0 !important;
}

.card-header.speck-blue-header {
  background: var(--speck-blauw) !important;
  color: #fff !important;
  border-bottom: none !important;
  border-radius: 8px 8px 0 0 !important;
}

.card-body { color: var(--ts-text); }

/* Border-primary override — Speck grijs */
.border-primary { border-color: var(--speck-grijs) !important; }
.text-primary   { color: var(--speck-grijs) !important; }
[data-thema="licht"] .text-primary { color: var(--speck-grijs) !important; }

/* ============================================================
   STATISTIEKKAARTEN (dashboard)
   ============================================================ */

.stat-card {
  background: var(--ts-card-bg);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 16px 20px;
  text-align: center;
  transition: background .2s, box-shadow .15s, transform .12s;
}

.stat-card .stat-nummer {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.stat-card .stat-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ts-text-muted);
  margin-top: 4px;
}

.stat-card-link { cursor: pointer; }
.stat-card-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(85,84,82,.3) !important;
}

/* ============================================================
   TABEL
   ============================================================ */

.table {
  color: var(--ts-text);
  border-color: var(--ts-border);
  margin-bottom: 0;
}

.table > thead > tr > th {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ts-text-muted);
  font-weight: 600;
  background: var(--ts-table-head-bg) !important;
  border-bottom: 2px solid var(--speck-blauw);
  white-space: nowrap;
}

.table > tbody > tr > td {
  border-color: var(--ts-border);
  vertical-align: middle;
}

.table-hover > tbody > tr:hover > * {
  background: var(--ts-table-hover);
  color: var(--ts-text);
}

.table-bordered, .table-bordered > * > tr > * {
  border-color: var(--ts-border);
}

/* Prioriteits-rijen */
.table-danger-subtle  > td { background: var(--ts-row-danger)  !important; }
.table-warning-subtle > td { background: var(--ts-row-warning) !important; }
tr.table-danger-subtle  { background: var(--ts-row-danger)  !important; }
tr.table-warning-subtle { background: var(--ts-row-warning) !important; }

/* Prioriteit-balk linkerzijde */
tr.prioriteit-hoog    td:first-child { border-left: 4px solid #ef4444; }
tr.prioriteit-normaal td:first-child { border-left: 4px solid #f59e0b; }
tr.prioriteit-laag    td:first-child { border-left: 4px solid #22c55e; }

.table-light thead tr th { background: var(--ts-table-head-bg) !important; }

/* ============================================================
   FORMULIERVELDEN
   ============================================================ */

.form-control,
.form-select {
  background: var(--ts-input-bg) !important;
  border-color: var(--ts-input-border) !important;
  color: var(--ts-text) !important;
  border-radius: 6px;
  font-size: .9rem;
}

.form-control::placeholder { color: var(--ts-text-muted); }

.form-control:focus,
.form-select:focus {
  border-color: var(--speck-grijs) !important;
  box-shadow: 0 0 0 3px rgba(85,84,82,.2) !important;
}

.form-select option {
  background: var(--ts-card-bg);
  color: var(--ts-text);
}

.form-label {
  font-size: .88rem;
  color: var(--ts-text);
  font-weight: 600;
}

.form-text { color: var(--ts-text-muted); }

.input-group-text {
  background: var(--ts-card-bg) !important;
  border-color: var(--ts-input-border) !important;
  color: var(--ts-text-muted);
}

/* ============================================================
   KNOPPEN — Speck grijs als primair, blauw alleen als accent
   ============================================================ */

.btn { border-radius: 6px; font-weight: 600; }

/* Primaire knop: Speck grijs */
.btn-primary               { background: var(--speck-grijs); border-color: var(--speck-grijs); color: #fff !important; }
.btn-primary:hover         { background: var(--speck-grijs-donker); border-color: var(--speck-grijs-donker); color: #fff !important; }
.btn-primary:focus         { background: var(--speck-grijs-donker); border-color: var(--speck-grijs-donker); color: #fff !important; box-shadow: 0 0 0 3px rgba(85,84,82,.3) !important; }
.btn-primary:active        { background: #2e2d2c !important; border-color: #2e2d2c !important; }

/* Secundaire knop: iets lichter grijs */
.btn-secondary             { background: var(--speck-grijs-licht); border-color: var(--speck-grijs-licht); color: #fff !important; }
.btn-secondary:hover       { background: var(--speck-grijs); border-color: var(--speck-grijs); color: #fff !important; }

/* Outline knoppen */
.btn-outline-primary  { color: var(--speck-grijs); border-color: var(--speck-grijs); }
.btn-outline-primary:hover  { background: var(--speck-grijs); color: #fff !important; border-color: var(--speck-grijs); }
.btn-outline-secondary {
  color: var(--ts-text-muted);
  border-color: var(--ts-border);
}
.btn-outline-secondary:hover {
  background: var(--ts-table-hover);
  color: var(--ts-text);
  border-color: var(--ts-border);
}
.btn-outline-danger   { color: #f87171; border-color: #f87171; }
.btn-outline-success  { color: #34d399; border-color: #34d399; }
.btn-outline-info     { color: #38bdf8; border-color: #38bdf8; }

[data-thema="licht"] .btn-outline-primary  { color: var(--speck-grijs); border-color: var(--speck-grijs); }
[data-thema="licht"] .btn-outline-primary:hover { background: var(--speck-grijs); color: #fff !important; }
[data-thema="licht"] .btn-outline-danger   { color: #dc2626; border-color: #dc2626; }
[data-thema="licht"] .btn-outline-success  { color: #15803d; border-color: #15803d; }
[data-thema="licht"] .btn-outline-info     { color: #0284c7; border-color: #0284c7; }

/* ============================================================
   DROPDOWN
   ============================================================ */

.dropdown-menu {
  background: var(--ts-dropdown-bg) !important;
  border-color: var(--ts-card-border) !important;
  border-radius: 8px;
}

.dropdown-item { color: var(--ts-text) !important; }
.dropdown-item:hover {
  background: var(--ts-dropdown-hover) !important;
  color: var(--ts-text) !important;
}
.dropdown-item-text { color: var(--ts-text-muted) !important; }
.dropdown-divider { border-top-color: var(--ts-border) !important; }

/* ============================================================
   BADGES
   ============================================================ */

.badge {
  font-weight: 600;
  font-size: .78rem;
  padding: .35em .65em;
  border-radius: 4px;
}

/* Neutraal badge */
.badge-neutraal {
  background: var(--ts-badge-neutraal-bg);
  color: var(--ts-badge-neutraal-fg);
}

/* Status badges */
.badge-status-open             { background: var(--ts-badge-open-bg);    color: var(--ts-badge-open-fg); }
.badge-status-wacht_op_klant   { background: var(--ts-badge-klant-bg);   color: var(--ts-badge-klant-fg); }
.badge-status-wacht_op_leverancier { background: var(--ts-badge-lev-bg); color: var(--ts-badge-lev-fg); }
.badge-status-gesloten         { background: var(--ts-badge-gesloten-bg);color: var(--ts-badge-gesloten-fg); }

/* Prioriteit badges */
.badge-prio-hoog    { background: var(--ts-badge-hoog-bg); color: var(--ts-badge-hoog-fg); }
.badge-prio-normaal { background: var(--ts-badge-norm-bg); color: var(--ts-badge-norm-fg); }
.badge-prio-laag    { background: var(--ts-badge-laag-bg); color: var(--ts-badge-laag-fg); }

/* Type badges */
.badge-type-klacht    { background: var(--ts-badge-neutraal-bg); color: var(--ts-badge-neutraal-fg); }
.badge-type-reparatie { background: var(--ts-badge-gesloten-bg); color: var(--ts-badge-gesloten-fg); }
.badge-type-retour    { background: var(--ts-badge-gesloten-bg); color: var(--ts-badge-lev-fg); border: 1px solid var(--ts-border); }

/* Bootstrap overrides */
.bg-primary { background-color: var(--speck-grijs) !important; }

/* ============================================================
   ALERT MELDINGEN
   ============================================================ */

.alert { border-radius: 8px; font-size: .9rem; }

.alert-success {
  background: var(--ts-alert-ok-bg) !important;
  border-color: var(--ts-alert-ok-border) !important;
  color: var(--ts-alert-ok-fg) !important;
}
.alert-danger {
  background: var(--ts-alert-err-bg) !important;
  border-color: var(--ts-alert-err-border) !important;
  color: var(--ts-alert-err-fg) !important;
}
.alert-info {
  background: var(--ts-alert-info-bg) !important;
  border-color: var(--ts-alert-info-border) !important;
  color: var(--ts-alert-info-fg) !important;
}
.alert-warning {
  background: var(--ts-alert-warn-bg) !important;
  border-color: var(--ts-alert-warn-border) !important;
  color: var(--ts-alert-warn-fg) !important;
}

/* ============================================================
   LIST-GROUP
   ============================================================ */

.list-group-item {
  background: transparent !important;
  border-color: var(--ts-border);
  color: var(--ts-text);
  font-size: .9rem;
}

.list-group-item.text-muted { color: var(--ts-text-muted) !important; }

/* ============================================================
   HULPKLASSEN
   ============================================================ */

.text-muted { color: var(--ts-text-muted) !important; }
.bg-light   { background: var(--ts-card-bg) !important; color: var(--ts-text); }
hr          { border-color: var(--ts-border); opacity: 1; }

/* Omschrijving blok */
#omschrijving-view {
  background: var(--ts-omschr-bg) !important;
  border-color: var(--ts-border) !important;
  color: var(--ts-text);
}

/* ============================================================
   PAGINATITEL
   ============================================================ */

.pagina-titel {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

/* Sectie-titels in Speck blauw stijl */
.speck-sectie-titel {
  color: var(--speck-blauw);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-bottom: 2px solid var(--speck-blauw);
  padding-bottom: 4px;
  margin-bottom: 12px;
  display: inline-block;
}

/* ============================================================
   FOTO-ALBUM CAROUSEL
   ============================================================ */

.foto-carousel {
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.foto-carousel-img {
  max-height: 420px;
  width: 100%;
  object-fit: contain;
  background: #0a0f1a;
  cursor: pointer;
}

[data-thema="licht"] .foto-carousel-img {
  background: #1e293b;
}

.foto-carousel .carousel-control-prev,
.foto-carousel .carousel-control-next {
  width: 10%;
  opacity: .7;
}
.foto-carousel .carousel-control-prev:hover,
.foto-carousel .carousel-control-next:hover { opacity: 1; }

.foto-teller {
  background: rgba(0,0,0,.5);
  color: #94a3b8;
  font-size: .78rem;
  padding: 4px 0;
}

/* ============================================================
   BIJLAGEN
   ============================================================ */

.bijlage-kaart { display: block; text-decoration: none; color: inherit; }
.bijlage-kaart:hover img { opacity: .85; transition: opacity .15s; }

/* ============================================================
   LOGIN PAGINA
   ============================================================ */

.login-logo {
  max-height: 120px;
  max-width: 320px;
  object-fit: contain;
}

/* Login card accent */
.login-card-header {
  background: var(--speck-grijs) !important;
  border-bottom: 3px solid var(--speck-blauw) !important;
  color: #fff !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 20px 24px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {
  .col-verberg-md { display: none !important; }
}

@media (max-width: 767px) {
  .col-verberg-sm { display: none !important; }
  .stat-card .stat-nummer { font-size: 1.8rem; }
  .container-fluid { padding-left: 10px; padding-right: 10px; }
  .foto-carousel-img { max-height: 240px; }
  #product-tabel td, #product-tabel th { padding: .3rem .4rem; font-size: .82rem; }
  .card-body { padding: .85rem !important; }
}

@media (max-width: 480px) {
  .col-verberg-xs { display: none !important; }
  .navbar-brand { font-size: 1rem; }
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   TICKET-DETAIL SPECIFIEK
   ============================================================ */

.badge.bg-secondary { background: var(--ts-badge-neutraal-bg) !important; color: var(--ts-badge-neutraal-fg) !important; }
.badge.bg-warning   { background: var(--ts-badge-norm-bg) !important; color: var(--ts-badge-norm-fg) !important; }

/* Kennisbank */
.kennisbank-item {
  border: 1px solid var(--ts-border);
  border-radius: 8px;
  padding: 14px;
  background: var(--ts-card-bg);
  color: var(--ts-text);
}

/* ============================================================
   PWA — iOS safe-area & touch
   ============================================================ */

body {
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

.navbar {
  padding-top: calc(.5rem + env(safe-area-inset-top));
}

/* Nav-links en dropdown: touch-vriendelijk 44px */
.nav-link, .dropdown-item {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Knoppen: geen min-height — ronde buttons (border-radius:50%) blijven rond */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ronde buttons: inline-style overschrijving voorkomen */
.btn[style*="border-radius:50%"],
.btn[style*="border-radius: 50%"],
.btn.rounded-circle {
  min-height: 0 !important;
  min-width: 0 !important;
  flex-shrink: 0;
}

.navbar-nav .nav-link {
  padding-top: .6rem;
  padding-bottom: .6rem;
}

.thema-toggle { min-height: 38px; }

.form-control, .form-select { min-height: 44px; }

@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top, 0); }
}