:root {
    --scs-sc-bg: #ffffff;
    --scs-sc-border: #fafafa;
    --scs-sc-header-bg: #f9fafb;
    --scs-sc-show-bg: #f1f1f1;
    --scs-sc-show-text: #111827;
    --scs-sc-live-bg: #d8ffd4;
    --scs-sc-radius: 6px;
}

/* ======================================================
   Wrapper
====================================================== */

.scs-sc-wrapper {
    position: relative;
    background: var(--scs-sc-bg);
    overflow: hidden;
    border-radius: var(--scs-sc-radius);
    border: 1px solid var(--scs-sc-border);
}

/* ======================================================
   Grid
====================================================== */

.scs-sc-grid {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr);
    grid-auto-rows: var(--scs-sc-row-height, 70px);
}

/* ======================================================
   Headers
====================================================== */

.scs-sc-header {
    background: var(--scs-sc-header-bg);
    padding: 22px;
    text-align: center;
    font-weight: 600;
    border-bottom: 1px solid var(--scs-sc-border);
    font-size: 13px;
    color: var(--scs-sc-ui-text);
}

/* ======================================================
   Time column
====================================================== */

.scs-sc-time {
    background: var(--scs-sc-header-bg);
    padding: 24px 16px;
    font-size: 13px;
    border-top: 1px solid var(--scs-sc-border);
    color: var(--scs-sc-ui-text);
}

/* ======================================================
   Cells
====================================================== */

.scs-sc-cell {
    border-top: 1px solid var(--scs-sc-border);
    border-left: 1px solid var(--scs-sc-border);
}

.scs-sc-grid > *:nth-child(-n+8) {
    border-top: none;
}

.scs-sc-grid > *:nth-child(8n+1) {
    border-left: none;
}

/* ======================================================
   Overlay grid
====================================================== */

.scs-sc-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr);
    grid-auto-rows: var(--scs-sc-row-height, 70px);
    pointer-events: none;
}

/* ======================================================
   Show blocks
====================================================== */

.scs-sc-show-block {
    background: var(--scs-sc-show-bg);
    color: var(--scs-sc-show-text);
    padding: 6px 6px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 1px;
}

/* Title */
.scs-sc-show-block strong {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
}

/* ======================================================
   Legend
====================================================== */

.scs-sc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 13px;
}

.scs-sc-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.scs-sc-legend-colour {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
}

/* ======================================================
   Time range / presenter
====================================================== */

.scs-sc-time-range {
    font-size: 11px;
    margin-top: 4px;
    opacity: 0.85;
}

.scs-sc-presenter {
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
    opacity: 0.8;
}

.scs-sc-show-live{
    background: var(--scs-sc-live-bg) !important;
    color: inherit !important;
    position: relative;

    box-shadow:
        0 4px 14px rgba(0,0,0,0.12),
        0 0 0 2px rgba(255,255,255,0.6) inset,
        0 0 18px var(--scs-sc-live-bg);

    transform: translateY(-1px);
}

.scs-sc-show-live::after{
    content: "On Air";
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: var(--scs-sc-live-bg);
    color: currentColor;
    padding: 3px 6px;
    border-radius: 999px;
}
/* On Air Card */
.scs-onair{
  display:flex;
  align-items:stretch;
  border:1px solid var(--scs-sc-border);
  border-radius: var(--scs-sc-radius);
  overflow:hidden;
  background: var(--scs-sc-bg);
  text-decoration:none;
  max-width:100%;
}

/* Left badge */
.scs-onair-badge{
  width:120px;
  min-width:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:800;
  font-size:22px;
  line-height:1.05;
  padding:18px 10px;

  background: var(--scs-sc-live-bg);
  color: var(--scs-sc-show-text);}

/* Off air state */
.scs-onair-badge--off{
  background: var(--scs-sc-time-bg);
  color: rgba(17, 24, 39, 0.55);
}

.scs-onair-body{
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;

  /* subtle separation like your grid cells */
  background: var(--scs-sc-bg);
}

.scs-onair-title{
  font-size:16px;
  font-weight:800;
  letter-spacing:-0.2px;
  color: var(--scs-sc-show-text);
}

.scs-onair-host{
  font-size:14px;
  font-weight:700;
  color: var(--scs-sc-show-text);
  opacity: 0.9;
}

/* Responsive */
@media (max-width:640px){
  .scs-onair-badge{ width:92px; min-width:92px; font-size:18px; }
  .scs-onair-title{ font-size:15px; }
  .scs-onair-host{ font-size:13px; }
}

/* ===============================
   Category Legend
=============================== */

.scs-sc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 10px;
}

.scs-sc-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    opacity: 0.9;
}

.scs-sc-legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}