/* ── USBauto Dashboard · Dark Theme ─────────────────────────────────────── */
:root {
  --bg:       #0f0f12;
  --bg2:      #18181f;
  --bg3:      #22222c;
  --border:   #2e2e3a;
  --text:     #d4d4d8;
  --text-dim: #6b7280;
  --accent:   #3b82f6;
  --green:    #22c55e;
  --yellow:   #eab308;
  --red:      #ef4444;
  --orange:   #f97316;
}

body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.navbar      { background: var(--bg2); border-bottom: 1px solid var(--border); }
.navbar-brand{ color: #fff !important; font-size: 1.1rem; letter-spacing: .05em; }
.nav-link    { color: var(--text-dim) !important; font-size: .9rem; padding: .25rem .6rem;
               border-radius: 4px; transition: color .15s; }
.nav-link:hover, .nav-link.active { color: #fff !important; }
.nav-sep     { color: var(--border); }
.nav-user    { font-size: .85rem; color: var(--text-dim); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.main-wrap   { padding: 1.5rem 2rem; max-width: 1400px; margin: 0 auto; }
.page-header { margin-bottom: 1.5rem; }
.page-header h4 { color: #fff; }

/* ── Info Cards ──────────────────────────────────────────────────────────── */
.info-card       { background: var(--bg2); border: 1px solid var(--border);
                   border-radius: 8px; padding: 1.25rem; }
.info-card-title { font-size: .75rem; font-weight: 600; text-transform: uppercase;
                   letter-spacing: .08em; color: var(--text-dim); margin-bottom: .75rem; }
.info-table      { width: 100%; font-size: .88rem; }
.info-table td   { padding: .25rem .5rem .25rem 0; vertical-align: top; }
.info-table td:first-child { color: var(--text-dim); width: 130px; }

/* ── Location Grid ───────────────────────────────────────────────────────── */
.loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }

.loc-card {
  display: block; text-decoration: none; color: var(--text);
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 1rem 1rem 1rem 1.25rem;
  position: relative; transition: border-color .15s, transform .1s;
}
.loc-card:hover { border-color: #4b5563; transform: translateY(-1px); color: var(--text); }

/* Status dot + left border */
.loc-dot { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 8px 0 0 8px; }

.loc-playing .loc-dot  { background: var(--green); }
.loc-paused  .loc-dot  { background: var(--yellow); }
.loc-warning .loc-dot  { background: var(--orange); }
.loc-offline .loc-dot  { background: var(--red); }

.loc-name   { font-weight: 600; font-size: 1rem; margin-bottom: .15rem; }
.loc-status { font-size: .8rem; margin-bottom: .5rem; }
.loc-playing .loc-status { color: var(--green); }
.loc-paused  .loc-status { color: var(--yellow); }
.loc-warning .loc-status { color: var(--orange); }
.loc-offline .loc-status { color: var(--red); }

.loc-file   { font-size: .82rem; color: var(--text-dim); margin-bottom: .5rem;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-meta   { font-size: .78rem; color: var(--text-dim); display: flex; gap: .5rem;
              flex-wrap: wrap; margin-bottom: .35rem; }
.loc-next   { font-size: .78rem; background: var(--bg3); border-radius: 4px;
              padding: .25rem .5rem; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Status badges ───────────────────────────────────────────────────────── */
.badge-paused { color: var(--yellow); }
.badge-muted  { color: var(--red); }
.badge-own    { font-size: .7rem; background: var(--bg3); color: var(--text-dim);
                padding: .1rem .4rem; border-radius: 3px; margin-left: .3rem; }

.status-badge { font-size: .8rem; padding: .2rem .6rem; border-radius: 4px; }
.status-playing { background: rgba(34,197,94,.15); color: var(--green); }
.status-paused  { background: rgba(234,179,8,.15);  color: var(--yellow); }
.status-warning { background: rgba(249,115,22,.15); color: var(--orange); }
.status-offline { background: rgba(239,68,68,.15);  color: var(--red); }

/* ── Assignment status ───────────────────────────────────────────────────── */
.asgn-pending     { color: var(--yellow); }
.asgn-downloading { color: var(--accent); }
.asgn-ready       { color: #a78bfa; }
.asgn-active      { color: var(--green); }
.asgn-expired     { color: var(--text-dim); }
.asgn-done        { color: var(--text-dim); }
.app-footer       { text-align: center; color: var(--text-dim); font-size: .75rem; padding: 1.5rem 0 1rem; }
.asgn-cancelled   { color: var(--red); text-decoration: line-through; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-control-dark, .form-select-dark {
  background: var(--bg3) !important; border-color: var(--border) !important;
  color: var(--text) !important;
}
.form-control-dark::placeholder { color: var(--text-dim); }
.form-control-dark:focus, .form-select-dark:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,.25) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-xs { font-size: .75rem; padding: .15rem .5rem; }
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: #2563eb; border-color: #2563eb; }

/* ── Dropzone ────────────────────────────────────────────────────────────── */
.dropzone {
  border: 2px dashed var(--border); border-radius: 8px;
  padding: 2rem; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s; font-size: .9rem;
}
.dropzone:hover, .dropzone.drag-over {
  border-color: var(--accent); background: rgba(59,130,246,.06);
}

/* ── Progress ────────────────────────────────────────────────────────────── */
.progress-dark { background: var(--bg3); border-radius: 4px; height: 8px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 4px;
                 transition: width .2s; }

/* ── Location checkbox list ──────────────────────────────────────────────── */
.loc-check-list  { background: var(--bg3); border: 1px solid var(--border);
                   border-radius: 6px; max-height: 180px; overflow-y: auto; padding: .5rem; }
.loc-check-item  { display: block; padding: .25rem .4rem; border-radius: 4px;
                   cursor: pointer; font-size: .88rem; }
.loc-check-item:hover { background: var(--border); }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-dark { background: var(--bg2); color: var(--text); border: 1px solid var(--border); }
.modal-dark .modal-header { border-bottom-color: var(--border); }
.modal-dark .modal-footer { border-top-color: var(--border); }

/* ── INI snippet ─────────────────────────────────────────────────────────── */
.ini-snippet {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 6px;
  padding: .75rem 1rem; font-size: .83rem; color: #a3e635; margin-bottom: .5rem;
}

/* ── API key blur ────────────────────────────────────────────────────────── */
.blur-text { filter: blur(4px); transition: filter .2s; user-select: none; }

/* ── Login ───────────────────────────────────────────────────────────────── */
.login-body { display: flex; align-items: center; justify-content: center;
              min-height: 100vh; background: var(--bg); }
.login-box  { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
              padding: 2.5rem; width: 100%; max-width: 360px; }
.login-logo { font-size: 1.6rem; font-weight: 700; color: #fff; text-align: center; }
.login-sub  { text-align: center; color: var(--text-dim); font-size: .85rem; margin-top: -.2rem; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 4rem 2rem; color: var(--text-dim); }
.empty-icon  { font-size: 3rem; margin-bottom: 1rem; }

/* ── Table tweaks ────────────────────────────────────────────────────────── */
.table-dark { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255,255,255,.02); }
.table-dark th { color: var(--text-dim); font-weight: 500; font-size: .8rem;
                 text-transform: uppercase; letter-spacing: .05em; }

/* ── Code ────────────────────────────────────────────────────────────────── */
code { color: #a3e635; background: var(--bg3); padding: .1rem .35rem; border-radius: 3px; }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Ereignis-Feed (Standort-Seite) */
.event-feed { max-height: 320px; overflow-y: auto; font-size: .82rem; font-family: 'Consolas','Segoe UI Mono',monospace; }
.event-row  { padding: 2px 0; border-bottom: 1px solid var(--bg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-row:last-child { border-bottom: none; }
.event-time { color: var(--text-dim); }
.event-name { color: var(--text); }

/* Standort-Übersicht als gruppierte Liste (Build 036) */
.group-header { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-dim); font-weight: 600; padding: .25rem .25rem .5rem; }
.loc-table { font-size: .9rem; }
.loc-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-dim); border-bottom: 1px solid var(--border); font-weight: 600; }
.loc-row { cursor: pointer; border-left: 3px solid transparent; }
.loc-row:hover { background: var(--bg3) !important; }
.loc-row.loc-playing { border-left-color: var(--green); }
.loc-row.loc-paused  { border-left-color: var(--yellow); }
.loc-row.loc-warning { border-left-color: var(--orange, #f97316); }
.loc-row.loc-offline { border-left-color: var(--red); }
.loc-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background: var(--text-dim); }
.loc-playing .loc-dot { background: var(--green); }
.loc-paused  .loc-dot { background: var(--yellow); }
.loc-warning .loc-dot { background: var(--orange, #f97316); }
.loc-offline .loc-dot { background: var(--red); }
.loc-sub { font-size: .72rem; color: var(--text-dim); display: flex; gap: .4rem; margin-top: .15rem; }
.cell-playing .pill-set { display:inline-block; font-size:.72rem; background: rgba(59,130,246,.15);
  color: var(--accent); border-radius: 4px; padding: .1rem .4rem; margin-right: .35rem; }
.cell-playing .film { font-size: .82rem; }
.badge-locked { font-size: .7rem; background: rgba(234,179,8,.15); color: var(--yellow);
  border-radius: 4px; padding: .1rem .45rem; }

/* Gruppierung: Toolbar, Ausklappen (Build 037) */
.group-toolbar { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: .5rem .75rem; }
.group-header { cursor: pointer; user-select: none; }
.group-caret { display: inline-block; transition: transform .15s; color: var(--text-dim); }
.group-block.collapsed .group-caret { transform: rotate(-90deg); }
.group-block.collapsed .group-body { display: none; }
.loc-table input[type=checkbox] { cursor: pointer; }

/* Gruppen-Tabs + Tag-Chips (Build 036 / Multi-Gruppe) */
.group-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--border); padding-bottom: .5rem; }
.gtab { background: var(--bg2); color: var(--text-dim); border: 1px solid var(--border);
  border-radius: 6px; padding: .3rem .8rem; font-size: .85rem; cursor: pointer; }
.gtab:hover { color: var(--text); }
.gtab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.gtab-n { opacity: .7; font-size: .78rem; }
.cell-tags .tag-chip { display: inline-block; font-size: .72rem; background: var(--bg3);
  color: var(--text); border-radius: 4px; padding: .1rem .45rem; margin: 0 .25rem .2rem 0; }
.cell-tags .tag-lock { font-size: .78rem; }

/* Gruppen-Mehrfachauswahl im Standort-Dialog */
.group-pick { display: flex; flex-wrap: wrap; gap: .4rem; max-height: 140px; overflow-y: auto;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: .5rem; }
.group-pick-item { font-size: .85rem; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px; padding: .2rem .55rem; cursor: pointer; display: inline-flex; gap: .35rem; align-items: center; }
.group-pick-item input { cursor: pointer; }

/* Playlist auf dem Gerät (Monitoring) */
.playlist { margin: 0; padding-left: 1.6rem; max-height: 320px; overflow-y: auto; }
.playlist li { padding: .2rem .4rem; border-radius: 4px; }
.playlist li.playing { background: rgba(34,197,94,.15); color: var(--green); font-weight: 600; }
.playlist li.playing::marker { color: var(--green); }

/* Zentraler Log (Build 041) */
.log-box { max-height: 70vh; overflow-y: auto; font-family: 'Consolas','Segoe UI Mono',monospace; font-size: .82rem; }
.log-row { padding: .25rem .3rem; border-bottom: 1px solid var(--bg3); white-space: pre-wrap; word-break: break-word; }
.log-row:last-child { border-bottom: none; }
.log-time { color: var(--text-dim); margin-right: .3rem; }
.log-src  { color: var(--text-dim); }

/* Rechte-Auswahl (Build 043) */
.perm-list { display: flex; flex-direction: column; gap: .3rem; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 6px; padding: .5rem; }
.perm-item { font-size: .85rem; display: flex; gap: .4rem; align-items: center; cursor: pointer; }

/* Onboarding-Code */
.onboard-code { font-family: 'Consolas',monospace; font-size: 1rem; font-weight: 700;
  letter-spacing: 1px; color: var(--accent); background: var(--bg3); padding: .1rem .5rem; border-radius: 4px; }