/* ====== Kleuren (Firecom) ====== */
:root{
  --fc-navy-1: #102a4d;
  --fc-navy-2: #13376b;
  --fc-navy-3: #0d2542;
  --fc-yellow: #ffcc00;
  --fc-text:   #1a1a1a;
}

/* ====== Basis/background ====== */
.fc-bg{
  background: linear-gradient(to bottom, #f9fafb, #f1f3f6);
  min-height: 100vh;
}
.fc-main{ margin-top:1.25rem; margin-bottom:2rem; }

/* ====== Header & Footer ====== */
.bg-firecom{ background-color: var(--fc-navy-1) !important; }
.text-firecom{ color: var(--fc-yellow) !important; }
.fc-logo{ height:38px; }
.fc-shadow-sm{ box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.fc-footer{
  background: var(--fc-navy-1);
  border-top: 3px solid var(--fc-yellow);
  color: var(--fc-yellow);
  font-weight: 600;
}

/* ====== Buttons ====== */
.btn-firecom{
  background: var(--fc-yellow);
  color: var(--fc-text);
  font-weight:700;
  border: none;
  border-radius: 6px;
}
.btn-firecom:hover{ background:#e6b800; color:#000; }
.btn-outline-firecom{
  background: transparent;
  border: 2px solid var(--fc-yellow);
  color: var(--fc-yellow);
  font-weight:700;
  border-radius:6px;
}
.btn-outline-firecom:hover{ background: var(--fc-yellow); color: var(--fc-text); }

/* ====== Toolbar ====== */
.toolbar .form-control,
.toolbar .form-select{
  border:1px solid #e3e6ea;
  border-radius:6px;
}
.toolbar .form-control:focus,
.toolbar .form-select:focus{
  border-color: var(--fc-yellow);
  box-shadow: 0 0 0 3px rgba(255,204,0,0.2);
}

/* ====== Cards ====== */
.fc-card{
  background:#fff;
  border:1px solid #eef0f2;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
}
.fc-card-header{
  background:#fafafa;
  border-bottom:1px solid #eef0f2;
  font-weight:600;
}

/* ====== Tabel ====== */
.table{ background:#fff; font-size:0.95rem; }
.fc-table thead th{
  background: var(--fc-yellow);
  color: var(--fc-text);
  font-weight:700;
  border-bottom:2px solid var(--fc-navy-3);
}
.fc-table tbody td{
  border-bottom:1px solid #f2f4f7;
  vertical-align:middle;
}
.fc-table tbody tr:hover{ background:#fffbea; }
.truncate{ max-width:520px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nowrap{ white-space:nowrap; }
.num{ font-variant-numeric: tabular-nums; }

/* ====== Badges ====== */
.badge.open    { background:#e8f5e9; color:#256029; }
.badge.partial { background:#fff7e6; color:#8a6200; }
.badge.closed  { background:#edf2ff; color:#1e3a8a; }
.badge.default { background:#f3f4f6; color:#374151; }
.badge.firecom { background:var(--fc-yellow); color:var(--fc-text); }

/* ====== Pagination ====== */
.pagination .page{
  min-width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; border:1px solid #e5e7eb;
  background:#fff; color:#374151; text-decoration:none; font-weight:600;
}
.pagination .page:hover{ background:#f9fafb; }
.pagination .page.active{
  background: var(--fc-navy-1);
  color: var(--fc-yellow);
  border-color: var(--fc-navy-1);
}

/* ===== Board layout ===== */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
}
.gap-3 { gap: 1rem; }

.lane { display: flex; flex-direction: column; min-height: 200px; }
.lane-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem .8rem;
  background: #f7f8fa;
  border: 1px solid #eef0f2;
  border-radius: 10px;
  font-weight: 700;
}
.lane-body { margin-top: .6rem; display: flex; flex-direction: column; gap: .6rem; }

/* Tickets */
.card-ticket {
  border: 1px solid #eef0f2;
  border-radius: 10px;
  padding: .6rem .75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-ticket:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Markeringen */
.card-ticket.due-today {
  border-left: 4px solid #0d6efd; /* blauw */
}
.card-ticket.target-today {
  border: 2px solid #ffc107; /* geel */
  background: #fffbea;
  box-shadow: 0 0 10px rgba(255, 193, 7, 0.4);
}
.priority-card {
  border: 3px solid #dc3545 !important;
  box-shadow: 0 0 20px rgba(220,53,69,.5) !important;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 15px rgba(220,53,69,.6); }
  50%     { box-shadow: 0 0 25px rgba(220,53,69,.9); }
}

/* Progress */
.fc-progress { height: 12px; background: #eef0f2; border-radius: 999px; }
.fc-progress-bar { background: var(--fc-yellow); font-weight: 700; }
.fc-progress-danger { background-color: #e63946 !important; }
.fc-progress-warning { background-color: #ff7f11 !important; }
.fc-progress-firecom { background-color: #ffcc00 !important; color: #1a1a1a !important; }
.fc-progress-success { background-color: #4caf50 !important; }

.lane-subheader{
  margin: .25rem 0 .35rem;
  font-size: .85rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Label in kaartje voor items die vandaag moeten (batch tot €200) */
.chip-today{
  background-color: var(--fc-yellow);
  color: var(--fc-text);
  font-weight: 700;
  border-radius: 999px;
  padding: .15rem .55rem;
  line-height: 1;
  font-size: .8rem;
  box-shadow: 0 0 0 2px rgba(255,204,0,.15);
}

/* ——— Board: gelijke kaart-hoogtes en chips ——— */
.lane-grid{
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;        /* elke rij even hoog binnen de lane */
  gap: .6rem;
}

.card-ticket{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 160px;          /* vaste minimale hoogte voor visuele rust */
}

.ticket-body{
  margin-top: .15rem;
  /* reserveer ruimte zodat alle kaarten consistent blijven */
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

/* Chips in kaartje */
.chip-today{
  display:inline-block; padding:.12rem .5rem; border-radius:999px;
  background:#ffcc00; color:#1a1a1a; font-weight:700; font-size:.8rem;
}
.chip-busy{
  display:inline-block; padding:.12rem .5rem; border-radius:999px;
  background:#0d6efd; color:#fff; font-weight:700; font-size:.8rem;
}

/* Voor groot scherm wat strakker */
.grid-4{
  grid-template-columns: repeat(4, minmax(320px, 1fr)); /* iets breder */
}

/* Chips – basis staat al in je CSS, dit zijn de varianten */
.chip{display:inline-block;padding:.12rem .5rem;border-radius:999px;font-weight:700;font-size:.8rem}
.chip-today{background:#ffcc00;color:#1a1a1a}       /* Aanrader / Vandaag */
.chip-busy{background:#0d6efd;color:#fff}           /* Bezig */
.chip-amber{background:#ffb703;color:#1a1a1a}       /* Bel klant / Onderdelen / Bel leverancier */
.chip-warn{background:#ff7f11;color:#1a1a1a}        /* Bijna te laat (optioneel: hou je oude kleur) */
.chip-danger{background:#e63946;color:#fff}         /* Te laat */
.chip-good{background:#22c55e;color:#062a12}        /* Gamification badges (Vroege vogel/Flow/Redder) */
.chip-neutral{background:#e5e7eb;color:#111827}     /* Nog niet begonnen */