/**
 * Portal light / dark appearance.
 * html[data-portal-theme="light"|"dark"] — mode in data-portal-theme-mode (light|dark|auto).
 *
 * Dark mode: remaps semantic --sewan-* surface/text/border tokens so sewan-theme
 * components stay readable. Brand chrome (--sewan-navy / navy-mid backgrounds) stays.
 */
:root {
  --portal-heading: #1a2332;
}

html[data-portal-theme="dark"] {
  /* Page surfaces — keep navy/cyan brand; lift surfaces off pure black */
  --portal-bg: #12151a;
  --portal-surface: #1e242c;
  --portal-elevated: #272e38;
  --portal-text: #f2f5f9;
  --portal-muted: #c4cbd6;
  --portal-border: #647084;
  --portal-heading: #f7fafc;
  --portal-link: #7ad4f5;
  --portal-link-hover: #c5ecff;
  --portal-nav-bg: #191e27;
  --portal-nav-text: #f0f2f5;
  --portal-nav-active-bg: #00b4e5;
  --portal-nav-active-text: #0f172a;
  --portal-input-bg: #272e38;
  --portal-input-text: #f0f3f7;
  --portal-table-stripe: rgba(255, 255, 255, 0.055);
  --portal-table-hover: rgba(0, 180, 229, 0.1);

  /* Semantic sewan tokens (used as text/borders/fills across the portal) */
  --sewan-bg: #181d25;
  --sewan-surface: #1e242c;
  --sewan-card: #1e242c;
  --sewan-text: #f2f5f9;
  --sewan-muted: #c4cbd6;
  --sewan-border: #647084;
  --sewan-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.28);
  /* Accent stays cyan; slightly brighter hover for dark bg */
  --sewan-accent-hover: #33c4ef;
}

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: statusflow in nachtmodus */
html[data-portal-theme="dark"] .sewan-status-flow {
  --sf-line: #5ecfff;
  background: var(--portal-surface);
  border-color: var(--portal-border);
}
html[data-portal-theme="dark"] .sewan-status-chip {
  background: var(--portal-elevated);
}
html[data-portal-theme="dark"] .col-xs-9 a.sewan-status-chip,
html[data-portal-theme="dark"] .sewan-status-chip {
  background: var(--portal-elevated);
  border-color: var(--portal-border);
  color: var(--portal-text);
}
html[data-portal-theme="dark"] .col-xs-9 a.sewan-status-chip:hover,
html[data-portal-theme="dark"] .col-xs-9 a.sewan-status-chip:focus,
html[data-portal-theme="dark"] .sewan-status-chip:hover,
html[data-portal-theme="dark"] .sewan-status-chip:focus {
  color: var(--portal-text);
  border-color: var(--sewan-accent);
}
html[data-portal-theme="dark"] .sewan-status-chip__count {
  background: rgba(255, 255, 255, 0.12);
  color: var(--portal-text);
}
html[data-portal-theme="dark"] .sewan-status-chip.active {
  background: rgba(0, 180, 229, 0.18);
  box-shadow: 0 0 0 2px rgba(0, 180, 229, 0.35);
}
html[data-portal-theme="dark"] .sewan-table-scroll,
html[data-portal-theme="dark"] .sewan-empty-state {
  background: var(--portal-surface);
  border-color: var(--portal-border);
}
html[data-portal-theme="dark"] .sewan-empty-state__title {
  color: var(--portal-heading);
}
html[data-portal-theme="dark"] .sewan-empty-state__hint {
  color: var(--portal-muted);
}
html[data-portal-theme="dark"] .sewan-state-pill {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--portal-border);
  color: var(--portal-text);
}
html[data-portal-theme="dark"] .sewan-rules-summary__line,
html[data-portal-theme="dark"] .sewan-rules-panel__body p {
  color: var(--portal-text);
}

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: var(--sewan-shadow);
}

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-elevated);
  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"] .nav-pills > li > a .nav-sidebar-count {
  color: rgba(255, 255, 255, 0.78);
  opacity: 1;
}

html[data-portal-theme="dark"] .nav-pills > li.active > a .nav-sidebar-count {
  color: rgba(15, 23, 42, 0.72);
}

html[data-portal-theme="dark"] .sewan-nav-group__label {
  color: var(--portal-muted);
}
html[data-portal-theme="dark"] .sewan-sidebar-panel {
  background: var(--portal-surface);
  border-color: var(--portal-border);
}
html[data-portal-theme="dark"] .sewan-nav-toggle {
  background: var(--portal-surface);
  border-color: var(--portal-border);
  color: var(--portal-text);
}
html[data-portal-theme="dark"] .sewan-nav-collapse {
  background: var(--portal-input-bg);
  border-color: var(--portal-border);
  color: var(--portal-text);
}
html[data-portal-theme="dark"] .sewan-nav-collapse:hover {
  border-color: var(--sewan-accent);
  color: var(--portal-text);
  background: rgba(0, 180, 229, 0.14);
}
html[data-portal-theme="dark"] .sewan-sidebar-nav {
  background: var(--portal-surface);
  border-color: var(--portal-border);
}
html[data-portal-theme="dark"] .sewan-layout-row.is-nav-collapsed .sewan-sidebar-nav {
  border-color: rgba(0, 180, 229, 0.45);
}
html[data-portal-theme="dark"] .sewan-nav-rail-label {
  color: var(--sewan-accent);
}
html[data-portal-theme="dark"] .sewan-layout-row.is-nav-collapsed .nav-sidebar-count {
  background: var(--sewan-accent);
  color: #0c1929;
}
html[data-portal-theme="dark"] .sewan-body .btn:focus-visible,
html[data-portal-theme="dark"] .sewan-body .nav-pills > li > a:focus-visible,
html[data-portal-theme="dark"] .sewan-body a:focus-visible {
  outline-color: var(--sewan-accent);
}

html[data-portal-theme="dark"] .sewan-state-pill--pending {
  color: #a5c8ff;
  background: rgba(37, 99, 235, 0.28);
  border-color: rgba(96, 165, 250, 0.55);
}
html[data-portal-theme="dark"] .sewan-state-pill--info {
  color: #8eddfc;
  background: rgba(2, 132, 199, 0.28);
  border-color: rgba(56, 189, 248, 0.5);
}
html[data-portal-theme="dark"] .sewan-state-pill--warning {
  color: #fde68a;
  background: rgba(217, 119, 6, 0.28);
  border-color: rgba(251, 191, 36, 0.5);
}
html[data-portal-theme="dark"] .sewan-state-pill--success {
  color: #86efac;
  background: rgba(5, 150, 105, 0.28);
  border-color: rgba(52, 211, 153, 0.5);
}
html[data-portal-theme="dark"] .sewan-state-pill--danger {
  color: #fecaca;
  background: rgba(220, 38, 38, 0.28);
  border-color: rgba(248, 113, 113, 0.5);
}
html[data-portal-theme="dark"] .sewan-inline-loading {
  color: var(--portal-muted);
}
html[data-portal-theme="dark"] .sewan-detail-title,
html[data-portal-theme="dark"] .sewan-detail-section__title {
  color: var(--portal-heading);
}
html[data-portal-theme="dark"] .sewan-detail-id,
html[data-portal-theme="dark"] .sewan-detail-hint,
html[data-portal-theme="dark"] .sewan-detail-highlights dt,
html[data-portal-theme="dark"] .sewan-kv__row dt {
  color: var(--portal-muted);
}
html[data-portal-theme="dark"] .sewan-detail-numbers,
html[data-portal-theme="dark"] .sewan-detail-subsection {
  color: var(--portal-text);
}
html[data-portal-theme="dark"] .sewan-detail-highlights dd,
html[data-portal-theme="dark"] .sewan-kv__row dd {
  color: var(--portal-text);
}
html[data-portal-theme="dark"] .sewan-due-date {
  color: #fde68a;
  background: rgba(217, 119, 6, 0.28);
  border-color: rgba(251, 191, 36, 0.5);
}
html[data-portal-theme="dark"] .sewan-kv__row {
  border-bottom-color: var(--portal-border);
}
html[data-portal-theme="dark"] .sewan-detail-highlights {
  border-top-color: var(--portal-border);
}
html[data-portal-theme="dark"] .sewan-date-time {
  color: var(--portal-muted);
}

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: var(--portal-elevated);
  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 {
  color: var(--portal-heading);
  border-color: var(--portal-border);
  background-color: var(--portal-elevated);
}
html[data-portal-theme="dark"] .table > tbody > tr > td,
html[data-portal-theme="dark"] .table > tbody > tr > th,
html[data-portal-theme="dark"] .table > tfoot > 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"] .table-hover > tbody > tr:hover {
  background-color: var(--portal-table-hover);
}

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"] .form-control::placeholder {
  color: #9aa3b2;
  opacity: 1;
}
html[data-portal-theme="dark"] .form-control:focus {
  border-color: var(--sewan-accent);
  box-shadow: 0 0 0 3px rgba(0, 180, 229, 0.28);
}
html[data-portal-theme="dark"] .sewan-body .form-horizontal .control-label,
html[data-portal-theme="dark"] .sewan-body label:not(.btn) {
  color: var(--portal-text);
}
html[data-portal-theme="dark"] .sewan-body .help-block,
html[data-portal-theme="dark"] .sewan-body .checkbox .help-block {
  color: var(--portal-muted);
}
html[data-portal-theme="dark"] .sewan-body .btn-default {
  background-color: var(--portal-elevated);
  color: var(--portal-text);
  border-color: var(--portal-border);
}
html[data-portal-theme="dark"] .sewan-body .btn-default:hover,
html[data-portal-theme="dark"] .sewan-body .btn-default:focus {
  background-color: #323a47;
  color: var(--portal-heading);
  border-color: #6a7588;
}
html[data-portal-theme="dark"] .sewan-body .add-row {
  color: var(--portal-text);
  background-color: rgba(0, 180, 229, 0.14);
}
html[data-portal-theme="dark"] .sewan-body .add-row:hover {
  color: var(--portal-heading);
  background-color: rgba(0, 180, 229, 0.22);
}
html[data-portal-theme="dark"] .sewan-formset-block {
  background: linear-gradient(180deg, #222933 0%, #1a2028 100%);
  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.16);
  border-color: rgba(0, 180, 229, 0.45);
  color: var(--portal-text);
}

html[data-portal-theme="dark"] .btn-default {
  background-color: var(--portal-elevated);
  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.45);
}

html[data-portal-theme="dark"] .api-code-tab {
  background: var(--portal-surface);
  color: var(--portal-text);
  border-color: var(--portal-border);
}
html[data-portal-theme="dark"] .api-code-tab.is-active {
  background: var(--portal-heading);
  border-color: var(--portal-heading);
  color: #0f1720;
}
html[data-portal-theme="dark"] .api-docs-section h4 {
  color: var(--portal-heading);
}

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"] .sewan-bug-report-trigger {
  background: var(--sewan-accent);
  color: #0c1929;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
}
html[data-portal-theme="dark"] .sewan-bug-report-trigger:hover,
html[data-portal-theme="dark"] .sewan-bug-report-trigger:focus {
  background: #6eddf7;
  color: #0c1929;
}
html[data-portal-theme="dark"] .sewan-bug-report-context,
html[data-portal-theme="dark"] #sewan-bug-report-modal .help-block {
  color: var(--portal-muted);
}
html[data-portal-theme="dark"] .sewan-maintenance-banner,
html[data-portal-theme="dark"] .sewan-maintenance-modal-state {
  background: rgba(217, 119, 6, 0.24);
  color: #ffe2a8;
}
html[data-portal-theme="dark"] .sewan-impersonation-banner {
  background: rgba(180, 35, 24, 0.26);
  color: #ffc9c5;
}
html[data-portal-theme="dark"] .sewan-document-list {
  background: var(--portal-surface);
}
html[data-portal-theme="dark"] .sewan-document-row {
  color: var(--portal-text);
}
html[data-portal-theme="dark"] .sewan-document-row + .sewan-document-row {
  border-top-color: var(--portal-border);
}
html[data-portal-theme="dark"] .sewan-document-row:hover,
html[data-portal-theme="dark"] .sewan-document-row:focus {
  background: rgba(0, 180, 229, 0.14);
  color: var(--portal-text);
}
html[data-portal-theme="dark"] .sewan-document-row__icon {
  background: rgba(0, 180, 229, 0.2);
  color: #9be7f8;
}
html[data-portal-theme="dark"] .sewan-document-row__action {
  color: var(--portal-link);
}
html[data-portal-theme="dark"] .modal-header,
html[data-portal-theme="dark"] .modal-footer {
  border-color: var(--portal-border);
}

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);
}
html[data-portal-theme="dark"] .dropdown-menu > li > a:hover,
html[data-portal-theme="dark"] .dropdown-menu > li > a:focus {
  background-color: var(--portal-elevated);
  color: var(--portal-heading);
}

/* Navy-as-text leftovers (brand navy stays for chrome backgrounds) */
html[data-portal-theme="dark"] .topology-node {
  background: var(--portal-elevated);
  border-color: var(--portal-border);
}
html[data-portal-theme="dark"] .topology-node strong {
  color: var(--portal-text);
}
html[data-portal-theme="dark"] .topology-page .topology-meta dt,
html[data-portal-theme="dark"] .topology-node span {
  color: var(--portal-muted);
}
html[data-portal-theme="dark"] .topology-node--prod {
  border-color: rgba(0, 180, 229, 0.5);
  background: rgba(0, 180, 229, 0.12);
}

html[data-portal-theme="dark"] .pagination > li > a,
html[data-portal-theme="dark"] .pagination > li > span {
  background-color: var(--portal-elevated);
  border-color: var(--portal-border);
  color: var(--portal-text);
}
html[data-portal-theme="dark"] .pagination > li > a:hover,
html[data-portal-theme="dark"] .pagination > li > a:focus {
  background-color: #323a47;
  border-color: #6a7588;
  color: var(--portal-heading);
}
html[data-portal-theme="dark"] .pagination > .active > a,
html[data-portal-theme="dark"] .pagination > .active > span,
html[data-portal-theme="dark"] .pagination > .active > a:hover,
html[data-portal-theme="dark"] .pagination > .active > span:hover {
  background-color: var(--sewan-accent);
  border-color: var(--sewan-accent);
  color: #0c1929;
}
html[data-portal-theme="dark"] .pagination > .disabled > a,
html[data-portal-theme="dark"] .pagination > .disabled > span {
  background-color: var(--portal-surface);
  border-color: var(--portal-border);
  color: #8b949e;
}

html[data-portal-theme="dark"] .close {
  color: var(--portal-text);
  text-shadow: none;
  opacity: 0.75;
}
html[data-portal-theme="dark"] .close:hover {
  color: var(--portal-heading);
  opacity: 1;
}

html[data-portal-theme="dark"] .list-group-item {
  background-color: var(--portal-surface);
  border-color: var(--portal-border);
  color: var(--portal-text);
}
html[data-portal-theme="dark"] .breadcrumb {
  background-color: var(--portal-elevated);
}
html[data-portal-theme="dark"] .breadcrumb > li + li::before {
  color: var(--portal-muted);
}
html[data-portal-theme="dark"] .breadcrumb > .active {
  color: var(--portal-muted);
}

html[data-portal-theme="dark"] .sewan-portout-status-bar .sewan-status-chip,
html[data-portal-theme="dark"] .sewan-portings-table,
html[data-portal-theme="dark"] .sewan-portout-table {
  color: var(--portal-text);
}
html[data-portal-theme="dark"] .sewan-date-primary {
  color: var(--portal-heading);
}

html[data-portal-theme="dark"] .sewan-bug-reports-table > thead > tr > th,
html[data-portal-theme="dark"] .sewan-control-tile,
html[data-portal-theme="dark"] .sewan-auth-card h1,
html[data-portal-theme="dark"] .sewan-auth-card h2 {
  color: var(--portal-heading);
}
html[data-portal-theme="dark"] .sewan-file-control label {
  color: var(--portal-text);
  border-color: var(--portal-border);
  background: var(--portal-elevated);
}


/* Extra navy-as-text / staff topology leftovers */
html[data-portal-theme="dark"] .topology-subtitle,
html[data-portal-theme="dark"] .topology-mod strong,
html[data-portal-theme="dark"] .topology-log summary {
  color: var(--portal-heading);
}
html[data-portal-theme="dark"] .topology-mod {
  background: var(--portal-elevated);
  border-color: var(--portal-border);
}
html[data-portal-theme="dark"] .topology-mod span,
html[data-portal-theme="dark"] .topology-notes {
  color: var(--portal-muted);
}
html[data-portal-theme="dark"] .sewan-layout-row.is-nav-collapsed .nav-pills > li.active > a.sewan-nav-link,
html[data-portal-theme="dark"] .sewan-layout-row.is-nav-collapsed .nav-pills > li.active > a.sewan-nav-link:hover,
html[data-portal-theme="dark"] .sewan-layout-row.is-nav-collapsed .nav-pills > li.active > a.sewan-nav-link:focus,
html[data-portal-theme="dark"] .sewan-layout-row.is-nav-collapsed .nav-pills > li.active > a .sewan-nav-link__icon {
  color: var(--portal-heading);
}
html[data-portal-theme="dark"] .sewan-control-tile:hover,
html[data-portal-theme="dark"] .sewan-control-tile:focus {
  color: var(--portal-heading);
}
html[data-portal-theme="dark"] .sewan-document-row:hover,
html[data-portal-theme="dark"] .sewan-document-row:focus {
  color: var(--portal-heading);
}
html[data-portal-theme="dark"] .sewan-document-row__action {
  color: var(--portal-link);
}

/* Taal/thema zitten in .sewan-topbar; tegelstijl daar staat in sewan-theme.css. */