/* ------------------------------------------------------------------ the ReelForge app, drawn the way its terminal UI looks
   Everything lives under .rf (one app instance, 1180 x 760 "mock" pixels, scaled into a window by core.mount).
   Colours are the app's Textual theme (dashboard/app.py) and the platforms' own colours. */
.rf {
  --bg: #0a0c0f;
  --surface: #101318;
  --panel: #161a21;
  --panel-2: #1f242d;
  --panel-3: #2a303b;
  --border: #3a4049;
  --text: #d7dde6;
  --bright: #ffffff;
  --muted: #8b93a1;
  --dim: #5c6370;
  --grid: #1a1f27;
  --green: #3dff9a;
  --blue: #7aa2f7;
  --yellow: #ffcc33;
  --red: #ff4d5e;
  --orange: #ff8a3d;
  --tiktok: #25f4ee;
  --youtube: #ff4040;
  --instagram: #b46cff;
  --x: #e7e9ea;

  position: absolute;
  left: 0;
  top: 0;
  width: 1180px;
  height: 760px;
  overflow: hidden;
  transform-origin: 0 0;
  background: var(--bg);
  color: var(--text);
  font: 400 13px/17px "JetBrains Mono", ui-monospace, monospace;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
  display: flex;
  flex-direction: column;
}
.rf * { box-sizing: border-box; }
.rf b, .rf strong { font-weight: 700; }
.rf .tt { color: var(--tiktok); }
.rf .yt { color: var(--youtube); }
.rf .ig { color: var(--instagram); }
.rf .xx { color: var(--x); }
.rf .green { color: var(--green); }
.rf .yellow { color: var(--yellow); }
.rf .red { color: var(--red); }
.rf .orange { color: var(--orange); }
.rf .blue { color: var(--blue); }
.rf .muted { color: var(--muted); }
.rf .dim { color: var(--dim); }
.rf .bright { color: var(--bright); }
.rf .bold { font-weight: 700; }
/* a platform box only colours its border and title, not everything inside it */
.rf .rf-box.tt, .rf .rf-box.yt, .rf .rf-box.ig, .rf .rf-box.xx, .rf .rf-box.all { color: var(--text); }
.rf .nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf .grow { flex: 1; min-width: 0; }
.rf .row { display: flex; gap: 10px; align-items: center; }
.rf .col { display: flex; flex-direction: column; min-height: 0; }

/* --- the top: grey header bar (logo, platform status, buttons) and the bell off to the right */
.rf-top { height: 51px; display: flex; flex-shrink: 0; }
.rf-header { flex: 1; display: flex; align-items: center; background: var(--panel); padding: 0 8px 0 10px; gap: 22px; }
.rf-logo { width: 62px; height: 36px; display: block; flex-shrink: 0; }
.rf-logo svg { width: 100%; height: 100%; display: block; }
.rf-status { display: flex; align-items: center; gap: 22px; font-weight: 700; white-space: nowrap; }
.rf-status .p::before { content: '●'; margin-right: 8px; font-size: 10px; position: relative; top: -1px; }
.rf-status .p.off { color: #4a515c; }
.rf-status .ago { color: var(--muted); font-weight: 400; }
.rf-status .badge { background: var(--yellow); color: var(--bg); padding: 0 6px; font-weight: 700; }
.rf-actions { margin-left: auto; display: flex; gap: 8px; }
.rf-actions .rf-btn { background: var(--panel-2); padding: 1px 9px; }
.rf-bell { width: 64px; margin: 0 6px 0 22px; display: grid; place-items: center; position: relative; cursor: pointer; }
.rf-bell:hover { background: var(--panel-2); }
.rf-bell svg { width: 46px; height: 40px; image-rendering: pixelated; display: block; }
.rf-bell .dot { position: absolute; right: 6px; top: 4px; width: 11px; height: 11px; background: var(--red); }
.rf-bell .dot[hidden] { display: none; }

/* --- tabs */
.rf-tabs { height: 26px; display: flex; align-items: flex-end; padding: 0 6px; gap: 2px; flex-shrink: 0; position: relative; }
.rf-tabs::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 0; height: 3px; background: repeating-linear-gradient(90deg, #2a303b 0 9px, transparent 9px 11px); }
.rf-tab { position: relative; padding: 2px 7px 3px; color: var(--muted); cursor: pointer; white-space: nowrap; z-index: 1; }
.rf-tab:hover { color: var(--text); }
.rf-tab.on { background: var(--green); color: var(--bg); font-weight: 700; }
.rf-tab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--green); }
.rf-tab .new { color: var(--red); margin-left: 6px; }

/* --- the panes under the tabs */
.rf-main { flex: 1; min-height: 0; display: flex; position: relative; }
.rf-pane { flex: 1; min-width: 0; min-height: 0; padding: 12px 12px 10px; display: none; flex-direction: column; gap: 8px; position: relative; }
.rf-pane.on { display: flex; }

/* --- boxes: a rounded border with the title set into it, like Textual's border-title */
.rf-box { position: relative; border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px 6px; min-width: 0; min-height: 0; }
.rf-box > .bt { position: absolute; top: -9px; left: 9px; padding: 0 5px; background: var(--bg); font-weight: 700; line-height: 17px; white-space: nowrap; }
.rf-box.thick { border-width: 2px; }
.rf-box.tt { border-color: var(--tiktok); } .rf-box.tt > .bt { color: var(--tiktok); }
.rf-box.yt { border-color: var(--youtube); } .rf-box.yt > .bt { color: var(--youtube); }
.rf-box.ig { border-color: var(--instagram); } .rf-box.ig > .bt { color: var(--instagram); }
.rf-box.xx { border-color: var(--x); } .rf-box.xx > .bt { color: var(--x); }
.rf-box.all { border-color: var(--green); } .rf-box.all > .bt { color: var(--green); }
.rf-head { font-weight: 700; white-space: nowrap; }
.rf-head .muted { font-weight: 400; }

/* --- buttons: dark blocks with bold text; .go is the bright green one */
.rf-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--panel-2); color: var(--bright); font-weight: 700; padding: 1px 10px; white-space: nowrap; cursor: pointer; border: 0; font: inherit; font-weight: 700; transition: background 120ms; }
.rf-btn:hover { background: var(--panel-3); }
.rf-btn.big { padding: 12px 18px; min-width: 120px; }
.rf-btn.go { background: var(--green); color: var(--bg); }
.rf-btn.go:hover { background: #7dffbd; }
.rf-btn.on { background: #1d5e3d; color: var(--bright); }
.rf-btn.press, .rf-btn:active { background: #39404c !important; transform: translateY(1px); }
.rf-btn.go.press { background: #2fd07d !important; }
.rf-seg { display: inline-flex; gap: 4px; }
.rf-seg .rf-btn { padding: 1px 8px; font-weight: 400; color: var(--muted); }
.rf-seg .rf-btn.on { background: #1d5e3d; color: var(--bright); font-weight: 700; }

/* --- tables */
.rf-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rf-table th { text-align: left; font-weight: 700; color: var(--text); padding: 0 6px; white-space: nowrap; cursor: pointer; }
.rf-table th:hover { color: var(--bright); background: var(--panel-2); }
.rf-table th.num, .rf-table td.num { text-align: right; }
.rf-table th .arrow { color: var(--text); }
.rf-table td { padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 19px; }
.rf-table tbody tr { cursor: pointer; }
.rf-table tbody tr:hover td { background: #141922; }
.rf-table tbody tr.sel td { background: #1d5e3d; }
.rf-table .tag { font-weight: 700; }
.rf-table .tag::before { content: '● '; font-size: 10px; }

/* --- charts (SVG drawn by core.js) */
.rf-chart { position: relative; width: 100%; height: 100%; }
.rf-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rf-chart text { font: 12px "JetBrains Mono", monospace; fill: var(--muted); }
.rf-chart .axis { stroke: var(--border); stroke-width: 1; }
.rf-chart .grid { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 2 3; }
.rf-chart .mark { stroke: var(--yellow); stroke-width: 1.2; stroke-dasharray: 2 3; }
.rf-chart text.mark-label { fill: var(--yellow); }
.rf-chart .bcol:hover rect { filter: brightness(1.25); }
.rf-chart .hover-band { fill: #1a212b; opacity: 0; }
.rf-chart .bcol:hover .hover-band { opacity: 1; }
.rf-chart .cbar { transform-box: fill-box; transform-origin: bottom; }
.rf-chart.grow .cbar { animation: rf-grow 700ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes rf-grow { from { transform: scaleY(0); } }
.rf-chart.draw .area { animation: rf-wipe 1400ms cubic-bezier(.4, 0, .2, 1) both; }
@keyframes rf-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* --- horizontal comparison bars (core.hBars) */
.rf-hbars { display: flex; flex-direction: column; gap: 2px; }
.rf-hbars .hb { display: flex; align-items: center; gap: 12px; height: 19px; }
.rf-hbars .hb-l { font-weight: 700; flex-shrink: 0; }
.rf-hbars .hb-t { flex: 1; height: 17px; }
.rf-hbars .hb-t i { display: block; height: 100%; transition: width 900ms cubic-bezier(.16, 1, .3, 1); }
.rf-hbars .hb-v { flex-shrink: 0; }

/* --- tooltip for charts and anything else that explains itself on hover */
.rf-tip { position: absolute; z-index: 30; pointer-events: none; background: #1f242d; border: 1px solid var(--border); border-radius: 5px; padding: 5px 9px; white-space: nowrap; opacity: 0; transition: opacity 120ms; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.rf-tip.on { opacity: 1; }
.rf-tip .k { color: var(--muted); }

/* --- a toast: what a click did */
.rf-toast { position: absolute; right: 16px; bottom: 16px; z-index: 40; background: var(--panel-2); border-left: 3px solid var(--green); padding: 8px 14px; max-width: 460px; box-shadow: 0 10px 30px rgba(0,0,0,.6); animation: rf-toast 260ms cubic-bezier(.16, 1, .3, 1) both; }
.rf-toast.warn { border-left-color: var(--yellow); }
.rf-toast .t { font-weight: 700; color: var(--bright); }
.rf-toast.out { opacity: 0; transform: translateY(6px); transition: opacity 300ms, transform 300ms; }
@keyframes rf-toast { from { opacity: 0; transform: translateY(10px); } }

/* --- Overview (js/tabs/overview.js) */
.ov-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 8px; flex-shrink: 0; }
.ov-card { height: 108px; border-width: 2px; padding: 8px 12px 4px; display: flex; flex-direction: column; cursor: default; }
.ov-nums { display: grid; grid-template-columns: auto auto 1fr; column-gap: 8px; white-space: nowrap; }
.ov-nums b { text-align: right; color: var(--bright); }
.ov-nums .green { text-align: right; font-weight: 700; }
.ov-spark { flex: 1; min-height: 12px; margin: 3px 0 1px; }
.ov-cap { font-size: 12px; line-height: 14px; }
.ov-badges { flex-shrink: 0; }
.ov-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 452px; gap: 10px; }
.ov-trends { gap: 8px; }
.ov-controls { flex-shrink: 0; }
.ov-legend { display: flex; gap: 16px; margin-left: 18px; white-space: nowrap; }
.ov-legend .lg { cursor: pointer; }
.ov-legend .lg:hover { filter: brightness(1.3); }
.ov-legend .lg.off { opacity: .3; text-decoration: line-through; }
.ov-chartbox { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 4px; }
.ov-views { flex: 1.25; }
.ov-pair { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0; }
.ov-chart { flex: 1; min-height: 0; }
.ov-side { gap: 10px; }
.ov-top { flex: 1; display: flex; flex-direction: column; padding-top: 6px; }
.ov-top-head { margin-bottom: 4px; flex-shrink: 0; }
.ov-table { flex: 1; min-height: 0; }
.ov-latest { flex-shrink: 0; display: flex; flex-direction: column; gap: 1px; }
.ov-lrow { display: grid; grid-template-columns: 52px 1.3fr 1fr .9fr .6fr; gap: 8px; white-space: nowrap; }
.ov-lrow .num { text-align: right; }

/* --- the notifications drawer, sliding in from the right under the bell (js/tabs/drawer.js fills it) */
.rf-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 430px; z-index: 20; background: var(--surface); border-left: 4px solid var(--panel-3); padding: 12px; display: flex; flex-direction: column; gap: 8px; transform: translateX(105%); transition: transform 380ms cubic-bezier(.16, 1, .3, 1); }
.rf-drawer.open { transform: none; box-shadow: -20px 0 40px rgba(0,0,0,.45); }

/* --- small pieces */
.rf-input { background: #161a21; padding: 9px 12px; color: var(--bright); border: 0; outline: 0; font: inherit; width: 100%; caret-color: var(--green); user-select: text; }
.rf-input:focus { box-shadow: inset 0 0 0 1px var(--green); }
.rf-label { color: var(--muted); }
.rf-pop { animation: rf-pop 420ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes rf-pop { from { opacity: 0; transform: translateY(5px); } }
.rf-flash { animation: rf-flash 900ms ease-out; }
@keyframes rf-flash { from { background: rgba(61, 255, 154, .25); } }
.rf-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #1d5e3d transparent; }
.rf-scroll::-webkit-scrollbar { width: 8px; }
.rf-scroll::-webkit-scrollbar-thumb { background: #1d5e3d; }
.rf-caret { display: inline-block; width: 8px; height: 15px; background: var(--green); vertical-align: -2px; animation: rf-blink 1s steps(1) infinite; }
@keyframes rf-blink { 50% { opacity: 0; } }