/* ==============================================================
 * BRAVE CAVE DESIGN SYSTEM
 * v1.0 · extracted from social.bravecave.co Phase 10R rebuild
 *
 * Drop this into any Brave Cave project for a unified Gmail
 * Material 3 aesthetic with sage accent and sentence-case typography.
 *
 * USAGE:
 *   <link rel="stylesheet" href="bravecave-design.css">
 *   (or paste the contents inline within <style> tags)
 *
 * Components are prefixed `.bc-` to avoid collisions with existing
 * project styles. Add new classes to existing markup as you migrate.
 * ============================================================== */


/* ─── Fonts (loaded from Google Fonts CDN) ─── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ─── Tabler icons (used as <i class="ti ti-NAME">) ─── */
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.34.0/dist/tabler-icons.min.css');


/* ==============================================================
 * DESIGN TOKENS
 * ============================================================== */

:root {
  /* Backgrounds */
  --bc-bg:           #f8f7f4;   /* warm off-white page bg */
  --bc-bg-elevated:  #ffffff;   /* cards, raised surfaces */
  --bc-bg-deep:      #f1efea;   /* hover tint, recessed areas */

  /* Text */
  --bc-ink:          #1c1917;   /* primary text */
  --bc-ink-soft:     #44403c;   /* secondary text */
  --bc-ink-mute:     #6b7280;   /* tertiary / muted text */

  /* Lines */
  --bc-line:         #e5e3dd;   /* visible borders */
  --bc-line-soft:    #ede9e1;   /* hairline dividers */
  --bc-pill-border:  #dadce0;   /* button + chip outlines */

  /* Accents */
  --bc-signal:       #3d5c38;   /* sage — the single accent */
  --bc-signal-tint:  rgba(61, 92, 56, 0.08);
  --bc-amber:        #b8892a;   /* warnings, pending state */
  --bc-hazard:       #c0392b;   /* destructive, broken */

  /* Interactive */
  --bc-row-hover:    #f5f3ee;

  /* Typography */
  --bc-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bc-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bc-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

html[data-theme="dark"] {
  --bc-bg:           #1f1f1f;
  --bc-bg-elevated:  #28292c;
  --bc-bg-deep:      #202124;

  --bc-ink:          #e8eaed;
  --bc-ink-soft:     #c9cbcd;
  --bc-ink-mute:     #9aa0a6;

  --bc-line:         #3c4043;
  --bc-line-soft:    #2c2d30;
  --bc-pill-border:  #5f6368;

  --bc-signal:       #6b8a64;
  --bc-signal-tint:  rgba(107, 138, 100, 0.16);

  --bc-row-hover:    #2a2b2e;
}


/* ==============================================================
 * TYPOGRAPHY BASELINE
 * Sentence case is the default. No uppercase + letter-spacing
 * unless deliberately tagging short content (T1, TUE, etc).
 * ============================================================== */

.bc-base {
  font-family: var(--bc-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--bc-ink);
  background: var(--bc-bg);
}


/* ==============================================================
 * PAGE HEADER
 * <h2 class="bc-page-title">Sources <span>extra</span></h2>
 * <div class="bc-page-subhead">…</div>
 * ============================================================== */

.bc-page-title {
  font-family: var(--bc-font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0 0 4px;
  color: var(--bc-ink);
  text-transform: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.bc-page-subhead {
  font-family: var(--bc-font-body);
  font-size: 12px;
  color: var(--bc-ink-mute);
  letter-spacing: 0;
  margin: 0 0 14px;
  text-transform: none;
}
.bc-page-subhead .sep        { opacity: 0.5; padding: 0 4px; }
.bc-page-subhead .stat-strong { color: var(--bc-ink); font-weight: 500; }
.bc-page-subhead .stat-accent { color: var(--bc-signal); font-weight: 500; }


/* ==============================================================
 * TIP CARD
 * Use instead of big emoji explainer boxes.
 * <div class="bc-tip">
 *   <i class="ti ti-info-circle"></i>
 *   <div class="bc-tip-body">…</div>
 * </div>
 * ============================================================== */

.bc-tip {
  border: 1px solid var(--bc-line-soft);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--bc-bg-elevated);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--bc-font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--bc-ink);
}
.bc-tip i.ti {
  color: var(--bc-signal);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.bc-tip .bc-tip-body { flex: 1; }
.bc-tip strong { font-weight: 500; }


/* ==============================================================
 * CHIPS (filter / sort pills)
 * <div class="bc-chips">
 *   <button class="bc-chip active">All</button>
 *   <button class="bc-chip">Active only</button>
 * </div>
 * ============================================================== */

.bc-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.bc-chips-spacer { flex: 1; }

.bc-chip {
  padding: 4px 12px;
  border: 1px solid var(--bc-pill-border);
  border-radius: 999px;
  font-family: var(--bc-font-body);
  font-size: 12px;
  color: var(--bc-ink-mute);
  background: transparent;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.bc-chip:hover {
  background: var(--bc-bg-deep);
  color: var(--bc-ink);
}
.bc-chip.active {
  background: var(--bc-signal-tint);
  color: var(--bc-signal);
  border-color: var(--bc-signal);
  font-weight: 500;
}


/* ==============================================================
 * ACTION BUTTONS (pill-shaped)
 * <button class="bc-action-btn">
 *   <i class="ti ti-plus"></i>Add source
 * </button>
 * <button class="bc-action-btn primary">…</button>
 * ============================================================== */

.bc-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--bc-pill-border);
  border-radius: 999px;
  background: transparent;
  font-family: var(--bc-font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--bc-ink);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.bc-action-btn:hover {
  background: var(--bc-bg-deep);
  border-color: var(--bc-line);
}
.bc-action-btn i { font-size: 14px; }

.bc-action-btn.primary {
  background: var(--bc-signal);
  color: white;
  border-color: var(--bc-signal);
}
.bc-action-btn.primary:hover {
  opacity: 0.92;
  background: var(--bc-signal);
  color: white;
}

.bc-action-btn.danger {
  color: var(--bc-hazard);
  border-color: transparent;
}
.bc-action-btn.danger:hover {
  border-color: var(--bc-hazard);
  background: transparent;
  color: var(--bc-hazard);
}


/* ==============================================================
 * NOTIFICATION BANNER (amber alert / pending state)
 * <button class="bc-banner" onclick="…">
 *   <i class="ti ti-bell"></i>
 *   <span class="bc-banner-text">3 items need review</span>
 *   <i class="ti ti-chevron-down bc-chev"></i>
 * </button>
 * Toggle .expanded class to rotate the chevron.
 * ============================================================== */

.bc-banner {
  background: #fef7e0;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--bc-font-body);
  transition: background 0.12s;
}
.bc-banner:hover { background: #fcefc7; }
.bc-banner i { font-size: 16px; color: #b8892a; flex-shrink: 0; }
.bc-banner .bc-banner-text {
  font-size: 13px;
  color: #5d4304;
  flex: 1;
}
.bc-banner .bc-chev {
  font-size: 16px;
  color: #5d4304;
  transition: transform 0.18s;
}
.bc-banner.expanded .bc-chev { transform: rotate(180deg); }

html[data-theme="dark"] .bc-banner          { background: #3a3325; }
html[data-theme="dark"] .bc-banner:hover    { background: #4a4031; }
html[data-theme="dark"] .bc-banner i,
html[data-theme="dark"] .bc-banner .bc-banner-text,
html[data-theme="dark"] .bc-banner .bc-chev { color: #fac775; }


/* ==============================================================
 * LIST ROWS (Gmail-style tight rows with hover-revealed actions)
 * <div class="bc-list">
 *   <div class="bc-row">
 *     <span class="bc-row-tag">T1</span>
 *     <span class="bc-row-name">Patrick Flanagan</span>
 *     <span class="bc-row-stat">24c · 29v</span>
 *     <div class="bc-row-actions">
 *       <button class="bc-row-action-btn" title="Edit">
 *         <i class="ti ti-edit"></i>
 *       </button>
 *     </div>
 *   </div>
 * </div>
 * ============================================================== */

.bc-list { display: flex; flex-direction: column; }

.bc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  border-bottom: 1px solid var(--bc-line-soft);
  cursor: pointer;
  transition: background 0.1s;
  position: relative;
  font-family: var(--bc-font-body);
}
.bc-row:last-child { border-bottom: none; }
.bc-row:hover { background: var(--bc-row-hover); }

.bc-row-tag {
  padding: 1px 8px;
  border: 1px solid var(--bc-pill-border);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  color: var(--bc-ink-mute);
  flex-shrink: 0;
  white-space: nowrap;
}
.bc-row-tag.accent {
  border-color: var(--bc-signal);
  color: var(--bc-signal);
  background: var(--bc-signal-tint);
}

.bc-row-name {
  font-size: 14px;
  color: var(--bc-ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bc-row-sub {
  font-size: 12px;
  color: var(--bc-ink-mute);
  margin-top: 2px;
}

.bc-row-stat {
  font-family: var(--bc-font-mono);
  font-size: 11px;
  color: var(--bc-ink-mute);
  flex-shrink: 0;
}

.bc-row-actions {
  display: none;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.bc-row:hover .bc-row-actions { display: flex; }
.bc-row:hover .bc-row-stat     { display: none; }

.bc-row-action-btn {
  background: transparent;
  border: none;
  padding: 4px;
  color: var(--bc-ink-mute);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  transition: background 0.1s, color 0.1s;
}
.bc-row-action-btn:hover {
  background: var(--bc-bg-deep);
  color: var(--bc-ink);
}
.bc-row-action-btn i { font-size: 16px; }


/* ==============================================================
 * ACCORDION (collapsible card)
 * Use .is-expanded to open, .is-complete for finished/dimmed state.
 * <div class="bc-accordion is-expanded">
 *   <div class="bc-accordion-head" onclick="…">
 *     <div class="bc-accordion-title">Title</div>
 *     <i class="ti ti-chevron-down bc-accordion-chev"></i>
 *   </div>
 *   <div class="bc-accordion-body">…content…</div>
 * </div>
 * ============================================================== */

.bc-accordion {
  border: 1px solid var(--bc-line-soft);
  border-radius: 8px;
  background: var(--bc-bg-elevated);
  margin-bottom: 12px;
  transition: box-shadow 0.15s, border-color 0.15s;
  overflow: hidden;
  font-family: var(--bc-font-body);
}
.bc-accordion:hover { border-color: var(--bc-line); }
.bc-accordion.is-complete { background: var(--bc-bg); }
.bc-accordion.is-expanded { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
html[data-theme="dark"] .bc-accordion.is-expanded {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.bc-accordion-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}
.bc-accordion-head:hover { background: var(--bc-row-hover); }
.bc-accordion.is-expanded .bc-accordion-head {
  border-bottom: 1px solid var(--bc-line-soft);
}

.bc-accordion-head-body { flex: 1; min-width: 0; }
.bc-accordion-title {
  font-family: var(--bc-font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--bc-ink);
}
.bc-accordion-sub {
  font-size: 12px;
  color: var(--bc-ink-mute);
  margin-top: 2px;
}

.bc-accordion-chev {
  font-size: 18px;
  color: var(--bc-ink-mute);
  flex-shrink: 0;
  transition: transform 0.18s;
}
.bc-accordion.is-expanded .bc-accordion-chev { transform: rotate(180deg); }

.bc-accordion-body {
  padding: 14px 16px 16px;
  display: none;
}
.bc-accordion.is-expanded .bc-accordion-body { display: block; }


/* ==============================================================
 * FORM INPUTS
 * <input class="bc-input" type="text" placeholder="…">
 * <textarea class="bc-textarea" placeholder="…"></textarea>
 * <select class="bc-select">…</select>
 * ============================================================== */

.bc-input,
.bc-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  font-family: var(--bc-font-body);
  font-size: 13px;
  color: var(--bc-ink);
  background: var(--bc-bg);
  border: 1px solid var(--bc-line-soft);
  border-radius: 6px;
}
.bc-textarea {
  font-family: var(--bc-font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  min-height: 120px;
  resize: vertical;
  padding: 12px 14px;
}
.bc-input:focus,
.bc-textarea:focus {
  outline: none;
  border-color: var(--bc-signal);
  box-shadow: 0 0 0 2px var(--bc-signal-tint);
}

.bc-select {
  font-family: var(--bc-font-body);
  font-size: 12.5px;
  padding: 6px 28px 6px 12px;
  border: 1px solid var(--bc-pill-border);
  border-radius: 999px;
  background: transparent;
  color: var(--bc-ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.bc-select:hover {
  border-color: var(--bc-line);
  background-color: var(--bc-bg-deep);
}
.bc-select:focus {
  outline: 2px solid var(--bc-signal);
  outline-offset: -1px;
}


/* ==============================================================
 * STAMP / COMPLETION PILL
 * For showing "Complete · GUN 9:14am" style timestamps.
 * <span class="bc-stamp">
 *   <i class="ti ti-check"></i>
 *   Complete
 *   <span class="bc-stamp-user">GUN</span>
 *   <span class="bc-stamp-time">9:14am</span>
 * </span>
 * ============================================================== */

.bc-stamp {
  font-family: var(--bc-font-body);
  font-size: 11.5px;
  color: var(--bc-signal);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bc-stamp i { color: var(--bc-signal); }
.bc-stamp-user {
  font-family: var(--bc-font-mono);
  font-size: 10px;
  font-weight: 600;
  background: var(--bc-signal-tint);
  color: var(--bc-signal);
  padding: 1px 6px;
  border-radius: 10px;
  letter-spacing: 0.3px;
}
.bc-stamp-time { color: var(--bc-ink-mute); }


/* ==============================================================
 * EMPTY STATE
 * <div class="bc-empty">No items yet. <strong>Add one</strong> to get started.</div>
 * ============================================================== */

.bc-empty {
  padding: 24px 12px;
  text-align: center;
  font-family: var(--bc-font-body);
  font-size: 13px;
  color: var(--bc-ink-mute);
  border: 1px dashed var(--bc-line-soft);
  border-radius: 8px;
  background: var(--bc-bg-elevated);
}


/* ==============================================================
 * BRAVE CAVE PORTAL — dark-mode bridge  (portal-specific addition)
 * The portal toggles dark mode two ways:
 *   • client app  -> html[data-theme="dark"]   (handled above)
 *   • admin app   -> body.dark  (class on <body>)
 * Re-declare the dark tokens under the admin selector so .bc-*
 * components follow dark mode there too. Only sets --bc-* vars,
 * so it cannot affect any existing (non-bc) admin styles.
 * ============================================================== */
body.dark {
  --bc-bg:           #1f1f1f;
  --bc-bg-elevated:  #28292c;
  --bc-bg-deep:      #202124;
  --bc-ink:          #e8eaed;
  --bc-ink-soft:     #c9cbcd;
  --bc-ink-mute:     #9aa0a6;
  --bc-line:         #3c4043;
  --bc-line-soft:    #2c2d30;
  --bc-pill-border:  #5f6368;
  --bc-signal:       #6b8a64;
  --bc-signal-tint:  rgba(107, 138, 100, 0.16);
  --bc-row-hover:    #2a2b2e;
}