:root {
  --ink: #17211d;
  --muted: #68756f;
  --surface: #ffffff;
  --surface-soft: #f3f6f4;
  --canvas: #e9efec;
  --line: #d4ddd8;
  --brand: #173f32;
  --brand-2: #28634f;
  --brand-soft: #e1eee8;
  --accent: #d8a236;
  --danger: #b23b33;
  --danger-soft: #f8e7e4;
  --warning: #9b6711;
  --warning-soft: #fff2d7;
  --success: #26734f;
  --success-soft: #e5f4ec;
  --shadow: 0 12px 32px rgba(23, 63, 50, 0.08);
  --radius: 16px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 0 0, rgba(40, 99, 79, 0.08), transparent 30%),
    var(--canvas);
  color: var(--ink);
  font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, Arial, sans-serif;
  line-height: 1.55;
}
a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
input, select, textarea {
  width: 100%;
  border: 1px solid #c8d3cd;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(40, 99, 79, .12);
}
textarea { resize: vertical; }
label { display: grid; gap: 6px; color: #36453f; font-size: .9rem; font-weight: 650; }
small, .muted { color: var(--muted); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 68px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 10px clamp(18px, 4vw, 54px);
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(198, 211, 204, .9);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--brand);
  color: white;
  font-size: 1.25rem;
  font-weight: 850;
}
.brand strong, .brand small { display: block; line-height: 1.15; }
.brand small { margin-top: 3px; font-size: .72rem; }
.main-nav { display: flex; align-items: center; gap: 22px; }
.main-nav a { color: #35453f; font-size: .92rem; font-weight: 650; }
.user-menu { display: flex; align-items: center; gap: 14px; text-align: right; }
.user-menu strong, .user-menu small { display: block; line-height: 1.2; }
.user-menu small { font-size: .72rem; margin-top: 3px; }
.nav-toggle { display: none; border: 0; background: transparent; font-size: 1.4rem; }

.page-shell { width: min(1480px, calc(100% - 36px)); margin: 28px auto 70px; }
.login-shell { width: min(1120px, calc(100% - 30px)); min-height: calc(100vh - 90px); display: grid; place-items: center; margin-top: 0; }
.footer { padding: 22px; text-align: center; color: #728079; font-size: .78rem; }

.page-heading, .case-hero {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 22px;
}
.page-heading h1, .case-hero h1 { margin: 2px 0 4px; line-height: 1.15; font-size: clamp(1.8rem, 3vw, 2.65rem); letter-spacing: -.03em; }
.page-heading p, .case-hero p { margin: 0; color: var(--muted); }
.eyebrow { color: var(--brand-2); font-size: .72rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.heading-actions, .case-hero-actions, .form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }

.primary-button, .secondary-button, .button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 9px;
  padding: 9px 15px;
  border: 1px solid transparent;
  font-weight: 750;
  font-size: .9rem;
  text-decoration: none !important;
}
.primary-button, .button-link { background: var(--brand); color: #fff !important; border-color: var(--brand); }
.primary-button:hover, .button-link:hover { background: #0f3025; }
.secondary-button { background: #fff; color: var(--brand); border-color: #bdcbc4; }
.secondary-button:hover { border-color: var(--brand); background: var(--brand-soft); }
.link-button { border: 0; background: transparent; color: var(--brand-2); padding: 3px; font-weight: 700; }
.full-width { width: 100%; }

.alert { margin-bottom: 18px; padding: 12px 15px; border: 1px solid; border-radius: 10px; font-weight: 650; }
.alert-success { color: var(--success); background: var(--success-soft); border-color: #b9ddca; }
.alert-error { color: var(--danger); background: var(--danger-soft); border-color: #e7bcb7; }
.inspection-point { margin-bottom: 18px; }
.checklist-summary { margin: 0 0 16px; padding-left: 22px; }
.inline-form { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.inline-form > input { flex: 1 1 300px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; }
.checkbox-label input { width: auto; }
.qr-panel { max-width: 520px; margin: 0 auto; text-align: center; display: grid; gap: 14px; }
.qr-panel img { width: min(100%, 330px); margin: auto; image-rendering: pixelated; }
.narrow-panel { max-width: 520px; margin: 0 auto; }
.inspection-check-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.inspection-check-item:last-child { border-bottom: 0; }
.inspection-result-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; padding: 0; border: 0; }
.inspection-result-buttons legend { width: 100%; margin-bottom: 2px; color: #36453f; font-size: .9rem; font-weight: 650; }
.result-button { display: block; flex: 1 1 180px; cursor: pointer; }
.result-button input { position: absolute; opacity: 0; pointer-events: none; }
.result-button span { display: flex; align-items: center; justify-content: center; min-height: 58px; border: 2px solid; border-radius: 10px; font-weight: 850; font-size: 1.05rem; }
.result-safe span { border-color: #2f9b62; background: #e5f4ec; color: #17683e; }
.result-unsafe span { border-color: #c64d45; background: #fbe9e7; color: #a42e29; }
.inspection-result-buttons:has(input:checked) .result-button input:not(:checked) + span { border-color: #c8d0cd; background: #edf0ef; color: #89928e; }
.result-button input:checked + span { box-shadow: 0 0 0 4px rgba(23, 63, 50, .16); transform: translateY(-1px); }
.camera-capture { display: grid; gap: 7px; }
.camera-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 12px; border: 1px solid var(--brand); border-radius: 9px; background: var(--brand-soft); color: var(--brand); font-weight: 800; cursor: pointer; }
.camera-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.camera-file-name { display: block; }
.inspection-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 18px; margin-bottom: 18px; }
.inspection-percent { font-size: 1.65rem; font-weight: 850; }
.inspection-record-heading { margin-top: 24px; }
.inspection-history { margin-top: 18px; }
.inspection-history summary { color: var(--brand-2); font-weight: 750; cursor: pointer; }
.inspection-history .table-wrap { margin-top: 14px; }
.inspection-safe { color: var(--success); }
.inspection-unsafe { color: var(--danger); }
@media (max-width: 600px) {
  .inspection-mobile-panel { padding: 16px; }
  .inspection-check-item { padding: 20px 0; }
  .inspection-check-item h2 { font-size: 1.08rem; }
  .inspection-result-buttons { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .result-button { width: 100%; }
  .result-button span { min-height: 54px; }
  .inspection-mobile-panel .form-grid { grid-template-columns: 1fr; gap: 13px; }
  .inspection-mobile-panel .span-2 { grid-column: auto; }
  .inspection-mobile-panel .form-actions { justify-content: stretch; }
  .inspection-mobile-panel .form-actions .primary-button { width: 100%; min-height: 48px; }
  .camera-button { min-height: 78px; }
}

/* QR inspection is regularly used one-handed on a phone. */
@media (max-width: 600px) {
  body:has(.inspection-mobile-panel) { overflow-x: hidden; }
  body:has(.inspection-mobile-panel) .topbar { min-height: 58px; padding: 7px 14px; gap: 8px; }
  body:has(.inspection-mobile-panel) .brand { min-width: 0; }
  body:has(.inspection-mobile-panel) .brand-mark { width: 34px; height: 34px; font-size: 1rem; }
  body:has(.inspection-mobile-panel) .brand strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
  body:has(.inspection-mobile-panel) .brand small,
  body:has(.inspection-mobile-panel) .top-actions,
  body:has(.inspection-mobile-panel) .breadcrumb-bar,
  body:has(.inspection-mobile-panel) .floating-report-button { display: none; }
  body:has(.inspection-mobile-panel) .page-shell { min-height: auto; margin: 0; padding: 16px 12px 40px; }
  body:has(.inspection-mobile-panel) .page-heading { margin-bottom: 14px; }
  body:has(.inspection-mobile-panel) .page-heading h1 { font-size: 1.28rem; line-height: 1.28; }
  body:has(.inspection-mobile-panel) .page-heading p { font-size: .84rem; }
  body:has(.inspection-mobile-panel) .inspection-mobile-panel { padding: 14px; border-radius: 12px; }
  body:has(.inspection-mobile-panel) .alert { margin-bottom: 14px; padding: 10px 12px; font-size: .9rem; }
  body:has(.inspection-mobile-panel) .inspection-check-item { padding: 18px 0; }
  body:has(.inspection-mobile-panel) .inspection-check-item h2 { margin: 0 0 10px; font-size: 1rem; line-height: 1.4; }
  body:has(.inspection-mobile-panel) input,
  body:has(.inspection-mobile-panel) textarea { font-size: 16px; }
  body:has(.inspection-mobile-panel) .result-button span { min-height: 52px; font-size: 1rem; }
  body:has(.inspection-mobile-panel) .camera-button { min-height: 54px; }
  body:has(.inspection-mobile-panel) .form-actions .primary-button { min-height: 52px; font-size: 1rem; }
}

.panel {
  background: var(--surface);
  border: 1px solid rgba(199, 212, 205, .9);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(18px, 2vw, 26px);
}
.panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 18px; margin-bottom: 18px; }
.panel-heading h2 { margin: 2px 0 0; font-size: 1.2rem; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card {
  position: relative;
  overflow: hidden;
  min-height: 152px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px;
  border: 1px solid #cfdbd5;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.metric-card::after { content: ""; position: absolute; width: 90px; height: 90px; border-radius: 50%; right: -25px; top: -30px; background: var(--brand-soft); }
.metric-card span { color: var(--muted); font-weight: 700; }
.metric-card strong { margin: 8px 0 2px; font-size: 2.7rem; line-height: 1; letter-spacing: -.04em; }
.metric-card a, .metric-card small { margin-top: auto; font-size: .8rem; }
.metric-warning { border-color: #ead19c; background: #fffbf3; }
.metric-warning::after { background: var(--warning-soft); }
.metric-danger { border-color: #e3b1aa; background: #fff9f8; }
.metric-danger::after { background: var(--danger-soft); }

.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.panel-wide { grid-column: 1 / -1; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th { text-align: left; color: #596861; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; background: var(--surface-soft); }
th, td { padding: 12px 10px; border-bottom: 1px solid #e0e7e3; vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8faf9; }
.table-action { white-space: nowrap; font-weight: 750; }
.empty-state { text-align: center; color: var(--muted); padding: 28px !important; }
.text-danger { color: var(--danger); }

.status, .severity {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  background: #edf1ef;
  color: #52615b;
}
.status-reported, .status-open { background: #edf1ef; color: #52615b; }
.status-triage, .status-awaiting_approval { background: var(--warning-soft); color: var(--warning); }
.status-investigating, .status-in_progress { background: #e5eef8; color: #2e5d8e; }
.status-capa_in_progress, .status-completed { background: #eee9fa; color: #6247a3; }
.status-effectiveness_review { background: #e6f1f1; color: #236768; }
.status-closed, .status-verified { background: var(--success-soft); color: var(--success); }
.status-reopened { background: var(--danger-soft); color: var(--danger); }
.status-cancelled { background: #ececec; color: #666; }
.severity-1 { background: #e8f5ed; color: #246845; }
.severity-2 { background: #e9f2e0; color: #55751e; }
.severity-3 { background: #fff1ce; color: #8c5c0a; }
.severity-4 { background: #fde4d5; color: #a04b17; }
.severity-5 { background: #f7dedd; color: #a32d28; }

.bar-list { display: grid; gap: 14px; }
.bar-row > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; margin-bottom: 5px; }
.bar-track { height: 7px; border-radius: 999px; background: #e7eeea; overflow: hidden; }
.bar-track span { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--brand-2); }
.status-summary { display: grid; gap: 8px; }
.status-summary a { display: flex; justify-content: space-between; padding: 11px 12px; border-radius: 9px; background: var(--surface-soft); color: var(--ink); }
.status-summary a:hover { text-decoration: none; background: var(--brand-soft); }

.filter-panel { margin-bottom: 18px; padding: 16px 20px; }
.filter-form, .upload-form { display: flex; align-items: end; gap: 12px; }
.filter-form label { min-width: 180px; }
.grow { flex: 1; }

.form-panel { padding: 0; overflow: hidden; }
.form-section { padding: clamp(20px, 3vw, 34px); border-bottom: 1px solid var(--line); }
.section-title { display: flex; gap: 14px; align-items: start; margin-bottom: 22px; }
.section-title > span { display: grid; place-items: center; min-width: 38px; height: 38px; background: var(--brand); color: white; border-radius: 10px; font-size: .8rem; font-weight: 850; }
.section-title h2 { margin: 0; font-size: 1.2rem; }
.section-title p { margin: 2px 0 0; color: var(--muted); font-size: .85rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.span-2 { grid-column: 1 / -1; }
.stack-form { display: grid; gap: 16px; }
.stack-form.compact { gap: 10px; }
.checkbox-label { display: flex; flex-direction: row; align-items: center; gap: 8px; align-self: end; min-height: 42px; }
.checkbox-label input { width: 18px; height: 18px; }
.injury-selection { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; }
.injury-selection legend { padding: 0 4px; font-weight: 700; }
.injury-selection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.body-part-picker > label { display: block; margin-bottom: 6px; font-weight: 700; }
.body-part-controls { display: flex; gap: 10px; align-items: end; }
.body-part-controls select { flex: 1; }
.body-part-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.body-part-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; background: var(--brand-soft); border-radius: 999px; font-size: .85rem; }
.body-part-tag button { padding: 0; color: var(--brand); background: transparent; border: 0; font-size: 1rem; line-height: 1; cursor: pointer; }
.required-mark { color: var(--danger); }
.injured-person-card { margin: 14px 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.injured-person-card h3 { margin: 0; }
.injured-person-card .severity-number { font-size: inherit !important; line-height: inherit; font-weight: 700; }
.injury-total { display: grid; justify-items: end; gap: 2px; color: var(--muted); font-size: .78rem; }.injury-total strong { color: var(--brand-2); font-size: 1.05rem; }.person-treatment-total { margin: 10px 0; text-align: right; color: var(--muted); }.person-treatment-total strong { color: var(--brand-2); }
.property-damage-actions { min-width: 140px; white-space: nowrap; text-align: right; }
.investigation-team { border: 1px solid var(--line); border-radius: 8px; padding: 12px; }.investigation-member-row { display: flex !important; flex-flow: row nowrap; align-items: center; gap: 8px; margin-bottom: 8px; }.investigation-member-row input, .investigation-member-row select { min-width: 0; }.investigation-member-row input[name="member_employee_code"] { flex: 1 1 22%; }.investigation-member-row input[name="member_full_name"] { flex: 1 1 38%; }.investigation-member-row select { flex: 1 1 30%; }.member-remove { flex: 0 0 42px; min-width: 42px; border: 1px solid #e7b6b2; border-radius: 7px; background: #fff; color: #b1322c; cursor: pointer; }
@media (max-width: 700px) { .investigation-member-row { flex-wrap: wrap; }.investigation-member-row input, .investigation-member-row select { flex-basis: 100% !important; }.member-remove { margin-left: auto; } }
.property-damage-actions > form { display: inline; margin: 0 0 0 5px; }
.property-damage-actions details { position: relative; display: inline-block; }
.property-damage-actions summary { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 48px; min-width: 48px; height: 30px; min-height: 30px; padding: 0; border: 1px solid #bfd3c8; border-radius: 7px; color: var(--brand-2); cursor: pointer; font-size: .82rem; font-weight: 750; list-style: none; }
.property-damage-actions summary::-webkit-details-marker { display: none; }
.property-damage-actions details .compact-form { position: static; margin-top: 8px; white-space: normal; }
.injured-person-card .panel-heading { align-items: flex-start; gap: 18px; }
.person-meta { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 4px; }
.person-meta span:not(:last-child)::after { content: "·"; margin-left: 8px; color: #aab6b0; }
.record-actions { display: flex; align-items: center; justify-content: end; gap: 7px; flex-wrap: wrap; }
.record-actions > strong { margin-right: 5px; white-space: nowrap; }
.record-actions form { display: inline; margin: 0; }
.record-actions details, .injured-person-card td:last-child details { position: relative; display: inline-block; }
.record-actions summary, .injured-person-card td:last-child summary { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 48px; min-width: 48px; height: 30px; min-height: 30px; padding: 0; border: 1px solid #bfd3c8; border-radius: 7px; color: var(--brand-2); cursor: pointer; font-size: .82rem; font-weight: 750; list-style: none; }
.record-actions summary::-webkit-details-marker, .injured-person-card td:last-child summary::-webkit-details-marker { display: none; }
.compact-form { min-width: 320px; padding: 14px; border: 1px solid #cbd8d1; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(20, 38, 30, .16); }
.record-actions details[open] { flex-basis: 100%; }
.record-actions details .compact-form { position: static; margin-top: 8px; }
.injured-person-card th:last-child, .injured-person-card td:last-child { min-width: 140px; text-align: right; }
.injured-person-card td:last-child { white-space: nowrap; }
.injured-person-card td:last-child > form { display: inline; margin-left: 5px; }
.injured-person-card td:last-child details .compact-form { position: static; margin-top: 8px; white-space: normal; }
.danger-button { box-sizing: border-box; width: 48px; min-width: 48px; height: 30px; min-height: 30px; padding: 0; color: #b1322c; border: 1px solid #e7b6b2; border-radius: 7px; background: #fff; font-size: .82rem; font-weight: 750; cursor: pointer; }
.injury-edit-dialog { width: min(680px, calc(100% - 28px)); max-height: min(80vh, 760px); overflow: auto; }
.injury-edit-dialog .form-grid, .injury-edit-dialog .stack-form { margin-top: 18px; }
.injury-edit-dialog .compact-form { min-width: 0; padding: 0; border: 0; box-shadow: none; }
.preview-button { min-height: 28px; padding: 0 10px; border: 1px solid #bfd3c8; border-radius: 7px; background: #fff; color: var(--brand-2); font-weight: 750; cursor: pointer; }
.photo-name { display: inline-block; max-width: 150px; margin-left: 6px; overflow: hidden; vertical-align: middle; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.image-preview-dialog { width: min(900px, calc(100% - 28px)); }
.image-preview-dialog img { display: block; max-width: 100%; max-height: 70vh; margin: 18px auto 0; object-fit: contain; }
@media (max-width: 760px) { .injured-person-card .panel-heading { display: grid; } .record-actions { justify-content: start; } .injury-selection-grid { grid-template-columns: 1fr; } }
.sticky-actions { position: sticky; bottom: 0; z-index: 10; padding: 14px 24px; background: rgba(255,255,255,.94); border-top: 1px solid var(--line); backdrop-filter: blur(10px); }
.required-emphasis textarea { border-left: 4px solid var(--accent); }

.login-card { width: 100%; display: grid; grid-template-columns: 1.15fr .85fr; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 28px 70px rgba(19, 55, 44, .18); }
.login-hero { min-height: 560px; display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 6vw, 76px); color: white; background: linear-gradient(145deg, #0e3025, #205642 62%, #326f59); }
.login-hero .eyebrow { color: #a8d6c4; }
.login-hero h1 { margin: 14px 0; font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.02; letter-spacing: -.04em; }
.login-hero p { max-width: 540px; color: #d3e7df; }
.login-points { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.login-points span { border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 7px 10px; font-size: .8rem; }
.login-form-wrap { display: grid; place-items: center; padding: clamp(28px, 5vw, 58px); }
.login-form-wrap form { width: min(100%, 360px); }
.login-form-wrap h2 { margin: 4px 0; font-size: 1.8rem; }
.demo-accounts { border: 1px dashed #c4d0ca; border-radius: 10px; padding: 10px 12px; }
.demo-accounts summary { cursor: pointer; font-weight: 750; color: var(--brand-2); }
.demo-accounts code { display: block; margin-top: 7px; color: #55635d; font-size: .78rem; }

.case-hero { align-items: center; padding: 24px 26px; background: linear-gradient(120deg, #fff, #f1f6f3); border: 1px solid #cbd8d1; border-radius: var(--radius); box-shadow: var(--shadow); }
.case-id-row { display: flex; align-items: center; gap: 10px; }
.case-id-row code { padding: 3px 7px; border-radius: 5px; background: var(--brand-soft); color: var(--brand); font-weight: 750; }
.case-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.case-metrics article { min-height: 105px; display: flex; flex-direction: column; padding: 16px; background: #fff; border: 1px solid #d2dcd7; border-radius: 12px; }
.case-metrics span { color: var(--muted); font-size: .75rem; font-weight: 750; }
.case-metrics strong { margin-top: 5px; font-size: 1.3rem; }
.case-metrics small { margin-top: auto; font-size: .72rem; }
.severity-number { font-size: 2rem !important; line-height: 1; }
.severity-text-1 { color: #26734f; } .severity-text-2 { color: #627b20; } .severity-text-3 { color: #9a6813; } .severity-text-4 { color: #b05a20; } .severity-text-5 { color: #b1322c; }
.case-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 18px; align-items: start; }
.case-sidebar { position: sticky; top: 88px; display: grid; gap: 12px; }
.section-nav, .sidebar-card { padding: 14px; border: 1px solid #ced9d3; border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.section-nav { display: grid; gap: 4px; }
.section-nav a { padding: 9px 10px; border-radius: 8px; color: #405049; font-weight: 700; font-size: .86rem; }
.section-nav a:hover { text-decoration: none; background: var(--brand-soft); color: var(--brand); }
.sidebar-card h3 { margin: 4px 0 12px; font-size: 1rem; }
.legal-flag { margin-top: 12px; border-radius: 8px; padding: 9px; background: var(--warning-soft); color: var(--warning); font-size: .78rem; font-weight: 750; }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .8rem; }
.check-list li::before { content: "○"; margin-right: 7px; color: #87938d; }
.check-list li.done::before { content: "●"; color: var(--success); }
.case-content { display: grid; gap: 18px; min-width: 0; }
.anchor-section { scroll-margin-top: 90px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.detail-grid div { padding: 13px; border-radius: 9px; background: var(--surface-soft); }
.detail-grid dt { color: var(--muted); font-size: .75rem; font-weight: 750; }
.detail-grid dd { margin: 4px 0 0; white-space: pre-wrap; }

.timeline { display: grid; margin: 6px 0 18px 8px; border-left: 2px solid #b4c5bc; }
.timeline article { position: relative; display: grid; grid-template-columns: 145px 1fr; gap: 14px; padding: 0 0 20px 20px; }
.timeline article::before { content: ""; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 0 4px #e6efeb; }
.timeline time { color: var(--brand); font-size: .78rem; font-weight: 800; }
.timeline p { margin: 0 0 3px; white-space: pre-wrap; }
.inline-create, .action-update { margin-top: 14px; border: 1px dashed #bdcbc4; border-radius: 10px; padding: 12px 14px; }
.inline-create summary, .action-update summary { cursor: pointer; color: var(--brand-2); font-weight: 800; }
.inline-create[open] summary, .action-update[open] summary { margin-bottom: 14px; }

.action-list { display: grid; gap: 14px; }
.action-card { padding: 17px; border: 1px solid #d2dcd7; border-radius: 12px; background: #fbfcfb; }
.action-card.overdue { border-left: 5px solid var(--danger); }
.action-card-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.action-card h3 { margin: 4px 0 0; font-size: 1rem; white-space: pre-wrap; }
.action-id { color: var(--brand-2); font-size: .68rem; font-weight: 850; letter-spacing: .08em; }
.action-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.action-meta span { display: grid; padding: 9px; border-radius: 8px; background: #eef3f0; font-size: .8rem; font-weight: 700; }
.action-meta small { font-size: .66rem; font-weight: 650; }
.progress { width: 100%; height: 8px; overflow: hidden; border-radius: 999px; background: #dde6e1; }
.progress span { display: block; height: 100%; background: var(--brand-2); border-radius: inherit; }

.file-list { display: grid; gap: 8px; margin-bottom: 14px; }
.file-list a { display: flex; align-items: center; gap: 12px; padding: 11px; border: 1px solid #d4ddd8; border-radius: 9px; color: var(--ink); }
.file-list a:hover { text-decoration: none; background: var(--surface-soft); }
.file-list strong, .file-list small { display: block; }
.file-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); font-weight: 850; }
.upload-form label { min-width: 200px; }

.split-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 18px; align-items: start; }
.settings-grid { display: grid; gap: 18px; }
.setting-group { padding: 22px 26px; }
.setting-group h2 { margin: 2px 0; }
.table-actions { white-space: nowrap; }
.danger-link { color: var(--danger); margin-left: 10px; }
.modal-dialog { width: min(500px, calc(100% - 28px)); border: 0; border-radius: 16px; padding: 28px; color: var(--ink); box-shadow: 0 22px 60px rgba(20, 38, 30, .28); }
.investigation-member-dialog { width: min(520px, calc(100% - 28px)); }
.evidence-table .table-actions { display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.evidence-table .table-actions > form, .evidence-table .table-actions > details { position: relative; display: inline-block; margin: 0; }
.evidence-table .table-actions summary { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 10px; border: 1px solid #bfd3c8; border-radius: 7px; color: var(--brand-2); cursor: pointer; font-size: .82rem; font-weight: 750; list-style: none; }
.evidence-table .table-actions summary::-webkit-details-marker { display: none; }
.evidence-table .table-actions details .compact-form { position: absolute; z-index: 20; top: 36px; right: 0; min-width: 290px; margin: 0; white-space: normal; }
.modal-dialog::backdrop { background: rgba(18, 31, 25, .52); backdrop-filter: blur(2px); }
.modal-dialog h2 { margin: 0 0 3px; }
.modal-close { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1.6rem; line-height: 1; }
.modal-danger { border-top: 5px solid var(--danger); }
.danger-button { border: 0; border-radius: 9px; padding: 11px 16px; background: var(--danger); color: #fff; font-weight: 800; cursor: pointer; }
.error-card { width: min(620px, 100%); margin: 80px auto; padding: 42px; text-align: center; background: #fff; border: 1px solid #d1dcd6; border-radius: 20px; box-shadow: var(--shadow); }
.error-code { font-size: 4rem; line-height: 1; color: var(--danger); font-weight: 900; }
.error-card h1 { margin-bottom: 5px; }
.error-card p { color: var(--muted); margin-bottom: 24px; }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .case-metrics { grid-template-columns: repeat(3, 1fr); }
  .case-layout { grid-template-columns: 210px minmax(0,1fr); }
  .action-meta { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .topbar { grid-template-columns: auto auto 1fr; gap: 12px; }
  .nav-toggle { display: block; }
  .main-nav { display: none; position: absolute; left: 18px; right: 18px; top: 64px; flex-direction: column; align-items: stretch; gap: 5px; padding: 12px; background: #fff; border: 1px solid #ced9d3; border-radius: 12px; box-shadow: var(--shadow); }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 8px; }
  .user-menu { justify-self: end; }
  .user-menu > div { display: none; }
  .login-card { grid-template-columns: 1fr; }
  .login-hero { min-height: auto; padding: 42px 30px; }
  .login-hero h1 { font-size: 2.4rem; }
  .dashboard-grid, .split-grid { grid-template-columns: 1fr; }
  .panel-wide { grid-column: auto; }
  .case-layout { grid-template-columns: 1fr; }
  .case-sidebar { position: static; grid-template-columns: repeat(2, 1fr); }
  .section-nav { grid-column: 1 / -1; display: flex; overflow-x: auto; }
  .section-nav a { white-space: nowrap; }
  .filter-form, .upload-form { flex-wrap: wrap; }
  .filter-form label, .upload-form label { flex: 1 1 240px; }
}

@media (max-width: 620px) {
  .page-shell { width: min(100% - 20px, 1480px); margin-top: 18px; }
  .topbar { padding-left: 12px; padding-right: 12px; }
  .brand small { display: none; }
  .page-heading, .case-hero { align-items: flex-start; flex-direction: column; }
  .heading-actions, .case-hero-actions { width: 100%; justify-content: flex-start; }
  .metric-grid, .case-metrics { grid-template-columns: 1fr 1fr; }
  .form-grid, .detail-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .case-sidebar { grid-template-columns: 1fr; }
  .timeline article { grid-template-columns: 1fr; gap: 3px; }
  .action-meta { grid-template-columns: 1fr; }
  .action-card-head { flex-direction: column; }
  .login-shell { width: min(100% - 18px, 1120px); }
  .login-hero { padding: 34px 22px; }
  .login-form-wrap { padding: 30px 22px; }
  .sticky-actions { position: static; }
}

@media print {
  .topbar, .footer, .heading-actions, .case-sidebar, .alert { display: none !important; }
  body { background: #fff; }
  .page-shell { width: 100%; margin: 0; }
  .panel, .case-hero { box-shadow: none; break-inside: avoid; }
}

/* Clinexa healthcare CRM dashboard theme */
:root { --ink:#202b4a; --muted:#7a859f; --surface:#fff; --surface-soft:#f4f6fc; --canvas:#f5f7fc; --line:#e5e9f3; --brand:#4b55c9; --brand-2:#6875e8; --brand-soft:#eef0ff; --accent:#37c3a0; --danger:#e45b72; --danger-soft:#fff0f3; --warning:#db9a34; --warning-soft:#fff7e9; --success:#28a887; --success-soft:#e9faf5; --shadow:0 10px 30px rgba(46,59,111,.07); --radius:18px; }
body { background:var(--canvas); }
body::before { content:""; position:fixed; width:520px; height:520px; top:-260px; right:-180px; z-index:-1; border-radius:50%; background:radial-gradient(circle,rgba(104,117,232,.16),transparent 68%); }
a { color:var(--brand); }
input, select, textarea { border-color:#dfe4f1; background:#fcfdff; }
input:focus, select:focus, textarea:focus { border-color:var(--brand-2); box-shadow:0 0 0 4px rgba(104,117,232,.14); }
.topbar { position:fixed; inset:0 auto 0 0; width:258px; min-height:100vh; height:100vh; display:flex; flex-direction:column; align-items:stretch; gap:22px; padding:28px 18px 20px; background:#fff; border:0; border-right:1px solid var(--line); box-shadow:none; backdrop-filter:none; }
.brand { padding:4px 10px; }.brand-mark { width:42px; height:42px; border-radius:14px; background:linear-gradient(135deg,#5967db,#7b86ee); box-shadow:0 8px 18px rgba(75,85,201,.24); }.brand strong { font-size:1.1rem; letter-spacing:-.03em; }.brand small { color:var(--muted); font-size:.68rem; }
.main-nav { width:100%; display:grid; gap:5px; align-items:stretch; }.main-nav a { display:flex; align-items:center; min-height:42px; padding:0 13px; border-radius:10px; color:#69738e; font-weight:700; }.main-nav a:hover { background:var(--brand-soft); color:var(--brand); text-decoration:none; }.main-nav .button-link { background:var(--brand); color:#fff !important; box-shadow:0 7px 15px rgba(75,85,201,.18); }
.user-menu { width:100%; margin-top:auto; padding:15px 12px; display:grid; grid-template-columns:1fr auto; gap:9px; text-align:left; border:1px solid var(--line); border-radius:14px; background:#fafbff; }.user-menu > div { grid-column:1 / -1; }.user-menu .link-button { color:var(--brand); font-size:.78rem; }.user-menu form { justify-self:end; }
.page-shell { width:auto; max-width:1540px; margin:34px 36px 70px 294px; }.footer { margin-left:258px; color:#929ab0; }.page-heading h1, .case-hero h1 { font-weight:800; color:#202b4a; }.eyebrow { color:var(--brand); }
.primary-button, .button-link { background:var(--brand); border-color:var(--brand); box-shadow:0 7px 14px rgba(75,85,201,.16); }.primary-button:hover, .button-link:hover { background:#3e48b6; }.secondary-button { color:var(--brand); border-color:#dce1f0; }.secondary-button:hover { border-color:var(--brand-2); background:var(--brand-soft); }
.panel { border-color:var(--line); box-shadow:var(--shadow); }.metric-card { min-height:144px; border-color:var(--line); box-shadow:none; }.metric-card::after { background:#eef0ff; }.metric-card strong { color:#293460; }.metric-card:nth-child(2)::after { background:#edfaff; }.metric-card:nth-child(3)::after { background:var(--warning-soft); }.metric-card:nth-child(4)::after { background:var(--danger-soft); }
th { color:#7a859f; background:#f7f8fd; }th, td { border-bottom-color:var(--line); }tbody tr:hover { background:#fafbff; }.status-investigating, .status-in_progress { background:#ecf4ff; color:#3674c9; }.status-capa_in_progress, .status-completed { background:#f1edff; color:#7555c5; }.bar-track { background:#edf0f8; }.bar-track span { background:linear-gradient(90deg,#6875e8,#8a94f2); }.status-summary a { background:#f7f8fd; }.status-summary a:hover { background:var(--brand-soft); }.modal-dialog { box-shadow:0 24px 64px rgba(40,48,100,.24); }
@media (max-width:860px) { .topbar { position:sticky; inset:auto; width:auto; min-height:68px; height:auto; display:grid; grid-template-columns:auto auto 1fr; gap:12px; padding:10px 18px; border-right:0; border-bottom:1px solid var(--line); }.main-nav { width:auto; }.user-menu { width:auto; margin:0; padding:0; display:flex; border:0; background:transparent; }.page-shell { width:min(100% - 36px,1480px); margin:28px auto 70px; }.footer { margin-left:0; } }
.main-nav a.button-link[href="/cases/new"] { display:none; }
.floating-report-button { position:fixed; right:32px; bottom:28px; z-index:60; display:inline-flex; align-items:center; gap:9px; min-height:52px; padding:0 21px; border-radius:16px; background:linear-gradient(135deg,#4b55c9,#6977e7); color:#fff !important; font-weight:800; box-shadow:0 12px 28px rgba(75,85,201,.34); text-decoration:none !important; transition:transform .16s ease, box-shadow .16s ease; }.floating-report-button:hover { transform:translateY(-3px); color:#fff !important; box-shadow:0 16px 34px rgba(75,85,201,.42); }.floating-report-button span { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.19); font-size:1.25rem; line-height:1; }
@media (max-width:620px) { .floating-report-button { right:18px; bottom:18px; min-height:48px; padding:0 17px; border-radius:14px; } }

/* Isora-inspired SaaS/GRC visual system */
:root { --ink:#19233d; --muted:#6f7890; --surface:#fff; --surface-soft:#f6f8fb; --canvas:#f4f6fa; --line:#e4e8f0; --brand:#0879f9; --brand-2:#167fe8; --brand-soft:#eaf4ff; --accent:#13a287; --danger:#d94b61; --danger-soft:#fff0f2; --warning:#e99928; --warning-soft:#fff6e9; --success:#159979; --success-soft:#e8faf5; --shadow:0 8px 24px rgba(25,35,61,.055); --radius:12px; }
body { background:#f4f6fa; font-family:Inter, "Noto Sans Thai", "Leelawadee UI", Tahoma, Arial, sans-serif; } body::before { display:none; }
.topbar { width:270px; padding:26px 16px 18px; border-right:1px solid #e5e9f1; }.brand { padding:7px 10px 22px; border-bottom:1px solid var(--line); }.brand-mark { width:38px; height:38px; border-radius:10px; background:#0879f9; box-shadow:none; }.brand strong { font-size:1rem; letter-spacing:-.02em; }.brand small { font-size:.66rem; }
.main-nav { margin-top:4px; gap:3px; }.main-nav a { min-height:40px; border-radius:8px; padding:0 12px; font-size:.88rem; }.main-nav a:hover { background:#edf5ff; color:#0879f9; }.main-nav .button-link { background:#0879f9; box-shadow:none; }
.user-menu { border-radius:10px; background:#f8faff; border-color:#e3e8f1; }.page-shell { max-width:1600px; margin:30px 34px 64px 304px; }.footer { margin-left:270px; }
.page-heading { margin-bottom:20px; }.page-heading h1, .case-hero h1 { font-size:clamp(1.8rem,2.6vw,2.45rem); letter-spacing:-.04em; }.eyebrow { color:#0879f9; font-size:.68rem; letter-spacing:.11em; }
.primary-button, .button-link { background:#0879f9; border-color:#0879f9; box-shadow:none; border-radius:8px; }.primary-button:hover, .button-link:hover { background:#006adb; }.secondary-button { border-radius:8px; color:#43516d; border-color:#dce3ee; box-shadow:none; }.secondary-button:hover { color:#0879f9; border-color:#9bcaff; background:#f4f9ff; }
.panel { padding:22px; border-radius:12px; border-color:#e3e8f0; box-shadow:var(--shadow); }.metric-grid { gap:16px; }.metric-card { min-height:132px; padding:19px; border-radius:12px; border-color:#e4e9f1; background:#fff; }.metric-card::after { width:70px; height:70px; right:-22px; top:-24px; background:#edf6ff; }.metric-card strong { font-size:2.35rem; color:#17213b; }.metric-card:nth-child(2)::after { background:#edf8f5; }.metric-card:nth-child(3)::after { background:#fff6e9; }.metric-card:nth-child(4)::after { background:#fff0f2; }
th { background:#f7f9fc; color:#76819a; font-size:.68rem; letter-spacing:.07em; } th, td { padding:13px 11px; border-bottom-color:#e9edf3; } tbody tr:hover { background:#fbfcff; }.status { padding:5px 8px; border-radius:6px; font-size:.68rem; }.status-investigating, .status-in_progress { background:#eaf4ff; color:#0879d9; }.status-capa_in_progress, .status-completed { background:#eef1ff; color:#5b67c9; }
.filter-panel, .form-panel { border-radius:12px; }.bar-track { background:#eaf0f6; height:6px; }.bar-track span { background:#0879f9; }.status-summary a { border:1px solid #edf0f5; border-radius:8px; background:#fff; }.status-summary a:hover { background:#f5f9ff; border-color:#cfe5ff; }
.floating-report-button { background:#0879f9; border-radius:10px; box-shadow:0 10px 22px rgba(8,121,249,.25); }.floating-report-button:hover { box-shadow:0 14px 28px rgba(8,121,249,.3); }.modal-dialog { border-radius:12px; box-shadow:0 24px 64px rgba(25,35,61,.2); }
@media (max-width:860px) { .topbar { width:auto; padding:10px 18px; }.brand { padding:2px 5px; border:0; }.page-shell { width:min(100% - 36px,1480px); margin:28px auto 70px; }.footer { margin-left:0; } }

/* Isora top navigation layout */
@media (min-width:861px) {
  .topbar { position:sticky; inset:auto; top:0; width:100%; min-height:74px; height:auto; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:34px; padding:12px 34px; border-right:0; border-bottom:1px solid var(--line); box-shadow:0 2px 12px rgba(25,35,61,.03); }
  .brand { padding:2px 4px; border:0; }
  .main-nav { width:auto; display:flex; align-items:center; justify-content:flex-start; gap:4px; }
  .main-nav a { min-height:38px; padding:0 12px; }
  .user-menu { width:auto; margin:0; padding:0; display:flex; align-items:center; gap:12px; border:0; background:transparent; }
  .user-menu > div { display:block; }.user-menu form { justify-self:auto; }
  .page-shell { width:min(100% - 68px, 1600px); max-width:none; margin:30px auto 64px; }
  .footer { margin-left:0; }
}

/* Reference-inspired HR appraisal workspace */
:root { --ink:#102b4d; --muted:#6e85a4; --surface:#fff; --surface-soft:#f5f8fc; --canvas:#fff; --line:#dce4ee; --brand:#246bfd; --brand-2:#145ecb; --brand-soft:#eaf1ff; --shadow:0 2px 7px rgba(25,56,96,.055); --radius:8px; }
body { background:#fff; color:var(--ink); font-family:"Noto Sans Thai", "Leelawadee UI", Tahoma, Arial, sans-serif; }
.topbar { position:fixed; z-index:90; inset:0 0 auto 0; width:100%; height:55px; min-height:55px; display:flex; align-items:center; gap:0; padding:0; background:#111; border:0; box-shadow:none; }
.brand { height:55px; display:flex; align-items:center; gap:15px; color:#fff; }
.brand:hover { color:#fff; }.brand-mark { width:45px; height:55px; border-radius:0; background:#246bfd; box-shadow:none; font-size:1.1rem; }.brand strong { font-size:1rem; font-weight:800; }.brand small { display:none; }
.top-actions { display:flex; align-items:center; gap:17px; margin-left:auto; padding-right:18px; color:#e6edf8; }.top-actions button { position:relative; width:20px; height:30px; padding:0; border:0; color:#e6edf8; background:transparent; font-size:1.2rem; line-height:1; }.top-actions button:hover { color:#fff; }.top-actions b { position:absolute; top:0; right:-7px; display:grid; place-items:center; min-width:13px; height:13px; border-radius:50%; background:#f02e46; color:white; font-size:.58rem; }.avatar { display:grid; place-items:center; width:32px; height:32px; margin-left:3px; border-radius:50%; background:#cfe0ff; color:#1551a9; font-size:.82rem; font-weight:800; }
.breadcrumb-bar { position:fixed; z-index:80; top:55px; right:0; left:0; height:48px; display:flex; align-items:center; gap:15px; padding-left:13px; background:#fff; border-bottom:1px solid #1e3553; color:#54729a; font-size:.83rem; }.breadcrumb-bar strong { color:#1a5eae; font-size:1rem; }.breadcrumb-bar span:nth-child(2) { color:#172e4b; font-weight:700; }.breadcrumb-bar b { color:#172e4b; }.breadcrumb-divider { color:#a9b7c9; }
.main-nav { position:fixed; z-index:75; top:103px; bottom:0; left:0; width:285px; display:flex; flex-direction:column; gap:2px; padding:12px 0 116px; overflow-y:auto; background:#f8fafc; border-right:1px solid #d8e0e9; }.main-nav a { position:relative; display:flex; align-items:center; min-height:40px; padding:0 18px; color:#172e4b; font-size:.86rem; font-weight:500; }.main-nav a span { width:27px; color:#223c5b; font-size:1.08rem; }.main-nav a i { margin-left:auto; color:#243b58; font-size:1.4rem; font-style:normal; }.main-nav a:hover { color:#135dd4; background:#edf4ff; text-decoration:none; }.main-nav a.active { color:#155ee4; background:#dceaff; font-weight:800; }.main-nav a.active::after { position:absolute; top:0; right:0; bottom:0; width:4px; background:#246bfd; content:""; }
.user-menu { position:fixed; z-index:76; bottom:0; left:0; width:285px; display:grid; grid-template-columns:1fr; gap:3px; padding:15px 13px 16px; text-align:left; background:#fff; border:0; border-top:1px solid #1e3553; border-radius:0; }.user-menu strong { color:#142c4b; font-size:.86rem; }.user-menu small { color:#587194; font-size:.72rem; }.user-menu .link-button { padding:0; color:#587194; font-size:.76rem; text-align:left; }.user-menu form { margin-top:3px; }.nav-toggle { display:none; }
.page-shell { width:auto; max-width:none; min-height:calc(100vh - 103px); margin:103px 0 0 285px; padding:34px 32px 80px; }.footer { display:none; }.floating-report-button { right:26px; bottom:24px; border-radius:8px; background:#246bfd; box-shadow:0 8px 22px rgba(36,107,253,.25); }
.page-shell { width:calc(100% - 285px); box-sizing:border-box; overflow-x:hidden; } body { overflow-x:hidden; } .table-wrap { max-width:100%; }
.page-heading { display:block; margin:0 0 26px; }.page-heading .eyebrow { display:none; }.page-heading h1 { margin:0 0 5px; color:#102b4d; font-size:1.4rem; font-weight:800; letter-spacing:0; }.page-heading p { color:#58759a; font-size:.93rem; }.heading-actions { position:absolute; top:122px; right:32px; }.heading-actions .secondary-button { display:none; }.primary-button, .button-link { min-height:38px; border-radius:6px; background:#246bfd; border-color:#246bfd; font-size:.83rem; }.primary-button:hover, .button-link:hover { background:#145ed2; }.secondary-button { border-radius:6px; color:#315170; }
.shortcut-section { margin-bottom:31px; }.section-kicker { display:block; margin:0 0 10px; color:#476b99; font-size:.78rem; font-weight:700; }.shortcut-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }.shortcut-card { display:flex; align-items:center; min-height:80px; padding:14px 16px; border:1px solid #dce4ee; border-radius:8px; background:#fff; color:#102b4d; box-shadow:var(--shadow); }.shortcut-card:hover { border-color:#b9d0f6; background:#fbfdff; text-decoration:none; }.shortcut-icon { display:grid; place-items:center; width:40px; height:40px; margin-right:16px; border-radius:7px; background:#eef3f8; color:#1f639d; font-size:1.35rem; }.shortcut-card strong { font-size:.87rem; }.shortcut-card i { margin-left:auto; color:#bfd0e5; font-size:1.55rem; font-style:normal; }
.metric-grid { gap:16px; margin-bottom:0; }.metric-card { min-height:130px; padding:20px; border:1px solid #dce4ee; border-radius:8px; box-shadow:var(--shadow); }.metric-card::before { display:none; }.metric-card::after { width:48px; height:48px; top:20px; right:20px; background:#edf3f8; }.metric-card:nth-child(2)::after { background:#edf6f0; }.metric-card:nth-child(3)::after { background:#fbf5e9; }.metric-card:nth-child(4)::after { background:#f3effa; }.metric-card span { color:#49698f; font-size:.79rem; font-weight:500; }.metric-card strong { margin-top:7px; color:#102b4d; font-size:2rem; }.metric-card a, .metric-card small { color:#8296b5; font-size:.72rem; }.dashboard-grid { margin-top:32px; gap:16px; }.panel { border-color:#dce4ee; border-radius:8px; box-shadow:var(--shadow); }.panel-heading h2 { color:#102b4d; }.eyebrow { color:#3068a6; }
@media (max-width:960px) { .shortcut-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:860px) { .topbar { position:sticky; }.brand { padding-left:0; }.brand-mark { width:48px; }.brand strong { font-size:.86rem; }.top-actions { gap:10px; padding-right:10px; }.top-actions button:nth-child(-n+3) { display:none; }.breadcrumb-bar { position:sticky; top:55px; }.main-nav { position:fixed; top:103px; z-index:100; transform:translateX(-100%); transition:transform .2s ease; }.main-nav.is-open { transform:translateX(0); }.nav-toggle { display:block; order:2; margin-right:10px; color:white; }.page-shell { margin:0; min-height:calc(100vh - 103px); padding:26px 18px 72px; }.user-menu { display:none; }.heading-actions { position:static; margin-top:14px; }.shortcut-grid { grid-template-columns:1fr; }.floating-report-button { right:18px; bottom:18px; } }

/* Annual performance appraisal dashboard theme */
:root { --ink:#17352d; --muted:#71847e; --surface:#ffffff; --surface-soft:#f4f8f6; --canvas:#f0f5f2; --line:#dce8e1; --brand:#18775b; --brand-2:#29936f; --brand-soft:#e4f3eb; --accent:#d4a143; --danger:#c95656; --danger-soft:#fff0ef; --warning:#bb7d20; --warning-soft:#fff6e5; --success:#18775b; --success-soft:#e4f5ec; --shadow:0 9px 24px rgba(32,73,59,.07); --radius:10px; }
body { background:linear-gradient(180deg,#eef5f1 0,#f7faf8 340px); } .topbar { background:#fff; border-bottom-color:#dce8e1; }.brand-mark { border-radius:10px; background:linear-gradient(145deg,#19765a,#36a479); }.main-nav a { color:#526c63; }.main-nav a:hover { color:#18775b; background:#e9f5ee; }.user-menu { background:#f6faf8; border-color:#dce8e1; }
.eyebrow { color:#248063; }.page-heading h1, .case-hero h1 { color:#17352d; }.primary-button, .button-link { background:#18775b; border-color:#18775b; }.primary-button:hover, .button-link:hover { background:#126448; }.secondary-button { color:#306355; border-color:#cfe0d7; }.secondary-button:hover { color:#18775b; border-color:#75bda1; background:#edf7f1; }
.panel { border-color:#dce8e1; box-shadow:var(--shadow); }.metric-card { position:relative; min-height:138px; border-color:#dce8e1; }.metric-card::before { content:""; position:absolute; left:0; bottom:0; width:100%; height:4px; background:#5eb590; }.metric-card:nth-child(2)::before { background:#79b4ca; }.metric-card:nth-child(3)::before { background:#dfb258; }.metric-card:nth-child(4)::before { background:#d97979; }.metric-card::after { background:#e6f4ed; }.metric-card:nth-child(2)::after { background:#e9f4f8; }.metric-card:nth-child(3)::after { background:#fff5df; }.metric-card:nth-child(4)::after { background:#fff0ef; }.metric-card strong { color:#183d32; }
th { background:#f2f7f4; color:#668078; } th, td { border-bottom-color:#e5eee9; } tbody tr:hover { background:#f8fbf9; }.status { border-radius:999px; }.status-investigating, .status-in_progress { background:#e9f4f8; color:#28748b; }.status-capa_in_progress, .status-completed { background:#e5f3eb; color:#18775b; }.bar-track { background:#e3eee8; }.bar-track span { background:#29936f; }.status-summary a { background:#f8fbf9; border-color:#e3eee8; }.status-summary a:hover { background:#ebf6ef; border-color:#c4e0d0; }
.floating-report-button { background:#18775b; box-shadow:0 11px 24px rgba(24,119,91,.27); }.floating-report-button:hover { box-shadow:0 14px 28px rgba(24,119,91,.34); }.modal-dialog { border-radius:10px; }.section-title > span { background:#18775b; }

/* Image preview keeps the source image large and sharp. */
.image-preview-dialog { width: min(1180px, calc(100vw - 48px)); max-width: none; max-height: calc(100vh - 48px); padding: 22px 26px; overflow: auto; }
.image-preview-dialog img { width: 100%; max-width: 1128px; max-height: calc(100vh - 190px); margin: 16px auto 12px; image-rendering: auto; object-fit: contain; }
.image-open-full-size { display: table; margin: 0 auto; color: var(--brand-2); font-weight: 750; text-decoration: underline; }
.evidence-upload-dialog { width: min(720px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; }
.evidence-upload-dialog-form { margin-top: 20px; }
.evidence-upload-dialog-form label { min-width: 0; }
.evidence-upload-dialog-form .grow { grid-column: span 2; }
.evidence-upload-dialog-form button { justify-self: end; }
#evidence .upload-form[hidden] { display: none !important; }
@media (max-width: 600px) {
  .evidence-upload-dialog { width: calc(100vw - 20px); padding: 22px 16px; }
  .evidence-upload-dialog-form { grid-template-columns: 1fr; gap: 13px; }
  .evidence-upload-dialog-form .grow { grid-column: auto; }
  .evidence-upload-dialog-form button { width: 100%; justify-self: stretch; }
}

/* Annual appraisal sidebar layout */
@media (min-width:861px) {
  .topbar { position:fixed; inset:0 auto 0 0; width:270px; min-height:100vh; height:100vh; display:flex; flex-direction:column; align-items:stretch; gap:20px; padding:26px 16px 18px; border-right:1px solid var(--line); border-bottom:0; box-shadow:none; }
  .brand { padding:7px 10px 22px; border-bottom:1px solid var(--line); }
  .main-nav { width:100%; margin-top:4px; display:grid; gap:3px; align-items:stretch; }
  .main-nav a { min-height:40px; padding:0 12px; }
  .user-menu { width:100%; margin-top:auto; padding:15px 12px; display:grid; grid-template-columns:1fr auto; gap:9px; text-align:left; border:1px solid var(--line); background:#f6faf8; }
  .user-menu > div { grid-column:1 / -1; }.user-menu form { justify-self:end; }
  .page-shell { width:auto; max-width:1540px; margin:30px 34px 64px 304px; }
  .footer { margin-left:270px; }
}

/* Final layout rules: keep this block last so legacy theme rules cannot override it. */
:root { --ink:#102b4d; --muted:#6e85a4; --surface:#fff; --surface-soft:#f5f8fc; --canvas:#fff; --line:#dce4ee; --brand:#246bfd; --brand-2:#145ecb; --brand-soft:#eaf1ff; --shadow:0 2px 7px rgba(25,56,96,.055); --radius:8px; }
body { background:#fff; color:var(--ink); }
.topbar { position:fixed; z-index:90; inset:0 0 auto 0; width:100%; height:55px; min-height:55px; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:0; padding:0; background:#111; border:0; box-shadow:none; }
.brand { height:55px; display:flex; align-items:center; gap:15px; padding:0; border:0; color:#fff; }.brand:hover { color:#fff; }.brand-mark { width:45px; height:55px; border-radius:0; background:#246bfd; box-shadow:none; font-size:1.1rem; }.brand strong { font-size:1rem; font-weight:800; }.brand small { display:none; }
.top-actions { display:flex; align-items:center; gap:17px; margin-left:auto; padding-right:18px; color:#e6edf8; }.top-actions button { position:relative; width:20px; height:30px; padding:0; border:0; color:#e6edf8; background:transparent; font-size:1.2rem; line-height:1; }.top-actions b { position:absolute; top:0; right:-7px; display:grid; place-items:center; min-width:13px; height:13px; border-radius:50%; background:#f02e46; color:#fff; font-size:.58rem; }.avatar { display:grid; place-items:center; width:32px; height:32px; margin-left:3px; border-radius:50%; background:#cfe0ff; color:#1551a9; font-size:.82rem; font-weight:800; }
.breadcrumb-bar { position:fixed; z-index:80; top:55px; right:0; left:0; height:48px; display:flex; align-items:center; gap:15px; padding-left:13px; background:#fff; border-bottom:1px solid #1e3553; color:#54729a; font-size:.83rem; }.breadcrumb-bar strong { color:#1a5eae; font-size:1rem; }.breadcrumb-bar span:nth-child(2), .breadcrumb-bar b { color:#172e4b; font-weight:700; }.breadcrumb-divider { color:#a9b7c9 !important; }
.main-nav { position:fixed; z-index:75; top:103px; bottom:0; left:0; width:285px; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:2px; margin:0; padding:12px 0 116px; overflow-y:auto; background:#f8fafc; border-right:1px solid #d8e0e9; }.main-nav a { position:relative; display:flex; flex:0 0 40px; align-items:center; min-height:40px; padding:0 18px; border-radius:0; color:#172e4b; font-size:.86rem; font-weight:500; }.main-nav a span { width:27px; color:#223c5b; font-size:1.08rem; }.main-nav a i { margin-left:auto; color:#243b58; font-size:1.4rem; font-style:normal; }.main-nav a:hover { color:#135dd4; background:#edf4ff; text-decoration:none; }.main-nav a.active { color:#155ee4; background:#dceaff; font-weight:800; }.main-nav a.active::after { position:absolute; top:0; right:0; bottom:0; width:4px; background:#246bfd; content:""; }
.user-menu { position:fixed; z-index:76; bottom:0; left:0; width:285px; display:grid; grid-template-columns:1fr; gap:3px; margin:0; padding:15px 13px 16px; text-align:left; background:#fff; border:0; border-top:1px solid #1e3553; border-radius:0; }.user-menu strong { color:#142c4b; font-size:.86rem; }.user-menu small { color:#587194; font-size:.72rem; }.user-menu .link-button { padding:0; color:#587194; font-size:.76rem; text-align:left; }.user-menu form { margin-top:3px; }
.page-shell { width:auto; max-width:none; min-height:calc(100vh - 103px); margin:103px 0 0 285px; padding:34px 32px 80px; }.footer { display:none; }.floating-report-button { right:26px; bottom:24px; border-radius:8px; background:#246bfd; box-shadow:0 8px 22px rgba(36,107,253,.25); }
.page-heading { display:block; margin:0 0 26px; }.page-heading .eyebrow { display:none; }.page-heading h1 { margin:0 0 5px; color:#102b4d; font-size:1.4rem; font-weight:800; letter-spacing:0; }.page-heading p { color:#58759a; font-size:.93rem; }.heading-actions { position:absolute; top:122px; right:32px; }.heading-actions .secondary-button { display:none; }.primary-button, .button-link { min-height:38px; border-radius:6px; background:#246bfd; border-color:#246bfd; font-size:.83rem; }.secondary-button { border-radius:6px; color:#315170; }
.shortcut-section { margin-bottom:31px; }.section-kicker { display:block; margin:0 0 10px; color:#476b99; font-size:.78rem; font-weight:700; }.shortcut-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }.shortcut-card { display:flex; align-items:center; min-height:80px; padding:14px 16px; border:1px solid #dce4ee; border-radius:8px; background:#fff; color:#102b4d; box-shadow:var(--shadow); }.shortcut-icon { display:grid; place-items:center; width:40px; height:40px; margin-right:16px; border-radius:7px; background:#eef3f8; color:#1f639d; font-size:1.35rem; }.shortcut-card strong { font-size:.87rem; }.shortcut-card i { margin-left:auto; color:#bfd0e5; font-size:1.55rem; font-style:normal; }
.metric-grid { gap:16px; margin-bottom:0; }.metric-card { min-height:130px; padding:20px; border:1px solid #dce4ee; border-radius:8px; box-shadow:var(--shadow); }.metric-card::before { display:none; }.metric-card::after { width:48px; height:48px; top:20px; right:20px; background:#edf3f8; }.metric-card strong { margin-top:7px; color:#102b4d; font-size:2rem; }.metric-card span { color:#49698f; font-size:.79rem; font-weight:500; }.metric-card a, .metric-card small { color:#8296b5; font-size:.72rem; }.dashboard-grid { margin-top:32px; gap:16px; }.panel { border-color:#dce4ee; border-radius:8px; box-shadow:var(--shadow); }
@media (max-width:960px) { .shortcut-grid, .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:860px) { .topbar { position:sticky; }.brand-mark { width:48px; }.brand strong { font-size:.86rem; }.top-actions { gap:10px; padding-right:10px; }.top-actions button:nth-child(-n+3) { display:none; }.breadcrumb-bar { position:sticky; top:55px; }.main-nav { position:fixed; top:103px; z-index:100; transform:translateX(-100%); transition:transform .2s ease; }.main-nav.open { transform:translateX(0); }.nav-toggle { display:block; order:2; margin-right:10px; color:#fff; }.page-shell { margin:0; min-height:calc(100vh - 103px); padding:26px 18px 72px; }.user-menu { display:none; }.heading-actions { position:static; margin-top:14px; }.shortcut-grid { grid-template-columns:1fr; }.floating-report-button { right:18px; bottom:18px; } }

/* Safety operations palette */
:root { --brand:#147a58; --brand-2:#1f956c; --brand-soft:#e6f4ed; --ink:#173d32; --muted:#658277; }
.brand-mark, .primary-button, .button-link, .floating-report-button { background:#147a58; border-color:#147a58; }.main-nav a.active { color:#147a58; background:#e6f4ed; }.main-nav a.active::after { background:#147a58; }.breadcrumb-bar strong { color:#147a58; }
.settings-nav { display:block; }.settings-nav summary { position:relative; display:flex; align-items:center; min-height:40px; padding:0 18px; color:#172e4b; cursor:pointer; font-size:.86rem; font-weight:500; list-style:none; }.settings-nav summary::-webkit-details-marker { display:none; }.settings-nav summary span { width:27px; color:#223c5b; font-size:1.08rem; }.settings-nav summary a { color:inherit; text-decoration:none; }.settings-nav summary i { margin-left:auto; font-style:normal; font-size:1.4rem; transition:transform .15s; }.settings-nav[open] summary i { transform:rotate(90deg); }.settings-nav summary.active { color:#147a58; background:#e6f4ed; font-weight:800; }.settings-nav > a { display:block; min-height:auto; padding:7px 18px 7px 45px; color:#58756b; font-size:.78rem; }.settings-nav > a.active { color:#147a58; background:#f0f8f4; font-weight:800; }.settings-nav > a.active::after { display:none; }

/* Keep desktop Case pages inside the viewport beside the fixed sidebar. */
@media (min-width: 861px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .page-shell { width: auto !important; max-width: none; min-width: 0; box-sizing: border-box; margin: 103px 0 0 285px; padding: 24px 18px 80px; }
  .table-wrap { max-width: 100%; }
  .case-layout { grid-template-columns: minmax(140px, 175px) minmax(0, 1fr); gap: 14px; min-width: 0; }
  .case-layout > *, .case-sidebar, .case-content { min-width: 0; }
}

/* The QR page is public, so it must not inherit the centred login shell. */
body.inspection-check-page { min-width: 0; background: #f5faf7; }
.inspection-check-shell { display: block; width: min(760px, calc(100% - 32px)) !important; min-height: 100vh; max-width: none; margin: 0 auto !important; padding: 34px 0 48px !important; }
.inspection-check-shell .page-heading { text-align: center; margin-bottom: 18px; }
.inspection-check-shell .page-heading h1 { font-size: clamp(1.5rem, 5vw, 2rem); }
.inspection-check-shell .inspection-mobile-panel { width: 100%; }
@media (max-width: 860px) {
  body.inspection-check-page { background: #fff; }
  .inspection-check-shell { width: 100% !important; min-height: 100dvh; margin: 0 !important; padding: max(16px, env(safe-area-inset-top)) 12px calc(32px + env(safe-area-inset-bottom)) !important; }
  .inspection-check-shell .page-heading { margin: 0 0 16px; }
  .inspection-check-shell .page-heading .eyebrow { display: none; }
  .inspection-check-shell .page-heading h1 { font-size: 1.45rem; }
  .inspection-check-shell .page-heading p { font-size: .9rem; }
  .inspection-check-shell .inspection-mobile-panel { padding: 14px; border: 0; border-radius: 0; box-shadow: none; }
}

/* A Case page already sits beside the main navigation.  On ordinary desktop
   widths, make its local navigation a compact top area so data forms retain
   their full usable width instead of being squeezed between two sidebars. */
@media (min-width: 861px) and (max-width: 2000px) {
  .case-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .case-sidebar { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sidebar-card { min-width: 0; }
  .panel-heading, .case-hero { min-width: 0; }
  .panel-heading > *, .case-hero > * { min-width: 0; }
}

.case-section-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; padding: 8px; }
.case-section-nav a { flex: 1 1 135px; min-width: 0; padding: 8px 10px; text-align: center; }
.analysis-topic-form { display: grid; gap: 14px; }
.analysis-topic-form .muted { margin: 0; }
.analysis-topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.analysis-topic-option { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; font-weight: 700; }
.analysis-topic-option:hover { border-color: var(--brand); background: var(--brand-soft); }
.analysis-topic-option input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--brand); }
.analysis-topic-readonly { margin: 0; }
.inspection-map-panel { overflow: hidden; }
.clinic-log .inline-form { margin-bottom: 14px; }.stock-move-form { display: flex; gap: 6px; align-items: center; }.stock-move-form select { min-width: 82px; }.stock-move-form input { width: 92px; }.stock-move-form input[name="note"] { width: 150px; }.stock-low td { background: #fff5f2; }
.clinic-medicine-picker { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }.clinic-medicine-picker .panel-heading { margin-bottom: 8px; }.clinic-medicine-picker .panel-heading small { display: block; margin-top: 3px; }.clinic-medicine-row { display: flex; gap: 8px; align-items: center; margin: 7px 0; }.clinic-medicine-row select { flex: 1; }.clinic-medicine-row input { width: 110px; }
@media (max-width: 700px) { .stock-move-form { flex-wrap: wrap; }.stock-move-form input[name="note"] { width: 100%; } }
.safety-alert-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }.safety-alert-card { display: grid; gap: 5px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); text-decoration: none; background: var(--surface-soft); }.safety-alert-card > span { font-size: .78rem; color: var(--muted); }.safety-alert-card strong { font-size: 1.55rem; line-height: 1; }.safety-alert-card small { color: var(--muted); font-size: .72rem; }.safety-alert-card.attention { border-left: 4px solid #d59b17; }.safety-alert-card.warning { border-left: 4px solid #d36a28; }.safety-alert-card.danger { border-left: 4px solid #c54d4d; }.trend-chart { height: 180px; display: flex; align-items: end; gap: 14px; padding: 8px 6px 0; border-top: 1px solid var(--line); }.trend-column { flex: 1; min-width: 55px; height: 100%; display: grid; grid-template-rows: 22px 1fr 22px; align-items: end; text-align: center; }.trend-column strong { color: var(--ink); font-size: .86rem; }.trend-bar { display: block; width: min(54px, 75%); min-height: 3px; margin: 0 auto; align-self: end; border-radius: 6px 6px 0 0; background: var(--brand); }.trend-column small { color: var(--muted); font-size: .68rem; }
.incident-trend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.incident-trend-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }.incident-trend-card h3 { margin: 0; font-size: 1rem; color: var(--ink); }.incident-trend-card p { margin: 3px 0 10px; color: var(--muted); font-size: .75rem; }.incident-chart { height: 170px; display: flex; align-items: end; gap: 5px; padding-top: 6px; border-top: 1px solid var(--line); }.incident-column { flex: 1; min-width: 0; height: 100%; display: grid; grid-template-rows: 21px 1fr 25px; align-items: end; text-align: center; }.incident-column strong { font-size: .75rem; color: var(--ink); }.incident-column > span { display: block; width: min(26px, 82%); min-height: 3px; margin: 0 auto; align-self: end; border-radius: 5px 5px 0 0; background: #2b76b9; }.incident-column small { overflow: hidden; color: var(--muted); font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.map-heading-actions { position: absolute; top: 0; right: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }.map-edit-button { margin-left: auto; }
@media (max-width: 620px) { .map-heading-actions { position: static; justify-content: flex-start; margin-top: 12px; }.map-edit-button { margin-left: 0; } }
.inspection-map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 14px; color: var(--muted); font-size: .86rem; }
.inspection-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.inspection-map-legend small { margin-left: auto; }
.map-marker-swatch { width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.16); }.map-marker-swatch.pending { background: #eab308; }.map-marker-swatch.safe { background: #159b62; }.map-marker-swatch.unsafe { background: #dc3d3d; }
.inspection-map { position: relative; width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; touch-action: none; }
.inspection-map-canvas { position: relative; width: 100%; min-width: 760px; }
.inspection-map-canvas > img { display: block; width: 100%; height: auto; user-select: none; }
.inspection-map-marker { position: absolute; z-index: 2; display: grid; grid-template-columns: 29px max-content; align-items: center; max-width: 220px; padding: 0; border: 0; background: transparent; color: #172d27; text-align: left; transform: translate(-50%, -50%); cursor: default; touch-action: none; }
.inspection-map-marker .marker-symbol { display: grid; place-items: center; grid-row: span 2; width: 29px; height: 29px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 7px rgba(0,0,0,.3); color: #fff; font-size: 1rem; font-weight: 900; }
.inspection-map-marker.pending .marker-symbol { background: #eab308; }.inspection-map-marker.safe .marker-symbol { background: #159b62; }.inspection-map-marker.unsafe .marker-symbol { background: #dc3d3d; }
.marker-label { padding: 3px 7px 1px; border-radius: 0 5px 0 0; background: rgba(255,255,255,.92); font-size: .76rem; font-weight: 800; line-height: 1.1; }.marker-detail { padding: 1px 7px 3px; border-radius: 0 0 5px 0; background: rgba(255,255,255,.92); color: #58756b; font-size: .68rem; line-height: 1.1; }
.inspection-map[data-can-position="true"][data-edit-mode="true"] .inspection-map-marker { cursor: grab; }.inspection-map[data-can-position="true"][data-edit-mode="true"] .inspection-map-marker:active { cursor: grabbing; }.inspection-map-marker:focus-visible { outline: 3px solid #246bfd; outline-offset: 3px; }
.inspection-map-empty { padding: 40px; color: var(--muted); text-align: center; }
.point-actions { display: flex; align-items: flex-end; }.point-action-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }.point-action-buttons > form, .point-action-buttons > details { margin: 0; }.point-actions summary.secondary-button { list-style: none; cursor: pointer; }.point-actions summary.secondary-button::-webkit-details-marker { display: none; }.point-edit-form { width: min(560px, 80vw); margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.point-edit-dialog { width: min(650px, calc(100% - 28px)); }.point-edit-dialog .point-edit-form { width: 100%; margin: 16px 0 0; box-shadow: none; }
.checklist-manage-list > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.checklist-item-actions { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }.checklist-item-actions > form, .checklist-item-actions > details { margin: 0; }.checklist-item-actions summary { cursor: pointer; list-style: none; }.checklist-item-actions summary::-webkit-details-marker { display: none; }.danger-link { color: #be3e3e; }.checklist-edit-form { width: min(480px, 78vw); padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.capa-attachment-input input { margin-top: 6px; }.capa-attachment-list { display: grid; gap: 7px; }.capa-attachment-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }.capa-attachment-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }.capa-attachment-row .table-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }.capa-attachment-row .table-actions form { margin: 0; }
.inspection-follow-up-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }.inspection-follow-up-summary a { display: grid; gap: 5px; padding: 16px; color: var(--ink); text-decoration: none; }.inspection-follow-up-summary a.active { border-color: var(--brand); background: var(--brand-soft); }.inspection-follow-up-summary span { color: var(--muted); font-size: .82rem; }.inspection-follow-up-summary strong { font-size: 1.65rem; }.follow-up-report .table-wrap { overflow-x: auto; }.follow-up-one-line td { white-space: nowrap; vertical-align: middle; }.inspection-photo-cell { width: 3cm; min-width: 3cm; }.inspection-photo-thumb { display: block; width: 3cm; height: 4cm; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-soft); cursor: pointer; }.inspection-photo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }.follow-up-one-line .inline-note { display: inline-block; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }.follow-up-one-line .preview-button { margin-left: .35rem; }.follow-up-one-line .inline-attachments { display: inline-flex; gap: .25rem; margin-left: .35rem; }.follow-up-actions { display: inline-flex; align-items: center; gap: 8px; }.follow-up-actions > form, .follow-up-actions > details { margin: 0; }.follow-up-edit { margin-top: 0; }.follow-up-edit summary { color: var(--brand); cursor: pointer; font-weight: 700; }.follow-up-edit form { width: min(500px, 70vw); margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.overdue-text { color: #c23c3c; font-weight: 700; }
.follow-up-filter { margin-bottom: 16px; }.follow-up-filter-form { display: grid; grid-template-columns: minmax(190px, 1.5fr) repeat(4, minmax(130px, 1fr)) auto; gap: 12px; align-items: end; }.follow-up-filter-form label { display: grid; gap: 5px; font-size: .78rem; font-weight: 700; color: var(--ink); }.follow-up-filter-form input, .follow-up-filter-form select { min-width: 0; }.follow-up-filter-actions { display: flex; gap: 8px; align-items: center; }.follow-up-filter-actions .secondary-button { text-decoration: none; }
.follow-up-edit-dialog { width: min(650px, calc(100% - 28px)); }.follow-up-edit-dialog form { margin-top: 16px; }.follow-up-attachments { display: grid; gap: 3px; margin-top: 7px; font-size: .76rem; }.follow-up-attachments span { overflow-wrap: anywhere; }
@media (max-width: 760px) { .inspection-follow-up-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }.follow-up-report .table-wrap { overflow-x: auto; }.follow-up-edit form { width: min(500px, calc(100vw - 60px)); } }
@media (max-width: 1000px) { .follow-up-filter-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }.follow-up-filter-actions { grid-column: span 3; } }
@media (max-width: 620px) { .follow-up-filter-form { grid-template-columns: 1fr; }.follow-up-filter-actions { grid-column: auto; } }
@media print { .topbar, .breadcrumb-bar, .floating-report-button, .page-heading button, .follow-up-edit, .main-nav { display: none !important; }.page-shell { margin: 0 !important; padding: 16px !important; }.follow-up-report { box-shadow: none; }.inspection-follow-up-summary { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 620px) { .checklist-manage-list > li { align-items: flex-start; flex-direction: column; }.checklist-item-actions { align-self: flex-end; } }
@media (max-width: 620px) { .point-actions { align-items: flex-start; margin-top: 10px; }.point-action-buttons { justify-content: flex-start; }.point-edit-form { width: 100%; } }
@media (max-width: 860px) { .inspection-map-panel { padding: 12px; }.inspection-map-legend { gap: 9px; font-size: .75rem; }.inspection-map-legend small { width: 100%; margin-left: 0; }.inspection-map-canvas { min-width: 680px; }.inspection-map-marker { max-width: 150px; }.marker-label { font-size: .67rem; }.marker-detail { font-size: .61rem; } }
@media (max-width: 860px) { .safety-alert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .incident-trend-grid { grid-template-columns: 1fr; }.incident-chart { gap: 10px; }.incident-column > span { width: min(42px, 78%); } }
@media (max-width: 500px) { .safety-alert-grid { grid-template-columns: 1fr; }.trend-chart { gap: 7px; }.trend-column { min-width: 42px; }.trend-column small { font-size: .6rem; } }
@media (min-width: 861px) {
  .page-shell { overflow: visible; padding-top: 84px; }
  .case-hero, .case-metrics, .case-layout {
    width: 100%;
    max-width: 1410px;
    margin-right: auto;
    margin-left: clamp(18px, 4vw, 80px);
  }
  .case-content, .case-content > .panel, .case-content .form-grid { width: 100%; max-width: 100%; min-width: 0; }
  .case-section-nav {
    position: fixed;
    top: 111px;
    left: calc(285px + clamp(18px, 4vw, 80px));
    width: min(1410px, calc(100vw - 510px));
    z-index: 85;
    margin: 0;
    box-shadow: 0 4px 12px rgba(23, 61, 50, .1);
  }
}