:root{
  --bg:#0f2227; --panel:#0d1b20; --grid:#173239; --grid2:#0f2b33;
  --text:#e9f2f3; --muted:#9db7bd; --now:#ff5630;
}
.ssg-wrap{ background:var(--panel); border:1px solid #1a3a41; border-radius:14px;
  padding:14px 14px 8px; box-shadow:0 10px 34px rgba(0,0,0,.25); color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.ssg-axis{display:grid; grid-template-columns:80px 1fr; padding:6px 8px 10px}
.ssg-hours{position:relative; height:24px}
.ssg-hours span{position:absolute; transform:translateX(-50%); top:0; font-size:12px; color:var(--muted)}
.ssg-grid{position:relative; display:grid; grid-template-columns:80px 1fr}
.ssg-labels{border-right:1px solid #1a3a41; padding-top:6px}
.ssg-labels .row{height:100px; display:flex; align-items:flex-start; padding:10px 8px; color:#cfe3e7; font-weight:600}
.ssg-canvas{position:relative; overflow:hidden; border-radius:10px;
  background:repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px 100px),
             repeating-linear-gradient(to bottom, var(--grid2) 0 1px, transparent 1px 100px);
}
/* event blocks */
.ssg-event{position:absolute; height:84px; border-radius:12px; padding:10px 12px 12px;
  display:flex; flex-direction:column; justify-content:space-between;
  border:1px solid rgba(255,255,255,.14); backdrop-filter: blur(1px);
}
.ssg-event h3{margin:0 0 4px; font-size:16px}
.ssg-badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:3px 8px;
  border-radius:999px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.18)
}
.ssg-dot{width:8px; height:8px; background:#ff4e4e; border-radius:50%}
.ssg-live{position:absolute; left:12px; top:10px}
/* tooltip */
.ssg-tip{position:absolute; translate:0 -110%; min-width:220px; max-width:280px;
  background:#0e2228; border:1px solid #244a52; border-radius:12px;
  padding:12px; pointer-events:none; opacity:0; transition:opacity .12s ease;
  box-shadow:0 18px 36px rgba(0,0,0,.45);
}
.ssg-event:hover .ssg-tip{opacity:1}
.ssg-tip h4{margin:0 0 6px; font-size:15px}
.ssg-tip p{margin:0 0 8px; color:#bcd0d4; font-size:13px; line-height:1.3}
.ssg-tip .row{display:flex; align-items:center; gap:8px; color:#9fbac0; font-size:12px}
.ssg-tip .row:before{content:"⏱"}
/* now line */
.ssg-now{position:absolute; top:0; bottom:0; width:0; border-left:2px solid var(--now);
  pointer-events:none; filter:drop-shadow(0 0 6px rgba(255,86,48,.8));
}
.ssg-now .cap{position:absolute; bottom:10px; transform:translate(-50%,0);
  background:#3b1b16; border:1px solid #6e392e; color:#ffd2c6; padding:3px 8px;
  border-radius:8px; font-size:12px;
}
/* palette */
.ssg-teal   {background:#0e5d61aa}
.ssg-purple {background:#402b5faa}
.ssg-amber  {background:#7b4f07aa}
.ssg-blue   {background:#1f4b7daa}
.ssg-indigo {background:#2c3778aa}


/* ===== Overrides: square design + label fixes ===== */
.ssg-wrap,
.ssg-canvas,
.ssg-event,
.ssg-tip,
.ssg-now .cap,
.ssg-badge {
  border-radius: 0 !important;
}

/* Widen label column so text fits better */
.ssg-grid {
  grid-template-columns: 150px 1fr !important;
}
.ssg-axis {
  grid-template-columns: 150px 1fr !important;
}

/* Keep channel names on one line; truncate if needed */
.ssg-labels .row {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ===== Fix overlapping hour labels ===== */
.ssg-hours {
  display: flex !important;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}
.ssg-hours span {
  position: static !important;
  transform: none !important;
  flex: 1;
  text-align: center;
}


/* ===== Vertical hour ticks aligned with labels ===== */
.ssg-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px solid var(--grid);
  pointer-events: none;
  opacity: 0.6;
}
/* Optional: emphasize every 2 hours a bit more */
.ssg-tick.major { border-left-color: #244a52; opacity: 0.9; }


/* ===== Spread hour labels across whole scheduler ===== */
.ssg-hours {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  column-gap: 0;
}
.ssg-hours .ssg-hour {
  text-align: center;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
}

/* ===== Ensure titles in boxes are left-aligned and not transformed ===== */
.ssg-event { text-align: left !important; }
.ssg-event h3 {
  text-align: left !important;
  text-transform: none !important;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
}
.ssg-badge { display: inline-flex !important; }


/* ===== Enforce square corners everywhere inside the block ===== */
.ssg-wrap, .ssg-wrap * , .ssg-wrap *::before, .ssg-wrap *::after {
  border-radius: 0 !important;
}
/* Optional: remove any rounded caps/labels from themes */
.ssg-badge, .ssg-tip, .ssg-now .cap, .ssg-event { border-radius: 0 !important; }