/* =============================================================================
   Jobdrive — framework-agnostic component classes
   -----------------------------------------------------------------------------
   A plain-CSS layer mirroring the React primitives, so the design system works
   from ANY Node view engine (EJS / Pug / Handlebars) or plain HTML — no React.
   Every value is a design token, so this re-themes in dark mode automatically.

   Usage:
     <link rel="stylesheet" href="/design-system/styles.css">            <!-- tokens + Quicksand -->
     <link rel="stylesheet" href="/design-system/web/jobdrive-components.css"> <!-- these classes -->

   Faithfully derived from components/*/*.jsx. This is a STARTER covering the most
   common pieces (Button, Card, Badge, Input, app shell). For the rest (Select,
   Switch, Modal, Tabs, ProgressBar, ChatBubble, Avatar, IconButton) read the
   component's .prompt.md + .jsx and follow the same token-only pattern — or let
   Cursor generate them from the .cursor rule.
   ========================================================================== */

/* ---- Base ---------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  background: var(--surface-app);
  color: var(--text-body);
}

/* ---- Button  (components/forms/Button.jsx) ------------------------------- */
.jd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 11px 22px;                 /* md */
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  line-height: 1.2; letter-spacing: -0.005em;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}
.jd-btn svg { width: 1.05em; height: 1.05em; }
.jd-btn:active   { transform: scale(0.97); }
.jd-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.jd-btn--full    { width: 100%; }
.jd-btn--sm { padding: 9px 16px;  font-size: 14px; gap: 7px; }
.jd-btn--lg { padding: 15px 30px; font-size: 16px; gap: 10px; }

.jd-btn--primary           { background: var(--color-primary); color: #fff; }
.jd-btn--primary:hover     { background: var(--color-primary-strong); }
.jd-btn--secondary         { background: var(--jd-sky-wash-16); color: var(--color-primary-strong); border-color: var(--jd-sky-wash-32); }
.jd-btn--secondary:hover   { background: var(--jd-sky-wash-32); }
.jd-btn--ghost             { background: transparent; color: var(--text-body); border-color: var(--border-strong); }
.jd-btn--ghost:hover       { background: var(--surface-sunken); }
.jd-btn--danger            { background: var(--jd-red-bg-soft); color: var(--jd-red-alt); }
.jd-btn--danger:hover      { background: var(--jd-red-bg); }
.jd-btn--success           { background: var(--color-success); color: #fff; }
.jd-btn--success:hover     { background: var(--jd-green-600); }

/* ---- Card  (components/layout/Card.jsx) ---------------------------------- */
.jd-card {
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: 20px;
  box-shadow: var(--shadow-card); color: var(--text-body);
  font-family: var(--font-sans); transition: var(--transition-base);
}
.jd-card--hover:hover { box-shadow: var(--shadow-hover); transform: var(--lift-hover); }

/* ---- Badge  (components/feedback/Badge.jsx) ------------------------------ */
.jd-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-full);
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1.4;
  background: var(--surface-muted); color: var(--text-muted);   /* neutral */
}
.jd-badge__dot       { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.jd-badge--sky       { background: var(--chip-sky-bg);      color: var(--chip-sky-text); }
.jd-badge--success   { background: var(--color-success-bg); color: var(--jd-green-600); }
.jd-badge--danger    { background: var(--color-danger-bg);  color: var(--jd-red-600); }
.jd-badge--info      { background: var(--jd-blue-bg);       color: var(--jd-blue-500); }
.jd-badge--warning   { background: var(--color-warning-bg); color: var(--color-warning-text); }

/* ---- Input / field  (components/forms/Input.jsx — label-above variant) --- */
.jd-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
.jd-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.jd-input {
  height: var(--control-height); padding: 0 14px;
  font-family: var(--font-sans); font-size: var(--fs-lg); color: var(--text-strong);
  background: var(--surface-card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); transition: var(--transition-base);
}
.jd-input::placeholder { color: var(--text-faint); }
.jd-input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.jd-input--filled { background: var(--surface-sunken); border-color: transparent; }   /* search */
.jd-field--error .jd-input { border-color: var(--color-danger); }
.jd-field--error .jd-label { color: var(--color-danger); }
.jd-error { font-size: var(--fs-xs); color: var(--color-danger); }

/* ---- App shell + sidebar nav  (ui_kits/jobdrive-app/AppShell.jsx) -------- */
.jd-app     { display: flex; min-height: 100vh; background: var(--surface-app); color: var(--text-body); font-family: var(--font-sans); }
.jd-sidebar { width: var(--sidebar-width); flex: none; background: var(--surface-sidebar); color: var(--text-on-dark); display: flex; flex-direction: column; padding: 0 0 24px; }
.jd-content { flex: 1; padding: var(--space-5); max-width: var(--content-max); }
.jd-navitem {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin: 4px 16px; border-radius: var(--radius-lg);
  color: var(--text-on-dark-muted); text-decoration: none; cursor: pointer;
  transition: var(--transition-base);
}
.jd-navitem svg { width: 20px; height: 20px; }
.jd-navitem:hover,
.jd-navitem--active { background: var(--jd-sky-wash-12); color: var(--color-primary); }