:root {
  --navy: #0b1725;
  --navy-2: #122336;
  --canvas: #f3f6f8;
  --paper: #ffffff;
  --line: #e4e9ed;
  --muted: #87919b;
  --text: #1c2833;
  --blue: #2e6ef2;
  --blue-soft: #e9f0ff;
  --lime: #b8e348;
  --orange: #ee9c47;
  --red: #ed6d63;
  --green: #39ad80;
  --purple: #8d75d8;
  --sans: "DM Sans", "Avenir Next", sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--canvas); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; display: flex; flex-direction: column; width: 248px; padding: 28px 16px 18px; color: #cbd5de; background: var(--navy); }
.brand-lockup { display: flex; align-items: center; gap: 11px; padding: 0 10px 28px; color: #fff; }
.brand-lockup strong { display: block; font-size: 16px; letter-spacing: -.02em; }
.brand-lockup small { display: block; margin-top: 3px; color: #75869a; font: 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.brand-mark { display: flex; align-items: end; gap: 3px; width: 27px; height: 24px; }
.brand-mark span { width: 6px; border-radius: 2px 2px 1px 1px; background: var(--lime); }
.brand-mark span:nth-child(1) { height: 12px; opacity: .6; }.brand-mark span:nth-child(2) { height: 21px; }.brand-mark span:nth-child(3) { height: 16px; opacity: .82; }
.workspace-switcher { display: flex; align-items: center; gap: 10px; padding: 10px; margin: 0 0 27px; border: 1px solid #26394c; border-radius: 7px; background: #122234; }
.workspace-avatar { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 5px; background: #d9eb89; color: #26371d; font-size: 12px; font-weight: 700; }
.workspace-copy { flex: 1; min-width: 0; }.workspace-copy small, .profile-chip small { display: block; color: #8291a0; font-size: 10px; }.workspace-copy strong { display: block; margin-top: 3px; color: #eef3f6; font-size: 11px; font-weight: 600; white-space: nowrap; }
.icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: #77838e; background: transparent; font-size: 15px; }.icon-btn:hover { color: var(--text); background: #edf1f4; }.sidebar .icon-btn { color: #7e8fa1; }.icon-btn.tiny { width: 18px; height: 18px; font-size: 14px; }.icon-btn.has-dot { position: relative; font-size: 20px; }.icon-btn.has-dot i { position: absolute; top: 6px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--paper); }
.nav-label { margin: 0 10px 10px; color: #6f8093; font: 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }.nav-label.second { margin-top: 28px; }.nav-groups { flex: 1; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 38px; padding: 0 11px; margin-bottom: 3px; border-radius: 6px; color: #aebbc7; background: transparent; text-align: left; font-size: 12px; transition: background .18s, color .18s, transform .18s; }.nav-item:hover { color: #fff; background: #172b40; transform: translateX(2px); }.nav-item.active { color: #f9fcff; background: #1d3852; box-shadow: inset 3px 0 var(--lime); }.nav-icon { display: grid; place-items: center; width: 20px; color: #8192a4; font-size: 18px; }.nav-item.active .nav-icon { color: var(--lime); }.nav-item kbd { margin-left: auto; color: #6f8295; font: 9px var(--mono); }.nav-item em { margin-left: auto; min-width: 19px; padding: 2px 5px; border-radius: 10px; color: #b8d4f3; background: #294967; font: normal 9px var(--mono); text-align: center; }.nav-item .alert-count { color: #ffbeb7; background: #643c43; }
.sidebar-bottom { padding-top: 12px; border-top: 1px solid #233547; }.profile-chip { display: flex; align-items: center; gap: 9px; padding: 14px 8px 0; }.profile-avatar, .top-avatar { display: grid; place-items: center; border-radius: 50%; color: #203625; background: #dbef92; font-size: 10px; font-weight: 700; }.profile-avatar { width: 30px; height: 30px; }.profile-chip strong { display: block; color: #f5f8fa; font-size: 11px; }.online-dot { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(57,173,128,.12); }
.main-content { width: calc(100% - 248px); min-height: 100vh; margin-left: 248px; }.topbar { display: flex; justify-content: space-between; align-items: center; height: 70px; padding: 0 42px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.88); }.breadcrumb { display: flex; align-items: center; gap: 9px; color: #a1aab2; font-size: 12px; }.breadcrumb b { color: #c6cdd2; font-weight: 400; }.breadcrumb strong { color: #344451; font-weight: 600; }.top-actions { display: flex; align-items: center; gap: 13px; }.search-box { display: flex; align-items: center; gap: 8px; width: 250px; height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: #f7f9fa; color: #92a0ab; }.search-box span { font-size: 21px; line-height: 1; transform: rotate(-20deg); }.search-box input { flex: 1; min-width: 0; border: 0; outline: none; color: var(--text); background: transparent; font-size: 11px; }.search-box input::placeholder { color: #a1abb3; }.search-box kbd { color: #aeb8bf; font: 9px var(--mono); }.help-btn { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #d7dee4; border-radius: 50%; color: #8c99a2; background: #fff; font-weight: 600; }.top-avatar { width: 30px; height: 30px; }
.page-wrap { max-width: 1570px; padding: 35px 42px 40px; margin: 0 auto; }.view-content[hidden] { display: none; }.page-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 28px; }.eyebrow, .section-kicker { color: #91a0aa; font: 10px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }.live-pulse { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--green); vertical-align: 1px; box-shadow: 0 0 0 3px rgba(57,173,128,.12); }.page-heading h1 { margin: 8px 0 5px; color: #182a39; font-size: 28px; letter-spacing: -.045em; line-height: 1.2; }.page-heading p { margin: 0; color: #81909a; font-size: 12px; }.heading-actions { display: flex; gap: 9px; }.outline-btn, .primary-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 5px; font-size: 11px; font-weight: 600; }.outline-btn { border: 1px solid #d6dfe5; color: #50606d; background: #fff; }.outline-btn:hover { border-color: #aebbc6; background: #f9fbfc; }.primary-btn { color: #1c2c20; background: var(--lime); box-shadow: 0 4px 10px rgba(184,227,72,.25); }.primary-btn:hover { background: #caed6a; transform: translateY(-1px); }
.subview-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .7fr); gap: 17px; }.subview-grid > .subview-hero, .subview-grid > .directory-panel, .subview-grid > .incident-hero, .subview-grid > .report-hero { grid-column: 1 / -1; }.subview-hero, .location-hero, .report-hero, .incident-hero, .directory-panel, .response-panel, .fence-list, .settings-panel { padding: 21px; }.subview-hero { display: flex; justify-content: space-between; align-items: center; min-height: 138px; background: linear-gradient(105deg, #132a3e 0%, #1d4051 100%); border-color: #1d4051; color: #fff; }.subview-hero h2, .subview-hero p { color: #fff; }.subview-hero p, .location-hero p, .report-hero p, .incident-hero p { margin: 7px 0 0; color: #93a6b5; font-size: 11px; }.subview-hero p { color: #afc0cb; }.hero-stat { min-width: 120px; padding: 13px 17px; border-left: 1px solid rgba(255,255,255,.2); }.hero-stat strong { display: block; color: var(--lime); font: 700 27px var(--mono); }.hero-stat span { color: #b1c0cb; font-size: 10px; }.subview-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; grid-column: 1 / -1; }.subview-stat-grid.four { grid-template-columns: repeat(4, 1fr); }.mini-stat { padding: 17px; }.mini-stat span { display: block; color: #87939c; font-size: 10px; }.mini-stat strong { display: block; margin: 10px 0 7px; color: #233744; font: 700 23px var(--mono); }.mini-stat small { color: #9da8af; font-size: 9px; }.green-text { color: var(--green) !important; }.orange-text { color: var(--orange) !important; }.red-text { color: var(--red) !important; }.directory-panel { grid-column: 1 / -1; }.directory-panel table { min-width: 760px; }.table-avatar { display: grid; width: 25px; height: 25px; font-size: 8px; }.location-hero .panel-header { align-items: center; }.location-map-preview { position: relative; height: 385px; overflow: hidden; margin-top: 19px; border-radius: 6px; background-color: #4f685a; background-image: linear-gradient(105deg, rgba(20,43,44,.28), rgba(223,208,158,.18)), url("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/16/25837/47170"); background-position: center; background-size: cover; }.preview-road { position: absolute; height: 9px; border-radius: 99px; background: rgba(226,220,180,.65); transform-origin: left center; }.preview-road.one { width: 80%; top: 44%; left: -5%; transform: rotate(-15deg); }.preview-road.two { width: 58%; top: 82%; left: 20%; transform: rotate(-37deg); }.preview-zone { position: absolute; padding: 7px 9px; border: 1px solid rgba(225,247,173,.65); color: rgba(250,255,221,.9); background: rgba(12,39,41,.42); font: 10px var(--mono); }.preview-zone.z1 { top: 29%; left: 22%; }.preview-zone.z2 { top: 56%; left: 63%; }.preview-zone.z3 { top: 13%; left: 55%; }.preview-live { position: absolute; padding: 7px 10px; border: 1px solid rgba(255,255,255,.45); border-radius: 4px; color: #fff; background: rgba(10,34,39,.66); font: 10px var(--mono); }.preview-live.live-a { left: 12px; bottom: 13px; }.preview-live.live-b { right: 12px; bottom: 13px; }.fence-list .panel-header { margin-bottom: 12px; }.fence-row { display: flex; align-items: center; gap: 9px; min-height: 62px; border-bottom: 1px solid #edf0f2; }.fence-row:last-child { border-bottom: 0; }.fence-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 5px; color: var(--blue); background: var(--blue-soft); }.fence-row > span:nth-child(2) { flex: 1; }.fence-row strong, .fence-row small { display: block; }.fence-row strong { color: #465762; font-size: 10px; }.fence-row small { margin-top: 3px; color: #9ca7ad; font-size: 9px; }.report-hero, .incident-hero { min-height: 405px; }.report-chart { display: flex; height: 280px; margin-top: 30px; border-bottom: 1px solid #e7edf0; background: repeating-linear-gradient(to bottom, transparent 0, transparent 54px, #eef2f4 55px); }.chart-axis { display: flex; flex-direction: column; justify-content: space-between; width: 44px; padding-bottom: 6px; color: #a0aab1; font: 9px var(--mono); }.chart-bars { display: flex; align-items: end; justify-content: space-around; flex: 1; gap: 16px; padding: 0 20px; }.chart-bars i { position: relative; width: 34px; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(to top, #2e6ef2, #8db0ff); }.chart-bars i:nth-child(2n) { background: linear-gradient(to top, #b8e348, #dff89a); }.chart-bars b { position: absolute; bottom: -24px; left: 50%; color: #94a0a8; font: 9px var(--mono); font-style: normal; transform: translateX(-50%); white-space: nowrap; }.report-summary { padding: 21px; }.report-summary h2, .response-panel h2 { margin: 5px 0 19px; }.summary-line { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid #edf0f2; color: #89959d; font-size: 10px; }.summary-line strong { color: #445661; font: 700 12px var(--mono); }.summary-line em { margin-left: 4px; color: var(--green); font: normal 9px var(--mono); }.report-note { padding: 12px; margin-top: 18px; border-left: 3px solid var(--lime); color: #83909a; background: #f7f9fa; font-size: 10px; line-height: 1.6; }.incident-tabs { display: flex; gap: 4px; }.incident-tabs button { padding: 6px 8px; border-radius: 4px; color: #9aa6ad; background: transparent; font-size: 10px; }.incident-tabs button.active, .incident-tabs button:hover { color: var(--blue); background: var(--blue-soft); }.incident-list { margin-top: 18px; }.incident-row { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 74px; padding: 10px 3px; border-bottom: 1px solid #edf0f2; background: transparent; text-align: left; }.incident-row:hover { background: #fafcfd; }.incident-copy { flex: 1; }.incident-copy strong, .incident-copy small { display: block; }.incident-copy strong { color: #435562; font-size: 11px; }.incident-copy small { margin-top: 4px; color: #99a5ad; font-size: 9px; }.incident-priority { padding: 4px 6px; border-radius: 3px; color: #b9782f; background: #fff2e1; font-size: 9px; }.incident-row.high .incident-priority { color: #bf574e; background: #ffebe8; }.response-ring { display: grid; place-items: center; width: 145px; height: 145px; margin: 27px auto 25px; border: 13px solid #e6f7ef; border-top-color: var(--green); border-right-color: var(--green); border-radius: 50%; }.response-ring strong { color: #2f9c73; font: 700 28px var(--mono); }.response-ring strong small { font-size: 15px; }.response-ring span { margin-top: -44px; color: #90a099; font-size: 9px; }.response-kpi { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid #edf0f2; color: #9aa5ad; font-size: 10px; }.response-kpi strong { color: #4b5d67; font: 700 12px var(--mono); }.settings-grid { grid-template-columns: 1fr 1fr; }.settings-panel label:not(.toggle-row) { display: block; margin-top: 18px; color: #88959d; font-size: 10px; }.settings-panel label input, .settings-panel label select { display: block; width: 100%; height: 36px; padding: 0 10px; margin-top: 7px; border: 1px solid #dfe6ea; border-radius: 5px; outline: 0; color: #425560; background: #fbfcfd; font-size: 11px; }.settings-panel > .primary-btn { margin-top: 22px; }.saved-state { color: var(--green); font: 9px var(--mono); }.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 17px 0; border-bottom: 1px solid #edf0f2; }.toggle-row strong, .toggle-row small { display: block; }.toggle-row strong { color: #485963; font-size: 11px; }.toggle-row small { margin-top: 4px; color: #9aa5ac; font-size: 9px; }.toggle-row input { position: relative; appearance: none; width: 34px; height: 19px; border-radius: 20px; background: #d9e0e4; cursor: pointer; }.toggle-row input::after { position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; content: ""; background: #fff; transition: .2s; }.toggle-row input:checked { background: var(--blue); }.toggle-row input:checked::after { transform: translateX(15px); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 17px; }.metric-card { position: relative; min-height: 153px; overflow: hidden; padding: 17px 18px 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }.metric-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: var(--blue); }.metric-card.accent-lime::before { background: var(--lime); }.metric-card.accent-orange::before { background: var(--orange); }.metric-card.accent-red::before { background: var(--red); }.metric-top, .metric-meta, .metric-foot { display: flex; align-items: center; justify-content: space-between; }.metric-label { color: #81909b; font-size: 11px; font-weight: 600; }.metric-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; color: var(--blue); background: var(--blue-soft); font-size: 15px; }.accent-lime .metric-icon { color: #6c8b15; background: #f1f9d9; }.accent-orange .metric-icon { color: #bd7025; background: #fff2e2; }.accent-red .metric-icon { color: #c1534b; background: #ffebe9; }.metric-value { display: block; margin: 13px 0 7px; color: #172b3a; font: 700 29px/1 var(--mono); letter-spacing: -.06em; }.metric-value small { margin-left: 2px; font-size: 16px; letter-spacing: 0; }.metric-meta { justify-content: flex-start; gap: 8px; color: #9aa5ad; font-size: 10px; }.trend { font: 700 10px var(--mono); }.trend.up { color: var(--green); }.trend.down { color: var(--orange); }.trend.neutral { color: #92a0aa; }.metric-spark { display: flex; align-items: end; gap: 4px; width: 104px; height: 28px; margin-top: 7px; }.metric-spark i { flex: 1; height: var(--h); min-height: 4px; border-radius: 2px 2px 0 0; background: #c9dcff; }.metric-spark.blue i:last-child { background: var(--blue); }.metric-spark.orange i { background: #fbd9b3; }.metric-spark.orange i:nth-child(6) { background: var(--orange); }.metric-progress { height: 6px; margin-top: 18px; border-radius: 10px; background: #eef2e5; }.metric-progress span { display: block; height: 100%; border-radius: inherit; background: var(--lime); }.progress-caption { display: block; margin-top: 5px; color: #99a59e; font-size: 9px; }.metric-foot { justify-content: flex-start; gap: 5px; margin-top: 21px; color: #88959e; font-size: 10px; }.severity-dot { width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; }.severity-dot.high { background: var(--red); }.severity-dot.medium { background: var(--orange); }
.main-grid { display: grid; grid-template-columns: minmax(0, 1.95fr) minmax(300px, .95fr); gap: 17px; margin-bottom: 17px; }.panel { border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }.map-panel { min-height: 435px; padding: 18px; }.alerts-panel { min-height: 435px; padding: 18px; }.panel-header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.panel-header h2 { margin: 5px 0 0; color: #1c2b38; font-size: 16px; letter-spacing: -.02em; }.panel-header h2 sup { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-left: 5px; border-radius: 50%; color: #bd4c44; background: #ffebe8; font: 700 10px var(--mono); vertical-align: 2px; }.panel-actions { display: flex; align-items: center; gap: 2px; }.map-filter { padding: 5px 8px; border-radius: 4px; color: #96a2aa; background: transparent; font-size: 10px; }.map-filter.active, .map-filter:hover { color: var(--blue); background: var(--blue-soft); }.map-toolbar { display: flex; justify-content: space-between; margin: 14px 0 8px; color: #9aa6ae; font: 9px var(--mono); }.map-status i, .online-label i, .offline-label i, .footer-online { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--green); }.satellite-map { position: relative; height: 334px; overflow: hidden; border-radius: 6px; isolation: isolate; background-color: #4f685a; background-image: linear-gradient(105deg, rgba(20,43,44,.28), rgba(223,208,158,.18)), url("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/16/25837/47170"); background-position: center; background-size: cover; }.satellite-map::after { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(90deg, rgba(9,35,37,.25), transparent 45%, rgba(38,54,27,.11)); pointer-events: none; }.map-grid { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px); background-size: 60px 60px; }.map-routes { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }.map-routes path { fill: none; stroke: rgba(197,237,110,.68); stroke-width: .38; stroke-dasharray: 1.2 1.1; vector-effect: non-scaling-stroke; animation: route-flow 12s linear infinite; }.map-routes path:nth-child(2) { stroke: rgba(120,179,255,.68); animation-duration: 15s; }.map-routes path:nth-child(3) { stroke: rgba(255,184,101,.68); animation-duration: 9s; }.map-road { position: absolute; height: 9px; border-radius: 99px; background: rgba(226,220,180,.62); box-shadow: 0 0 0 2px rgba(70,91,72,.32); transform-origin: left center; }.road-a { width: 89%; top: 50%; left: -5%; transform: rotate(-14deg); }.road-b { width: 70%; top: 17%; left: 33%; transform: rotate(65deg); }.road-c { width: 50%; top: 82%; left: 25%; transform: rotate(-42deg); }.map-water { position: absolute; width: 34%; height: 39%; right: -4%; top: -8%; border-radius: 49% 40% 55% 20%; background: rgba(31,101,115,.56); transform: rotate(-13deg); }.map-zone { position: absolute; display: flex; align-items: start; justify-content: center; border: 1px solid rgba(225,247,173,.55); background: rgba(134,170,91,.18); color: rgba(250,255,221,.88); font: 9px var(--mono); letter-spacing: .02em; }.map-zone span { margin-top: 8px; padding: 3px 5px; border-radius: 3px; background: rgba(12,39,41,.42); }.zone-a { width: 27%; height: 33%; top: 28%; left: 21%; }.zone-b { width: 23%; height: 28%; top: 53%; left: 61%; }.zone-c { width: 19%; height: 23%; top: 11%; left: 53%; }.map-pin { position: absolute; z-index: 3; display: flex; align-items: center; gap: 4px; padding: 3px 5px 3px 3px; border: 1px solid rgba(255,255,255,.64); border-radius: 14px; color: #183041; background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(5,28,34,.3); font-size: 9px; transform: translate(-50%, -50%); transition: transform .2s; will-change: left, top; }.map-pin:hover { transform: translate(-50%, -50%) scale(1.06); }.pin-avatar, .pin-device { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--blue); font: 700 8px var(--mono); }.pin-avatar.orange { background: var(--orange); }.pin-avatar.red { background: var(--red); }.pin-device { border-radius: 5px; color: #25331c; background: var(--lime); }.map-pin.people::before { position: absolute; left: 8px; top: 23px; width: 5px; height: 5px; border-radius: 50%; content: ""; background: currentColor; box-shadow: 0 0 0 5px rgba(255,255,255,.18); opacity: .75; animation: walker-pulse 1.5s ease-in-out infinite; }.map-pin.alert { border-color: #ffafa8; }.map-pin.alert::after { position: absolute; inset: -5px; border: 1px solid rgba(237,109,99,.65); border-radius: 16px; content: ""; animation: ping 1.8s ease-out infinite; }.pin-1 { top: 43%; left: 39%; }.pin-2 { top: 65%; left: 72%; }.pin-3 { top: 28%; left: 65%; }.pin-4 { top: 68%; left: 29%; }.map-legend { position: absolute; z-index: 4; bottom: 12px; left: 13px; display: flex; gap: 11px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; color: rgba(255,255,255,.92); background: rgba(14,37,41,.62); backdrop-filter: blur(8px); font: 9px var(--mono); }.legend-dot { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; }.legend-dot.blue { background: #72a4ff; }.legend-dot.orange { background: #ffc06e; }.legend-dot.red { background: #ff847c; }.map-controls { position: absolute; z-index: 4; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 3px; }.map-controls button { display: grid; place-items: center; width: 24px; height: 24px; color: #4c626b; background: rgba(255,255,255,.88); font-size: 14px; }.map-controls button:first-child { border-radius: 4px 4px 0 0; }.map-controls button:last-child { border-radius: 0 0 4px 4px; font-size: 16px; }
.text-btn { padding: 4px 0; color: var(--blue); background: transparent; font-size: 10px; }.text-btn:hover { color: #1955ce; }.text-btn span { margin-left: 3px; font-size: 14px; }.alert-list { margin-top: 18px; }.alert-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 67px; padding: 10px 4px; border-bottom: 1px solid #edf0f2; background: transparent; text-align: left; }.alert-item:hover { background: #fafcfd; }.alert-mark { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 6px; font: 700 13px var(--mono); }.high .alert-mark { color: #c3544b; background: #ffebe8; }.medium .alert-mark { color: #bd792d; background: #fff1df; }.alert-copy { flex: 1; }.alert-copy strong { display: block; color: #364653; font-size: 11px; }.alert-copy small { display: block; margin-top: 4px; color: #96a1a9; font-size: 9px; }.alert-arrow { color: #a9b3ba; font-size: 15px; }.alert-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 18px; padding-top: 15px; border-top: 1px solid #edf0f2; }.alert-summary div { display: flex; flex-direction: column; gap: 4px; }.alert-summary strong { color: #9aa6ae; font-size: 9px; font-weight: 500; }.alert-summary span { color: #475863; font: 700 13px var(--mono); }.alert-summary span.green { color: var(--green); }
.subview-grid > * { min-width: 0; }.directory-panel { overflow: hidden; }.panel.subview-hero { background: linear-gradient(105deg, #132a3e 0%, #1d4051 100%); border-color: #1d4051; }
.lower-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .95fr); gap: 17px; margin-bottom: 17px; }.people-panel, .activity-panel, .fleet-panel { padding: 18px; }.people-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 17px; }.person-card { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid #e8edf0; border-radius: 6px; background: #fbfcfd; text-align: left; }.person-card:hover { border-color: #bfd0ea; background: #f8fbff; }.person-avatar { display: grid; place-items: center; flex: 0 0 31px; width: 31px; height: 31px; border-radius: 50%; color: #fff; font: 700 9px var(--mono); }.p-blue { background: #5c86d5; }.p-yellow { background: #dca858; }.p-purple { background: #9a80d5; }.p-red { background: #dc7770; }.person-info { flex: 1; min-width: 0; }.person-info strong { display: block; color: #3b4c59; font-size: 11px; }.person-info small { display: block; overflow: hidden; margin-top: 3px; color: #9ba6ad; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.status-chip { padding: 3px 6px; border-radius: 3px; font: 700 8px var(--mono); }.status-chip.safe { color: #338c67; background: #e6f7ef; }.status-chip.away { color: #8d71c2; background: #f0ecff; }.status-chip.alert { color: #c1534b; background: #ffebe8; }.activity-list { margin-top: 12px; }.activity-row { display: flex; align-items: center; gap: 9px; min-height: 50px; border-bottom: 1px solid #edf0f2; }.activity-row:last-child { border-bottom: 0; }.activity-icon { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 5px; font-size: 13px; }.activity-icon.blue { color: var(--blue); background: var(--blue-soft); }.activity-icon.green { color: var(--green); background: #e7f8f0; }.activity-icon.orange { color: #bd792d; background: #fff1df; }.activity-row strong { display: block; color: #4b5a65; font-size: 10px; }.activity-row small { display: block; margin-top: 3px; color: #9ca7ae; font-size: 9px; }
.fleet-panel { margin-bottom: 16px; }.table-tools { display: flex; align-items: center; gap: 15px; }.filter-select { padding: 5px 8px; border: 1px solid #e1e7eb; border-radius: 4px; color: #6f7d88; background: #fff; font-size: 10px; }.filter-select span { margin-left: 12px; color: #9ba8af; }.table-wrap { overflow-x: auto; margin-top: 14px; }table { width: 100%; border-collapse: collapse; min-width: 680px; }th { padding: 8px 9px; color: #9aa6ae; border-bottom: 1px solid #e8edf0; font: 9px var(--mono); text-align: left; text-transform: uppercase; }td { padding: 10px 9px; color: #71808a; border-bottom: 1px solid #eef1f3; font-size: 10px; }tbody tr:last-child td { border-bottom: 0; }tbody tr:hover td { background: #fafcfd; }.device-name { display: flex; align-items: center; gap: 8px; }.device-name strong { display: block; color: #3a4b57; font: 700 10px var(--mono); }.device-name small { display: block; margin-top: 2px; color: #a2acb3; font-size: 9px; }.device-glyph { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 5px; font-size: 14px; font-style: normal; }.device-glyph.gateway { color: #607cae; background: #e9f0ff; }.device-glyph.tag { color: #ba7b34; background: #fff2e1; }.online-label, .offline-label { font: 10px var(--mono); }.online-label { color: var(--green); }.offline-label { color: #9ba4aa; }.offline-label i { background: #a9b2b7; }.battery { display: inline-block; width: 46px; height: 5px; margin-right: 5px; overflow: hidden; vertical-align: middle; border-radius: 5px; background: #e8edf0; }.battery i { display: block; height: 100%; border-radius: inherit; background: var(--green); }.battery.low i { background: var(--orange); }.row-more { color: #8a98a1; background: transparent; font-size: 16px; }.page-footer { display: flex; justify-content: space-between; color: #a0aab1; font-size: 9px; }.footer-online { margin-left: 4px; background: var(--green); }
.toast { position: fixed; right: 28px; bottom: 24px; z-index: 20; padding: 10px 14px; border-radius: 5px; color: #fff; background: #243c50; box-shadow: 0 8px 25px rgba(11,23,37,.2); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .25s; }.toast.show { opacity: 1; transform: translateY(0); }
.person-card.detail-trigger { position: relative; cursor: pointer; }.person-card.detail-trigger .card-arrow { margin-left: auto; color: #9eabb3; font-size: 15px; transition: transform .2s; }.person-card.detail-trigger:hover .card-arrow { color: var(--blue); transform: translate(2px, -2px); }.directory-cards { grid-column: 1 / -1; margin: 0; }.detail-backdrop { position: fixed; inset: 0; z-index: 29; background: rgba(8,22,34,.34); backdrop-filter: blur(2px); }.detail-drawer { position: fixed; inset: 0 0 0 auto; z-index: 30; display: flex; flex-direction: column; width: min(430px, 100vw); overflow-y: auto; border-left: 1px solid #dfe6ea; background: #fff; box-shadow: -14px 0 40px rgba(11,23,37,.16); transform: translateX(100%); transition: transform .22s ease; }.detail-drawer.open { transform: translateX(0); }.detail-head { display: flex; align-items: start; justify-content: space-between; padding: 25px 24px 20px; border-bottom: 1px solid #edf0f2; }.detail-head h2 { margin: 6px 0 0; color: #1c2d3a; font-size: 21px; letter-spacing: -.03em; }.detail-body { padding: 21px 24px 32px; }.detail-profile { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid #e7edf0; border-radius: 7px; background: #fbfcfd; }.detail-profile > div { flex: 1; min-width: 0; }.detail-profile h3 { margin: 0; color: #324752; font-size: 15px; }.detail-profile p { overflow: hidden; margin: 5px 0 0; color: #91a0a8; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.detail-avatar, .detail-device-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; color: #fff; font: 700 12px var(--mono); }.detail-device-icon { border-radius: 9px; color: #607cae; background: #e9f0ff; font-size: 20px; }.detail-device-icon.tag { color: #ba7b34; background: #fff2e1; }.detail-actions { display: flex; gap: 8px; margin: 15px 0 21px; }.detail-actions button { flex: 1; justify-content: center; }.detail-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #edf0f2; border-left: 1px solid #edf0f2; }.detail-metrics > div { min-height: 74px; padding: 12px; border-right: 1px solid #edf0f2; border-bottom: 1px solid #edf0f2; }.detail-metrics span, .detail-metrics strong { display: block; }.detail-metrics span { color: #99a5ad; font-size: 9px; }.detail-metrics strong { overflow: hidden; margin-top: 7px; color: #445761; font: 700 11px var(--mono); text-overflow: ellipsis; white-space: nowrap; }.detail-section { padding-top: 24px; }.detail-timeline { margin-top: 11px; padding-left: 12px; border-left: 1px solid #dfe7ea; }.detail-timeline p { position: relative; margin: 0; padding: 0 0 17px 14px; }.detail-timeline i { position: absolute; left: -16px; top: 2px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px currentColor; background: currentColor; }.detail-timeline i.green { color: var(--green); }.detail-timeline i.blue { color: var(--blue); }.detail-timeline i.gray { color: #aab5bb; }.detail-timeline strong, .detail-timeline small { display: block; }.detail-timeline strong { color: #50616b; font-size: 10px; }.detail-timeline small { margin-top: 4px; color: #9ba6ad; font-size: 9px; }.health-track { height: 7px; margin-top: 13px; overflow: hidden; border-radius: 7px; background: #e9eef0; }.health-track i { display: block; height: 100%; border-radius: inherit; background: var(--green); }.detail-note { margin: 12px 0 0; color: #8e9aa2; font-size: 10px; line-height: 1.6; }.incident-detail-banner { display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 6px; }.incident-detail-banner.high { background: #ffebe8; }.incident-detail-banner.medium { background: #fff2e1; }.incident-detail-banner strong, .incident-detail-banner small { display: block; }.incident-detail-banner strong { color: #bb554c; font-size: 11px; }.incident-detail-banner.medium strong { color: #bb792e; }.incident-detail-banner small { margin-top: 3px; color: #9b8b82; font-size: 9px; }.incident-profile { margin-top: 13px; }.check-row { display: flex; align-items: center; gap: 9px; padding: 12px 0; border-bottom: 1px solid #edf0f2; color: #56666f; font-size: 10px; }.check-row i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--blue); background: var(--blue-soft); font: 700 9px var(--mono); font-style: normal; }.check-row span { flex: 1; }.check-row b { color: #a0abb1; font: 9px var(--mono); font-weight: 400; }
@keyframes ping { 0% { opacity: .8; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.45); } }
body.drawer-open { overflow: hidden; }
.person-photo { object-fit: cover; border: 2px solid #fff; background: #eaf0f3; box-shadow: 0 0 0 1px #dce5e9; }.detail-photo { background-position: center; background-size: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px #dce5e9; }.location-focus-marker { position: absolute; z-index: 4; display: flex; align-items: center; gap: 7px; padding: 4px 9px 4px 4px; border: 1px solid rgba(255,255,255,.8); border-radius: 26px; color: #253c49; background: rgba(255,255,255,.94); box-shadow: 0 8px 20px rgba(8,31,36,.3); transform: translate(-50%, -50%); animation: focus-arrive .35s ease-out; }.location-focus-marker::after { position: absolute; inset: -8px; border: 2px solid var(--lime); border-radius: 30px; content: ""; animation: focus-pulse 2s ease-out infinite; }.location-focus-photo { position: relative; z-index: 1; width: 34px; height: 34px; object-fit: cover; border: 2px solid #fff; border-radius: 50%; }.location-device-dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: #304118; background: var(--lime); font-size: 18px; }.location-focus-marker span { text-align: left; }.location-focus-marker strong, .location-focus-marker small { display: block; white-space: nowrap; }.location-focus-marker strong { font-size: 10px; }.location-focus-marker small { margin-top: 3px; color: #8d9aa2; font-size: 8px; }.location-data-note { display: flex; align-items: center; gap: 14px; padding: 13px 15px; margin-top: 10px; border: 1px solid #e3e9ec; border-left: 3px solid var(--orange); border-radius: 5px; background: #fff; }.location-data-note > div { flex: 1; }.location-data-note strong { color: #425661; font-size: 11px; }.location-data-note p { margin: 4px 0 0; color: #8f9ba3; font-size: 9px; line-height: 1.5; }.location-data-note code { color: #5c7380; font-family: var(--mono); }.message-composer { padding: 13px; margin: -8px 0 19px; border: 1px solid #dfe7ea; border-radius: 6px; background: #f8fafb; }.message-composer label { display: block; margin-bottom: 7px; color: #596c77; font-size: 10px; font-weight: 600; }.message-composer textarea { width: 100%; resize: vertical; padding: 9px; border: 1px solid #dce4e8; border-radius: 5px; outline: none; color: #40535e; background: #fff; font: 10px/1.5 var(--sans); }.message-composer textarea:focus { border-color: var(--blue); }.message-composer > div { display: flex; justify-content: flex-end; gap: 7px; margin-top: 8px; }.message-composer button { flex: 0 0 auto; }
@keyframes focus-arrive { from { opacity: 0; transform: translate(-50%, -42%) scale(.8); } }
@keyframes focus-pulse { 0% { opacity: .8; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes route-flow { to { stroke-dashoffset: -24; } }
@keyframes walker-pulse { 50% { opacity: .25; transform: scale(.6); } }
@media (max-width: 1180px) { .page-wrap { padding-right: 26px; padding-left: 26px; }.topbar { padding: 0 26px; }.kpi-grid { grid-template-columns: repeat(2, 1fr); }.main-grid, .lower-grid, .subview-grid { grid-template-columns: 1fr; }.subview-grid > .subview-hero, .subview-grid > .directory-panel, .subview-grid > .incident-hero, .subview-grid > .report-hero { grid-column: auto; }.subview-stat-grid { grid-column: auto; }.alerts-panel { min-height: 0; }.alert-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.alert-item { border: 1px solid #edf0f2; padding: 10px; border-radius: 5px; }.alert-summary { margin-top: 14px; } }
@media (max-width: 760px) { .sidebar { width: 70px; padding: 20px 8px 12px; }.brand-lockup { justify-content: center; padding: 0 0 24px; }.brand-lockup > div:last-child, .workspace-copy, .workspace-switcher .icon-btn, .nav-item span:not(.nav-icon), .nav-item em, .nav-item kbd, .profile-chip > div:last-of-type, .profile-chip .online-dot, .nav-label { display: none; }.workspace-switcher { justify-content: center; padding: 9px 5px; margin-bottom: 22px; }.nav-item { justify-content: center; padding: 0; }.nav-icon { font-size: 20px; }.profile-chip { justify-content: center; padding-top: 14px; }.main-content { width: calc(100% - 70px); margin-left: 70px; }.topbar { height: 60px; padding: 0 16px; }.search-box { width: 170px; }.search-box kbd, .help-btn { display: none; }.page-wrap { padding: 24px 16px 30px; }.page-heading { align-items: start; flex-direction: column; gap: 17px; }.heading-actions { width: 100%; }.heading-actions button { flex: 1; justify-content: center; }.page-heading h1 { font-size: 24px; }.kpi-grid { gap: 9px; }.metric-card { min-height: 142px; padding: 14px; }.metric-value { font-size: 23px; }.main-grid, .lower-grid, .subview-grid { gap: 10px; }.map-panel, .alerts-panel, .people-panel, .activity-panel, .fleet-panel, .subview-hero, .location-hero, .report-hero, .incident-hero, .directory-panel, .response-panel, .fence-list, .settings-panel { padding: 14px; }.subview-stat-grid, .subview-stat-grid.four { grid-template-columns: 1fr 1fr; gap: 8px; }.subview-hero { min-height: 120px; }.panel-actions .map-filter:nth-child(2), .panel-actions .map-filter:nth-child(3) { display: none; }.satellite-map, .location-map-preview { height: 280px; }.map-legend { gap: 6px; font-size: 8px; }.alert-list { display: block; }.alert-item { border-bottom: 1px solid #edf0f2; border-radius: 0; }.people-grid { grid-template-columns: 1fr; }.table-tools .text-btn { display: none; }.page-footer { gap: 10px; flex-direction: column; }.chart-bars { gap: 7px; padding: 0 5px; }.chart-bars i { width: 20px; }.settings-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .panel.subview-hero { flex-direction: column; align-items: flex-start; gap: 16px; }.hero-stat { width: 100%; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.2); border-left: 0; }.directory-panel .table-wrap { width: 100%; overflow-x: auto; } }
@media (max-width: 760px) { .location-data-note { align-items: flex-start; flex-wrap: wrap; }.location-data-note .section-kicker { width: 100%; }.location-focus-marker span:last-child { display: none; } }
@media (max-width: 430px) { .breadcrumb span, .breadcrumb b { display: none; }.search-box { width: 125px; }.kpi-grid { grid-template-columns: 1fr 1fr; }.metric-card { min-height: 140px; }.metric-meta { display: block; }.metric-meta span:last-child { display: block; margin-top: 3px; }.metric-spark { width: 82px; }.map-pin b { display: none; }.map-legend { left: 7px; right: 7px; justify-content: space-between; }.map-controls { right: 7px; bottom: 42px; }.map-legend { bottom: 7px; } }

/* Live-source chart strip mirrors the charts exposed by lab.tomist.online. */
.insight-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(280px, .9fr); gap: 17px; margin-bottom: 17px; }
.insight-panel { min-width: 0; min-height: 250px; padding: 18px; }
.chart-badge { padding: 4px 6px; border-radius: 4px; color: #338c67; background: #e6f7ef; font: 700 8px var(--mono); }
.chart-badge.neutral { color: #58718f; background: #e9f0ff; }.chart-badge.warning { color: #bd7025; background: #fff2e2; }
.insight-bar-chart { position: relative; display: flex; height: 145px; padding: 18px 0 20px 29px; margin-top: 20px; border-bottom: 1px solid #e7edf0; background: repeating-linear-gradient(to bottom, transparent 0, transparent 40px, #eef2f4 41px); }
.insight-bars { display: flex; align-items: end; justify-content: space-around; flex: 1; gap: 3px; min-width: 0; }
.insight-bars i { position: relative; flex: 1; max-width: 22px; height: var(--h); min-height: 2px; border-radius: 3px 3px 0 0; background: #2e6ef2; }
.insight-bars i:nth-child(2n) { background: #b8e348; }.rssi-bars i { background: #2e6ef2; }.rssi-bars i:nth-child(2n) { background: #77a2ec; }
.insight-bars b { position: absolute; top: -15px; left: 50%; color: #8b969f; font: 8px var(--mono); font-style: normal; transform: translateX(-50%); white-space: nowrap; }
.rssi-bars i small { position: absolute; bottom: -18px; left: 50%; color: #8b969f; font: 8px var(--mono); transform: translateX(-50%); white-space: nowrap; }
.insight-axis { position: absolute; inset: 15px auto 17px 0; display: flex; flex-direction: column; justify-content: space-between; color: #a0aab1; font: 8px var(--mono); }
.chart-caption { margin: 10px 0 0; color: #9aa5ad; font-size: 9px; }
.battery-chart { display: flex; align-items: center; gap: 18px; min-height: 145px; margin-top: 20px; }
.battery-donut { position: relative; display: grid; place-items: center; flex: 0 0 118px; width: 118px; height: 118px; border-radius: 50%; /* Neutral until live.js writes the real proportions as an inline style. */ background: conic-gradient(#e3e8ee 0 100%); }
.battery-donut::before { width: 76px; height: 76px; border-radius: 50%; content: ""; background: #fff; }.battery-donut span { position: absolute; display: flex; flex-direction: column; align-items: center; color: #1c3656; font: 700 18px var(--mono); }.battery-donut span small { margin-top: 3px; color: #8b969f; font-size: 8px; font-weight: 400; }
.battery-legend { display: flex; flex-direction: column; gap: 8px; color: #75838c; font: 9px var(--mono); }.battery-legend span { white-space: nowrap; }.battery-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }.batt-80 { background: #0b2a52; }.batt-50 { background: #2d5a8a; }.batt-30 { background: #8fa8c4; }.batt-low { background: #b53333; }.batt-unknown { background: #d9d6c9; }
.map-zone span small, .preview-zone small { display: block; margin-top: 3px; color: rgba(232,249,217,.72); font: 8px var(--mono); }.zone-d { width: 23%; height: 23%; top: 62%; left: 8%; }.preview-zone.z4 { top: 67%; left: 12%; }
.photo-help { display: grid; grid-template-columns: auto auto; align-items: center; gap: 6px 10px; padding: 10px 0 0; }.photo-help > span { color: #596c77; font-size: 10px; font-weight: 600; }.photo-help small { grid-column: 1 / -1; color: #9aa6ad; font-size: 9px; }.photo-change-btn { height: 27px; padding: 0 9px; justify-self: start; font-size: 9px; }
@media (max-width: 1180px) { .insight-grid { grid-template-columns: 1fr 1fr; }.battery-panel { grid-column: 1 / -1; } }
@media (max-width: 760px) { .insight-grid { grid-template-columns: 1fr; gap: 10px; }.battery-panel { grid-column: auto; }.insight-panel { padding: 14px; }.battery-chart { justify-content: center; }.map-zone span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.map-zone span small { display: none; } }

/* Stale state — set by live.js when the websocket is down or no message has
   arrived for 45s. The numbers on screen are then the last known good values,
   not live ones, and the page must not present them as current. */
body.is-stale .metric-value,
body.is-stale .insight-bars,
body.is-stale .battery-donut,
body.is-stale .map-legend { opacity: .45; transition: opacity .3s; }
body.is-stale .chart-badge { filter: grayscale(1); }

/* Empty / waiting state for data-driven tables (设备与标签). */
.table-empty { padding: 26px 12px; color: #8b969f; font-size: 12px; text-align: center; }

/* Initials badge for employees with no photo on file. */
.initials-avatar { display: inline-flex; align-items: center; justify-content: center;
  background: #dfe6ee; color: #35506b; font: 600 11px var(--mono); letter-spacing: -.02em; }
.muted-text { color: #a3adb6; }

/* Add-employee form in the detail drawer. */
.person-form label { display: block; margin-bottom: 14px; color: #55636e; font-size: 12px; font-weight: 600; }
.person-form label em { color: #d04b4b; font-style: normal; }
.person-form input, .person-form select, .person-form textarea {
  display: block; box-sizing: border-box; width: 100%; margin-top: 6px; padding: 9px 10px;
  border: 1px solid #dbe2e9; border-radius: 7px; color: #172b3a; font: 400 13px inherit; background: #fff; }
.person-form input:focus, .person-form select:focus, .person-form textarea:focus {
  border-color: #2e6ef2; outline: 2px solid rgba(46,110,242,.15); }
.person-form label small { display: block; margin-top: 5px; color: #8b969f; font-weight: 400; }
.person-form .form-error { margin: 0 0 12px; padding: 9px 11px; border-radius: 7px;
  background: #fdeaea; color: #b53333; font-size: 12px; }
.row-more.danger:hover { color: #b53333; }
.person-form input[list] + datalist { display: none; }

/* Explicit marker for panels with no backend data source. Better than leaving
   invented figures unlabelled, and machine-checkable by the CI honesty test. */
.demo-badge { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 5px;
  background: #fdf1dd; color: #9a6412; font: 600 10px var(--mono); letter-spacing: 0; vertical-align: middle; }

/* Photo picker inside the add/edit employee form. */
.person-photo-field { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.person-photo-preview { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center; background-color: #dfe6ee;
  color: #35506b; font: 600 15px var(--mono); }
.person-photo-field small { display: block; margin-top: 6px; color: #8b969f; font-size: 11px; font-weight: 400; }