/* ============================================================
   RDS STUDIO — Design System
   Broadcast control panel · dark · "89 A Rádio Rock" energy
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Anton&family=Archivo:wght@600;700;800;900&display=swap');

:root {
  /* ---- Surfaces (graphite) ---- */
  --bg:        #0B0E14;
  --bg-2:      #0E1219;
  --surface:   #151A23;
  --surface-2: #1A212C;
  --surface-3: #222B38;
  --hover:     #1F2733;

  /* ---- Lines / borders ---- */
  --line:      #232C3A;
  --line-2:    #2E3848;
  --line-strong: #3A4658;

  /* ---- Text ---- */
  --text:      #EAF0F7;
  --text-2:    #A9B4C4;
  --text-3:    #6C7889;
  --text-dim:  #4A5466;

  /* ---- Primary (índigo/roxo vibrante) ---- */
  --primary:        #7B61FF;
  --primary-strong: #6A4BFF;
  --primary-soft:   rgba(123, 97, 255, 0.16);
  --primary-line:   rgba(123, 97, 255, 0.42);
  --on-primary:     #ffffff;

  /* ---- Status ---- */
  --success:   #2BD98A;
  --success-soft: rgba(43, 217, 138, 0.14);
  --warning:   #FFB020;
  --warning-soft: rgba(255, 176, 32, 0.14);
  --error:     #FF5061;
  --error-soft: rgba(255, 80, 97, 0.14);
  --info:      #36B6F5;
  --info-soft: rgba(54, 182, 245, 0.14);

  /* ---- Brand 89 (signals + accents only) ---- */
  --brand-yellow: #FFE100;
  --brand-red:    #ED1C24;
  --brand-blue:   #00A6E1;

  /* ---- Source colors (rotation sources) ---- */
  --src-programa:  #FFB020;   /* amber */
  --src-musica:    #36B6F5;   /* blue  */
  --src-promo:     #7B61FF;   /* primary */
  --src-fallback:  #6C7889;   /* gray  */
  --src-instant:   #FF5061;   /* red */

  /* ---- VFD display (RadioDisplay azul) ---- */
  --vfd-bg:    #05121F;
  --vfd-panel: #07233A;
  --vfd-glow:  #34C6FF;
  --vfd-dim:   #1C4660;

  /* ---- Radii / shadow ---- */
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px -8px rgba(0,0,0,.55);
  --shadow-3: 0 18px 48px -12px rgba(0,0,0,.65);

  /* ---- Type ---- */
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-display: 'Archivo', 'Inter', sans-serif;
  --font-poster: 'Anton', 'Archivo', sans-serif;

  /* ---- Layout ---- */
  --sidebar-w: 252px;
  --topbar-h: 64px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--primary-soft); }

/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

/* ---- Typography helpers ---- */
.t-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
}
.t-display {
  font-family: var(--font-poster);
  letter-spacing: .01em; line-height: .95;
}
.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: var(--font-ui);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: 13.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s, transform .06s, box-shadow .14s;
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn .ic { width: 16px; height: 16px; }

.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); box-shadow: 0 4px 14px -4px var(--primary-line); }
.btn-primary:hover:not(:disabled) { background: var(--primary-strong); }

.btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--line-2); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-3); border-color: var(--line-strong); }

.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--hover); color: var(--text); }

.btn-danger { background: var(--error); color: #fff; border-color: var(--error); }
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); }

.btn-lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: var(--r-md); }
.btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn-icon { width: 38px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }

/* ============================================================
   BADGES / STATUS
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  border: 1px solid transparent; white-space: nowrap;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.badge-success { background: var(--success-soft); color: var(--success); border-color: rgba(43,217,138,.3); }
.badge-warning { background: var(--warning-soft); color: var(--warning); border-color: rgba(255,176,32,.3); }
.badge-error   { background: var(--error-soft);   color: var(--error);   border-color: rgba(255,80,97,.3); }
.badge-info    { background: var(--info-soft);    color: var(--info);    border-color: rgba(54,182,245,.3); }
.badge-primary { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-line); }
.badge-neutral { background: var(--surface-3); color: var(--text-2); border-color: var(--line-2); }

/* live pulse dot */
.dot-pulse { position: relative; }
.dot-pulse::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid currentColor; opacity: .6;
  animation: dotpulse 1.6s ease-out infinite;
}
@keyframes dotpulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.1); opacity: 0; } }

/* source chips */
.src-chip { --c: var(--text-3);
  display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 11px;
  border-radius: 6px; font-size: 11.5px; font-weight:800; letter-spacing:.06em;
  text-transform: uppercase; color: var(--c); white-space: nowrap;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
}
.src-programa { --c: var(--src-programa); }
.src-musica   { --c: var(--src-musica); }
.src-promo    { --c: var(--src-promo); }
.src-fallback { --c: var(--src-fallback); }
.src-instant  { --c: var(--src-instant); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.card-pad { padding: 18px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.card-title { font-size: 13px; font-weight: 700; color: var(--text); display:flex; align-items:center; gap:9px; }
.card-sub { font-size: 12px; color: var(--text-3); }

/* ============================================================
   INPUTS
   ============================================================ */
.input, .select {
  width: 100%; height: 38px; padding: 0 12px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-family: var(--font-ui); font-size: 13.5px;
  transition: border-color .14s, box-shadow .14s;
}
.input:focus, .select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.input::placeholder { color: var(--text-dim); }
.label { display:block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }

/* Toggle */
.toggle { position: relative; width: 40px; height: 23px; border-radius: 999px; background: var(--surface-3); border:1px solid var(--line-2); cursor: pointer; transition: background .16s, border-color .16s; flex: none; }
.toggle::after { content:''; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:#fff; transition: transform .16s; box-shadow: var(--shadow-1); }
.toggle[data-on="true"] { background: var(--primary); border-color: var(--primary); }
.toggle[data-on="true"]::after { transform: translateX(17px); }
.toggle:disabled { opacity:.4; cursor:not-allowed; }

/* Range slider */
input[type=range].range { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; background: var(--surface-3); outline:none; cursor:pointer; }
input[type=range].range::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background: var(--primary); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--primary); cursor:pointer; }
input[type=range].range::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background: var(--primary); border: 2px solid var(--bg); cursor:pointer; }

/* Tooltip */
.tip { position: relative; display: inline-flex; }
.tip > .tip-body {
  position:absolute; bottom: calc(100% + 8px); left:50%; transform: translateX(-50%) translateY(4px);
  background: #000; color: #fff; font-size: 11.5px; font-weight: 500; line-height:1.35;
  padding: 7px 10px; border-radius: 7px; white-space: nowrap; max-width: 240px;
  border: 1px solid var(--line-strong);
  opacity: 0; pointer-events:none; transition: opacity .14s, transform .14s; z-index: 60;
}
.tip:hover > .tip-body { opacity:1; transform: translateX(-50%) translateY(0); }

/* divider */
.hr { height:1px; background: var(--line); border:0; margin: 0; }

/* ============================================================
   TABLES
   ============================================================ */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); padding: 11px 14px; border-bottom: 1px solid var(--line-2);
  position: sticky; top: 0; background: var(--surface); z-index: 1; white-space: nowrap;
}
.tbl thead th.sortable { cursor: pointer; user-select: none; }
.tbl thead th.sortable:hover { color: var(--text); }
.tbl tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: middle; }
.tbl tbody tr { transition: background .1s; }
.tbl tbody tr:hover { background: var(--hover); }
.tbl tbody tr:hover .row-actions { opacity: 1; }
.tbl tbody tr:last-child td { border-bottom: none; }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; opacity: .35; transition: opacity .12s; }
.td-strong { color: var(--text); font-weight: 600; }

/* toolbar above tables */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar .grow { flex: 1; min-width: 120px; }

/* segmented control */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { display:flex; align-items:center; gap:6px; padding: 7px 13px; border-radius: 6px; border: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; background: transparent; color: var(--text-2); white-space: nowrap; }
.seg button[data-on="true"] { background: var(--primary); color: #fff; }
.seg button:not([data-on="true"]):hover { color: var(--text); }

/* matrix grid */
.matrix td, .matrix th { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }

/* ============================================================
   RESPONSIVE — mobile keeps desktop intact above 860px
   ============================================================ */
/* responsive grid helpers: collapse to single column on small screens */
@media (max-width: 920px) {
  .respond-2col { grid-template-columns: 1fr !important; }
  .respond-2col [style*="position: sticky"], .respond-2col .sticky-col { position: static !important; }
}
@media (max-width: 680px) {
  .respond-3col { grid-template-columns: 1fr !important; }
  .respond-2col-sm { grid-template-columns: 1fr !important; }
}

/* mobile chrome */
.menu-btn { display: none; }
.mobile-backdrop { display: none; }

@media (max-width: 860px) {
  :root { --sidebar-w: 0px; }
  .menu-btn { display: inline-flex; }
  .mobile-backdrop { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(4,6,10,.6); backdrop-filter: blur(2px); }
  .topbar-search { display: none !important; }
  .topbar-station-meta { display: none !important; }
  .topbar-user-meta { display: none !important; }
  .instant-label { display: none; }
  .app-main { padding: 18px 16px 60px !important; }
  .page-h1 { font-size: 26px !important; }
}
@media (max-width: 560px) {
  .topbar-instant-text { display: none; }
}

/* horizontal-scroll wrapper for wide content (week grid) */
.hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hscroll > .hscroll-inner { min-width: 720px; }

/* skeleton shimmer */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

/* slide in for screens — transform only, never hides content (safe if animations are paused) */
@keyframes screenIn { from { transform: translateY(10px); } to { transform: none; } }
.screen-in { animation: screenIn .34s cubic-bezier(.22,.61,.36,1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}