static/css/style.css

/* Sizes (easy to tweak) */
:root{
  --flip-w: 360px;   /* card width */
  --flip-h: 370px;   /* card height */
}


/* --- Flip cards row: single line, horizontal scroll --- */
.flip-row{
  display:flex; flex-wrap:nowrap; gap:3px; overflow-x:auto; padding-bottom:4px;min-height: calc(var(--flip-h) + 3px);
}

/* --- Flip card base (clip/round here, not on the rotating inner) --- */
.flip-card{
  --card-bg:#111827; --card-fg:#ffffff;
  flex: 0 0 var(--flip-w); outline:0; border:1px solid #e6e9ef;
  border-radius:14px; overflow:hidden;              /* <-- moved here */
  perspective:1000px; -webkit-perspective:1000px;   /* 3D space */
}
.flip-card:focus{ box-shadow:0 0 0 3px rgba(30,58,138,.25); border-radius:8px; }

/* rotating container */
.flip-card .flip-card-inner{
  position:relative; width:100%; height: var(--flip-h);
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
  transition:transform .6s;
  /* no border/overflow/radius here */
}

/* flip on hover or when focused */
@media (hover: hover){
  .flip-card:hover .flip-card-inner{ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); }
}
.flip-card:focus-within .flip-card-inner{ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); }

/* faces */
.flip-card-front,
.flip-card-back{
  position:absolute; inset:0; display:flex; flex-direction:column;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:var(--card-bg); color:var(--card-fg);
  transform:translateZ(0); -webkit-transform:translateZ(0);
}

/* explicitly separate layers + orientation */
.flip-card-front{
  z-index:2;
  transform:rotateY(0deg) translateZ(1px);           /* <-- own layer */
  -webkit-transform:rotateY(0deg) translateZ(1px);
}
.flip-card-back{
  z-index:1;
  transform:rotateY(180deg) translateZ(1px);         /* <-- own layer */
  -webkit-transform:rotateY(180deg) translateZ(1px);
}

/* content */
.flip-title{ font-weight:800; font-size:1.05rem; padding:12px 14px; letter-spacing:.2px; }
.flip-content{
  padding: 12px 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* subtract title + padding (~64px) so content fits the face height */
  max-height: calc(var(--flip-h) - 64px);
}
.flip-subtitle{ font-size:.85rem; }
.flip-card .text-muted{ color: rgba(17,24,39,.65) !important; }

.type-explosive{ --card-bg:#fecaca; --card-fg:#111827; } /* red-200 */
.type-momentum { --card-bg:#fde68a; --card-fg:#111827; } /* amber-200 */
.type-consistent{ --card-bg:#bfdbfe; --card-fg:#111827; }/* blue-200 */
.type-gradual  { --card-bg:#bbf7d0; --card-fg:#111827; } /* green-200 */
.type-organic  { --card-bg:#ddd6fe; --card-fg:#111827; } /* violet-200 */

/* --- Two-column split with vertical separator --- */
.split-2 { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 992px) {
  .split-2 { grid-template-columns: 1fr 12px 1fr; align-items: start; }
}
.split-2-col { min-width: 0; }
.split-2-sep { width: 12px; background: linear-gradient(180deg, #eef2ff, #eef1f6); border-radius: 8px; }

/* Existing styles kept */
:root{ --bg:#f6f8fb; --card-bg:#ffffff; --text:#232b3a; }
body.bg-body { background: var(--bg); color: var(--text); }
.navbar.bg-primary { background: #1e3a8a !important; }

.card { border-radius: 14px; border-color: #e6e9ef; }
.card-header { border-bottom: 1px solid #eef1f6; }

.table-header { background: #eef2ff; }
.table thead th { font-weight: 600; }
.table tbody td { vertical-align: top; }

.thumb {
  display:inline-block; width:120px; height:68px; border-radius:10px;
  overflow:hidden; border:1px solid #e5e7eb; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.thumb img { width:100%; height:100%; object-fit:cover; }

/* KPI styles remain if you still use them elsewhere */
.kpi-card { background: var(--card-bg); border: 1px solid #e6e9ef; border-radius: 14px; }
.kpi-label { font-size: .9rem; color: #6b7280; }
.kpi-value { font-size: 2rem; font-weight: 700; line-height: 1; }
.kpi-sub { font-size: .8rem; color: #9aa1ad; }

/* Sample videos right side */
.sample-table-wrap{
  max-height: 420px;       /* scroll within accordion body */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.thumb-sm{
  width: 64px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

/* Color sliver on accordion headers by archetype */
.accordion-button.sample-head{ background: #f8fafc; }
.accordion-button.sample-head.type-explosive{ border-left:6px solid #F87171; } /* red-500 */
.accordion-button.sample-head.type-momentum { border-left:6px solid #FCD34D; } /* amber-500 */
.accordion-button.sample-head.type-consistent{ border-left:6px solid #93C5FD; }/* blue-500 */
.accordion-button.sample-head.type-gradual  { border-left:6px solid #86EFAC; } /* green-500 */
.accordion-button.sample-head.type-organic  { border-left:6px solid #C4B5FD; } /* violet-500 */

.chart-box{
  position: relative;
  height: 380px;      /* ensures non-zero height */
  width: 100%;
}

#videoPieChart{ width: 100% !important; height: 100% !important; display:block; }

/* Compact, more readable sample videos table */
.sample-table-wrap{
  max-height: 520px;           /* a bit taller to reduce scroll */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.sample-table{
  font-size: 0.84rem;          /* smaller text for density */
}
@media (min-width: 1600px){
  .sample-table{ font-size: 0.9rem; }
}

/* tighter cell padding */
.compact-table > :not(caption) > * > *{
  padding: .35rem .5rem;
}

/* align numbers nicely */
.metric-cell{
  text-align: right;
  font-variant-numeric: tabular-nums;  /* monospaced digits for vertical scan */
  white-space: nowrap;
}

/* slimmer thumbnails */
.thumb-xs{
  width: 56px;
  height: 32px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

/* ellipsis for long titles on wide screens; wrap on small */
.sample-title{
  display: inline-block;
  max-width: 520px;            /* adjust as needed */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1400px){
  .sample-title{ max-width: 380px; }
}
@media (max-width: 1200px){
  .sample-title{ max-width: 300px; }
}
@media (max-width: 992px){
  .sample-title{
    max-width: 100%;
    white-space: normal;       /* allow wrapping on smaller screens */
    overflow: visible;
    text-overflow: clip;
  }
}

/* Two-column layout with a thin vertical separator */
#area3-metrics .split-2{
  display:flex;
  gap:24px;
  align-items:stretch;
}
#area3-metrics .split-2-col{
  flex:1 1 0;
  min-width:0; /* lets tables/canvas shrink without overflow */
}
#area3-metrics .split-2-sep{
  width:1px;
  background:rgba(0,0,0,.08);
}

/* Chart container — make it taller so it visually matches the table area */
#area3-metrics .linechart-box{
  position:relative;
  height:200px;   /* increased from 380px */
  width:100%;
}
@media (min-width:1400px){
  #area3-metrics .linechart-box{ height:220px; }
}

/* Ensure the canvas fills its parent box */
#metricsLineChart{
  width:100% !important;
  height:100% !important;
  display:block;
}

/* Compact table spacing + right-aligned numeric columns */
#area3-metrics .compact-table > :not(caption) > * > *{
  padding:.35rem .5rem;
}
#area3-metrics .metric-cell{
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Sticky table header so labels remain visible while scrolling */
#area3-metrics .table-header{
  position:sticky;
  top:0;
  z-index:1;
  background:#fff; /* or var(--bs-body-bg) if you use Bootstrap vars */
}

/* Optional: scrollable table body if it grows large */
#area3-metrics .sample-table-wrap{
  max-height:560px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* Viral Topics: compact numeric columns */
#viral-topics .table td.text-end, #viral-topics .table th.text-end{
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Section 3: compact numeric columns */
#nascent-trends .table td.text-end, #nascent-trends .table th.text-end{
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ===== Section 3 layout & polish ===== */
#nascent-trends .section3-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 992px){
  #nascent-trends .section3-grid{
    grid-template-columns: 1fr 1fr;
    align-items:start;
  }
}

/* ===== Section 3 readability ===== */
#nascent-trends .nt-block { padding: 10px 12px; }
#nascent-trends .nt-summary {
  font-size: 0.975rem;
  color: #4B5563; /* slate-600 */
  line-height: 1.6;
}

/* Tables: let them scroll horizontally on small screens */
#nascent-trends .table-wrap { overflow-x: auto; border: 1px solid #E5E7EB; }
#nascent-trends .table-wrap-tight { overflow-x: auto; }
#nascent-trends .table td.text-end, #nascent-trends .table th.text-end {
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* Card grid: tidy, symmetrical */
#nascent-trends .card-grid {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  #nascent-trends .card-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1400px){
  #nascent-trends .card-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

#nascent-trends .card-soft {
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
}
#nascent-trends .card-soft-title {
  background: #F9FAFB; /* gray-50 */
  font-weight: 600;
}
#nascent-trends .list-tight { padding-left: 1.15rem; }
#nascent-trends .list-tight li { margin: 6px 0; }

/* Full-width block + summary */
#nascent-trends .nt-block { padding: 10px 12px; }
#nascent-trends .nt-summary { font-size: 0.975rem; color: #4B5563; line-height: 1.6; }

/* Accent cards */
#nascent-trends .card-accent { border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
#nascent-trends .card-accent .card-header { font-weight: 700; border: 0; }
#nascent-trends .card-accent .card-body { background: #fff; }

#nascent-trends .card-accent--indigo .card-header { background: #EEF2FF; color:#111827; }     /* indigo-50 */
#nascent-trends .card-accent--emerald .card-header { background: #ECFDF5; color:#065F46; }    /* emerald-50/800 */
#nascent-trends .card-accent--rose .card-header { background: #FFF1F2; color:#9F1239; }       /* rose-50/900 */
#nascent-trends .card-accent--sky .card-header { background: #F0F9FF; color:#075985; }        /* sky-50/900 */
#nascent-trends .card-accent--amber .card-header { background: #FFFBEB; color:#92400E; }      /* amber-50/800 */

/* Tables */
#nascent-trends .table-wrap { overflow-x: auto; border: 1px solid #E5E7EB; }
#nascent-trends .table td.text-end, #nascent-trends .table th.text-end {
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* List spacing */
#nascent-trends .list-tight { padding-left: 1.15rem; }
#nascent-trends .list-tight li { margin: 6px 0; }

/* Subtitles */
#nascent-trends .subtitle { font-weight: 700; color:#111827; }

/* Sub-tabs styling inside Nascent Trends */
#nascent-trends .subtabs .nav-link.active{
  background:#111827; color:#fff;
}
#nascent-trends .subtabs .nav-link{
  border:1px solid #E5E7EB;
}