/* ============================================================================
   Launch Labs — Admin Design Tokens & Components  (v1.0)
   ----------------------------------------------------------------------------
   Save as:     dev-frontend/public/css/ll-admin.css
   Include via: <link rel="stylesheet" href="/css/ll-admin.css">

   Drop-in stylesheet establishing the shared visual language across the
   admin dashboard. Component classes use the `ll-` prefix.

   Fonts: Launch Labs (priority display) → Nasalization (fallback) → Matter
   (body). @font-face URLs match the Launch Labs Supabase brand-assets
   bucket as documented in the Brand Assets Reference Guide.
   ========================================================================= */

@font-face {
  font-family: 'Launch Labs';
  src: url('https://lobvqkkjtxpcrmxdgdyh.supabase.co/storage/v1/object/public/brand-assets/Launch%20Labs.woff2') format('woff2'),
       url('https://lobvqkkjtxpcrmxdgdyh.supabase.co/storage/v1/object/public/brand-assets/Launch%20Labs.woff')  format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nasalization';
  src: url('https://lobvqkkjtxpcrmxdgdyh.supabase.co/storage/v1/object/public/brand-assets/Nasalization-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nasalization';
  src: url('https://lobvqkkjtxpcrmxdgdyh.supabase.co/storage/v1/object/public/brand-assets/Nasalization-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Matter';
  src: url('https://lobvqkkjtxpcrmxdgdyh.supabase.co/storage/v1/object/public/brand-assets/Matter-Regular.woff2') format('woff2'),
       url('https://lobvqkkjtxpcrmxdgdyh.supabase.co/storage/v1/object/public/brand-assets/Matter-Regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Matter';
  src: url('https://lobvqkkjtxpcrmxdgdyh.supabase.co/storage/v1/object/public/brand-assets/Matter-Medium.woff2') format('woff2'),
       url('https://lobvqkkjtxpcrmxdgdyh.supabase.co/storage/v1/object/public/brand-assets/Matter-Medium.woff')  format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand --------------------------------------------------------- */
  --ll-lime:           #ccff62;
  --ll-lime-hover:     #d8ff7a;
  --ll-forest:         #0d3d2d;
  --ll-forest-deep:    #050f0b;

  /* ---- Surfaces & borders ------------------------------------------- */
  --ll-surface:        #050f0b;
  --ll-surface-raised: rgba(13, 61, 45, 0.5);
  --ll-surface-soft:   rgba(13, 61, 45, 0.3);
  --ll-border:         rgba(204, 255, 98, 0.08);
  --ll-border-strong:  rgba(204, 255, 98, 0.25);
  --ll-divider:        rgba(255, 255, 255, 0.04);

  /* ---- Text ---------------------------------------------------------- */
  --ll-text:           #ffffff;
  --ll-text-2:         rgba(255, 255, 255, 0.6);
  --ll-text-3:         rgba(255, 255, 255, 0.4);
  --ll-text-muted:     rgba(255, 255, 255, 0.28);
  --ll-text-accent:    #ccff62;

  /* ---- Tier (Trial / Par / Birdie / Eagle) -------------------------- */
  --ll-tier-trial:     #85b7eb;
  --ll-tier-trial-bg:  rgba(53, 138, 221, 0.18);
  --ll-tier-par:       #0ab38e;
  --ll-tier-par-bg:    rgba(10, 179, 142, 0.15);
  --ll-tier-birdie:    #ccff62;
  --ll-tier-birdie-bg: rgba(204, 255, 98, 0.15);
  --ll-tier-eagle:     #ffc658;
  --ll-tier-eagle-bg:  rgba(255, 170, 0, 0.18);

  /* ---- Status ------------------------------------------------------- */
  --ll-active:         #ccff62;
  --ll-active-bg:      rgba(204, 255, 98, 0.18);
  --ll-warning:        #ffc658;
  --ll-warning-bg:     rgba(255, 198, 88, 0.18);
  --ll-danger:         #f0997b;
  --ll-danger-bg:      rgba(240, 153, 123, 0.18);
  --ll-paused:         rgba(255, 255, 255, 0.5);
  --ll-paused-bg:      rgba(255, 255, 255, 0.08);
  --ll-cancelled:      #e2837e;
  --ll-cancelled-bg:   rgba(226, 131, 126, 0.15);

  /* ---- Trend / streak ---------------------------------------------- */
  --ll-up:             #7eea9d;
  --ll-down:           #f0997b;
  --ll-streak:         #ff8533;

  /* ---- Typography --------------------------------------------------- */
  --ll-font-display:   'Launch Labs', 'Nasalization', system-ui, sans-serif;
  --ll-font-body:      'Matter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type scale — sizes by role, not by hardcoded px in components */
  --ll-text-xs:        11px;  /* secondary line below primary (email, dates, micro-labels) */
  --ll-text-sm:        12px;  /* primary cell data (numbers, plan names, status text) */
  --ll-text-base:      14px;  /* row's main identifier (name, title) */
  --ll-text-lg:        15px;  /* section titles, modal headings */
  --ll-text-display:   18px;  /* page-level section headers */

  /* ---- Spacing & radius -------------------------------------------- */
  --ll-r-sm:           3px;
  --ll-r-md:           6px;
  --ll-r-lg:           8px;
  --ll-r-pill:         999px;
}

/* ============================================================================
   Typography — page & section
   ========================================================================= */

.ll-section-title {
  font-family: var(--ll-font-display);
  font-size: var(--ll-text-display);
  color: var(--ll-text-accent);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}

.ll-section-subtitle {
  font-family: var(--ll-font-body);
  font-size: var(--ll-text-xs);
  color: var(--ll-text-3);
  margin-top: 5px;
}

.ll-col-header {
  font-family: var(--ll-font-display);
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: rgba(204, 255, 98, 0.55);
  text-transform: uppercase;
}

/* Type-scale utilities — apply on cells instead of inline font-size */
.ll-text-xs    { font-size: var(--ll-text-xs); }
.ll-text-sm    { font-size: var(--ll-text-sm); }
.ll-text-base  { font-size: var(--ll-text-base); }
.ll-text-lg    { font-size: var(--ll-text-lg); }

/* ============================================================================
   Avatar  —  initials, color-coded by tier
   <div class="ll-avatar ll-avatar--birdie">JR</div>
   ========================================================================= */

.ll-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ll-font-body);
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
  background: var(--ll-forest);
  border: 1.5px solid var(--ll-lime);
  color: var(--ll-lime);
}

.ll-avatar--trial  { background: var(--ll-tier-trial-bg);  border-color: rgba(53, 138, 221, 0.45);  color: var(--ll-tier-trial); }
.ll-avatar--par    { background: var(--ll-tier-par-bg);    border-color: rgba(10, 179, 142, 0.45);  color: var(--ll-tier-par); }
.ll-avatar--birdie { background: rgba(204, 255, 98, 0.12); border-color: rgba(204, 255, 98, 0.4);   color: var(--ll-lime); }
.ll-avatar--eagle  { background: var(--ll-tier-eagle-bg);  border-color: rgba(255, 198, 88, 0.45);  color: var(--ll-tier-eagle); }

/* Rank medal (gold/silver/bronze for top 3) */
.ll-rank {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ll-font-body);
  font-weight: 700;
  font-size: 12px;
  background: rgba(204, 255, 98, 0.08);
  border: 1px solid var(--ll-border-strong);
  color: var(--ll-text-2);
}
.ll-rank--gold   { background: #ffaa00; border: none; color: #4a2e00; }
.ll-rank--silver { background: #c0c0c0; border: none; color: #2a2a2a; }
.ll-rank--bronze { background: #cd7f32; border: none; color: #2a1a0a; }

/* ============================================================================
   Pills — tier labels (square-ish) and status (full pill)
   ========================================================================= */

.ll-pill {
  display: inline-block;
  font-family: var(--ll-font-body);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: var(--ll-r-sm);
  letter-spacing: 0.6px;
  font-weight: 600;
  text-transform: uppercase;
}

.ll-pill--trial  { background: var(--ll-tier-trial-bg);  color: var(--ll-tier-trial); }
.ll-pill--par    { background: var(--ll-tier-par-bg);    color: var(--ll-tier-par); }
.ll-pill--birdie { background: var(--ll-tier-birdie-bg); color: var(--ll-tier-birdie); }
.ll-pill--eagle  { background: var(--ll-tier-eagle-bg);  color: var(--ll-tier-eagle); }
.ll-pill--new    { background: var(--ll-tier-trial-bg);  color: var(--ll-tier-trial); }
.ll-pill--gf     { background: rgba(255, 170, 0, 0.12);  color: var(--ll-tier-eagle); }

.ll-status {
  display: inline-block;
  font-family: var(--ll-font-body);
  font-size: 10px;
  padding: 4px 10px;
  border-radius: var(--ll-r-pill);
  letter-spacing: 0.6px;
  font-weight: 600;
  text-transform: uppercase;
}

.ll-status--active     { background: var(--ll-active-bg);    color: var(--ll-active); }
.ll-status--exhausted  { background: var(--ll-danger-bg);    color: var(--ll-danger); }
.ll-status--churn-risk { background: var(--ll-danger-bg);    color: var(--ll-danger); }
.ll-status--warning    { background: var(--ll-warning-bg);   color: var(--ll-warning); }
.ll-status--paused     { background: var(--ll-paused-bg);    color: var(--ll-paused); }
.ll-status--cancelled  { background: var(--ll-cancelled-bg); color: var(--ll-cancelled); }

/* ============================================================================
   Hours / progress bar
   <div class="ll-bar"><div class="ll-bar__fill" style="width: 60%;"></div></div>
   ========================================================================= */

.ll-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.ll-bar--md { height: 6px; }

.ll-bar__fill {
  height: 100%;
  background: var(--ll-lime);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.ll-bar__fill--warning  { background: var(--ll-warning); }
.ll-bar__fill--danger   { background: var(--ll-danger); }
.ll-bar__fill--gradient { background: linear-gradient(90deg, #5dcaa5 0%, #ccff62 100%); }
.ll-bar__fill--dim      { background: rgba(204, 255, 98, 0.55); }

/* ============================================================================
   Chips — filter/segment toggles
   ========================================================================= */

.ll-chip {
  display: inline-block;
  font-family: var(--ll-font-body);
  font-size: var(--ll-text-sm);
  padding: 5px 12px;
  background: rgba(13, 61, 45, 0.6);
  color: var(--ll-text-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--ll-r-pill);
  cursor: pointer;
  transition: all 0.15s ease;
}

.ll-chip:hover {
  background: rgba(13, 61, 45, 0.9);
  border-color: var(--ll-border-strong);
  color: var(--ll-lime);
}

.ll-chip--active {
  background: var(--ll-lime);
  color: var(--ll-forest);
  border-color: var(--ll-lime);
  font-weight: 600;
}

.ll-chip--secondary {
  background: rgba(13, 61, 45, 0.4);
  color: rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.06);
}

/* ============================================================================
   Buttons
   ========================================================================= */

.ll-btn {
  font-family: var(--ll-font-body);
  font-size: var(--ll-text-sm);
  padding: 7px 14px;
  border-radius: var(--ll-r-md);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}

.ll-btn--primary {
  background: var(--ll-lime);
  border: none;
  color: var(--ll-forest);
  font-weight: 600;
}
.ll-btn--primary:hover  { background: var(--ll-lime-hover); }
.ll-btn--primary:active { transform: scale(0.98); }

.ll-btn--secondary {
  background: rgba(13, 61, 45, 0.5);
  border: 1px solid var(--ll-border-strong);
  color: var(--ll-lime);
}
.ll-btn--secondary:hover { background: rgba(13, 61, 45, 0.85); border-color: var(--ll-lime); }

.ll-btn--ghost {
  background: transparent;
  border: 1px solid var(--ll-border-strong);
  color: var(--ll-lime);
}
.ll-btn--ghost:hover { background: rgba(204, 255, 98, 0.06); }

.ll-btn--danger {
  background: rgba(240, 153, 123, 0.12);
  border: 1px solid rgba(240, 153, 123, 0.4);
  color: var(--ll-danger);
}
.ll-btn--danger:hover { background: rgba(240, 153, 123, 0.2); }

/* ============================================================================
   Inputs / selects — to match search & dropdown chrome
   ========================================================================= */

.ll-input,
.ll-select {
  background: rgba(13, 61, 45, 0.5);
  border: 1px solid var(--ll-border-strong);
  color: var(--ll-text);
  padding: 7px 12px;
  border-radius: var(--ll-r-md);
  font-family: var(--ll-font-body);
  font-size: var(--ll-text-sm);
  outline: none;
}
.ll-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.ll-input:focus,
.ll-select:focus { border-color: var(--ll-lime); }

.ll-select {
  color: var(--ll-lime);
  cursor: pointer;
}

/* ============================================================================
   Streak & trend indicators
   ========================================================================= */

.ll-streak-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--ll-font-body);
  font-size: var(--ll-text-xs);
  color: var(--ll-streak);
  font-weight: 500;
}

.ll-trend {
  font-family: var(--ll-font-body);
  font-size: var(--ll-text-xs);
  font-weight: 500;
}
.ll-trend--up      { color: var(--ll-up); }
.ll-trend--down    { color: var(--ll-down); }
.ll-trend--neutral { color: var(--ll-text-muted); }

/* ============================================================================
   Numeric helper — apply to any cell with numbers
   ========================================================================= */

.ll-num {
  font-family: var(--ll-font-body);
  font-variant-numeric: tabular-nums;
}

.ll-num--muted   { color: var(--ll-text-muted); }
.ll-num--default { color: rgba(255, 255, 255, 0.82); }
.ll-num--accent  { color: var(--ll-lime); font-weight: 600; }

/* ============================================================================
   Layout — surface + table shell
   ========================================================================= */

.ll-card {
  background: var(--ll-surface);
  border-radius: var(--ll-r-lg);
  border: 1px solid var(--ll-border);
  overflow: hidden;
}

.ll-row {
  display: grid;
  grid-template-columns: var(--ll-cols);
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--ll-divider);
}
.ll-row:last-child { border-bottom: none; }

.ll-row__head {
  padding: 10px 22px;
  border-top: 1px solid var(--ll-divider);
  border-bottom: 1px solid var(--ll-divider);
}

/* ============================================================================
   Responsive
   ----------------------------------------------------------------------------
   Layout strategy: each .ll-row defines its desktop grid via a --ll-cols
   custom property and (optionally) a --ll-cols-sm for ≤640px. Cells that
   should disappear on mobile get .ll-hide-sm; cells that should disappear
   on tablet/below get .ll-hide-md. Both header and data rows share the
   same --ll-cols-sm so columns stay aligned across the table.

   Example:
     <div class="ll-row" style="
       --ll-cols: 36px minmax(0,1fr) 50px 50px 50px 60px 140px;
       --ll-cols-sm: 32px minmax(0,1fr) 110px;">
       <div>1</div>
       <div>Vincent C.</div>
       <div class="ll-hide-sm">105</div>
       ...
     </div>
   ========================================================================= */

/* Tablet (641–1024) — slight tightening, hide ll-hide-md cells */
@media (max-width: 1024px) {
  .ll-hide-md { display: none !important; }

  .ll-row,
  .ll-row__head { padding-left: 16px; padding-right: 16px; }
}

/* Phone (≤ 640) — reflow rows, hide ll-hide-sm cells, scale chrome down */
@media (max-width: 640px) {
  .ll-row {
    grid-template-columns: var(--ll-cols-sm, var(--ll-cols));
    padding: 12px 14px;
    gap: 8px;
  }
  .ll-row__head { padding: 8px 14px; }

  .ll-hide-sm { display: none !important; }

  .ll-avatar { width: 30px; height: 30px; font-size: 10px; }
  .ll-rank   { width: 24px; height: 24px; font-size: 11px; }

  .ll-section-title    { font-size: 15px; letter-spacing: 1px; }
  .ll-section-subtitle { font-size: 10px; }
  .ll-col-header       { font-size: 8px; }

  .ll-btn,
  .ll-select,
  .ll-input  { font-size: 11px; padding: 6px 9px; }
  .ll-chip   { font-size: 10px; padding: 3px 9px; }
}

/* Scrollable card mode: opt-in via .ll-card--scroll-x on the card.
   Triggers horizontal scrolling whenever the row's content exceeds the
   available width — works on both desktop (narrow browser) and mobile.
   The min-width on the row creates the scrollable area. */
.ll-card--scroll-x {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--ll-r-lg);
}
.ll-card--scroll-x .ll-row,
.ll-card--scroll-x .ll-row__head {
  grid-template-columns: var(--ll-cols);
  min-width: 1080px;
}
.ll-card--scroll-x .ll-hide-sm { display: block !important; }
/* ============================================================================
   Print stylesheet — only the tee sheet should be printable.
   Hides chrome, switches to light theme on paper.
   ========================================================================= */
@media print {
  @page { margin: 12mm; }
  body { background: white !important; color: black !important; }
  /* Hide chrome */
  #admin-portal > div:first-child,
  #admin-portal > div:nth-child(2),
  .bookings-no-print,
  #bookings-mode-toggle,
  #bookings-search-mode {
    display: none !important;
  }
  /* Tee sheet card on paper */
  .ll-card {
    background: white !important;
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    page-break-inside: avoid;
  }
  .ll-row, .ll-row__head {
    border-bottom: 1px solid #eee !important;
    color: black !important;
  }
  .ll-col-header { color: #333 !important; }
  .ll-pill, .ll-status {
    border: 1px solid #999 !important;
    background: white !important;
    color: black !important;
  }
}

/* ============================================================================
   Reusable inline SVG snippets — paste into your JS templates
   ----------------------------------------------------------------------------
   Flame (streak):
     <svg width="8" height="10" viewBox="0 0 8 10" aria-hidden="true">
       <path d="M4 0c0 1.5 1.3 2.2 1.3 3.7 0 .8-.6 1.3-1.3 1.3-.7 0-1.3-.5-1.3-1.3
                0-1.5.8-2 1.3-3.7zM4 10C1.8 10 0 8.5 0 6.4 0 4.8 1 3.5 2.2 3.1
                c-.5 1 0 1.8.5 2.1.2-1.4 1-2.3 2-3.2.5 1 1 1.8 1.8 2.4
                C7.5 5 8 6.1 8 7c0 1.7-1.8 3-4 3z" fill="currentColor"/>
     </svg>

   Search (input prefix):
     <svg width="13" height="13" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" aria-hidden="true">
       <circle cx="11" cy="11" r="8"></circle>
       <path d="M21 21l-4-4"></path>
     </svg>

   Plus (add button):
     <svg width="11" height="11" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="3" aria-hidden="true">
       <path d="M12 5v14M5 12h14"/>
     </svg>
   ========================================================================= */