/* ============================================================
   Lock Orchestrator — production CSS (framework-free)
   Drop this ONE file into app/static/ and link it from base.html:
     <link rel="stylesheet" href="/static/lockorchestrator.css">
   It is self-contained: webfonts + design tokens + component classes.
   No React, no build step — pairs with the existing FastAPI/Jinja2 app.
   Classes mirror the design-system React components 1:1.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------------- Tokens ---------------- */
:root {
  --ink-900:#0c0c0d; --ink-800:#111111; --ink-700:#242424; --ink-600:#374151;
  --ink-500:#6b7280; --ink-400:#898989; --ink-300:#d1d5db; --ink-200:#e5e7eb;
  --ink-100:#f3f4f6; --ink-50:#f5f5f5; --ink-25:#f8f9fa; --white:#ffffff;
  --teal-600:#0f8a92; --teal-500:#12a3ad; --teal-100:#d6f3f5; --teal-50:#effbfb;
  --green-600:#047857; --green-500:#10b981; --green-100:#d1fae5; --green-50:#ecfdf5;
  --amber-600:#b45309; --amber-500:#f59e0b; --amber-100:#fef3c7; --amber-50:#fffbeb;
  --red-600:#dc2626; --red-500:#ef4444; --red-100:#fee2e2; --red-50:#fef2f2;
  --blue-600:#1d4ed8; --blue-500:#3b82f6; --blue-100:#dbeafe; --blue-50:#eff6ff;
  --badge-amber:#fb923c; --badge-rose:#ec4899; --badge-violet:#8b5cf6; --badge-emerald:#34d399;

  --canvas:var(--white); --surface-soft:var(--ink-25); --surface-card:var(--ink-50);
  --surface-strong:var(--ink-200); --surface-dark:#101010; --surface-dark-elevated:#1a1a1a;
  --text-strong:var(--ink-800); --text-body:var(--ink-600); --text-muted:var(--ink-500);
  --text-soft:var(--ink-400); --text-on-dark:var(--white); --text-on-dark-soft:#a1a1aa;
  --text-on-primary:var(--white); --text-link:var(--ink-800);
  --primary:var(--ink-800); --primary-hover:var(--ink-700); --accent:var(--teal-500);
  --hairline:var(--ink-200); --hairline-soft:var(--ink-100); --focus-ring:rgba(18,163,173,.30);

  --status-active-fg:var(--green-600);    --status-active-bg:var(--green-50);    --status-active-bd:var(--green-100);
  --status-scheduled-fg:var(--blue-600);  --status-scheduled-bg:var(--blue-50);  --status-scheduled-bd:var(--blue-100);
  --status-error-fg:var(--red-600);       --status-error-bg:var(--red-50);       --status-error-bd:var(--red-100);
  --status-processing-fg:var(--amber-600);--status-processing-bg:var(--amber-50);--status-processing-bd:var(--amber-100);

  --font-display:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace;

  --space-xxs:4px; --space-xs:8px; --space-sm:12px; --space-md:16px; --space-lg:24px;
  --space-xl:32px; --space-2xl:48px; --space-3xl:64px; --space-section:96px;
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-2xl:20px; --radius-pill:9999px;
  --shadow-xs:0 1px 2px rgba(12,12,13,.05); --shadow-sm:0 1px 3px rgba(12,12,13,.08),0 1px 2px rgba(12,12,13,.04);
  --shadow-md:0 4px 12px rgba(12,12,13,.08); --shadow-lg:0 12px 32px rgba(12,12,13,.10); --shadow-xl:0 24px 60px rgba(12,12,13,.16);
  --ease:cubic-bezier(.4,0,.2,1); --dur-fast:120ms; --dur-base:200ms;
  --container-max:1200px; --container-app:1180px; --nav-height:64px;
}

/* ---------------- Base ---------------- */
*{box-sizing:border-box;}
body{margin:0;font-family:var(--font-body);background:var(--canvas);color:var(--text-body);-webkit-font-smoothing:antialiased;line-height:1.5;}
a{color:var(--text-link);text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;color:var(--text-strong);margin:0;letter-spacing:-0.4px;}
.lo-container{max-width:var(--container-max);margin:0 auto;padding:0 32px;}
.lo-container--app{max-width:var(--container-app);}
.lo-mono{font-family:var(--font-mono);}

/* Display headline helpers (negative tracking is the brand signature) */
.lo-display-xl{font-family:var(--font-display);font-weight:600;font-size:58px;line-height:1.05;letter-spacing:-2px;}
.lo-display-lg{font-family:var(--font-display);font-weight:600;font-size:42px;line-height:1.1;letter-spacing:-1.5px;}
.lo-display-md{font-family:var(--font-display);font-weight:600;font-size:32px;line-height:1.15;letter-spacing:-1px;}
.lo-display-sm{font-family:var(--font-display);font-weight:600;font-size:26px;line-height:1.2;letter-spacing:-0.5px;}
.lo-overline{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-soft);}

/* ---------------- Button ---------------- */
.lo-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;
  font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1;white-space:nowrap;
  border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);}
.lo-btn:active{transform:translateY(.5px);}
.lo-btn--sm{height:32px;padding:0 12px;font-size:13px;}
.lo-btn--lg{height:48px;padding:0 26px;font-size:15px;}
.lo-btn--full{width:100%;}
.lo-btn--primary{background:var(--primary);color:var(--text-on-primary);border-color:var(--primary);}
.lo-btn--primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);}
.lo-btn--secondary{background:var(--canvas);color:var(--text-strong);border-color:var(--hairline);}
.lo-btn--secondary:hover{border-color:var(--ink-300);}
.lo-btn--ghost{background:transparent;color:var(--text-strong);}
.lo-btn--ghost:hover{background:var(--surface-card);}
.lo-btn--danger{background:var(--canvas);color:var(--red-600);border-color:var(--red-100);}
.lo-btn--danger:hover{background:var(--red-50);}
.lo-btn[disabled],.lo-btn:disabled{opacity:.45;cursor:not-allowed;}
/* Action-button row: buttons sit side by side when the container is wide
   enough for their labels, and wrap to full-width stacked when it isn't.
   Responds to container width (not viewport), so it works inside narrow cards. */
.lo-btn-row{display:flex;flex-wrap:wrap;gap:12px;}
.lo-btn-row>*{flex:1 1 240px;}

.lo-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-full,9999px);
  background:var(--canvas);color:var(--text-strong);border:1px solid var(--hairline);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);}
.lo-iconbtn--ghost{background:transparent;border-color:transparent;color:var(--text-muted);}
.lo-iconbtn--ghost:hover{background:var(--surface-card);}
.lo-iconbtn--square{border-radius:var(--radius-md);}

/* ---------------- Form: field / input / select ---------------- */
.lo-field{display:flex;flex-direction:column;gap:6px;}
.lo-label{font-size:13px;font-weight:500;color:var(--text-body);}
.lo-label .req{color:var(--red-500);margin-left:3px;}
.lo-hint{font-size:12.5px;color:var(--text-soft);}
.lo-error{font-size:12.5px;color:var(--red-600);}
.lo-input,.lo-select{width:100%;height:40px;padding:0 12px;font-family:var(--font-body);font-size:14px;color:var(--text-strong);
  background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-md);outline:none;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);}
.lo-input:focus,.lo-select:focus{border-color:var(--ink-800);box-shadow:0 0 0 3px var(--focus-ring);}
.lo-input--invalid{border-color:var(--red-500);}
.lo-input--mono{font-family:var(--font-mono);font-weight:500;letter-spacing:.04em;}
.lo-select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer;}

/* Switch */
.lo-switch{position:relative;display:inline-block;width:40px;height:24px;flex-shrink:0;}
.lo-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.lo-switch .track{position:absolute;inset:0;background:var(--ink-300);border-radius:var(--radius-pill);transition:background var(--dur-base) var(--ease);}
.lo-switch .thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:left var(--dur-base) var(--ease);}
.lo-switch input:checked ~ .track{background:var(--ink-800);}
.lo-switch input:checked ~ .thumb{left:19px;}

/* Checkbox */
.lo-check{display:flex;align-items:center;gap:10px;cursor:pointer;}
.lo-check input{position:absolute;opacity:0;}
.lo-check .box{width:18px;height:18px;flex-shrink:0;border:1.5px solid var(--ink-300);border-radius:5px;background:var(--canvas);
  display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);}
.lo-check .box svg{opacity:0;}
.lo-check input:checked ~ .box{background:var(--ink-800);border-color:var(--ink-800);}
.lo-check input:checked ~ .box svg{opacity:1;}

/* ---------------- Badge / status pill ---------------- */
.lo-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;font-family:var(--font-body);font-size:12.5px;font-weight:500;
  line-height:1.2;border-radius:var(--radius-pill);border:1px solid transparent;white-space:nowrap;background:var(--surface-card);color:var(--text-body);}
.lo-badge--sm{font-size:11.5px;padding:2px 8px;}
.lo-badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.lo-badge--active{background:var(--status-active-bg);color:var(--status-active-fg);border-color:var(--status-active-bd);}
.lo-badge--scheduled{background:var(--status-scheduled-bg);color:var(--status-scheduled-fg);border-color:var(--status-scheduled-bd);}
.lo-badge--processing{background:var(--status-processing-bg);color:var(--status-processing-fg);border-color:var(--status-processing-bd);}
.lo-badge--error{background:var(--status-error-bg);color:var(--status-error-fg);border-color:var(--status-error-bd);}
.lo-badge--partial{background:#fff3e6;color:#c2410c;border-color:#ffd9b3;}
.lo-badge--accent{background:var(--teal-50);color:var(--teal-600);border-color:var(--teal-100);}
.lo-badge--violet{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe;}
.lo-badge--emerald{background:#ecfdf5;color:#047857;border-color:#a7f3d0;}
.lo-badge--amber{background:#fff3e6;color:#c2410c;border-color:#ffd9b3;}
.lo-badge--rose{background:#fdf2f8;color:#be185d;border-color:#fbcfe8;}

/* ---------------- Card / surfaces ---------------- */
.lo-card{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--space-lg);}
.lo-card--gray{background:var(--surface-card);border-color:transparent;}
.lo-card--soft{background:var(--surface-soft);border-color:var(--hairline-soft);}
.lo-card--dark{background:var(--surface-dark);border-color:transparent;color:var(--text-on-dark);}
.lo-card--pad-xl{padding:var(--space-xl);}
.lo-card--pad-none{padding:0;}
.lo-card--hover{transition:box-shadow var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);}
.lo-card--hover:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--ink-300);}

/* Stat tile */
.lo-stat{display:flex;flex-direction:column;gap:6px;padding:var(--space-lg);background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);}
.lo-stat .label{font-size:12.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);}
.lo-stat .num{font-family:var(--font-display);font-size:36px;font-weight:600;letter-spacing:-1px;line-height:1.05;color:var(--text-strong);}
.lo-stat--active .num{color:var(--green-600);} .lo-stat--scheduled .num{color:var(--blue-600);} .lo-stat--error .num{color:var(--red-600);}

/* ---------------- PinCode (the signature) ---------------- */
.lo-pin{display:inline-flex;gap:6px;}
.lo-pin .cell{display:inline-flex;align-items:center;justify-content:center;width:34px;height:44px;
  background:var(--canvas);border:1.5px solid var(--ink-200);border-radius:var(--radius-md);
  font-family:var(--font-mono);font-size:20px;font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums;}
.lo-pin--sm .cell{width:26px;height:34px;font-size:16px;}
.lo-pin--lg .cell{width:46px;height:58px;font-size:26px;}
.lo-pin--active .cell{background:var(--green-50);border-color:var(--green-500);color:var(--green-600);}
.lo-pin--error .cell{background:var(--red-50);border-color:var(--red-500);color:var(--red-600);}
.lo-pin--expired .cell{background:var(--surface-card);border-color:var(--ink-200);color:var(--text-soft);}

/* ---------------- Nav pill group ---------------- */
.lo-pills{display:inline-flex;gap:4px;padding:4px;background:var(--surface-soft);border:1px solid var(--hairline-soft);border-radius:var(--radius-pill);}
.lo-pills button,.lo-pills a{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:none;border-radius:var(--radius-pill);
  background:transparent;color:var(--text-muted);font-family:var(--font-body);font-size:14px;font-weight:500;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);}
.lo-pills .is-active{background:var(--canvas);color:var(--text-strong);font-weight:600;box-shadow:var(--shadow-sm);}

/* ---------------- App shell ---------------- */
.lo-topbar{height:var(--nav-height);background:var(--canvas);border-bottom:1px solid var(--hairline);position:sticky;top:0;z-index:30;}
.lo-topbar .inner{max-width:var(--container-app);margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;justify-content:space-between;}
.lo-brand{display:flex;align-items:center;gap:10px;}
.lo-brand img{width:30px;height:30px;}
.lo-brand b{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.4px;color:var(--text-strong);}
.lo-tabs{background:var(--canvas);border-bottom:1px solid var(--hairline);}
.lo-tabs .inner{max-width:var(--container-app);margin:0 auto;padding:0 24px;display:flex;gap:4px;}
.lo-tab{display:inline-flex;align-items:center;gap:8px;padding:14px;border:none;background:transparent;border-bottom:2px solid transparent;margin-bottom:-1px;
  cursor:pointer;color:var(--text-muted);font-family:var(--font-body);font-size:14px;font-weight:500;text-decoration:none;}
.lo-tab.is-active{color:var(--text-strong);font-weight:600;border-bottom-color:var(--ink-800);}
.lo-main{max-width:var(--container-app);margin:0 auto;padding:32px 24px 64px;}
.lo-app{background:var(--surface-soft);min-height:100vh;}

/* Page header */
.lo-pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.lo-pagehead h1{font-size:28px;letter-spacing:-.8px;}
.lo-pagehead .sub{font-size:15px;color:var(--text-muted);margin:6px 0 0;}

/* ---------------- Table ---------------- */
.lo-table{width:100%;border-collapse:collapse;}
.lo-table th{text-align:left;padding:10px 20px;background:var(--surface-soft);font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-soft);}
.lo-table td{padding:14px 20px;border-top:1px solid var(--hairline-soft);font-size:13.5px;color:var(--text-body);}
.lo-table td.strong{font-weight:600;color:var(--text-strong);}

/* ---------------- Footer (dark) ---------------- */
.lo-footer{background:var(--surface-dark);color:var(--text-on-dark-soft);padding:64px 0 36px;}
.lo-footer a{color:var(--text-on-dark-soft);} .lo-footer a:hover{color:#fff;}

/* ---------------- Grid helpers ---------------- */
.lo-grid{display:grid;gap:24px;}
/* Let tracks size to the container; without this, grid items default to
   min-width:auto and nowrap content (e.g. buttons) forces columns wider
   than the container, overflowing in narrow layouts. */
.lo-grid>*{min-width:0;}
.lo-grid-2{grid-template-columns:repeat(2,1fr);}
.lo-grid-3{grid-template-columns:repeat(3,1fr);}
.lo-grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.lo-grid-3,.lo-grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.lo-grid-2,.lo-grid-3,.lo-grid-4{grid-template-columns:1fr;}}