@import url('/shared/styles/kuro-loader.css?v=mved178j');
/* Accessible brand values live in ONE file for the whole product — see brand-tokens.css
   for the measurements and for the rule about when a brand hue may be used raw. Pinned
   to the build stamp for the same reason every other reference here is. */
@import url('/shared/styles/brand-tokens.css?v=mved178j');
/*
 * Kuro shared theme — the site-wide design system.
 *
 * Structure follows Grading Insights (clean top bar + soft rounded cards + flat
 * form controls); colors are taken from kp (the iOS-system palette that stays),
 * with the accent colors used a bit more liberally for a colorful-but-consistent
 * look. OPT-IN: apps <link> this before their own stylesheet. kp (the 4-column
 * board) and kk (kiosk) deliberately do NOT link it — their designs are frozen.
 *
 * Layers:
 *   1. :root tokens      — colors, surfaces, radii, shadows, gradients
 *   2. base              — body background + typography (only affects linking apps)
 *   3. components        — .app-topbar, .brand, .card, .btn*, .field, .tabs, .badge, .app-modal
 * App-specific layout/components live in each app's own CSS, using these tokens.
 */
:root {
  /* ---- kp / iOS system palette ---- */
  --blue: #007aff;
  --blue-600: #0063d1;
  --indigo: #5b6ee1;
  --purple: #6f42c1;
  --purple-2: #af52de;
  --sky: #00aeef;
  --teal: #00c2b8;
  --green: #34c759;
  --green-2: #1e7e34;
  --yellow: #ffc107;
  --orange: #ff9500;
  --orange-2: #ff5722;
  --red: #ff2d55;
  --red-2: #dc3545;

  /* ---- surfaces & text ---- */
  --ink: #1e2634;
  --ink-soft: #43516a;
  /* --muted was #7b869a, which measures 3.67:1 on white and 3.3:1 on --bg — under the AA
     4.5:1 floor for normal text, and this token carries table subtitles, empty states,
     field captions, the signed-in name and every plan-alert body in the product. Five
     surfaces (kp/features/projections, kp/features/reports, operator, gp, po) had each
     written their own local override saying exactly that, and links.html a sixth. #5b6880
     is the same grey family at 5.62:1 on white and 5.00:1 on --bg. Measured 2026-09-18;
     fixed here so no surface has to patch around it again. */
  --muted: #5b6880;
  --line: #e4e9f1;
  --line-soft: rgba(120, 140, 170, 0.16);
  --bg: #eef2f7;
  --card: #ffffff;
  --card-2: #f7faff;

  /* ---- radii / shadows ---- */
  --radius: 16px;
  --radius-sm: 11px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 14px rgba(31, 38, 135, 0.06);
  --shadow: 0 8px 24px rgba(31, 38, 135, 0.08);
  --shadow-lg: 0 18px 44px rgba(31, 38, 135, 0.16);

  /* ---- gradients ---- */
  --grad-brand: linear-gradient(135deg, #5b6ee1, #7b5bd6);
  --grad-primary: linear-gradient(135deg, #0a91ff, #007aff);
  --app-bg:
    radial-gradient(1100px 560px at 10% -8%, rgba(0, 174, 239, 0.12), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(120, 110, 230, 0.12), transparent 55%),
    linear-gradient(160deg, #eaf0fb 0%, #eef2f7 55%, #eaf6fc 100%);
}

/* ============================ base ============================ */
.theme,
.theme * {
  box-sizing: border-box;
}
body.theme {
  margin: 0;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--app-bg);
  background-attachment: fixed;
}

/* ============================ top bar ============================ */
.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 22px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 20px rgba(31, 38, 135, 0.06);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.brand .icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--grad-brand);
  color: #fff;
  font-size: 18px;
  box-shadow: 0 6px 16px rgba(91, 110, 225, 0.34);
}
.brand h1 {
  font-size: 18px;
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.brand .sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}
.top-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.whoami {
  font-size: 13px;
  color: var(--muted);
}
.home-btn {
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink-soft);
  padding: 9px 15px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
}
.home-btn:hover {
  background: #fff;
  color: var(--blue);
}

/* Icon control buttons — matches the kp header bar (icon-only, rounded, lifts on hover). */
.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.control-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.2s,
    transform 0.2s,
    box-shadow 0.2s,
    color 0.2s;
}
.control-btn:hover {
  background: #fff;
  color: var(--blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.control-btn.danger:hover {
  color: var(--red-2);
}

/* ============================ cards ============================ */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-pad {
  padding: 18px 20px;
}

/* ============================ buttons ============================ */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost {
  border: 0;
  border-radius: 12px;
  padding: 9px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  transition:
    filter 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
.btn-primary {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 122, 255, 0.28);
}
.btn-primary:hover {
  filter: brightness(1.06);
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.btn-secondary:hover {
  background: #fff;
}
.btn-ghost {
  background: transparent;
  color: var(--blue);
}
.btn-ghost:hover {
  background: rgba(0, 122, 255, 0.08);
}
.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 0.5;
  cursor: default;
  filter: none;
}

/* ============================ form fields ============================ */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
}
.field.row {
  flex-direction: row;
  align-items: center;
  gap: 9px;
}
.input,
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: var(--card-2);
}
.field textarea {
  resize: vertical;
  min-height: 44px;
}
.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--sky-aa);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.16);
}
.field input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}
.label-caps {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* ============================ segmented tabs ============================ */
.tabs {
  display: inline-flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  padding: 5px;
}
.tab {
  border: 0;
  background: none;
  color: #5a6579;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 18px;
  cursor: pointer;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}
.tab.active {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}
/* The wash composites to #d9f3fd over white; #0090c9 on it measured 3.12:1 at 11px/800,
   under the 4.5:1 floor. --sky-ink is the value the notification badges already use on the
   identical wash (5.91:1) — same hue, one value, measured 2026-09-18. */
.tab-pill {
  background: rgba(0, 174, 239, 0.15);
  color: var(--sky-ink);
  font-size: 11px;
  font-weight: 800;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
}

/* ============================ badges / chips / pills ============================ */
.badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge-blue {
  background: rgba(0, 122, 255, 0.14);
  color: var(--blue-600);
}
.badge-green {
  background: rgba(52, 199, 89, 0.16);
  color: var(--green-2);
}
.badge-purple {
  background: rgba(120, 80, 200, 0.16);
  color: #6a3fb0;
}
.badge-orange {
  background: rgba(255, 149, 0, 0.16);
  color: #b7791f;
}
.badge-red {
  background: rgba(255, 45, 85, 0.14);
  color: var(--red-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-soft);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line-soft);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}
.chip i {
  color: var(--sky-aa);
  font-size: 12px;
}

/* ============================ modal ============================ */
.app-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 45, 0.4);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  z-index: 60;
}
.app-modal-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  width: min(94vw, 470px);
  padding: 24px 26px;
  box-shadow: var(--shadow-lg);
}
.app-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.app-modal-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}
.app-modal-x {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
}

/* ============================ misc ============================ */
.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 80px 20px;
}
.empty-state i {
  font-size: 52px;
  color: #bcccdf;
  margin-bottom: 14px;
  display: block;
}