/* live4.css — refined (FULL)
   - Right log panel pinned bottom (fixed height)
   - Only #board-right and .todaylog-wrap scroll
   - Softer, theme-aware table styling
*/

:root{
  /* ===== Base (Dark default) ===== */
  --bg: #020617;
  --bg-grad-a: rgba(14,165,233,.45);
  --bg-grad-b: rgba(34,197,94,.35);

  --panel: rgba(15,23,42,.88);
  --panel-2: rgba(2,6,23,.72);
  --line: rgba(148,163,184,.22);

  --text: #e5e7eb;
  --muted:#94a3b8;
  --title: #f8fafc;

  --accent: #38bdf8;
  --accent-2:#22c55e;

  --radius: 16px;
  --shadow: 0 18px 45px rgba(0,0,0,.45);

  --header-bg: linear-gradient(180deg, rgba(2,6,23,.92), rgba(2,6,23,.70));
  --ticker-bg: linear-gradient(180deg, rgba(2,6,23,.55), rgba(2,6,23,.90));
  --clock-bg: rgba(2,6,23,.55);
  --hint-bg: rgba(2,6,23,.72);

  --corner: rgba(248,250,252,.78);

  /* ===== Today Log (kanan bawah) ===== */
  /* 7 baris kira-kira */
  --todaylog-h: 300px;
  /* kalau mau 5 baris: 240px */
  /* --todaylog-h: 240px; */

  --todaylog-radius: 14px;

  --todaylog-bg: rgba(2,6,23,.22);
  --todaylog-head-bg: rgba(2,6,23,.62);
  --todaylog-line: rgba(148,163,184,.22);

  --todaylog-th-bg: rgba(15,23,42,.92);
  --todaylog-th-txt: var(--title);

  --todaylog-row-a: rgba(148,163,184,.05);
  --todaylog-row-b: rgba(2,6,23,0);
  --todaylog-row-hover: rgba(56,189,248,.10);

  --soft-border: rgba(148,163,184,.18);
  --soft-shadow: 0 12px 30px rgba(0,0,0,.22);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin:0;
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 10% 10%, var(--bg-grad-a) 0, transparent 45%),
    radial-gradient(circle at 90% 90%, var(--bg-grad-b) 0, transparent 45%),
    var(--bg);
  overflow:hidden; /* signage desktop */
}

/* bootstrap container full-bleed */
.container.live-shell{
  max-width: 100% !important;
  width: 100%;
  height: 100vh;
  padding: 0;
  display:flex;
  align-items:stretch;
}

/* ensure row/col do not constrain width */
.live-shell > .row{
  width: 100% !important;
  margin: 0 !important;
}
.live-shell > .row > [class*="col-"]{
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* shell grid */
.card-live{
  width: 100%;
  height: 100vh;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0 !important;
  display: grid;
  grid-template-rows: 74px 1fr 56px; /* header, main, ticker */
}

/* ========================= HEADER ========================= */
.card-live-header{
  margin:0;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.signage-header{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}

.signage-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 280px;
}
.signage-logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
.signage-title{ line-height: 1.05; }
.signage-title .top{
  font-size: .8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--muted);
}
.signage-title .main{
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--title);
}

.signage-clock{
  justify-self: center;
  text-align: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--clock-bg);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  min-width: 220px;
  backdrop-filter: blur(10px);
}
.clock-time{
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: .06em;
  color: var(--title);
  line-height: 1.1;
}
.clock-date{
  font-size: .78rem;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: .04em;
}

.signage-status{
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.status-pill{
  padding: .35rem .9rem;
  border-radius: 999px;
  font-size: .8rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border: 1px solid transparent;
  background: rgba(15,23,42,.75);
  backdrop-filter: blur(10px);
}
.status-pill span.dot{
  width:.55rem;height:.55rem;border-radius:999px;display:inline-block;
}
.status-idle{ border-color: rgba(75,85,99,.55); }
.status-idle span.dot{ background:#6b7280; }
.status-wait{ border-color: rgba(251,191,36,.65); }
.status-wait span.dot{ background:#fbbf24; }
.status-scanning{ border-color: rgba(59,130,246,.75); }
.status-scanning span.dot{ background:#3b82f6; }
.status-success{ border-color: rgba(34,197,94,.75); color:#bbf7d0; }
.status-success span.dot{ background:#22c55e; }
.status-error{ border-color: rgba(239,68,68,.8); color:#fecaca; }
.status-error span.dot{ background:#ef4444; }

/* ========================= MAIN GRID ========================= */
.signage-main{
  padding: 14px 14px 10px;
  display: grid;
  gap: 14px;
  align-items: stretch;
  min-height: 0;
  width: 100%;
  height: 100%;
  grid-template-columns:
    minmax(320px, 1fr)
    minmax(560px, 1.55fr)
    minmax(320px, 1fr);
}
@media (min-width: 1600px){
  .signage-main{
    grid-template-columns:
      minmax(360px, 1fr)
      minmax(700px, 1.8fr)
      minmax(360px, 1fr);
  }
}
@media (min-width: 2200px){
  .signage-main{
    grid-template-columns:
      minmax(420px, 1fr)
      minmax(900px, 2.2fr)
      minmax(420px, 1fr);
  }
}

/* ========================= PANELS ========================= */
.signage-panel{
  background: linear-gradient(180deg, var(--panel), rgba(15,23,42,.96));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display:flex;
  flex-direction:column;
  min-height: 0;
}

.signage-panel .panel-head{
  flex: 0 0 auto;
  padding: 10px 12px;
  background: rgba(2,6,23,.6);
  border-bottom: 1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.signage-panel .panel-head .label{
  font-weight: 800;
  letter-spacing:.08em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--title);
}
.signage-panel .panel-head .tag{
  font-size:.72rem;
  color: var(--muted);
}

/* IMPORTANT: panel-body harus flex:1 agar tinggi terkunci & tidak dorong layout */
.signage-panel .panel-body{
  flex: 1 1 auto;     /* <<< kunci tinggi */
  min-height: 0;      /* <<< biar anak bisa scroll */
  padding: 10px 12px;
  overflow:auto;
}

/* scrollbar panel kiri (umum) */
.signage-panel .panel-body::-webkit-scrollbar{ width:6px; }
.signage-panel .panel-body::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.35);
  border-radius:999px;
}

/* ========================= RIGHT PANEL PINNED LOG =========================
   Pastikan HTML: <aside class="signage-panel signage-panel-right">
*/
.signage-panel.signage-panel-right .panel-body{
  overflow: hidden !important; /* jangan scroll sidebar kanan */
  display:flex !important;
  flex-direction:column !important;
  gap: 10px !important;
  padding: 10px 12px !important;
}

/* konten agenda/info yang scroll sendiri */
.signage-panel.signage-panel-right #board-right{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding-right: 4px;
}

/* scrollbar konten */
.signage-panel.signage-panel-right #board-right::-webkit-scrollbar{ width:6px; }
.signage-panel.signage-panel-right #board-right::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.30);
  border-radius:999px;
}

/* ========================= CENTER ========================= */
.signage-center{
  min-height: 0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.camera-frame{
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  padding: 10px;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.22), transparent 60%),
    radial-gradient(circle at bottom right, rgba(34,197,94,.18), transparent 60%),
    var(--panel-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
}

video{
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  border-radius: calc(var(--radius) - 6px);
  background: #000;
  border: 1px solid rgba(0,0,0,.35);
}
video.is-mirror{ transform: scaleX(-1); }

.camera-overlay-corner{
  position:absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--corner);
  pointer-events:none;
}
.camera-overlay-corner.tl{ top: 14px; left: 14px; border-right:0; border-bottom:0; }
.camera-overlay-corner.tr{ top: 14px; right:14px; border-left:0; border-bottom:0; }
.camera-overlay-corner.bl{ bottom:14px; left:14px; border-right:0; border-top:0; }
.camera-overlay-corner.br{ bottom:14px; right:14px; border-left:0; border-top:0; }

.head-frame-overlay{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  background: radial-gradient(circle at center, rgba(15,23,42,.18), transparent 60%);
}
.head-frame-box{
  width: 56%;
  max-width: 320px;
  aspect-ratio: 3 / 4;
  border-radius: 999px;
  border: 2px dashed rgba(248,250,252,.88);
  box-shadow: 0 0 0 1px rgba(2,6,23,.65), 0 0 34px rgba(56,189,248,.24);
  display:flex;
  align-items:center;
  justify-content:center;
  animation: headFramePulse 1.6s ease-in-out infinite;
}
.head-frame-text{
  position:absolute;
  bottom: -2.35rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .8rem;
  color: var(--text);
  background: rgba(2,6,23,.82);
  border-radius: 999px;
  padding: .22rem .9rem;
  border: 1px solid rgba(148,163,184,.25);
  white-space: nowrap;
}
@keyframes headFramePulse{
  0%{ opacity:1; box-shadow:0 0 0 1px rgba(2,6,23,.65), 0 0 14px rgba(56,189,248,.42); }
  50%{ opacity:.92; box-shadow:0 0 0 1px rgba(2,6,23,.65), 0 0 26px rgba(56,189,248,.12); }
  100%{ opacity:1; box-shadow:0 0 0 1px rgba(2,6,23,.65), 0 0 14px rgba(56,189,248,.42); }
}

.signage-controls{
  flex: 0 0 auto;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  justify-content:center;
}
.hint-badge{
  background: var(--hint-bg);
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 999px;
  padding: .32rem .85rem;
  font-size: .78rem;
  color: var(--text);
  backdrop-filter: blur(10px);
}

.btn-glow{ position:relative; overflow:hidden; }
.btn-glow::after{
  content:"";
  position:absolute;
  inset:-120%;
  background: radial-gradient(circle at center, rgba(249,250,251,.12), transparent 55%);
  transform: translate3d(-60%,0,0);
  opacity:0;
  transition: opacity .35s ease, transform .35s ease;
}
.btn-glow:hover::after{ opacity:1; transform: translate3d(0,0,0); }

/* (compat) log table wrapper center — hidden by default */
.log-table-wrapper{
  flex: 0 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.log-hidden{ display:none !important; }

/* ========================= TODAY LOG (PINNED BOTTOM) ========================= */
.todaylog-panel{
  flex: 0 0 var(--todaylog-h);   /* <<< ini yang bikin nempel & statis */
  height: var(--todaylog-h);
  min-height: var(--todaylog-h);
  border: 1px solid var(--todaylog-line);
  border-radius: var(--todaylog-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(2,6,23,.08)), var(--todaylog-bg);
  box-shadow: var(--soft-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
}

.todaylog-titlebar{
  flex: 0 0 auto;
  padding: 8px 10px;
  background: var(--todaylog-head-bg);
  border-bottom: 1px solid var(--todaylog-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
}
.todaylog-titlebar .text-secondary{ color: var(--muted) !important; }

.todaylog-footnote{
  flex: 0 0 auto;
  padding: 8px 10px;
  font-size: .75rem;
  color: var(--muted);
  border-top: 1px solid var(--todaylog-line);
  background: rgba(2,6,23,.14);
}

/* hanya area tabel yang boleh scroll */
.todaylog-wrap{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden; /* supaya tidak “kaku” geser2 */
}

/* scrollbar halus */
.todaylog-wrap::-webkit-scrollbar{ width: 8px; }
.todaylog-wrap::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.26);
  border-radius: 999px;
}
.todaylog-wrap::-webkit-scrollbar-thumb:hover{
  background: rgba(148,163,184,.36);
}
.todaylog-wrap::-webkit-scrollbar-track{
  background: rgba(2,6,23,.08);
}

/* table: lebih soft, tidak kaku */
.todaylog-table{
  width: 100%;
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed; /* <<< stabil, tidak “loncat” */
}

/* sticky header + glass */
.todaylog-table thead th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)), var(--todaylog-th-bg) !important;
  color: var(--todaylog-th-txt) !important;

  font-weight: 900;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .09em;

  padding: .6rem .7rem !important;
  border-bottom: 1px solid var(--todaylog-line) !important;
  backdrop-filter: blur(10px);
}

/* body cells */
.todaylog-table tbody td{
  padding: .6rem .7rem !important;
  border-bottom: 1px solid rgba(148,163,184,.10) !important;
  font-size: .90rem;
  vertical-align: middle;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* <<< rapih */
}

/* zebra & hover */
.todaylog-table tbody tr:nth-child(odd){ background: var(--todaylog-row-a); }
.todaylog-table tbody tr:nth-child(even){ background: var(--todaylog-row-b); }
.todaylog-table tbody tr:hover{
  background: var(--todaylog-row-hover);
}

/* time column: lebih “pill” */
.todaylog-table tbody td:first-child{
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.todaylog-table tbody td:first-child::before{
  content:"";
  display:inline-block;
  width: .45rem;
  height: .45rem;
  border-radius: 999px;
  margin-right: .45rem;
  background: rgba(56,189,248,.55);
  vertical-align: middle;
}

/* name column: sedikit lebih tegas */
.todaylog-table tbody td:nth-child(2){
  color: var(--text);
}
.todaylog-table tbody td:nth-child(2) strong{
  font-weight: 900;
  color: var(--title);
}

/* ========================= TICKER ========================= */
.signage-ticker{
  border-top: 1px solid var(--line);
  background: var(--ticker-bg);
  display:flex;
  align-items:center;
  overflow:hidden;
  padding: 0 14px;
}
.ticker-track{
  display:inline-flex;
  gap: 60px;
  white-space: nowrap;
  will-change: transform;
  animation: tickerMove 22s linear infinite;
  font-weight: 700;
  letter-spacing:.02em;
}
.ticker-track span{ color: var(--title); }
.ticker-track .muted{ color: var(--muted); font-weight: 600; }

@keyframes tickerMove{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ========================= SETTINGS FLOAT ========================= */
.settings-float{
  position: fixed;
  right: 18px;
  top: 96px;
  z-index: 1040;
  touch-action: none;
}
.settings-float-btn{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(2,6,23,.78);
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  cursor: grab;
  backdrop-filter: blur(10px);
}
.settings-float-btn:active{ cursor: grabbing; }
.settings-float-btn:hover{ border-color: rgba(56,189,248,.35); }

/* ========================= THEME: LIGHT ========================= */
body.theme-light{
  --bg: #f8fafc;
  --bg-grad-a: rgba(14,165,233,.14);
  --bg-grad-b: rgba(34,197,94,.12);

  --panel: rgba(255,255,255,.92);
  --panel-2: rgba(255,255,255,.82);
  --line: rgba(15,23,42,.12);

  --text: #0b1220;
  --muted:#334155;
  --title: #0b1220;

  --header-bg: linear-gradient(180deg, rgba(241,245,249,.95), rgba(226,232,240,.75));
  --ticker-bg: linear-gradient(180deg, rgba(241,245,249,.9), rgba(226,232,240,.75));
  --clock-bg: rgba(255,255,255,.85);
  --hint-bg: rgba(255,255,255,.82);

  --corner: rgba(15,23,42,.45);

  /* todaylog light */
  --todaylog-bg: rgba(255,255,255,.70);
  --todaylog-head-bg: rgba(241,245,249,.92);
  --todaylog-line: rgba(15,23,42,.12);
  --todaylog-th-bg: rgba(226,232,240,.92);

  --todaylog-row-a: rgba(15,23,42,.035);
  --todaylog-row-hover: rgba(59,130,246,.10);

  --soft-shadow: 0 12px 30px rgba(2,6,23,.10);
}

body.theme-light .signage-logo{
  filter: drop-shadow(0 6px 18px rgba(15,23,42,.14));
}
body.theme-light .status-pill{
  background: rgba(255,255,255,.90);
  color: var(--text);
}
body.theme-light .settings-float-btn{
  background: rgba(255,255,255,.92);
  color: var(--text);
}
body.theme-light .todaylog-footnote{
  background: rgba(226,232,240,.60);
}
body.theme-light .todaylog-table tbody td:first-child::before{
  background: rgba(59,130,246,.55);
}

/* ========================= OPTIONAL EXTRA THEMES ========================= */
body.theme-blue{
  --accent: #60a5fa;
  --bg-grad-a: rgba(96,165,250,.45);
  --bg-grad-b: rgba(56,189,248,.28);
}
body.theme-green{
  --accent: #34d399;
  --bg-grad-a: rgba(34,197,94,.38);
  --bg-grad-b: rgba(16,185,129,.26);
}
body.theme-blue .todaylog-table tbody td:first-child::before{ background: rgba(96,165,250,.60); }
body.theme-green .todaylog-table tbody td:first-child::before{ background: rgba(52,211,153,.60); }

/* ========================= RESPONSIVE ========================= */
@media (max-width: 991.98px){
  body{ overflow:auto; }
  .container.live-shell{ height:auto; }
  .card-live{ height:auto; grid-template-rows: 74px auto 56px; }
  .signage-main{ grid-template-columns: 1fr; }
  .camera-frame{ min-height: 360px; }

  /* mobile: pendekin log supaya enak */
  :root{ --todaylog-h: 240px; }
}

/* =========================================================
   FIX: Bootstrap .table bikin cell jadi putih (override zebra)
   Tempel PALING BAWAH live4.css
   ========================================================= */

/* paksa table mengikuti token tema */
.todaylog-table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);

  --bs-table-striped-bg: transparent;
  --bs-table-striped-color: var(--text);

  --bs-table-hover-bg: transparent;
  --bs-table-hover-color: var(--text);

  color: var(--text) !important;
}

/* Bootstrap ngasih background-color ke tiap cell -> matikan */
.todaylog-table > :not(caption) > * > *{
  background-color: transparent !important;
  color: inherit !important;
  border-color: rgba(148,163,184,.12) !important;
}

/* zebra & hover harus diterapkan ke CELL (bukan cuma TR) */
.todaylog-table tbody tr:nth-child(odd) > *{
  background-color: var(--todaylog-row-a) !important;
}
.todaylog-table tbody tr:nth-child(even) > *{
  background-color: var(--todaylog-row-b) !important;
}
.todaylog-table tbody tr:hover > *{
  background-color: var(--todaylog-row-hover) !important;
}

/* kolom waktu lebih muted, kolom nama lebih tegas */
.todaylog-table tbody td:first-child{
  color: var(--muted) !important;
}
.todaylog-table tbody td:nth-child(2){
  color: var(--title) !important;
}
.todaylog-table tbody td:nth-child(2) strong{
  color: var(--title) !important;
}

/* =========================================================
   RESULT UI: Modal ringkas + Toast panel kiri bawah
   Tempel PALING BAWAH live4.css
   ========================================================= */

:root{
  --result-toast-h: 160px;         /* tinggi area toast (bawah panel kiri) */
  --result-toast-radius: 14px;

  --result-surface: rgba(2,6,23,.34);
  --result-surface-2: rgba(2,6,23,.55);
  --result-line: rgba(148,163,184,.22);

  --result-success-bg: rgba(34,197,94,.14);
  --result-success-br: rgba(34,197,94,.35);
  --result-success-tx: #bbf7d0;

  --result-error-bg: rgba(239,68,68,.12);
  --result-error-br: rgba(239,68,68,.35);
  --result-error-tx: #fecaca;

  --result-warn-bg: rgba(251,191,36,.12);
  --result-warn-br: rgba(251,191,36,.35);
  --result-warn-tx: #fde68a;
}

/* ===== Panel kiri: hanya konten scroll, toast tetap nempel bawah ===== */
.signage-panel.signage-panel-left .panel-body{
  overflow: hidden;
  padding: 10px 12px;
  min-height: 0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.signage-panel.signage-panel-left #board-left.panel-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}
.signage-panel.signage-panel-left #board-left.panel-scroll::-webkit-scrollbar{ width:6px; }
.signage-panel.signage-panel-left #board-left.panel-scroll::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.30);
  border-radius:999px;
}

/* ===== Toast Panel ===== */
.result-toast-panel{
  flex: 0 0 var(--result-toast-h);
  height: var(--result-toast-h);
  min-height: var(--result-toast-h);
  border-radius: var(--result-toast-radius);
  border: 1px solid var(--result-line);
  background: linear-gradient(180deg, var(--result-surface), rgba(2,6,23,.18));
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  overflow: hidden;
  display:flex;
  flex-direction:column;
}

.result-toast-titlebar{
  flex: 0 0 auto;
  padding: 8px 10px;
  background: var(--result-surface-2);
  border-bottom: 1px solid var(--result-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

/* list tidak scroll (karena item auto hilang 5 detik),
   tapi kalau burst cepat, kita tetap rapikan */
.result-toast-list{
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

/* item toast */
.result-toast-item{
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(15,23,42,.55);
  padding: 10px 10px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  backdrop-filter: blur(8px);
}

.result-toast-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 4px;
  flex: 0 0 auto;
  background: rgba(148,163,184,.5);
}

.result-toast-main{
  flex: 1 1 auto;
  min-width: 0;
}
.result-toast-title{
  font-weight: 900;
  font-size: .95rem;
  line-height: 1.15;
  color: var(--title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-toast-sub{
  margin-top: 2px;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.2;
}

.result-toast-meta{
  flex: 0 0 auto;
  font-size: .75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* states */
.result-toast-item.is-success{
  background: var(--result-success-bg);
  border-color: var(--result-success-br);
}
.result-toast-item.is-success .result-toast-dot{ background: rgba(34,197,94,.85); }
.result-toast-item.is-success .result-toast-sub{ color: var(--result-success-tx); }

.result-toast-item.is-error{
  background: var(--result-error-bg);
  border-color: var(--result-error-br);
}
.result-toast-item.is-error .result-toast-dot{ background: rgba(239,68,68,.85); }
.result-toast-item.is-error .result-toast-sub{ color: var(--result-error-tx); }

/* ===== Modal ringkas ikut tema ===== */
.result-modal-surface{
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.92));
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}

.result-modal-icon{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 30px;
  font-weight: 900;
  background: rgba(148,163,184,.14);
  border: 1px solid rgba(148,163,184,.28);
}

/* LIGHT theme tuning */
body.theme-light{
  --result-surface: rgba(255,255,255,.72);
  --result-surface-2: rgba(241,245,249,.92);
  --result-line: rgba(15,23,42,.12);

  --result-success-bg: rgba(34,197,94,.10);
  --result-error-bg: rgba(239,68,68,.10);
  --result-warn-bg: rgba(251,191,36,.12);
}
body.theme-light .result-toast-item{
  background: rgba(255,255,255,.86);
  border-color: rgba(15,23,42,.10);
}
body.theme-light .result-modal-surface{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,245,249,.92));
  color: var(--text);
}

/* mobile: toast lebih pendek */
@media (max-width: 991.98px){
  :root{ --result-toast-h: 140px; }
}


/* =========================================================
   FORCE AUTOSCALE IMG DI KONTEN (sidebar kiri/kanan)
   Tempel PALING BAWAH live4.css
   ========================================================= */

/* cegah horizontal scroll karena elemen konten */
#board-left,
#board-right{
  overflow-x: hidden !important;
}

/* autoscale semua <img> yg muncul di konten */
#board-left img,
#board-right img{
  max-width: 100% !important;  /* jangan lebih lebar dari panel */
  width: auto !important;      /* hormati rasio */
  height: auto !important;     /* jangan gepeng */
  display: block;              /* biar rapi */
  margin: .35rem auto;         /* center */
}

/* kalau ada img yang punya width/height attribute atau style inline,
   paksa tetap masuk panel */
#board-left img[width],
#board-right img[width]{
  width: 100% !important;
  max-width: 100% !important;
}

/* opsional: bikin gambar enak dilihat */
#board-left img,
#board-right img{
  border-radius: 12px;
  object-fit: contain;
}

/* kalau konten punya figure/video/iframe yang sering melebar */
#board-left iframe,
#board-right iframe,
#board-left video,
#board-right video{
  max-width: 100% !important;
}