/* =============================================================
   Audit AI Reconciliation - stylesheet
   ============================================================= */

:root {
  --bg: #f2f7fd;
  --surface: #ffffff;
  --surface-2: #eef6ff;
  --surface-3: #f8fbff;
  --text: #0f2238;
  --muted: #63748a;
  --line: #d9e8f7;
  --line-soft: #e9f2fb;
  --blue: #0080ff;
  --blue-dark: #0066cc;
  --navy: #004b93;
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #4a3aa7;
  --critical: #d03b3b;
  --high: #ec835a;
  --medium: #fab219;
  --low: #0ca30c;
  --green-txt: #0a7a35;
  --amber-txt: #a06806;
  --red-txt: #b02a2a;
  --shadow: 0 10px 30px rgba(0, 75, 147, 0.07);
  --shadow-lg: 0 24px 60px rgba(0, 75, 147, 0.16);
  --radius: 10px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Kanit", system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.28; font-weight: 600; }
h1 { font-size: 28px; }
h2 { font-size: 19px; }
h3 { font-size: 15px; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 60;
  background: #fff;
  padding: 10px 16px;
  border-radius: 8px;
}
.skip-link:focus { left: 8px; }

/* ---------------- production login ---------------- */
.login-gate {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(280px, 440px);
  place-content: center;
  gap: 22px;
  padding: 28px;
  background:
    radial-gradient(circle at 15% 15%, rgba(0,128,255,.18), transparent 34%),
    linear-gradient(145deg, #003b76 0%, #0066cc 48%, #f2f7fd 48.1%);
}
.login-brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.login-brand .brand-mark { width: 48px; height: 48px; flex-basis: 48px; }
.login-brand p { margin: 0; font-size: 21px; font-weight: 600; }
.login-brand span { color: #d7ecff; font-size: 13px; }
.login-card {
  display: grid;
  gap: 15px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 16px;
  background: rgba(255,255,255,.97);
  box-shadow: var(--shadow-lg);
}
.login-card h1 { font-size: 30px; }
.login-lead { margin: -5px 0 4px; color: var(--muted); line-height: 1.55; }
.login-context-note {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid #cfe0f4;
  border-radius: 8px;
  background: #f1f7fe;
  color: #24425f;
  font-size: 12.5px;
  line-height: 1.45;
}
.login-context-note b { color: var(--blue-dark); }
.login-card label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; }
.login-card input {
  width: 100%; min-height: 46px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--text);
}
.login-submit { min-height: 46px; margin-top: 2px; }
.login-link { min-height: auto; padding: 2px; border: 0; background: transparent; color: var(--blue-dark); text-decoration: underline; }
.login-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.login-divider::before, .login-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.google-login {
  min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 16px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; color: var(--text); font: inherit; font-weight: 500; cursor: pointer;
}
.google-login:hover { background: #f7f9fc; border-color: #b7c8dc; }
.google-login:disabled { opacity: .6; cursor: wait; }
.google-login svg { width: 20px; height: 20px; flex: 0 0 20px; }
.login-error { margin: 0; padding: 10px 12px; border-radius: 8px; background: #fff0f0; color: var(--red-txt); font-size: 13px; }
.login-card small { color: var(--muted); text-align: center; }

/* ---------------- shell ---------------- */
.app-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns .2s ease;
}
.app-shell.sidebar-collapsed { grid-template-columns: 76px minmax(0, 1fr); }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 20px 16px;
  background: linear-gradient(180deg, #003b76 0%, #0066cc 55%, #0080ff 100%);
  color: #eef6ff;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}

.brand { display: flex; gap: 12px; align-items: center; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: #ffffff;
  color: var(--blue-dark);
  font-weight: 700;
  flex: 0 0 40px;
}
.brand p, .brand span, .source-panel p { margin: 0; }
.brand p { font-size: 17px; font-weight: 600; }
.brand span { color: #cde4ff; font-size: 11px; }
.nav-toggle {
  display: grid;
  place-items: center;
  margin-left: auto;
  background: rgba(255,255,255,.14);
  border: 0; color: #fff;
  border-radius: 8px;
  width: 40px; height: 40px;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
}
.app-shell.sidebar-collapsed .sidebar { padding-left: 12px; padding-right: 12px; overflow-x: hidden; }
.app-shell.sidebar-collapsed .brand { justify-content: center; flex-wrap: wrap; gap: 8px; }
.app-shell.sidebar-collapsed .brand > div:not(.brand-mark) { display: none; }
.app-shell.sidebar-collapsed .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
.app-shell.sidebar-collapsed .nav-toggle { order: 2; width: 38px; height: 34px; margin: 0; transform: rotate(180deg); }
.app-shell.sidebar-collapsed .nav-label { height: 1px; margin: 8px 0; overflow: hidden; opacity: .5; background: rgba(255,255,255,.25); color: transparent; }
.app-shell.sidebar-collapsed .nav-list a { position: relative; justify-content: center; min-height: 42px; padding: 10px; }
.app-shell.sidebar-collapsed .nav-list a > span { display: none; }
.app-shell.sidebar-collapsed .nav-list a svg { width: 20px; height: 20px; flex-basis: 20px; }
.app-shell.sidebar-collapsed .nav-count { position: absolute; top: 2px; right: 2px; min-width: 18px; padding: 0 4px; text-align: center; font-size: 9px; }

.nav-list { display: grid; gap: 2px; }
.nav-label {
  color: #a9d1ff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  margin: 14px 10px 4px;
  text-transform: uppercase;
}
.nav-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #dceeff;
  text-decoration: none;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  transition: background .15s, color .15s;
}
.nav-list a svg { width: 17px; height: 17px; fill: currentColor; opacity: .78; flex: 0 0 17px; }
.nav-list a span { flex: 1; }
.nav-list a:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-list a.active { background: #ffffff; color: var(--navy); font-weight: 500; }
.nav-list a.active svg { opacity: 1; }
.nav-count {
  background: rgba(255,255,255,.2);
  border-radius: 999px;
  font-size: 11px;
  padding: 1px 7px;
  font-weight: 500;
}
.nav-list a.active .nav-count { background: var(--surface-2); color: var(--navy); }

.source-panel {
  margin-top: auto;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(255,255,255,.08);
}
.source-panel p { font-weight: 600; margin-bottom: 8px; font-size: 13px; }
.source-panel span { display: block; color: #d7ecff; font-size: 12px; padding: 4px 0; }

.main { padding: 24px 26px 60px; min-width: 0; }

.audit-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.audit-flow a { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; box-shadow: var(--shadow); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.audit-flow a:hover { transform: translateY(-1px); border-color: #8dbbea; box-shadow: 0 6px 18px rgba(16,69,125,.12); }
.audit-flow a > i { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--blue-dark); font-size: 12px; font-style: normal; font-weight: 700; }
.audit-flow a span { display: grid; min-width: 0; }
.audit-flow a b { font-size: 12px; white-space: nowrap; }
.audit-flow a small { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-flow a.active { border-color: var(--blue-dark); background: #eef6ff; }
.audit-flow a.active > i { background: var(--blue-dark); color: #fff; }
.audit-flow a.warn > i { background: #fff2d8; color: #9a5b00; }
.audit-flow a.ok > i { background: #e5f7ed; color: #147943; }
.audit-file-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 12px; border: 1px solid #cfe2f8; border-radius: 10px; background: #f5f9ff; }
.audit-file-guide > div,
.audit-file-guide > button { display: flex; align-items: center; gap: 9px; min-width: 0; }
.audit-file-guide > button { width: 100%; padding: 0; border: 0; background: transparent; color: var(--text); font-family: inherit; text-align: left; cursor: pointer; }
.audit-file-guide > button:hover b { color: var(--blue-dark); text-decoration: underline; }
.audit-file-guide i { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-dark); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; }
.audit-file-guide span { display: grid; min-width: 0; }
.audit-file-guide b { font-size: 12px; }
.audit-file-guide small { color: var(--muted); font-size: 10px; }

/* ---------------- topbar ---------------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 18px;
}
.eyebrow { margin: 0 0 3px; color: var(--blue-dark); font-size: 12px; font-weight: 600; }
.top-summary { max-width: 760px; margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.signed-user { display: grid; gap: 1px; font-size: 11px; color: var(--muted); }
.signed-user b { color: var(--text); font-size: 12px; font-weight: 500; }
.signed-user small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 600; }

.access-user-form { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr auto; gap: 14px; align-items: end; }
.access-user-form > label { display: grid; gap: 7px; font-weight: 700; color: var(--text); }
.access-user-form input[type="email"], .access-user-form input[type="text"], .access-user-form select { width: 100%; }
.access-user-form .access-active { display: flex; align-items: center; min-height: 46px; gap: 8px; white-space: nowrap; }
.access-user-form fieldset { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.access-submit { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.access-submit small { color: var(--muted); }
.access-user-form input[readonly] { background: #eef3f8; color: var(--muted); cursor: not-allowed; }
.access-user-form legend { padding: 0 8px; font-weight: 800; }
.company-access-grid { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 8px; }
.company-access-grid label { display: inline-flex; align-items: center; gap: 6px; }
.access-user-row { cursor: pointer; }
.access-user-row:hover { background: #f2f7ff; }
@media (max-width: 1080px) { .access-user-form { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .access-user-form { grid-template-columns: 1fr; } .access-user-form fieldset { grid-column: 1; } }
.role-switch { display: grid; gap: 2px; font-size: 11px; color: var(--muted); }
.role-switch select { min-height: 38px; }

button, select, input[type="text"], input[type="search"], input[type="number"], input[type="date"], textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  min-height: 40px;
  padding: 0 12px;
}
textarea { padding: 10px 12px; min-height: 64px; resize: vertical; width: 100%; }
button { cursor: pointer; transition: filter .15s, background .15s; }
button:hover:not(:disabled) { filter: brightness(.97); }
button:disabled { opacity: .5; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.primary-button { border-color: var(--blue-dark); background: var(--blue-dark); color: #fff; font-weight: 500; }
.ghost-button { background: var(--surface); }
.sm { min-height: 34px; font-size: 13px; padding: 0 12px; }
.xs { min-height: 30px; font-size: 12px; padding: 0 10px; }
.locked { opacity: .45; }
.link-btn {
  border: 0; background: none; color: var(--blue-dark);
  padding: 0; min-height: auto; text-decoration: underline; font-size: 14px;
}
.file-name-link { display: grid; gap: 2px; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--blue-dark); text-align: left; }
.file-name-link span { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.file-name-link small { color: var(--muted); font-size: 10px; text-decoration: none; }
.file-name-link:hover span { color: var(--blue); }
.file-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.file-actions a { display: inline-grid; place-items: center; text-decoration: none; }
.file-state { display: inline-flex; align-items: center; gap: 7px; min-width: 130px; }
.file-state > i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-weight: 700; }
.file-state > span { display: grid; line-height: 1.2; }
.file-state b { font-size: 12px; }
.file-state small { color: var(--muted); font-size: 10px; }
.file-state.ok > i { background: #e5f7ed; color: #147943; }
.file-state.wait > i { background: #eef1f5; color: #65758a; }
.file-state.bad > i { background: #feeaea; color: #b42318; }
.related-files { display: grid; gap: 9px; margin: 10px 0 12px; padding: 12px; border: 1px solid #cfe2f8; border-radius: 10px; background: #f5f9ff; }
.related-files > div:first-child { display: grid; gap: 2px; }
.related-files > div:first-child b { color: var(--navy); font-size: 13px; }
.related-files > div:first-child small { color: var(--muted); font-size: 11px; }
.related-file-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.file-result { display: grid; gap: 2px; min-height: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; text-align: left; }
.file-result span { color: var(--blue-dark); font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-result small { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-empty-help { display: flex; align-items: center; gap: 10px; margin: 10px 0 12px; padding: 12px; border: 1px solid #f0d59b; border-radius: 10px; background: #fff9ec; }
.search-empty-help b { font-size: 13px; }
.search-empty-help span { flex: 1; color: var(--muted); font-size: 11px; }
.icon-btn { border: 0; background: var(--surface-2); width: 34px; height: 34px; border-radius: 8px; }

/* ---------------- filters ---------------- */
.quick-controls[hidden] { display: none; }
.quick-controls {
  display: block;
  margin-bottom: 12px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.filter-bar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.filter-bar-head > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.filter-bar-head strong { font-size: 13px; white-space: nowrap; }
.filter-bar-head span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-fields {
  display: grid;
  grid-template-columns: repeat(6, minmax(105px, 1fr));
  gap: 8px;
  padding-top: 9px;
  margin-top: 7px;
  border-top: 1px solid var(--line);
}
.filter-fields[hidden] { display: none; }
.quick-controls label { display: grid; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 500; }
.quick-controls input, .quick-controls select { width: 100%; min-height: 32px; padding: 0 8px; background: var(--surface-3); border-radius: 7px; font-size: 12px; }
.filter-summary {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.filter-summary b { color: var(--text); }
.filter-bar-head > div { flex-wrap: wrap; }
.filter-bar-head small { flex-basis: 100%; color: var(--muted); }
.case-filter-heading strong { font-size: 16px; }
.case-filter-heading p { margin: 4px 0 16px; color: var(--muted); font-size: 13px; }
.case-filter-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.case-filter-fields label { display: grid; gap: 7px; font-size: 14px; font-weight: 600; min-width: 0; }
.case-filter-fields input, .case-filter-fields select { width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); }
.case-filter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.case-filter-actions small { color: var(--muted); }
.case-filter-current { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: var(--surface-2); border-radius: 10px; padding: 12px; margin-bottom: 16px; font-size: 13px; }
.case-filter-current span { padding: 4px 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .case-filter-fields { grid-template-columns: 1fr; }
  .case-filter-actions { align-items: flex-start; flex-direction: column; }
}

.view-root { outline: none; display: grid; gap: 16px; }
.next-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid #9bc5ef;
  border-left: 4px solid var(--blue);
  border-radius: 10px;
  background: linear-gradient(100deg, #f0f7ff, #fff);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.next-action-bar.warn { border-left-color: var(--medium); background: linear-gradient(100deg, #fff9e9, #fff); }
.next-action-bar.bad { border-left-color: var(--critical); background: linear-gradient(100deg, #fff5f5, #fff); }
.next-action-bar.ok { border-left-color: var(--low); background: linear-gradient(100deg, #f1fbf5, #fff); }
.next-action-bar > div { display: grid; min-width: 0; }
.next-action-bar span { color: var(--blue-dark); font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.next-action-bar b { margin: 1px 0; font-size: 14px; }
.next-action-bar small { color: var(--muted); font-size: 11.5px; }
.next-action-bar:hover { border-color: var(--blue); }

/* ---------------- panels & grids ---------------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  min-width: 0;
}
.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.panel-heading.mt { margin-top: 20px; }
.inline-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.grid-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.grid-talk { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(280px,1fr); gap: 16px; }

/* ---------------- status tiles ---------------- */
.status-strip { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
.status-strip.six { grid-template-columns: repeat(6, minmax(0,1fr)); }
.status-strip.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.status-strip.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.status-strip article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--s1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 15px 16px;
}
.status-strip article > span { color: var(--muted); font-size: 13px; }
.status-strip strong { display: block; font-size: 27px; line-height: 1.15; margin: 6px 0 4px; font-weight: 600; }
.status-strip small { color: var(--muted); font-size: 12px; }
.status-strip .tile-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.status-strip .ok { border-left-color: var(--low); }
.status-strip .warn { border-left-color: var(--medium); }
.status-strip .warn strong { color: var(--amber-txt); }
.status-strip .bad { border-left-color: var(--critical); }
.status-strip .bad strong { color: var(--red-txt); }
.action-tiles article,
.action-card,
.action-row { cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s, background .15s; }
.action-tiles article:hover,
.action-card:hover { transform: translateY(-2px); border-color: #8dbbea; box-shadow: 0 8px 20px rgba(16,69,125,.12); }
.action-row:hover td { background: #f0f7ff; }
.action-card:focus-visible,
.action-row:focus-visible,
.next-action-bar:focus-visible { outline: 3px solid rgba(15,111,214,.25); outline-offset: 2px; }

/* ---------------- live production overview ---------------- */
.live-loading { min-height: 180px; display: flex; align-items: center; justify-content: center; gap: 18px; }
.spinner { width: 34px; height: 34px; border: 3px solid #dce8f6; border-top-color: var(--blue); border-radius: 50%; animation: live-spin .8s linear infinite; }
@keyframes live-spin { to { transform: rotate(360deg); } }
.action-overview {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 22px; border: 1px solid #b9d9fa; border-radius: var(--radius);
  background: linear-gradient(120deg, #eaf5ff, #fff); box-shadow: var(--shadow);
}
.action-overview h2 { margin: 2px 0 4px; }
.action-overview p { margin: 0; color: var(--muted); }
.live-main-grid { align-items: start; }
.company-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); gap: 10px; }
.company-overview-card { padding: 12px 13px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdff; }
.company-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.company-card-head strong { display: block; font-size: 18px; }
.company-card-head span, .company-card-head small { color: var(--muted); font-size: 12px; }
.company-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 5px; margin: 8px 0 6px; }
.company-metrics span { padding: 6px; border-radius: 7px; background: #f0f4f8; color: var(--muted); font-size: 11px; text-align: center; }
.company-metrics b { display: block; margin-top: 2px; color: var(--text); font-size: 15px; }
.company-metrics .ok { background: #eaf8ef; }
.company-metrics .warn { background: #fff5df; }
.company-metrics .bad { background: #fff0f0; }
.company-card-action { display: flex; justify-content: flex-end; gap: 5px; color: var(--blue); font-size: 12px; font-weight: 700; }
.company-overview-card:focus-visible { outline: 3px solid rgba(15,111,214,.25); outline-offset: 2px; }
.company-rule-layout { grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); }
.company-group-panel { min-width: 0; }
.company-group-grid { display: grid; gap: 14px; }
.company-group-card {
  padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdff;
  box-shadow: 0 3px 10px rgba(25, 66, 110, .05);
}
.company-group-card.active { border-color: #9fc8ee; background: linear-gradient(145deg, #f6fbff, #fff); }
.company-group-card.pending { background: #f8fafc; }
.company-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.company-group-head strong { display: block; color: #173b61; font-size: 19px; }
.company-group-head span:not(.badge) { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.company-subcompany-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 7px; }
.company-subcompany {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px; min-width: 0; padding: 9px 10px;
  border: 1px solid var(--line-soft); border-radius: 9px; background: #fff; color: var(--text); text-align: left;
  font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.company-subcompany:hover { border-color: #7eb4e8; box-shadow: 0 4px 12px rgba(16, 69, 125, .1); transform: translateY(-1px); }
.company-subcompany:focus-visible { outline: 3px solid rgba(15,111,214,.25); outline-offset: 2px; }
.company-subcompany span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.company-subcompany b { color: #153d66; font-size: 15px; }
.company-subcompany small { color: var(--muted); font-size: 10px; }
.company-subcompany i { color: var(--muted); font-size: 10.5px; font-style: normal; }
.company-subcompany.has-data { border-left: 3px solid var(--blue); }
.company-rule-details { margin-top: 12px; border: 1px solid #c8ddf2; border-radius: 10px; background: #f4f9ff; overflow: hidden; }
.company-rule-details summary { padding: 9px 11px; color: #174e83; font-size: 13px; font-weight: 700; cursor: pointer; }
.company-rule-details ol { display: grid; gap: 6px; margin: 0; padding: 3px 16px 10px 32px; color: #344d66; font-size: 12px; line-height: 1.55; }
.company-rule-details p { margin: 0; padding: 8px 11px; border-top: 1px solid #d6e6f5; background: #fff; color: #6c7e90; font-size: 11px; }
.company-group-pending { display: grid; gap: 2px; margin-top: 10px; padding: 10px 11px; border: 1px dashed #cbd5e1; border-radius: 9px; background: #fff; }
.company-group-pending b { color: #475569; font-size: 12px; }
.company-group-pending span { color: var(--muted); font-size: 11px; }
.company-group-totals { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.company-group-totals span { padding: 5px 8px; border-radius: 7px; background: #edf3f8; color: var(--muted); font-size: 10.5px; }
.company-group-totals .ok { background: #eaf8ef; }
.company-group-totals .warn { background: #fff5df; }
.company-group-totals .bad { background: #fff0f0; }
.company-group-totals b { color: var(--text); font-size: 12px; }
.audit-rule-book { border-color: #bdd8f2; background: linear-gradient(180deg, #f8fbff, #fff); }
.audit-rule-book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.audit-rule-book-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.audit-rule-book-card.selected { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,128,255,.09); }
.audit-rule-book-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); background: #edf6ff; }
.audit-rule-book-card header strong { display: block; color: #153d66; font-size: 17px; }
.audit-rule-book-card header small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.audit-rule-book-card ol { display: grid; gap: 7px; margin: 0; padding: 13px 18px 14px 35px; color: #344d66; font-size: 12px; line-height: 1.55; }
.cross-day-rule-flow { display: grid; grid-template-columns: auto minmax(150px,1fr) auto minmax(190px,1.2fr) auto minmax(190px,1.2fr); align-items: center; gap: 9px; margin-top: 12px; padding: 12px 14px; border: 1px solid #f0d893; border-radius: 11px; background: #fff9e8; color: #5d4a18; }
.cross-day-rule-flow strong { color: #7a5700; }
.cross-day-rule-flow span { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; line-height: 1.45; }
.cross-day-rule-flow span b { display: grid; place-items: center; flex: 0 0 20px; height: 20px; border-radius: 50%; background: #e3a900; color: #fff; font-size: 10px; }
.cross-day-rule-flow i { color: #b68500; font-style: normal; }
.cross-day-rule-flow em { grid-column: 2 / -1; color: #8b6810; font-size: 11px; font-style: normal; }
.kind-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.kind-chips i { padding: 3px 7px; border-radius: 999px; background: #edf4fc; color: #315d88; font-size: 10px; font-style: normal; }
.behavior-list { display: grid; gap: 8px; }
.behavior-list > div { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.behavior-list b { font-size: 18px; }
.behavior-list small { color: var(--muted); }
.exception-summary { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.exception-summary h3 { margin-bottom: 8px; }
.exception-summary > div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; color: var(--muted); }
.exception-summary b { color: var(--text); }
.live-table td { vertical-align: top; }
.spark { flex: 0 0 auto; opacity: .9; }
@media (max-width: 1120px) {
  .company-rule-layout { grid-template-columns: 1fr; }
  .audit-rule-book-grid { grid-template-columns: 1fr; }
  .cross-day-rule-flow { grid-template-columns: 1fr; }
  .cross-day-rule-flow i { display: none; }
  .cross-day-rule-flow em { grid-column: 1; }
}
@media (max-width: 620px) {
  .company-subcompany-list { grid-template-columns: 1fr; }
  .company-subcompany span { align-items: flex-start; flex-direction: column; gap: 2px; }
}

/* ---------------- pipeline ---------------- */
.pipeline { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; }
.pipeline div {
  display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pipeline strong {
  display: grid; place-items: center;
  flex: 0 0 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2); color: var(--blue-dark); font-size: 13px;
}
.pipeline span { font-size: 13px; line-height: 1.3; }
.pipeline .done strong { background: var(--low); color: #fff; }
.pipeline .active { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,128,255,.12); }
.pipeline .active strong { background: var(--blue-dark); color: #fff; }

/* ---------------- charts ---------------- */
.chart { width: 100%; min-height: 40px; }
.chart svg { display: block; overflow: visible; }
.c-axis { fill: #7c8ea2; font-size: 11px; font-family: "Kanit", sans-serif; }
.c-val { fill: #0f2238; font-size: 11.5px; font-weight: 500; font-family: "Kanit", sans-serif; }
.c-hlabel { fill: #40526a; font-size: 12.5px; font-family: "Kanit", sans-serif; }
.c-bar, .c-hbar, .c-seg { transition: opacity .12s; cursor: pointer; }
.c-bar:hover, .c-hbar:hover, .c-seg:hover { opacity: .82; }
.c-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.c-legend.static { margin-top: 8px; }
.c-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.c-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.c-leg b { color: var(--text); font-weight: 500; }
.chart-note { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.small-mult-title {
  display: flex; align-items: center; gap: 7px;
  margin: 6px 0 2px; font-size: 12.5px; color: var(--muted); font-weight: 500;
}
.small-mult-title::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--dot); }

.chart-tip {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s, transform .12s;
  background: #0f2238;
  color: #fff;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 12.5px;
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  max-width: 260px;
}
.chart-tip.on { opacity: 1; transform: translateY(0); }
.tip-title { margin: 0 0 6px; font-weight: 600; font-size: 13px; }
.tip-row { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.tip-row i { width: 9px; height: 9px; border-radius: 2px; }
.tip-row span { color: #c8d8ea; }
.tip-row b { margin-left: auto; font-weight: 600; }
.tip-note { margin: 6px 0 0; color: #a9c2db; font-size: 11.5px; }

/* ---------------- severity list ---------------- */
.sev-list { display: grid; gap: 8px; margin-top: 14px; }
.sev-row {
  display: grid;
  grid-template-columns: 12px 76px 1fr auto;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 10px 12px;
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  min-height: 44px;
}
.sev-row i { width: 11px; height: 11px; border-radius: 3px; }
.sev-row span { font-size: 13.5px; font-weight: 500; }
.sev-row small { color: var(--muted); font-size: 12px; }
.sev-row b { font-size: 16px; }

.sla-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.sla-mini div { padding: 9px 10px; background: var(--surface-3); border: 1px solid var(--line-soft); border-radius: 8px; text-align: center; }
.sla-mini span { display: block; color: var(--muted); font-size: 11.5px; }
.sla-mini b { font-size: 14px; font-weight: 500; }

.big-stat { padding: 14px; background: var(--surface-3); border: 1px solid var(--line-soft); border-radius: 8px; margin-bottom: 14px; }
.big-stat span { display: block; color: var(--muted); font-size: 13px; }
.big-stat strong { display: block; font-size: 25px; margin: 4px 0 2px; color: var(--red-txt); }
.big-stat small { color: var(--muted); font-size: 12px; }

/* ---------------- tables ---------------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; font-size: 13.5px; vertical-align: middle; }
th { color: var(--muted); font-weight: 500; background: var(--surface-2); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
td { white-space: nowrap; }
tfoot td { background: var(--surface-3); font-weight: 500; }
.right { text-align: right; }
.center { text-align: center; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12.5px; }
.muted { color: var(--muted); }
.danger { color: var(--red-txt); font-weight: 500; }
.nowrap { white-space: nowrap; }
.empty { text-align: center; color: var(--muted); padding: 26px 10px; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--surface-2); }
tr.clickable:focus-within td { background: #eef6ff; }
.case-actions { display: flex; justify-content: center; gap: 6px; }
.case-actions button { white-space: nowrap; }
tr.over-sla td:first-child { box-shadow: inset 3px 0 0 var(--critical); }
td .sub { display: block; color: var(--muted); font-size: 11.5px; font-weight: 300; }
.sla-flag {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; margin-left: 6px;
  border-radius: 50%; background: var(--critical); color: #fff; font-size: 11px;
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable::after { content: "↕"; opacity: .35; margin-left: 5px; font-size: 11px; }
th.sorted.asc::after { content: "↑"; opacity: 1; color: var(--blue-dark); }
th.sorted.desc::after { content: "↓"; opacity: 1; color: var(--blue-dark); }
table.matrix td:first-child { white-space: normal; }
.matrix .yes { color: var(--green-txt); font-weight: 600; }
.matrix .no { color: #b6c4d3; }
.deny-row td { background: #fff5f5; }
.deny-row .no { color: var(--red-txt); font-weight: 600; }

/* ---------------- badges ---------------- */
.badge {
  display: inline-flex; align-items: center;
  min-height: 24px; padding: 0 9px;
  border-radius: 999px; font-size: 12px; font-weight: 500;
  white-space: nowrap;
}
.badge.critical { background: #fbe9e9; color: #a52c2c; }
.badge.high { background: #fdeee6; color: #a2522f; }
.badge.medium { background: #fdf3dd; color: var(--amber-txt); }
.badge.low, .badge.green { background: #e7f6ea; color: var(--green-txt); }
.badge.red { background: #fbe9e9; color: #a52c2c; }
.badge.amber { background: #fdf3dd; color: var(--amber-txt); }
.badge.blue { background: #e8f2ff; color: var(--blue-dark); }
.badge.violet { background: #eeecfa; color: #443398; }
.badge.grey { background: #eef2f6; color: #5b6b7d; }

.health { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border-radius: 8px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.health.ok { background: #e7f6ea; color: var(--green-txt); }
.health.attention { background: #fdf3dd; color: var(--amber-txt); }

/* ---------------- toolbar / pager ---------------- */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.toolbar input[type="search"] { flex: 1 1 240px; min-width: 180px; }
.chk { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.chk input { width: 17px; height: 17px; accent-color: var(--blue); }
.result-line { color: var(--muted); font-size: 13px; padding: 8px 2px 12px; border-top: 1px dashed var(--line); }
.result-line b { color: var(--text); }
.pager { display: flex; align-items: center; gap: 10px; padding-top: 12px; font-size: 13px; color: var(--muted); }
.pager .grow { flex: 1; }

/* ---------------- alerts / lists ---------------- */
.alert {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  border-left: 4px solid var(--blue);
}
.alert strong { font-size: 14px; }
.alert span { color: var(--muted); font-size: 13.5px; flex: 1 1 300px; }
.alert.bad { border-left-color: var(--critical); background: #fff7f7; }
.alert.ok { border-left-color: var(--low); background: #f5fcf6; }

.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tick-list li {
  position: relative; padding: 10px 12px 10px 34px;
  background: var(--surface-3); border: 1px solid var(--line-soft);
  border-radius: 8px; font-size: 13.5px; color: #35485e; line-height: 1.45;
}
.tick-list li::before {
  content: "✓"; position: absolute; left: 12px; top: 10px;
  color: var(--green-txt); font-weight: 600;
}
.tick-list.warn li::before { content: "!"; color: var(--amber-txt); }

.step-list, .phase-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.step-list li, .phase-list li { font-size: 13.5px; color: #35485e; line-height: 1.5; }
.phase-list li b { display: block; color: var(--text); }
.phase-list li span { color: var(--muted); font-size: 13px; }

.report-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.report-list li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 12px; background: var(--surface-3);
  border: 1px solid var(--line-soft); border-radius: 8px; font-size: 13.5px;
}
.report-list b { font-variant-numeric: tabular-nums; }
.recon-overview-panel { overflow: hidden; }
.recon-group-summary { display: grid; grid-template-columns: minmax(180px,.7fr) minmax(180px,1fr); gap: 12px 22px; align-items: center; padding: 18px; border: 1px solid #b9d9fa; border-radius: 14px; background: linear-gradient(135deg,#edf7ff,#fff); }
.recon-group-title span,.recon-group-title small { display: block; color: var(--muted); font-size: 12px; }
.recon-group-title strong { display: block; margin: 3px 0; color: var(--blue-dark); font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.recon-group-progress,.recon-company-progress { height: 9px; overflow: hidden; border-radius: 999px; background: #dce8f4; }
.recon-group-progress i,.recon-company-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#19a260,#0f6fd6); }
.recon-group-metrics { grid-column: 1/-1; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.recon-group-metrics span { padding: 10px; border-radius: 9px; background: #fff; color: var(--muted); font-size: 11px; text-align: center; }
.recon-group-metrics b { display: block; margin-top: 3px; color: var(--text); font-size: 20px; font-variant-numeric: tabular-nums; }
.recon-group-metrics .ok { background: #eaf8ef; }.recon-group-metrics .warn { background: #fff5df; }.recon-group-metrics .bad { background: #fff0f0; }
.recon-company-grid { display: grid; grid-template-columns: repeat(5,minmax(180px,1fr)); gap: 10px; margin-top: 14px; overflow-x: auto; padding-bottom: 3px; }
.recon-company-card { min-width: 180px; padding: 13px; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: 11px; background: #fff; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.recon-company-card:hover { border-color: #79afe3; box-shadow: 0 6px 16px rgba(19,70,124,.1); transform: translateY(-1px); }
.recon-company-card.attention { border-top-color: var(--medium); }.recon-company-card.complete { border-top-color: var(--low); }.recon-company-card.empty { border-top-color: #cbd5e1; background: #f8fafc; cursor: default; }
.recon-company-head,.recon-company-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.recon-company-head b { color: #173b61; font-size: 20px; }.recon-company-head em { color: var(--blue-dark); font-size: 15px; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.recon-company-progress { margin: 9px 0; height: 6px; }
.recon-company-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.recon-company-numbers i { padding: 5px 6px; border-radius: 6px; background: #f2f6fa; color: var(--muted); font-size: 10px; font-style: normal; }.recon-company-numbers b { float: right; color: var(--text); font-size: 12px; }
.recon-company-foot { display: grid; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); }.recon-company-foot small { color: var(--muted); font-size: 9.5px; }.recon-company-foot strong { color: #46627e; font-size: 10px; }
.recon-company-table { margin-top: 14px; }.recon-company-table tfoot th { border-top: 2px solid #264f78; background: #edf5fc; }.ok-text { color: #147a48; font-weight: 700; }
@media(max-width:900px){.recon-group-summary{grid-template-columns:1fr}.recon-group-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.recon-company-grid{grid-template-columns:repeat(5,180px)}}

.hint { margin: 12px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* ---------------- match view ---------------- */
.match-score {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 16px; border-radius: 8px; margin-bottom: 14px;
  background: var(--surface-3); border: 1px solid var(--line-soft);
}
.match-score strong { font-size: 26px; }
.match-score span { color: var(--muted); font-size: 13px; }
.match-score.ok { background: #f2fbf4; border-color: #cdebd5; }
.match-score.warn { background: #fffaf0; border-color: #f5e3bd; }
.match-score.bad { background: #fff6f6; border-color: #f3d3d3; }

.match-3 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.match-card { padding: 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-3); }
.match-card i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; margin-bottom: 8px; font-weight: 600; }
.match-card.ok i { background: #e7f6ea; color: var(--green-txt); }
.match-card.bad i { background: #fbe9e9; color: var(--red-txt); }
.match-card.bad { border-color: #f0cccc; background: #fffafa; }
.match-card strong { display: block; margin-bottom: 3px; }
.match-card span { color: var(--muted); font-size: 13px; line-height: 1.45; }

.compare { display: grid; grid-template-columns: minmax(0,1fr) 74px minmax(0,1fr); align-items: center; gap: 10px; }
.compare-col { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-3); }
.compare-col h3 { margin-bottom: 8px; color: var(--blue-dark); }
.compare-mid { text-align: center; color: var(--muted); font-size: 12px; }
.compare code, .timeline code {
  display: block; background: #0f2238; color: #d9ecff;
  padding: 9px 11px; border-radius: 6px; font-size: 11.5px;
  overflow-x: auto; white-space: pre; margin-bottom: 10px;
  font-family: ui-monospace, Menlo, monospace;
}
.kv-line { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--line); font-size: 13px; }
.kv-line span { color: var(--muted); }
.kv-line b { text-align: right; font-weight: 500; }

/* ---------------- settings ---------------- */
.setting-list { display: grid; gap: 9px; margin-bottom: 14px; }
.setting-list label {
  display: grid; grid-template-columns: minmax(140px,1fr) 96px 66px;
  align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--surface-3); color: #35485e; font-size: 13.5px;
}
.setting-list input { min-height: 34px; width: 100%; text-align: right; }
.setting-list b { color: var(--muted); font-size: 12.5px; font-weight: 400; }

.toggle-list { display: grid; gap: 8px; }
.toggle-list label {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--surface-3); color: #35485e; font-size: 13.5px;
}
.toggle-list input { width: 17px; height: 17px; accent-color: var(--blue); }

.rule-rows { display: grid; gap: 10px; }
.rule-row {
  display: grid; grid-template-columns: 46px 1fr auto;
  align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface-3);
}
.rule-row strong { display: block; }
.rule-row span { color: var(--muted); font-size: 13px; line-height: 1.4; }
.switch { position: relative; display: inline-block; width: 42px; height: 23px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; z-index: 2; cursor: pointer; }
.switch input:disabled { cursor: not-allowed; }
.switch input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.switch span { position: absolute; inset: 0; background: #c3d4e5; border-radius: 999px; transition: .18s; pointer-events: none; }
.switch span::before { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .18s; }
.switch input:checked + span { background: var(--blue-dark); }
.switch input:checked + span::before { transform: translateX(19px); }
.switch input:disabled + span { opacity: .55; cursor: not-allowed; }

/* ---------------- damage cards ---------------- */
.cycle-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.cycle { display: grid; gap: 6px; align-content: start; }
.cycle strong { font-size: 24px; color: var(--red-txt); }
.cycle small { color: var(--muted); font-size: 12.5px; }
.cycle .primary-button { margin-top: 8px; }
.cycle { cursor: pointer; }
.cycle.locked { background: var(--surface-3); }
.cycle.selected { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,128,255,.14); }
.lock-tag { margin-top: 8px; font-size: 12px; color: var(--muted); }
.damage-definition { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.damage-definition h2 { margin-bottom: 4px; }
.damage-empty { min-height: 190px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 28px; text-align: center; }
.damage-empty strong { font-size: 18px; }
.damage-empty span { max-width: 680px; color: var(--muted); line-height: 1.55; }
.damage-empty .primary-button { margin-top: 6px; }

/* ---------------- chat ---------------- */
.chat-box {
  min-height: 220px; max-height: 320px; overflow-y: auto;
  padding: 14px; background: var(--surface-2); border-radius: 10px;
  display: flex; flex-direction: column; gap: 10px;
}
.chat-box.big { min-height: 360px; max-height: 440px; }
.message {
  width: fit-content; max-width: 88%;
  padding: 11px 13px; border-radius: 10px;
  background: #fff; border: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.55;
}
.message.user { align-self: flex-end; background: #dbeeff; border-color: #a9d5ff; }
.chat-link { display: block; margin-top: 8px; border: 0; background: none; padding: 0; min-height: auto; color: var(--blue-dark); text-decoration: underline; font-size: 13px; }
.ask-form { display: grid; grid-template-columns: minmax(0,1fr) 84px; gap: 8px; margin-top: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { min-height: 32px; border-radius: 999px; font-size: 12.5px; padding: 0 13px; background: var(--surface-3); }

/* ---------------- gap list ---------------- */
.gap-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 12px; }
.gap-item { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 8px; border: 1px solid var(--line-soft); background: var(--surface-3); border-left: 4px solid var(--line); }
.gap-item.done { border-left-color: var(--low); }
.gap-item.next { border-left-color: var(--medium); }
.gap-item.todo { border-left-color: var(--critical); }
.gap-item .badge { justify-self: start; }
.gap-detail { color: var(--muted); font-size: 13px; line-height: 1.45; }

/* ---------------- drawer ---------------- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(9, 30, 52, .42); z-index: 40; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(920px, 96vw);
  background: var(--surface);
  z-index: 50;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  transform: translateX(102%);
  transition: transform .22s ease;
}
.drawer.on { transform: translateX(0); }
.drawer-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.drawer-head h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 18px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px 26px; scroll-behavior: smooth; }
.drawer-h3 { margin: 20px 0 10px; color: var(--blue-dark); }
.drawer-foot {
  display: grid; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-3);
}
.drawer-next { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.drawer-next span { color: var(--blue-dark); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.drawer-next b { font-size: 13px; text-align: right; }
.drawer-primary-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.drawer-primary-actions button { min-width: 0; }
.drawer-more-actions { border-top: 1px dashed var(--line); padding-top: 8px; }
.drawer-more-actions summary { width: fit-content; color: var(--muted); cursor: pointer; font-size: 12.5px; }
.drawer-more-actions > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }

.case-review-flow { position: sticky; top: -18px; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: -6px 0 12px; padding: 8px 0; background: var(--surface); }
.case-review-flow button { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--text); text-align: left; cursor: pointer; }
.case-review-flow button:hover { border-color: var(--blue); background: #f4f9ff; }
.case-review-flow i { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-dark); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; }
.case-review-flow span { display: grid; min-width: 0; }
.case-review-flow b { font-size: 12px; }
.case-review-flow small { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-source-section { scroll-margin-top: 62px; margin-top: 16px; padding: 14px; border: 1px solid #bdd8f4; border-radius: 11px; background: #f6faff; }
.case-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.case-section-head h3 { margin: 1px 0 0; font-size: 16px; }
.case-files-loading { min-height: 74px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 13px; }
.case-file-list { display: grid; gap: 7px; max-height: 300px; overflow-y: auto; padding-right: 3px; }
.case-file-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--text); font-family: inherit; text-align: left; }
.case-file-row:hover { border-color: var(--blue); background: #f8fbff; }
.case-file-row:disabled { cursor: not-allowed; opacity: .58; }
.case-file-icon { display: grid; place-items: center; width: 38px; height: 34px; border-radius: 7px; background: #e6f1ff; color: var(--blue-dark); font-size: 10px; font-weight: 700; }
.case-file-main { display: grid; min-width: 0; }
.case-file-main b, .case-file-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-file-main b { color: var(--blue-dark); font-size: 12.5px; }
.case-file-main small { color: var(--muted); font-size: 10.5px; }
.case-file-state { padding: 4px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.case-file-state.ok { background: #e5f5e9; color: var(--green-txt); }
.case-file-state.bad { background: #fde7e7; color: var(--red-txt); }
.case-file-state.wait { background: #fff0d7; color: var(--amber-txt); }
.case-file-open { color: var(--blue-dark); font-size: 11px; font-weight: 600; white-space: nowrap; }
.case-files-empty { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px; border-radius: 8px; background: #fff; }
.case-files-empty span { flex: 1; color: var(--muted); font-size: 12px; }
.case-files-empty.bad { background: #fff2f2; color: var(--red-txt); }

.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kv-grid div { padding: 9px 11px; background: var(--surface-3); border: 1px solid var(--line-soft); border-radius: 8px; }
.kv-grid span { display: block; color: var(--muted); font-size: 11.5px; }
.kv-grid b { font-size: 13.5px; font-weight: 500; }
.case-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.case-summary-grid > div { min-width: 0; padding: 9px 11px; background: var(--surface-3); border: 1px solid var(--line-soft); border-radius: 8px; }
.case-summary-grid span { display: block; color: var(--muted); font-size: 11px; }
.case-summary-grid b { display: block; overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.case-summary-risk { border-left: 3px solid var(--critical) !important; }
.case-meta-more { margin-top: 8px; padding: 8px 11px; border: 1px solid var(--line-soft); border-radius: 8px; background: #fff; }
.case-meta-more summary { color: var(--blue-dark); cursor: pointer; font-size: 12px; font-weight: 600; }
.case-meta-more > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.case-meta-more > div span { color: var(--muted); font-size: 11px; }
.case-meta-more > div b { display: block; color: var(--text); font-size: 12px; font-weight: 500; }
.case-meta-more p { margin: 8px 0 0; color: var(--muted); font-size: 11px; }

.recon-loading-banner { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 14px 16px; overflow: hidden; border: 1px solid #b9d9fb; border-radius: 10px; background: #f4f9ff; color: var(--blue-dark); }
.recon-loading-banner > div { display: grid; gap: 1px; }
.recon-loading-banner b { font-size: 13.5px; }
.recon-loading-banner small { color: var(--muted); font-size: 11.5px; }
.recon-loading-pulse { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; overflow: hidden; background: #d8eaff; }
.recon-loading-pulse::after { content: ""; display: block; width: 36%; height: 100%; background: var(--blue); animation: recon-load 1.25s ease-in-out infinite; }
@keyframes recon-load { from { transform: translateX(-110%); } to { transform: translateX(310%); } }

.recon-result-summary { display: grid; gap: 14px; }
.recon-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.recon-kpi { min-width: 0; padding: 14px 15px; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: 10px; background: #fff; }
.recon-kpi.run { border-top-color: var(--amber); }
.recon-kpi.match { border-top-color: var(--low); background: #f8fcf9; }
.recon-kpi > span { color: var(--muted); font-size: 12px; }
.recon-kpi strong { display: block; margin: 5px 0 2px; color: var(--blue-dark); font-size: 25px; line-height: 1.1; }
.recon-kpi strong small { color: var(--muted); font-size: 12px; font-weight: 400; }
.recon-kpi p { margin: 0; color: var(--muted); font-size: 11px; }
.recon-work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 12px; border-top: 1px dashed var(--line); }
.recon-work-grid button { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; align-items: center; min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 9px; background: #fff; color: var(--text); font-family: inherit; text-align: left; }
.recon-work-grid button:hover { border-color: var(--blue); background: #f8fbff; }
.recon-work-grid button.amber { border-left-color: var(--amber); }
.recon-work-grid button.red { border-left-color: var(--critical); }
.recon-work-grid button.green { border-left-color: var(--low); }
.recon-work-grid i { grid-row: 1 / 3; color: var(--blue-dark); font-size: 21px; font-style: normal; font-weight: 700; }
.recon-work-grid span { display: grid; min-width: 0; }
.recon-work-grid b { font-size: 12px; }
.recon-work-grid small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.recon-work-grid em { grid-column: 2; color: var(--blue-dark); font-size: 10.5px; font-style: normal; font-weight: 600; }

.audit-view-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 12px 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #f8fbff; }
.audit-view-bar > div:first-child { display: grid; gap: 2px; min-width: 0; }
.audit-view-bar b { font-size: 12.5px; }
.audit-view-bar span { color: var(--muted); font-size: 11px; }
.audit-view-switch { display: inline-flex; flex: 0 0 auto; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.audit-view-switch button { padding: 7px 11px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: 600 11.5px/1.2 inherit; cursor: pointer; }
.audit-view-switch button:hover { color: var(--blue-dark); background: #eef6ff; }
.audit-view-switch button.active { color: #fff; background: var(--blue); box-shadow: 0 3px 8px rgba(0, 102, 204, .18); }

.reconciliation-sheet-wrap { max-height: min(62vh, 680px); border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.reconciliation-sheet { min-width: 1660px; border-collapse: separate; border-spacing: 0; font-size: 11.5px; }
.reconciliation-sheet thead { position: sticky; top: 0; z-index: 3; }
.reconciliation-sheet thead tr:first-child th { top: 0; }
.reconciliation-sheet thead tr:nth-child(2) th { position: sticky; top: 36px; z-index: 4; }
.reconciliation-sheet th { height: 36px; padding: 7px 9px; border-right: 1px solid #dbe8f6; border-bottom: 1px solid #cedef0; background: #eef5fc; color: #3a526c; white-space: nowrap; }
.reconciliation-sheet td { height: 44px; padding: 7px 9px; border-right: 1px solid #edf2f8; border-bottom: 1px solid #e5edf6; vertical-align: middle; }
.reconciliation-sheet tbody tr:nth-child(even) td:not(.is-blank) { background: #fbfdff; }
.reconciliation-sheet tbody tr:hover td:not(.is-blank) { background: #f3f8ff; }
.reconciliation-sheet .sheet-group { text-align: center; font-weight: 700; }
.reconciliation-sheet .sheet-group.stm { background: #e6f2ff; color: #075aab; }
.reconciliation-sheet .sheet-group.bo { background: #eaf7ed; color: #237239; }
.reconciliation-sheet .sheet-side { min-width: 126px; }
.reconciliation-sheet .sheet-side.has-value b { display: block; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.reconciliation-sheet .sheet-side small { display: block; color: var(--muted); font-size: 10px; }
.reconciliation-sheet .sheet-side.is-blank { min-width: 126px; background: repeating-linear-gradient(-45deg, #fffaf0, #fffaf0 7px, #fff4db 7px, #fff4db 14px); box-shadow: inset 3px 0 #e5a400; }
.reconciliation-sheet .sheet-side.is-blank::after { content: "รอข้อมูล"; color: #9a6a00; font-size: 10.5px; font-weight: 600; }
.reconciliation-sheet .sheet-state { min-width: 96px; }
.reconciliation-sheet .sheet-state small { display: block; margin-top: 3px; color: var(--muted); font-size: 9.5px; }
.reconciliation-sheet .sheet-explanation { min-width: 210px; max-width: 300px; white-space: normal; }
.reconciliation-sheet .sheet-explanation.waiting { color: #906100; background: #fffaf0; }
.reconciliation-sheet .sheet-explanation.waiting span { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.reconciliation-sheet .sheet-explanation.waiting span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.reconciliation-sheet .sheet-explanation.answered { color: var(--green-txt); background: #f5fbf6; }
.reconciliation-sheet .case-actions { flex-wrap: nowrap; }
.reconciliation-sheet .case-actions .quick-close { white-space: nowrap; background: #18864b; border-color: #18864b; }
.reconciliation-sheet .case-actions .quick-close:hover { background: #126f3d; border-color: #126f3d; }
.quick-close-box { display: grid; gap: 10px; padding: 14px; border: 1px solid #bfe3cc; border-radius: 10px; background: #f3fbf6; }
.quick-close-box strong { color: #166534; font-size: 16px; }
.quick-close-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quick-close-grid div { padding: 10px; border: 1px solid #d9e7df; border-radius: 8px; background: #fff; }
.quick-close-grid span, .quick-close-grid b { display: block; }
.quick-close-grid span { color: var(--muted); font-size: 11px; }
.quick-close-box small { color: var(--muted); }
.quick-close-hint { margin: 10px 0; padding: 10px 12px; border-left: 3px solid var(--green); border-radius: 6px; background: #f3fbf6; color: #166534; }

@media (max-width: 900px) {
  .audit-view-bar { align-items: stretch; flex-direction: column; }
  .audit-view-switch { align-self: flex-start; }
}

.timeline { list-style: none; margin: 0; padding: 0 0 0 20px; display: grid; gap: 14px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline li { position: relative; }
.t-dot { position: absolute; left: -20px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--line); }
.t-dot.ok { background: var(--low); }
.t-dot.bad { background: var(--critical); }
.timeline b { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.timeline span { color: var(--muted); font-size: 13px; line-height: 1.5; }

.close-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.close-check li { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 8px; font-size: 13.5px; border: 1px solid var(--line-soft); }
.close-check i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: 12px; }
.close-check .ok, .close-check li.ok { background: #f4fbf6; }
.close-check li.ok i { background: #d9f0de; color: var(--green-txt); }
.close-check li.no { background: #fff8f8; }
.close-check li.no i { background: #fadede; color: var(--red-txt); }

.note-form { display: grid; gap: 8px; }

/* ---------------- toast ---------------- */
.toast-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: grid; gap: 8px; }
.toast {
  background: #0f2238; color: #fff;
  padding: 12px 16px; border-radius: 10px;
  font-size: 13.5px; box-shadow: 0 16px 40px rgba(0,0,0,.24);
  opacity: 0; transform: translateY(10px); transition: .2s;
  max-width: 360px;
}
.toast.on { opacity: 1; transform: translateY(0); }
.toast.warn { background: #8a5a06; }

/* ---------------- responsive ---------------- */
@media (max-width: 1280px) {
  .status-strip, .status-strip.six { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .pipeline { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 1400px) {
  .filter-fields { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
}
@media (max-width: 1080px) {
  .audit-flow { grid-template-columns: repeat(5, minmax(115px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
  .audit-file-guide { grid-template-columns: 1fr; }
  .related-file-list { grid-template-columns: 1fr; }
  .search-empty-help { align-items: flex-start; flex-direction: column; }
  .app-shell { grid-template-columns: 1fr; }
  .app-shell.sidebar-collapsed { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0; height: auto; z-index: 30; padding: 14px 16px; }
  .nav-toggle { display: block; }
  .app-shell.sidebar-collapsed .sidebar { padding: 14px 16px; overflow: visible; }
  .app-shell.sidebar-collapsed .brand { justify-content: flex-start; flex-wrap: nowrap; }
  .app-shell.sidebar-collapsed .brand > div:not(.brand-mark) { display: block; }
  .app-shell.sidebar-collapsed .nav-toggle { order: initial; width: 40px; height: 40px; margin-left: auto; transform: none; }
  .app-shell.sidebar-collapsed .nav-label { height: auto; margin: 14px 10px 4px; overflow: visible; opacity: 1; background: none; color: #a9d1ff; }
  .app-shell.sidebar-collapsed .nav-list a { justify-content: flex-start; min-height: auto; padding: 9px 10px; }
  .app-shell.sidebar-collapsed .nav-list a > span { display: block; }
  .app-shell.sidebar-collapsed .nav-count { position: static; min-width: auto; padding: 1px 7px; font-size: 11px; }
  .nav-list, .source-panel { display: none; }
  .sidebar.open .nav-list { display: grid; }
  .sidebar.open .source-panel { display: block; }
  .grid-2, .grid-3, .grid-talk, .cycle-cards, .match-3 { grid-template-columns: 1fr; }
  .status-strip, .status-strip.six, .status-strip.three, .status-strip.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .company-overview-grid { grid-template-columns: 1fr; }
  .action-overview { align-items: flex-start; flex-direction: column; }
  .filter-fields { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .compare { grid-template-columns: 1fr; }
  .compare-mid { padding: 4px 0; }
  .recon-kpi-grid, .recon-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .main { padding: 16px 14px 48px; }
  h1 { font-size: 22px; }
  .topbar { flex-direction: column; align-items: stretch; }
  .top-actions { width: 100%; }
  .status-strip, .status-strip.six, .status-strip.three, .status-strip.four, .pipeline { grid-template-columns: 1fr; }
  .filter-fields { grid-template-columns: 1fr 1fr; }
  .filter-bar-head > div { display: grid; gap: 0; }
  .kv-grid { grid-template-columns: 1fr; }
  .drawer { width: 100%; }
  .case-review-flow, .case-summary-grid, .case-meta-more > div { grid-template-columns: 1fr 1fr; }
  .case-file-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .case-file-icon { width: 34px; }
  .case-file-state { display: none; }
  .case-file-open { font-size: 0; }
  .case-file-open::after { content: "→"; font-size: 14px; }
  .drawer-primary-actions, .drawer-more-actions > div { grid-template-columns: 1fr 1fr; }
  .drawer-next { align-items: flex-start; flex-direction: column; }
  .drawer-next b { text-align: left; }
  .recon-kpi-grid, .recon-work-grid { grid-template-columns: 1fr; }
  .setting-list label { grid-template-columns: 1fr; }
  .sev-row { grid-template-columns: 12px 1fr auto; }
  .sev-row small { display: none; }
}

@media print {
  .sidebar, .top-actions, .quick-controls, .toolbar, .pager, .drawer, .drawer-overlay, .toast-wrap { display: none !important; }
  .app-shell { grid-template-columns: 1fr; }
  .panel { break-inside: avoid; box-shadow: none; }
}

/* =============================================================
   Phase 1-4 components: import, notification, schedule, evidence
   ============================================================= */

/* bell */
.bell {
  position: relative;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  padding: 0;
}
.bell svg { width: 19px; height: 19px; fill: var(--muted); }
.bell b {
  position: absolute; top: 3px; right: 3px;
  min-width: 17px; height: 17px;
  display: grid; place-items: center;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--critical); color: #fff;
  font-size: 10px; font-weight: 600;
}

/* progress overlay */
.progress-overlay {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(9, 30, 52, .48);
  display: grid; place-items: center;
}
.progress-overlay[hidden] { display: none; }
.progress-card {
  width: min(420px, 90vw);
  background: var(--surface);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.progress-card p { margin: 6px 0 14px; color: var(--muted); font-size: 13.5px; }
.progress-bar { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progress-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue-dark), var(--blue)); transition: width .18s; }
.progress-card span { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* import page */
.inbox-list { display: grid; gap: 8px; max-height: 460px; overflow-y: auto; }
.inbox-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface-3);
}
.inbox-item.pulled { opacity: .62; border-style: dashed; }
.inbox-item strong { display: block; font-size: 13.5px; font-weight: 500; }
.inbox-item span { display: block; color: var(--muted); font-size: 12px; }
.inbox-item small { display: block; color: var(--blue-dark); font-size: 11.5px; margin-top: 2px; }
.inbox-actions { display: grid; gap: 6px; justify-items: end; flex: 0 0 auto; }

.dropzone {
  display: grid; gap: 6px; place-items: center; text-align: center;
  padding: 30px 18px;
  border: 2px dashed var(--line); border-radius: 10px;
  background: var(--surface-3); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone.over { border-color: var(--blue); background: #eaf4ff; }
.dropzone strong { font-size: 14.5px; }
.dropzone span { color: var(--muted); font-size: 12.5px; max-width: 420px; line-height: 1.5; }

.drop-tag {
  display: inline-block; margin: 0 4px 4px 0;
  padding: 2px 8px; border-radius: 999px;
  background: #fdf3dd; color: var(--amber-txt); font-size: 11.5px;
}
.mt { margin-top: 14px; }

.run-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.run-grid div { padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface-3); }
.run-grid span { display: block; color: var(--muted); font-size: 11.5px; }
.run-grid b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ok-txt { color: var(--green-txt); }

.chk-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }

/* notifications */
.notif-list { display: grid; gap: 8px; max-height: 560px; overflow-y: auto; }
.notif {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 13px;
  border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface-3);
}
.notif.unread { background: #fff; border-color: var(--line); box-shadow: inset 3px 0 0 var(--blue); }
.notif > div { flex: 1; }
.notif strong { display: block; font-size: 13.5px; font-weight: 500; }
.notif span { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.notif small { display: block; color: #9aa9b8; font-size: 11.5px; margin-top: 3px; }

/* evidence */
.evidence-box { display: grid; gap: 10px; }
.evidence-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.evidence-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface-3);
}
.evidence-list li > div { flex: 1; min-width: 0; }
.evidence-list b { display: block; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evidence-list small { color: var(--muted); font-size: 11.5px; }
.ev-ico { font-size: 17px; }
.attach-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 14px;
  border: 1px dashed var(--line); border-radius: 8px;
  background: var(--surface-3); color: var(--blue-dark);
  font-size: 13.5px; cursor: pointer;
}
.attach-btn.locked { opacity: .45; cursor: not-allowed; }
.small-note { font-size: 13px; margin: 0; }

/* phase list done marker */
.phase-list li.done b::after { content: " ✓"; color: var(--green-txt); }

@media (max-width: 700px) {
  .inbox-item { flex-direction: column; align-items: flex-start; }
  .inbox-actions { justify-items: start; }
}
td.wrap { white-space: normal; max-width: 420px; }

/* ---------- สถานะการทำงานอัตโนมัติ ---------- */
.auto-status {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); cursor: pointer;
  font-size: 12.5px; color: var(--muted);
}
.auto-status i { width: 9px; height: 9px; border-radius: 50%; background: #b6c4d3; flex: 0 0 9px; }
.auto-status b { color: var(--text); font-weight: 500; }
.auto-status.ok { border-color: #b9e3c4; background: #f4fcf6; }
.auto-status.ok i { background: var(--low); box-shadow: 0 0 0 3px rgba(12,163,12,.16); }
.auto-status.wait { border-color: #f0dfb4; background: #fffbf2; }
.auto-status.wait i { background: var(--medium); }
.auto-status.run i { background: var(--blue); animation: pulse 1s infinite; }
.auto-status.run { border-color: #a9d5ff; background: #f2f8ff; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.auto-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; margin-top: 14px;
  border: 1px solid var(--line); border-left: 4px solid #b6c4d3;
  border-radius: 8px; background: var(--surface-3);
}
.auto-banner i { width: 11px; height: 11px; border-radius: 50%; background: #b6c4d3; flex: 0 0 11px; }
.auto-banner strong { display: block; font-size: 14px; }
.auto-banner span { color: var(--muted); font-size: 13px; }
.auto-banner.ok { border-left-color: var(--low); background: #f4fcf6; }
.auto-banner.ok i { background: var(--low); }
.auto-banner.wait { border-left-color: var(--medium); background: #fffbf2; }
.auto-banner.wait i { background: var(--medium); }

/* ---------- Export dialog ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(9,30,52,.45); z-index: 70; }
.modal-overlay[hidden] { display: none; }
.modal {
  position: fixed; z-index: 75;
  top: 50%; left: 50%;
  transform: translate(-50%, -46%) scale(.98);
  width: min(560px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0; transition: opacity .18s, transform .18s;
}
.modal[hidden] { display: none; }
.modal.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.modal-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.modal-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-3);
  border-radius: 0 0 14px 14px;
}

/* ---------- ตัวอย่างไฟล์ก่อนดาวน์โหลด ---------- */
.modal.file-preview-modal {
  width: min(1120px, calc(100vw - 32px));
  max-height: 92vh;
}
.file-preview-meta {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.file-preview-meta span {
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.file-preview-meta b {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 11px;
}
.file-preview-meta i { font-style: normal; }
.file-preview-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-3);
}
.file-preview-editor > div { min-width: 0; }
.file-preview-editor label {
  display: block;
  margin-bottom: 5px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.file-preview-editor select { width: 100%; min-height: 40px; background: var(--surface); }
.file-kind-help {
  display: block;
  min-height: 18px;
  margin-top: 5px;
  color: var(--blue-dark);
  font-size: 11px;
  line-height: 1.45;
}
.file-preview-editor p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
}
.file-clarification-match {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding: 13px;
  border: 1px solid #a9cdf8;
  border-left: 4px solid var(--blue);
  border-radius: 12px;
  background: linear-gradient(135deg, #f3f8ff, #fbfdff);
}
.file-clarification-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.file-clarification-head > div { display: grid; gap: 2px; min-width: 0; }
.file-clarification-head small { color: var(--blue-dark); font-size: 11px; font-weight: 800; }
.file-clarification-head b { color: var(--text); font-size: 14px; }
.file-clarification-head span:not(.spinner) { color: var(--muted); font-size: 11.5px; }
.file-clarification-tools {
  display: flex;
  align-items: center;
  gap: 9px 14px;
  flex-wrap: wrap;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
}
.file-clarification-tools label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 11.5px;
  cursor: pointer;
}
.file-clarification-tools input { width: 16px; height: 16px; }
.file-clarification-tools b { margin-left: auto; color: var(--blue-dark); font-size: 11.5px; }
.file-clarification-tools .ghost-button { min-height: 32px; padding: 6px 10px; font-size: 11.5px; }
.file-clarification-list {
  display: grid;
  max-height: 238px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.file-clarification-case {
  display: grid;
  grid-template-columns: auto minmax(145px, .8fr) minmax(170px, 1fr) minmax(150px, .7fr);
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.file-clarification-case:last-child { border-bottom: 0; }
.file-clarification-case:hover { background: #f7faff; }
.file-clarification-case.selected { background: #eaf4ff; box-shadow: inset 3px 0 var(--blue); }
.file-clarification-case input { width: 17px; height: 17px; }
.file-clarification-case > span { display: grid; gap: 1px; min-width: 0; }
.file-clarification-case b { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.file-clarification-case small { overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.file-clarification-amount { text-align: right; }
.file-clarification-note { display: grid; gap: 5px; color: var(--text); font-size: 11.5px; font-weight: 700; }
.file-clarification-note textarea {
  width: 100%;
  min-height: 54px;
  resize: vertical;
  background: var(--surface);
  font-size: 12px;
  font-weight: 400;
}
.file-replacement-ready {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid #9ad8aa;
  border-radius: 12px;
  background: linear-gradient(135deg, #f1fbf4, #f8fcfa);
  color: #16713a;
}
.file-replacement-ready[hidden] { display: none; }
.file-replacement-ready-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.file-replacement-ready-head > i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #24a157;
  color: #fff;
  font-style: normal;
  font-weight: 800;
}
.file-replacement-ready-head > div { display: grid; gap: 1px; min-width: 0; }
.file-replacement-ready b { color: var(--text); font-size: 13px; }
.file-replacement-ready small { color: var(--muted); font-size: 11px; }
.file-replacement-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.file-replacement-compare > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}
.file-replacement-compare > i { color: #24a157; font-style: normal; font-weight: 800; }
.file-replacement-compare span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 680px) {
  .file-replacement-compare { grid-template-columns: 1fr; }
  .file-replacement-compare > i { justify-self: center; transform: rotate(90deg); }
  .file-clarification-case { grid-template-columns: auto minmax(0, 1fr); }
  .file-clarification-case > span:nth-of-type(n+2) { grid-column: 2; }
  .file-clarification-amount { text-align: left; }
  .file-clarification-tools b { width: 100%; margin-left: 0; }
}
.file-preview-content {
  min-height: 360px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7f9fc;
}
.file-preview-content > p { margin-top: 50px; color: var(--muted); }
.file-ocr-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid #b9e3c4;
  border-radius: 10px;
  background: #f0fbf3;
}
.file-ocr-summary div { display: grid; gap: 2px; }
.file-ocr-summary span { color: var(--muted); font-size: 12px; }
.file-preview-frame {
  width: 100%;
  height: min(65vh, 680px);
  border: 0;
  background: #fff;
}
.pdf-review { width:100%; min-width:0; background:#fff; text-align:left; }
.pdf-review-heading { padding:12px; border-bottom:1px solid var(--line); }
.pdf-review-heading b,.pdf-review-heading span { display:block; }
.pdf-review-heading span,.pdf-review-heading p { font-size:14px; margin:5px 0; }
.pdf-review-split { display:grid; grid-template-columns:minmax(280px, 45%) minmax(0, 1fr); }
.pdf-review-data { min-width:0; padding:12px; font-size:14px; }
.pdf-review-tools { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pdf-review-tools input,.pdf-review-tools select { max-width:100%; min-height:36px; font:inherit; }
.pdf-review-grid { overflow:auto; max-height:45vh; border:1px solid var(--line); }
.pdf-review-grid table { font-size:14px; border-collapse:collapse; min-width:1100px; }
.pdf-review-grid th { position:sticky; top:0; background:#edf4fc; z-index:1; }
.pdf-review-grid td,.pdf-review-grid th { padding:8px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
.pdf-review-data pre { white-space:pre-wrap; overflow:auto; max-height:220px; font-size:14px; }
@media(max-width:850px) { .pdf-review-split { grid-template-columns:1fr; } .pdf-review-split .file-preview-frame { height:42vh; } }
.file-preview-image {
  display: block;
  max-width: 100%;
  max-height: min(65vh, 680px);
  padding: 12px;
  object-fit: contain;
}
.file-preview-table {
  width: 100%;
  max-height: min(60vh, 620px);
  align-self: stretch;
  overflow: auto;
  background: #fff;
}
.file-preview-table table { min-width: 100%; white-space: nowrap; font-size: 12px; }
.file-preview-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eaf2fc;
}
.file-preview-note {
  align-self: stretch;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: #f5f8fc;
  color: var(--muted);
  font-size: 11.5px;
}
.file-preview-unavailable {
  display: grid;
  gap: 8px;
  max-width: 520px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
}
.file-preview-unavailable b { color: var(--text); font-size: 15px; }
.file-preview-unavailable.bad b { color: var(--red-txt); }
.docx-preview {
  width: 100%;
  max-height: min(64vh, 680px);
  align-self: stretch;
  overflow: auto;
  background: #e9eef5;
}
.docx-page {
  width: min(820px, calc(100% - 32px));
  min-height: 520px;
  margin: 16px auto;
  padding: 42px 52px;
  background: #fff;
  box-shadow: 0 3px 16px rgba(25, 55, 90, .12);
  color: #17283a;
  font-family: Arial, "Noto Sans Thai", sans-serif;
  font-size: 14px;
  line-height: 1.65;
}
.docx-paragraph { min-height: 1.25em; margin: 0 0 9px; white-space: pre-wrap; overflow-wrap: anywhere; }
.docx-paragraph img { display: block; max-width: 100%; max-height: 520px; margin: 10px auto; object-fit: contain; }
.docx-heading { margin-top: 18px; font-size: 18px; font-weight: 700; }
.docx-title { font-size: 23px; text-align: center; }
.docx-table-wrap { width: 100%; margin: 12px 0; overflow-x: auto; }
.docx-table-wrap table { width: 100%; border-collapse: collapse; font-size: 13px; }
.docx-table-wrap th, .docx-table-wrap td { padding: 7px 9px; border: 1px solid #9eacba; vertical-align: top; }
.docx-table-wrap th { background: #edf4fc; }
.docx-table-wrap .docx-paragraph { margin-bottom: 3px; }
.docx-warning { margin-bottom: 12px; padding: 8px 10px; border-radius: 7px; background: #fff4d6; color: #805b00; font: 12px/1.5 Kanit, sans-serif; }

@media (max-width: 800px) {
  .file-preview-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .file-preview-content { min-height: 280px; }
  .file-preview-frame { height: 58vh; }
  .file-preview-modal .modal-foot button { flex: 1 1 180px; }
  .docx-page { width: calc(100% - 20px); margin: 10px; padding: 24px 20px; }
}
@media (max-width: 520px) {
  .file-preview-meta { grid-template-columns: 1fr; }
  .file-preview-editor { grid-template-columns: 1fr; }
}
.exp-section { margin-bottom: 18px; }
.exp-section h3 { margin-bottom: 9px; color: var(--blue-dark); }
.exp-range { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
.exp-range label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.exp-range input, .exp-range select { width: 100%; min-height: 38px; background: var(--surface-3); }
.sheet-count { color: var(--muted); font-weight: 400; font-size: 12px; }
.seg { display: grid; gap: 8px; }
.seg label {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--surface-3); font-size: 13.5px; cursor: pointer;
}
.seg input { accent-color: var(--blue); width: 16px; height: 16px; }

/* ---------- ปุ่มกล้องบนการ์ด ---------- */
.panel-cam {
  flex: 0 0 auto;
  width: 32px; height: 32px; min-height: 32px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface);
  opacity: 0; transition: opacity .15s;
}
.panel-cam svg { width: 16px; height: 16px; fill: var(--muted); }
.panel:hover .panel-cam, .panel-cam:focus-visible { opacity: 1; }
.panel-cam:hover { background: var(--surface-2); }
.panel-cam:hover svg { fill: var(--blue-dark); }
@media (hover: none) { .panel-cam { opacity: .7; } }

.export-bar { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.export-bar span.muted { display: block; font-size: 13px; line-height: 1.5; max-width: 620px; margin-top: 4px; }
.head-sub { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }

@media (max-width: 700px) {
  .exp-range { grid-template-columns: 1fr; }
  .export-bar .inline-actions { width: 100%; }
  .export-bar .inline-actions button { flex: 1; }
}
.panel { position: relative; }
.panel-cam.float { position: absolute; top: 14px; right: 14px; z-index: 3; }

/* =============================================================
   คู่มือการใช้งาน (Manual)
   ============================================================= */

/* ปุ่มกลมลอย */
.mn-fab {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 88;
  display: inline-flex; align-items: center; gap: 8px;
  height: 54px; min-height: 54px; padding: 0 20px 0 16px;
  border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #004b93, #0080ff);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 75, 147, .34);
  cursor: grab;
  touch-action: none;
  transition: transform .15s, box-shadow .15s, opacity .18s;
}
.mn-fab svg { width: 24px; height: 24px; fill: #fff; flex: 0 0 24px; }
.mn-fab span { font-size: 14px; font-weight: 500; }
.mn-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 75, 147, .42); filter: none; }
.mn-fab.dragging { cursor: grabbing; transform: scale(1.04); }
.mn-fab.hidden { opacity: 0; pointer-events: none; transform: scale(.8); }

/* หน้าต่างคู่มือ */
.mn-win {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 89;
  width: 1000px; height: 660px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0, 40, 80, .28);
  overflow: hidden;
  opacity: 0; transform: translateY(14px) scale(.99);
  transition: opacity .18s, transform .18s;
}
.mn-win[hidden] { display: none; }
.mn-win.on { opacity: 1; transform: none; }

.mn-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #003b76, #0066cc);
  color: #fff;
  cursor: grab;
  touch-action: none;
  flex: 0 0 auto;
}
.mn-head:active { cursor: grabbing; }
.mn-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mn-title svg { width: 22px; height: 22px; fill: #fff; opacity: .9; flex: 0 0 22px; }
.mn-title b { display: block; font-size: 15px; font-weight: 600; }
.mn-title span { display: block; font-size: 11px; color: #cfe6ff; }
.mn-actions { display: flex; align-items: center; gap: 8px; }
.mn-search {
  min-height: 34px; width: 190px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 8px;
  background: rgba(255,255,255,.14); color: #fff;
  padding: 0 12px; font-size: 13px;
}
.mn-search::placeholder { color: #cfe6ff; }
.mn-btn {
  width: 32px; height: 32px; min-height: 32px; padding: 0;
  border: 1px solid rgba(255,255,255,.28); border-radius: 8px;
  background: rgba(255,255,255,.14); color: #fff; font-size: 14px;
  display: grid; place-items: center;
}
.mn-btn:hover { background: rgba(255,255,255,.26); filter: none; }

.mn-body { flex: 1; display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 0; }

.mn-toc {
  border-right: 1px solid var(--line);
  background: var(--surface-3);
  overflow-y: auto;
  padding: 12px 10px 20px;
  display: flex; flex-direction: column; gap: 2px;
}
.mn-toc-group {
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  margin: 12px 8px 4px;
}
.mn-toc a {
  display: block; padding: 8px 10px;
  border-radius: 7px; text-decoration: none;
  color: #40526a; font-size: 13.5px; line-height: 1.35;
}
.mn-toc a:hover { background: var(--surface-2); }
.mn-toc a.on { background: var(--blue-dark); color: #fff; font-weight: 500; }

.mn-content { position: relative; overflow-y: auto; padding: 4px 24px 40px; scroll-behavior: smooth; }
.mn-section { padding-top: 20px; }
.mn-group-mark {
  display: inline-block; margin-bottom: 10px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--blue-dark);
  font-size: 11px; font-weight: 600;
}
.mn-content h3 { font-size: 19px; margin: 0 0 10px; color: var(--text); }
.mn-content p { margin: 0 0 11px; font-size: 14px; line-height: 1.65; color: #35485e; }
.mn-content code {
  background: var(--surface-2); color: var(--blue-dark);
  padding: 1px 6px; border-radius: 5px;
  font-family: ui-monospace, Menlo, monospace; font-size: 12.5px;
}
.mn-ul, .mn-steps { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 7px; }
.mn-ul li, .mn-steps li { font-size: 14px; line-height: 1.6; color: #35485e; }
.mn-steps li::marker { font-weight: 600; color: var(--blue-dark); }

.mn-fig { margin: 4px 0 16px; }
.mn-fig img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 75, 147, .08);
  cursor: zoom-in; background: #fff;
}
.mn-fig.small img { max-width: 560px; }
.mn-fig figcaption { margin-top: 7px; font-size: 12.5px; color: var(--muted); }
.mn-zoom-hint { color: #a9b7c6; font-size: 11.5px; }

.mn-note {
  display: grid; gap: 4px;
  margin: 0 0 14px; padding: 12px 14px;
  border-radius: 9px; border-left: 4px solid var(--blue);
  background: var(--surface-3);
}
.mn-note b { font-size: 12.5px; color: var(--blue-dark); }
.mn-note span { font-size: 13.5px; line-height: 1.6; color: #35485e; }
.mn-note.tip { border-left-color: var(--low); background: #f4fcf6; }
.mn-note.tip b { color: var(--green-txt); }
.mn-note.warn { border-left-color: var(--medium); background: #fffbf2; }
.mn-note.warn b { color: var(--amber-txt); }

.mn-table { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.mn-table th, .mn-table td {
  padding: 9px 11px; border-bottom: 1px solid var(--line-soft);
  text-align: left; font-size: 13.5px; white-space: normal; line-height: 1.5;
}
.mn-table th { background: var(--surface-2); color: var(--muted); font-weight: 500; }
.mn-table td:first-child { font-weight: 500; color: var(--text); white-space: nowrap; }

.mn-qa { display: grid; gap: 8px; margin-bottom: 12px; }
.mn-qa details {
  border: 1px solid var(--line-soft); border-radius: 9px;
  background: var(--surface-3); overflow: hidden;
}
.mn-qa summary {
  padding: 11px 14px; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--text);
  list-style: none;
}
.mn-qa summary::-webkit-details-marker { display: none; }
.mn-qa summary::before { content: "▸ "; color: var(--blue-dark); }
.mn-qa details[open] summary::before { content: "▾ "; }
.mn-qa details p { margin: 0; padding: 0 14px 12px 26px; font-size: 13.5px; }

.mn-resize {
  position: absolute; right: 0; bottom: 0;
  width: 18px; height: 18px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--line) 50%, var(--line) 62%, transparent 62%, transparent 74%, var(--line) 74%, var(--line) 86%, transparent 86%);
  touch-action: none;
}

.mn-lightbox {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(6, 20, 36, .88);
  display: grid; place-items: center;
  padding: 32px; cursor: zoom-out;
}
.mn-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.mn-lightbox .mn-btn { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,.2); }

@media (max-width: 860px) {
  .mn-win { width: calc(100vw - 16px) !important; height: calc(100vh - 16px) !important; left: 8px !important; top: 8px !important; }
  .mn-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .mn-toc { border-right: 0; border-bottom: 1px solid var(--line); max-height: 132px; flex-direction: row; flex-wrap: wrap; }
  .mn-toc-group { display: none; }
  .mn-search { width: 120px; }
  .mn-content { padding: 4px 16px 32px; }
  .mn-fab span { display: none; }
  .mn-fab { padding: 0; width: 54px; justify-content: center; }
}
@media print { .mn-fab, .mn-win { display: none !important; } }

/* ---------- งานชี้แจง ---------- */
.track-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.track-card {
  display: grid; gap: 10px; align-content: start;
  padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-3);
}
.track-card.empty { opacity: .6; }
.track-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.track-head strong { display: block; font-size: 15px; }
.track-head span { color: var(--muted); font-size: 12px; }
.track-head b { font-size: 26px; color: var(--blue-dark); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.track-head > div { min-width: 0; }
.track-head strong, .track-head span { overflow-wrap: anywhere; }
.track-body { display: grid; gap: 2px; }
.track-body .kv-line { border-top: 1px dashed var(--line); padding: 5px 0; font-size: 13px; }
@media (max-width: 760px) {
  .health { white-space: normal; text-align: right; max-width: 100%; }
  .panel-heading { flex-wrap: wrap; }
}

/* รายละเอียดที่กฎธุรกิจตรวจพบ (แสดงใน drawer) */
.rule-detail {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e3e8ef);
  border-left: 3px solid #f59e0b;
  border-radius: 10px;
  background: #fffbeb;
}
.rule-detail b { display: block; font-size: 12px; color: #92400e; margin-bottom: 4px; }
.rule-detail p { margin: 0; font-size: 13px; line-height: 1.6; color: #3f3f46; }
.rule-detail small { display: block; margin-top: 6px; font-size: 11.5px; color: #78716c; }

.status-strip .danger { border-left-color: var(--critical); }
.status-strip .danger strong { color: var(--red-txt); }

.setting-list label.wide { grid-template-columns: minmax(140px,1fr) 1fr 0; }
.setting-list label.wide input { text-align: left; }


.empty-box {
  padding: 18px; border: 1px dashed var(--line); border-radius: 10px;
  background: var(--surface-3); color: var(--muted); font-size: 13px; text-align: center; margin-bottom: 12px;
}
tr.on { background: #f0f7ff; }
.hint.danger { color: var(--red-txt); }
.problem-file-summary { border-left: 4px solid var(--critical); }
.problem-file-summary.ok { border-left-color: var(--low); }
.problem-file-table { max-height: 560px; overflow: auto; }
.problem-file-table table { min-width: 1080px; }
.problem-file-table thead th { position: sticky; top: 0; z-index: 2; background: #edf4fc; }
.problem-file-table td { vertical-align: top; }
.problem-file-table .file-name-link { min-width: 260px; max-width: 420px; }
.cloud-file-tabs { display: flex; gap: 7px; overflow-x: auto; margin: 0 0 12px; padding: 4px 0 10px; border-bottom: 1px solid var(--line); }
.cloud-file-tabs button { flex: 0 0 auto; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: 500 11.5px Kanit, sans-serif; cursor: pointer; }
.cloud-file-tabs button b { margin-left: 4px; color: inherit; }
.cloud-file-tabs button:hover { border-color: #8dbbea; color: var(--blue-dark); }
.cloud-file-tabs button.active { border-color: var(--blue); background: #eaf3ff; color: var(--blue-dark); font-weight: 700; }

.mn-h4 { margin: 18px 0 8px; font-size: 14.5px; font-weight: 600; color: #22384f; }

/* ---------------- คลังไฟล์จากเมล ---------------- */
.mail-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  margin-bottom: 14px;
  overflow: hidden;
}
.mail-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 12px 14px; background: var(--surface-3); border-bottom: 1px solid var(--line-soft);
}
.mail-head strong { display: block; font-size: 13.5px; color: #22384f; line-height: 1.5; }
.mail-head span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.mail-tags { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 0 auto; }
.mail-card table { font-size: 12.5px; }
.mail-card tr.bad { background: #fff5f5; }
.mail-card input[type="checkbox"] { width: 15px; height: 15px; }
.tick-list li.no { color: var(--red-txt); }
.tick-list li.no::before { content: "✕"; }
@media (max-width: 760px) {
  .mail-head { flex-direction: column; }
}

/* ---------------- แมปบริษัท -> ระบบ (XB / 123) ---------------- */
.sysmap { display: grid; gap: 8px; }
.sysmap-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 11px 14px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--surface-3);
}
.sysmap-row.todo { border-color: #fca5a5; background: #fff5f5; }
.sysmap-row strong { display: block; font-size: 14px; color: #22384f; }
.sysmap-row span { font-size: 11.5px; color: var(--muted); }
.sysmap-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-btn {
  border: 1px solid var(--line); background: #fff; color: #55697e;
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.chip-btn:hover { border-color: var(--s1); }
.chip-btn.on { border-color: #94a3b8; background: #eef2f7; color: #22384f; font-weight: 500; }
.chip-btn.on.amber { border-color: #f59e0b; background: #fffbeb; color: #92400e; }
.chip-btn.on.blue { border-color: var(--s1); background: #eff6ff; color: #0b3d70; }
@media (max-width: 640px) { .sysmap-row { flex-direction: column; align-items: flex-start; } }

/* ---------------- สรุป 1 บริษัท / 1 วัน ---------------- */
.daily-summary-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 170px 150px auto auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}
.daily-summary-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
}
.daily-summary-controls input,
.daily-summary-controls select { width: 100%; min-height: 38px; background: var(--surface); }
.daily-summary-controls h2 { margin-bottom: 2px; }
.daily-summary-controls small { color: var(--muted); }
.daily-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  margin-bottom: 12px;
  border: 1px solid #b9d9f8;
  border-radius: 10px;
  background: linear-gradient(100deg, #f5faff, #fff);
}
.daily-summary-head h2 { font-size: 22px; margin: 1px 0 2px; }
.daily-summary-head p:last-child { color: var(--muted); font-size: 11.5px; }
.daily-summary-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.daily-summary-kpis article {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: 10px;
  background: var(--surface);
}
.daily-summary-kpis article.ok { border-top-color: var(--low); }
.daily-summary-kpis article.warn { border-top-color: var(--medium); }
.daily-summary-kpis article.bad { border-top-color: var(--critical); }
.daily-summary-kpis span,
.daily-summary-kpis small { display: block; color: var(--muted); font-size: 11.5px; }
.daily-summary-kpis strong { display: block; margin: 5px 0 2px; font-size: 23px; color: var(--text); }
.daily-focus-board { margin-bottom: 12px; background: linear-gradient(135deg, #fff 0%, #f6f3ff 100%); }
.daily-focus-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.daily-focus-title h2 { margin: 2px 0 3px; font-size: 18px; }
.daily-focus-title small { color: var(--muted); font-size: 11.5px; }
.daily-reconcile-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.daily-reconcile-tiles article { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.92); cursor: pointer; }
.daily-reconcile-tiles article:hover { border-color: #9c7cf4; box-shadow: 0 5px 18px rgba(72,45,145,.08); }
.daily-reconcile-tiles span,.daily-reconcile-tiles small { display: block; color: var(--muted); font-size: 10.5px; }
.daily-reconcile-tiles strong { display: block; margin: 5px 0 2px; font-size: 22px; color: var(--text); }
.daily-difference-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 9px; }
.daily-difference-strip div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid #cce9d8; border-radius: 8px; background: #f1fbf5; font-size: 11.5px; }
.daily-difference-strip div.warn { border-color: #f4d8a0; background: #fff8e8; }
.daily-difference-strip div.bad { border-color: #f5c2c2; background: #fff2f2; }
.daily-difference-strip b { color: var(--text); white-space: nowrap; }
.daily-next-work { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; padding: 11px 13px; border: 1px solid #b9d9f8; border-left: 4px solid var(--blue); border-radius: 9px; background: #f5faff; color: var(--text); font-family: inherit; text-align: left; cursor: pointer; }
.daily-next-work.warn { border-color: #f4d8a0; border-left-color: var(--medium); background: #fff9ec; }
.daily-next-work.bad { border-color: #f5c2c2; border-left-color: var(--critical); background: #fff5f5; }
.daily-next-work.ok { border-color: #bfe6cd; border-left-color: var(--low); background: #f3fbf6; }
.daily-next-work span { display: grid; gap: 1px; min-width: 0; }
.daily-next-work small { color: var(--blue-dark); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.daily-next-work b { font-size: 13.5px; }
.daily-next-work em { overflow: hidden; color: var(--muted); font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.daily-next-work > strong { flex: 0 0 auto; color: var(--blue-dark); font-size: 12px; }
.daily-source-summary { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
.daily-source-summary article { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.daily-source-summary article.ok { border-color: #bfe6cd; background: #f3fbf6; }
.daily-source-summary article.bad { border-color: #f5c2c2; background: #fff5f5; }
.daily-source-summary span,.daily-source-summary b { display: block; }
.daily-source-summary span { color: var(--muted); font-size: 10.5px; }
.daily-source-summary b { margin-top: 4px; color: var(--text); font-size: 14px; }
.bo-document-summary { margin-bottom: 14px; }
.bo-document-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
.bo-document-metrics article { padding: 11px 12px; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: 9px; background: #fff; }
.bo-document-metrics article.ok { border-top-color: var(--low); background: #f5fbf7; }
.bo-document-metrics article.warn { border-top-color: var(--medium); background: #fffaf0; }
.bo-document-metrics article.bad { border-top-color: var(--critical); background: #fff5f5; }
.bo-document-metrics span,.bo-document-metrics b { display: block; }
.bo-document-metrics span { color: var(--muted); font-size: 10.5px; }
.bo-document-metrics b { margin-top: 4px; font-size: 18px; }
.bo-document-layout { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.8fr); gap: 12px; margin-bottom: 12px; }
.bo-document-layout h3 { margin: 0 0 7px; font-size: 13px; }
.bo-file-list { display: grid; gap: 7px; }
.bo-file-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbff; color: var(--text); font-family: inherit; text-align: left; cursor: pointer; }
.bo-file-card:hover { border-color: var(--blue); background: #f1f7ff; }
.bo-file-card span { min-width: 0; }
.bo-file-card b,.bo-file-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-file-card b { color: var(--blue-dark); font-size: 11.5px; }
.bo-file-card small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.bo-file-card em { flex: 0 0 auto; font-style: normal; }
.bo-unmatched-received { margin: 12px 0; padding-top: 12px; border-top: 1px dashed var(--line); }
.bo-unmatched-received h3 { margin: 0 0 8px; font-size: 13px; color: var(--critical); }
.bo-full-identities { display: grid; gap: 3px; min-width: 190px; max-width: 360px; }
.bo-full-identities span { display: block; padding: 4px 6px; border: 1px solid #dbe8f7; border-radius: 5px; background: #f7faff; color: #334b67; font-size: 10.5px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.bo-requirement-attention { background: #fffdf8; }
.bo-follow-button { display: block; margin-top: 6px; padding: 5px 8px; border: 1px solid #bfd6f2; border-radius: 6px; background: #f3f8ff; color: var(--blue-dark); font: 600 10.5px inherit; cursor: pointer; }
.bo-follow-button:hover { border-color: var(--blue); background: #eaf3ff; }
.bo-follow-summary { align-items: center; }
.bo-follow-summary > div { min-width: 0; flex: 1; }
.bo-follow-summary button { flex: 0 0 auto; }
.bo-follow-detail { display: grid; gap: 14px; }
.bo-follow-missing-summary { padding: 13px 15px; border: 1px solid #fecaca; border-left: 5px solid var(--critical); border-radius: 10px; background: #fff5f5; }
.bo-follow-missing-summary.amber { border-color: #f6d89c; border-left-color: var(--medium); background: #fffaf0; }
.bo-follow-missing-summary.green { border-color: #bfe5ca; border-left-color: var(--low); background: #f3fbf6; }
.bo-follow-missing-summary span,.bo-follow-missing-summary strong,.bo-follow-missing-summary small,.bo-follow-missing-summary em { display: block; }
.bo-follow-missing-summary span { color: var(--critical); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.bo-follow-missing-summary strong { margin-top: 3px; color: #991b1b; font-size: 15px; line-height: 1.4; }
.bo-follow-missing-summary small { margin-top: 5px; color: #765050; font-size: 10.5px; line-height: 1.45; }
.bo-follow-missing-summary em { margin-top: 9px; padding: 8px 10px; border-radius: 7px; background: #fff; color: #18324f; font-size: 11px; font-style: normal; font-weight: 750; line-height: 1.45; }
.bo-follow-missing-summary.amber span,.bo-follow-missing-summary.amber strong { color: #8a5a00; }
.bo-follow-missing-summary.green span,.bo-follow-missing-summary.green strong { color: #166534; }
.bo-follow-status { padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 9px; background: #f7faff; }
.bo-follow-status.red { border-left-color: var(--critical); background: #fff5f5; }
.bo-follow-status.amber { border-left-color: var(--medium); background: #fffaf0; }
.bo-follow-status.green { border-left-color: var(--low); background: #f3fbf6; }
.bo-follow-status span,.bo-follow-status small { display: block; }
.bo-follow-status span { font-weight: 800; }
.bo-follow-status small { margin-top: 3px; color: var(--muted); }
.bo-follow-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.bo-follow-grid > div { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.bo-follow-grid > div.wide { grid-column: 1/-1; }
.bo-follow-grid span,.bo-follow-grid b { display: block; }
.bo-follow-grid span { margin-bottom: 3px; color: var(--muted); font-size: 10.5px; }
.bo-follow-grid b { overflow-wrap: anywhere; font-size: 12px; }
.bo-follow-files { display: grid; gap: 7px; }
.bo-follow-files h3 { margin: 0 0 2px; font-size: 13px; }
.bo-follow-file { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 11px; border: 1px solid #cfe0f5; border-radius: 8px; background: #f7faff; color: var(--text); font-family: inherit; text-align: left; cursor: pointer; }
.bo-follow-file:hover { border-color: var(--blue); background: #eef6ff; }
.bo-follow-file span { min-width: 0; }
.bo-follow-file small,.bo-follow-file b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-follow-file small { color: var(--muted); font-size: 10px; }
.bo-follow-file b { margin-top: 2px; color: var(--blue-dark); font-size: 11px; }
.bo-follow-file em { flex: 0 0 auto; color: var(--blue); font-size: 11px; font-style: normal; font-weight: 700; }
.bo-follow-file-names { padding: 10px 11px; border: 1px dashed var(--line); border-radius: 8px; background: #fff; }
.bo-follow-file-names b,.bo-follow-file-names span,.bo-follow-file-names small { display: block; }
.bo-follow-file-names span { margin-top: 4px; overflow-wrap: anywhere; font-size: 11px; }
.bo-follow-file-names small { margin-top: 5px; color: var(--muted); }
.bo-follow-copy { display: grid; gap: 9px; }
.bo-follow-copy-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bo-follow-copy-head span,.bo-follow-copy-head small { display: block; }
.bo-follow-copy-head span { font-size: 13px; font-weight: 800; color: var(--text); }
.bo-follow-copy-head small { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.bo-follow-message { display: grid; gap: 9px; }
.bo-follow-message section { padding: 12px 13px; border: 1px solid #d7e6f8; border-left: 4px solid var(--blue); border-radius: 9px; background: #f7faff; }
.bo-follow-message section:nth-child(2) { border-color: #f0d8ad; border-left-color: var(--medium); background: #fffaf1; }
.bo-follow-message section:nth-child(3) { border-color: #d9e2ec; border-left-color: #64748b; background: #f8fafc; }
.bo-follow-message section.action { border-color: #cce8d5; border-left-color: var(--low); background: #f3fbf6; }
.bo-follow-message h3 { margin: 0 0 9px; font-size: 12px; color: var(--blue-dark); }
.bo-follow-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.bo-follow-section-head h3 { margin-bottom: 0; }
.bo-follow-section-head small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.bo-follow-count { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; background: #e2e8f0; color: #334155; font-size: 10.5px; white-space: nowrap; }
.bo-follow-message section:nth-child(2) h3 { color: #8a5a00; }
.bo-follow-message section:nth-child(3) h3 { color: #475569; }
.bo-follow-message section.action h3 { color: #166534; }
.bo-follow-message dl { display: grid; gap: 0; margin: 0; }
.bo-follow-message dl > div { display: grid; grid-template-columns: minmax(105px,.42fr) minmax(0,1fr); gap: 10px; padding: 7px 0; border-top: 1px dashed rgba(106,139,177,.25); }
.bo-follow-message dl > div:first-child { padding-top: 0; border-top: 0; }
.bo-follow-message dl > div:last-child { padding-bottom: 0; }
.bo-follow-message dt { color: var(--muted); font-size: 10.5px; }
.bo-follow-message dd { margin: 0; overflow-wrap: anywhere; color: var(--text); font-size: 11.5px; font-weight: 700; }
.bo-follow-message dd.danger { color: var(--critical); }
.bo-follow-message p { margin: 6px 0 0; overflow-wrap: anywhere; font-size: 11px; line-height: 1.5; }
.bo-follow-message p:first-of-type { margin-top: 0; }
.bo-follow-file-group { margin-top: 8px; padding: 9px 10px; border: 1px solid #dce5ef; border-radius: 8px; background: #fff; }
.bo-follow-file-group h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 7px; color: var(--text); font-size: 11px; }
.bo-follow-file-group h4 span { flex: 0 0 auto; color: var(--muted); font-size: 10px; font-weight: 600; }
.bo-follow-file-list { display: grid; gap: 5px; margin: 0; padding-left: 23px; }
.bo-follow-file-list li { margin: 0; padding: 5px 7px; border-radius: 5px; background: #f5f8fc; color: var(--blue-dark); font-size: 10.5px; font-weight: 700; overflow-wrap: anywhere; }
.bo-follow-file-empty { margin: 0 !important; padding: 7px 8px; border-radius: 6px; background: #fff3f3; color: var(--critical); font-weight: 700; }
.bo-follow-file-state { margin-top: 9px !important; padding: 8px 9px; border-radius: 7px; background: #eef3f8; color: #475569; }
.bo-follow-message ol { margin: 0; padding-left: 20px; }
.bo-follow-message li { margin-top: 5px; padding-left: 3px; font-size: 11px; line-height: 1.5; }
.bo-follow-message li:first-child { margin-top: 0; }
.bo-follow-raw { border: 1px dashed var(--line); border-radius: 8px; background: #fff; }
.bo-follow-raw summary { padding: 9px 11px; color: var(--blue-dark); font-size: 10.5px; font-weight: 700; cursor: pointer; }
.bo-follow-raw[open] summary { border-bottom: 1px dashed var(--line); }
.bo-follow-raw textarea { width: calc(100% - 20px); min-height: 230px; margin: 10px; resize: vertical; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; color: var(--text); font: 11px/1.6 inherit; }
.daily-audit-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.daily-audit-flow > div,
.daily-audit-flow > button {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.daily-audit-flow > button {
  width: 100%;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.daily-audit-flow > button:hover { transform: translateY(-1px); border-color: #8dbbea; box-shadow: var(--shadow); }
.daily-audit-flow b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 50%;
  background: #dfe8f2;
  color: #385169;
  font-size: 11px;
}
.daily-audit-flow .done b { background: #dff5e5; color: #167236; }
.daily-audit-flow .warn b { background: #fff0ce; color: #956400; }
.daily-audit-flow .bad b { background: #fee2e2; color: #b42318; }
.daily-audit-flow span { min-width: 0; font-weight: 600; font-size: 12.5px; }
.daily-audit-flow small { display: block; margin-top: 1px; color: var(--muted); font-weight: 400; font-size: 10.5px; }
.daily-summary-grid { align-items: stretch; }
.audit-sheet-panel { margin-bottom: 14px; border-top: 3px solid var(--blue); }
.audit-sheet-wrap { max-height: 410px; overflow: auto; }
.audit-sheet { min-width: 1080px; font-size: 12px; }
.audit-sheet thead th { position: sticky; top: 0; z-index: 2; background: #edf4fc; }
.audit-sheet tbody tr:hover td { background: #f7fbff; }
.audit-sheet td { vertical-align: middle; }
.audit-sheet td:last-child { display: flex; gap: 6px; justify-content: flex-end; }
.sheet-progress { display: inline-flex; min-width: 54px; justify-content: center; padding: 4px 7px; border-radius: 999px; color: #805b00; background: #fff0c2; font-weight: 700; }
.sheet-progress.ok { color: #166534; background: #dcfce7; }
.daily-summary-grid > .panel { margin-bottom: 14px; }
.daily-kind-list { display: grid; gap: 7px; margin-bottom: 12px; }
.daily-kind-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-3);
  font-size: 12.5px;
}
.report-list.compact li { padding: 7px 0; }
.daily-detail-table { max-height: 520px; overflow: auto; }
.daily-detail-table thead th { position: sticky; top: 0; z-index: 2; background: #edf4fc; }
.daily-detail-table .file-name-link { min-width: 220px; max-width: 360px; }

.period-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding: 12px 16px;
  border: 1px solid #b9d9f8;
  border-left: 4px solid var(--blue);
  border-radius: 10px;
  background: #f5faff;
}
.period-banner h2 { margin: 1px 0 2px; font-size: 17px; }
.period-banner p:last-child { color: var(--muted); font-size: 11.5px; }
.operating-timeline { margin-bottom: 14px; }
.operating-timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.operating-timeline-grid article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8fbff;
}
.operating-timeline-grid b { color: var(--blue); font-size: 12px; }
.operating-timeline-grid span { color: var(--muted); font-size: 11.5px; }
.daily-checklist-panel { margin-bottom: 14px; }
.checklist-table { min-width: 1220px; }
.checklist-table tbody tr { cursor: pointer; }
.checklist-table tbody tr:hover td { background: #f5faff; }
.checklist-table td { vertical-align: top; }
.check-mark { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 11.5px; }
.check-mark b {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 10px;
}
.check-mark.ok b { color: #166534; background: #dcfce7; }
.check-mark.missing { color: #b42318; }
.check-mark.missing b { color: #fff; background: #dc2626; }
.check-mark.optional { color: var(--muted); }
.check-mark.optional b { color: #805b00; background: #fff0c2; }
.checklist-row .badge + .sub { max-width: 220px; }
.registry-note { max-width: 240px; color: #8a5a00; }
.registry-alert { margin-top: 8px; }
.company-day-checklist { margin-bottom: 14px; }
.checklist-cards { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.checklist-cards article { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.checklist-cards i { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 50%; font-style: normal; font-weight: 700; }
.checklist-cards b,.checklist-cards small { display: block; }
.checklist-cards b { font-size: 11.5px; }
.checklist-cards small { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.checklist-cards .ok i { color: #166534; background: #dcfce7; }
.checklist-cards .missing { border-color: #fecaca; background: #fff8f8; }
.checklist-cards .missing i { color: #fff; background: #dc2626; }
.checklist-cards .optional i { color: #805b00; background: #fff0c2; }

@media (max-width: 1280px) {
  .daily-summary-controls { grid-template-columns: minmax(240px, 1fr) 160px 140px; }
  .daily-summary-controls button { width: 100%; }
  .daily-summary-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .daily-reconcile-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .daily-source-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bo-document-layout { grid-template-columns: 1fr; }
  .bo-document-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checklist-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .operating-timeline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .next-action-bar { align-items: flex-start; }
  .damage-definition { align-items: flex-start; flex-direction: column; }
  .daily-summary-controls { grid-template-columns: 1fr 1fr; }
  .daily-summary-controls > div { grid-column: 1 / -1; }
  .daily-summary-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-reconcile-tiles,.daily-difference-strip { grid-template-columns: 1fr; }
  .daily-source-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-document-metrics { grid-template-columns: 1fr; }
  .daily-audit-flow { grid-template-columns: 1fr; }
  .checklist-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .period-banner { align-items: flex-start; flex-direction: column; }
  .operating-timeline-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .next-action-bar { align-items: stretch; flex-direction: column; }
  .next-action-bar button { width: 100%; }
  .daily-summary-controls,
  .daily-summary-kpis { grid-template-columns: 1fr; }
  .daily-summary-head { align-items: flex-start; flex-direction: column; }
  .daily-source-summary { grid-template-columns: 1fr; }
  .daily-focus-title,.daily-next-work { align-items: flex-start; flex-direction: column; }
  .daily-next-work em { white-space: normal; }
  .checklist-cards { grid-template-columns: 1fr; }
  .bo-follow-grid { grid-template-columns: 1fr; }
  .bo-follow-grid > div.wide { grid-column: auto; }
  .bo-follow-message dl > div { grid-template-columns: 1fr; gap: 2px; }
  .bo-follow-section-head { flex-direction: column; }
}
/* Compact reviewer workbench; no change to approval permissions. */
.review-workbench { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:16px; margin:12px 0; background:#f1f7ff; border:1px solid #cbdff7; border-radius:12px; }
.review-workbench small,.review-case-nav small { display:block; color:#64748b; font-size:12px; margin-top:4px; }
.review-workbench-actions { display:flex; flex-wrap:wrap; gap:8px; }
.review-case-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 0; border-bottom:1px solid #dbe5f0; margin-bottom:16px; }
.review-case-nav span { text-align:center; }
@media(max-width:600px) { .review-case-nav { flex-wrap:wrap; } .review-case-nav span { order:-1; width:100%; } }
/* Review groups preserve individual decisions while reducing navigation. */
.review-groups { margin: 16px 0; padding: 18px; border: 1px solid #bdd5ee; border-radius: 12px; background: #f6faff; }
.review-groups summary { cursor: pointer; font-weight: 700; color: #075bb4; }
.review-groups > p { color: #53667c; line-height: 1.6; }
.review-group-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; max-height: 540px; overflow: auto; }
.review-group { background: white; border: 1px solid #d7e3f0; border-radius: 10px; padding: 16px; display: flex; align-items: center; gap: 12px; justify-content: space-between; overflow-wrap: anywhere; }
.review-group p { margin: 6px 0; }
.review-group button { flex-shrink: 0; }
/* Company-first review: keep the operational sheets separate. */
.review-company-picker { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-top:24px; }
.review-company-picker button { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:20px; }
.review-company-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:20px; align-items:start; }
.review-company-group { min-width:0; }
.review-company-group .company-subcompany-list { grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); }
@media(max-width:1180px) { .review-company-groups { grid-template-columns:1fr; } }
.review-account-details { display:flex; flex-direction:column; gap:10px; min-width:240px; padding:8px 0; }
.review-account-details > span { border-top:1px solid #dce7f5; padding-top:8px; font-size:13px; }
.review-account-details > small { color:#6b7280; }
/* Unified audit work sheet: status selection stays above actual BO/STM rows. */
.review-overview-controls { display:flex; flex-wrap:wrap; gap:16px; align-items:end; margin:20px 0; }
.review-overview-controls label { display:flex; flex-direction:column; gap:8px; font-size:14px; }
.review-overview-controls input,.review-overview-controls select { min-height:42px; max-width:100%; padding:8px 12px; font:inherit; border:1px solid #b8cde8; border-radius:8px; }
.review-overview-states { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.review-overview-states button { min-height:48px; font-size:16px; }
.review-overview-states b { margin-left:8px; }
.review-overview-table { min-width:1150px; }
.audit-sheet-tools { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:12px; font-size:13px; }
.audit-sheet-tools { flex-wrap:wrap; }
.audit-column-picker { position:relative; }
.audit-column-picker summary { cursor:pointer; padding:10px 14px; border:1px solid #b8cde8; border-radius:8px; background:#fff; }
.audit-column-options { position:absolute; right:0; top:100%; z-index:8; width:340px; max-width:85vw; max-height:60vh; overflow:auto; background:#fff; border:1px solid #b8cde8; border-radius:8px; padding:16px; box-shadow:0 8px 24px #18365c26; }
.audit-column-options label { display:flex; align-items:center; gap:10px; padding:7px 0; }
.audit-column-options input { width:16px; height:16px; margin:0; }
.audit-sheet [hidden] { display:none !important; }
.sheet-filter-button { border:0; background:transparent; color:inherit; font:inherit; font-weight:600; cursor:pointer; text-align:left; padding:2px; }
.sheet-filter-button.active { color:#006acb; }
.sheet-active-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:10px 0; font-size:13px; }
.sheet-active-filters button { padding:6px 10px; border:1px solid #b8cde8; background:#edf5ff; border-radius:6px; cursor:pointer; }
.sheet-filter-dialog { width:440px; max-width:90vw; border:1px solid #b8cde8; border-radius:12px; padding:24px; }
.sheet-filter-dialog::backdrop { background:#14243b66; }
.sheet-filter-dialog label { display:grid; gap:8px; margin:12px 0; }
.sheet-filter-dialog input,.sheet-filter-dialog select { padding:10px; width:100%; box-sizing:border-box; }
.sheet-filter-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.sheet-filter-actions button { padding:10px; cursor:pointer; border:1px solid #b8cde8; border-radius:6px; background:#edf5ff; }
.table-wrap:has(.audit-sheet) { max-height:70vh; overflow:auto; }
.review-overview-table.audit-sheet { border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; }
.review-overview-table.audit-sheet td,.review-overview-table.audit-sheet th { min-width:130px; max-width:270px; padding:10px 12px; border-right:1px solid #dce5ee; border-bottom:1px solid #dce5ee; font-size:13px; overflow-wrap:anywhere; }
.audit-sheet thead { position:sticky; top:0; z-index:3; }
.review-overview-table.audit-sheet th { background:#f1f5f9; }
.review-overview-table.audit-sheet .bo-group { background:#e4f4e8; }
.review-overview-table.audit-sheet .stm-group { background:#e3efff; }
.audit-sheet tbody td:first-child { position:sticky; left:0; z-index:2; background:#f8fafc; min-width:170px; max-width:170px; }
.audit-sheet tbody tr:hover td { background:#f0f7ff; }
.audit-sheet select { font:inherit; padding:8px; max-width:220px; border:1px solid #b8cde8; border-radius:6px; background:#fff; }
.case-files-ready { display:grid; gap:12px; min-width:0; }
.case-evidence-range { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px; border:1px solid #dce5ee; border-radius:9px; background:#fff; }
.case-evidence-range label { display:grid; gap:5px; min-width:0; color:var(--muted); font-size:12px; }
.case-evidence-range input { width:100%; min-height:38px; box-sizing:border-box; }
.case-mail-open { justify-self:start; }
.case-mail-evidence { display:grid; gap:10px; min-width:0; width:100%; padding:14px; box-sizing:border-box; border:1px solid #b9d7f5; border-radius:10px; background:#fff; }
.case-mail-evidence h4,.case-mail-evidence>p { margin:0; }
.case-mail-evidence>input[type=search] { width:100%; min-height:42px; box-sizing:border-box; }
.case-mail-evidence article { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; min-width:0; padding:12px; margin:0; border:1px solid #dce5ee; border-radius:8px; background:#f9fbfd; }
.case-mail-file { min-width:0; }
.case-mail-file b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.case-mail-file p { margin:5px 0 0; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.case-mail-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.case-mail-evidence form { grid-column:1 / -1; display:grid; gap:8px; padding:12px; border:1px solid #e5bd61; border-radius:8px; background:#fff9e8; }
.case-mail-evidence form label { display:grid; gap:6px; }
.case-mail-evidence form textarea { width:100%; box-sizing:border-box; }
.case-mail-evidence details { grid-column:1 / -1; }
@media(max-width:720px){.case-evidence-range,.case-mail-evidence article{grid-template-columns:1fr}.case-mail-actions{justify-content:flex-start}.case-mail-actions button{flex:1}.case-mail-open{width:100%}}
.review-overview-table td { vertical-align:top; font-size:16px; }
.review-overview-table small { display:block; margin-top:8px; font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.review-overview-table.audit-sheet { color:#334155; line-height:1.5; }
.review-overview-table.audit-sheet th,.review-overview-table.audit-sheet td { white-space:normal; vertical-align:middle; padding:9px 12px; border-color:#e5eaf0; }
.review-overview-table.audit-sheet thead th { position:static; color:#53647b; font-weight:600; }
.review-overview-table.audit-sheet thead tr:first-child th { padding:10px 12px; font-size:12px; letter-spacing:.02em; }
.review-overview-table.audit-sheet thead tr:last-child th:nth-child(n+6):nth-child(-n+14) { background:#f0f8f3; }
.review-overview-table.audit-sheet thead tr:last-child th:nth-child(n+15):nth-child(-n+23) { background:#edf5ff; }
.review-overview-table.audit-sheet tbody td { background:#fff; font-variant-numeric:tabular-nums; }
.review-overview-table.audit-sheet tbody tr:nth-child(even) td { background:#fafcfe; }
.review-overview-table.audit-sheet tbody tr:hover td { background:#eef5ff; }
.review-overview-table.audit-sheet tbody td:first-child { min-width:190px; max-width:190px; overflow-wrap:anywhere; }
.review-overview-table.audit-sheet td:last-child { display:table-cell; }
.review-overview-table.audit-sheet .sheet-col-1 { min-width:175px; max-width:175px; }
.review-overview-table.audit-sheet .sheet-col-2,.review-overview-table.audit-sheet .sheet-col-4 { min-width:85px; }
.review-overview-table.audit-sheet .sheet-col-5,.review-overview-table.audit-sheet .sheet-col-14 { min-width:165px; white-space:nowrap; }
.review-overview-table.audit-sheet .sheet-money { text-align:right; font-weight:600; min-width:100px; white-space:nowrap; }
.review-overview-table.audit-sheet select { width:100%; min-height:34px; padding:6px 10px; border-radius:7px; border-color:#d5dfeb; background:#f8fafc; font-size:12px; color:#44556c; box-sizing:border-box; }
.sheet-result { display:inline-block; max-width:100%; box-sizing:border-box; border-radius:6px; padding:4px 7px; font-size:12px; line-height:1.5; white-space:normal; overflow-wrap:anywhere; }
.sheet-result.is-match { color:#187146; background:#e8f5ed; }
.sheet-result.is-review { color:#93651c; background:#fff5df; }
.review-overview-table.audit-sheet .sheet-filter-button { line-height:1.45; font-size:12px; }
.alert.live-update-available {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  width: max-content;
  max-width: calc(100vw - 40px);
  margin: 0;
  box-shadow: 0 8px 28px #12345626;
  flex-wrap: wrap;
}
/* Keep source approval separate from case decisions. */
.pdf-source-approval { margin-top: 1rem; padding: 1rem; border: 1px solid #b6cce5; border-radius: 12px; background: #f8fbff; color: #21344b; }
.pdf-source-approval label { display: block; margin: .8rem 0; font-size: 1rem; }
.pdf-source-approval textarea { display: block; width: 100%; box-sizing: border-box; margin-top: .4rem; }
.pdf-source-approval input[type=checkbox] { width: 20px; height: 20px; vertical-align: middle; }
.pdf-source-approval button { min-height: 36px; }
.pdf-source-approval [data-status] { overflow-wrap: anywhere; }