/* ══════════════════════════════════════════════════════════════
   Zenith 4S CMP — stylesheet
   Version: v1
   ══════════════════════════════════════════════════════════════ */

:root {
  --z-blue:   #0d6e9e;
  --z-blue-d: #0b3d5c;
  --z-side:   #10293c;
  --z-side-2: #0b1e2c;
  --z-bg:     #f2f6f9;
  --z-line:   #dde5ec;
  --z-text:   #1d2b36;
  --z-muted:  #6c8296;
  --z-green:  #14a085;
  --z-amber:  #f0932b;
  --z-red:    #e05252;
  --z-radius: 10px;
  --z-side-w: 236px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--z-bg);
  color: var(--z-text);
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans CJK TC",
               "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
}

/* ── sidebar ──────────────────────────────────────────────── */
.z-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--z-side-w);
  background: linear-gradient(180deg, var(--z-side) 0%, var(--z-side-2) 100%);
  color: #cfe0ec; display: flex; flex-direction: column; z-index: 100;
}
.z-brand { display: flex; gap: 10px; align-items: center;
  padding: 18px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.z-brand i { font-size: 26px; color: #4ec3f0; }
.z-brand-name { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: .5px; }
.z-brand-sub { font-size: 11px; color: #7fa9c4; letter-spacing: 2px; }

.z-nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.z-nav a, .z-nav-soon {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 2px; border-radius: 8px;
  color: #b7cddd; text-decoration: none; font-size: 13.5px;
}
.z-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.z-nav a.active { background: var(--z-blue); color: #fff; font-weight: 600;
  box-shadow: 0 3px 10px rgba(13,110,158,.45); }
.z-nav i { font-size: 15px; width: 18px; text-align: center; }
.z-nav-soon { color: #59788e; cursor: not-allowed; font-size: 13px; }
.z-nav-sep { font-size: 10.5px; letter-spacing: 1.4px; color: #59788e;
  text-transform: uppercase; margin: 14px 12px 6px; }

.z-user { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18); }
.z-user-name { color: #fff; font-weight: 600; font-size: 13.5px; }
.z-user-role { color: #7fa9c4; font-size: 11.5px; margin-top: 1px; }

/* ── main ─────────────────────────────────────────────────── */
.z-main { margin-left: var(--z-side-w); min-height: 100vh;
  display: flex; flex-direction: column; }

.z-topbar {
  background: #fff; border-bottom: 1px solid var(--z-line);
  padding: 12px 22px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 50;
}
.z-topbar-title { font-size: 17px; font-weight: 700; color: var(--z-blue-d); }
.z-switch { display: flex; gap: 8px; }
.z-switch .form-select { min-width: 190px; font-size: 12.5px; }

.z-content { padding: 20px 22px; flex: 1; }
.z-footer { padding: 12px 22px; color: var(--z-muted); font-size: 11.5px;
  border-top: 1px solid var(--z-line); background: #fff; }

.z-flash { padding: 14px 22px 0; }

/* ── stat cards ───────────────────────────────────────────── */
.z-stats { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 16px; }
.z-stat { background: #fff; border: 1px solid var(--z-line); border-radius: var(--z-radius);
  padding: 16px; display: flex; align-items: center; gap: 14px;
  box-shadow: 0 1px 3px rgba(16,41,60,.05); }
.z-stat-icon { width: 46px; height: 46px; border-radius: 11px; display: grid;
  place-items: center; color: #fff; font-size: 21px; flex: 0 0 auto; }
.bg-blue  { background: linear-gradient(135deg,#0d6e9e,#3fa5d4); }
.bg-teal  { background: linear-gradient(135deg,#14a085,#4ecbb2); }
.bg-green { background: linear-gradient(135deg,#2f9e44,#63c97a); }
.bg-amber { background: linear-gradient(135deg,#f0932b,#f7bd63); }
.z-stat-num { font-size: 25px; font-weight: 700; color: var(--z-blue-d); line-height: 1.1; }
.z-stat-lbl { font-size: 12px; color: var(--z-muted); }

/* ── cards ────────────────────────────────────────────────── */
.z-card { background: #fff; border: 1px solid var(--z-line);
  border-radius: var(--z-radius); margin-bottom: 16px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(16,41,60,.05); }
.z-card-head { padding: 12px 16px; border-bottom: 1px solid var(--z-line);
  font-weight: 600; color: var(--z-blue-d); display: flex;
  align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.z-card-head i { color: var(--z-blue); margin-right: 4px; }
.z-card-body { padding: 16px; }
.z-badge { background: var(--z-blue); color: #fff; font-size: 11px;
  padding: 2px 8px; border-radius: 20px; font-weight: 600; margin-left: 6px; }

.z-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── tables ───────────────────────────────────────────────── */
.z-table thead th { background: #f7fafc; color: var(--z-blue-d); font-size: 12px;
  font-weight: 700; border-bottom: 2px solid var(--z-line); white-space: nowrap;
  padding: 9px 12px; }
.z-table td { padding: 8px 12px; vertical-align: middle;
  border-bottom: 1px solid #eef2f6; }
.z-table tbody tr:hover { background: #f7fbfd; }

.z-code { background: #e8f2f8; color: var(--z-blue); font-weight: 700;
  font-size: 11.5px; padding: 2px 7px; border-radius: 5px;
  font-family: Consolas, monospace; }
.z-code-alt { background: #eef0fb; color: #5b5fc7; }
.z-tag { background: #eaf6f2; color: #0f7a63; font-size: 11.5px;
  padding: 2px 8px; border-radius: 20px; }
.z-pill { font-size: 11px; padding: 2px 9px; border-radius: 20px;
  font-weight: 600; white-space: nowrap; }
.z-pill-active, .z-pill-create, .z-pill-seed { background: #e3f5ee; color: #0f7a63; }
.z-pill-planning, .z-pill-update { background: #e8f2f8; color: var(--z-blue); }
.z-pill-suspended, .z-pill-login { background: #fdf3e3; color: #a86500; }
.z-pill-completed, .z-pill-delete { background: #f0f2f5; color: #56687a; }
.z-pill-closed, .z-pill-login_failed, .z-pill-logout { background: #fdeaea; color: #b03333; }
.z-pill-role-admin { background: #fbe9f2; color: #a3186b; }
.z-pill-role-site_admin { background: #e8f2f8; color: var(--z-blue); }
.z-pill-role-supervisor { background: #fdf3e3; color: #a86500; }
.z-pill-role-user { background: #f0f2f5; color: #56687a; }

.z-empty { text-align: center; color: var(--z-muted); padding: 26px; font-size: 13px; }

/* ── avatars ──────────────────────────────────────────────── */
.z-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid #e3ebf1; }
.z-avatar-none { background: #dbe7f0; color: var(--z-blue); display: grid;
  place-items: center; font-weight: 700; font-size: 14px; }

/* ── site tiles ───────────────────────────────────────────── */
.z-site-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr));
  gap: 12px; }
.z-site-tile { display: block; border: 1px solid var(--z-line); border-radius: 9px;
  padding: 12px 14px; text-decoration: none; color: inherit; background: #fbfdff;
  transition: .15s; }
.z-site-tile:hover { border-color: var(--z-blue); box-shadow: 0 4px 14px rgba(13,110,158,.14);
  transform: translateY(-2px); }
.z-site-code { font-size: 11px; color: var(--z-blue); font-weight: 700;
  font-family: Consolas, monospace; }
.z-site-name { font-weight: 600; font-size: 13.5px; margin: 3px 0 7px;
  line-height: 1.35; }
.z-site-meta { font-size: 11.5px; color: var(--z-muted); display: flex;
  align-items: center; gap: 5px; margin-top: 4px; }

.z-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.z-chip { background: #f2f6f9; border: 1px solid var(--z-line);
  padding: 5px 12px; border-radius: 20px; font-size: 12px; color: var(--z-muted); }
.z-chip b { color: var(--z-blue-d); font-size: 14px; }

/* ── login ────────────────────────────────────────────────── */
.z-login-body { background: linear-gradient(135deg,#0b1e2c 0%,#0d6e9e 100%);
  min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.z-login-card { background: #fff; border-radius: 14px; padding: 32px 30px 22px;
  width: 100%; max-width: 400px; box-shadow: 0 22px 60px rgba(0,0,0,.34); }
.z-login-head { text-align: center; margin-bottom: 22px; }
.z-login-head i { font-size: 40px; color: var(--z-blue); }
.z-login-head h1 { font-size: 23px; margin: 8px 0 2px; color: var(--z-blue-d);
  font-weight: 700; }
.z-login-head h1 span { color: var(--z-blue); font-weight: 400; }
.z-login-head p { color: var(--z-muted); font-size: 12px; margin: 0; }
.z-login-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--z-line);
  font-size: 11px; color: var(--z-muted); text-align: center; }
.z-login-ver { text-align: center; font-size: 10.5px; color: #a9b8c4; margin-top: 6px; }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .z-stats { grid-template-columns: repeat(2, 1fr); }
  .z-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .z-sidebar { display: none; }
  .z-main { margin-left: 0; }
}

/* ══ PTW module (v1) ═══════════════════════════════════════════ */
.z-stats-7 { grid-template-columns: repeat(8, 1fr); }
.z-stat-link { text-decoration:none; color:inherit; padding:11px 13px; }
.z-stat-link:hover { border-color:#0d6e9e; }
.z-stat-on { border-color:#0d6e9e; background:#f2f9fd;
  box-shadow:0 0 0 2px rgba(13,110,158,.18); }

.z-tpl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:12px; }
.z-tpl-card { text-align:left; border:1px solid var(--z-line); border-radius:9px;
  padding:12px 14px; background:#fbfdff; cursor:pointer; transition:.15s; width:100%; }
.z-tpl-card:hover { border-color:var(--z-blue); box-shadow:0 4px 14px rgba(13,110,158,.14);
  transform:translateY(-2px); }
.z-tpl-cat { font-size:10.5px; color:#0f7a63; background:#eaf6f2; display:inline-block;
  padding:1px 8px; border-radius:20px; }
.z-tpl-name { font-weight:700; font-size:13.5px; margin:6px 0 2px; color:var(--z-blue-d); }
.z-tpl-code { font-size:10.5px; color:var(--z-muted); font-family:Consolas,monospace; }
.z-tpl-meta { font-size:11px; color:var(--z-muted); margin-top:7px; }
.z-tpl-summary { background:#f2f6f9; border-radius:6px; padding:7px 11px;
  font-size:12px; color:var(--z-muted); }

.z-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
.z-field.z-layout-full { grid-column:1 / -1; }
.z-field.z-layout-left { grid-column:1; }
.z-field.z-layout-right { grid-column:2; }
.z-card-locked { opacity:.72; }
.z-sec-no { display:inline-grid; place-items:center; width:21px; height:21px;
  border-radius:50%; background:var(--z-blue); color:#fff; font-size:11px;
  margin-right:6px; }
.z-sec-fill { font-size:11px; color:var(--z-muted); font-weight:400; margin-left:8px; }
.z-ftype { font-size:10px; color:#7b8fa1; background:#f0f4f8; padding:1px 7px;
  border-radius:20px; margin-left:6px; font-weight:400; }
.z-ftype-badge { font-size:10.5px; padding:2px 8px; border-radius:20px;
  background:#e8f2f8; color:var(--z-blue); white-space:nowrap; }
.ft-esign { background:#fbe9f2; color:#a3186b; }
.ft-image { background:#eaf6f2; color:#0f7a63; }
.ft-date  { background:#fdf3e3; color:#a86500; }
.ft-title_desc { background:#f0f2f5; color:#56687a; }
.z-td-block { background:#f7fafc; border-left:3px solid var(--z-blue);
  padding:8px 12px; border-radius:4px; }
.z-td-title { font-weight:700; color:var(--z-blue-d); }
.z-td-desc { font-size:12px; color:var(--z-muted); margin-top:2px; }
.z-radio-row { display:flex; flex-wrap:wrap; gap:8px; }
.z-radio { display:flex; align-items:center; gap:5px; font-size:13px;
  background:#f7fafc; border:1px solid var(--z-line); border-radius:20px;
  padding:4px 12px; cursor:pointer; }
.z-radio:hover { border-color:var(--z-blue); }
.z-readonly { background:#f7fafc; border:1px solid var(--z-line); border-radius:5px;
  padding:6px 10px; min-height:32px; font-size:13px; white-space:pre-wrap; }
.z-ptw-img { max-width:100%; max-height:190px; border-radius:6px; border:1px solid var(--z-line); }
.z-esign { background:#fbf7fc; border:1px dashed #d9c2e4; border-radius:6px; padding:8px 10px; }
.z-sig-done { display:flex; align-items:center; gap:8px; font-size:13px; }
.z-sig-done i { color:#14a085; }
.z-sticky-actions { position:sticky; bottom:0; background:#fff; border-top:1px solid var(--z-line);
  padding:12px 18px; display:flex; align-items:center; border-radius:0 0 10px 10px;
  box-shadow:0 -3px 12px rgba(16,41,60,.07); }
.z-meta-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px 18px; }
.z-meta-grid > div { border-bottom:1px dotted var(--z-line); padding-bottom:5px; }
.z-meta-grid span { display:block; font-size:11px; color:var(--z-muted); }
.z-meta-grid b { font-size:13px; }
.z-pill-draft { background:#f0f2f5; color:#56687a; }
.z-pill-pending { background:#fdf3e3; color:#a86500; }
.z-pill-approved { background:#e3f5ee; color:#0f7a63; }
.z-pill-valid { background:#d8f3e6; color:#0a6b52; font-weight:700; }
.z-pill-rejected { background:#fdeaea; color:#b03333; }
.z-pill-expired { background:#eceff2; color:#7b8fa1; }
.z-pill-cancelled { background:#f5ecec; color:#8a5a5a; }
.z-pill-create, .z-pill-submit, .z-pill-approve, .z-pill-sign, .z-pill-activate { background:#e8f2f8; color:var(--z-blue); }
.z-pill-reject, .z-pill-cancel { background:#fdeaea; color:#b03333; }
@media (max-width:1300px){ .z-stats-7 { grid-template-columns:repeat(4,1fr); } }
@media (max-width:780px){ .z-field-grid { grid-template-columns:1fr; }
  .z-field.z-layout-right { grid-column:1; } }

/* ── sticky-bar clearance ─────────────────────────────────────
   The topbar and the sticky action bar are both position:sticky.
   Without scroll-margin, scrollIntoView() (browser find, tab
   navigation, Playwright clicks) parks controls underneath them.
   v1.0.1 fix. */
button, a.btn, input, select, textarea, label, .z-field, .z-card-head {
  scroll-margin-top: 78px;
  scroll-margin-bottom: 96px;
}

/* ══ Device modules — locks + watches (v1) ═════════════════════ */
.z-nav-badge { background:#e05252; color:#fff; font-size:10px; font-weight:700;
  padding:1px 6px; border-radius:20px; margin-left:auto; }
.z-nav-badge + * { margin-left:0; }

/* alert bar */
.z-alertbar { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.z-alertbar-cell { border-radius:var(--z-radius); padding:13px 16px; text-decoration:none;
  color:#fff; display:block; }
.z-ab-danger { background:linear-gradient(135deg,#c0392b,#e05252); }
.z-ab-warning { background:linear-gradient(135deg,#d68000,#f0932b); }
.z-ab-total { background:linear-gradient(135deg,#0b3d5c,#0d6e9e); }
.z-ab-live { background:linear-gradient(135deg,#0f7a63,#14a085); }
.z-ab-on { outline:3px solid #0b3d5c; outline-offset:2px; }
.z-ab-num { font-size:29px; font-weight:700; line-height:1.05; }
.z-ab-lbl { font-size:11.5px; opacity:.93; margin-top:2px; }

/* worker monitoring grid */
.z-workergrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:11px; }
.z-wcard { display:block; border:1px solid var(--z-line); border-radius:9px; padding:11px 13px;
  text-decoration:none; color:inherit; background:#fbfdff; transition:.15s; }
.z-wcard:hover { border-color:var(--z-blue); box-shadow:0 4px 14px rgba(13,110,158,.15);
  transform:translateY(-2px); }
.z-wcard-alarm { border-color:#e05252; background:#fff7f7; }
.z-wcard-alarm .z-wcard-name::after { content:" ⚠"; }
.z-wcard-stale { opacity:.62; }
.z-wcard-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.z-wcard-name { font-weight:700; font-size:13.5px; color:var(--z-blue-d); }
.z-wcard-site { font-size:10.5px; color:var(--z-muted); margin:3px 0 8px; }
.z-wcard-vitals { display:grid; grid-template-columns:repeat(2,1fr); gap:5px; }
.z-vit { display:flex; align-items:baseline; gap:4px; background:#f2f6f9;
  border-radius:6px; padding:4px 8px; font-size:11px; }
.z-vit i { color:var(--z-blue); font-size:12px; }
.z-vit b { font-size:15px; color:var(--z-blue-d); }
.z-vit span { color:var(--z-muted); font-size:10px; }
.z-vit-bad { background:#fdeaea; }
.z-vit-bad i, .z-vit-bad b { color:#b03333; }
.z-wcard-foot { font-size:10.5px; margin-top:8px; padding-top:6px;
  border-top:1px solid #eef2f6; }
.z-wcard-gps { font-size:10px; color:var(--z-muted); font-family:Consolas,monospace; margin-top:3px; }

/* alarm feed */
.z-feed { max-height:620px; overflow-y:auto; }
.z-feed-item { display:flex; gap:10px; padding:9px 14px; border-bottom:1px solid #eef2f6;
  border-left:3px solid transparent; }
.z-feed-danger { border-left-color:#e05252; background:#fffafa; }
.z-feed-warning { border-left-color:#f0932b; background:#fffdf8; }
.z-feed-info { border-left-color:#0d6e9e; }
.z-feed-time { font-size:10.5px; color:var(--z-muted); font-family:Consolas,monospace;
  white-space:nowrap; }
.z-feed-body { font-size:12.5px; line-height:1.45; }

/* severity chips */
.z-sev { font-size:11px; padding:2px 9px; border-radius:20px; font-weight:600; white-space:nowrap; }
.z-sev-danger { background:#fdeaea; color:#b03333; }
.z-sev-warning { background:#fdf3e3; color:#a86500; }
.z-sev-info { background:#e8f2f8; color:var(--z-blue); }
.z-sev-muted { background:#f0f2f5; color:#56687a; }
.z-sev-dot { display:inline-block; width:9px; height:9px; border-radius:50%; }
.z-sev-dot-danger { background:#e05252; box-shadow:0 0 0 3px rgba(224,82,82,.18); }
.z-sev-dot-warning { background:#f0932b; }
.z-sev-dot-info { background:#0d6e9e; }
.z-sev-dot-muted { background:#98a8b6; }
.z-row-ack { opacity:.62; }

/* zone types */
.z-zone-danger { background:#fdeaea; color:#b03333; }
.z-zone-confined { background:#fdf3e3; color:#a86500; }
.z-zone-height { background:#e8f2f8; color:var(--z-blue); }
.z-zone-electric { background:#fbe9f2; color:#a3186b; }
.z-zone-normal { background:#f0f2f5; color:#56687a; }

.z-json { background:#0b1e2c; color:#a8e6cf; padding:12px 14px; border-radius:7px;
  font-size:11.5px; line-height:1.5; max-height:420px; overflow:auto;
  font-family:Consolas,"Courier New",monospace; white-space:pre-wrap; }
.z-stats-6 { grid-template-columns:repeat(6,1fr); }
.z-stat-unit { font-size:12px; color:var(--z-muted); font-weight:400; }
.z-stat-range { font-size:10px; color:#9aabb9; }
@media (max-width:1300px){ .z-alertbar{grid-template-columns:repeat(2,1fr);}
  .z-stats-6{grid-template-columns:repeat(3,1fr);} }
@media (max-width:780px){ .z-alertbar{grid-template-columns:1fr;} }