/* CrewCall — unified design system
   Single source of truth for typography, color tokens, and layout.
   All pages reference this file; page-specific rules live in local <style>. */

/* ─── Reset ───────────────────────────────────────────────────────── */
@layer base {
  html, body { margin: 0; padding: 0; }
  body { overscroll-behavior: none; }
  main > :first-child { margin-top: 0 !important; }
  main > :last-child  { margin-bottom: 0 !important; }
}
::-webkit-scrollbar { display: none; }

/* ─── Design tokens (CSS custom properties) ───────────────────────── */
:root {
  /* Brand */
  --cc-teal:        #00B4A2;
  --cc-teal-hover:  #009d8d;
  --cc-teal-light:  #E6FAF8;
  --cc-teal-dim:    rgba(0,180,162,0.12);

  /* Surfaces */
  --cc-canvas:      #F8F9FD;
  --cc-muted:       #F1F5F9;
  --cc-card:        #FFFFFF;
  --cc-obsidian:    #070C15;
  --cc-dark-card:   #0B1426;
  --cc-dark-surface:#111C33;

  /* Ink */
  --cc-ink:         #0B1426;
  --cc-ink-2:       #475569;
  --cc-ink-3:       #64748B;
  --cc-ink-4:       #94A3B8;
  --cc-ink-5:       #CBD5E1;

  /* Borders */
  --cc-border:      #E2E8F0;
  --cc-border-2:    #CBD5E1;
  --cc-dark-border: #1E2C48;

  /* Status */
  --cc-ok:   #10B981;
  --cc-warn: #F59E0B;
  --cc-err:  #EF4444;

  /* Type scale */
  --cc-fs-xs:   0.6875rem; /* 11px */
  --cc-fs-sm:   0.75rem;   /* 12px */
  --cc-fs-base: 0.875rem;  /* 14px */
  --cc-fs-md:   1rem;      /* 16px */
  --cc-fs-lg:   1.125rem;  /* 18px */
  --cc-fs-xl:   1.25rem;   /* 20px */
  --cc-fs-2xl:  1.5rem;    /* 24px */
  --cc-fs-3xl:  1.875rem;  /* 30px */
  --cc-fs-4xl:  2.25rem;   /* 36px */

  /* Leading */
  --cc-leading-tight:  1.2;
  --cc-leading-snug:   1.375;
  --cc-leading-normal: 1.5;
  --cc-leading-relaxed:1.625;
}

/* ─── Shared Tailwind config — injected inline per-page via <script>
   Pages share this config block. The canonical token mapping is:
     font-sans   → Plus Jakarta Sans
     font-serif  → Playfair Display
     font-mono   → JetBrains Mono
   Color names used across ALL pages:
     surface-canvas, surface-muted, surface-card
     ink-primary, ink-secondary, ink-muted, ink-faint
     border-subtle, primary, primary-hover, primary-light
     obsidian, obsidian-card, obsidian-surface, obsidian-border
     teal-brand  (alias for primary)
  ──────────────────────────────────────────────────────────────────── */

/* ─── Shared component classes ────────────────────────────────────── */

/* Sidebar nav link (used on all sidebar pages) */
.cc-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  font-size: var(--cc-fs-base);
  font-weight: 500;
  color: var(--cc-ink-2);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.cc-nav-link:hover {
  background: var(--cc-muted);
  color: var(--cc-ink);
}
.cc-nav-link[aria-current="page"] {
  background: var(--cc-teal);
  color: #fff;
  font-weight: 600;
}

/* Stat card */
.cc-stat-card {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  border-radius: 1rem;
  padding: 1.25rem;
}

/* Primary button */
.cc-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--cc-teal);
  color: #fff;
  border: none;
  border-radius: 0.625rem;
  padding: 0.5625rem 1rem;
  font-size: var(--cc-fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.cc-btn-primary:hover { background: var(--cc-teal-hover); }

/* Secondary button */
.cc-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--cc-card);
  color: var(--cc-ink-2);
  border: 1px solid var(--cc-border);
  border-radius: 0.625rem;
  padding: 0.5rem 0.875rem;
  font-size: var(--cc-fs-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cc-btn-secondary:hover { background: var(--cc-muted); color: var(--cc-ink); }

/* Section label */
.cc-label {
  font-size: var(--cc-fs-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cc-ink-3);
}

/* Status badge */
.cc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: var(--cc-fs-xs);
  font-weight: 600;
}
.cc-badge-teal  { background: var(--cc-teal-light); color: #00736a; border: 1px solid rgba(0,180,162,0.2); }
.cc-badge-slate { background: var(--cc-muted);      color: var(--cc-ink-2); border: 1px solid var(--cc-border); }
.cc-badge-red   { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }
.cc-badge-amber { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }
.cc-badge-green { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }

/* ─── Usher-side layout & typography (single sidebar, no top bar) ──── */

/* Page container — every usher page wraps its content in this */
.cc-container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2.25rem 2.5rem 4rem;
}

/* Page title — serif is reserved for ONE h1 per page. Everything else is sans. */
.cc-page-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--cc-fs-3xl);
  font-weight: 700;
  color: var(--cc-ink);
  letter-spacing: -0.01em;
  line-height: var(--cc-leading-tight);
}
.cc-page-sub {
  font-size: var(--cc-fs-base);
  color: var(--cc-ink-2);
  margin-top: 0.375rem;
  max-width: 42rem;
  line-height: var(--cc-leading-normal);
}
/* Section headers inside a page — sans, not serif, so pages don't feel like a stack of headlines */
.cc-section-title {
  font-size: var(--cc-fs-lg);
  font-weight: 700;
  color: var(--cc-ink);
}

/* Sidebar nav link icon+label variant used in the usher shell */
.cc-nav-link { justify-content: flex-start; }
.cc-nav-link[aria-current="page"] .material-symbols-outlined { font-variation-settings: 'FILL' 1; }

/* Tabs (My Applications stage tabs, filters, etc.) */
.cc-tab {
  padding: 0.5rem 1rem;
  border-radius: 0.625rem;
  font-size: var(--cc-fs-sm);
  font-weight: 600;
  color: var(--cc-ink-2);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.cc-tab:hover { background: var(--cc-muted); }
.cc-tab.is-active { background: var(--cc-ink); color: #fff; }

/* Simple job / application card */
.cc-card {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  border-radius: 1rem;
  padding: 1.5rem;
}

/* Input field icon — fixed box so a slow-loading icon font (or a long
   ligature name like "location_city") can never spill across the
   placeholder/value text next to it. */
.cc-field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
  color: var(--cc-ink-4);
  font-size: 18px;
}

/* Empty / "coming soon" state used on the placeholder pages */
.cc-empty {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  border-radius: 1.25rem;
  padding: 3rem 2.5rem;
  max-width: 34rem;
}

/* Event-highlight post grid ("Instagram-style" feed on usher & company profiles) */
.cc-post-tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--cc-muted);
  border: 1px solid var(--cc-border);
  padding: 0;
  cursor: pointer;
}
.cc-post-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.cc-post-tile:hover img { transform: scale(1.06); }
.cc-post-tile .cc-post-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 20, 38, 0);
  display: flex;
  align-items: flex-end;
  padding: 10px;
  opacity: 0;
  transition: all 0.2s ease;
}
.cc-post-tile:hover .cc-post-overlay { background: rgba(11, 20, 38, 0.45); opacity: 1; }
.cc-post-tile .cc-post-caption {
  color: white;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cc-post-add {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 0.75rem;
  border: 2px dashed var(--cc-border-2);
  background: var(--cc-canvas);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--cc-ink-4);
  cursor: pointer;
  transition: all 0.15s ease;
}
.cc-post-add:hover { border-color: var(--cc-teal); color: var(--cc-teal); background: #EFFCFB; }

/* Multi-photo indicator badge on a grid tile */
.cc-post-multi {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #fff;
  font-size: 16px !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/* Like/comment stat row shown in the grid-tile hover overlay */
.cc-post-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}
.cc-post-stats .material-symbols-outlined { font-size: 15px !important; margin-right: 3px; vertical-align: -2px; }
.cc-post-tile .cc-post-overlay { flex-direction: column; align-items: flex-start; }

/* ─── Carousel (post lightbox + feed cards) ─────────────────────────── */
.cc-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--cc-muted);
  overflow: hidden;
}
.cc-carousel-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.85);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--cc-ink);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.cc-carousel-nav:hover { background: #fff; }
.cc-carousel-prev { left: 10px; }
.cc-carousel-next { right: 10px; }
.cc-carousel-dots {
  position: absolute;
  bottom: 10px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.cc-carousel-dot { width: 5px; height: 5px; border-radius: 9999px; background: rgba(255,255,255,0.55); }
.cc-carousel-dot.is-active { background: #fff; width: 6px; height: 6px; }
.cc-carousel-count {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(11,20,38,0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
}

/* ─── Like button ────────────────────────────────────────────────────── */
.cc-like-btn { color: var(--cc-ink-2); cursor: pointer; background: none; border: none; padding: 0; display: inline-flex; }
.cc-like-btn:hover { color: var(--cc-ink); }
.cc-like-btn.is-liked { color: #E11D48; }
.cc-like-btn.is-liked .material-symbols-outlined { color: #E11D48; }

/* ─── Comments ───────────────────────────────────────────────────────── */
.cc-comment { font-size: 13px; line-height: 1.5; color: var(--cc-ink-2); }
.cc-comment-author { font-weight: 700; color: var(--cc-ink); }
.cc-comment-text { color: var(--cc-ink-2); }

/* ─── Discover: feed post card ───────────────────────────────────────── */
.cc-feed-card {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  border-radius: 1.1rem;
  overflow: hidden;
}
.cc-feed-avatar {
  width: 40px; height: 40px;
  border-radius: 9999px;
  object-fit: cover;
  background: var(--cc-muted);
  border: 1px solid var(--cc-border);
  cursor: pointer;
}
.cc-feed-action-icon {
  color: var(--cc-ink-2);
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0;
}
.cc-feed-action-icon:hover { color: var(--cc-ink); }

/* ─── Discover: suggestion rail card ─────────────────────────────────── */
.cc-suggest-card {
  flex: 0 0 auto;
  width: 168px;
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  border-radius: 1rem;
  padding: 14px;
  text-align: center;
}
.cc-suggest-avatar {
  width: 64px; height: 64px;
  border-radius: 9999px;
  object-fit: cover;
  margin: 0 auto 8px;
  background: var(--cc-muted);
  border: 1px solid var(--cc-border);
}
.cc-hscroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
}
.cc-hscroll > * { scroll-snap-align: start; }

/* ─── Discover: connect / follow button states ───────────────────────── */
.cc-connect-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  font-size: var(--cc-fs-xs);
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--cc-teal);
  background: var(--cc-teal);
  color: #fff;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.cc-connect-btn:hover { background: var(--cc-teal-hover); border-color: var(--cc-teal-hover); }
.cc-connect-btn.is-connected {
  background: var(--cc-card);
  color: var(--cc-ink-2);
  border-color: var(--cc-border-2);
}
.cc-connect-btn.is-connected:hover { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }
.cc-connect-btn.is-connected .cc-connect-label-hover { display: none; }
.cc-connect-btn.is-connected:hover .cc-connect-label-default { display: none; }
.cc-connect-btn.is-connected:hover .cc-connect-label-hover { display: inline; }

/* ─── Discover: directory grid card (people/company grid views) ─────── */
.cc-directory-card {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  border-radius: 1rem;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.cc-directory-avatar {
  width: 72px; height: 72px;
  border-radius: 9999px;
  object-fit: cover;
  background: var(--cc-muted);
  border: 1px solid var(--cc-border);
}