/* ===== Streambeheer — Pro UI ===== */
:root{
  --bg:#f7f9fc; --panel:#ffffff; --ink:#0f172a; --muted:#64748b;
  --accent:#2563eb; --accent-ink:#ffffff;
  --ok:#16a34a; --warn:#f59e0b; --danger:#e11d48;
  --border:#e5e7eb; --shadow:0 6px 24px rgba(15,23,42,.06);
  --radius:12px; --space:16px;
  --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --font: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Ubuntu,Cantarell,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
}
* { box-sizing:border-box }
html,body{height:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.45}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.navbar{position:sticky;top:0;z-index:10;background:var(--panel);border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
.navbar .inner{max-width:1100px;margin:0 auto;padding:.6rem .75rem;display:flex;align-items:center;gap:.75rem}
.brand{font-weight:700;letter-spacing:.2px}
.navlinks a{display:inline-block;padding:.4rem .6rem;border-radius:.45rem;color:var(--ink)}
.navlinks a:hover{background:#f1f5f9}
.navlinks{ display:flex; justify-content:center; margin: 0 auto; }
.spacer{flex:0 0 auto}
.brand{display:flex; align-items:center; gap:.5rem; margin-left:0;}
.brand-logo{ height:48px; width:auto; max-height:48px; margin:0; vertical-align:middle; display:inline-block; object-fit:contain; }
@media (min-width: 1280px){
  .navbar .inner{ padding-left: 6px; }
  .brand{ margin-left: -8px; }
}

/* Header-level flash bar (below navbar) */
.flashbar{position:sticky; top:54px; z-index:9; background:#fff9eb; border-bottom:1px solid #fde68a;}
.flashbar .inner{max-width:1100px; margin:0 auto; padding:.5rem 1rem; display:flex; flex-wrap:wrap; gap:.5rem}
.flashbar .flash-item{padding:.35rem .6rem; border-radius:.4rem; background:#fff; border:1px solid #fde68a; color:#7a5b00; font-weight:600}
.flashbar .flash-item.success{ border-color:#bbf7d0; color:#14532d; background:#ecfdf5 }
.flashbar .flash-item.warning{ border-color:#fde68a; color:#7a5b00; background:#fff9eb }
.flashbar .flash-item.danger{ border-color:#fecaca; color:#7f1d1d; background:#fef2f2 }

.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem}

.btn{display:inline-block;padding:.55rem .9rem;border:1px solid var(--border);border-radius:.5rem;background:#fff;color:var(--ink);cursor:pointer;text-decoration:none}
.btn:hover{background:#f8fafc}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(0.96)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(0.95)}
.btn-outline{background:transparent}
.btn-sm{padding:.38rem .6rem;font-size:.95rem}
.btn-warning{background:var(--warn);border-color:var(--warn);color:#fff}
.btn-warning:hover{filter:brightness(0.95)}
.btn-info{background:#0ea5e9;border-color:#0ea5e9;color:#fff}
.btn-info:hover{filter:brightness(0.95)}

.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:999px;font-size:.85rem;font-weight:600;background:var(--muted);color:#fff}
.bg-success{background:var(--ok)!important;color:#fff!important}
.bg-secondary{background:#1e293b!important;color:#fff!important}
.bg-warning{background:var(--warn)!important;color:#1e293b!important}
.bg-danger{background:var(--danger)!important;color:#fff!important}
.bg-info{background:#0ea5e9!important;color:#fff!important}

.table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.table th,.table td{padding:.65rem .8rem;border-bottom:1px solid var(--border);text-align:left}
.table th{background:#f8fafc;font-weight:600}
.table tr:last-child td{border-bottom:0}

input,select,textarea{padding:.55rem .6rem;border:1px solid var(--border);border-radius:.5rem;background:#fff;color:var(--ink)}
label{font-size:.95rem;color:var(--muted)}
.input-wide{ width:100%; max-width: 560px; }
.form-help{ display:block; color: var(--text-muted-2); margin-top:4px; font-size:.9rem; }

.flashes{list-style:none;margin:0 0 1rem 0;padding:0}
.flashes li{background:var(--panel);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:.4rem;padding:.6rem .8rem;margin:.35rem 0}
.flashes li.success{border-left-color:var(--ok)}
.flashes li.error{border-left-color:var(--danger)}
.flashes li.warning{border-left-color:var(--warn)}

.muted{color:var(--muted)}
.grid{display:grid;gap:var(--space)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:800px){.grid-2{grid-template-columns:1fr}}
.code{font-family:var(--mono);font-size:.92rem;background:#0b12200d;border:1px dashed var(--border);border-radius:.45rem;padding:.35rem .5rem}
.footer{margin:2rem auto 1rem;max-width:1100px;padding:0 1rem;color:var(--muted);font-size:.95rem}

/* --- Overrides: bredere layout + URL-kolommen op één regel --- */
.container{ max-width: 1480px; }           /* was ~1100px, nu ruimer */
.table td.nowrap{ white-space: nowrap; }   /* niet afbreken in deze cellen */

.card.card-centered{ margin-left:auto; margin-right:auto; }

/* ---- Backends-overzicht tweaks ---- */
.container{ max-width: 1680px; }              /* extra breed */
.table-wrap{ max-width:100%; overflow-x:auto; }
.table.sticky thead th{ position: sticky; top: 0; z-index: 2; background:#f8fafc; }
.table td.nowrap{ white-space: nowrap; }
.url{ white-space: nowrap; display:inline-block; }
.btn.copy{ padding:.25rem .5rem; line-height:1; font-size:.9rem; vertical-align:middle; }
.url-row{ display:flex; align-items:center; gap:.45rem; margin:.125rem 0; white-space:nowrap }

/* --- Button outline variants (Bootstrap-like) --- */
.btn-outline-primary{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn-outline-primary:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-outline-secondary{background:transparent;border-color:var(--border);color:var(--ink)}
.btn-outline-secondary:hover{background:#f1f5f9;color:var(--ink);border-color:var(--border)}
/* Danger outline for destructive but de-emphasized actions */
.btn-outline-danger{background:transparent;border-color:#e11d48;color:#e11d48}
.btn-outline-danger:hover{background:#fff0f3;border-color:#e11d48;color:#7f1022}

/* --- Solid button hover overrides to ensure readable text --- */
.btn-primary:hover{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent); filter: brightness(0.96) }
.btn-info:hover{ background: #0ea5e9; color: #fff; border-color: #0ea5e9; filter: brightness(0.95) }
.btn-danger:hover{ background: var(--danger); color: #fff; border-color: var(--danger); filter: brightness(0.95) }

/* ---- Badges voor status/HTTPS/HTTP ---- */
.badge{display:inline-block;padding:.18rem .45rem;border-radius:.5rem;border:1px solid var(--border);font-size:.85rem}
.badge.ok{background:#ecfdf5;border-color:#d1fae5;color:#065f46}
.badge.warn{background:#fff7ed;border-color:#ffedd5;color:#9a3412}
.badge.down{background:#fef2f2;border-color:#fee2e2;color:#991b1b}
.badge.https{background:#eef2ff;border-color:#e0e7ff;color:#3730a3}
.badge.http{background:#eff6ff;border-color:#dbeafe;color:#1e40af}
.badge.mute{background:#f1f5f9;border-color:#e5e7eb;color:#64748b}
.table th.sortable{cursor:pointer}
/* === Overrides: high-contrast badges + smaller canvas + no page-level horiz scroll === */
html,body{overflow-x:hidden}
.container{max-width:1320px} /* was 1680px; terug naar compact, geen page-scroll */
.table-wrap{max-width:100%;overflow-x:auto}

/* Badges — hogere zichtbaarheid */
.badge{display:inline-block;padding:.22rem .5rem;border-radius:.55rem;border:1px solid #cbd5e1;font-weight:600}
.badge.ok   {background:#22c55e1a;border-color:#22c55e;color:#166534}  /* groen */
.badge.warn {background:#f973161a;border-color:#f97316;color:#7c2d12}  /* oranje */
.badge.down {background:#ef44441a;border-color:#ef4444;color:#991b1b}  /* rood */
.badge.https{background:#3b82f61a;border-color:#3b82f6;color:#1e40af}  /* blauw HTTPS */
.badge.http {background:#06b6d41a;border-color:#06b6d4;color:#155e75}  /* cyaan HTTP */
.badge.mute {background:#e2e8f01a;border-color:#cbd5e1;color:#475569}  /* grijs */

.btn.copy{padding:.25rem .5rem;line-height:1;font-size:.9rem;border:1px solid #cbd5e1}
.btn.copy:hover{background:#e2e8f0}
/* === Brand overrides: Audiostreamen stijl — volle badges met wit lettertype === */
:root{
  /* accent-blauw voor UI */
  --accent:#2563eb;
  --accent-ink:#ffffff;
}
/* Status-badges: solide achtergrond + witte tekst voor duidelijk contrast */
.badge{display:inline-block;padding:.24rem .55rem;border-radius:.55rem;border:1px solid transparent;font-weight:600}
.badge.ok   {background:#16a34a;border-color:#16a34a;color:#fff}  /* groen: UP */
.badge.warn {background:#f59e0b;border-color:#f59e0b;color:#fff}  /* oranje: var. statussen */
.badge.down {background:#dc2626;border-color:#dc2626;color:#fff}  /* rood: DOWN */
.badge.https{background:#2563eb;border-color:#2563eb;color:#fff}  /* huisstijl blauw: HTTPS */
.badge.http {background:#0891b2;border-color:#0891b2;color:#fff}  /* cyaan: HTTP */

.btn.copy{padding:.25rem .55rem;line-height:1;font-size:.9rem;border:1px solid #cbd5e1}
.btn.copy:hover{background:#e2e8f0}
/* Verticale stack voor HTTPS/HTTP binnen dezelfde cel */
.stack{ display:flex; flex-direction:column; gap:.25rem; }
.stack .line{ display:flex; align-items:center; gap:.5rem; white-space:nowrap; }

/* ==== Responsive UI (mobiel) ======================================= */
@media (max-width: 900px){
  .container{max-width:100%; padding:0 12px;}
  /* Tabel wordt kaart-stack per rij */
  .table.responsive thead{ display:none; }
  .table.responsive{ border-collapse:separate; border-spacing:0 12px; }
  .table.responsive tbody{ display:block; }
  .table.responsive tr{ display:block; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; }
  .table.responsive td{ display:block; width:100%; padding:6px 0; border:0; }
  .table.responsive td::before{
    content: attr(data-label);
    display:block;
    font-size:.82rem;
    color:#64748b;
    margin-bottom:2px;
  }
  /* Lange URL-regels mogen afbreken op mobiel */
  .table.responsive .nowrap{ white-space: normal; }
  .table.responsive .url{ white-space: normal; word-break: break-all; }
  .table.responsive .stack .line{ flex-wrap: wrap; gap:.35rem; }
  .table-wrap{ overflow:visible; } /* geen horizontale scroll meer op mobiel */
}
/* =================================================================== */

/* Inline warning icon for suspicious port/scheme combos */
.icon-warn{ display:inline-block; margin-left:.35rem; font-size:.95rem; vertical-align:middle; color:#b45309; }
.icon-warn:hover{ opacity:.9; }

/* Legend styling for backends page */
.legend{ display:flex; align-items:center; gap:.4rem; margin:6px 0 12px; font-size:.9rem; color:#475569; }

/* ==== Ops-pagina uniforme key–value layout ==== */
.kv{ display:grid; grid-template-columns: 160px 1fr; gap:10px 16px; margin:8px 0 6px; }
.kv .kv-key{ color:#64748b; font-weight:600; }
.kv .kv-val{ min-width:0; }
.ops-card .ops-content{ padding:8px 4px; }
/* Mobiel */
@media (max-width:900px){
  .kv{ grid-template-columns: 1fr; }
  .kv .kv-key{ font-size:.82rem; margin-top:4px; }
  .stack .line{ flex-wrap: wrap; gap:.35rem; }
  .url{ word-break: break-all; }
}
/* ---- Ops form layout (desktop 2 kolommen, mobiel 1) ---- */
.ops-content form{ display:grid; grid-template-columns: 1fr 1fr; gap:12px 16px; align-items:start; }
.ops-content form .full{ grid-column:1 / -1; }
.ops-content form label{ font-weight:600; color:#334155; display:block; margin-bottom:4px; }
.ops-content form input[type=text],
.ops-content form input[type=password]{ width:100%; padding:.5rem .6rem; border:1px solid #cbd5e1; border-radius:.5rem; }
.ops-content form .actions{ grid-column:1 / -1; display:flex; gap:.5rem; flex-wrap:wrap; }
@media (max-width:900px){
  .ops-content form{ grid-template-columns: 1fr; }
}

/* --- UI polish (tabel & home) -------------------------------------------- */
/* Donkerblauwe header met witte tekst conform styleguide */
.table thead th,
.card .table thead th{
  background: var(--brand-dark) !important;
  color: #fff !important;
}
/* Zorg dat lange URLs binnen table cells netjes afbreken */
.table td a{ word-break: break-all; }
/* Container: standaard geen horizontale scrollbalk tonen; op mobiel zichtbaar indien nodig */
.table-wrap{ overflow-x:hidden; }
/* Ops-kolom compacter: knoppen onder elkaar om breedte te sparen */
.ops-cell{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.ops-cell .ops-line{ display:flex; gap:8px; align-items:center; }

/* Dim disabled backend rows on cards for clarity */
.row-disabled{ opacity:.55; }

/* Small active indicator icon for current redirect target */
.active-indicator{ display:inline-block; width:10px; height:10px; border-radius:50%; background:#16a34a; border:1px solid #0f766e; vertical-align:middle; margin-left:6px; box-shadow:0 0 0 1px #ffffff inset; }
/* On-air/status indicator (small dot next to status badge) */
.status-indicator{ display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle; margin-left:6px; border:1px solid rgba(0,0,0,.12); }
.status-up{ background:#16a34a; border-color:#0f766e; }
.status-warn{ background:#f59e0b; border-color:#b45309; }
.status-down{ background:#dc2626; border-color:#991b1b; }

/* Login card brand style (blue background for white logo) */
/* Stronger selectors to override generic .card */
.card.login-card{ background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.card.login-card h1{ color:#fff !important; }
.card.login-card .muted{ color: rgba(255,255,255,.85) !important; }
.card.login-card input[type=password],
.card.login-card input[type=text],
.card.login-card input[type=checkbox]{ background:#fff !important; color: var(--ink) !important; border-color: #fff !important; }
.card.login-card .btn-primary{ background:#fff !important; border-color:#fff !important; color: var(--accent) !important; }
.card.login-card .btn-primary:hover{ filter: brightness(0.98); }

/* Login form widths */
#login-form input[type=password]{ width: 100%; }
#login-form button[type=submit]{ width: 100%; }
/* ------------------------------------------------------------------------- */

/* --- Zebra subtieler (alleen voor .table.zebra) --------------------------- */
.table.zebra tbody tr:nth-child(odd){ background:#ffffff; }
.table.zebra tbody tr:nth-child(even){ background:#fbfdff; }
.table.zebra tbody tr:hover{ background:#f4f8ff; }
/* Sticky kolommen volgen de rijkleur voor tbody-cellen (header blijft donker) */
.table.zebra.sticky-col tbody td:first-child,
.table.zebra.sticky-col tbody td:nth-child(2){ background: inherit; }
/* ------------------------------------------------------------------------- */
/* Stream-item: meer-acties collapsible stijl */
.right-actions .more-actions{ border-top:1px solid var(--frame); margin-top:.3rem; padding-top:.35rem; }
/* ==== Toasts ============================================================= */
.toast-container{ position: fixed; top: 64px; right: 16px; z-index: 2000; display:flex; flex-direction:column; gap:8px; }
.toast{ opacity:0; transform: translateY(-6px); transition: all .25s ease; background:#fff; color:var(--ink); border:1px solid var(--frame-2); border-left:4px solid var(--brand-blue); border-radius:8px; padding:.5rem .75rem; box-shadow: var(--shadow); max-width: 360px; }
.toast.show{ opacity:1; transform: translateY(0); }
.toast.hide{ opacity:0; transform: translateY(-6px); }
.toast.success{ border-left-color: var(--ok); }
.toast.warning{ border-left-color: var(--warn); }
.toast.danger{ border-left-color: var(--danger); }
/* === Audiostreamen huisstijl overrides (append-only) =========================
   Bron: README_AudioStreamen_Styleguide.md (v1.0 – okt 2025)
   Deze sectie past uitsluitend de UI aan; streaming/302-proxy blijft onaangeroerd.
============================================================================= */

:root{
  --brand-dark:#003366;        /* headers, titels, headerbar */
  --brand-blue:#0273d4;        /* CTA/primary */
  --brand-yellow:#fddc00;      /* accent/warning */
  --brand-green:#2a9d8f;       /* success/OK */
  --brand-red:#e63946;         /* errors */
  --text-dark:#2a2e36;         /* hoofdtekst */
  --text-muted:#6b7280;        /* subtekst */
  --text-muted-2:#94a3b8;
  --frame:#eef1f6;             /* kader/lichtgrijs */
  --frame-2:#e8edf5;
  --card-radius:16px;
  --card-shadow:0 3px 10px rgba(0,0,0,.08);
}

/* Basis type */
html,body{ color:var(--text-dark); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif; }
h1{ font-size:34px; font-weight:700; color:var(--brand-dark); margin:0 0 .5rem; }
h2{ font-size:28px; font-weight:600; color:var(--brand-dark); margin:1rem 0 .5rem; }
h3{ font-size:22px; font-weight:600; color:var(--brand-dark); margin:1rem 0 .5rem; }
.muted{ color:var(--text-muted); }

/* Layout */
.container{ max-width:1280px; margin-left:auto; margin-right:auto; }
section, .section{ padding:36px; background:#fff; border-radius:var(--card-radius); box-shadow:var(--card-shadow); }
.card{ background:#fff; border-radius:var(--card-radius); box-shadow:var(--card-shadow); }
.card-header{ padding:18px 24px; border-bottom:1px solid var(--frame); background:#fff; border-top-left-radius:var(--card-radius); border-top-right-radius:var(--card-radius); }
.card-body{ padding:18px 24px; }
.card-centered{ margin-left:auto; margin-right:auto; }

/* Header/Navigatie (non-breaking; past bestaande markup aan) */
header, .navbar, .topbar{ background:var(--brand-dark); color:#fff; }
header a, .navbar a, .topbar a{ color:#fff; text-decoration:none; }
header a:hover, .navbar a:hover, .topbar a:hover{ color:var(--brand-yellow); }

/* Navbar: consistente styling overal (donker + gele hover) */
.navbar{ background: var(--brand-dark) !important; border-bottom: 1px solid rgba(255,255,255,.08); }
.navbar a{ text-decoration: none !important; }
.navbar .brand{ color:#fff !important; }
.navbar .brand:hover{ color: var(--brand-yellow) !important; }
.navbar .navlinks a{ color:#fff !important; background: transparent !important; padding:.25rem .4rem; border-radius:.25rem; }
.navbar .navlinks a:hover{ color:var(--brand-yellow) !important; background:rgba(255,255,255,.10) !important; }
.navbar .btn.btn-outline.btn-sm{ background: transparent !important; border-color: rgba(255,255,255,.75) !important; color:#fff !important; }
.navbar .btn.btn-outline.btn-sm:hover{ background: transparent !important; border-color: var(--brand-yellow) !important; color: var(--brand-yellow) !important; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .75rem; border-radius:10px; border:1px solid transparent; font-weight:600; line-height:1; text-decoration:none; }
.btn-sm{ padding:.3rem .55rem; font-size:.9rem; border-radius:8px; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn-primary{ background:var(--brand-blue); color:#fff; }
.btn-primary:hover{ background:#025da9; }
.btn-ghost{ background:#fff; color:var(--brand-blue); border-color:var(--brand-blue); }
.btn-ghost:hover{ background:#f5f9ff; }
.btn-warning{ background:var(--brand-yellow); color:var(--brand-dark); }
.btn-success{ background:var(--brand-green); color:#fff; }
.btn-error{ background:var(--brand-red); color:#fff; }
.btn.copy{ font-weight:700; }

/* Badges (mappen bestaande .badge varianten op huisstijl) */
.badge{ display:inline-block; padding:.2rem .45rem; border-radius:8px; font-weight:700; font-size:.8rem; border:1px solid transparent; }
.badge.ok{ background:rgba(42,157,143,.12); color:#11695f; border-color:rgba(42,157,143,.35); }          /* groen */
.badge.warn{ background:rgba(253,220,0,.18); color:#7a6400; border-color:rgba(253,220,0,.45); }         /* geel */
.badge.down{ background:rgba(230,57,70,.12); color:#7e1e27; border-color:rgba(230,57,70,.35); }         /* rood */
.badge.https{ background:rgba(2,115,212,.12); color:#0a4f83; border-color:rgba(2,115,212,.35); }       /* blauw */
.badge.http{ background:#f7f3e7; color:#7a6400; border-color:rgba(253,220,0,.35); }                     /* warm/gele hint */
.badge.mute{ background:#f3f4f6; color:#6b7280; border-color:#e5e7eb; }

/* Tabellen */
.table{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; }
.table thead th{ position:sticky; top:0; background:var(--brand-dark); color:#fff; text-align:left; padding:.6rem .7rem; }
.table tbody td{ padding:.55rem .7rem; border-bottom:1px solid var(--frame-2); vertical-align:top; }
.table tbody tr:nth-child(odd){ background:#fff; }
.table tbody tr:nth-child(even){ background:#f9fbff; }      /* zachte hover-kleur */
.table tbody tr:hover{ background:#f5f9ff; }
.table .nowrap{ white-space:nowrap; }
.table th.sortable{ cursor:pointer; }

/* Frontend/Backend kolommen gestapeld */
.stack{ display:flex; flex-direction:column; gap:.25rem; }
.stack .line{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }

/* Legenda & icoon */
.legend{ display:flex; align-items:center; gap:.4rem; margin:6px 0 12px; font-size:.9rem; color:#475569; }
.icon-warn{ display:inline-block; margin-left:.35rem; font-size:.95rem; vertical-align:middle; color:#b45309; }
.icon-warn:hover{ opacity:.9; }

/* === Left sidebar layout (simple, fixed per page) ================== */
.layout{ display:flex; align-items:flex-start; gap:16px; }
.layout .sidebar{ flex: 0 0 220px; }
.layout .content{ flex: 1 1 auto; min-width:0; margin-left: 0; padding-right:16px; }
.layout .content.content--full{ margin-left: 0; }
.side-nav{ position: fixed; left:0; top: 64px; bottom: 0; width: 220px; overflow:auto; background:#fff; border-right:1px solid var(--frame-2); padding:.6rem .6rem; }
/* removed sidebar brand block (logo is in top navbar) */
.side-nav .side-title{ font-weight:700; color:#334155; margin:.2rem .25rem .4rem; font-size:.95rem; }
.side-nav a{ display:block; padding:.4rem .5rem; border-radius:.45rem; color:#0f172a; }
.side-nav a:hover{ background:#f1f5f9; text-decoration:none; }
.side-nav a.active{ background:#eaf2ff; color:var(--accent); font-weight:700; border-left:3px solid var(--accent); }
.side-nav .home-link{ display:block; padding:.5rem .5rem; font-weight:800; color:#0f172a; margin-bottom:.25rem; }
.side-nav .home-link:hover{ text-decoration:none; background:#f8fafc; }
@media (max-width: 900px){
  .layout{ display:block; }
  .layout .sidebar{ display:none; }
  .layout .content{ margin-left: 0; }
}

/* Full-width app container */
.container{ max-width:100% !important; padding-left: 0 !important; padding-right: 16px; }

/* Fluid grid that fills available width with cards */
.grid-fluid{ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
@media (max-width: 720px){ .grid-fluid{ grid-template-columns: 1fr; } }

/* Mobile: zet tabellen om naar blokken waar nodig (we hebben dit eerder al, hier alleen kleur/tokens consistent) */
@media (max-width: 880px){
  .container{ padding:0 12px; }
}
/* ========================================================================== */
/* Fallback-banner */
.fallback-banner{ background:#fff8e1; border-bottom:1px solid #facc15; }
.fallback-banner .inner{ max-width:1280px; margin:0 auto; padding:.4rem .85rem; color:#78350f; }
.card.highlight{ box-shadow: 0 0 0 3px rgba(2,115,212,.25); }

/* ---- readability fixes (append-only, UI-only) ---- */
.table-wrap{ overflow-x:auto; }
.table thead th, .card .table thead th{
  background: var(--brand-dark) !important;
  color: #fff !important;
}
/* Laat URLs binnen de gestapelde lijnen netjes afbreken op mobiel/smal */
.stack .line a{ word-break: break-all; }
/* === Backends table – micro-polish (append-only) =========================== */
/* Compactere cellen */
.table.compact td, .table.compact th{ padding:6px 8px; }
.table td{ vertical-align: middle; }

/* Alleen de tabel mag horizontaal scrollen; pagina blijft stabiel */
.table-wrap{ overflow-x: auto; }

/* URLs: netjes afbreken, ook binnen gestapelde regels */
.table td a,
.stack .line a{ word-break: break-all; line-break: anywhere; }

/* ==== Backends beheer pagina ============================================= */
.backends-head{ margin-bottom:16px; }
.backends-head__line{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.backends-head__title{ margin:0; font-size:1.65rem; }
.backends-head__subtitle{ margin:.35rem 0 0 0; }
.backends-head__hint{ margin:.35rem 0 0 0; max-width:640px; }
.backends-head__back{ flex:0 0 auto; display:inline-flex; align-items:center; }
.backends-actions-grid{ display:grid; gap:16px; margin:16px 0; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
.stack.stack-lg{ gap:.85rem; }
.field-row{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.field-row .muted{ font-size:.95rem; }
.radio-option{ display:flex; align-items:center; gap:.35rem; font-weight:600; }
.radio-option input{ margin:0; }
.form-hint{ font-size:.9rem; color:var(--muted); }
.btn-full{ width:100%; display:inline-flex; justify-content:center; align-items:center; }
.backends-existing{ margin-top:16px; display:flex; flex-direction:column; gap:1.25rem; }
.backend-columns{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(360px, 1fr)); }
.backend-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75rem; }
.backend-item{ border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:0 4px 16px rgba(15,23,42,.06); padding:.85rem 1rem; display:flex; flex-direction:column; gap:.6rem; }
.backend-item__top{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap; }
.backend-item__url{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.backend-item__actions{ display:flex; flex-direction:column; gap:.55rem; }
.backend-item__action-row{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.backend-checkbox{ display:flex; align-items:center; gap:.35rem; font-size:.95rem; }
.backend-checkbox input{ margin:0; }
.backend-prio-input{ width:120px; }
.badge-subtle{ background:#e2e8f0; color:#1e293b; }
.backend-creds{ font-size:1rem; line-height:1; }
.backends-save{ display:flex; justify-content:flex-end; }
.backends-save .btn{ min-width:220px; }

@media (max-width: 960px){
  .backends-head__line{ flex-direction:column; align-items:flex-start; }
  .backends-head__back{ width:100%; justify-content:center; }
  .backend-columns{ grid-template-columns:1fr; }
}

.backends-list-head{ display:flex; flex-direction:column; gap:.9rem; margin-bottom:16px; }
.backends-list-head__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.backends-list-head__actions{ display:flex; flex-wrap:wrap; gap:.5rem; }
.backends-list-head__controls{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px; }
.backends-list-head__filter{ display:flex; flex-direction:column; gap:.35rem; flex:1 1 320px; }
.backends-list-head__filter input{ width:100%; }
.backends-list-head__legend{ display:flex; align-items:center; gap:.45rem; flex:0 0 auto; }
.backends-list-head__info{ border-top:1px solid var(--border); padding-top:.75rem; }
.backends-list-head__info summary{ font-weight:600; cursor:pointer; }
.backends-list-head__info ul{ margin:.5rem 0 0 1.1rem; padding:0; }
.backends-list-head__info li{ margin:.3rem 0; }
.backends-list-table{ padding-top:1.1rem; }
.backends-list-table .table{ margin-bottom:0; }
.backends-empty-msg{ text-align:center; margin:12px 0 0 0; }
.listeners-cell{ text-align:right; font-variant-numeric:tabular-nums; }
.listeners-count{ display:inline-block; min-width:26px; text-align:right; }
.listeners-count.has-value{ color:var(--accent); font-weight:600; }
.actions-row form{ margin:0; }
.actions-row{ display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; }
.actions-row .btn{ white-space:nowrap; }


@media (max-width: 960px){
  .backends-list-head__top{ flex-direction:column; align-items:flex-start; }
  .backends-list-head__actions{ width:100%; }
  .backends-list-head__actions .btn{ flex:1 1 auto; text-align:center; }
  .backends-list-head__legend{ width:100%; }
}

/* Badges in stack-lijnen op gelijk formaat voor nette uitlijning */
.stack .line .badge{ min-width:56px; }
.stack.stack-tight{ gap:.35rem; }

/* Sticky kolommen – visuele scheiding via schaduwlijn */
.table.sticky-col{ --sticky1: 80px; } /* breedte eerste kolom incl. padding */
.table .col-id{ width:var(--sticky1); min-width:var(--sticky1); }
.table .col-stream{ min-width:280px; }

.table.sticky-col thead th:first-child,
.table.sticky-col tbody td:first-child{
  position: sticky; left: 0; z-index: 3; background:#fff;
  box-shadow: 2px 0 0 var(--frame-2);
}

.table.sticky-col thead th:nth-child(2),
.table.sticky-col tbody td:nth-child(2){
  position: sticky; left: var(--sticky1); z-index: 2; background:#fff;
  box-shadow: 2px 0 0 var(--frame-2);
}

/* Smal scherm: sticky uit voor eenvoud */
@media (max-width: 1024px){
  .table.sticky-col thead th:first-child,
  .table.sticky-col tbody td:first-child,
  .table.sticky-col thead th:nth-child(2),
  .table.sticky-col tbody td:nth-child(2){
    position: static; left:auto; box-shadow:none;
  }
}
/* ========================================================================== */

/* === Header search (append-only) ========================================= */
.nav-search input{ border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.10); color:#fff; padding:.35rem .6rem; border-radius:.45rem; min-width:220px; }
.nav-search input::placeholder{ color: rgba(255,255,255,.85); }
.nav-search input:focus{ outline:none; border-color: var(--brand-yellow); box-shadow: 0 0 0 2px rgba(253,220,0,.25); }

/* === Bootstrap page spacing override (beheerpagina) ====================== */
body.p-4{ padding-top: 0 !important; }