/* ══════════════════════════════════════════════════════════════
   Zenith 4S CMP — minimal light theme
   Loaded AFTER style.css / camera.css; overrides visuals only.
   Design rules:
     · white surfaces, one grey line colour, ONE accent colour
     · no gradients, no shadows; separation by space + hairlines
     · state colours stay, but desaturated to a quiet palette
     · all existing .z-* class names are kept intact
   ══════════════════════════════════════════════════════════════ */

:root {
  --z-accent:   #2563eb;
  --z-accent-s: #eff4ff;
  --z-ink:      #111827;
  --z-ink-2:    #4b5563;
  --z-ink-3:    #9ca3af;
  --z-bg:       #ffffff;
  --z-line:     #e9ecef;
  --z-line-2:   #f1f3f5;
  --z-radius:   8px;
  --z-side-w:   220px;

  /* legacy variable names other rules still read */
  --z-blue:   var(--z-accent);
  --z-blue-d: var(--z-ink);
  --z-side:   #ffffff;
  --z-side-2: #ffffff;
  --z-text:   var(--z-ink);
  --z-muted:  var(--z-ink-3);
  --z-green:  #0f7a63;
  --z-amber:  #9a6700;
  --z-red:    #b42318;
}

/* ── typography ───────────────────────────────────────────── */
body {
  background: var(--z-bg);
  color: var(--z-ink);
  font-family: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .z-topbar-title, .z-stat-num {
  letter-spacing: -.01em;
  font-weight: 600;
  color: var(--z-ink);
}

a { color: var(--z-accent); }

/* ── sidebar: white, hairlines, quiet active state ────────── */
.z-sidebar {
  background: #fff !important;
  border-right: 1px solid var(--z-line);
  color: var(--z-ink-2);
}
.z-brand { border-bottom: 1px solid var(--z-line-2); padding: 16px 16px 14px; }
.z-brand i { color: var(--z-accent); font-size: 20px; }
.z-brand-name { font-size: 15px; font-weight: 600; color: var(--z-ink); letter-spacing: 0; }
.z-brand-sub { font-size: 10.5px; color: var(--z-ink-3); letter-spacing: 1.6px; }

.z-nav { padding: 8px; }
.z-nav a, .z-nav-soon {
  color: var(--z-ink-2);
  border-radius: var(--z-radius);
  padding: 7px 10px;
  font-size: 13px;
  transition: none;
}
.z-nav a:hover { background: #f8f9fa; color: var(--z-ink); }
.z-nav a.active {
  background: var(--z-accent-s);
  color: var(--z-accent);
  font-weight: 500;
  box-shadow: none;
  border-left: none;
}
.z-nav i { font-size: 14px; color: var(--z-ink-3); }
.z-nav a.active i { color: var(--z-accent); }
.z-nav-sep { color: var(--z-ink-3); letter-spacing: 1.2px; font-weight: 500; }
.z-nav-badge { background: var(--z-red); box-shadow: none; }

/* ── topbar / footer ──────────────────────────────────────── */
.z-topbar {
  background: #fff;
  border-bottom: 1px solid var(--z-line);
  box-shadow: none;
}
.z-topbar-title { font-size: 15px; font-weight: 600; color: var(--z-ink); }
.z-content { padding: 22px 24px 32px; }
.z-footer {
  border-top: 1px solid var(--z-line-2);
  color: var(--z-ink-3);
  font-size: 12px;
  background: #fff;
}

/* ── cards: hairline only ─────────────────────────────────── */
.z-card {
  border: 1px solid var(--z-line);
  border-radius: var(--z-radius);
  box-shadow: none;
  background: #fff;
}
.z-card-head {
  border-bottom: 1px solid var(--z-line-2);
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
}
.z-card-head i { color: var(--z-ink-3); }
.z-card-body { padding: 16px; }

/* ── stats: numbers first, no decoration ──────────────────── */
.z-stats { gap: 12px; }
.z-stat {
  border: 1px solid var(--z-line);
  border-radius: var(--z-radius);
  box-shadow: none;
  padding: 14px 16px;
  align-items: baseline;
}
.z-stat-num { font-size: 24px; font-weight: 600; color: var(--z-ink); }
.z-stat-lbl { font-size: 11.5px; color: var(--z-ink-3); letter-spacing: .2px; }
.z-stat-icon, .z-stat-icon i {
  background: none !important;
  color: var(--z-ink-3) !important;
  width: auto; height: auto;
  font-size: 15px;
}
.z-stat-on { border-color: var(--z-accent); background: #fff; }

/* flat tiles (replaces the gradient .bg-* helpers) */
.bg-blue, .bg-teal, .bg-green, .bg-amber,
.z-ab-danger, .z-ab-warning, .z-ab-total, .z-ab-live {
  background: #fff !important;
  color: var(--z-ink) !important;
  border: 1px solid var(--z-line);
}
.z-ab-num { font-weight: 600; }
.z-ab-lbl { color: var(--z-ink-3); font-size: 11.5px; }

/* ── tables: no zebra, hairline rows, roomy cells ─────────── */
.z-table thead th {
  background: #fff;
  color: var(--z-ink-3);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .3px;
  text-transform: none;
  border-bottom: 1px solid var(--z-line);
  padding: 10px 12px;
}
.z-table td {
  border-bottom: 1px solid var(--z-line-2);
  padding: 10px 12px;
  font-size: 13px;
}
.z-table tbody tr:hover { background: #fafbfc; }
.z-empty { color: var(--z-ink-3); padding: 28px 12px; }

/* ── pills / badges / tags: one quiet family ──────────────── */
.z-pill, .z-badge, .z-tag, .z-ftype, .z-code, .z-code-alt {
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 2px 9px;
  box-shadow: none;
  border: 1px solid transparent;
}
.z-badge { background: var(--z-accent) !important; color: #fff !important; border-color: transparent; }
.z-pill { background: #f3f4f6 !important; color: var(--z-ink-2) !important; }
.z-pill-active, .z-pill-create, .z-pill-approve, .z-pill-sign,
.z-pill-activate, .z-pill-submit, .z-pill-valid, .z-pill-approved,
.z-pill-on, .z-pill-seed, .z-pill-completed {
  background: #ecfdf3 !important; color: #067647 !important;
}
.z-pill-planning, .z-pill-update, .z-pill-pending, .z-pill-draft,
.z-pill-suspended, .z-pill-warning {
  background: #fffaeb !important; color: #b54708 !important;
}
.z-pill-rejected, .z-pill-reject, .z-pill-cancel, .z-pill-closed,
.z-pill-expired, .z-pill-cancelled, .z-pill-login_failed {
  background: #fef3f2 !important; color: #b42318 !important;
}
.z-pill-role-admin, .z-pill-role-site_admin,
.z-pill-role-supervisor, .z-pill-role-user {
  background: #f3f4f6 !important; color: var(--z-ink-2) !important;
  border-color: var(--z-line);
}
.z-code, .z-code-alt {
  background: #f8f9fa !important; color: var(--z-ink-2) !important;
  border-color: var(--z-line); font-family: ui-monospace, SFMono-Regular,
  Menlo, Consolas, monospace; font-weight: 500;
}
.z-tag { background: #f8f9fa !important; color: var(--z-ink-2) !important; border-color: var(--z-line); }
.z-ftype, .ft-esign, .ft-image, .ft-date, .ft-title_desc {
  background: #f8f9fa !important; color: var(--z-ink-3) !important;
  border-color: var(--z-line);
}
.z-zone-danger, .z-zone-confined, .z-zone-height,
.z-zone-electric, .z-zone-normal {
  background: #f8f9fa !important; color: var(--z-ink-2) !important;
  border: 1px solid var(--z-line);
}

/* ── forms ────────────────────────────────────────────────── */
.form-control, .form-select {
  border-color: var(--z-line);
  border-radius: var(--z-radius);
  font-size: 13px;
  padding: 7px 10px;
  box-shadow: none;
}
.form-control:focus, .form-select:focus {
  border-color: var(--z-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}
.form-label, .z-field > span { font-size: 12px; color: var(--z-ink-2); font-weight: 500; }
.btn { border-radius: var(--z-radius); font-size: 13px; box-shadow: none; }
.btn-primary { background: var(--z-accent); border-color: var(--z-accent); }
.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.btn-outline-primary { color: var(--z-accent); border-color: #cdd6e4; }
.btn-outline-primary:hover { background: var(--z-accent); border-color: var(--z-accent); }
.z-chip, .z-readonly, .z-tpl-summary, .z-td-block, .z-vit {
  background: #fafbfc !important;
  border-color: var(--z-line) !important;
}
.z-td-block { border-left: 2px solid var(--z-line) !important; }
.z-esign { background: #fff !important; border: 1px dashed var(--z-line); }
.z-sticky-actions { background: #fff; border-top: 1px solid var(--z-line); box-shadow: none; }

/* ── login: plain card on plain background ───────────────── */
.z-login-body {
  background: #f7f8fa !important;
  display: grid; place-items: center; min-height: 100vh;
}
.z-login-card {
  box-shadow: none;
  border: 1px solid var(--z-line);
  border-radius: 12px;
  padding: 30px 28px 22px;
  background: #fff;
}
.z-login-head { border-bottom: 1px solid var(--z-line-2); }
.z-login-foot { border-top: 1px solid var(--z-line-2); color: var(--z-ink-3); font-size: 11.5px; }

/* ── severity dots / alert bar: keep signal, drop noise ──── */
.z-sev-dot { box-shadow: none; }
.z-alertbar { background: #fff; border: 1px solid var(--z-line); }
.z-alertbar-cell { border-right: 1px solid var(--z-line-2); }
.z-live-dot { box-shadow: none; }
.z-feed-item { border-bottom: 1px solid var(--z-line-2); }
.z-switch, .z-tpl-card { border-color: var(--z-line); background: #fff; }

/* ── small helpers ────────────────────────────────────────── */
.z-muted, .text-muted { color: var(--z-ink-3) !important; }
.z-wrap { word-break: break-all; }
code { color: var(--z-ink-2); }

/* ── camera module: flatten the hover lift ────────────────── */
.z-camcard {
  border-color: var(--z-line);
  border-radius: var(--z-radius);
  transition: none;
}
.z-camcard:hover { box-shadow: none; transform: none; border-color: #d7dbe0; }
.z-camthumb, .z-videobox { border-radius: var(--z-radius); }
.z-camstate-online { background: #067647; }
.z-state-live { color: #067647; }

/* ── sidebar user block: flat, no grey slab ───────────────── */
.z-user {
  background: #fff !important;
  border-top: 1px solid var(--z-line-2);
  padding: 12px 16px;
}
.z-user-name { color: var(--z-ink); font-weight: 500; font-size: 12.5px; }
.z-user-role { color: var(--z-ink-3); font-size: 11px; }
.z-user .btn, .z-user a.btn {
  background: #fff; border: 1px solid var(--z-line); color: var(--z-ink-2);
  font-size: 12px; border-radius: var(--z-radius); box-shadow: none;
}
.z-user .btn:hover, .z-user a.btn:hover { background: #f8f9fa; color: var(--z-ink); }