/* css/premium-polish.css
   ============================================================================
   PHASE 10 — Premium UI/UX Polish.

   Additive-only. Loaded AFTER css/style.css on every page (new <link> tag),
   so these rules layer on top of / refine the existing design system rather
   than replace it. No HTML structure, id, class name, or JS is touched by
   this file — every selector below already exists in the markup from
   earlier phases; only how those existing classes look/animate changes.
   ============================================================================ */

/* ---- 1. Fonts + semantic design tokens (additive) ---------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root{
  /* New semantic tokens, additive to the existing --blue/--purple/--cyan
     decorative palette (those remain for hero gradients/blobs — unchanged). */
  --primary:#2563EB;
  --primary-hover:#1D4ED8;
  --primary-soft:rgba(37,99,235,.12);
  --success:#22C55E;
  --success-soft:rgba(34,197,94,.14);
  --warning:#F59E0B;
  --warning-soft:rgba(245,158,11,.14);
  --danger:#EF4444;
  --danger-soft:rgba(239,68,68,.14);
  --font-heading:'Plus Jakarta Sans',var(--font-display,sans-serif);
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --r-pp-sm:12px; --r-pp-md:16px;
  --ease:cubic-bezier(.22,1,.36,1);
}

h1,h2,h3,h4,.brand-text,.card h2,.tc-widget h2{
  font-family:var(--font-heading);
  letter-spacing:-0.01em;
}

/* ---- 2. Focus visibility (accessibility) -------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--primary) !important;
  outline-offset:2px !important;
  border-radius:6px;
}

/* ---- 3. Cards — consistent radius, thin border, soft shadow, hover lift - */
.card,.glass,.tc-widget,.dashboard-modal-card,.crew-modal,.form-card,
.price-card,.svc-card,.pf-card,.test-card,.blog-card,.soon-card{
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.card:hover,.tc-widget:hover{
  transform:translateY(-3px);
  box-shadow:0 34px 90px -24px rgba(0,0,0,.45);
  border-color:rgba(37,99,235,.28);
}

/* ---- 4. Buttons ---------------------------------------------------------- */
.btn,.btn-primary,.btn-ghost,.btn-sm,.action-btn,button{
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),
             background-color .2s var(--ease),border-color .2s var(--ease);
}
.btn-primary{
  background:linear-gradient(135deg,var(--primary),#3B82F6) !important;
}
.btn-primary:hover{
  box-shadow:0 14px 32px -10px rgba(37,99,235,.55) !important;
  transform:translateY(-2px);
}
.action-btn:hover{ transform:translateY(-2px); border-color:rgba(37,99,235,.35); }

/* New opt-in utility variants (additive classes — apply where wanted,
   nothing existing is forced to use these). */
.btn-outline{
  background:transparent;border:1.5px solid var(--primary);color:var(--primary);
  border-radius:999px;padding:11px 20px;font-weight:600;cursor:pointer;
}
.btn-outline:hover{ background:var(--primary-soft); transform:translateY(-2px); }
.btn-danger{
  background:linear-gradient(135deg,var(--danger),#DC2626);color:#fff;border:none;
  border-radius:999px;padding:11px 20px;font-weight:600;cursor:pointer;
}
.btn-danger:hover{ box-shadow:0 14px 32px -10px rgba(239,68,68,.55); transform:translateY(-2px); }

/* ---- 5. Nav tabs (dash-tab / cd-tab / cw-tab / crew-dash-tab) ------------ */
.dash-tab,.cd-tab,.cw-tab,.crew-dash-tab{
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),
             background-color .2s var(--ease),border-color .2s var(--ease) !important;
  position:relative;
}
.dash-tab:hover,.cd-tab:hover,.cw-tab:hover,.crew-dash-tab:hover{
  transform:translateY(-1px);
  border-color:rgba(37,99,235,.4);
}
.dash-tab.active,.cd-tab.active,.cw-tab.active,.crew-dash-tab.active{
  background:linear-gradient(135deg,var(--primary),#3B82F6) !important;
  box-shadow:0 10px 26px -8px rgba(37,99,235,.5);
}

/* ---- 6. Tables — sticky header, hover rows, spacing --------------------- */
table{ border-collapse:separate; border-spacing:0; }
.table-wrap table thead th,table thead th{
  position:sticky; top:0; z-index:2;
  background:rgba(10,14,35,.96);
  font-family:var(--font-heading);
  font-weight:600;
  letter-spacing:.01em;
}
.table-wrap table tbody tr,table tbody tr{
  transition:background-color .18s var(--ease);
}
.table-wrap table tbody tr:hover,table tbody tr:hover{
  background:rgba(37,99,235,.07);
}
table td,table th{ padding:12px 14px; }

/* ---- 7. Status semantics — apply the new tokens to common status/badge
          patterns already used across dashboards (Completed/Active/Approved
          → success; Pending/Review → warning; Cancelled/Rejected/Overdue →
          danger). Matches on visible TEXT via :contains-like attribute
          selectors isn't possible in pure CSS, so these target the existing
          class-based hooks already present in the markup instead. --------- */
.crew-status-badge.active,.status-chip.active,.badge-success{
  background:var(--success-soft) !important; color:var(--success) !important;
}
.crew-status-badge.busy,.status-chip.pending,.badge-warning{
  background:var(--warning-soft) !important; color:var(--warning) !important;
}
.crew-status-badge.offline,.status-chip.cancelled,.badge-danger{
  background:var(--danger-soft) !important; color:var(--danger) !important;
}

/* ---- 8. Skeleton loading utility (opt-in; new class, doesn't auto-apply) - */
.skeleton{
  position:relative; overflow:hidden; background:rgba(255,255,255,.06);
  border-radius:var(--r-pp-sm); color:transparent !important;
}
.skeleton::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);
  animation:tc-shimmer 1.4s ease-in-out infinite;
}
@keyframes tc-shimmer{ 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }
@media (prefers-reduced-motion: reduce){
  .skeleton::after{ animation:none; }
  .card,.tc-widget,.btn,.btn-primary,.dash-tab,.cd-tab,.cw-tab,.crew-dash-tab{ transition:none !important; }
}

/* ---- 9. Modals / dropdowns / toasts — smoother entrance ------------------ */
.dashboard-modal-card,.crew-modal,.notif-panel,.tc-pwa-banner{
  animation:tc-pop-in .28s var(--ease) both;
}
@keyframes tc-pop-in{
  from{ opacity:0; transform:translateY(10px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* ---- 10. Lucide icon sizing (pairs with js/icon-polish.js) --------------- */
.tc-lucide-icon{
  display:inline-flex; align-items:center; justify-content:center;
  vertical-align:-3px;
}
.tc-lucide-icon svg{
  width:1em; height:1em; font-size:16px;
  stroke:currentColor;
}
.tc-lucide-icon--filled svg{ fill:currentColor; }
h1 .tc-lucide-icon svg,h2 .tc-lucide-icon svg{ font-size:20px; }
.btn .tc-lucide-icon svg,.btn-primary .tc-lucide-icon svg,.btn-ghost .tc-lucide-icon svg,
.action-btn .tc-lucide-icon svg{ font-size:16px; }

/* ---- 11. Sidebar / dash-tab-row hover polish (desktop) ------------------- */
@media (hover:hover){
  .dash-tab-row a,.dash-tab-row button{ transition:background-color .18s var(--ease); }
}

/* ---- 12. Responsive spacing refinement (additive, doesn't remove any
           existing breakpoint rule — style.css's own @media blocks still
           apply; this only adds a touch more breathing room on very small
           screens where the pill-tab rows can feel cramped). ------------- */
@media (max-width:480px){
  .dash-tab,.cd-tab,.cw-tab,.crew-dash-tab{ padding:11px 16px; }
  .card,.tc-widget{ padding:18px; }
}