/* ===================================================================
   CTW Component Layout Styles – V2.4 (Viewer badges dynamisch)
=================================================================== */

/* ------------------------------
   COLOR VARIABLES (GLOBAL)
------------------------------ */
:root {
  --ctw-bg: #0E2338;
  --ctw-surface: #102B47;
  --ctw-card: #132F4F;
  --ctw-card-alt: #183A60;
  --ctw-border: #1C3F64;

  --ctw-text: #EAF2FA;
  --ctw-muted: #A9C0D6;

  --ctw-primary: #0AA3FF;
  --ctw-primary-2: #2CB5E8;

  --ctw-danger: #E04949;
  --ctw-ok: #20C997;

  --ctw-glass: rgba(255,255,255,.06);

  --ctw-radius-sm: 6px;
  --ctw-radius-md: 10px;

  --ctw-transition: 0.15s ease;
}

/* ------------------------------
   GLOBAL RESET
------------------------------ */
html, body {
  height: 100%;
  margin: 0;
  background: var(--ctw-bg);
  color: var(--ctw-text);
}

/* ------------------------------
   BUTTONS
------------------------------ */
.btn,
.doc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--ctw-radius-sm);
  background: var(--ctw-primary);
  border: none;
  cursor: pointer;
  color: #fff;
  transition: var(--ctw-transition);
  text-decoration: none;
  white-space: nowrap;
}

.doc-btn.small {
  padding: 6px 10px;
  font-size: 0.85rem;
}

.doc-btn.danger {
  background: var(--ctw-danger);
}

.btn:hover,
.doc-btn:hover {
  background: var(--ctw-primary-2);
}

/* ------------------------------
   BASE BADGE (ALLE BADGES)
------------------------------ */
.badge,
.doc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 26px;
  padding: 6px 10px;

  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;

  border: 1px solid transparent;
  margin-right: 4px;
}

/* ------------------------------
   DOCUMENT TYPE BADGES
------------------------------ */
.badge--fact {
  background: rgba(0,123,255,.18);
  border-color: rgba(0,123,255,.55);
  color: #7cc7ff;
}

.badge--doc {
  background: rgba(140,160,180,.18);
  border-color: rgba(140,160,180,.45);
  color: #d0deea;
}

/* ------------------------------
   ✅ CATEGORIE BADGES (DYNAMISCH)
------------------------------ */

/* Basis: Cat is altijd een vol vakje */
.badge--cat {
  color: #ffffff;
}

/* Voorbeeld categorie-stijlen
   Deze classnamen komen UIT DE DATABASE
*/

.badge--custom {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.6);
  color: #fde68a;
}

.badge--admin {
  background: rgba(99, 102, 241, 0.25);
  border-color: rgba(99, 102, 241, 0.6);
  color: #c7d2fe;
}

.badge--cost {
  background: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.6);
  color: #bbf7d0;
}

/* Geen categorie gekozen */
.badge--empty {
  background: #ffffff;
  border-color: #dddddd;
  color: #666666;
}

/* ------------------------------
   ✅ EIGENDOM BADGES (Z / P)
------------------------------ */
.badge--private {
  background: rgba(32, 201, 151, 0.25);
  border-color: rgba(32, 201, 151, 0.6);
  color: #9fffe0;
}

.badge--company {
  background: rgba(10, 163, 255, 0.25);
  border-color: rgba(10, 163, 255, 0.6);
  color: #9bd1ff;
}

/* ------------------------------
   COST TYPE BADGES (optioneel)
------------------------------ */
.badge--fixed {
  background: rgba(0,150,136,.18);
  border-color: rgba(0,150,136,.45);
  color: #8ff5ef;
}

.badge--variable {
  background: rgba(32,201,151,.18);
  border-color: rgba(32,201,151,.45);
  color: #9fffe0;
}

/* ------------------------------
   VIEWER TABLE STYLES
------------------------------ */
.pm-table-wrap {
  overflow-x: auto;
}

.pm-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ctw-card);
  border: 1px solid var(--ctw-border);
}

.pm-table th,
.pm-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ctw-border);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.pm-table th {
  color: var(--ctw-muted);
  font-weight: 600;
  background: var(--ctw-card-alt);
}

/* ------------------------------
   HOVER EFFECT (VIEWER)
------------------------------ */
.pm-table tbody tr {
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.pm-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: inset 4px 0 0 var(--ctw-primary);
  cursor: pointer;
}

.pm-table tbody tr:hover td {
  color: #ffffff;
}

/* Actieknoppen zichtbaarder bij hover */
.pm-table tbody tr td:last-child .doc-btn {
  opacity: 0.75;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.pm-table tbody tr:hover td:last-child .doc-btn {
  opacity: 1;
  transform: translateY(-1px);
}


/* ------------------------------
   SPINNER
------------------------------ */
.spinner {
  width: 16px;
  height: 16px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top: 3px solid #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ------------------------------
   NAV OFFSET (SIDEBAR)
------------------------------ */
.nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 80px;
}
/* ------------------------------
   Signals
------------------------------ */
.ctw-signals {
  padding: 14px;
  background: var(--ctw-card);
  border: 1px solid var(--ctw-border);
  border-radius: var(--ctw-radius-md);
}

.ctw-signal {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  margin-top: 8px;
  border-left: 3px solid var(--ctw-primary);
  background: var(--ctw-glass);
  border-radius: var(--ctw-radius-sm);
}

.ctw-warning { border-left-color: #fbbf24; }
.ctw-alert   { border-left-color: #ef4444; }

/* ===============================
   CTW Insight Accent (signalen)
=============================== */
.widget.ctw-signals {
  border-color: var(--ctw-primary);
  box-shadow:
    inset 0 0 0 1px rgba(10,163,255,0.25),
    0 10px 30px rgba(0,0,0,0.35);
}

.widget.ctw-insight {
  background: linear-gradient(
    180deg,
    var(--ctw-card-alt),
    var(--ctw-card)
  );
  border-left: 3px solid var(--ctw-primary);
}
.highlight {
  background-color: #fff4cc;
  box-shadow: inset 4px 0 0 #f0b000;
}
tr.highlight {
  background-color: #fff4cc;
  box-shadow: inset 4px 0 0 #f0b000;
}
.ai-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #9fd3ff;
}


  
/* ========= VIEWER FIXES ========= */

/* Factuurnummer afkappen */
.pm-table th:nth-child(2),
.pm-table td:nth-child(2) {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Acties kolom rechts uitlijnen */
.pm-table th:last-child {
  text-align: center;
}

.pm-table td:last-child {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

/* Geen blauwe hover-balk onder Acties 
.pm-table tbody tr:hover td:last-child {
  background: transparent;
  box-shadow: none;
}
*/
/* Vast / Variabel: vaste maat, gecentreerd */
.doc-btn.type-fixed,
.doc-btn.type-variable {
  width: 80px;
  justify-content: center;
  text-align: center;
}

/* AI OK = geen knopblok, maar tekstactie */
.doc-btn.ai-ok {
  background: none;
  border: none;
  color: var(--ctw-muted);
  padding: 6px 8px;
}
/* Acties-kolom: NOOIT achtergrond, NOOIT blok */
.pm-table td:last-child {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.ai-badge-approved {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  padding: 4px 8px;

  border-radius: 999px;
  border: 1.5px solid #2dff9e;

  background-color: #0b3c2d;
  color: #2dff9e;

  font-size: 12px;
  font-weight: 600;
  line-height: 1;

  white-space: nowrap;
}
.login-box {
  position: absolute;
  top: 24px;
  left: 24px;              /* 👈 linksboven */
  width: 320px;

  background: rgba(13, 35, 52, 0.95);
  border: 1px solid #233b50;
  border-radius: 10px;
  padding: 24px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Login footer – definitief onderaan */


.login-footer {
  position: absolute;
  bottom: 20px;
  left: 32px;
  right: 32px;

  display: flex;
  justify-content: center;   /* 👈 centreren */
  gap: 16px;

  font-size: 12px;
  color: #bcd3ea;
  opacity: 0.85;

  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 6px;

  text-align: center;
}

/* Logging */
#logsTable tr:hover {
  background: rgba(255,255,255,0.05);
}
/* ===== DIFF STYLING ===== */

.diff-block {
  margin-bottom: 12px;
  padding: 8px;
  background: rgba(255,255,255,0.02);
  border-radius: 4px;
}

.diff-key {
  font-weight: bold;
  margin-bottom: 4px;
}

.diff-line {
  font-family: monospace;
  padding: 2px 6px;
}

.diff-removed {
  color: #ff5c5c;
  background: rgba(255, 92, 92, 0.1);
}

.diff-added {
  color: #00c853;
  background: rgba(0, 200, 83, 0.1);
}

.btn--ghost {
  background: transparent;
  border: 1px solid #2f94ff;
  color: #2f94ff;
}
/* ===== Inputs zelfde stijl als knoppen ===== */

.input,
select,
input[type="date"],
input[type="time"] {

  height: 36px;
  padding: 0 8px;            /* ✅ minder padding → lager */

  border-radius: 6px;
  border: 1px solid #2f94ff;
  background: #102b47;
  color: #ffffff;
  font-size: 14px;

  box-sizing: border-box;

  line-height: normal;       /* ✅ reset */
}

/* ===== Buttons gelijk trekken ===== */

.btn {
  height: 36px;
  padding: 0 12px;
  display: flex;
  align-items: center;
}


/* ===== Quick buttons iets subtieler ===== */

.btn--ghost {
  background: transparent;
  border: 1px solid #2f94ff;
  color: #2f94ff;
}
#userSelect,
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit {
  padding: 0;
}
/* ===== HOVER EFFECT ===== */
.btn:hover {
  box-shadow: 0 0 6px #2f94ff;
  transform: translateY(-1px);
  transition: 0.15s ease;
}


/* ===== ACTIVE BUTTON ===== */
.btn.active {
  background: #2f94ff;
  color: #ffffff;
  border: 1px solid #2f94ff;
  box-shadow: 0 0 8px #2f94ff;
}


/* ===== GHOST BUTTON ACTIVE ===== */
.btn--ghost.active {
  background: #2f94ff;
  color: #ffffff;
}
<style>
@keyframes tickerMove {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

#tickerContent {
  animation: tickerMove 15s linear infinite;
}
</style>

#tickerContent span {
  font-weight: 500;
}
tr {
  transition: 0.2s ease;
}
#installBtn {
  z-index: 9999;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.ctw-page {
  width: 100%;
}

.ctw-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 25px;
}

.ctw-row:nth-child(2),
.ctw-row:nth-child(3) {
  grid-template-columns: repeat(2, 1fr);
}

.ctw-card {
  padding: 18px;
  background: #0d2334;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
}

.status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.small {
  font-size: 13px;
  margin-top: 10px;
}

.input-row {
  display:flex;
  gap:5px;
  margin-top:10px;
}

.list {
  margin-top:10px;
}

/* ===== Sticky + Fixed columns ===== */

/* ✅ wrapper scroll */
.table-wrapper {
  overflow: auto;
  max-height: 600px;
}

/* ✅ compacte tabel */
.table td,
.table th {
  padding: 6px 8px;
  line-height: 1.2;
}

/* ✅ sticky header */
.table thead th {
  position: sticky;
  top: 0;
  background: #0b1f2e;
  z-index: 5;
}

/* ✅ vaste kolom 1 (Ticket) */
.table td:nth-child(1),
.table th:nth-child(1) {
  position: sticky;
  left: 0;
  background: #0b1f2e;
  z-index: 4;
}

/* ✅ vaste kolom 2 (Locatie) */
.table td:nth-child(6),
.table th:nth-child(6) {
  position: sticky;
  left: 120px; /* iets strakker */
  background: #0b1f2e;
  z-index: 4;
}

/* ✅ shadow voor vaste kolommen */
.table td:nth-child(1),
.table th:nth-child(1),
.table td:nth-child(6),
.table th:nth-child(6) {
  box-shadow: 2px 0px 5px rgba(0,0,0,0.3);
}

/* ✅ actieve sort kolom */
th.asc,
th.desc {
  color: #4da3ff;
  font-weight: bold;
}

/* ✅ subtiele rij animatie */
#tableBody tr {
  transition: 0.15s;
}

/* ✅ hover */
.clickable-row:hover {
  background: rgba(77,163,255,0.08);
}


/* ✅ ACTIE KOLOM STRAK OP 1 RIJ */
.actie-col {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ✅ inline forms */
.inline-form {
  display: inline;
  margin: 0;
}

/* ✅ compacte icon buttons */
.btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ✅ kleuren per actie */
.btn-icon.edit {
  background: #1f6feb;
  color: white;
}

.btn-icon.delete {
  background: #d64545;
  color: white;
}

.btn-icon.complete {
  background: #2ea043;
  color: white;
}

/* ✅ hover */
.btn-icon:hover {
  opacity: 0.8;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 25px;
}

.table th, .table td {
  padding: 6px;
  border-bottom: 1px solid #ddd;
}

/* kleuren */
.row-red { background: #3a0f0f; }
.row-yellow { background: #3a320f; }
.row-blue { background: #0f253a; }



}

.btn-action {
  flex: 1;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 6px;
  font-size: 13px;

  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-action.primary {
  background: #1f8fff;
  color: white;
}

.btn-action.secondary {
  background: #2a3f50;
  color: #bcd2e8;
  border: 1px solid #3a556d;
}


}

.actions-row .btn-action {
  flex: 1;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 6px;
  font-size: 13px;

  text-decoration: none;
  border: none;
  cursor: pointer;
}
/* ✅ compacte knop rij */
.actions-row {
  display: flex;
  justify-content: flex-end; /* 🔥 RECHTS */
  margin-bottom: 15px;
}

/* ✅ PDF knop (compact CTW stijl) */
.btn-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 14px;
  height: 32px;
  font-size: 13px;

  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;

  background: #2a3f50;
  color: #bcd2e8;
  border: 1px solid #3a556d;
}

/* hover */
.btn-small:hover {
  background: #324a5f;
}

/* ✅ export knoppen */
.form-actions {
  display: flex;
  justify-content: flex-end;  /* 🔥 rechts */
  gap: 10px;
  margin-top: 15px;
  max-width: 420px;
}

/* ✅ CTW knopstijl */
.btn-action {
  min-width: 120px;   /* 🔥 compacte maar gelijk */
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 6px;
  font-size: 13px;

  text-decoration: none;
  border: none;
  cursor: pointer;
}

/* ✅ blauw (actie) */
.btn-action.primary {
  background: #1f8fff;
  color: white;
}

/* ✅ grijs (annuleren) */
.btn-action.secondary {
  background: #2a3f50;
  color: #bcd2e8;
  border: 1px solid #3a556d;
}
/* ==========================================================
CTW DASHBOARD STATS (STABIEL & SIMPEL)
========================================================== */

#ctw-stats-inline {
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* ✅ rechts uitlijnen */

  gap: 20px;
  margin: 10px 0 25px 0;       /* 🔥 extra ruimte onder stats */
  width: 100%;
}

/* elk item */
#ctw-stats-inline > div {
  font-size: 13px;
  color: #cbd5e1;
  white-space: nowrap;
}

/* cijfers */
#ctw-stats-inline b {
  font-size: 20px;
  margin-left: 5px;
  font-weight: 600;
}


/* ==========================================================
KNOPPEN CTW (CONSISTENT)
========================================================== */

.actions-row,
.form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  gap: 10px;
  margin: 25px 0 20px 0;   /* 🔥 ruimte boven én onder */
}

/* basis knop */
.btn-action {
  min-width: 120px;
  height: 36px;

  display: inline-flex;        /* ✅ beter dan flex voor knoppen */
  align-items: center;
  justify-content: center;

  border-radius: 6px;
  font-size: 13px;

  text-decoration: none;
  border: none;
  cursor: pointer;
}

/* primary */
.btn-action.primary {
  background: #1f8fff;
  color: white;
}

/* secondary */
.btn-action.secondary {
  background: #2a3f50;
  color: #bcd2e8;
  border: 1px solid #3a556d;
}

/* hover */
.btn-action:hover {
  opacity: 0.9;
}
/* ==========================================================
TABLE & BASIS
========================================================== */

.full-width {
  padding: 25px;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

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

/* klikbare rijen */
.clickable-row {
  cursor: pointer;
}

.clickable-row:hover {
  background: rgba(77,163,255,0.1);
}

/* statussen */
.status-active {
  color: #6edb8f;
}

.status-done {
  color: #888;
}

/* sort */
th {
  cursor: pointer;
  user-select: none;
}

th.asc,
th.desc {
  color: #4da3ff;
  font-weight: bold;
}


/* ==========================================================
KLEUREN (HERGEBRUIKBAAR)
========================================================== */

.red {
  color: #ff4d4d;
}

.yellow {
  color: #ffcc00;
}

.green {
  color: #4caf50;
}
``