:root {
  --navy: #102a43;
  --navy-2: #1e3a56;
  --ink: #1f2933;
  --muted: #697586;
  --muted-2: #9aa5b1;
  --line: #e4e7eb;
  --surface: #ffffff;
  --bg: #f6f8fa;
  --blue: #2d6cdf;
  --blue-soft: #eef4ff;
  --orange: #dd8b32;
  --orange-soft: #fff5e8;
  --red: #c84848;
  --red-soft: #fff0f0;
  --green: #2e8b68;
  --green-soft: #edf8f3;
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { display: flex; min-height: 100vh; }

.sidebar { width: 248px; flex: 0 0 248px; background: var(--navy); color: #d9e2ec; display: flex; flex-direction: column; padding: 22px 14px 16px; }
.brand-lockup { display: flex; align-items: center; gap: 11px; padding: 0 11px 23px; }
.brand-mark { width: 32px; height: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; align-items: end; padding: 4px 3px; border: 1px solid rgba(255,255,255,.27); border-radius: 7px; }
.brand-mark span { display: block; background: #f4b25b; border-radius: 2px; }
.brand-mark span:nth-child(1) { height: 58%; opacity: .75; }.brand-mark span:nth-child(2) { height: 100%; }.brand-mark span:nth-child(3) { height: 76%; opacity: .9; }
.brand-name { font-size: 15px; color: #fff; font-weight: 650; letter-spacing: .02em; }.brand-subtitle { font-size: 10px; color: #8fa6bc; margin-top: 2px; letter-spacing: .01em; }
.property-switcher { display: flex; align-items: center; gap: 9px; padding: 10px 11px; margin: 0 1px 20px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.06); border-radius: 7px; }
.switcher-dot { width: 8px; height: 8px; background: #61c69b; border-radius: 50%; box-shadow: 0 0 0 3px rgba(97,198,155,.16); }.switcher-label { font-size: 10px; color: #8fa6bc; }.switcher-value { font-size: 12px; color: #eef4f9; margin-top: 1px; }.chevron { margin-left: auto; color: #8fa6bc; font-size: 17px; line-height: 1; }
.nav-list { flex: 1; }.nav-group-label { padding: 0 13px 7px; font-size: 10px; color: #7790a8; letter-spacing: .09em; text-transform: uppercase; }.nav-group-label.spaced { margin-top: 22px; }
.nav-item { border: 0; background: transparent; color: #b7c7d7; width: 100%; height: 40px; padding: 0 12px; display: flex; gap: 11px; align-items: center; border-radius: 6px; text-align: left; font-size: 13px; margin: 2px 0; transition: background .18s, color .18s; }.nav-item:hover { background: rgba(255,255,255,.08); color: white; }.nav-item.active { background: #244766; color: white; box-shadow: inset 3px 0 0 #f0a451; }.nav-icon { font-size: 16px; width: 17px; text-align: center; color: #94abc0; }.active .nav-icon { color: #f6b35f; }.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; text-align: center; line-height: 20px; font-size: 10px; background: rgba(104,151,194,.22); color: #bcd2e7; }.nav-badge.warning { color: #ffd59e; background: rgba(221,139,50,.19); }.nav-badge.danger { color: #ffc2c2; background: rgba(200,72,72,.22); }
.sidebar-footer { padding-top: 12px; }.support-card { display: flex; align-items: center; gap: 9px; padding: 11px; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }.support-icon { width: 24px; height: 24px; border: 1px solid #7188a1; border-radius: 50%; display: grid; place-items: center; color: #b9c9d8; }.support-title { font-size: 11px; color: #e8eff5; }.support-desc { font-size: 10px; color: #8097ad; margin-top: 1px; }.user-profile { display: flex; align-items: center; padding: 16px 5px 0; gap: 9px; }.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #c77e54; font-size: 13px; font-weight: 600; flex: 0 0 auto; }.user-meta { display: flex; flex-direction: column; min-width: 0; }.user-meta strong { font-size: 12px; color: #eaf1f6; font-weight: 600; }.user-meta span { font-size: 10px; color: #8097ad; margin-top: 1px; }.more-button { border: 0; background: transparent; color: #97aabc; letter-spacing: 2px; padding: 4px; }.user-profile .more-button { margin-left: auto; }

.main-content { min-width: 0; flex: 1; }.topbar { height: 64px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 34px; }.breadcrumb { display: flex; align-items: center; gap: 11px; color: var(--muted); font-size: 12px; }.breadcrumb strong { color: var(--ink); font-weight: 600; }.slash { color: #bec7d0; }.topbar-actions { display: flex; align-items: center; gap: 17px; }.sync-status { display: flex; align-items: center; gap: 6px; color: var(--green); font-size: 11px; }.sync-time { color: var(--muted-2); }.pulse-dot { width: 6px; height: 6px; background: #4db787; border-radius: 50%; box-shadow: 0 0 0 3px #e5f5ee; }.icon-button { position: relative; border: 0; background: transparent; color: #697586; padding: 4px; font-size: 20px; }.bell-icon { display: inline-block; transform: rotate(45deg); font-size: 16px; }.notification-dot { position: absolute; width: 5px; height: 5px; background: var(--red); border-radius: 50%; top: 2px; right: 2px; }.top-avatar { width: 28px; height: 28px; font-size: 12px; border: 0; }
.mobile-brand { display: none; align-items: center; gap: 8px; color: var(--navy); }.brand-mark.small { width: 25px; height: 25px; padding: 3px; gap: 2px; border-color: #c3cfda; }.brand-mark.small span { background: var(--orange); }
.content-wrap { padding: 30px 34px 48px; max-width: 1600px; margin: 0 auto; }.view-panel { display: none; }.view-panel.active { display: block; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }.page-heading.compact { align-items: center; }.eyebrow { display: flex; align-items: center; gap: 7px; color: #8b98a7; font-size: 11px; letter-spacing: .03em; }.eyebrow-line { width: 18px; height: 2px; background: var(--orange); display: inline-block; }.page-heading h1 { font-size: 28px; line-height: 1.2; margin: 7px 0 6px; letter-spacing: -.02em; font-weight: 650; color: #1d2d3d; }.page-heading p { margin: 0; color: var(--muted); font-size: 13px; }.wave { color: #e3a253; font-size: 25px; font-weight: 400; display: inline-block; transform: rotate(-22deg); margin-left: 4px; }.heading-actions { display: flex; align-items: center; gap: 9px; }.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 5px; border: 1px solid transparent; font-weight: 550; font-size: 12px; white-space: nowrap; }.button.primary { background: var(--navy); color: #fff; box-shadow: 0 2px 5px rgba(16,42,67,.14); }.button.primary:hover { background: #1c4568; }.button.secondary { background: #fff; color: var(--navy); border-color: #cdd6df; }.button.secondary:hover { border-color: var(--navy); background: #f8fafc; }.button-icon { font-size: 16px; line-height: 1; }
.alert-strip { min-height: 55px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #fff8ec; border: 1px solid #f4dfba; border-left: 3px solid var(--orange); border-radius: 5px; margin-bottom: 20px; }.alert-symbol { width: 23px; height: 23px; border-radius: 50%; background: #f1b35b; color: white; display: grid; place-items: center; font-weight: 700; font-size: 12px; }.alert-copy { display: flex; align-items: center; gap: 13px; min-width: 0; }.alert-copy strong { color: #744c15; font-size: 12px; }.alert-copy span { color: #9c7a45; font-size: 11px; }.text-button { border: 0; background: transparent; color: #2d6cdf; font-size: 12px; padding: 4px 0; white-space: nowrap; }.text-button span { margin-left: 4px; font-size: 15px; }.alert-strip .text-button { margin-left: auto; color: #9a651f; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }.kpi-card { min-height: 145px; border-radius: 6px; padding: 16px 17px 14px; color: #fff; position: relative; overflow: hidden; }.kpi-card::after { content: ""; position: absolute; right: -25px; bottom: -42px; width: 125px; height: 125px; border: 18px solid rgba(255,255,255,.08); border-radius: 50%; }.kpi-card.navy { background: var(--navy); }.kpi-card.blue { background: #336fc2; }.kpi-card.amber { background: #bf7d30; }.kpi-card.green { background: #3d806c; }.kpi-top { display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.76); font-size: 11px; position: relative; z-index: 1; }.kpi-icon { width: 25px; height: 25px; border: 1px solid rgba(255,255,255,.3); border-radius: 5px; display: grid; place-items: center; color: #fff; font-size: 13px; }.kpi-number { font-size: 31px; font-weight: 650; letter-spacing: -.03em; margin-top: 13px; line-height: 1; position: relative; z-index: 1; }.kpi-number .unit { font-size: 16px; margin-left: 3px; }.kpi-foot { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.65); font-size: 10px; position: absolute; bottom: 14px; left: 17px; right: 17px; z-index: 1; }.trend { padding: 2px 5px; border-radius: 3px; color: white; background: rgba(255,255,255,.13); }.progress-track { position: absolute; height: 4px; left: 17px; right: 17px; bottom: 32px; background: rgba(255,255,255,.2); border-radius: 4px; z-index: 1; }.progress-track span { display: block; height: 100%; border-radius: 4px; background: #fff; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .9fr); gap: 14px; margin-bottom: 14px; }.surface { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }.chart-surface, .todo-surface, .table-surface, .risk-surface { padding: 19px 20px; }.surface-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.surface-heading h2 { font-size: 14px; margin: 0; color: #253647; font-weight: 650; }.surface-heading p { margin: 4px 0 0; color: var(--muted-2); font-size: 11px; }.filter-button { border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 11px; height: 28px; padding: 0 9px; border-radius: 4px; }.chart-legend { display: flex; gap: 17px; margin: 21px 0 6px 39px; font-size: 10px; color: var(--muted); }.legend-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }.navy-dot { background: #2b5e8f; }.orange-dot { background: #e4a052; }.gray-dot { background: #b4c1cb; }.bar-chart { display: flex; height: 183px; }.y-axis { flex: 0 0 38px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 3px 8px 25px 0; color: #aab4be; font-size: 9px; }.bar-area { display: flex; justify-content: space-around; align-items: stretch; position: relative; flex: 1; padding-bottom: 25px; }.grid-line { position: absolute; left: 0; right: 0; border-top: 1px dashed #e8ebee; }.line-100 { top: 2px; }.line-75 { top: 25%; }.line-50 { top: 50%; }.line-25 { top: 75%; }.line-0 { bottom: 25px; border-top-style: solid; border-color: #d9dee3; }.bar-group { flex: 1; max-width: 75px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; z-index: 1; }.bars { height: 155px; display: flex; align-items: flex-end; gap: 3px; }.bar { display: block; width: 8px; border-radius: 2px 2px 0 0; min-height: 3px; }.navy-bar { background: #2b5e8f; }.orange-bar { background: #e4a052; }.gray-bar { background: #b4c1cb; }.bar-group span { font-size: 9px; color: #96a1ac; margin-top: 8px; }.bar-group.today span { color: var(--navy); font-weight: 650; }
.todo-surface { display: flex; flex-direction: column; }.todo-list { margin-top: 12px; }.todo-item { width: 100%; display: flex; align-items: center; gap: 9px; border: 0; border-bottom: 1px solid #edf0f2; padding: 11px 0; background: transparent; text-align: left; }.todo-item:first-child { padding-top: 5px; }.todo-item:last-child { border-bottom: 0; }.todo-marker { flex: 0 0 auto; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 5px; color: var(--red); background: var(--red-soft); font-weight: 700; font-size: 12px; }.todo-marker.check { color: var(--green); background: var(--green-soft); }.todo-marker.clock { color: var(--orange); background: var(--orange-soft); }.todo-marker.doc { color: var(--blue); background: var(--blue-soft); }.todo-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }.todo-body strong { font-size: 11px; color: #344454; font-weight: 600; }.todo-body small { color: #98a4af; font-size: 10px; margin-top: 2px; }.todo-arrow { color: #aab4be; font-size: 18px; }.all-todos { border: 0; border-top: 1px solid #edf0f2; background: transparent; color: var(--blue); padding: 13px 0 0; text-align: left; font-size: 11px; }.all-todos span { font-size: 15px; margin-left: 4px; }
.lower-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .9fr); gap: 14px; }.table-heading { margin-bottom: 14px; }.table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; font-size: 11px; white-space: nowrap; }th { color: #8b98a7; font-size: 10px; font-weight: 500; text-align: left; padding: 0 10px 10px; border-bottom: 1px solid var(--line); }td { padding: 12px 10px; border-bottom: 1px solid #edf0f2; color: #697586; }tr:last-child td { border-bottom: 0; }td strong { color: #344454; font-weight: 600; }.facility-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 7px; border-radius: 5px; vertical-align: middle; font-weight: 700; }.hydrant { color: #2d6cdf; background: var(--blue-soft); }.pump { color: #2e8b68; background: var(--green-soft); }.extinguisher { color: #c84848; background: var(--red-soft); }.alarm { color: #b47a2d; background: var(--orange-soft); }.row-more { border: 0; background: transparent; color: #a3adb7; letter-spacing: 2px; padding: 3px; }.status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; padding: 3px 7px; border-radius: 4px; }.status-pill i { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }.status-pill.success { color: #2e8064; background: #ecf8f2; }.status-pill.success i { background: #39a378; }.status-pill.warning { color: #a36a25; background: #fff4e2; }.status-pill.warning i { background: #d9973c; }.status-pill.danger { color: #bb4848; background: #fff0f0; }.status-pill.danger i { background: #cf6262; }.status-pill.neutral { color: #77838e; background: #f1f3f5; }.status-pill.neutral i { background: #9da8b1; }
.donut-wrap { display: flex; align-items: center; gap: 23px; padding: 24px 8px 7px; }.donut-chart { width: 132px; height: 132px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: conic-gradient(#2b5e8f 0 39%, #71a1c9 39% 64%, #e4a052 64% 80%, #c7d4de 80% 92.5%, #e8ecef 92.5% 100%); position: relative; }.donut-chart::after { content: ""; width: 84px; height: 84px; border-radius: 50%; background: #fff; position: absolute; }.donut-center { display: flex; flex-direction: column; align-items: center; z-index: 1; }.donut-center strong { font-size: 20px; color: #2e4051; }.donut-center span { color: #98a4af; font-size: 9px; margin-top: 1px; }.risk-legend { flex: 1; }.risk-legend > div { display: flex; align-items: center; gap: 7px; min-height: 22px; color: #697586; font-size: 10px; }.risk-legend b { margin-left: auto; color: #344454; font-size: 10px; }.risk-dot { width: 7px; height: 7px; border-radius: 50%; }.r1 { background: #2b5e8f; }.r2 { background: #71a1c9; }.r3 { background: #e4a052; }.r4 { background: #c7d4de; }.r5 { background: #e8ecef; }

.filter-bar { min-height: 52px; display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }.search-field { height: 34px; display: flex; align-items: center; gap: 8px; border: 1px solid #d8dfe5; background: #fff; border-radius: 5px; padding: 0 10px; min-width: 280px; }.search-field > span { font-size: 19px; color: #93a0ad; transform: rotate(-15deg); }.search-field input { border: 0; outline: 0; width: 100%; color: var(--ink); font-size: 11px; }.search-field input::placeholder { color: #a8b1b9; }.filter-bar select { height: 34px; min-width: 115px; border: 1px solid #d8dfe5; background: #fff; border-radius: 5px; padding: 0 8px; color: #697586; font-size: 11px; outline: 0; }.filter-spacer { flex: 1; }.result-count { color: #8b98a7; font-size: 11px; }.full-table-surface { overflow: hidden; }.bulk-toolbar { min-height: 50px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--line); }.checkbox-label { display: flex; align-items: center; gap: 7px; color: #697586; font-size: 11px; }.checkbox-label input { accent-color: var(--navy); }.selected-count { color: #8b98a7; font-size: 11px; }.selected-count b { color: var(--navy); }.toolbar-button { border: 1px solid #d8dfe5; background: #fff; color: #697586; border-radius: 4px; padding: 5px 9px; font-size: 10px; }.facilities-table th, .facilities-table td { padding-left: 16px; padding-right: 16px; }.facilities-table td { height: 57px; }.checkbox-col { width: 32px; }.pagination { display: flex; justify-content: space-between; align-items: center; padding: 14px 17px; border-top: 1px solid var(--line); color: #8b98a7; font-size: 10px; }.pagination > div { display: flex; gap: 4px; align-items: center; }.page-button { border: 1px solid transparent; background: transparent; min-width: 25px; height: 25px; border-radius: 4px; color: #7c8893; font-size: 10px; }.page-button.active { border-color: #ccdae6; color: var(--navy); background: #f4f8fb; font-weight: 650; }
.inspection-summary { display: flex; align-items: stretch; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 14px; padding: 0 5px; }.inspection-summary > div:not(.summary-progress) { min-width: 120px; padding: 15px 18px; border-right: 1px solid var(--line); }.summary-label { display: block; font-size: 10px; color: #8b98a7; }.inspection-summary strong { font-size: 24px; color: #344454; line-height: 1.4; margin-right: 4px; }.inspection-summary small { color: #8b98a7; font-size: 10px; }.green-text { color: var(--green) !important; }.orange-text { color: var(--orange) !important; }.red-text { color: var(--red) !important; }.summary-progress { flex: 1; padding: 15px 21px; }.summary-progress > div:first-child { display: flex; justify-content: space-between; color: #8b98a7; font-size: 10px; }.summary-progress b { color: var(--navy); }.summary-progress .progress-track { position: static; height: 6px; margin-top: 15px; background: #e8eef2; }.summary-progress .progress-track span { background: #4c8abf; }.task-surface { overflow: hidden; }.tab-strip { min-height: 51px; padding: 0 19px; display: flex; align-items: center; gap: 25px; border-bottom: 1px solid var(--line); }.tab { height: 51px; border: 0; background: transparent; color: #8b98a7; font-size: 11px; padding: 0; position: relative; }.tab.active { color: var(--navy); font-weight: 650; }.tab.active::after { content: ""; position: absolute; height: 2px; background: var(--orange); bottom: 0; left: 0; right: 0; }.tab span { margin-left: 4px; color: #a3adb7; font-weight: 400; }.tab-spacer { flex: 1; }.task-row { min-height: 72px; display: flex; align-items: center; gap: 13px; padding: 0 20px; border-bottom: 1px solid #edf0f2; }.task-row:last-child { border-bottom: 0; }.task-check { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; flex: 0 0 auto; }.task-check.done { background: var(--green-soft); color: var(--green); }.task-check.pending { background: var(--orange-soft); color: var(--orange); }.task-info { flex: 1; min-width: 250px; display: flex; flex-direction: column; }.task-info strong { font-size: 12px; color: #344454; font-weight: 600; }.task-info span { color: #98a4af; font-size: 10px; margin-top: 3px; }.task-person { display: flex; align-items: center; gap: 6px; width: 100px; color: #697586; font-size: 10px; }.avatar.mini { width: 22px; height: 22px; font-size: 9px; background: #c77e54; }.avatar.mini.coral { background: #b66c67; }.avatar.mini.blue-avatar { background: #5b87ad; }.avatar.mini.green-avatar { background: #548b75; }.task-time { width: 105px; color: #8b98a7; font-size: 10px; }.task-row > .status-pill { width: 63px; justify-content: center; }
.hazard-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }.hazard-stat { background: #fff; border: 1px solid var(--line); border-left: 3px solid; border-radius: 5px; padding: 14px 16px; }.hazard-stat.high { border-left-color: var(--red); }.hazard-stat.medium { border-left-color: var(--orange); }.hazard-stat.low { border-left-color: #6388aa; }.hazard-stat.closed { border-left-color: var(--green); }.hazard-stat-label { display: block; color: #697586; font-size: 11px; }.hazard-stat strong { display: inline-block; font-size: 26px; line-height: 1.3; margin-right: 5px; }.hazard-stat.high strong { color: var(--red); }.hazard-stat.medium strong { color: var(--orange); }.hazard-stat.low strong { color: #6388aa; }.hazard-stat.closed strong { color: var(--green); }.hazard-stat span:last-child { color: #98a4af; font-size: 10px; }.hazard-table-surface { overflow: hidden; }.small-search { min-width: 185px; height: 28px; }.small-search input { font-size: 10px; }.hazards-table td { padding-top: 14px; padding-bottom: 14px; }.hazards-table td:first-child { min-width: 250px; }.hazards-table td strong { display: block; }.hazards-table td small { display: block; color: #a0abb5; font-size: 9px; margin-top: 3px; }.risk-tag { display: inline-block; border-radius: 3px; padding: 3px 6px; font-size: 10px; }.risk-tag.high { color: var(--red); background: var(--red-soft); }.risk-tag.medium { color: #a36a25; background: var(--orange-soft); }.detail-button { border: 1px solid #d5dde4; background: #fff; color: #53708a; border-radius: 4px; padding: 5px 10px; font-size: 10px; }
.responsibility-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }.role-card { min-height: 151px; padding: 20px; display: flex; gap: 13px; position: relative; }.role-card.featured { border-top: 3px solid var(--navy); }.role-icon { width: 33px; height: 33px; border-radius: 6px; display: grid; place-items: center; flex: 0 0 auto; font-size: 14px; }.navy-icon { background: var(--blue-soft); color: var(--navy); }.blue-icon { background: #eaf4fc; color: #3b7fae; }.orange-icon { background: var(--orange-soft); color: var(--orange); }.role-label { color: #8b98a7; font-size: 10px; }.role-card h2 { font-size: 18px; margin: 5px 0; color: #2c3e50; }.role-card p { margin: 0; color: #7b8792; font-size: 10px; line-height: 1.7; max-width: 240px; }.role-status { position: absolute; top: 20px; right: 18px; font-size: 10px; color: var(--green); background: var(--green-soft); padding: 3px 6px; border-radius: 3px; }.roster-surface { padding: 19px 20px; }.roster-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 15px; }.roster-item { padding: 14px; border: 1px solid #e7ebee; border-radius: 5px; display: flex; flex-direction: column; gap: 3px; }.roster-item strong { font-size: 13px; color: #344454; }.roster-item span { color: #697586; font-size: 10px; }.roster-item em { color: #a0abb5; font-size: 9px; font-style: normal; margin-top: 4px; }
.report-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 14px; }.report-card { min-height: 125px; display: flex; align-items: center; gap: 14px; padding: 18px 20px; }.report-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 6px; font-size: 17px; flex: 0 0 auto; }.blue-report { color: #2d6cdf; background: var(--blue-soft); }.orange-report { color: #bd7b2f; background: var(--orange-soft); }.red-report { color: var(--red); background: var(--red-soft); }.green-report { color: var(--green); background: var(--green-soft); }.report-card > div:nth-child(2) { flex: 1; min-width: 0; }.report-card h2 { margin: 0 0 4px; font-size: 13px; color: #344454; }.report-card p { margin: 0; font-size: 10px; color: #8b98a7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.report-card span { display: block; font-size: 9px; color: #b0b8c0; margin-top: 8px; }.report-download { height: 29px; padding: 0 11px; }.import-guide { display: flex; align-items: center; gap: 18px; padding: 19px 20px; border-left: 3px solid var(--blue); }.guide-number { color: #b5c5d2; font-size: 22px; font-weight: 650; }.import-guide h2 { font-size: 13px; margin: 0 0 4px; }.import-guide p { margin: 0; color: #7b8792; font-size: 10px; max-width: 680px; }.import-guide .text-button { margin-left: auto; }
.settings-layout { display: grid; grid-template-columns: 185px 1fr; gap: 14px; align-items: start; }.settings-nav { padding: 7px; display: flex; flex-direction: column; }.settings-nav-item { border: 0; background: transparent; border-radius: 4px; text-align: left; color: #697586; font-size: 11px; padding: 10px 12px; }.settings-nav-item.active { color: var(--navy); background: #eff5f9; font-weight: 650; }.settings-form { padding: 24px; }.form-section + .form-section { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 25px; }.form-section h2 { margin: 0 0 4px; font-size: 14px; }.form-section > p { margin: 0 0 17px; font-size: 10px; color: #98a4af; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }.form-grid label, .full-label { display: flex; flex-direction: column; gap: 6px; color: #697586; font-size: 10px; }.form-grid input, .form-grid select, .full-label textarea { min-height: 34px; border: 1px solid #d8dfe5; border-radius: 4px; outline: 0; padding: 0 9px; color: #344454; background: #fff; font-size: 11px; }.full-label textarea { min-height: 72px; resize: vertical; padding: 9px; }.rule-row { display: flex; align-items: center; gap: 13px; min-height: 42px; border-bottom: 1px solid #edf0f2; font-size: 11px; }.rule-row:last-child { border-bottom: 0; }.rule-row > span:first-child { width: 150px; color: #344454; }.rule-row select { height: 28px; width: 90px; border: 1px solid #d8dfe5; border-radius: 4px; color: #697586; font-size: 10px; }.rule-note { color: #98a4af; font-size: 10px; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(12,29,45,.46); display: none; align-items: center; justify-content: center; z-index: 20; padding: 20px; }.modal-backdrop.show { display: flex; }.modal { width: min(590px, 100%); max-height: 90vh; overflow: auto; background: #fff; border-radius: 8px; box-shadow: 0 18px 50px rgba(12,29,45,.2); }.modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 23px 24px 16px; border-bottom: 1px solid var(--line); }.modal-header h2 { margin: 7px 0 0; font-size: 18px; color: #253647; }.close-button { border: 0; background: transparent; color: #8b98a7; font-size: 25px; line-height: 1; padding: 0 2px; }.modal-body { padding: 21px 24px; }.modal-body .form-grid { gap: 15px; }.modal-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 24px; background: #fafbfc; border-top: 1px solid var(--line); }.toast { position: fixed; right: 26px; bottom: 26px; z-index: 30; display: flex; align-items: center; gap: 9px; background: var(--navy); color: #fff; border-radius: 5px; box-shadow: 0 8px 22px rgba(16,42,67,.22); padding: 11px 15px; font-size: 11px; transform: translateY(20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }.toast.show { opacity: 1; transform: translateY(0); }.toast-icon { width: 17px; height: 17px; display: grid; place-items: center; background: #5eb38b; border-radius: 50%; font-size: 10px; }
.mobile-bottom-nav { display: none; }

@media (max-width: 1180px) { .content-wrap { padding-left: 24px; padding-right: 24px; }.topbar { padding: 0 24px; }.sidebar { width: 220px; flex-basis: 220px; }.dashboard-grid, .lower-grid { grid-template-columns: minmax(0, 1.3fr) minmax(270px, .9fr); }.task-person { width: 82px; }.task-time { width: 90px; }.donut-wrap { gap: 12px; }.donut-chart { width: 116px; height: 116px; }.donut-chart::after { width: 74px; height: 74px; } }
@media (max-width: 960px) { .sidebar { width: 70px; flex-basis: 70px; padding: 17px 10px; }.brand-lockup { padding: 0 9px 22px; }.brand-lockup > div:not(.brand-mark), .property-switcher > div, .property-switcher .chevron, .nav-group-label, .nav-item > span:not(.nav-icon):not(.nav-badge), .support-card > div:not(.support-icon), .support-card .chevron, .user-meta, .user-profile .more-button { display: none; }.property-switcher { justify-content: center; padding: 11px 0; }.nav-item { justify-content: center; padding: 0; }.nav-item.active { box-shadow: inset 3px 0 0 #f0a451; }.nav-badge { position: absolute; margin: -27px 0 0 24px; min-width: 16px; height: 16px; line-height: 16px; font-size: 9px; padding: 0 3px; }.nav-item { position: relative; }.support-card { justify-content: center; padding: 11px 0; }.user-profile { justify-content: center; padding-left: 0; padding-right: 0; }.dashboard-grid, .lower-grid { grid-template-columns: 1fr; }.risk-surface { min-height: 250px; }.kpi-grid { grid-template-columns: repeat(2, 1fr); }.responsibility-grid { grid-template-columns: 1fr; }.role-card { min-height: 125px; }.roster-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { body { padding-bottom: 62px; }.sidebar { display: none; }.topbar { height: 56px; padding: 0 16px; }.mobile-brand { display: flex; }.breadcrumb, .sync-status, .top-avatar { display: none; }.topbar-actions { margin-left: auto; }.content-wrap { padding: 22px 14px 30px; }.page-heading, .page-heading.compact { align-items: flex-start; flex-direction: column; margin-bottom: 17px; }.page-heading h1 { font-size: 24px; }.heading-actions { width: 100%; }.heading-actions .button { flex: 1; }.alert-strip { align-items: flex-start; padding: 10px; }.alert-copy { display: block; }.alert-copy span { display: block; margin-top: 3px; line-height: 1.45; }.alert-strip .text-button { display: none; }.kpi-grid { gap: 9px; }.kpi-card { min-height: 130px; padding: 14px; }.kpi-number { font-size: 27px; }.kpi-foot { left: 14px; right: 14px; bottom: 12px; }.progress-track { left: 14px; right: 14px; }.chart-surface, .todo-surface, .table-surface, .risk-surface { padding: 16px 14px; }.bar-chart { height: 160px; }.bars { height: 135px; }.chart-legend { margin-left: 35px; gap: 8px; }.donut-wrap { justify-content: center; padding-bottom: 4px; }.filter-bar { flex-wrap: wrap; }.search-field { min-width: 100%; }.filter-bar select { flex: 1; min-width: 0; }.result-count { width: 100%; }.bulk-toolbar { padding: 0 12px; gap: 9px; overflow-x: auto; white-space: nowrap; }.facilities-table { min-width: 900px; }.pagination { gap: 10px; flex-wrap: wrap; }.inspection-summary { overflow-x: auto; }.inspection-summary > div:not(.summary-progress) { min-width: 105px; padding: 13px 13px; }.summary-progress { min-width: 170px; padding: 13px; }.task-surface, .hazard-table-surface { overflow: auto; }.tab-strip { min-width: 520px; }.task-row { min-width: 720px; }.hazards-table { min-width: 850px; }.hazard-cards { grid-template-columns: repeat(2, 1fr); gap: 9px; }.hazard-stat { padding: 12px; }.report-grid { grid-template-columns: 1fr; }.report-card p { white-space: normal; }.import-guide { align-items: flex-start; flex-wrap: wrap; gap: 10px; }.import-guide .text-button { margin-left: 0; width: 100%; text-align: left; }.settings-layout { grid-template-columns: 1fr; }.settings-nav { flex-direction: row; overflow-x: auto; gap: 2px; }.settings-nav-item { white-space: nowrap; }.settings-form { padding: 17px 14px; }.form-grid { grid-template-columns: 1fr; }.rule-row { flex-wrap: wrap; gap: 7px; padding: 10px 0; }.rule-row > span:first-child { width: 100%; }.rule-note { width: 100%; }.mobile-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 62px; background: #fff; border-top: 1px solid var(--line); z-index: 10; justify-content: space-around; }.mobile-nav-item { border: 0; background: transparent; color: #8b98a7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 20%; }.mobile-nav-item span { font-size: 17px; line-height: 1; }.mobile-nav-item small { font-size: 9px; }.mobile-nav-item.active { color: var(--navy); }.mobile-nav-item.active span { color: var(--orange); }.toast { left: 16px; right: 16px; bottom: 76px; justify-content: center; } }
.surface { min-width: 0; }

/* Access states: public pages stay readable; write and admin controls appear after login. */
body:not(.auth-user) [data-auth-only="true"] { display: none !important; }
body:not(.auth-user) [data-requires-auth="true"] { opacity: .55; }
body.auth-user .login-button, body.auth-user .guest-access, body.auth-user #guestProfile { display: none !important; }
body:not(.auth-user) .auth-access, body:not(.auth-user) .auth-profile { display: none !important; }
.guest-profile { display: flex; align-items: center; padding: 16px 5px 0; gap: 9px; }
.guest-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #dbe7f1; background: #385a76; border: 1px solid #5e7b94; font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.login-link { border: 0; background: transparent; color: #f2b35b; font-size: 11px; margin-left: auto; padding: 4px 1px; }
.access-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 12px; padding: 4px 8px; font-size: 10px; }
.guest-access { background: #f4f6f8; color: #687887; }.auth-access { background: var(--green-soft); color: var(--green); }
.access-dot { width: 6px; height: 6px; border-radius: 50%; background: #91a0ad; }.auth-access .access-dot { background: #3da47a; }
.login-button { height: 30px; padding: 0 11px; font-size: 11px; }
.admin-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.admin-module { min-height: 116px; padding: 15px; display: flex; gap: 10px; position: relative; align-items: flex-start; }.admin-module.featured { border-top: 3px solid var(--navy); }.module-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 5px; color: var(--navy); background: #eef4f8; font-size: 14px; flex: 0 0 auto; }.blue-module { color: var(--blue); background: var(--blue-soft); }.orange-module { color: var(--orange); background: var(--orange-soft); }.red-module { color: var(--red); background: var(--red-soft); }.admin-module > div:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }.admin-module span { color: #8b98a7; font-size: 10px; }.admin-module strong { color: #344454; font-size: 13px; }.admin-module small { color: #9aa5b1; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.admin-module .text-button { position: absolute; right: 14px; bottom: 10px; font-size: 10px; }.account-surface { padding: 19px 20px; margin-top: 14px; }.account-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }.account-list > div { border: 1px solid #edf0f2; border-radius: 5px; padding: 11px; display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: center; }.account-list strong { color: #344454; font-size: 11px; }.account-list em { color: #8b98a7; font-style: normal; font-size: 9px; grid-column: 2; }.account-list b { color: #a0abb5; font-weight: 400; font-size: 9px; grid-column: 2; margin-top: 2px; }.login-intro { margin: 0 0 16px; color: #697586; font-size: 11px; line-height: 1.7; }.role-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }.role-option { min-height: 58px; display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid #d8dfe5; border-radius: 5px; background: #fff; padding: 8px 10px; position: relative; }.role-option.selected { border-color: #77a1bd; background: #f3f8fb; box-shadow: inset 0 0 0 1px #77a1bd; }.role-option > span:nth-child(2) { display: flex; flex-direction: column; }.role-option strong { color: #344454; font-size: 11px; }.role-option small { color: #8b98a7; font-size: 9px; margin-top: 2px; }.role-option i { position: absolute; right: 8px; top: 8px; color: #3d9c77; font-style: normal; font-size: 12px; opacity: 0; }.role-option.selected i { opacity: 1; }.login-note { margin-top: 16px; padding: 8px 10px; color: #8b98a7; background: #f6f8fa; border-radius: 4px; font-size: 10px; }.login-note span { color: var(--orange); margin-right: 5px; }
@media (max-width: 960px) { .admin-overview-grid { grid-template-columns: repeat(2, 1fr); }.account-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .guest-profile { justify-content: center; padding-left: 0; padding-right: 0; }.guest-profile .user-meta, .guest-profile .login-link { display: none; }.admin-overview-grid { grid-template-columns: 1fr; }.account-list { grid-template-columns: 1fr; }.role-picker { grid-template-columns: 1fr; }.login-modal .modal-body { padding: 17px 16px; } }