/* ==========================================================================
   HTMS Design System
   Premium enterprise design tokens for the HSE Training Management System
   ========================================================================== */

:root {
  /* ---- Brand / Sidebar (dark navy / near-charcoal) ---- */
  --navy-950: #0a0f1a;
  --navy-900: #0e1626;
  --navy-800: #131f34;
  --navy-700: #1a2c47;
  --navy-600: #24405f;
  --navy-500: #35547a;
  --navy-border: rgba(255, 255, 255, 0.08);
  --navy-border-strong: rgba(255, 255, 255, 0.14);
  --navy-text: #c6cedb;
  --navy-text-dim: #7c8aa3;
  --navy-text-bright: #ffffff;

  /* ---- Surfaces (light neutral workspace) ----
     Deliberately more contrast than a bare "light gray" so cards read as
     lifted panels rather than blending into the page — the previous values
     (app/muted within ~3% lightness of white) made every screen look flat. */
  --surface-app: #e9edf3;
  --surface-card: #ffffff;
  --surface-muted: #eef1f6;
  --surface-hover: #e3e8f0;
  --surface-sunken: #dde3ec;

  /* ---- Borders ---- */
  --border-subtle: #dde2ea;
  --border-default: #cfd5e0;
  --border-strong: #b9c1d0;

  /* ---- Text ---- */
  --text-primary: #101828;
  --text-secondary: #4b5568;
  --text-tertiary: #8891a1;
  --text-inverse: #ffffff;

  /* ---- Corporate blue accent (restrained) ---- */
  --accent-50: #eef3fb;
  --accent-100: #dbe6f6;
  --accent-200: #b3caea;
  --accent-400: #4a7ec4;
  --accent-500: #2c5f9e;
  --accent-600: #244f85;
  --accent-700: #1d3f6b;
  --accent-ink: #16335a;

  /* ---- Status colors ---- */
  --emerald-50: #eaf7f0;
  --emerald-100: #d3efe0;
  --emerald-500: #1a9d63;
  --emerald-600: #148253;
  --emerald-700: #0f6a44;

  --amber-50: #fdf3e4;
  --amber-100: #fbe6c4;
  --amber-500: #c07f11;
  --amber-600: #a56d0d;
  --amber-700: #7d5309;

  --red-50: #fbecec;
  --red-100: #f6d7d7;
  --red-500: #c23636;
  --red-600: #a92c2c;
  --red-700: #832121;

  --slate-50: #f1f2f5;
  --slate-100: #e3e5ea;
  --slate-500: #626d81;
  --slate-600: #4d5768;

  /* ---- Elevation ---- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.07);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.09), 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 6px 14px rgba(16, 24, 40, 0.10), 0 2px 5px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 14px 28px rgba(16, 24, 40, 0.13), 0 4px 10px rgba(16, 24, 40, 0.06);
  --shadow-navy: 4px 0 24px rgba(10, 15, 26, 0.18);

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- Layout ---- */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --header-h: 68px;

  /* ---- Typography ---- */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Lexend', 'Inter', sans-serif;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
}

/* ---- Reset ---- */
* , *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-base);
  background: var(--surface-app);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
input, select, button, textarea { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: var(--accent-200); }

/* ---- Scrollbars ---- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }
*::-webkit-scrollbar-track { background: transparent; }

.navy-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); }
.navy-scroll { scrollbar-color: rgba(255,255,255,0.14) transparent; }

/* ---- Utility ---- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }

/* ---- Focus states ---- */
:focus-visible {
  outline: 2px solid var(--accent-400);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Badges / status pills ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.badge-draft { background: var(--slate-50); color: var(--slate-600); }
.badge-completed { background: var(--accent-50); color: var(--accent-600); }
.badge-partial { background: var(--amber-50); color: var(--amber-600); }
.badge-reflected { background: var(--emerald-50); color: var(--emerald-600); }
.badge-error { background: var(--red-50); color: var(--red-600); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn i, .btn svg { font-size: 13px; }

.btn-primary {
  background: var(--accent-500);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,0.05), 0 0 0 1px var(--accent-600) inset;
}
.btn-primary:hover { background: var(--accent-600); }

.btn-secondary {
  background: var(--surface-card);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.btn-secondary:hover { background: var(--surface-hover); border-color: var(--border-strong); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--surface-hover); color: var(--text-primary); }

.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-icon {
  padding: 8px;
  border-radius: var(--radius-md);
}
.btn-block { width: 100%; }

/* ---- Panel / Card base ---- */
.panel {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
}

.panel-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.panel-subtitle {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
  font-weight: 400;
  font-family: var(--font-base);
}
.panel-body { padding: var(--sp-5); }

/* ---- Segmented control ---- */
.segmented {
  display: inline-flex;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
}
.segmented button {
  border: none;
  background: transparent;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  border-radius: 7px;
  transition: all var(--dur-fast) var(--ease);
}
.segmented button.active {
  background: var(--surface-card);
  color: var(--accent-600);
  box-shadow: var(--shadow-xs);
}
.segmented button:hover:not(.active) { color: var(--text-secondary); }

/* ---- Dropdown / trigger ---- */
.filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease);
}
.filter-trigger:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.filter-trigger .filter-label { color: var(--text-tertiary); font-weight: 500; }
.filter-trigger .filter-value { color: var(--text-primary); font-weight: 600; }
.filter-trigger i.chev { font-size: 10px; color: var(--text-tertiary); margin-left: 2px; }

.dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
  z-index: 60;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.dropdown-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.dropdown-panel .dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}
.dropdown-panel .dd-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.dropdown-panel .dd-item.selected { color: var(--accent-600); background: var(--accent-50); font-weight: 600; }
.dropdown-panel .dd-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  padding: 8px 10px 4px;
  font-weight: 700;
}
.dropdown-panel .dd-divider { height: 1px; background: var(--border-subtle); margin: 4px 2px; }

/* ==========================================================================
   Client branding logo.

   One rule set for every surface that carries the supplied logo: the
   Attendance Sheet, the Training Passport and the Certificate.

   Both dimensions are constrained and object-fit is `contain`, so the artwork
   letterboxes inside its box and is never stretched, whatever aspect ratio
   the supplied file happens to have.

   `.brand-logo-fallback` is the mark to show when there is no logo — the
   passport's shield, for instance. It is displayed by default and hidden only
   once the artwork is confirmed present, so the fallback is what appears if
   anything about the logo goes wrong.
   ========================================================================== */
/* Hidden until js/ui-helpers.js has confirmed the artwork actually loads;
   see probeLogo() there for why this is a class on <html> rather than a
   per-image onerror. Until then the documents show their text letterhead and
   their fallback mark, which is a supported state, not a degraded one. */
.brand-logo-img { display: none; object-fit: contain; object-position: left center; }
.has-brand-logo .brand-logo-img { display: block; }
.has-brand-logo .brand-logo-fallback { display: none; }

/* Attendance Sheet print header. */
.ap-print-logo:empty { display: none; }
.ap-print-logo-img { max-height: 58px; max-width: 240px; margin-bottom: 6px; }

/* Passport card.

   The org mark is a 22px rounded badge designed to hold an icon. A real logo
   does not belong inside it — squeezing a wide mark into a square chip both
   shrinks it to nothing and makes it read as an icon rather than a brand. So
   when the artwork is present the badge gives up its square and its
   background, and the logo simply sits at the head of the row.

   The selector is deliberately as specific as the card's own rule in
   phase3b.css, which is loaded after this file. */
.has-brand-logo .passport-card .pc-org .pc-org-mark {
  width: auto;
  max-width: 88px;
  background: none;
  border-radius: 0;
}
.pc-org-logo { max-height: 100%; max-width: 88px; object-position: left center; }

/* The corporate design — the default — hides its org row, because a shield
   icon next to the organization name earned nothing there. The client's own
   logo does earn it, so the row comes back when the artwork is present. The
   card's grid already reserves a place for it at the head of the identity
   column, so nothing else has to move. */
.has-brand-logo .passport-card.pc-corporate .pc-org {
  display: flex;
  padding: 12px 16px 0;
}

/* Certificate. Kept modest: the certificate's own typography is the design,
   and an oversized logo is what makes these look like a template. */
.cc-logo { max-height: 46px; max-width: 190px; margin-bottom: 8px; }
.cc-logo-center { margin-left: auto; margin-right: auto; object-position: center; }
.cc-org-block { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

@media print {
  /* Printers drop background images by default but keep <img>. These are
     real elements, so they print — this only stops a scaled-down preview
     from being what gets rasterized. */
  .brand-logo-img { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}