/**
 * Portal light / dark appearance.
 * html[data-portal-theme="light"|"dark"] — mode in data-portal-theme-mode (light|dark|auto).
 */
:root {
  --portal-heading: #1a2332;
}

html[data-portal-theme="dark"] {
  --portal-bg: #0f1114;
  --portal-surface: #1a1d23;
  --portal-text: #eceff4;
  --portal-muted: #b4bac4;
  --portal-border: #2d333b;
  --portal-heading: #eef5fc;
  --portal-link: #6ec9f5;
  --portal-link-hover: #b6e6ff;
  --portal-nav-bg: #151922;
  --portal-nav-text: #f0f2f5;
  --portal-nav-active-bg: #00b4e5;
  --portal-nav-active-text: #0f172a;
  --portal-input-bg: #22262e;
  --portal-input-text: #e8eaed;
  --portal-table-stripe: rgba(255, 255, 255, 0.04);
}

html[data-portal-theme="dark"] body.sewan-body {
  background-color: var(--portal-bg) !important;
  color: var(--portal-text);
}

/* Geen linkkleur op .btn — anders worden statusknoppen fel/cyan */
html[data-portal-theme="dark"] .container > .row a:not(.btn),
html[data-portal-theme="dark"] .col-xs-9 a:not(.btn),
html[data-portal-theme="dark"] .col-xs-6 a:not(.btn),
html[data-portal-theme="dark"] .col-xs-3 a:not(.btn) {
  color: var(--portal-link);
}

html[data-portal-theme="dark"] .container > .row a:not(.btn):hover,
html[data-portal-theme="dark"] .col-xs-9 a:not(.btn):hover {
  color: var(--portal-link-hover);
}

/* Porting-overzicht: gedempte statusknoppen in nachtmodus */
html[data-portal-theme="dark"] .porting-state-filters .btn {
  box-shadow: none;
  border-radius: 8px;
  font-weight: 500;
  border-width: 1px;
}
html[data-portal-theme="dark"] .porting-state-filters .btn-primary {
  background: rgba(55, 120, 185, 0.32);
  border-color: rgba(100, 160, 210, 0.45);
  color: #d4e8fb;
}
html[data-portal-theme="dark"] .porting-state-filters .btn-primary:hover {
  background: rgba(65, 130, 195, 0.42);
  color: #fff;
}
html[data-portal-theme="dark"] .porting-state-filters .btn-info {
  background: rgba(65, 105, 155, 0.3);
  border-color: rgba(95, 135, 185, 0.42);
  color: #d0e2f5;
}
html[data-portal-theme="dark"] .porting-state-filters .btn-info:hover {
  background: rgba(75, 115, 165, 0.4);
  color: #fff;
}
html[data-portal-theme="dark"] .porting-state-filters .btn-danger {
  background: rgba(165, 75, 85, 0.28);
  border-color: rgba(190, 100, 110, 0.42);
  color: #f0d0d2;
}
html[data-portal-theme="dark"] .porting-state-filters .btn-danger:hover {
  background: rgba(175, 85, 95, 0.38);
  color: #fff;
}
html[data-portal-theme="dark"] .porting-state-filters .btn-warning {
  background: rgba(155, 125, 55, 0.26);
  border-color: rgba(185, 150, 75, 0.4);
  color: #f2e6c4;
}
html[data-portal-theme="dark"] .porting-state-filters .btn-warning:hover {
  background: rgba(165, 135, 65, 0.36);
  color: #fff;
}
html[data-portal-theme="dark"] .porting-state-filters .btn-success {
  background: rgba(60, 125, 85, 0.3);
  border-color: rgba(85, 150, 110, 0.45);
  color: #d4f0df;
}
html[data-portal-theme="dark"] .porting-state-filters .btn-success:hover {
  background: rgba(70, 135, 95, 0.4);
  color: #fff;
}
html[data-portal-theme="dark"] .porting-state-filters .btn.active {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22);
  font-weight: 600;
}

html[data-portal-theme="dark"] .text-muted {
  color: var(--portal-muted) !important;
}

html[data-portal-theme="dark"] .sewan-card {
  background-color: var(--portal-surface);
  border: 1px solid var(--portal-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

html[data-portal-theme="dark"] .nav-pills > li > a {
  background-color: var(--portal-nav-bg);
  color: var(--portal-nav-text);
  border: 1px solid var(--portal-border);
}

html[data-portal-theme="dark"] .nav-pills > li > a:hover,
html[data-portal-theme="dark"] .nav-pills > li > a:focus {
  background-color: var(--portal-surface);
  color: var(--portal-link-hover);
}

html[data-portal-theme="dark"] .nav-pills > li.active > a,
html[data-portal-theme="dark"] .nav-pills > li.active > a:hover,
html[data-portal-theme="dark"] .nav-pills > li.active > a:focus {
  background-color: var(--portal-nav-active-bg);
  color: var(--portal-nav-active-text);
  border-color: var(--portal-nav-active-bg);
}

html[data-portal-theme="dark"] .panel {
  background-color: var(--portal-surface);
  border-color: var(--portal-border);
}

html[data-portal-theme="dark"] .panel-default > .panel-heading {
  background-color: #22262e;
  border-color: var(--portal-border);
  color: var(--portal-text);
}

html[data-portal-theme="dark"] .table {
  color: var(--portal-text);
}

html[data-portal-theme="dark"] .table > thead > tr > th,
html[data-portal-theme="dark"] .table > tbody > tr > td {
  border-color: var(--portal-border);
}

html[data-portal-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--portal-table-stripe);
}

html[data-portal-theme="dark"] .form-control {
  background-color: var(--portal-input-bg);
  color: var(--portal-input-text);
  border-color: var(--portal-border);
}

html[data-portal-theme="dark"] .well {
  background-color: var(--portal-surface);
  border-color: var(--portal-border);
  color: var(--portal-text);
}

html[data-portal-theme="dark"] footer.row {
  border-top: 1px solid var(--portal-border);
  padding-top: 12px;
  margin-top: 24px;
  color: var(--portal-muted);
}

html[data-portal-theme="dark"] .alert-info {
  background-color: rgba(0, 180, 229, 0.14);
  border-color: rgba(0, 180, 229, 0.4);
  color: var(--portal-text);
}

html[data-portal-theme="dark"] .btn-default {
  background-color: var(--portal-surface);
  color: var(--portal-text);
  border-color: var(--portal-border);
}

html[data-portal-theme="dark"] .sewan-form-page h3 {
  color: var(--portal-heading);
  border-bottom-color: rgba(0, 180, 229, 0.4);
}

html[data-portal-theme="dark"] h1:not(.sewan-topbar-title),
html[data-portal-theme="dark"] h2,
html[data-portal-theme="dark"] h3:not(.sewan-topbar-title) {
  color: var(--portal-heading);
}

html[data-portal-theme="dark"] .modal-content {
  background-color: var(--portal-surface);
  border-color: var(--portal-border);
  color: var(--portal-text);
}

html[data-portal-theme="dark"] .dropdown-menu {
  background-color: var(--portal-surface);
  border-color: var(--portal-border);
}

html[data-portal-theme="dark"] .dropdown-menu > li > a {
  color: var(--portal-text);
}

/* Subheader + tegels in nacht: één vlak met thema + vlaggen, zonder randen */
html[data-portal-theme="dark"] .sewan-subheader {
  background: #12151c;
  border-bottom: none;
  box-shadow: none;
}
html[data-portal-theme="dark"] .sewan-control-tile {
  border: none;
  color: rgba(255, 255, 255, 0.88);
  box-shadow: none;
}
html[data-portal-theme="dark"] .sewan-lang-btn.sewan-control-tile {
  background: rgba(255, 255, 255, 0.06);
}
html[data-portal-theme="dark"] .sewan-lang-btn.sewan-control-tile.sewan-lang-btn--active {
  background: rgba(0, 180, 229, 0.26);
  color: #fff;
  box-shadow: none;
}
html[data-portal-theme="dark"] .sewan-theme-toggle.sewan-control-tile {
  background: rgba(255, 255, 255, 0.06);
}
html[data-portal-theme="dark"] .sewan-control-tile:hover,
html[data-portal-theme="dark"] .sewan-control-tile:focus {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}