/* ===== Dark baseline ===== */
html, body { background: #0b0f14; color: #e5e7eb; }
body { padding-top: 70px; }
.navbar-inverse { background-color: #0f172a; border-color: #0f172a; }
.navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav>li>a { color: #cbd5e1; }
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover { background-color: #1f2937; color: #fff; }

.main-container { padding: 15px; }
.page-header { border-bottom-color: rgba(255,255,255,0.08); }

.navbar-brand { font-weight: 600; }

/* ===== Cards / grids ===== */
.subcategory-card { border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; margin-bottom: 20px; overflow: hidden; background: #0f172a; }
.subcategory-header { color: #fff; padding: 10px 12px; }
.subcategory-header h4 { margin: 0; font-weight: 600; }
.subcategory-body { padding: 12px; }

.link-grid { display: flex; flex-wrap: wrap; gap: 8px; }

/* Tegel: nooit een underline, ook niet op icon/hover/focus */
.link-tile,
.link-tile:hover,
.link-tile:focus,
.link-tile:active { text-decoration: none !important; outline: none; }
.link-tile i,
.link-tile span { text-decoration: none !important; }

/* Basisstijl voor tegels; kleur van tekst wordt dynamisch bepaald (JS) */
.link-tile {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 6px; min-width: 140px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 1px 0 rgba(0,0,0,.2) inset;
  transition: transform .06s ease, box-shadow .12s ease;
  color: #fff; /* default (donker thema) – kan overschreven worden door .tile-light */
}
.link-tile:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.link-tile i { font-size: 16px; }

/* Automatische contrastklassen die JS toevoegt */
.link-tile.tile-light { color: #111 !important; border-color: rgba(0,0,0,.12) !important; }
.link-tile.tile-dark  { color: #fff !important;  border-color: rgba(255,255,255,.10) !important; }

.tile-actions { display: inline-block; margin: 6px 0 0 8px; }

/* ===== Forms (dark + overrides voor Bootstrap) ===== */
.input-group-addon { background: #111827; color: #cbd5e1; border-color: rgba(255,255,255,.12); }
.form-control {
  background: #0b0f14 !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.form-control:focus { border-color: #60a5fa !important; box-shadow: none !important; }
.form-control::-webkit-input-placeholder{ color:#9ca3af; }
.form-control::placeholder{ color:#9ca3af; }
.form-control:-ms-input-placeholder{ color:#9ca3af; }

/* Readonly/disabled donker houden */
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #0b0f14 !important;
  color: #e5e7eb !important;
  opacity: 1;
}

/* ===== Modals ===== */
.modal-content { background: #0f172a; color: #e5e7eb; border: 1px solid rgba(255,255,255,.12); }
.modal-header, .modal-footer { border-color: rgba(255,255,255,.08); }

/* Buttons */
.btn-default { background: #111827; color: #e5e7eb; border-color: rgba(255,255,255,.12); }
.btn-primary { background: #2563eb; border-color: #1d4ed8; }
.btn-success { background: #16a34a; border-color: #15803d; }
.btn-danger  { background: #dc2626; border-color: #b91c1c; }
.btn-warning { background: #d97706; border-color: #b45309; color: #111; }
.label-default { background: rgba(255,255,255,.25); color: #fff; }

/* ===== Users table (dark + striped + hover) ===== */
.table-dark { background: #0b0f14; }
.table.table-dark > thead > tr > th {
  background-color: #0f172a;
  color: #e5e7eb;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.table.table-dark > tbody > tr > td {
  color: #e5e7eb;
  border-top: 1px solid rgba(255,255,255,.06);
}
.table.table-dark.table-striped > tbody > tr:nth-child(odd)  { background-color: #0e141b; }
.table.table-dark.table-striped > tbody > tr:nth-child(even) { background-color: #0b0f14; }
.table.table-dark > tbody > tr:hover { background-color: #141c25; }
.table-dark a { color: #93c5fd; }
.table-dark a:hover { color: #bfdbfe; }

/* ===== Auth page ===== */
.auth-body { display: grid; place-items: center; min-height: 100vh; }
.login-card { width: 100%; max-width: 360px; background: #0f172a; border: 1px solid rgba(255,255,255,.08); padding: 18px; border-radius: 10px; }

/* Icon preview in addon */
.input-group-addon i { width: 16px; text-align: center; }
/* ===== Navbar category chips ===== */
.navbar .cat-chip {
  display: inline-block;
  border-radius: 16px;
  padding: 6px 10px !important;
  margin: 8px 6px !important;
  text-decoration: none !important;
}
.navbar .cat-chip:hover,
.navbar .cat-chip:focus {
  opacity: .95;
  text-decoration: none !important;
}
.navbar .cat-chip i { margin-right: 4px; }
/* ===== Drag & drop subcategory cards ===== */
.drag-handle {
  cursor: move;
  display: inline-block;
  margin-right: 6px;
  opacity: .8;
}
.drag-handle:hover { opacity: 1; }

.subcat-placeholder {
  border: 2px dashed rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  margin-bottom: 20px;
  min-height: 60px; /* visuele placeholder */
}

/* Zorg dat chips/tegels nooit underline krijgen */
.link-tile,
.link-tile:hover,
.link-tile:focus,
.link-tile:active { text-decoration: none !important; outline: none; }
.link-tile i, .link-tile span { text-decoration: none !important; }

/* Vrije layout canvas */
.free-canvas {
  position: relative;
  min-height: 600px;           /* basis hoogte; JS past aan op basis van content */
  border: 1px dashed rgba(255,255,255,.06);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 20px;
}
/* Kaarten in vrije layout zijn absoluut gepositioneerd */
.subcat-free {
  position: absolute;
  width: 360px;                /* vaste kaartbreedte; pas aan naar wens */
  max-width: 98%;
}