/* ================= ROOT ================= */
.show-dashboard {
  --green: #00b761;
  --green-soft: #e9f7f1;
  --border: #dfeee7;
  --text: #1f2d2b;
  --muted: #6b8f85;
  --bg: #f6fbf9;
  --card: #ffffffcc;
  font-family: system-ui;
  background: #fff;
  padding: 32px;
  color: var(--text);
	border-radius: 16px;
}
.show-dashboard p{
	line-height: normal;
}
.show-dashboard__flex{
	display: flex;
	gap: 16px;
}
/* ================= CARD ================= */
.show-dashboard__card {
  background: var(--card);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,.05);
}

/* ================= HEADLINES ================= */
.show-dashboard__headlines {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  background: #f9fdfb;
      display: flex;
    flex-direction: column;
    resize: vertical;
    overflow: hidden;
}

/* Header */
.show-dashboard__headlines-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.show-dashboard__headlines-title h3 {
  font-size: 16px;
  margin-bottom: 4px;
}

.show-dashboard__headlines-title p {
  font-size: 13px;
  color: var(--muted);
}

/* Tabs */
.show-dashboard__tabs {
  display: flex;
  gap: 8px;
	padding: 8px;
	border-radius: 50px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

}

.show-dashboard__tab {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  color: var(--muted);
}

.show-dashboard__tab.active {
  background: var(--green-soft);
  color: var(--green);
  border-color: var(--green);
}

/* List */
.show-dashboard__headline-list {

	flex: 1 1 220px;
  min-height: 80px;
  overflow: auto;
  padding: 8px;
}

/* Item */
.show-dashboard__headline-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}

.show-dashboard__headline-item:last-child {
  border-bottom: none;
}

.show-dashboard__headline-main strong {
  font-size: 15px;
    display: block;
    color: var(--uicore-typography--h2-c, "#070707");
    font-weight: 500;
}

.show-dashboard__headline-meta {
  font-size: 14px;
  color: var(--muted);
}

/* Tag */
.show-dashboard__headline-tag {
  align-self: center;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  white-space: nowrap;
	justify-self: flex-end;
}

/* Helper text */
.show-dashboard__headline-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  text-align: right;
}

/* =========================
   ON-AIR OPENER (Scoped)
========================= */
.show-dashboard-onair {
  --green: #00b761;
  --green-soft: #e9f7f1;
  --border: #dfeee7;
  --text: #1f2d2b;
  --muted: #6b8f85;
  --bg-soft: #f6fbf9;

  background: #f9fdfb;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  font-family: system-ui;
  color: var(--text);
}

/* Header */
.onair-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.onair-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--uicore-typography--h2-c, "#070707");
}

.onair-time {
  font-size: 13px;
  color: var(--muted);
}

.onair-pill {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  font-weight: 500;
}

/* Main layout */
.onair-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

/* Left */
.onair-left h2 {
  line-height: 1.3;
	margin: 0;
  margin-bottom: 10px;
	    font-size: 24px;
    font-weight: 600;
}

.onair-left h2 span {
  color: var(--green);
}

.onair-focus {
  font-size: 13px;
  color: var(--muted);
	margin-top:10px !important;
}

.onair-btn {
  background: var(--green);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
}

.onair-btn-hint {
  font-size: 12px;
  color: var(--muted);
  margin-left: 10px;
}

/* Weather */
.onair-weather {
  background: var(--green);
  color: #fff;
  border-radius: 14px;
  padding: 16px;
	background: #00B671;
    background: linear-gradient(150deg, rgba(0, 182, 113, 1) 0%, rgba(22, 120, 72, 1) 82%, rgba(27, 105, 61, 1) 94%);
}

.show-dashboard .dashboard-weather-temp {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
}

.show-dashboard .dashboard-weather-temp span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  opacity: 0.9;
  text-wrap-mode: nowrap;
}

.weather-info p {
  font-size: 13px;
  margin-bottom: 6px;
}

.weather-highlight {
  background: rgba(255,255,255,0.15);
  padding: 8px 10px;
  border-radius: 45px;
  font-size: 12px;
      line-height: normal;
}

/* Bottom cards */
.onair-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.onair-mini {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}

.onair-mini h4 {
	margin: 0;
  font-size: 11px;
  color: var(--muted);
}

.onair-mini strong {
  display: block;
  font-size: 14px;
  color: var(--uicore-typography--h2-c, "#070707");
  font-weight: 600;
  line-height: normal;

}

.onair-mini p {
 font-size: 12px;
    color: var(--green);
}
/* ==============================
   LOCAL BRIEFING HEADER (Scoped)
============================== */
.show-dashboard-header {
  --green: #00b761;
  --green-soft: #e9f7f1;
  --border: #dfeee7;
  --text: #1f2d2b;
  --muted: #6b8f85;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 0px 20px 0px;
/*   border-radius: 16px; */
/*   background: #f9fdfb; */
/*   border: 1px solid var(--border); */
  font-family: system-ui;
}

/* LEFT */
.sd-header-left {
  display: flex;
  gap: 12px;
  align-items: center;
}

.sd-logo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
	background: linear-gradient(150deg, rgba(0, 182, 113, 1) 0%, rgba(22, 120, 72, 1) 82%, rgba(27, 105, 61, 1) 94%);
	box-shadow:
  0 8px 24px rgba(0, 182, 113, 0.35),
  0 4px 10px rgba(0, 0, 0, 0.15);
}

.sd-title h1 {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
}

.sd-title p {
  font-size: 12px;
  color: var(--muted);
}

/* RIGHT */
.sd-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* LIVE BADGE */
.sd-live {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 500;
}

.sd-dot {
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
}

/* USER */
.sd-user {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 999px;
}

.sd-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 13px;
}

.sd-user-info strong {
  font-size: 12px;
  display: block;
  line-height: 1.1;
}

.sd-user-info span {
  font-size: 11px;
  color: var(--muted);
}
.sd-user-info{
	padding-right: 10px;
}
/* ==============================
   PRESENTER NOTES (Scoped)
============================== */
.show-dashboard-notes {
  --green: #00b761;
  --green-soft: #e9f7f1;
  --border: #cfe9df;
  --text: #1f2d2b;
  --muted: #6b8f85;

  background: #f9fdfb;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  font-family: system-ui;
  color: var(--text);
	display: flex;
    flex-direction: column;
    resize: vertical;
    overflow: hidden;
}

/* Header */
.sd-notes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.sd-notes-header h3 {
  font-size: 15px;
  margin-bottom: 2px;
}

.sd-notes-header p {
  font-size: 12px;
  color: var(--muted);
}

.sd-notes-pill {
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  font-weight: 500;
}

/* List */
.sd-notes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
/* 	max-height: 675px; */
/* 	overflow-y: auto; */
	flex: 1 1 120px;
    min-height: 80px;
    overflow: auto;
}

/* Item */
.sd-note-item {
/*  display: grid; */
/*     grid-template-columns: 1.2fr 1fr; */
    gap: 14px;
    padding: 12px 14px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: #f7fcfa;
    justify-content: space-between;
}

.sd-note-left strong {
      font-size: 14px;
    display: block;
    line-height: normal;
	    color: var(--uicore-typography--h2-c, "#070707");
    font-weight: 600;
}

.sd-note-left span {
  font-size: 14px;
  color: var(--green);
}

.sd-note-right {
     font-size: 14px;
    color: var(--muted);
    align-self: center;
    line-height: normal;
}
.show-dashboard p,
.show-dashboard h2,
.show-dashboard h1,
.show-dashboard h3{
	  font-family: system-ui;
	margin: 0;

}

/* Default (Inactive) */
#go-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 13px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  background: #ccc;   /* Gray when inactive */
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
	  color: #fff;

}

/* Active (Live) */
#go-live.live {
  background: linear-gradient(297deg, rgba(0, 182, 113, 1) 0%, rgba(22, 120, 72, 1) 82%, rgba(27, 105, 61, 1) 94%);
  box-shadow: 0 8px 25px rgba(0, 183, 97, 0.45);
}

/* Live Dot (only visible when active) */
.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: none; /* hidden by default */
}

#go-live.live .live-dot {
  display: block;
  background: #00ff88;
  position: relative;
}

#go-live .live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: pulse1 1.5s ease-out infinite;
  background: rgba(0, 255, 136, 0.6);
}

/* Hover effect only when active */
#go-live.live:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 183, 97, 0.65);
}

#go-live:active {
  transform: scale(0.96);
}

/* Pulse animation */
@keyframes pulse1 {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}
.slider-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden; /* prevent UI break */
}

.onair-bottom {
  display: flex;
  overflow-x: hidden; /* hide scrollbar */
  scroll-behavior: smooth;
  width: 100%;
}

.onair-mini {
  flex: 0 0 300px;   /* fixed card width */
}
.onair-mini .delay{
	background: #00B761;
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    position: absolute;
    right: 10px;
    bottom: 10px;
	border: 1px solid;
}

.slider-btn {
  background: #00b761;       /* theme green */
  color: #fff;               /* white arrow */
  border: none;
  cursor: pointer;
  font-size: 16px;           /* arrow size */
  border-radius: 16px;        /* circular button */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background 0.3s, transform 0.2s;
}

.slider-btn:hover {
  background: #009a50;       /* darker green on hover */
  transform: scale(1.1);     /* slight zoom */
}

.slider-btn.left {
  margin-right: 10px;
}

.slider-btn.right {
  margin-left: 10px;
}
#reverseCounter{
	display: block;
    color: #00b762;
    border: 1px solid;
    padding: 8px 16px;
    border-radius: 25px;
    font-weight: 600;
}

.mini-clock {
  --mc-size: 100px;
  --mc-theme: #00b671;

  width: var(--mc-size);
  height: var(--mc-size);
  background: #fff;
  border-radius: 50%;
  border: 6px solid var(--mc-theme);
  position: relative;
  box-shadow: 0 6px 18px rgba(0,182,113,.35);
  font-family: 'Poiret One', cursive;
  padding: 50px;
}

/* dot */
.mini-clock__dot {
  width: 6px;
  height: 6px;
  background: var(--mc-theme);
  border-radius: 50%;
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 10;
}

/* hands */
.mini-clock__hour,
.mini-clock__minute,
.mini-clock__second {
  position: absolute;
  left: 50%;
  border-radius: 4px;
}

.mini-clock__hour {
  width: 3px;
  height: 24px;
  background: #0a5f3f;
  top: 26px;
  margin-left: -1.5px;
  transform-origin: 50% 24px;
}

.mini-clock__minute {
  width: 2px;
  height: 34px;
  background: var(--mc-theme);
  top: 16px;
  margin-left: -1px;
  transform-origin: 50% 34px;
}

.mini-clock__second {
  width: 1px;
  height: 40px;
  background: #ff4d4d;
  top: 10px;
  margin-left: -0.5px;
  transform-origin: 50% 40px;
}

/* numbers */
.mini-clock__number {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  color: #0a5f3f;
}

.mini-clock__number--12 { top: 4px; left: 50%; transform: translateX(-50%); }
.mini-clock__number--3  { right: 6px; top: 50%; transform: translateY(-50%); }
.mini-clock__number--6  { bottom: 4px; left: 50%; transform: translateX(-50%); }
.mini-clock__number--9  { left: 6px; top: 50%; transform: translateY(-50%); }

/* dial lines */
.mini-clock__dialline {
  position: absolute;
  width: 1px;
  height: 6px;
  background: #aaa;
  left: 50%;
  top: 3px;
  transform-origin: 50% 47px;
}

.mini-clock__dialline--major {
  height: 10px;
  background: var(--mc-theme);
}

/* info */
.mini-clock__info {
  position: absolute;
  width: 80px;
  height: 14px;
  border-radius: 5px;
  background: #e9f7f1;
  text-align: center;
  line-height: 14px;
  font-size: 7px;
  font-weight: 700;
  color: #0a5f3f;
  left: 50%;
  transform: translateX(-50%);
}

.mini-clock__info--date { top: 26px; }
.mini-clock__info--day  { bottom: 18px; }