/* ============================================================
   base.css — shared components (mobile + web admin)
   Cupertino on Android prototype
   ============================================================ */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font: var(--t-body);
  color: var(--label);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
button { font-family: var(--font); cursor: pointer; }
img { display: block; max-width: 100%; }

/* ---------- Type helpers ---------- */
.large-title { font: var(--t-largetitle); letter-spacing: -0.4px; margin: 0; }
.title       { font: var(--t-title); letter-spacing: -0.3px; margin: 0; }
.title2      { font: var(--t-title2); margin: 0; }
.headline    { font: var(--t-headline); margin: 0; }
.subhead     { font: var(--t-subhead); color: var(--label-secondary); margin: 0; }
.footnote    { font: var(--t-footnote); color: var(--label-secondary); margin: 0; }
.caption     { font: var(--t-caption); color: var(--label-tertiary); margin: 0; }
.tint        { color: var(--accent); }
.muted       { color: var(--label-secondary); }

/* ============================================================
   PHONE FRAME (operator app)
   ============================================================ */
.stage {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 16px;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--accent-soft), transparent 60%),
    var(--bg);
}
.device {
  width: 390px; max-width: 100%;
  height: 844px; max-height: calc(100vh - 48px);
  background: var(--bg);
  border-radius: 54px;
  padding: 12px;
  box-shadow: 0 0 0 12px #0b0b0c, 0 40px 80px rgba(0,0,0,0.45);
  position: relative;
}
.device-screen {
  position: relative;
  width: 100%; height: 100%;
  background: var(--bg);
  border-radius: 42px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* status bar */
.statusbar {
  height: 48px; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; font: var(--t-footnote); font-weight: 600; color: var(--label);
  position: relative; z-index: 5;
}
.statusbar .notch {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 120px; height: 30px; background: #0b0b0c; border-radius: 18px;
}
.statusbar .right { display: flex; gap: 6px; align-items: center; }
/* home indicator */
.home-indicator {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px; border-radius: 3px; background: var(--label);
  opacity: 0.85; z-index: 30; pointer-events: none;
}

/* scroll area inside phone */
.screen-scroll {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 96px;
}
.screen-scroll::-webkit-scrollbar { width: 0; }

/* ============================================================
   NAV BARS (translucent / vibrancy)
   ============================================================ */
.navbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 16px;
  background: var(--bg-nav);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-nav);
}
.navbar .nav-title { font: var(--t-headline); flex: 1; text-align: center; }
.navbar .nav-btn {
  background: none; border: 0; color: var(--accent); font: var(--t-body);
  padding: 4px; display: flex; align-items: center; gap: 4px; min-width: 44px;
}
.navbar .nav-btn.right { justify-content: flex-end; }
.nav-spacer { min-width: 44px; }

/* Minimal top row for the app: only the theme toggle, no white bar */
.app-top {
  flex: none; display: flex; align-items: center; justify-content: flex-end;
  padding: 2px 14px 0; min-height: 34px; background: transparent;
}
.theme-toggle {
  border: 0; background: transparent; color: var(--label); cursor: pointer;
  width: 40px; height: 34px; display: grid; place-items: center; font-size: 18px;
}
.theme-toggle:active { opacity: .5; }

/* Large title header (root screens) */
.large-header { padding: 4px 20px 8px; }
.large-header .large-title { margin-top: 4px; }
.large-header .sub { color: var(--label-secondary); font: var(--t-subhead); margin-top: 2px; }

/* ============================================================
   LISTS — inset grouped
   ============================================================ */
.section-title {
  font: var(--t-footnote); text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--label-secondary); margin: 22px 20px 8px;
}
.inset-group {
  margin: 0 16px; background: var(--bg-elevated);
  border-radius: var(--r-card); overflow: hidden;
  box-shadow: var(--shadow-card);
}
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; min-height: 52px;
  position: relative; color: var(--label);
}
.row + .row::before {
  content: ""; position: absolute; top: 0; left: 52px; right: 0;
  height: 0.5px; background: var(--separator);
}
.row .ic {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: grid; place-items: center; font-size: 17px; color: #fff;
}
.row .grow { flex: 1; min-width: 0; }
.row .grow .t { font: var(--t-body); }
.row .grow .d { font: var(--t-footnote); color: var(--label-secondary); }
.row .trail { color: var(--label-secondary); font: var(--t-body); display: flex; align-items: center; gap: 6px; }
.row.tappable:active { background: var(--fill); }
.chevron { color: var(--label-tertiary); font-size: 18px; }
.chevron::after { content: "›"; font-weight: 600; }

/* icon tile colors */
.bg-blue{background:var(--accent)} .bg-green{background:var(--green)}
.bg-orange{background:var(--orange)} .bg-red{background:var(--red)}
.bg-purple{background:var(--purple)} .bg-teal{background:var(--teal)}
.bg-gray{background:#8E8E93} .bg-yellow{background:var(--yellow)}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--bg-elevated); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); padding: 16px;
}
.card-pad { margin: 0 16px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.hstack { display: flex; align-items: center; gap: 12px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  border: 0; border-radius: var(--r-control); font: var(--t-headline);
  padding: 14px 18px; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; width: 100%; transition: transform .08s ease, background .15s ease;
}
.btn:active { transform: scale(0.98); }
.btn-filled { background: var(--accent); color: var(--on-accent); }
.btn-filled:active { background: var(--accent-pressed); }
.btn-tinted { background: var(--accent-soft); color: var(--accent); }
.btn-gray   { background: var(--fill); color: var(--label); }
.btn-danger { background: var(--red); color: #fff; }
.btn-plain  { background: none; color: var(--accent); }
.btn-pill   { border-radius: var(--r-pill); }
.btn-sm     { padding: 8px 14px; font: var(--t-subhead); width: auto; }
.btn-auto   { width: auto; }

/* Floating action button */
.fab {
  position: absolute; right: 18px; bottom: 96px; z-index: 20;
  width: 56px; height: 56px; border-radius: 18px; border: 0;
  background: var(--accent); color: #fff; font-size: 26px;
  box-shadow: var(--shadow-fab); display: grid; place-items: center;
}

/* ============================================================
   SEGMENTED CONTROL
   ============================================================ */
.segmented {
  display: flex; background: var(--fill); border-radius: 10px; padding: 2px;
  margin: 0 16px;
}
.segmented button {
  flex: 1; border: 0; background: none; color: var(--label);
  font: var(--t-subhead); font-weight: 600; padding: 7px 10px; border-radius: 8px;
}
.segmented button.active {
  background: var(--bg-elevated); box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* ============================================================
   SWITCH (iOS)
   ============================================================ */
.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; }
.switch .track {
  position: absolute; inset: 0; background: var(--fill-strong);
  border-radius: 999px; transition: background .2s;
}
.switch .knob {
  position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
  background: #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,.25);
  transition: transform .2s;
}
.switch input:checked ~ .track { background: var(--green); }
.switch input:checked ~ .knob { transform: translateX(20px); }

/* ============================================================
   INPUTS / FIELDS
   ============================================================ */
.field { margin: 0 16px; }
.field label { display:block; font: var(--t-footnote); color: var(--label-secondary); margin: 0 4px 6px; }
.input, .textarea, select.input {
  width: 100%; border: 0; background: var(--bg-elevated); color: var(--label);
  border-radius: var(--r-control); padding: 14px 16px; font: var(--t-body);
  box-shadow: var(--shadow-card); outline: none;
}
.textarea { min-height: 96px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--label-tertiary); }
.input-row {
  background: var(--bg-elevated); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); margin: 0 16px; overflow: hidden;
}
.input-row .ir {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; position: relative;
}
.input-row .ir + .ir::before {
  content:""; position:absolute; top:0; left:16px; right:0; height:.5px; background: var(--separator);
}
.input-row .ir label { flex: none; width: 110px; font: var(--t-body); color: var(--label); }
.input-row .ir input, .input-row .ir select {
  flex: 1; border: 0; background: none; color: var(--label); font: var(--t-body);
  text-align: right; outline: none;
}

/* ============================================================
   BADGES / STATUS PILLS
   ============================================================ */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--t-caption); font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--fill); color: var(--label-secondary);
}
.pill.dot::before { content:""; width:7px; height:7px; border-radius:50%; background: currentColor; }
.pill-green { background: rgba(52,199,89,.16); color: var(--green); }
.pill-orange{ background: rgba(255,149,0,.16); color: var(--orange); }
.pill-red   { background: rgba(255,59,48,.16); color: var(--red); }
.pill-blue  { background: var(--accent-soft); color: var(--accent); }
.pill-gray  { background: var(--fill); color: var(--label-secondary); }

/* ============================================================
   ICON TILE / AVATAR
   ============================================================ */
.tile {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  display: grid; place-items: center; font-size: 24px;
  background: var(--fill);
}
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font: var(--t-subhead); font-weight: 600;
  background: var(--accent-soft); color: var(--accent);
}

/* ============================================================
   TAB BAR (bottom, translucent)
   ============================================================ */
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; padding: 8px 8px 26px;
  background: var(--bg-nav);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--separator);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--label-tertiary); font: 500 11px/1.2 var(--font); white-space: nowrap;
}
.tabbar a .ti { font-size: 22px; line-height: 1; }
.tabbar a.active { color: var(--accent); }

/* ============================================================
   PHOTO EVIDENCE GRID (mock)
   ============================================================ */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.photo-grid.cols2 { grid-template-columns: repeat(2, 1fr); }
.photo {
  aspect-ratio: 1; border-radius: 14px; overflow: hidden; position: relative;
  background: linear-gradient(135deg, #c7ccd4, #99a0ab);
  display: grid; place-items: center; color: rgba(255,255,255,.85); font-size: 30px;
}
.photo .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px;
  font: var(--t-caption); font-weight: 600; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
}
.photo.add {
  background: var(--fill); color: var(--accent); font-size: 26px;
  border: 1.5px dashed var(--separator);
}

/* progress / meter */
.meter { height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }

/* ============================================================
   WEB ADMIN LAYOUT
   ============================================================ */
.admin { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--bg-nav);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 0.5px solid var(--separator);
  padding: 22px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
.brand .logo {
  width: 34px; height: 34px; border-radius: 10px; background: var(--accent);
  display: grid; place-items: center; color: #fff; font-size: 18px;
}
.brand .name { font: var(--t-headline); }
.brand .name small { display:block; font: var(--t-caption); color: var(--label-secondary); font-weight:400; }
.nav-group { margin-top: 14px; }
.nav-group .lbl { font: var(--t-caption); text-transform: uppercase; letter-spacing:.5px;
  color: var(--label-tertiary); padding: 0 12px 6px; }
.side-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 10px; color: var(--label); font: var(--t-callout); font-weight: 500;
  margin-bottom: 2px;
}
.side-link .si { font-size: 18px; width: 22px; text-align: center; }
.side-link:hover { background: var(--fill); }
.side-link.active { background: var(--accent); color: #fff; }
.side-link .count { margin-left: auto; font: var(--t-caption); font-weight:600;
  background: var(--fill); color: var(--label-secondary); padding: 1px 8px; border-radius: 999px; }
.side-link.active .count { background: rgba(255,255,255,.25); color: #fff; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px; padding: 16px 28px;
  background: var(--bg-nav);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--separator);
}
.topbar .search {
  flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px;
  background: var(--fill); border-radius: 10px; padding: 8px 12px; color: var(--label-secondary);
}
.topbar .search input { border:0; background:none; outline:none; color: var(--label); font: var(--t-callout); flex:1; }
.iconbtn {
  width: 38px; height: 38px; border-radius: 10px; border: 0; background: var(--fill);
  color: var(--label); display: grid; place-items: center; font-size: 18px;
}
.content { padding: 28px; max-width: 1400px; width: 100%; }
.page-head { margin-bottom: 22px; }
.page-head .large-title { letter-spacing: -0.5px; }

/* KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi {
  background: var(--bg-elevated); border-radius: var(--r-card); padding: 18px;
  box-shadow: var(--shadow-card);
}
.kpi .k-top { display: flex; align-items: center; justify-content: space-between; }
.kpi .k-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color:#fff; font-size:18px; }
.kpi .k-val { font: var(--t-title); margin-top: 12px; letter-spacing:-0.5px; }
.kpi .k-lbl { font: var(--t-subhead); color: var(--label-secondary); margin-top: 2px; }
.kpi .k-delta { font: var(--t-footnote); font-weight: 600; margin-top: 8px; }
.up { color: var(--green); } .down { color: var(--red); }

/* generic grid helpers */
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.cards-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:16px; }

/* TABLE */
.panel { background: var(--bg-elevated); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.panel-head { display:flex; align-items:center; justify-content:space-between; padding: 16px 20px; border-bottom: .5px solid var(--separator); }
.panel-head h3 { font: var(--t-title2); margin: 0; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font: var(--t-footnote); text-transform: uppercase; letter-spacing:.4px;
  color: var(--label-secondary); padding: 12px 20px; background: var(--fill);
}
tbody td { padding: 14px 20px; border-top: .5px solid var(--separator); font: var(--t-callout); }
tbody tr:hover { background: var(--fill); }
.unit-cell { display: flex; align-items: center; gap: 12px; }
.unit-cell .tile { width: 38px; height: 38px; font-size: 20px; border-radius: 10px; }
.unit-cell .meta .t { font-weight: 600; }
.unit-cell .meta .d { font: var(--t-footnote); color: var(--label-secondary); }

/* responsive admin */
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 860px) {
  .admin { grid-template-columns: 1fr; }
  .sidebar { display: none; }
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 20px);
  background: rgba(30,30,32,0.96); color: #fff; font: var(--t-subhead); font-weight: 600;
  padding: 12px 20px; border-radius: 999px; z-index: 999;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; backdrop-filter: blur(10px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   CHECKLIST (inspection)
   ============================================================ */
.check-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  position: relative; color: var(--label);
}
.check-row + .check-row::before {
  content:""; position:absolute; top:0; left:48px; right:0; height:.5px; background: var(--separator);
}
.check-row .box {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  border: 2px solid var(--separator); display: grid; place-items: center;
  color: #fff; font-size: 15px; transition: background .15s, border-color .15s;
}
.check-row.checked .box { background: var(--green); border-color: var(--green); }
.check-row.checked .box::after { content: "✓"; }
.check-row .lbl { flex: 1; font: var(--t-callout); }
.check-row:active { background: var(--fill); }

/* misc */
.spacer { flex: 1; }
.mt2{margin-top:8px}.mt3{margin-top:12px}.mt4{margin-top:16px}.mt6{margin-top:24px}
.center { text-align:center; }
.divider { height:.5px; background: var(--separator); margin: 8px 16px; }