/* =========================================================
   COMMUNITY RADIOS
   Retro Ops Console UI
   ========================================================= */


/* =====================================================
OPS CONSOLE HEADER
=====================================================*/

.console-header{
  display:flex;
  justify-content:space-between;
  align-items:center;

  background:#161b22;
  border:1px solid #30363d;
  border-radius:6px;

  padding:10px 14px;
  margin-bottom:20px;
}

.console-title{
  font-weight:700;
  letter-spacing:0.12em;
  color:#d29922;
}

.console-meta{
  font-size:0.75rem;
  color:#8b949e;
}

.console-meta a{
  color:#8b949e;
  text-decoration:none;
}

.console-meta a:hover{
  color:#58a6ff;
}


/* -------------------------
   RESET
--------------------------*/

* {
  box-sizing: border-box;
}

body {
  margin:0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background:#0d1117;
  color:#c9d1d9;
  line-height:1.4;
}


/* -------------------------
   LAYOUT
--------------------------*/

.container{
  max-width:1100px;
  margin:auto;
  padding:0 20px;
}

.main{
  padding:30px 0;
  min-height:70vh;
}

/* -------------------------
   TOP BAR
--------------------------*/

.topbar{
  border-bottom:1px solid #30363d;
  background:#0b0f14;
}

.topbar-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 0;
}

/* TITLE */

.site-title a{
  text-decoration:none;
  color:#d29922;
  font-weight:700;
  letter-spacing:0.14em;
}

.site-title a:hover{
  color:#f0b44c;
}


/* -------------------------
   NAVIGATION
--------------------------*/

.nav{
  display:flex;
  gap:16px;
  align-items:center;
  font-size:0.82rem;
  text-transform:lowercase;
}

/* links */

.nav a{
  text-decoration:none;
  color:#8b949e;
  padding:2px 4px;
}

.nav a:hover{
  color:#58a6ff;
}

/* separators */

.nav a::before{
  content:"/";
  color:#484f58;
  margin-right:4px;
}

.nav a:first-child::before{
  content:"";
  margin:0;
}

/* username */

.nav-user{
  color:#6e7681;
  margin-left:10px;
}

/* admin links */

.nav-admin{
  color:#d29922;
}

.nav-admin:hover{
  color:#f0b44c;
}

.nav-pipeline{
  color:#d29922;
}

.nav-pipeline:hover{
  color:#f0b44c;
}

.site-title::after{
  content:"_";
  margin-left:4px;
  animation:blink 1s infinite;
}

@keyframes blink{
  0%,50%,100%{opacity:1;}
  25%,75%{opacity:0;}
}

.nav a.active{
  color:#58a6ff;
}

/* -------------------------
   FOOTER
--------------------------*/

.footer{
  border-top:1px solid #30363d;
  background:#161b22;
  margin-top:40px;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  padding:18px 0;
  font-size:0.75rem;
  color:#8b949e;
}

.footer-links a{
  margin-left:16px;
  color:#8b949e;
  text-decoration:none;
}

.footer-links a:hover{
  color:#58a6ff;
}


/* -------------------------
   PANEL SYSTEM
--------------------------*/

.panel{
  background:#161b22;
  border:1px solid #30363d;
  border-radius:6px;

  padding:16px 18px;
  margin-bottom:20px;

  box-shadow:0 0 0 1px rgba(0,0,0,0.2) inset;
}

.panel-title{
  font-size:0.7rem;
  letter-spacing:0.14em;
  text-transform:uppercase;

  color:#8b949e;

  margin-bottom:10px;
  padding-bottom:6px;

  border-bottom:1px solid #21262d;
}


/* -------------------------
   STATS BOX
--------------------------*/

.stat-box{
  background:#0d1117;
  border:1px solid #30363d;
  padding:10px 14px;
  border-radius:4px;

  min-width:140px;

  transition:border-color 0.15s;
}

.stat-box:hover{
  border-color:#58a6ff;
}

.stat-label{
  font-size:0.65rem;
  color:#8b949e;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.stat-value{
  font-size:1.4rem;
  font-weight:700;
  color:#e6edf3;
}


/* -------------------------
   LED INDICATORS
--------------------------*/

.led-green{ color:#3fb950; text-shadow:0 0 4px rgba(63,185,80,0.4); }
.led-red{ color:#f85149; text-shadow:0 0 4px rgba(248,81,73,0.4); }
.led-amber{ color:#d29922; text-shadow:0 0 4px rgba(210,153,34,0.4); }
.led-gray{ color:#484f58; }


/* -------------------------
   PROGRESS BAR
--------------------------*/

.progress-track {
  height: 5px;
  background: #21262d;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}
.progress-fill {
  height: 100%;
  background: #3fb950;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.progress-fill.fill-warn { background: #d29922; }
.progress-fill.fill-fail { background: #f85149; }


/* -------------------------
   TABLES (terminal style)
--------------------------*/

.mono-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.82rem;
}

.mono-table th{
  text-align:left;
  font-size:0.65rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#8b949e;
  border-bottom:1px solid #30363d;
  padding:6px 8px;
}

.mono-table td{
  padding:6px 8px;
  border-bottom:1px solid #21262d;
}

.mono-table tr:last-child td{
  border-bottom:none;
}
.mono-table tr:hover td{
  background:#0d1117;
}

/* -------------------------
   NUMERIC COLORS
--------------------------*/

.num-run{ color:#d29922; }
.num-done{ color:#3fb950; }
.num-fail{ color:#f85149; font-weight:700; }
.num-mute{ color:#484f58; }


/* -------------------------
   LINKS
--------------------------*/

a{
  color:#58a6ff;
}

a:hover{
  color:#79c0ff;
}


/* -------------------------
   SUBTITLE
--------------------------*/

.sub-title{
  font-size:0.7rem;
  letter-spacing:0.08em;
  color:#8b949e;
  text-transform:uppercase;
  margin:12px 0 6px;
}


/* -------------------------
   ERROR TEXT
--------------------------*/

.error-excerpt{
  font-size:0.75rem;
  color:#8b949e;
  max-width:400px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* -------------------------
   OPTIONAL TERMINAL EFFECT
--------------------------*/

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;

  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.02) 3px
  );
}


/* -------------------------
   DASHBOARD GRID
--------------------------*/

.dashboard-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:20px;
}

.dashboard-wide{
  grid-column:1 / -1;
}


/* =====================================================
   RADIO DETAIL PAGE
=====================================================*/


.radio-header{
  display:flex;
  align-items:center;
  gap:20px;
}

.radio-logo img{
  width:90px;
  height:90px;
  object-fit:cover;
  border-radius:6px;
}

.radio-title h1{
  margin:0;
  font-size:1.4rem;
}

.radio-meta{
  color:#8b949e;
  font-size:0.85rem;
}

.radio-actions{
  margin-left:auto;
}


/* GRID */

.radio-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:20px;
}


/* TAGS */

.tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.tag{
  padding:2px 8px;
  border:1px solid #30363d;
  background:#0d1117;
  font-size:0.75rem;
  color:#c9d1d9;
  text-decoration:none;
  display:inline-block;
}

a.tag:hover{
  border-color:#58a6ff;
  color:#58a6ff;
}

.tag-active{
  border-color:#58a6ff;
  color:#58a6ff;
}


/* TEXT BLOCK */

.text-block{
  white-space:pre-line;
  font-size:0.9rem;
}


/* STREAMS */

.stream-block{
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid #30363d;
}

.stream-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}

.stream-name{
  font-weight:600;
}

.stream-controls{
  display:flex;
  gap:10px;
  align-items:center;
}

.audio-player{
  width:100%;
}

/* -------------------------
   CHECKBOXES
--------------------------*/

input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;

  width:16px;
  height:16px;

  border:1px solid #30363d;
  background:#0d1117;

  border-radius:3px;

  cursor:pointer;
  position:relative;
}

/* hover */

input[type="checkbox"]:hover{
  border-color:#58a6ff;
}

/* checked */

input[type="checkbox"]:checked{
  background:#238636;
  border-color:#238636;
}

/* checkmark */

input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;

  left:4px;
  top:1px;

  width:4px;
  height:8px;

  border:solid #ffffff;
  border-width:0 2px 2px 0;

  transform:rotate(45deg);
}


/* BUTTONS */

.button{
  border:1px solid #30363d;
  padding:6px 12px;
  text-decoration:none;
  background:#0d1117;
  color:#c9d1d9;
  cursor:pointer;
  transition:background 0.15s;
}

.button:hover{
  background:#161b22;
}

.button-small{
  font-size:0.75rem;
  border:1px solid #30363d;
  padding:3px 8px;
  text-decoration:none;
}

.button-small:hover{
  background:#161b22;
}


/* ADMIN FOOTER */

.admin-footer{
  margin-top:20px;
  text-align:right;
  font-size:0.85rem;
}


/* =====================================================
RECORDINGS PAGE
=====================================================*/

.recordings-header{
display:flex;
justify-content:space-between;
align-items:center;
}

.filter-grid{
display:flex;
gap:20px;
flex-wrap:wrap;
align-items:end;
}

.filter-grid input{
border:1px solid #30363d;
background:#0d1117;
color:#c9d1d9;
padding:5px 8px;
}

.filter-actions{
display:flex;
gap:10px;
}

.recordings-list{
margin-top:20px;
}

.recording-block{
border:1px solid #30363d;
background:#161b22;
margin-bottom:12px;
}

.recording-summary{
display:flex;
gap:20px;
align-items:center;
padding:10px 14px;
cursor:pointer;
}

.rec-stream{
font-weight:600;
}

.rec-time{
color:#8b949e;
font-size:0.85rem;
}

.rec-stages{
margin-left:auto;
display:flex;
gap:6px;
}

.recording-content{
border-top:1px solid #30363d;
padding:14px;
}

.section-label{
font-size:0.7rem;
letter-spacing:0.08em;
color:#8b949e;
text-transform:uppercase;
margin-bottom:6px;
}

.player-actions{
margin-top:6px;
display:flex;
gap:10px;
}

.pipeline-error{
border:1px solid #f85149;
background:#2d1111;
padding:10px;
margin-top:10px;
}

.segments{
margin-top:12px;
}

.segment-block{
border-top:1px solid #30363d;
padding:10px 0;
}

.segment-header{
display:flex;
gap:10px;
align-items:center;
font-size:0.8rem;
margin-bottom:6px;
}

.segment-type{
padding:1px 6px;
border:1px solid #30363d;
font-size:0.7rem;
}

.segment-type.type-speech{color:#58a6ff;}
.segment-type.type-music{color:#d29922;}
.segment-type.type-noise{color:#8b949e;}

.segment-time{
color:#8b949e;
}

.segment-text{
margin-top:6px;
font-size:0.85rem;
}

.segment-meta{
font-size:0.75rem;
color:#8b949e;
}

.segment-extra summary{
cursor:pointer;
font-size:0.75rem;
color:#8b949e;
}

.summary-block{
border-top:1px solid #30363d;
margin-top:10px;
padding-top:10px;
}

.summary-text{
font-size:0.9rem;
}

.song-title{
font-weight:600;
}

.song-unknown{
font-size:0.8rem;
color:#8b949e;
}

.empty-note{
color:#8b949e;
font-size:0.85rem;
}

.center{
text-align:center;
}

/* =====================================================
   RADIO DIRECTORY
=====================================================*/

.radio-directory{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
}

.radio-card{
  display:block;
  border:1px solid #30363d;
  background:#161b22;
  border-radius:6px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
}

.radio-card:hover{
  border-color:#58a6ff;
  background:#0d1117;
}

/* LOGO */

.radio-card-logo{
  height:90px;
  background:#0d1117;
  border-bottom:1px solid #30363d;
}

.radio-card-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* BODY */

.radio-card-body{
  padding:10px 12px;
}

.radio-card-name{
  font-weight:700;
  margin-bottom:2px;
}

.radio-card-frequency{
  font-size:0.8rem;
  color:#8b949e;
}

.radio-card-location{
  font-size:0.8rem;
  color:#8b949e;
  margin-bottom:6px;
}

.radio-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-bottom:6px;
}

.radio-card-live{
  font-size:0.75rem;
  color:#3fb950;
}


/* STREAM SETTINGS */

.stream-header-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.stream-title{
  font-weight:700;
  color:#d29922;
  letter-spacing:0.1em;
}

.stream-meta{
  font-size:0.8rem;
  color:#8b949e;
}

.stream-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:20px;
}

.form-actions{
  margin-top:12px;
}


/* =====================================================
GLOBAL PIPELINE SETTINGS
=====================================================*/

.pipeline-header{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.pipeline-title{
  font-weight:700;
  color:#d29922;
  letter-spacing:0.12em;
}

.pipeline-chain{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-size:0.85rem;
}

.pipeline-stage{
  padding:2px 8px;
  border:1px solid #30363d;
  background:#0d1117;
}

.pipeline-arrow{
  color:#8b949e;
}

.pipeline-field{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.pipeline-help{
  font-size:0.75rem;
  color:#8b949e;
}

.form-actions{
  margin-top:14px;
}

.recording-info{
  margin-top:10px;
  font-size:0.85rem;
}

.recording-info div{
  margin-bottom:4px;
}

.label{
  display:inline-block;
  width:80px;
  color:#8b949e;
}

.panel-warning{
  border:1px solid #f85149;
}

.warning-text{
  color:#f85149;
  margin-bottom:8px;
}

.warning-list{
  margin-left:16px;
  margin-bottom:10px;
  color:#c9d1d9;
}

.button-danger{
  border-color:#f85149;
  color:#f85149;
}

.button-danger:hover{
  background:#f85149;
  color:#0d1117;
}

.button-row{
  display:flex;
  gap:12px;
  margin-top:16px;
}

/***** STAGE BADGE *****/




/* Stage badges */

.stage-badge{
  font-size:0.7rem;
  font-weight:600;
  padding:2px 6px;
  border-radius:4px;
  border:1px solid #30363d;
  margin-left:4px;
}


/* DONE */

.stage-done {
    background: green;
}

/* RUNNING */

.stage-running{
  background:#3b2f0b;
  color:#d29922;
  border-color:#d29922;
}
.stage-running{
  color:#d29922;
  border-color:#d29922;
  animation: pulse 1.2s infinite;
}

@keyframes pulse{
  0%{opacity:1;}
  50%{opacity:0.5;}
  100%{opacity:1;}
}

/* FAILED */

.stage-failed{
  background:#3b0d0d;
  color:#f85149;
  border-color:#f85149;
}


/* PENDING */

.stage-pending{
  background:#161b22;
  color:#8b949e;
}


/* SKIPPED */

.stage-skipped{
  background:#161b22;
  color:#6e7681;
}