/* ──────────────────────────────────────────────────────────────────────────
   Littlebird UGC — brand stylesheet
   Type:  Meraki (display / headings) · Söhne (body)
   Color: Off White / Eggshell / Off Black + brand secondaries
   Theme: light is the default; [data-theme="dark"] (set by JS) flips tokens.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Fonts ──────────────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Meraki';
  src:url('/static/fonts/meraki-regular.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Soehne';
  src:url('/static/fonts/soehne-buch.woff2') format('woff2');
  font-weight:400 600; font-style:normal; font-display:swap;
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Design tokens — LIGHT (default) ───────────────────────────────────────── */
:root{
  color-scheme: light;

  /* surfaces */
  --bg:       #FFFAEB;   /* Off White */
  --bg2:      #F4EDD9;   /* Eggshell  */
  --surface:  #FFFFFF;   /* White (cards) */
  --card:     #F4EDD9;   /* Eggshell (hover / active fills) */
  --nav-bg:   rgba(255,250,235,.85);

  /* lines */
  --border:   rgba(27,28,21,.12);
  --border2:  rgba(27,28,21,.24);

  /* text */
  --text:     #1B1C15;   /* Off Black */
  --muted:    rgba(27,28,21,.62);
  --dim:      rgba(27,28,21,.45);

  /* brand action — editorial monochrome */
  --accent:          #1B1C15;   /* Off Black button */
  --accent-hover:    #000000;
  --accent-contrast: #FFFAEB;   /* text on accent */
  --link:            #008AB3;   /* Cyan Cornflower Blue */
  --link-hover:      #006A8A;
  --ring:            rgba(0,138,179,.22);

  /* legacy aliases (older templates reference these) */
  --orange:   var(--accent);
  --orange-d: var(--accent-hover);
  --green:    #00674F;
  --yellow:   #8A5A00;
  --red:      #C41E3A;
  --blue:     #008AB3;
  --purple:   #2E1F64;

  /* semantic pairs: fg / bg / border */
  --c-success-fg:#00674F; --c-success-bg:rgba(0,103,79,.10);  --c-success-bd:rgba(0,103,79,.24);
  --c-warn-fg:   #8A5A00; --c-warn-bg:   rgba(212,160,23,.16);--c-warn-bd:   rgba(138,90,0,.28);
  --c-danger-fg: #C41E3A; --c-danger-bg: rgba(196,30,58,.10); --c-danger-bd: rgba(196,30,58,.24);
  --c-info-fg:   #008AB3; --c-info-bg:   rgba(0,138,179,.10); --c-info-bd:   rgba(0,138,179,.24);
  --c-accent2-fg:#2E1F64; --c-accent2-bg:rgba(46,31,100,.10); --c-accent2-bd:rgba(46,31,100,.24);
  --c-plum-fg:   #7F1734; --c-plum-bg:   rgba(127,23,52,.10); --c-plum-bd:   rgba(127,23,52,.24);
  --c-neutral-fg:rgba(27,28,21,.55); --c-neutral-bg:rgba(27,28,21,.06); --c-neutral-bd:rgba(27,28,21,.16);

  --r: 12px;
  --shadow: 0 1px 2px rgba(27,28,21,.04), 0 4px 16px rgba(27,28,21,.05);
}

/* ── Design tokens — DARK ──────────────────────────────────────────────────── */
html[data-theme="dark"]{
  color-scheme: dark;

  --bg:       #1B1C15;   /* Off Black */
  --bg2:      #232419;
  --surface:  #26271F;
  --card:     #30312A;
  --nav-bg:   rgba(27,28,21,.85);

  --border:   rgba(255,250,235,.12);
  --border2:  rgba(255,250,235,.24);

  --text:     #FFFAEB;   /* Off White */
  --muted:    rgba(255,250,235,.64);
  --dim:      rgba(255,250,235,.42);

  --accent:          #F4EDD9;   /* Eggshell button (inverse) */
  --accent-hover:    #FFFFFF;
  --accent-contrast: #1B1C15;
  --link:            #5BC4E6;
  --link-hover:      #92C2F9;
  --ring:            rgba(91,196,230,.26);

  --orange:   var(--accent);
  --orange-d: var(--accent-hover);
  --green:    #50C878;
  --yellow:   #FFEE8C;
  --red:      #F4889B;
  --blue:     #5BC4E6;
  --purple:   #92C2F9;

  --c-success-fg:#50C878; --c-success-bg:rgba(80,200,120,.15); --c-success-bd:rgba(80,200,120,.32);
  --c-warn-fg:   #FFEE8C; --c-warn-bg:   rgba(255,238,140,.12);--c-warn-bd:   rgba(255,238,140,.30);
  --c-danger-fg: #F4889B; --c-danger-bg: rgba(196,30,58,.20);  --c-danger-bd: rgba(244,136,155,.38);
  --c-info-fg:   #5BC4E6; --c-info-bg:   rgba(0,138,179,.20);  --c-info-bd:   rgba(91,196,230,.38);
  --c-accent2-fg:#92C2F9; --c-accent2-bg:rgba(146,194,249,.14);--c-accent2-bd:rgba(146,194,249,.34);
  --c-plum-fg:   #E89EB8; --c-plum-bg:   rgba(232,158,184,.14);--c-plum-bd:   rgba(232,158,184,.34);
  --c-neutral-fg:rgba(255,250,235,.55); --c-neutral-bg:rgba(255,250,235,.08); --c-neutral-bd:rgba(255,250,235,.18);

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html{ font-size:16px; }
body{
  font-family:'Soehne',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease, color .2s ease;
}
h1,h2,h3,h4{
  font-family:'Meraki','Soehne',Georgia,serif;
  font-weight:400; letter-spacing:-.01em; line-height:1.15;
}
a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-hover); text-decoration:underline; }

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; height:60px;
  background:var(--nav-bg);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(12px);
}
.nav-logo{
  display:flex; align-items:center; gap:9px;
  font-family:'Meraki','Soehne',serif; font-weight:400; font-size:1.15rem;
  color:var(--text); text-decoration:none; letter-spacing:-.01em;
}
.nav-logo:hover{ text-decoration:none; }
/* hummingbird mark — masked so it always paints in --text (adapts to theme) */
.nav-logo-bird{
  display:inline-block; width:24px; height:24px; flex-shrink:0;
  background:var(--text);
  -webkit-mask:url('/static/img/hummingbird-black.png') center/contain no-repeat;
  mask:url('/static/img/hummingbird-black.png') center/contain no-repeat;
}
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  padding:7px 13px; border-radius:8px;
  color:var(--muted); font-size:.9rem; text-decoration:none;
  transition:background .15s, color .15s;
}
.nav-links a:hover{ background:var(--card); color:var(--text); text-decoration:none; }
.nav-docs{ border:1px solid var(--border) !important; }
.nav-logout{
  padding:7px 13px; border-radius:8px;
  color:var(--muted); font-size:.9rem;
  background:transparent; border:1px solid var(--border);
  cursor:pointer; font-family:inherit;
  transition:background .15s, color .15s;
}
.nav-logout:hover{ background:var(--card); color:var(--text); }

/* theme toggle */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px;
  background:transparent; border:1px solid var(--border);
  color:var(--muted); cursor:pointer; margin-left:4px;
  transition:background .15s,color .15s,border-color .15s;
}
.theme-toggle:hover{ background:var(--card); color:var(--text); }
.theme-toggle svg{ width:18px; height:18px; display:none; }
html[data-theme="dark"]  .theme-toggle .icon-moon{ display:block; }
html[data-theme="light"] .theme-toggle .icon-sun{ display:block; }
html:not([data-theme="dark"]) .theme-toggle .icon-sun{ display:block; }
/* when following system, show a subtle auto dot */
.theme-toggle[data-pref="system"] .icon-sun,
.theme-toggle[data-pref="system"] .icon-moon{ display:none !important; }
.theme-toggle[data-pref="system"] .icon-auto{ display:block !important; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.layout{ max-width:1320px; margin:0 auto; padding:36px 28px; }
.page-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:28px;
}
.page-header h1{ font-size:1.9rem; font-weight:400; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:840px){ .two-col{ grid-template-columns:1fr; } }

/* ── Card ────────────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:24px 26px;
  margin-bottom:20px;
  box-shadow:var(--shadow);
}
.card h3{ font-family:'Meraki','Soehne',serif; font-size:1.15rem; font-weight:400; margin-bottom:16px; color:var(--text); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.tabs{ display:flex; gap:4px; margin-bottom:20px; background:var(--surface); padding:4px; border-radius:10px; width:fit-content; border:1px solid var(--border); }
.tab-btn{
  padding:8px 22px; border-radius:7px; border:none;
  background:transparent; color:var(--muted);
  font-size:.9rem; font-weight:500; cursor:pointer; font-family:inherit;
  transition:all .15s; display:flex; align-items:center; gap:8px;
}
.tab-btn:hover{ color:var(--text); }
.tab-btn.active{ background:var(--card); color:var(--text); }
.tab-badge{ background:var(--accent); color:var(--accent-contrast); font-size:.7rem; font-weight:700; padding:1px 7px; border-radius:99px; }
.tab-panel.hidden{ display:none !important; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 18px; border-radius:8px;
  font-size:.9rem; font-weight:600;
  cursor:pointer; border:1px solid transparent;
  text-decoration:none; transition:all .15s; white-space:nowrap; font-family:inherit;
}
.btn-primary { background:var(--accent); color:var(--accent-contrast); }
.btn-primary:hover { background:var(--accent-hover); color:var(--accent-contrast); text-decoration:none; }
.btn-success { background:var(--c-success-bg); color:var(--c-success-fg); border-color:var(--c-success-bd); }
.btn-success:hover { filter:brightness(1.05); }
.btn-warning { background:var(--c-warn-bg); color:var(--c-warn-fg); border-color:var(--c-warn-bd); }
.btn-danger  { background:var(--c-danger-bg); color:var(--c-danger-fg); border-color:var(--c-danger-bd); }
.btn-danger:hover  { filter:brightness(1.05); }
.btn-ghost   { background:transparent; color:var(--muted); border-color:var(--border); }
.btn-ghost:hover   { background:var(--card); color:var(--text); text-decoration:none; }
.btn-orange-active { background:var(--c-info-bg); color:var(--c-info-fg); border-color:var(--c-info-bd); }
.btn-sm { padding:5px 12px; font-size:.8rem; }
.btn-group{ display:flex; gap:8px; }
.action-cell { display:flex; flex-direction:column; gap:6px; white-space:nowrap; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
label{
  display:flex; flex-direction:column; gap:5px;
  margin-bottom:14px; font-size:.85rem; font-weight:500; color:var(--muted);
}
input[type=text],input[type=email],input[type=url],input[type=number],
input[type=date],select,textarea{
  background:var(--bg);
  border:1px solid var(--border2);
  border-radius:8px;
  padding:10px 13px;
  font-size:.9rem;
  color:var(--text);
  width:100%;
  transition:border-color .15s, box-shadow .15s;
  font-family:inherit;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--link);
  box-shadow:0 0 0 3px var(--ring);
}
select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
textarea{ resize:vertical; min-height:80px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:600px){ .form-row{ grid-template-columns:1fr; } }
.form-actions{ display:flex; gap:10px; margin-top:8px; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.table th{
  text-align:left; padding:11px 14px;
  background:var(--bg2); border-bottom:1px solid var(--border);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--dim);
  white-space:nowrap;
}
.table td{ padding:13px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.table tr:last-child td{ border-bottom:none; }
.table tr:hover td{ background:var(--bg2); }
.table-scroll{ overflow-x:auto; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge{
  display:inline-block; padding:3px 10px; border-radius:99px;
  font-size:.72rem; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  text-transform:capitalize;
}
.badge-submitted    { background:var(--c-warn-bg);    color:var(--c-warn-fg);    border:1px solid var(--c-warn-bd); }
.badge-ai_review    { background:var(--c-info-bg);    color:var(--c-info-fg);    border:1px solid var(--c-info-bd); }
.badge-flagged      { background:var(--c-danger-bg);  color:var(--c-danger-fg);  border:1px solid var(--c-danger-bd); }
.badge-coach_review { background:var(--c-accent2-bg); color:var(--c-accent2-fg); border:1px solid var(--c-accent2-bd); }
.badge-approved     { background:var(--c-success-bg); color:var(--c-success-fg); border:1px solid var(--c-success-bd); }
.badge-revision_requested { background:var(--c-danger-bg); color:var(--c-danger-fg); border:1px solid var(--c-danger-bd); }
.badge-status-active     { background:var(--c-success-bg); color:var(--c-success-fg); border:1px solid var(--c-success-bd); }
.badge-status-warming_up { background:var(--c-warn-bg);    color:var(--c-warn-fg);    border:1px solid var(--c-warn-bd); }
.badge-status-paused     { background:var(--c-neutral-bg); color:var(--c-neutral-fg); border:1px solid var(--c-neutral-bd); }
.badge-qc-pass    { background:var(--c-success-bg); color:var(--c-success-fg); border:1px solid var(--c-success-bd); }
.badge-qc-flagged { background:var(--c-danger-bg);  color:var(--c-danger-fg);  border:1px solid var(--c-danger-bd); }
.badge-qc-fail    { background:var(--c-danger-bg);  color:var(--c-danger-fg);  border:1px solid var(--c-danger-bd); }
.badge-pay-pending  { background:var(--c-warn-bg);    color:var(--c-warn-fg);    border:1px solid var(--c-warn-bd); }
.badge-pay-approved { background:var(--c-success-bg); color:var(--c-success-fg); border:1px solid var(--c-success-bd); }
.badge-pay-paid     { background:var(--c-success-bg); color:var(--c-success-fg); border:1px solid var(--c-success-bd); }
.badge-pay-rejected { background:var(--c-danger-bg);  color:var(--c-danger-fg);  border:1px solid var(--c-danger-bd); }
.badge-platform     { background:var(--c-accent2-bg); color:var(--c-accent2-fg); border:1px solid var(--c-accent2-bd); }
.badge-role-admin   { background:var(--c-plum-bg);    color:var(--c-plum-fg);    border:1px solid var(--c-plum-bd); }
.badge-role-coach   { background:var(--c-info-bg);    color:var(--c-info-fg);    border:1px solid var(--c-info-bd); }
.badge-role-creator { background:var(--c-success-bg); color:var(--c-success-fg); border:1px solid var(--c-success-bd); }

.role-select{
  background:var(--bg); color:var(--text);
  border:1px solid var(--border2); border-radius:6px;
  padding:5px 8px; font-size:.85rem; cursor:pointer; font-family:inherit;
}
.role-select:focus{ outline:none; border-color:var(--link); box-shadow:0 0 0 3px var(--ring); }
.badge-platform-tiktok    { background:var(--c-info-bg);    color:var(--c-info-fg); }
.badge-platform-youtube   { background:var(--c-danger-bg);  color:var(--c-danger-fg); }
.badge-platform-instagram { background:var(--c-plum-bg);    color:var(--c-plum-fg); }

/* ── SLA / Countdown ─────────────────────────────────────────────────────── */
.countdown{ display:inline-block; font-weight:700; font-family:ui-monospace,monospace; font-size:.85rem; padding:3px 10px; border-radius:6px; }
.countdown-ok      { background:var(--c-success-bg); color:var(--c-success-fg); }
.countdown-warning { background:var(--c-warn-bg);    color:var(--c-warn-fg); }
.countdown-overdue { background:var(--c-danger-bg);  color:var(--c-danger-fg); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.6} }
.sla-row-overdue td{ background:var(--c-danger-bg) !important; }
.sla-row-warning td{ background:var(--c-warn-bg) !important; }

/* ── Review queue specifics ──────────────────────────────────────────────── */
.drive-link{
  display:inline-flex; align-items:center; gap:5px;
  color:var(--muted); font-size:.85rem;
  background:var(--bg2); border:1px solid var(--border);
  padding:5px 10px; border-radius:6px;
  transition:all .15s;
}
.drive-link:hover{ color:var(--link); border-color:var(--link); text-decoration:none; }

.revision-row td{ padding:0 !important; }
.revision-form{
  padding:14px 16px;
  background:var(--c-warn-bg);
  border-top:1px solid var(--c-warn-bd);
  border-bottom:1px solid var(--c-warn-bd);
}
.revision-form textarea{ margin-bottom:10px; }
.revision-actions{ display:flex; gap:8px; }

/* ── Payments specifics ──────────────────────────────────────────────────── */
.duplicate-row td{ background:var(--c-danger-bg) !important; }
.duplicate-flag{ color:var(--c-danger-fg); font-size:.72rem; font-weight:700; display:block; margin-bottom:2px; }
.bonus-flag{
  display:inline-block; background:var(--c-success-bg);
  color:var(--c-success-fg); border:1px solid var(--c-success-bd);
  padding:2px 9px; border-radius:99px; font-size:.75rem; font-weight:700;
}
.url-link{ color:var(--muted); font-size:.82rem; }
.url-link:hover{ color:var(--link); }
.reject-input{
  flex:1; background:var(--bg); border:1px solid var(--border2);
  border-radius:6px; padding:6px 10px; font-size:.8rem; color:var(--text); font-family:inherit;
}

/* ── Admin specifics ─────────────────────────────────────────────────────── */
.portal-link-cell{ display:flex; align-items:center; gap:8px; max-width:280px; }
.portal-token{ font-size:.7rem; color:var(--dim); background:var(--bg2); padding:2px 6px; border-radius:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:160px; display:block; }
.copy-btn{ flex-shrink:0; }

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.filter-bar{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.filter-btn{ padding:6px 14px; border-radius:99px; font-size:.8rem; font-weight:500; text-decoration:none; border:1px solid var(--border); color:var(--muted); background:var(--surface); transition:all .15s; }
.filter-btn:hover,.filter-btn.active{ background:var(--accent); color:var(--accent-contrast); border-color:var(--accent); text-decoration:none; }

/* ── Brief blocks ────────────────────────────────────────────────────────── */
.brief-block{ background:var(--bg2); border-radius:8px; padding:12px 14px; margin-bottom:12px; }
.brief-block-label{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--link); margin-bottom:5px; }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert{ padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:.9rem; }
.alert-success{ background:var(--c-success-bg); color:var(--c-success-fg); border:1px solid var(--c-success-bd); }
.alert-error  { background:var(--c-danger-bg);  color:var(--c-danger-fg);  border:1px solid var(--c-danger-bd); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state{ text-align:center; padding:48px 24px; }
.empty-icon{ font-size:2.5rem; margin-bottom:12px; }
.empty-state p{ color:var(--muted); }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.text-muted{ color:var(--muted); }
.text-dim   { color:var(--dim); }
.hidden     { display:none !important; }
code{ font-family:ui-monospace,monospace; }
small{ font-size:.8rem; color:var(--muted); }