:root {
    /* Globale UI-Werte: hier zentral anpassen */
    --app-text: #1d2733;
    --app-font-size: 0.80rem;
    --app-table-font-size: 0.80rem;
    --app-small-font-size: 0.70rem;
    --app-row-hover: #eaf8ef;
    --app-green: #20aa59;
    --app-green-dark: #14954a;
    --app-border: #dfe4ea;
    --app-muted: #6c7785;
    --app-red: #ff3b30;
    --app-orange: #ff8a00;
    --app-radius: .45rem;
    --app-shadow: 0 1px 2px rgba(16,24,40,.03);
  }

  body {
    background:#f3f4f6;
  }

  main.dashboard-main {
    color: var(--app-text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--app-font-size);
    font-weight: 400;
  }

  .dashboard-main,
  .dashboard-main .table,
  .dashboard-main .table > :not(caption) > * > *,
  .dashboard-main .form-control { color: var(--app-text); }

  .app-container { max-width: 1680px; }
  .page-title { font-size: 1.6rem; font-weight: 600; margin-bottom: 1.25rem; }
  .panel-card, .metric-card { background:#fff; border:1px solid var(--app-border); border-radius:var(--app-radius); box-shadow:var(--app-shadow); }
  .metric-card { min-height:120px; padding:0.8rem 1.1rem; }
  .metric-title { display:flex; align-items:center; gap:.55rem; font-weight:600; }
  .metric-value { font-size:2rem; line-height:1; margin:1rem 0 .55rem; font-weight:500; }
  .metric-meta { color:var(--app-muted); font-size:var(--app-small-font-size); display:flex; align-items:center; gap:.5rem; }
  .dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex:0 0 auto; }
  .quick-action { min-height:56px; border:1px solid var(--app-green); border-radius:.35rem; background:var(--app-green); color:#fff; text-decoration:none; display:flex; align-items:center; justify-content:space-between; padding:.35rem 1rem; transition:color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; }
  .quick-action, .quick-action small, .quick-action strong, .quick-action i { color:#fff; }
  .quick-action:hover { background:var(--app-green-dark); border-color:var(--app-green-dark); color:#fff; }
  .quick-action:hover, .quick-action:hover small, .quick-action:hover strong, .quick-action:hover i { color:#fff; }
  .quick-action small { display:block; font-size:var(--app-small-font-size); opacity:.9; }
  .quick-action strong { font-size:1.05rem; }
  .section-heading { font-size:1.05rem; font-weight:600; margin:0; }
  .filter-label { font-weight:600; margin-bottom:.35rem; }
  .form-control, .btn { min-height:30px; border-radius:.25rem; font-size:var(--app-font-size); }
  .form-control { border-color:var(--app-border); }
  .form-control::placeholder { color:var(--app-muted); }
  .btn-success,
  .btn-outline-success {
    --bs-btn-color: var(--app-green-dark);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--app-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-green-dark);
    --bs-btn-hover-border-color: var(--app-green-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--app-green-dark);
    --bs-btn-active-border-color: var(--app-green-dark);
    --bs-btn-disabled-color: var(--app-green-dark);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--app-green);
    color: var(--app-green-dark);
    background: transparent;
    border-color: var(--app-green);
    font-weight: 500;
  }
  .btn-success i,
  .btn-outline-success i { color: currentColor; }
  .btn-outline-secondary {
    --bs-btn-color: var(--app-green-dark);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--app-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-green-dark);
    --bs-btn-hover-border-color: var(--app-green-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--app-green-dark);
    --bs-btn-active-border-color: var(--app-green-dark);
    color: var(--app-green-dark);
    background: transparent;
    border-color: var(--app-green);
    font-weight: 500;
  }
  .btn-outline-secondary i { color: currentColor; }
  .table-scroll { overflow:auto; scrollbar-width:thin; scrollbar-color:#aab2bd #f2f4f7; }
  .table-scroll::-webkit-scrollbar { width:10px; height:10px; }
  .table-scroll::-webkit-scrollbar-track { background:#f2f4f7; }
  .table-scroll::-webkit-scrollbar-thumb { background:#aab2bd; border-radius:999px; border:2px solid #f2f4f7; }
  .expiring-scroll { max-height:220px; }
  .stations-scroll { max-height:330px; }
  .app-table { --bs-table-bg:#fff; --bs-table-color:var(--app-text); margin-bottom:0; min-width:980px; font-size:var(--app-table-font-size); border-collapse:separate; border-spacing:0; }
  .app-table th { position:sticky; top:0; z-index:2; background:#fff; font-size:var(--app-table-font-size); font-weight:600; color:var(--app-text); border-bottom:1px solid var(--app-border); white-space:nowrap; padding:.5rem 1rem; }
  .app-table td { color:var(--app-text); vertical-align:middle; border-bottom:1px solid #e9edf1; padding:.4rem 1rem; white-space:nowrap; }
  .app-table tbody tr:last-child td { border-bottom:0; }
  .app-table tbody tr > * { transition: background-color .15s ease-in-out; }
  @media (hover: hover) and (pointer: fine) {
    .app-table tbody tr:hover > * { background-color: var(--app-row-hover) !important; }
  }
  .text-link { color:#0c9b4d !important; font-weight:600; }
  .text-link-danger { color:var(--app-red) !important; font-weight:600; }
  a.text-link, a.text-link-danger { text-decoration:none; }
  a.text-link:hover, a.text-link-danger:hover { text-decoration:underline; text-underline-offset:2px; }
  .subject-badge { width:19px; height:29px; border-radius:3px; display:inline-flex; align-items:flex-start; justify-content:center; padding-top:4px; color:#fff !important; font-size:.6rem; }
  .badge-brown { background:#b66f2d; } .badge-orange-brown { background:#a94d08; } .badge-blue { background:#278fb5; } .badge-teal { background:#1ca58c; }
  .status-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
  .status-online { background:#27a65c; } .status-offline { background:#f04438; }
  .panel-header { padding:1.1rem 1.2rem .65rem; }
  .filters { padding:.35rem 1.2rem 1rem; }

/* =========================================================
   Playlist / Sujetverwaltung
   Ergänzungen zum bestehenden Dashboard-Stylesheet
   ========================================================= */
:root {
  --app-green-soft: #eaf8ef;
}

main.playlist-main {
  color:var(--app-text);
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:var(--app-font-size);
}

.playlist-main,
.playlist-main .table,
.playlist-main .table > :not(caption) > * > *,
.playlist-main .form-control { color:var(--app-text); }

.playlist-actions .btn {
  min-height:34px;
  padding:.35rem .9rem;
  border-radius:.28rem;
  font-size:var(--app-font-size);
  font-weight:600;
}

.playlist-periods { overflow:hidden; }
.period-toolbar { min-height:76px; padding:1rem 1.25rem; border-bottom:1px solid var(--app-border); }
.period-archive { color:var(--app-text); padding:.25rem .4rem; text-decoration:none; }
.period-archive:hover { color:var(--app-green-dark); }

.period-list { display:block; }
.period-item {
  min-height:54px;
  padding:.75rem 1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  color:var(--app-text);
  text-decoration:none;
  border-bottom:1px solid var(--app-border);
  border-left:3px solid transparent;
  transition:background-color .15s ease, border-color .15s ease;
}
.period-item:last-child { border-bottom:0; }
.period-item:hover { background:#f8faf9; }
.period-item.active { background:var(--app-green-soft); border-left-color:var(--app-green); }
.period-item i { color:#56616e; font-size:1rem; }
.period-count { color:var(--app-green-dark); font-size:var(--app-small-font-size); white-space:nowrap; }

.playlist-panel { overflow:hidden; }
.playlist-panel-head { min-height:78px; padding:1rem 1.25rem; border-bottom:1px solid var(--app-border); }
.playlist-search { width:250px; }
.playlist-search .input-group-text,
.playlist-search .form-control { height:34px; border-color:#cfd7e2; font-size:var(--app-font-size); }
.playlist-search .input-group-text { color:#45628b; }
.playlist-search .form-control:focus { box-shadow:none; border-color:#cfd7e2; }

.playlist-table-scroll { min-height:630px; }

.playlist-table {
  --bs-table-bg:#fff;
  --bs-table-color:var(--app-text);
  min-width:1220px;
  border-collapse:separate;
  border-spacing:0;
  font-size:var(--app-table-font-size);
}
.playlist-table th {
  background:#fff;
  color:#2e3742;
  font-weight:600;
  white-space:nowrap;
  border-bottom:1px solid var(--app-border);
  padding:.72rem .55rem;
}
.playlist-table td {
  height:120px;
  padding:.8rem .55rem;
  border-bottom:1px solid #e9edf1;
  vertical-align:middle;
  white-space:nowrap;
}
.playlist-table tbody tr:last-child td { border-bottom:0; }
.playlist-table tbody tr > * { transition:background-color .15s ease; }
@media (hover:hover) and (pointer:fine) {
  .playlist-table tbody tr:hover > * { background:var(--app-row-hover) !important; }
}

.drag-col { width:24px; }
.num-col { width:24px; }
.check-col { width:32px; }
.menu-col { width:38px; }
.drag-handle { color:#111; font-size:1rem; cursor:grab; }
.row-number { color:#111; }
.form-check-input { width:14px; height:14px; margin:0; border-color:#8d98a6; border-radius:2px; }
.row-menu { color:#111; text-decoration:none; padding:.2rem .35rem; }
.row-menu:hover { color:var(--app-green-dark); }

.subject-thumb {
  position:relative;
  display:inline-block;
  border-radius:3px;
  overflow:hidden;
  vertical-align:middle;
}
.subject-tall { width:35px; height:50px; }
.subject-wide { width:52px; height:34px; }
.thumb-brown { background:#cf6e08; }
.thumb-dark { background:#a94d08; }
.thumb-orange { background:#ef6c00; }
.thumb-medium { background:#b45d0b; }
.thumb-blue { background:#188ead; }
.subject-thumb i {
  position:absolute;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#f8bf66;
}
.subject-thumb i:first-child { left:7px; top:9px; }
.subject-thumb i:last-child { right:7px; bottom:9px; }
.subject-wide i:first-child { left:17px; top:12px; }
.subject-wide i:last-child { right:8px; top:7px; bottom:auto; }

@media (max-width:1199.98px) {
  .playlist-periods { height:auto !important; }
  .period-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
  .period-item:nth-last-child(1) { grid-column:1 / -1; }
  .playlist-table-scroll { min-height:0; }
}

@media (max-width:575.98px) {
  .playlist-actions { justify-content:stretch !important; }
  .playlist-actions .btn { flex:1 1 100%; }
  .period-list { grid-template-columns:1fr; }
  .period-item:nth-last-child(1) { grid-column:auto; }
  .playlist-search { width:100%; }
}

.row-menu-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: .25rem;
    color: var(--app-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.row-menu-btn:hover,
.row-menu-btn:focus,
.row-menu-btn.show {
    color: var(--app-green-dark);
    background: var(--app-row-hover);
}

.dropdown-menu {
    min-width: 160px;
    padding: .35rem 0;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: 0 6px 18px rgba(16, 24, 40, .10);
    font-size: var(--app-font-size);
}

.dropdown-item {
    padding: .5rem .85rem;
    display: flex;
    align-items: center;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--app-row-hover);
}

.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
    background: #fff1f0;
    color: var(--app-red) !important;
}

.dropdown-divider {
    margin: .3rem 0;
}