/* =========================================================
   M3U Playlist Studio — stylesheet
   Design: broadcast-console identity — amber "on-air" tally
   accent against a near-black console body, monospace for
   stream data, sans for UI chrome.
   ========================================================= */

:root{
  --bg:            #0b0d12;
  --panel:         #12151d;
  --panel-alt:     #171b25;
  --elevated:      #1c212c;
  --border:        #262c3a;
  --border-soft:   #1c212c;
  --text:          #e7e9ee;
  --muted:         #8a92a6;
  --accent:        #f4b740;   /* on-air amber */
  --accent-dim:    #8a651f;
  --blue:          #5b9dff;
  --danger:        #f2555a;
  --success:       #33d17a;
  --radius:        10px;
  --radius-sm:     6px;
  --font-ui:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Bengali", "Hind Siliguri", sans-serif;
  --font-mono:      ui-monospace, "SFMono-Regular", "IBM Plex Mono", Consolas, Menlo, monospace;
  --shadow:        0 8px 24px rgba(0,0,0,0.35);
}

[data-theme="light"]{
  --bg:            #f4f5f7;
  --panel:         #ffffff;
  --panel-alt:     #f7f8fa;
  --elevated:      #ffffff;
  --border:        #dfe2e8;
  --border-soft:   #e9ebef;
  --text:          #1a1d24;
  --muted:         #6b7280;
  --accent:        #b3790a;
  --accent-dim:    #e0b25c;
  --blue:          #2e6be6;
  --shadow:        0 8px 24px rgba(20,20,30,0.08);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.45;
  -webkit-tap-highlight-color: transparent;
}
input,select,textarea,button{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; }
small{ color:var(--muted); font-size:11.5px; }
h3{ margin:0 0 14px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
h4{ margin:14px 0 8px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }

::selection{ background:var(--accent); color:#1a1200; }

/* ---------- layout shell ---------- */
.topbar{
  height:52px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 14px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
}
.topbar__brand{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.brand-mark{
  background:var(--accent); color:#1a1200;
  font-weight:800; font-size:11px; letter-spacing:.05em;
  padding:4px 7px; border-radius:5px;
}
.brand-name{ font-weight:600; font-size:14px; }
.topbar__stats{
  display:flex; align-items:center; gap:8px;
  color:var(--muted); font-size:12px; font-family:var(--font-mono);
  overflow:hidden; white-space:nowrap;
}
.topbar__stats .dot{ opacity:.4; }
.topbar__actions{ margin-left:auto; display:flex; gap:8px; }

.app-shell{
  display:grid;
  grid-template-columns: 280px 1fr 340px;
  height:calc(100vh - 52px);
}

.sidebar{
  background:var(--panel);
  border-right:1px solid var(--border);
  overflow-y:auto;
  display:flex; flex-direction:column;
}
.sidebar__tabs{
  display:flex; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--panel); z-index:5;
}
.tab-btn{
  flex:1; background:none; border:none; padding:11px 4px;
  color:var(--muted); font-size:11.5px; letter-spacing:.03em;
  border-bottom:2px solid transparent;
}
.tab-btn.active{ color:var(--text); border-bottom-color:var(--accent); }
.panel{ display:none; padding:16px; }
.panel.active{ display:block; }

.main{ display:flex; flex-direction:column; min-width:0; border-right:1px solid var(--border); }
.main-toolbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 14px; border-bottom:1px solid var(--border); background:var(--panel-alt);
}
.main-toolbar .spacer{ flex:1; }
.export-group{ display:flex; gap:6px; flex-wrap:wrap; }
.channel-list{ flex:1; overflow-y:auto; padding:6px; }

.player-dock{
  background:var(--panel);
  display:flex; flex-direction:column;
  padding:14px; gap:10px; overflow-y:auto;
}
.player-dock__header{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:600; font-size:13px;
}
.video-wrap{
  position:relative; width:100%; aspect-ratio:16/9;
  background:#000; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border);
}
.video-wrap video{ width:100%; height:100%; object-fit:contain; background:#000; }
.video-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:12.5px; text-align:center; padding:16px;
  background:rgba(0,0,0,.35); pointer-events:none;
}
.video-overlay.hidden{ display:none; }
.player-controls{ display:flex; align-items:center; gap:10px; }
.player-controls input[type="range"]{ flex:1; accent-color:var(--accent); }
.player-error{ font-size:12px; color:var(--danger); min-height:16px; }

/* on-air tally: signature element, pulses amber while a stream is actually playing */
.player-dock__header::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--border); flex-shrink:0; margin-right:8px;
  transition:background .2s;
}
.player-dock.on-air .player-dock__header::before{
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(244,183,64,.6);
  animation:tally-pulse 1.6s infinite;
}
@keyframes tally-pulse{
  0%{ box-shadow:0 0 0 0 rgba(244,183,64,.55); }
  70%{ box-shadow:0 0 0 8px rgba(244,183,64,0); }
  100%{ box-shadow:0 0 0 0 rgba(244,183,64,0); }
}

/* ---------- form controls ---------- */
.field{ margin-bottom:14px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.field-row .field{ margin-bottom:0; }
.field-group{
  margin:16px 0; padding:12px; background:var(--panel-alt);
  border:1px solid var(--border-soft); border-radius:var(--radius);
}
.field-group .field, .field-group input, .field-group select{ margin-bottom:8px; }
label{ display:block; font-size:12px; color:var(--muted); margin-bottom:5px; }
input[type="text"], input[type="password"], input[type="search"], select, textarea{
  width:100%; background:var(--elevated); border:1px solid var(--border);
  color:var(--text); border-radius:var(--radius-sm); padding:8px 10px;
  font-family:var(--font-mono); font-size:12.5px;
}
select{ font-family:var(--font-ui); }
textarea{ resize:vertical; }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(244,183,64,.15);
}
input[type="file"]{ width:100%; font-size:12px; }
.input-row{ display:flex; gap:8px; }
.input-row input{ flex:1; }
.checkbox-row{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text); cursor:pointer; }
.checkbox-row input{ width:auto; accent-color:var(--accent); }

/* ---------- buttons ---------- */
.btn{
  background:var(--elevated); border:1px solid var(--border); color:var(--text);
  padding:8px 12px; border-radius:var(--radius-sm); font-size:12.5px; font-weight:500;
  transition:border-color .15s, background .15s;
  white-space:nowrap;
}
.btn:hover{ border-color:var(--accent-dim); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn-block{ width:100%; margin-top:6px; }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#1a1200; font-weight:700; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-danger{ color:var(--danger); border-color:rgba(242,85,90,.4); }
.btn-danger:hover{ background:rgba(242,85,90,.08); border-color:var(--danger); }
.icon-btn{ width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
.muted{ color:var(--muted); font-size:12px; }

/* ---------- channel rows ---------- */
.empty-state{ padding:60px 20px; text-align:center; color:var(--muted); }
.channel-row{
  display:grid;
  grid-template-columns:28px 44px 1fr 220px auto;
  align-items:center; gap:12px;
  padding:9px 10px; border-radius:var(--radius-sm);
  border:1px solid transparent;
}
.channel-row:hover{ background:var(--panel-alt); border-color:var(--border-soft); }
.channel-row.selected{ background:rgba(244,183,64,.08); border-color:rgba(244,183,64,.3); }
.channel-row.active-preview{ border-color:var(--accent); }
.channel-row input[type="checkbox"]{ accent-color:var(--accent); width:16px; height:16px; }
.channel-logo{
  width:36px; height:36px; border-radius:6px; object-fit:cover;
  background:var(--elevated); border:1px solid var(--border); flex-shrink:0;
}
.channel-info{ min-width:0; }
.channel-info .name{ font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.channel-info .url{
  font-family:var(--font-mono); font-size:11px; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.channel-meta{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  font-size:10.5px; padding:2px 7px; border-radius:99px;
  background:var(--elevated); border:1px solid var(--border); color:var(--muted);
}
.chip.dupe{ color:var(--danger); border-color:rgba(242,85,90,.4); }
.channel-actions{ display:flex; gap:6px; }

/* ---------- modal ---------- */
.modal-backdrop{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.55);
  align-items:center; justify-content:center; z-index:100; padding:16px;
}
.modal-backdrop.open{ display:flex; }
.modal{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  width:100%; max-width:560px; max-height:88vh; display:flex; flex-direction:column;
  box-shadow:var(--shadow);
}
.modal__header{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); }
.modal__header h3{ margin:0; }
.modal__body{ padding:18px; overflow-y:auto; }
.modal__footer{ display:flex; justify-content:flex-end; gap:8px; padding:14px 18px; border-top:1px solid var(--border); }
.custom-attr-row{ display:flex; gap:6px; margin-bottom:6px; }
.custom-attr-row input{ flex:1; }

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--elevated); border:1px solid var(--border); color:var(--text);
  padding:10px 18px; border-radius:99px; font-size:12.5px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  z-index:200; box-shadow:var(--shadow);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error{ border-color:rgba(242,85,90,.5); color:var(--danger); }

.status-box{ font-size:12px; margin-top:8px; }
.status-box.ok{ color:var(--success); }
.status-box.err{ color:var(--danger); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px){
  .app-shell{ grid-template-columns: 260px 1fr; }
  .player-dock{
    position:fixed; right:0; top:52px; bottom:0; width:320px;
    transform:translateX(100%); transition:transform .2s; z-index:60;
    box-shadow:var(--shadow); border-left:1px solid var(--border);
  }
  .player-dock.open{ transform:translateX(0); }
}

@media (max-width: 800px){
  .app-shell{ grid-template-columns: 1fr; }
  .sidebar{
    position:fixed; left:0; top:52px; bottom:0; width:82%; max-width:320px;
    transform:translateX(-100%); transition:transform .2s; z-index:60;
    box-shadow:var(--shadow);
  }
  .sidebar.open{ transform:translateX(0); }
  .player-dock{ width:92%; }
  .topbar__stats{ display:none; }

  .channel-row{
    grid-template-columns:24px 40px 1fr; grid-template-areas:
      "check logo info"
      "meta meta meta"
      "actions actions actions";
    row-gap:6px;
  }
  .channel-row input[type="checkbox"]{ grid-area:check; }
  .channel-logo{ grid-area:logo; }
  .channel-info{ grid-area:info; }
  .channel-meta{ grid-area:meta; }
  .channel-actions{ grid-area:actions; }

  .field-row{ grid-template-columns:1fr; }
  .main-toolbar{ gap:8px; }
  .export-group{ width:100%; }
}

@media (max-width: 480px){
  .brand-name{ display:none; }
  .modal__body{ padding:14px; }
}