/*
  Design system — extends the existing brand tokens in style.css
  (--navy, --cyan, --magenta, --yellow, --green, --ink, --paper, --light-bg,
  --border, --text-muted, --text-dark, --shadow, --shadow-hover, --radius,
  --radius-sm). Does not redeclare or change brand colors.

  Load AFTER style.css. Component classes are prefixed `ds-` so they never
  collide with existing page-specific classes — pages adopt them
  incrementally, nothing breaks by including this file.
*/

:root {
  /* Semantic colors — separate from the brand accent hues so status meaning
     never depends on remembering "magenta = error, yellow = warning" */
  --ds-success: #159a78;       /* reuses brand --green */
  --ds-success-bg: #e6f5ef;
  --ds-warning: #a06a10;
  --ds-warning-bg: #fdf3e0;
  --ds-error: #c22b4d;
  --ds-error-bg: #fbe8ed;
  --ds-info: #0ca9c7;          /* reuses brand --cyan */
  --ds-info-bg: #e3f6f9;

  /* Type scale — base 16px, ~1.2 ratio, tuned for readability incl. elderly users */
  --ds-text-xs: 13px;
  --ds-text-sm: 15px;
  --ds-text-base: 17px;
  --ds-text-lg: 20px;
  --ds-text-xl: 25px;
  --ds-text-2xl: 31px;
  --ds-text-3xl: 39px;
  --ds-line-body: 1.6;
  --ds-line-heading: 1.25;

  /* Spacing scale */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-8: 48px;

  /* Radii — align with existing --radius/--radius-sm, add one more step */
  --ds-radius-sm: var(--radius-sm, 7px);
  --ds-radius-md: var(--radius, 10px);
  --ds-radius-lg: 16px;
  --ds-radius-full: 999px;

  /* Shadows — align with existing --shadow/--shadow-hover */
  --ds-shadow-sm: 0 1px 3px rgba(23, 32, 51, 0.08);
  --ds-shadow-md: var(--shadow, 0 8px 24px rgba(24,43,73,0.08));
  --ds-shadow-lg: var(--shadow-hover, 0 18px 36px rgba(24,43,73,0.14));

  /* Accessibility */
  --ds-focus-ring: 0 0 0 3px rgba(12, 169, 199, 0.45); /* brand cyan, visible on both light/dark surfaces */
  --ds-touch-target: 44px; /* WCAG 2.2 minimum */
}

@media (prefers-color-scheme: dark) {
  :root {
    --ds-success-bg: #103426;
    --ds-warning-bg: #3a2c0d;
    --ds-error-bg: #3a1420;
    --ds-info-bg: #0d3138;
  }
}

/* box-sizing: border-box is already set globally in style.css / admin.css */

@media (prefers-reduced-motion: reduce) {
  .ds-btn, .ds-input, .ds-card, .ds-modal, .ds-skeleton { transition: none !important; animation: none !important; }
}

/* ---------- Buttons ---------- */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-touch-target);
  padding: 0 var(--ds-space-5);
  border-radius: var(--ds-radius-md);
  border: 1.5px solid transparent;
  font-family: inherit;
  font-size: var(--ds-text-base);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ds-btn:active { transform: translateY(1px); }
.ds-btn:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.ds-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.ds-btn-primary { background: var(--navy, #182b49); color: #fff; }
.ds-btn-primary:hover:not(:disabled) { background: var(--navy-light, #2f5278); }

.ds-btn-secondary { background: #fff; color: var(--navy, #182b49); border-color: var(--border, #dce3ea); }
.ds-btn-secondary:hover:not(:disabled) { border-color: var(--navy, #182b49); }

.ds-btn-danger { background: var(--ds-error); color: #fff; }
.ds-btn-danger:hover:not(:disabled) { filter: brightness(0.92); }

.ds-btn-sm { min-height: 36px; padding: 0 var(--ds-space-4); font-size: var(--ds-text-sm); }

/* ---------- Form inputs ---------- */

.ds-field { display: flex; flex-direction: column; gap: var(--ds-space-2); margin-bottom: var(--ds-space-4); }

.ds-label {
  font-size: var(--ds-text-sm);
  font-weight: 600;
  color: var(--text-dark, #172033);
}
.ds-label .ds-required { color: var(--ds-error); margin-left: 2px; }

.ds-hint { font-size: var(--ds-text-xs); color: var(--text-muted, #687587); }

.ds-input, .ds-select, .ds-textarea {
  width: 100%;
  min-height: var(--ds-touch-target);
  padding: var(--ds-space-3) var(--ds-space-4);
  font-family: inherit;
  font-size: var(--ds-text-base);
  color: var(--text-dark, #172033);
  background: #fff;
  border: 1.5px solid var(--border, #dce3ea);
  border-radius: var(--ds-radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ds-textarea { min-height: 120px; resize: vertical; }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  outline: none; border-color: var(--cyan, #0ca9c7); box-shadow: var(--ds-focus-ring);
}
.ds-input[aria-invalid="true"], .ds-textarea[aria-invalid="true"] {
  border-color: var(--ds-error);
}
.ds-error-text {
  font-size: var(--ds-text-xs);
  color: var(--ds-error);
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
}

/* ---------- Alerts ---------- */

.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4);
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-line-body);
  border: 1.5px solid transparent;
}
.ds-alert-success { background: var(--ds-success-bg); color: var(--ds-success); border-color: currentColor; }
.ds-alert-warning { background: var(--ds-warning-bg); color: var(--ds-warning); border-color: currentColor; }
.ds-alert-error   { background: var(--ds-error-bg);   color: var(--ds-error);   border-color: currentColor; }
.ds-alert-info    { background: var(--ds-info-bg);    color: var(--ds-info);    border-color: currentColor; }

/* ---------- Badges / status pills ---------- */

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: 3px var(--ds-space-3);
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ds-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ds-badge-success { background: var(--ds-success-bg); color: var(--ds-success); }
.ds-badge-warning { background: var(--ds-warning-bg); color: var(--ds-warning); }
.ds-badge-error   { background: var(--ds-error-bg);   color: var(--ds-error); }
.ds-badge-info    { background: var(--ds-info-bg);    color: var(--ds-info); }
.ds-badge-neutral { background: var(--light-bg, #f4f6f8); color: var(--text-muted, #687587); }

/* ---------- Cards ---------- */

.ds-card {
  background: #fff;
  border: 1px solid var(--border, #dce3ea);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  padding: var(--ds-space-5);
  transition: box-shadow 0.15s ease;
}
.ds-card-interactive { cursor: pointer; }
.ds-card-interactive:hover { box-shadow: var(--ds-shadow-md); }
.ds-card-interactive:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }

/* ---------- Modals ---------- */

.ds-modal-backdrop {
  position: fixed; inset: 0; background: rgba(23, 32, 51, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: var(--ds-space-4); z-index: 1000;
}
.ds-modal {
  background: #fff;
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
  max-width: 520px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  padding: var(--ds-space-6);
}
.ds-modal-close {
  min-width: var(--ds-touch-target); min-height: var(--ds-touch-target);
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer; border-radius: var(--ds-radius-full);
}
.ds-modal-close:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }

/* ---------- Skeleton loaders ---------- */

.ds-skeleton {
  background: linear-gradient(90deg, var(--light-bg, #f4f6f8) 25%, #eceff2 37%, var(--light-bg, #f4f6f8) 63%);
  background-size: 400% 100%;
  border-radius: var(--ds-radius-sm);
  animation: ds-skeleton-shimmer 1.4s ease infinite;
}
@keyframes ds-skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.ds-skeleton-text { height: 14px; margin-bottom: var(--ds-space-2); }
.ds-skeleton-title { height: 22px; width: 60%; margin-bottom: var(--ds-space-3); }
.ds-skeleton-thumb { aspect-ratio: 1; width: 100%; }

/* ---------- Empty / error states ---------- */

.ds-state {
  text-align: center;
  padding: var(--ds-space-8) var(--ds-space-4);
  color: var(--text-muted, #687587);
}
.ds-state-icon { font-size: 40px; margin-bottom: var(--ds-space-3); }
.ds-state-title { font-size: var(--ds-text-lg); font-weight: 700; color: var(--text-dark, #172033); margin-bottom: var(--ds-space-2); }
.ds-state-body { font-size: var(--ds-text-sm); max-width: 42ch; margin: 0 auto var(--ds-space-4); line-height: var(--ds-line-body); }

/* ---------- Status timeline (order tracking, job statuses) ---------- */

.ds-status-row { display: flex; align-items: center; gap: var(--ds-space-3); }
.ds-status-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--border, #dce3ea); }
.ds-status-dot.is-done { background: var(--ds-success); }
.ds-status-dot.is-current { background: var(--cyan, #0ca9c7); box-shadow: 0 0 0 4px var(--ds-info-bg); }

/* ---------- Utility: visible focus everywhere, even outside ds- components ---------- */

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

/* ---- Storage notice (js/privacy-notice.js) ----
   A notice, not a consent gate: this site sets no cookies and runs no
   tracking, so there is nothing to decline. Sits at the bottom, does not
   block the page, and never covers the mobile bottom nav. */
.ucl-privacy-notice {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2400;
  background: var(--navy, #182b49); color: #fff;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.22);
  animation: ucl-privacy-in 260ms ease-out;
}
@media (prefers-reduced-motion: reduce) { .ucl-privacy-notice { animation: none; } }
@keyframes ucl-privacy-in { from { transform: translateY(100%); } to { transform: translateY(0); } }

.ucl-privacy-inner {
  max-width: 1000px; margin: 0 auto;
  padding: 13px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.ucl-privacy-inner p { margin: 0; flex: 1; min-width: 240px; font-size: 13.5px; line-height: 1.55; }
.ucl-privacy-inner a { color: #7fd6e8; text-decoration: underline; }
.ucl-privacy-ok {
  background: #fff; color: var(--navy, #182b49); border: none;
  padding: 10px 22px; border-radius: 8px; font-weight: 800; font-size: 13.5px;
  cursor: pointer; min-height: 42px;
}
.ucl-privacy-ok:hover { background: #e8f6fa; }

/* Above the mobile bottom nav, so it never hides navigation. */
@media (max-width: 767px) {
  .ucl-privacy-notice { bottom: 64px; }
}

/* ---- Password show/hide (js/password-toggle.js) ---- */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 46px !important; box-sizing: border-box; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 8px;
  /* Full-height target: easy to hit with a thumb. */
  min-width: 38px; min-height: 38px;
  display: flex; align-items: center; justify-content: center;
  opacity: .65;
}
.pw-toggle:hover, .pw-toggle:focus-visible { opacity: 1; }