/* =============================================================================
   Reel Creative — style.css
   Light, bold SaaS dashboard matched to the provided mockup.
   app.js is untouched, so this stylesheet styles BOTH:
     - the static chrome I control in the HTML (sidebar, topbar, panels)
     - the markup app.js injects (.stat-card, .client-card, .video-row,
       .platform-row, .split-bar, .badge, .metric ...)
============================================================================= */

:root {
  --primary:        #FF4D2E;   /* coral red */
  --primary-dark:   #E63E20;
  --primary-soft:   rgba(255, 77, 46, 0.12);
  --primary-softer: rgba(255, 77, 46, 0.06);

  --bg:        #F5F5F5;
  --surface:   #FFFFFF;
  --text:      #1A1A1A;
  --text-dim:  #888888;
  --text-faint:#AAAAAA;
  --border:    #EEEEEE;
  --border-strong: #E2E2E2;

  --ig-grey:   #D9D9D9;        /* Instagram bars / secondary bars */
  --tiktok:    #FF4D2E;        /* coral bars for TikTok */
  --instagram: #E1306C;

  --radius:    14px;
  --radius-sm: 10px;
  --shadow:    0 1px 3px rgba(16, 24, 40, 0.05), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 6px 18px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 14px 32px rgba(16, 24, 40, 0.12);

  --sidebar-w: 240px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; max-width: 100%; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* stop flex/grid children from forcing the page wider than the viewport */
.layout, .main, .main__topbar, .main__title, .dash-grid, .panel, .stat-grid { min-width: 0; }
.main, .panel, .card { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* =============================================================================
   BUTTONS
============================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 11px 18px; font-size: 14.5px; font-weight: 600;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.06s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { width: 100%; background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); }
.btn--ghost { background: #fff; color: var(--text-dim); border-color: var(--border-strong); }
.btn--ghost:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-softer); }

/* coral "Export Report" button (top-right of main) */
.btn-export {
  background: var(--primary); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 12px 20px;
  font-size: 14.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 10px rgba(255, 77, 46, 0.25);
  transition: background 0.15s, transform 0.06s;
}
.btn-export:hover { background: var(--primary-dark); }
.btn-export:active { transform: translateY(1px); }
.btn-export svg { width: 18px; height: 18px; }

/* =============================================================================
   BRAND / LOGO
============================================================================= */
/* RC monogram logo — sidebar */
.rc-logo { display: flex; align-items: center; gap: 12px; }
.rc-logo svg { width: 40px; height: 40px; flex-shrink: 0; display: block; border-radius: 10px; }
.rc-logo__tagline { font-size: 11.5px; font-weight: 600; color: var(--text-faint); letter-spacing: 0.01em; line-height: 1.3; }

/* RC monogram logo — login page */
.rc-logo--login svg { width: 56px; height: 56px; border-radius: 14px; }

/* =============================================================================
   LOGIN PAGE
============================================================================= */
@keyframes rc-bg-shift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
.login-page {
  display: grid; place-items: center; min-height: 100vh; padding: 24px;
  background: linear-gradient(135deg, #FFF5F3 0%, #FFFFFF 35%, #FFF0EC 65%, #FFEAE4 100%);
  background-size: 400% 400%;
  animation: rc-bg-shift 12s ease infinite;
}
.login-card {
  width: 100%; max-width: 420px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 40px 36px; box-shadow: var(--shadow-md);
}
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 32px; text-align: center; }
.login-brand__tagline { font-size: 13px; font-weight: 600; color: var(--primary); letter-spacing: 0.03em; text-transform: uppercase; }
.login-card h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 6px; text-align: center; }
.login-card .subtitle { color: var(--text-dim); font-size: 14.5px; margin-bottom: 28px; text-align: center; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--text); margin-bottom: 7px; font-weight: 600; }
.field input {
  width: 100%; background: #fff; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text);
  font-size: 15px; transition: border-color 0.15s, box-shadow 0.15s;
}
.field input::placeholder { color: var(--text-faint); }
.field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.btn--primary { margin-top: 6px; }

.form-error { color: var(--primary-dark); font-size: 13px; min-height: 18px; margin-top: 10px; opacity: 0; transition: opacity 0.15s; }
.form-error.is-visible { opacity: 1; }

.demo-box { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--border); }
.demo-box p { font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; margin-bottom: 12px; }
.demo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-chip {
  background: #fff; border: 1px solid var(--border-strong); color: var(--text-dim);
  border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; transition: all 0.15s;
}
.demo-chip:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-softer); }

/* =============================================================================
   APP LAYOUT  (sidebar + main)
============================================================================= */
.layout { display: flex; min-height: 100vh; }

/* ---- Sidebar ---- */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); z-index: 30;
  display: flex; flex-direction: column; gap: 26px;
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 26px 16px;
}
.sidebar__logo { padding: 2px 8px 8px; }
.sidebar__logo .rc-logo { flex-direction: column; align-items: flex-start; gap: 8px; }

.sidebar__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  color: var(--text-dim); font-weight: 600; font-size: 14.5px;
  transition: background 0.15s, color 0.15s;
}
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-item:hover { background: #F7F7F7; color: var(--text); }
.nav-item--active { background: var(--primary-soft); color: var(--primary); }

.sidebar__user { border-top: 1px solid var(--border); padding-top: 16px; }
.user-chip { display: flex; align-items: center; gap: 10px; }
.user-chip__avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 12.5px;
}
.user-chip__info { flex: 1; min-width: 0; }
.user-chip__info strong { font-size: 14px; font-weight: 700; display: block; line-height: 1.2; }
.user-chip__info span { font-size: 12px; color: var(--text-faint); }
.user-chip__more {
  background: none; border: none; color: var(--text-faint);
  padding: 6px; border-radius: 8px; display: grid; place-items: center;
}
.user-chip__more svg { width: 18px; height: 18px; }
.user-chip__more:hover { background: #F7F7F7; color: var(--primary); }

/* ---- Main column ---- */
.main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; padding: 32px 40px 72px; }

.main__topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 32px; flex-wrap: wrap;
}
.main__title h1 { font-size: clamp(26px, 3.5vw, 34px); font-weight: 800; letter-spacing: -0.03em; }
.main__title .subtitle { color: var(--text-dim); margin-top: 6px; font-size: 15px; }

/* client identity used in the topbar on client.html */
.client-id { display: flex; align-items: center; gap: 16px; }
.client-id .avatar { width: 58px; height: 58px; border-radius: 15px; font-size: 25px; }
.client-header__handles { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.handle {
  font-size: 12px; color: var(--text-dim); background: #fff;
  border: 1px solid var(--border-strong); padding: 4px 10px; border-radius: 999px; font-weight: 500;
}

.back-link { font-size: 13.5px; font-weight: 600; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; transition: color 0.15s; }
.back-link:hover { color: var(--primary); }

.section-title { font-size: 13px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin: 40px 0 18px; }

/* =============================================================================
   TIKTOK-STYLE PROFILE CARD (client header)
============================================================================= */
#clientProfile { margin-bottom: 24px; }
@keyframes tt-glow {
  0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 4px 14px rgba(0,0,0,0.28), 0 14px 36px rgba(0,0,0,0.22), 0 32px 64px rgba(0,0,0,0.16), -6px 0 28px rgba(255,77,46,0.18); }
  50%       { box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 4px 14px rgba(0,0,0,0.28), 0 14px 36px rgba(0,0,0,0.22), 0 32px 64px rgba(0,0,0,0.16), -10px 0 40px rgba(255,77,46,0.40); }
}
.tt-card {
  position: relative;
  display: flex; align-items: center; gap: 22px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.013) 0px, rgba(255,255,255,0.013) 1px, transparent 1px, transparent 5px),
    linear-gradient(155deg, #232323 0%, #1a1a1a 45%, #151515 100%);
  color: #fff;
  border-radius: 20px; padding: 26px 28px;
  border-left: 3px solid var(--primary);
  overflow: hidden;
  animation: tt-glow 3.5s ease-in-out infinite;
}
/* thin coral gradient accent at the very top of the card */
.tt-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--primary) 0%, rgba(255,77,46,0.45) 55%, transparent 90%);
}
/* glossy shine — soft highlight across top half */
.tt-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 48%; z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,0.048) 0%, transparent 100%);
  border-radius: 20px 20px 0 0;
  pointer-events: none;
}
.tt-card__avatar {
  position: relative; flex-shrink: 0; z-index: 2;
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 34px; font-weight: 800; color: #fff;
  background: linear-gradient(145deg, #3e3e3e 0%, #2c2c2c 45%, #1e1e1e 100%);
  box-shadow:
    0 6px 20px rgba(0,0,0,0.55),
    0 2px 6px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -2px 0 rgba(0,0,0,0.45),
    0 0 0 2px rgba(255,255,255,0.07);
}
.tt-card__photo {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.tt-card__body { min-width: 0; flex: 1; position: relative; z-index: 2; }
.tt-card__name { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #fff; }
.tt-card__handle { font-size: 14px; color: #9a9a9a; margin-top: 4px; }
.tt-card__stats { display: flex; margin: 16px 0 12px; }
.tt-stat { display: flex; flex-direction: column; gap: 2px; padding: 0 20px; }
.tt-stat:first-child { padding-left: 0; }
.tt-stat:not(:first-child) { border-left: 1px solid rgba(255, 255, 255, 0.13); }
.tt-stat__num { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.tt-stat__lbl { font-size: 12px; color: #8a8a8a; font-weight: 500; }
.tt-card__bio {
  font-size: 13.5px; color: #c4c4c4; line-height: 1.45; max-width: 580px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* =============================================================================
   STAT CARDS  (4 across) — injected by app.js into .stat-grid
   Big bold number, small label, coral sub, coral icon top-right (CSS only).
============================================================================= */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat-card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 24px 22px; box-shadow: var(--shadow);
  transition: box-shadow 0.18s, transform 0.18s;
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.stat-card__label { font-size: 13.5px; color: var(--text-dim); font-weight: 600; padding-right: 52px; }
.stat-card__value { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; margin: 12px 0 8px; line-height: 1; color: var(--text); }
.stat-card__sub { font-size: 13px; color: var(--primary); font-weight: 700; }

/* coral icon chip, top-right of every stat card */
.stat-card::after {
  content: ''; position: absolute; top: 22px; right: 22px;
  width: 40px; height: 40px; border-radius: 11px;
  background-color: var(--primary-soft);
  background-repeat: no-repeat; background-position: center; background-size: 20px;
}
/* per-card icons — admin order: clients, views, videos, comments */
#adminStats .stat-card:nth-child(1)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF4D2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
#adminStats .stat-card:nth-child(2)::after,
#clientStats .stat-card:nth-child(1)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF4D2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
#adminStats .stat-card:nth-child(3)::after,
#clientStats .stat-card:nth-child(2)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF4D2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='13' height='12' rx='2'/%3E%3Cpath d='M22 8l-5 4 5 4V8z'/%3E%3C/svg%3E"); }
#adminStats .stat-card:nth-child(4)::after,
#clientStats .stat-card:nth-child(4)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF4D2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
#clientStats .stat-card:nth-child(3)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF4D2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E"); }

/* =============================================================================
   PANELS (white cards that wrap injected content)
============================================================================= */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 26px; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel__head h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.link-coral { color: var(--primary); font-weight: 600; font-size: 13.5px; }
.link-coral:hover { color: var(--primary-dark); }
.panel__foot { text-align: center; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--border); }
.panel__foot a { color: var(--primary); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }

/* two-column lower area on client.html (videos | platform chart) */
.dash-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: start; }

/* =============================================================================
   ADMIN — client cards (injected into #clientGrid)
============================================================================= */
.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.client-card {
  position: relative; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; overflow: hidden;
  box-shadow: var(--shadow); transition: box-shadow 0.18s, transform 0.18s;
}
.client-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.client-card__accent { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.client-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.avatar {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  font-weight: 800; font-size: 20px; flex-shrink: 0;
  background: var(--primary-soft); color: var(--primary);
}
.client-card__name { font-size: 17.5px; font-weight: 700; letter-spacing: -0.01em; }
.client-card__meta { font-size: 13px; color: var(--text-faint); margin-top: 2px; }
.client-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.client-card__stats div { display: flex; flex-direction: column; gap: 3px; }
.client-card__stats .num { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.client-card__stats .lbl { font-size: 11.5px; color: var(--text-faint); font-weight: 500; }
.client-card__cta { margin-top: 18px; font-size: 13.5px; font-weight: 700; color: var(--primary); }

/* =============================================================================
   PLATFORM BREAKDOWN (injected .card into #platformBreakdown)
   coral = TikTok, grey = Instagram
============================================================================= */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow); }
.card__title { font-size: 17px; font-weight: 700; margin-bottom: 20px; letter-spacing: -0.01em; }

.split-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--bg); margin-bottom: 22px; }
.split-bar__seg { height: 100%; transition: width 0.6s ease; }
.split-bar__seg--tiktok { background: var(--primary); }
.split-bar__seg--instagram { background: var(--ig-grey); }

.platform-rows { display: flex; flex-direction: column; gap: 14px; }
.platform-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; background: #FAFAFA; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.platform-row__stats { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-dim); flex: 1; }
.platform-row__stats strong { color: var(--text); font-weight: 800; }
.platform-row__pct { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }

/* engagement card (TikTok-only) */
.engagement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.eng-stat { background: #FAFAFA; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.eng-stat__value { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); }
.eng-stat__label { font-size: 12.5px; color: var(--text-dim); }
.top-video-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #FAFAFA; border: 1px solid var(--border); border-radius: var(--radius-sm); flex-wrap: wrap; }
.top-video-row__label { font-size: 12.5px; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.top-video-row__title { font-size: 13.5px; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-video-row__views { font-size: 13px; font-weight: 700; color: var(--primary); white-space: nowrap; }

/* badges */
.badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.02em; white-space: nowrap; }
.badge--tiktok { background: var(--primary-soft); color: var(--primary); }
.badge--instagram { background: #F0F0F0; color: #555; }

/* =============================================================================
   VIDEO LIST  (injected into #videoList) — styled as a clean table
============================================================================= */
.video-list { display: flex; flex-direction: column; }
.video-row {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 4px; border-bottom: 1px solid var(--border);
}
.video-row:last-child { border-bottom: none; }
.video-row:hover { background: #FAFAFA; }

/* faux thumbnail to match the mockup's image column */
.video-row::before {
  content: ''; width: 52px; height: 40px; border-radius: 8px; flex-shrink: 0;
  background: #F0F0F0 no-repeat center / 18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23BBBBBB'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}

.video-row__main { flex: 1; min-width: 0; }
.video-row__bar { display: none; }  /* mockup table has no progress bars */
.video-row__title { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; }
.video-row__title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.video-row__metrics { display: flex; align-items: center; gap: 28px; flex-shrink: 0; }
.metric { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 56px; }
.metric__num { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.metric__lbl { font-size: 10.5px; color: var(--text-faint); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
/* show the posted date first (mockup column order: Date, Views, Comments) */
.metric--muted { order: -1; align-items: flex-start; min-width: 80px; }
.metric--muted .metric__num { color: var(--text-dim); font-weight: 600; }

/* NOTE: all responsive rules are consolidated into the mobile-first
   "RESPONSIVE — breakpoints" section at the END of this file (tablet ≤1024px,
   mobile ≤768px). Keeping them in one place avoids the conflicting breakpoints
   this file used to have. */

/* =============================================================================
   CLIENT DASHBOARD OVERHAUL — premium, mobile-first, zero horizontal overflow.
   Adds: video carousel, sparkline stat cards, more breathing room.
============================================================================= */

/* let the page breathe + stack like an app (carousel full-width, chart below) */
.dash-grid { grid-template-columns: 1fr; gap: 28px; }
.main { padding-bottom: 96px; }
.section-title { margin-top: 8px; }

/* ---------- Stat cards: alive + a subtle trend sparkline ---------- */
.stat-card {
  border-radius: 18px;
  padding: 22px 22px 18px;
  animation: riseIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.stat-grid .stat-card:nth-child(1) { animation-delay: 0.02s; }
.stat-grid .stat-card:nth-child(2) { animation-delay: 0.08s; }
.stat-grid .stat-card:nth-child(3) { animation-delay: 0.14s; }
.stat-grid .stat-card:nth-child(4) { animation-delay: 0.20s; }
.stat-card__value { font-size: 38px; }
.stat-card__spark { margin-top: 14px; height: 30px; pointer-events: none; }
.spark { width: 100%; height: 30px; display: block; overflow: visible; }
.spark__area { fill: var(--primary); opacity: 0.09; }
.spark__line {
  fill: none; stroke: var(--primary); stroke-width: 2;
  vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: sparkDraw 1.1s ease 0.25s forwards;
}

@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sparkDraw { to { stroke-dashoffset: 0; } }

/* ---------- Video carousel ---------- */
.video-list { display: block; }           /* override the old flex-column list */
.empty-note { color: var(--text-dim); font-size: 14px; padding: 18px 2px; }

.carousel { position: relative; }
.carousel__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;   /* momentum swipe on iOS */
  scroll-behavior: smooth;
  padding: 6px 2px 16px;               /* room so card shadows aren't clipped */
  scrollbar-width: none;               /* Firefox */
}
.carousel__track::-webkit-scrollbar { display: none; } /* WebKit */

.vid-card {
  flex: 0 0 auto;
  width: clamp(220px, 78vw, 248px);    /* a peek of the next card hints "swipe" */
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  animation: riseIn 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.vid-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.vid-card__thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(160deg, var(--accent, var(--primary)), #161616);
}
.vid-card__thumb .badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255, 255, 255, 0.92); color: #1a1a1a;
  backdrop-filter: blur(6px);
}
.vid-card__date {
  position: absolute; top: 12px; right: 12px;
  font-size: 11px; font-weight: 600; color: #fff;
  background: rgba(0, 0, 0, 0.35); padding: 4px 9px; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.vid-card__play {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  transition: transform 0.18s ease;
}
.vid-card:hover .vid-card__play { transform: scale(1.08); }
.vid-card__play svg { width: 22px; height: 22px; fill: var(--primary); margin-left: 3px; }

.vid-card__body { padding: 15px 15px 17px; }
.vid-card__caption {
  font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 38px; margin-bottom: 14px;
}
.vid-card__metrics { display: flex; justify-content: space-between; gap: 8px; }
.vc-metric { display: flex; flex-direction: column; gap: 2px; }
.vc-metric__num { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.vc-metric__lbl {
  font-size: 10px; color: var(--text-faint); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* arrows — desktop only; mobile uses native swipe */
.carousel__arrow {
  position: absolute; top: 33%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff;
  box-shadow: var(--shadow-md); color: var(--text);
  display: grid; place-items: center; cursor: pointer;
  transition: opacity 0.15s ease, transform 0.12s ease, background 0.15s ease;
}
.carousel__arrow:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.carousel__arrow:active { transform: translateY(-50%) scale(0.94); }
.carousel__arrow svg { width: 20px; height: 20px; }
.carousel__arrow--prev { left: 2px; }
.carousel__arrow--next { right: 2px; }
.carousel__arrow.is-hidden { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .stat-card, .vid-card { animation: none; }
  .spark__line { animation: none; stroke-dashoffset: 0; }
  .carousel__track { scroll-behavior: auto; }
}

/* ---------- clickable card + real cover image ---------- */
.vid-card { text-decoration: none; color: inherit; display: block; }
.vid-card__thumb { overflow: hidden; }
.vid-card__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
/* keep overlays above the cover image */
.vid-card__thumb .badge,
.vid-card__date { z-index: 2; }
.vid-card__play { position: relative; z-index: 2; }

/* =============================================================================
   CALENDAR
============================================================================= */
:root { --amber: #F5A623; --amber-soft: rgba(245, 166, 35, 0.14); }

.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 4px;
}
.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; min-width: 168px; text-align: center; }
.cal-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: #fff; color: var(--text);
  display: grid; place-items: center; cursor: pointer; transition: all 0.15s;
}
.cal-arrow:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.cal-arrow svg { width: 20px; height: 20px; }

.cal-head__right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cal-legend { display: flex; gap: 14px; }
.cal-legend__item { font-size: 12.5px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot--confirmed { background: var(--primary); }
.dot--pending { background: var(--amber); }
.cal-today {
  border: 1px solid var(--primary); background: var(--primary-softer); color: var(--primary);
  font-weight: 700; font-size: 13.5px; padding: 9px 16px; border-radius: var(--radius-sm); cursor: pointer;
  transition: all 0.15s;
}
.cal-today:hover { background: var(--primary); color: #fff; }

.cal-hint { color: var(--text-faint); font-size: 13px; margin: 12px 0 16px; }

.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 8px;
}
.cal-weekdays span {
  font-size: 11.5px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.05em; text-align: left; padding-left: 4px;
}

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal-cell {
  min-height: 104px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 8px; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.cal-cell:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.cal-cell:active { transform: scale(0.99); }
.cal-cell--muted { background: #FAFAFA; }
.cal-cell--muted .cal-cell__num { color: var(--text-faint); }
.cal-cell--today { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.cal-cell__num { font-size: 13px; font-weight: 700; color: var(--text); }
.cal-cell--today .cal-cell__num {
  background: var(--primary); color: #fff; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px;
}
.cal-cell__chips { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.bk-chip {
  border: none; cursor: pointer; text-align: left;
  font-size: 11.5px; font-weight: 700; padding: 4px 8px; border-radius: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  border-left: 3px solid transparent; transition: filter 0.15s;
}
.bk-chip:hover { filter: brightness(0.97); }
.bk-chip--confirmed { background: var(--primary-soft); color: var(--primary-dark); border-left-color: var(--primary); }
.bk-chip--pending   { background: var(--amber-soft);  color: #9a6400;            border-left-color: var(--amber); }
.bk-chip--declined  { background: #F0F0F0;            color: #999;               border-left-color: #c4c4c4; text-decoration: line-through; }
.cal-more { font-size: 10.5px; font-weight: 600; color: var(--text-faint); padding-left: 2px; }

/* =============================================================================
   BOOKING DRAWER (right panel on desktop, bottom sheet on mobile)
============================================================================= */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16, 24, 40, 0.45); opacity: 0; transition: opacity 0.2s ease;
}
.drawer-overlay.is-open { opacity: 1; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(400px, 92vw);
  background: var(--surface); box-shadow: -12px 0 40px rgba(16, 24, 40, 0.18);
  padding: 24px; overflow-y: auto;
  transform: translateX(100%); transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.drawer.is-open { transform: none; }

.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.drawer__head h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.drawer__close {
  width: 36px; height: 36px; border-radius: 50%; border: none; background: #F4F4F4;
  color: var(--text-dim); display: grid; place-items: center; cursor: pointer; transition: all 0.15s;
}
.drawer__close:hover { background: var(--primary-soft); color: var(--primary); }
.drawer__close svg { width: 18px; height: 18px; }
.drawer__date { color: var(--text-dim); font-size: 14px; font-weight: 600; margin-bottom: 20px; }

.drawer__form { display: flex; flex-direction: column; gap: 16px; }
.drawer__label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text); }
.drawer__label input,
.drawer__label select,
.drawer__label textarea {
  font-family: inherit; font-size: 15px; color: var(--text);
  background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 11px 13px;
  width: 100%; transition: border-color 0.15s, box-shadow 0.15s;
}
.drawer__label textarea { resize: vertical; min-height: 72px; }

/* tappable time-slot picker (no typing) */
.drawer__field { display: flex; flex-direction: column; gap: 9px; }
.drawer__label-text { font-size: 13px; font-weight: 600; color: var(--text); }
.time-slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px;
  max-height: 196px; overflow-y: auto; padding: 2px;
}
.time-slot {
  border: 1px solid var(--border-strong); background: #fff; color: var(--text);
  border-radius: 10px; padding: 10px 6px; font-size: 13px; font-weight: 600;
  cursor: pointer; min-height: 44px; transition: all 0.12s;
}
.time-slot:hover { border-color: var(--primary); color: var(--primary); }
.time-slot.is-selected { background: var(--primary); border-color: var(--primary); color: #fff; }
.time-error { color: #d32f2f; font-size: 12.5px; font-weight: 600; }
.drawer__label input:focus,
.drawer__label select:focus,
.drawer__label textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.drawer__submit {
  margin-top: 4px; background: var(--primary); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 13px 18px; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background 0.15s;
}
.drawer__submit:hover { background: var(--primary-dark); }
.drawer__hint { font-size: 12.5px; color: var(--text-faint); line-height: 1.5; }

/* detail view */
.detail { display: flex; flex-direction: column; }
.detail__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.detail__row span:first-child { color: var(--text-dim); font-size: 13.5px; font-weight: 600; }
.detail__row strong { font-size: 14.5px; font-weight: 700; text-align: right; }
.detail__notes { padding: 14px 0; }
.detail__notes > span { color: var(--text-dim); font-size: 13.5px; font-weight: 600; display: block; margin-bottom: 6px; }
.detail__notes p { font-size: 14.5px; line-height: 1.5; }

.status-pill { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.status-pill--confirmed { background: var(--primary-soft); color: var(--primary-dark); }
.status-pill--pending { background: var(--amber-soft); color: #9a6400; }
.status-pill--declined { background: #F0F0F0; color: #888; }

.drawer__actions { display: flex; gap: 12px; margin-top: 22px; }
.btn-approve, .btn-decline {
  flex: 1; border-radius: var(--radius-sm); padding: 12px; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: all 0.15s;
}
.btn-approve { background: var(--primary); color: #fff; border: none; }
.btn-approve:hover { background: var(--primary-dark); }
.btn-decline { background: #fff; color: var(--text-dim); border: 1px solid var(--border-strong); }
.btn-decline:hover { border-color: #e57373; color: #d32f2f; }
.drawer__delete {
  width: 100%; margin-top: 14px; background: none; border: none; color: var(--text-faint);
  font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px; text-decoration: underline;
}
.drawer__delete:hover { color: #d32f2f; }

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-overlay { transition: none; }
}

/* =============================================================================
   RESPONSIVE — mobile-first breakpoints (the single source of truth)
     Desktop : > 1024px  (the base styles above)
     Tablet  : ≤ 1024px  (2-up stats, left sidebar kept)
     Mobile  : ≤ 768px   (sidebar → bottom nav bar, everything stacks)
============================================================================= */

/* ---------- TABLET ≤ 1024px ---------- */
@media (max-width: 1024px) {
  .main { padding: 28px 28px 88px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
}

/* ---------- MOBILE ≤ 768px ---------- */
@media (max-width: 768px) {
  /* ---- sidebar becomes a fixed bottom nav bar (Instagram/TikTok style) ---- */
  .sidebar {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: auto;
    flex-direction: row; align-items: stretch; gap: 0;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    border-right: none; border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.07);
    z-index: 50;
  }
  .sidebar__logo { display: none; }
  .sidebar__nav { flex-direction: row; flex: 1; gap: 0; overflow: visible; }
  .nav-item {
    flex: 1; flex-direction: column; justify-content: center; gap: 3px;
    min-height: 52px; padding: 7px 2px; border-radius: 12px;
    font-size: 10px; letter-spacing: 0;
  }
  .nav-item svg { width: 23px; height: 23px; }
  .nav-item span { display: none; }                       /* icons only */
  .nav-item:hover { background: transparent; }
  .nav-item--active { background: transparent; color: var(--primary); }

  /* re-order tabs: Dashboard · Calendar · Clients · Settings */
  .nav-item[data-nav="dashboard"] { order: 1; }
  .nav-item[data-nav="calendar"]  { order: 2; }
  .nav-item[data-nav="clients"]   { order: 3; }
  .nav-item[data-nav="settings"]  { order: 4; }

  /* sign-out kept reachable as the last bottom-bar slot (icon only) */
  .sidebar__user { border-top: none; padding-top: 0; display: flex; align-items: stretch; }
  .user-chip { gap: 0; }
  .user-chip__avatar, .user-chip__info { display: none; }
  .user-chip__more {
    flex-direction: column; min-width: 52px; min-height: 52px;
    padding: 7px; border-radius: 12px; color: var(--text-faint);
  }
  .user-chip__more svg { width: 22px; height: 22px; }

  /* ---- main clears the bottom bar ---- */
  .main { margin-left: 0; padding: 16px 16px calc(84px + env(safe-area-inset-bottom)); }

  /* ---- simplified top bar: page title + a single refresh icon ---- */
  .main__topbar { flex-wrap: nowrap; align-items: center; gap: 12px; margin-bottom: 18px; }
  .main__title { flex: 1; min-width: 0; }
  .main__title h1 { font-size: 22px; }
  .main__title .subtitle { font-size: 12.5px; margin-top: 3px; }
  .main__topbar .btn-export:not(#refreshBtn) { display: none; } /* hide print/export */
  #refreshStatus { display: none; }                             /* hide "updated…" text */
  #refreshBtn {
    padding: 0; width: 44px; height: 44px; border-radius: 50%;
    flex-shrink: 0; justify-content: center;
  }
  #refreshBtn span { display: none; }                           /* icon-only refresh */
  #refreshBtn svg { margin: 0; }

  /* ---- stat cards 2 × 2 ---- */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-card { padding: 16px 16px 14px; border-radius: 16px; }
  .stat-card:hover { transform: none; }   /* no hover lift on touch */
  .stat-card__label { font-size: 12px; padding-right: 34px; }
  .stat-card__value { font-size: 25px; margin: 7px 0 5px; }
  .stat-card__sub { font-size: 11.5px; }
  .stat-card::after { width: 30px; height: 30px; top: 14px; right: 14px; border-radius: 9px; background-size: 16px; }
  .stat-card__spark { height: 24px; margin-top: 10px; }
  .spark { height: 24px; }

  /* ---- video carousel: one full-width card at a time ---- */
  .vid-card { width: 100%; }
  .vid-card:hover { transform: none; }
  .vid-card__thumb { aspect-ratio: 16 / 9; }
  .carousel__track { gap: 12px; padding: 4px 0 12px; }
  .carousel__arrow { display: none; }      /* swipe only */

  /* ---- panels / chart full width + tighter ---- */
  .panel, .card { padding: 16px; border-radius: 16px; }
  .dash-grid { gap: 16px; }
  .section-title { margin: 22px 0 12px; }
  .client-grid { grid-template-columns: 1fr; gap: 14px; }
  .platform-row { gap: 10px; padding: 12px 14px; }
  .platform-row__stats { gap: 14px; font-size: 13px; }

  /* TikTok profile card → stacked & centred, stats stay in a row */
  #clientProfile { margin-bottom: 18px; }
  .tt-card { flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 22px 18px; border-radius: 18px; }
  .tt-card__avatar { width: 76px; height: 76px; font-size: 30px; }
  .tt-card__name { font-size: 21px; }
  .tt-card__stats { justify-content: center; margin: 14px 0 10px; }
  .tt-stat { padding: 0 16px; }
  .tt-stat:first-child { padding-left: 16px; }   /* keep the group symmetric when centred */
  .tt-card__bio { text-align: center; }

  /* ---- calendar ---- */
  .cal-head { gap: 10px; }
  .cal-nav { gap: 8px; }
  .cal-title { font-size: 17px; min-width: 0; }
  .cal-arrow { width: 44px; height: 44px; }
  .cal-head__right { width: 100%; justify-content: space-between; }
  .cal-hint { font-size: 12px; margin: 8px 0 12px; }
  .cal-weekdays { gap: 5px; }
  .cal-weekdays span { text-align: center; padding-left: 0; font-size: 10px; }
  .cal-grid { gap: 5px; }
  .cal-cell { min-height: 66px; padding: 5px; border-radius: 9px; gap: 4px; }
  .cal-cell__num { font-size: 12px; }
  .cal-cell__chips { gap: 3px; }
  .bk-chip { font-size: 9.5px; padding: 3px 5px; border-radius: 5px; border-left-width: 2px; }

  /* ---- booking drawer → bottom sheet (sits above the bottom nav) ---- */
  .drawer {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    max-height: 86vh; border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -12px 40px rgba(16, 24, 40, 0.2);
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
  .drawer.is-open { transform: none; }

  /* ---- login screen ---- */
  .login-page { padding: 16px; }
  .login-card { padding: 28px 22px; border-radius: 16px; }

  /* ---- guarantee 44px touch targets ---- */
  .btn, .cal-today, .drawer__submit, .time-slot,
  .btn-approve, .btn-decline, .demo-chip { min-height: 44px; }
}

/* ---------- very small phones ≤ 380px ---------- */
@media (max-width: 380px) {
  .stat-card__value { font-size: 22px; }
  .cal-legend { display: none; }   /* keep the calendar header tidy */
  .cal-cell { min-height: 58px; }
}

/* =============================================================================
   HERO BANNER — client dashboard greeting
============================================================================= */
.hero-banner {
  background: linear-gradient(135deg, #FF4D2E 0%, #FF6B4A 100%);
  border-radius: 18px;
  padding: 28px 32px;
  color: #fff;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.hero-banner::before {
  content: '';
  position: absolute;
  right: -30px; top: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
.hero-banner::after {
  content: '';
  position: absolute;
  right: 60px; bottom: -50px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.hero-banner__content { position: relative; z-index: 1; }
.hero-banner__title { font-size: 22px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.02em; }
.hero-banner__sub { font-size: 14px; margin: 0; opacity: 0.88; font-weight: 500; max-width: 480px; }

@media (max-width: 768px) {
  .hero-banner { padding: 22px 20px; border-radius: 14px; }
  .hero-banner__title { font-size: 18px; }
}

/* =============================================================================
   LOADING / ERROR STATES
============================================================================= */

/* ---- skeleton pulse animation ---- */
@keyframes skel-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.skel {
  background: #E8E8E8;
  border-radius: 6px;
  animation: skel-pulse 1.6s ease-in-out infinite;
}
.skel--sm  { height: 12px; width: 55%; margin-bottom: 14px; }
.skel--lg  { height: 38px; width: 70%; margin-bottom: 10px; }

/* ---- loading stat card ---- */
.stat-card--loading {
  pointer-events: none;
}
.stat-card--loading::after { display: none; } /* hide icon chip while loading */

/* ---- spinner (rotating arc) ---- */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 44px; height: 44px;
  animation: spin 0.9s linear infinite;
  flex-shrink: 0;
}

/* ---- first-load state (spinner + message, centered) ---- */
.first-load-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-dim);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}
.first-load-state p { margin: 0; }
.first-load-state small { font-size: 13px; font-weight: 400; color: var(--text-faint); }

/* ---- error state ---- */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-dim);
  font-size: 15px;
  font-weight: 500;
}
.error-state p { margin: 0; }

.btn-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 10px;
  border: 1.5px solid var(--primary);
  background: #fff;
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  min-height: 44px;
}
.btn-retry:hover { background: var(--primary); color: #fff; }

/* =============================================================================
   PAYMENT STATUS
============================================================================= */
.pay-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 26px;
  box-shadow: var(--shadow); margin-top: 24px; margin-bottom: 24px;
}
.pay-card--unpaid {
  border-color: rgba(255, 77, 46, 0.28);
  background: rgba(255, 77, 46, 0.018);
}
.pay-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.pay-card__title { font-size: 15px; font-weight: 700; color: var(--text); }

@keyframes pay-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.75; transform: scale(1.05); }
}
.pay-pulse-badge {
  background: var(--primary); color: #fff;
  font-size: 11.5px; font-weight: 700;
  padding: 5px 13px; border-radius: 999px;
  animation: pay-pulse 1.6s ease-in-out infinite;
  white-space: nowrap;
}
.pay-card__body { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.pay-card__amount {
  font-size: 38px; font-weight: 800; letter-spacing: -0.04em; color: var(--text); line-height: 1;
}
.pay-card__amount span { font-size: 15px; font-weight: 500; color: var(--text-dim); }
.pay-status {
  font-size: 14px; font-weight: 700; padding: 6px 14px; border-radius: 999px; white-space: nowrap;
}
.pay-status--paid { color: #1aaa59; background: rgba(46,204,113,0.13); }
.pay-status--unpaid { color: var(--primary); background: rgba(255,77,46,0.10); }
.pay-card__meta {
  display: flex; flex-direction: column; gap: 5px;
  border-top: 1px solid var(--border); padding-top: 14px;
  font-size: 13.5px;
}
.pay-meta__label { color: var(--text-dim); font-weight: 500; margin-right: 8px; }
.pay-meta__value { color: var(--text); font-weight: 600; }
.pay-card__message {
  font-size: 13.5px; font-weight: 600; color: var(--primary-dark);
  background: rgba(255,77,46,0.06); border-radius: 9px;
  padding: 11px 14px; margin-top: 14px;
}

/* admin payment management */
.pay-toggle {
  border: none; border-radius: 999px; padding: 7px 16px;
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: opacity 0.15s; white-space: nowrap;
}
.pay-toggle--paid   { background: rgba(46,204,113,0.13); color: #1aaa59; }
.pay-toggle--unpaid { background: rgba(255,77,46,0.10);  color: var(--primary); }
.pay-toggle:hover { opacity: 0.75; }
.pay-card__fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px;
}
.pay-field { display: flex; flex-direction: column; gap: 6px; }
.pay-field label { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.pay-field input {
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 14px; font-family: inherit; color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pay-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* payment notice bar (client-only, unpaid only) */
.pay-notice {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(255, 77, 46, 0.07); border: 1px solid rgba(255, 77, 46, 0.25);
  border-radius: var(--radius-sm); padding: 11px 16px;
  font-size: 13.5px; font-weight: 500; color: var(--text);
  margin-bottom: 20px;
}
.pay-notice__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  flex-shrink: 0; animation: pay-pulse 1.6s ease-in-out infinite;
}
.pay-notice__link {
  margin-left: auto; background: none; border: none; padding: 0;
  font-size: 13px; font-weight: 700; color: var(--primary);
  cursor: pointer; font-family: inherit; text-decoration: underline;
  white-space: nowrap;
}
.pay-notice__link:hover { opacity: 0.75; }

/* admin payment management panel */
.pay-admin-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; margin-top: 24px; margin-bottom: 24px;
}
.pay-admin-card__header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 14px 22px;
}
.pay-admin-card__header-left { display: flex; align-items: center; gap: 12px; }
.pay-admin-card__label { font-size: 13px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.pay-admin-status-badge {
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.pay-admin-status-badge--paid   { background: rgba(46,204,113,0.13); color: #1aaa59; }
.pay-admin-status-badge--unpaid { background: rgba(255,77,46,0.10);  color: var(--primary); }
.pay-save-indicator {
  font-size: 12.5px; font-weight: 700; color: #1aaa59;
  opacity: 0; transition: opacity 0.25s;
}
.pay-save-indicator--visible { opacity: 1; }

.pay-admin-card__body { padding: 20px 22px; display: flex; flex-direction: column; gap: 20px; }

.pay-status-toggle { display: flex; gap: 10px; flex-wrap: wrap; }
.pay-status-btn {
  flex: 1; min-width: 130px; padding: 12px 20px;
  border: 2px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg); font-size: 14px; font-weight: 700; font-family: inherit;
  color: var(--text-dim); cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.pay-status-btn:hover { border-color: var(--text-dim); color: var(--text); }
.pay-status-btn--active-paid   { background: rgba(46,204,113,0.10); border-color: #1aaa59; color: #1aaa59; }
.pay-status-btn--active-unpaid { background: rgba(255,77,46,0.08);  border-color: var(--primary); color: var(--primary); }

.pay-admin-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.pay-admin-field { display: flex; flex-direction: column; gap: 6px; }
.pay-admin-field label { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.pay-admin-field input {
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 14px; font-family: inherit; color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s; width: 100%; box-sizing: border-box;
}
.pay-admin-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.pay-input-group { display: flex; align-items: stretch; }
.pay-input-prefix {
  background: var(--border); color: var(--text-dim);
  font-size: 14px; font-weight: 700; padding: 10px 12px;
  border: 1px solid var(--border-strong); border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  display: flex; align-items: center; flex-shrink: 0;
}
.pay-input-group input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* payment badge on admin client card */
.pay-badge {
  font-size: 11.5px; font-weight: 700; padding: 4px 11px;
  border-radius: 999px; white-space: nowrap; margin-left: auto;
}
.pay-badge--paid   { background: rgba(46,204,113,0.13); color: #1aaa59; }
.pay-badge--unpaid { background: rgba(255,77,46,0.10);  color: var(--primary); }