/* PMK Incentive · Executive Technical Blue visual system
   Presentation only: shared by existing PHP screens; no workflow or control behavior changed. */
:root {
  --pmk-blue: #0a84d8;
  --pmk-blue-dark: #0069ae;
  --pmk-navy: #0b1f33;
  --pmk-ink: #18212b;
  --pmk-muted: #677481;
  --pmk-line: #e1e8ef;
  --pmk-canvas: #edf2f7;
  --pmk-pale: #eaf6ff;
  --bs-primary: var(--pmk-blue);
  --bs-primary-rgb: 10, 132, 216;
  --bs-link-color: var(--pmk-blue-dark);
  --bs-link-hover-color: #004f86;
  --bs-body-color: var(--pmk-ink);
  --bs-body-bg: var(--pmk-canvas);
  --bs-border-color: var(--pmk-line);
  --bs-font-sans-serif: "Segoe UI", "Noto Sans Thai", Tahoma, Arial, sans-serif;
  font-synthesis: none;
}

body {
  background: var(--pmk-canvas);
  color: var(--pmk-ink);
  font-size: 15px;
  line-height: 1.55;
}

a { text-underline-offset: 2px; }
:focus-visible { outline: 3px solid rgba(10, 132, 216, .35); outline-offset: 2px; }

/* Shared application header and navigation */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(255, 255, 255, .98) !important;
  border-bottom: 1px solid #dce5ed !important;
  box-shadow: 0 3px 14px rgba(11, 31, 51, .055);
}
.topbar > .container-xl { max-width: 1440px; }
.topbar .container-xl > .d-flex:first-child {
  min-height: 62px;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; }
.brand::before {
  content: "PMK";
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(140deg, #1597e5, #0069ae);
  box-shadow: 0 3px 8px rgba(10, 132, 216, .2);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
}
.brand b { color: var(--pmk-navy); font-size: 16px; letter-spacing: -.01em; }
.brand span { color: var(--pmk-muted); font-size: 12px; margin-left: 0; }
.topbar .small.text-secondary { color: #647586 !important; }
.topbar .form-select-sm { min-width: 92px; border-color: #d7e0e9; background-color: #fff; }
.topbar .who { padding-left: 12px; border-left: 1px solid var(--pmk-line); }
.topbar .who b { color: var(--pmk-navy); font-size: 13px; }
.topbar .btn-outline-secondary {
  --bs-btn-color: #526476;
  --bs-btn-border-color: #d2dce6;
  --bs-btn-hover-color: var(--pmk-navy);
  --bs-btn-hover-bg: #f1f6fa;
  --bs-btn-hover-border-color: #b8c9d8;
}
.qseg { border-radius: 9px; overflow: hidden; }
.qseg .btn {
  display: grid;
  line-height: 1.2;
  min-width: 66px;
  padding: 5px 9px;
  border-color: #d6e0e9;
}
.qseg .btn small { font-size: 10px; opacity: .82; }
.qseg .btn-primary { background: var(--pmk-blue); border-color: var(--pmk-blue); }
.tabs {
  gap: 4px;
  padding: 0 0 0;
  scrollbar-width: thin;
  scrollbar-color: #b7c8d7 transparent;
}
.tabs .nav-link {
  position: relative;
  color: #58697a;
  border: 0;
  border-radius: 8px 8px 0 0;
  padding: 10px 13px 12px;
  font-size: 13px;
  transition: background-color .15s ease, color .15s ease;
}
.tabs .nav-link:hover { color: var(--pmk-blue-dark); background: #f3f8fc; }
.tabs .nav-link.active {
  color: var(--pmk-blue-dark);
  background: var(--pmk-pale);
  font-weight: 700;
}
.tabs .nav-link.active::after {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 3px;
  border-radius: 4px 4px 0 0;
  background: var(--pmk-blue);
  content: "";
}

main.container-xl { max-width: 1320px; padding-top: 24px !important; padding-bottom: 40px !important; }

/* Content surfaces, metrics and data tables */
.card-panel {
  margin-bottom: 18px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--pmk-line);
  border-radius: 14px;
  box-shadow: 0 5px 18px rgba(11, 31, 51, .045);
}
.card-panel h2, .panel-title { margin: 0 0 14px; color: var(--pmk-navy); font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.card-panel .d-flex > h2 { margin-bottom: 0; }
.card-panel h3 { margin: 20px 0 10px; color: #203d57; font-size: 15px; font-weight: 700; }
.stat {
  position: relative;
  overflow: hidden;
  padding: 15px 16px;
  background: #f4f8fc;
  border: 1px solid #e6eef5;
  border-radius: 12px;
}
.stat-k { color: var(--pmk-muted); font-size: 12px; }
.stat-v { margin-top: 3px; color: var(--pmk-navy); font-size: 23px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.35; }
.stat-s { color: var(--pmk-muted); font-size: 12px; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-responsive { border-radius: 9px; }
.table { --bs-table-color: var(--pmk-ink); --bs-table-border-color: #edf1f5; margin-bottom: 0; }
.table thead th {
  background: #f0f5f9;
  color: #31485d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  border-bottom: 1px solid #dbe5ed;
}
.table td, .table th { padding: 9px 10px; vertical-align: middle; }
.table tfoot td { background: #f4f8fb; font-weight: 700; }
.table tr.grp td { background: #eef4f8; color: #30495f; font-weight: 650; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: #f5faff; color: var(--pmk-ink); }
.table input.form-control[type=number] { min-width: 100px; text-align: right; }
.empty { padding: 25px 18px; color: #637586; text-align: center; background: #f8fbfd; border: 1px dashed #cbd8e3; border-radius: 10px; }
.list-group { --bs-list-group-border-color: #e5edf3; --bs-list-group-border-radius: 9px; }
.list-group-item { padding: 11px 13px; }
.pcard { height: 100%; padding: 15px; background: #fff; border: 1px solid var(--pmk-line); border-radius: 12px; }
.pcard .net td { color: #13815f; border-top: 2px solid var(--pmk-line); font-size: 17px; font-weight: 700; }
.calc { padding: 10px 12px; color: #33506a; background: #f3f8fc; border: 1px solid #deebf4; border-radius: 9px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.mini { color: var(--pmk-muted); font-size: 11px; white-space: nowrap; }
.mini.ok { color: #13815f; } .mini.warn { color: #a86100; } .mini.info { color: var(--pmk-blue-dark); }
.steps { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 0 0 10px; padding: 0; color: var(--pmk-muted); font-size: 12px; list-style: none; }
.steps li { display: flex; align-items: center; gap: 7px; }
.steps i { display: inline-grid; place-items: center; width: 23px; height: 23px; color: #536678; background: #eaf0f5; border-radius: 50%; font-size: 11px; font-style: normal; }
.steps li.done i { color: #fff; background: #18a675; }
.steps li.now { color: var(--pmk-navy); font-weight: 700; }
.steps li.now i { color: #fff; background: var(--pmk-blue); }
.log { display: grid; gap: 4px; color: var(--pmk-muted); font-size: 12px; }
.notice { padding: 5px 11px; color: #5c6f80; border-left: 3px solid #8fcaf0; font-size: 12px; }
.month-picker select { width: auto; }
.matrix th.c, .matrix td.c { text-align: center; }

/* Keep actions recognizable and keyboard accessible */
.btn { border-radius: 8px; font-weight: 600; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.btn-sm { border-radius: 7px; font-size: 12px; }
.btn-primary {
  --bs-btn-bg: var(--pmk-blue);
  --bs-btn-border-color: var(--pmk-blue);
  --bs-btn-hover-bg: #0873bd;
  --bs-btn-hover-border-color: #0873bd;
  --bs-btn-active-bg: #0069ae;
  --bs-btn-active-border-color: #0069ae;
  box-shadow: 0 2px 5px rgba(10, 132, 216, .14);
}
.btn-primary:hover { box-shadow: 0 4px 10px rgba(10, 132, 216, .2); }
.form-control, .form-select { border-color: #d3dee8; border-radius: 8px; }
.form-control:focus, .form-select:focus { border-color: #65b5e8; box-shadow: 0 0 0 .2rem rgba(10, 132, 216, .13); }
.form-label { color: #344b60; font-size: 13px; font-weight: 650; }
.alert { border-radius: 10px; }
.badge { padding: .42em .72em; border-radius: 999px; font-size: 11px; font-weight: 650; }
.alert-info { --bs-alert-color: #075986; --bs-alert-bg: #e9f6ff; --bs-alert-border-color: #c7e7fa; }

/* Sign-in */
.login-page { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 36px 24px; background: radial-gradient(ellipse at 18% 12%, #e5f2fc 0, transparent 38%), #edf2f7; }
.login-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(390px, 1.08fr); width: min(100%, 1040px); min-height: 610px; overflow: hidden; background: #fff; border: 1px solid #dce5ed; border-radius: 20px; box-shadow: 0 20px 60px rgba(11, 31, 51, .12); }
.login-brand-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 36px 40px 25px; color: #fff; background: linear-gradient(150deg, #0b4775 0%, #07355f 58%, #092b4c 100%); }
.login-brand-panel::before, .login-brand-panel::after { position: absolute; content: ""; pointer-events: none; }
.login-brand-panel::before { top: 205px; right: -128px; width: 330px; height: 330px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255,255,255,.025), 0 0 0 68px rgba(255,255,255,.02); }
.login-brand-panel::after { right: 0; bottom: 0; left: 0; height: 210px; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(transparent, #000); }
.login-brand-top, .login-brand-content, .login-brand-footer { position: relative; z-index: 1; }
.login-brand-top { display: flex; align-items: center; gap: 12px; }
.login-brand-mark { display: inline-grid; place-items: center; width: 43px; height: 43px; color: #0b4775; background: #fff; border-radius: 13px; font-size: 12px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.login-brand-name { font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.login-brand-content { max-width: 400px; margin: 62px 0 55px; }
.login-eyebrow { color: #9bc9e8; font-size: 10px; font-weight: 700; letter-spacing: .17em; }
.login-brand-content h2 { margin: 15px 0 13px; color: #fff; font-size: clamp(29px, 3.5vw, 38px); font-weight: 750; letter-spacing: -.035em; line-height: 1.3; }
.login-brand-content > p { max-width: 350px; margin-bottom: 28px; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.8; }
.login-feature-list { display: grid; gap: 15px; max-width: 340px; }
.login-feature { display: flex; align-items: center; gap: 12px; }
.login-feature-icon { display: inline-grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; color: #c5e5f9; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; }
.login-feature-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.login-feature span:last-child { display: grid; gap: 1px; }
.login-feature b { color: #fff; font-size: 12px; font-weight: 650; }
.login-feature small { color: rgba(255,255,255,.65); font-size: 11px; }
.login-brand-footer { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.65); font-size: 11px; }
.login-status-dot { width: 7px; height: 7px; background: #54d2a1; border-radius: 50%; box-shadow: 0 0 0 4px rgba(84,210,161,.13); }
.login-form-panel { display: flex; flex-direction: column; justify-content: center; padding: 54px clamp(36px, 6vw, 74px) 24px; }
.login-form-inner { width: 100%; max-width: 370px; margin: auto; }
.login-form-kicker { color: var(--pmk-blue-dark); font-size: 12px; font-weight: 700; }
.login-form-inner h1 { margin: 7px 0 5px; color: var(--pmk-navy); font-size: 29px; font-weight: 750; letter-spacing: -.03em; }
.login-form-intro { margin: 0 0 27px; color: var(--pmk-muted); font-size: 13px; line-height: 1.7; }
.login-form-inner .form-label { margin-bottom: 7px; }
.login-form-inner .form-control-lg { min-height: 48px; font-size: 15px; }
.login-password-field { position: relative; }
.login-password-field .form-control { padding-right: 51px; }
.login-password-toggle { position: absolute; top: 3px; right: 4px; display: grid; place-items: center; width: 42px; height: 42px; padding: 10px; color: #61798e; background: transparent; border: 0; border-radius: 7px; cursor: pointer; }
.login-password-toggle:hover { color: #0b4775; background: #e6eef5; }
.login-password-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.login-password-toggle .login-eye-closed, .login-password-toggle[aria-pressed="true"] .login-eye-open { display: none; }
.login-password-toggle[aria-pressed="true"] .login-eye-closed { display: block; }
.login-remember { margin-top: 4px; font-size: 13px; }
.login-remember .form-check-input { cursor: pointer; }
.login-remember .form-check-input:checked { background-color: #0b4775; border-color: #0b4775; }
.login-remember .form-check-label { color: #344b60; cursor: pointer; }
.login-remember > span { display: block; color: #788795; font-size: 11px; }
.login-form-inner .btn-lg { min-height: 49px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 23px; font-size: 15px; }
.login-form-inner .btn-lg span { font-size: 19px; line-height: 1; transition: transform .15s ease; }
.login-form-inner .btn-lg:hover span { transform: translateX(3px); }
.login-help { display: flex; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid #edf1f5; }
.login-help-icon { display: inline-grid; flex: 0 0 auto; place-items: center; width: 18px; height: 18px; color: #52718b; border: 1px solid #b9cbd9; border-radius: 50%; font-family: Georgia, serif; font-size: 12px; font-style: italic; font-weight: 700; }
.login-help p { margin: 0; color: #526476; font-size: 11px; line-height: 1.8; }
.login-help p span { color: #788795; }
.login-copyright { padding-top: 18px; color: #8a97a4; text-align: center; font-size: 10px; }
.login-copyright span { padding: 0 4px; color: #b0bdc9; }

@media (max-width: 992px) {
  .topbar { position: relative; }
  .topbar .who { padding-left: 0; border-left: 0; }
  main.container-xl { padding-top: 18px !important; }
}
@media (max-width: 576px) {
  .topbar { position: static; }
  .topbar .container-xl > .d-flex:first-child { align-items: flex-start !important; }
  .brand { flex-basis: 100%; }
  .topbar .period { flex-wrap: wrap; }
  .qseg { width: 100%; }
  .qseg .btn { flex: 1; min-width: 0; }
  .tabs { margin-right: -12px; margin-left: -12px; padding: 0 12px; }
  .tabs .nav-link { padding: 9px 11px 11px; }
  main.container-xl { padding-top: 14px !important; }
  .card-panel { padding: 15px; margin-bottom: 13px; border-radius: 12px; }
  .card-panel h2, .panel-title { font-size: 16px; }
  body { font-size: 15px; }
}
@media (max-width: 760px) {
  .login-page { display: block; padding: 20px 14px; }
  .login-layout { grid-template-columns: 1fr; width: min(100%, 520px); min-height: 0; margin: 0 auto; border-radius: 16px; }
  .login-brand-panel { min-height: 230px; padding: 22px 24px; }
  .login-brand-content { margin: 25px 0 20px; }
  .login-brand-content h2 { margin: 8px 0; font-size: 25px; }
  .login-brand-content > p { max-width: 390px; margin-bottom: 14px; font-size: 12px; }
  .login-feature-list { display: none; }
  .login-brand-footer { font-size: 10px; }
  .login-form-panel { padding: 30px 24px 18px; }
  .login-form-inner h1 { font-size: 26px; }
}
@media (max-width: 380px) {
  .login-page { padding: 10px; }
  .login-brand-panel { min-height: 205px; padding: 18px; }
  .login-form-panel { padding: 26px 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Primary navigation moved from the header to a persistent desktop sidebar. */
.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: calc(100vh - 100px);
}
.app-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  align-self: start;
  width: 248px;
  height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 20px 14px 12px;
  background: #fff;
  border-right: 1px solid var(--pmk-line);
}
.sidebar-heading {
  padding: 0 11px 11px;
  color: #8795a2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.side-nav { gap: 3px; }
.side-nav .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 41px;
  padding: 9px 11px;
  color: #506274;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 550;
  transition: color .15s ease, background-color .15s ease;
}
.side-nav .nav-link:hover { color: var(--pmk-blue-dark); background: #f2f7fb; }
.side-nav .nav-link.active {
  color: #075c98;
  background: #eaf6ff;
  font-weight: 700;
}
.side-nav .nav-link.active::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--pmk-blue);
  content: "";
}
.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding: 14px 8px 3px;
  color: #82909d;
  border-top: 1px solid #edf1f5;
  font-size: 10px;
}
.sidebar-mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 26px;
  color: #fff;
  background: linear-gradient(140deg, #1597e5, #0069ae);
  border-radius: 7px;
  font-size: 9px;
  font-weight: 800;
}
main.container-xl.app-content {
  width: auto;
  max-width: 1320px;
  min-width: 0;
  margin: 0 auto;
  padding: 24px 28px 40px !important;
}
@media (min-width: 993px) {
  .topbar { position: sticky; }
}
@media (max-width: 992px) {
  .app-shell { display: block; min-height: 0; }
  .app-sidebar {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    padding: 8px 12px 0;
    border-right: 0;
    border-bottom: 1px solid var(--pmk-line);
  }
  .sidebar-heading, .sidebar-footer { display: none; }
  .side-nav {
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 3px;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .side-nav .nav-link { flex: 0 0 auto; min-height: 39px; padding: 8px 11px; white-space: nowrap; }
  .side-nav .nav-link.active::before { top: auto; right: 10px; bottom: 0; left: 10px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  main.container-xl.app-content { max-width: 100%; padding: 18px 20px 32px !important; }
}
@media (max-width: 576px) {
  .app-sidebar { padding-right: 8px; padding-left: 8px; }
  main.container-xl.app-content { padding: 14px 12px 28px !important; }
}

/* Reorganized topbar: report context on the first row, identity and acting-as on the second. */
:root { --pmk-topbar-height: 124px; }
.topbar > .container-xl {
  width: 100%;
  max-width: 1480px;
  padding-right: 28px;
  padding-left: 28px;
}
.topbar-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
  padding: 10px 0;
}
.topbar-primary .brand { flex: 0 0 auto; margin-right: auto; }
.topbar-filters { display: flex; align-items: center; gap: 22px; }
.topbar-control { display: flex; flex-direction: column; gap: 4px; }
.control-label {
  color: #788895;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .055em;
  line-height: 1.2;
  text-transform: uppercase;
}
.view-control { width: 205px; }
.view-control .form-select { width: 100%; min-height: 34px; color: #253d52; font-weight: 600; }
.period-control { min-width: 390px; }
.period-controls { display: flex; align-items: center; gap: 8px; }
.period-controls .year-form { flex: 0 0 84px; }
.period-controls .year-form select { min-height: 34px; color: #253d52; font-weight: 650; }
.period-control .qseg { flex: 1 1 auto; }
.period-control .qseg .btn { min-height: 34px; }
.topbar-secondary {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 51px;
  padding: 7px 0 9px;
  border-top: 1px solid #edf1f5;
}
.act-as-control { flex-direction: row; align-items: center; gap: 9px; }
.act-as-control label { margin: 0; color: #718190 !important; font-size: 11px; font-weight: 650; }
.act-as-control .form-select { width: min(330px, 32vw); min-height: 32px; color: #324b60; }
.topbar-secondary .who {
  gap: 9px !important;
  margin-left: auto;
  padding-left: 16px;
  border-left: 1px solid var(--pmk-line);
}
.user-identity { display: grid; justify-items: end; gap: 1px; min-width: 100px; line-height: 1.25; }
.user-identity b { color: var(--pmk-navy); font-size: 12px; }
.user-identity small { color: #7a8996 !important; font-size: 10px; }
.topbar-secondary .who .btn { min-height: 30px; white-space: nowrap; }
.app-shell { min-height: calc(100vh - var(--pmk-topbar-height)); }
.app-sidebar { top: var(--pmk-topbar-height); height: calc(100vh - var(--pmk-topbar-height)); }
@media (max-width: 1199px) {
  .topbar > .container-xl { padding-right: 20px; padding-left: 20px; }
  .topbar-primary { gap: 15px; }
  .brand span { display: none !important; }
  .topbar-filters { gap: 13px; }
  .period-control { min-width: 350px; }
  .view-control { width: 180px; }
}
@media (max-width: 992px) {
  :root { --pmk-topbar-height: 0px; }
  .topbar > .container-xl { max-width: 100%; padding-right: 16px; padding-left: 16px; }
  .topbar-primary { flex-wrap: wrap; align-items: flex-start; gap: 12px 20px; padding: 12px 0; }
  .topbar-primary .brand { margin-right: 0 !important; }
  .topbar-filters { flex: 1 1 auto; justify-content: flex-end; }
  .topbar-secondary { flex-wrap: wrap; justify-content: space-between; }
  .topbar-secondary .who { margin-left: auto; }
}
@media (max-width: 576px) {
  .topbar > .container-xl { padding-right: 12px; padding-left: 12px; }
  .topbar-primary { display: grid; grid-template-columns: 1fr; }
  .topbar-filters { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(0, 1.6fr); width: 100%; gap: 10px; }
  .view-control { width: auto; min-width: 0; }
  .period-control { min-width: 0; }
  .period-controls { gap: 5px; }
  .period-controls .year-form { flex-basis: 66px; }
  .qseg .btn { padding-right: 5px; padding-left: 5px; }
  .qseg .btn small { font-size: 9px; }
  .topbar-secondary { align-items: flex-start; gap: 9px; }
  .act-as-control { flex: 1 1 100%; }
  .act-as-control .form-select { width: auto; flex: 1 1 auto; min-width: 0; }
  .topbar-secondary .who { flex-wrap: wrap; justify-content: flex-end; width: 100%; padding: 8px 0 0; border-top: 1px solid #edf1f5; border-left: 0; }
  .user-identity { margin-right: auto; justify-items: start; }
}

/* Align the PMK Incentive shell with the PMK Field Sales visual language. */
:root {
  --pmk-canvas: #e9eef4;
  --pmk-line: #e5eaf0;
  --pmk-topbar-height: 118px;
}
.topbar-primary { justify-content: flex-start; min-height: 70px; padding: 7px 0; }
.topbar-filters { justify-content: flex-start; }
.topbar-secondary { min-height: 48px; padding: 5px 0 7px; }
.app-sidebar {
  color: #fff;
  background: #0b2035;
  border-right: 0;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 3px 22px;
  padding: 0 4px;
  color: #fff;
}
.sidebar-brand:hover { color: #fff; }
.sidebar-brand-mark {
  display: inline-grid;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #0873bd;
  background: #fff;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -.04em;
}
.sidebar-brand-copy { display: grid; gap: 3px; min-width: 0; }
.sidebar-brand-copy b { overflow: hidden; color: #fff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-brand-copy small { color: #9bb3c9; font-size: 10px; }
.sidebar-heading { color: #9bb3c9; }
.side-nav .nav-link { color: #b9c9d8; }
.side-nav .nav-link:hover { color: #fff; background: #ffffff15; }
.side-nav .nav-link.active { color: #fff; background: #143b5e; }
.side-nav .nav-link.active::before { display: none; }
.sidebar-footer { color: #9bb3c9; border-top-color: #24435e; }
.sidebar-mark { color: #0873bd; background: #fff; box-shadow: none; }
.app-shell { min-height: calc(100vh - var(--pmk-topbar-height)); }
.app-sidebar { top: var(--pmk-topbar-height); height: calc(100vh - var(--pmk-topbar-height)); }
@media (max-width: 992px) {
  .app-sidebar { height: auto; border-bottom: 0; }
  .sidebar-brand { margin: 0 3px 8px; }
  .side-nav .nav-link { color: #b9c9d8; }
  .side-nav .nav-link:hover { color: #fff; background: #ffffff15; }
  .side-nav .nav-link.active { color: #fff; background: #143b5e; }
  .side-nav .nav-link.active::before { display: none; }
}
@media (max-width: 576px) {
  .topbar-primary { min-height: 0; }
  .topbar-secondary { min-height: 0; }
  .sidebar-brand { margin-bottom: 6px; }
}

/* Keep the topbar as one calm horizontal toolbar on desktop. */
:root { --pmk-topbar-height: 84px; }
.topbar-primary {
  box-sizing: border-box;
  min-height: 84px;
  justify-content: flex-start;
  gap: 24px;
  padding: 9px 0;
}
.topbar-filters { flex: 0 0 auto; gap: 18px; }
.topbar-secondary {
  flex: 0 0 auto;
  justify-content: flex-start;
  gap: 16px;
  min-height: 0;
  margin-left: auto;
  padding: 0;
  border-top: 0;
}
.topbar-secondary .act-as-control { flex: 0 0 auto; }
.topbar-secondary .who { margin-left: 0; }
.topbar-primary .view-control { width: 190px; }
.topbar-primary .period-control { min-width: 380px; }
@media (max-width: 1399px) {
  :root { --pmk-topbar-height: 128px; }
  .topbar-primary { flex-wrap: wrap; gap: 8px 18px; padding: 9px 0; }
  .topbar-secondary { margin-left: auto; }
}
@media (max-width: 992px) {
  :root { --pmk-topbar-height: 0px; }
  .topbar-primary { min-height: 0; gap: 12px 20px; }
  .topbar-secondary { margin-left: 0; }
}
@media (max-width: 576px) {
  .topbar-primary { gap: 11px; }
  .topbar-secondary { gap: 8px; }
}

/* Sidebar starts at the viewport edge; keep the topbar in the content lane. */
@media (min-width: 993px) {
  header.topbar {
    width: calc(100% - 248px);
    margin-left: 248px;
  }
  .app-sidebar {
    position: fixed;
    z-index: 1030;
    top: 0;
    left: 0;
    width: 248px;
    height: 100vh;
  }
  main.container-xl.app-content { grid-column: 2; }
}
@media (max-width: 992px) {
  header.topbar { width: auto; margin-left: 0; }
  main.container-xl.app-content { grid-column: auto; }
}

/* Let the workspace use the full width next to the fixed sidebar. */
.topbar > .container-xl { width: 100%; max-width: none; }
main.container-xl.app-content {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

/* Consistent type scale and stronger visual hierarchy for the toolbar and page headings. */
body { font-size: 15px; line-height: 1.55; }
.topbar {
  background: #f4f8fc !important;
  border-bottom: 2px solid #8ac7ed !important;
}
.topbar-primary { min-height: 84px; }
.control-label {
  color: #31516d;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .025em;
}
.topbar .form-select-sm { font-size: 14px; }
.qseg .btn { font-size: 13px; }
.qseg .btn small { font-size: 10px; }
.topbar-secondary .act-as-control label { color: #31516d !important; font-size: 12px; font-weight: 700; }
.user-identity b { color: #0b1f33; font-size: 13px; }
.user-identity small { font-size: 11px; }
.topbar-secondary .who .btn { font-size: 12px; }
.sidebar-heading { color: #b4c8d9; font-size: 11px; }
.side-nav .nav-link { font-size: 14px; }
.sidebar-brand-copy b { font-size: 14px; }
.sidebar-brand-copy small, .sidebar-footer { font-size: 11px; }
.card-panel h2, .panel-title { color: #0b1f33; font-size: 20px; line-height: 1.35; }
.card-panel h3 { color: #173f61; font-size: 16px; line-height: 1.4; }
.table thead th { color: #244866; font-size: 13px; }
.stat-k, .stat-s { font-size: 13px; }
.mini { font-size: 12px; }
@media (max-width: 576px) {
  .card-panel h2, .panel-title { font-size: 18px; }
  .side-nav .nav-link { font-size: 13px; }
  .topbar-primary { min-height: 0; }
}

/* High-contrast table headings and restrained zebra striping. */
.table thead th {
  color: #263746;
  background: linear-gradient(to bottom, #f5f7f9 0%, #e3e8ed 55%, #d5dce3 100%);
  border-color: #dce2e8;
  font-size: 13px;
  font-weight: 700;
}
.table tbody tr:nth-child(odd) > * { background-color: #fff; }
.table tbody tr:nth-child(even) > * { background-color: #fdfdfd; }
.table tbody tr.grp > * { color: #183e5b; background-color: #dce9f3 !important; font-weight: 700; }
.table tfoot > tr > * { color: #173f61; background: #e4eef6; font-weight: 750; }
.table-hover > tbody > tr:hover > * { color: #102d45; background-color: #dceefa; }
.table thead th:first-child { border-top-left-radius: 8px; }
.table thead th:last-child { border-top-right-radius: 8px; }

/* Four-card summary rows use the same compact accent palette as PMK dashboards. */
.row.row-cols-2.row-cols-md-4 > .col > .stat,
.row.row-cols-1.row-cols-md-4 > .col > .stat {
  overflow: hidden;
  border: 0;
  box-shadow: none;
  color: #fff;
}
.row.row-cols-2.row-cols-md-4 > .col > .stat::after,
.row.row-cols-1.row-cols-md-4 > .col > .stat::after {
  position: absolute;
  right: -18px;
  bottom: -28px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  content: "";
  pointer-events: none;
}
.row.row-cols-2.row-cols-md-4 > .col:nth-child(4n + 1) > .stat,
.row.row-cols-1.row-cols-md-4 > .col:nth-child(4n + 1) > .stat { background: #168be5; }
.row.row-cols-2.row-cols-md-4 > .col:nth-child(4n + 2) > .stat,
.row.row-cols-1.row-cols-md-4 > .col:nth-child(4n + 2) > .stat { background: #1597a2; }
.row.row-cols-2.row-cols-md-4 > .col:nth-child(4n + 3) > .stat,
.row.row-cols-1.row-cols-md-4 > .col:nth-child(4n + 3) > .stat { background: #d87500; }
.row.row-cols-2.row-cols-md-4 > .col:nth-child(4n) > .stat,
.row.row-cols-1.row-cols-md-4 > .col:nth-child(4n) > .stat { background: #7049e8; }
.row.row-cols-2.row-cols-md-4 > .col > .stat .stat-k,
.row.row-cols-2.row-cols-md-4 > .col > .stat .stat-s,
.row.row-cols-1.row-cols-md-4 > .col > .stat .stat-k,
.row.row-cols-1.row-cols-md-4 > .col > .stat .stat-s { position: relative; z-index: 1; color: rgba(255, 255, 255, .88); }
.row.row-cols-2.row-cols-md-4 > .col > .stat .stat-v,
.row.row-cols-1.row-cols-md-4 > .col > .stat .stat-v { position: relative; z-index: 1; color: #fff; }
.row.row-cols-1.row-cols-md-3 > .col > .stat {
  position: relative;
  overflow: hidden;
  border: 0;
  box-shadow: none;
  color: #fff;
}
.row.row-cols-1.row-cols-md-3 > .col > .stat::after {
  position: absolute;
  right: -18px;
  bottom: -28px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  content: "";
  pointer-events: none;
}
.row.row-cols-1.row-cols-md-3 > .col:nth-child(3n + 1) > .stat { background: #168be5; }
.row.row-cols-1.row-cols-md-3 > .col:nth-child(3n + 2) > .stat { background: #1597a2; }
.row.row-cols-1.row-cols-md-3 > .col:nth-child(3n) > .stat { background: #7049e8; }
.row.row-cols-1.row-cols-md-3 > .col > .stat .stat-k,
.row.row-cols-1.row-cols-md-3 > .col > .stat .stat-s { position: relative; z-index: 1; color: rgba(255, 255, 255, .88); }
.row.row-cols-1.row-cols-md-3 > .col > .stat .stat-v { position: relative; z-index: 1; color: #fff; }
.accounts-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.accounts-pagination .pagination { gap: 3px; }
.accounts-pagination .page-link {
  min-width: 32px;
  color: #31516d;
  text-align: center;
  border-color: #dce6ee;
  border-radius: 7px;
}
.accounts-pagination .page-item.active .page-link {
  color: #fff;
  background: #0a84d8;
  border-color: #0a84d8;
}
.accounts-pagination .page-item.disabled .page-link { color: #a4afb9; }
.row-number { width: 58px; color: #64798b !important; text-align: center; font-variant-numeric: tabular-nums; }
.table thead .row-number { color: #263746 !important; white-space: nowrap; }
.list-page-hidden { display: none !important; }
.list-pagination { margin-bottom: 12px; }
@media print {
  tr.list-page-hidden { display: table-row !important; }
  .accounts-pagination { display: none !important; }
}
@media (max-width: 576px) {
  .accounts-pagination { align-items: flex-start; flex-direction: column; }
}

/* OIES inspired light workspace with a navy navigation rail. */
:root {
  --pmk-blue: #0b4a7a;
  --pmk-blue-dark: #073d69;
  --pmk-navy: #063f73;
  --pmk-ink: #1b2b3b;
  --pmk-muted: #687b8e;
  --pmk-line: #dfe7ef;
  --pmk-canvas: #f0f5fa;
  --pmk-pale: #edf4fa;
  --pmk-orange: #ff6b00;
  --bs-primary: #064273;
  --bs-primary-rgb: 6, 66, 115;
  --bs-link-color: var(--pmk-blue-dark);
  --bs-link-hover-color: #052f51;
}
body { background: #f0f5fa; }

.topbar {
  background: #fff !important;
  border-bottom: 1px solid #dfe7ef !important;
  box-shadow: 0 2px 7px rgba(22, 48, 76, .035);
}
.topbar-primary { background: #fff; }
.topbar .brand b, .user-identity b { color: #123e67; }
.topbar .control-label, .topbar-secondary .act-as-control label { color: #58718a !important; }
.topbar .qseg .btn-primary { background: #064273; border-color: #064273; }

.app-sidebar {
  color: #fff;
  background: #064273;
  border-right: 0;
}
.sidebar-heading { color: #a8c2d8; }
.sidebar-brand-copy small, .sidebar-footer { color: #b5c9dc; }
.sidebar-mark { color: #064273; background: #fff; }
.side-nav .nav-link { color: #d3e1ed; }
.side-nav .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.side-nav .nav-link.active {
  color: #fff;
  background: #174f7c;
  font-weight: 700;
}
.side-nav .nav-link.active::before {
  display: block;
  width: 3px;
  background: var(--pmk-orange);
}
.sidebar-footer { border-top-color: rgba(218, 233, 246, .2); }

.card-panel {
  background: #fff;
  border-color: #dfe7ef;
  border-radius: 12px;
  box-shadow: 0 2px 9px rgba(24, 53, 82, .035);
}
.card-panel h2, .panel-title, .card-panel h3 { color: #0b477a; }
.table { --bs-table-border-color: #e7edf3; }
.table thead th {
  color: #345d82;
  background: #f5f8fb;
  border-color: #e1e8ef;
  font-weight: 650;
}
.table tbody tr:nth-child(odd) > * { background-color: #fff; }
.table tbody tr:nth-child(even) > * { background-color: #fdfefe; }
.table tbody tr.grp > * { color: #1e4c74; background-color: #edf3f8 !important; }
.table tfoot > tr > * { color: #1b4b74; background: #f3f7fa; }
.table thead .row-number { color: #345d82 !important; }

.btn-primary {
  --bs-btn-bg: #064273;
  --bs-btn-border-color: #064273;
  --bs-btn-hover-bg: #05375f;
  --bs-btn-hover-border-color: #05375f;
  --bs-btn-active-bg: #042e50;
  --bs-btn-active-border-color: #042e50;
  box-shadow: none;
}
.btn-primary:hover { box-shadow: 0 2px 6px rgba(6, 66, 115, .18); }
.btn-outline-primary {
  --bs-btn-color: #064273;
  --bs-btn-border-color: #064273;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #064273;
  --bs-btn-hover-border-color: #064273;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #042e50;
  --bs-btn-active-border-color: #042e50;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: #064273; }
.form-control, .form-select { border-color: #cfdae5; }
.form-control:focus, .form-select:focus { border-color: #7eadd2; box-shadow: 0 0 0 .2rem rgba(11, 74, 122, .12); }
.accounts-pagination .page-link { color: #315b80; border-color: #d9e3ec; }
.accounts-pagination .page-item.active .page-link { color: #fff; background: #0b4a7a; border-color: #0b4a7a; }
.badge.text-bg-info { color: #174e78 !important; background: #e7f1f9 !important; }

@media (max-width: 992px) {
  .side-nav .nav-link.active::before {
    top: auto;
    right: 10px;
    bottom: 0;
    left: 10px;
    width: auto;
    height: 3px;
    border-radius: 3px 3px 0 0;
  }
}

.user-identity:hover b { color: #064273; text-decoration: underline; }
.user-identity:focus-visible { outline: 2px solid #0b4a7a; outline-offset: 3px; border-radius: 4px; }

/* Quiet white header and a simple, consistent identity switcher. */
.topbar {
  background: #fff !important;
  border-bottom-color: #dfe7ef !important;
}
.topbar-primary { background: transparent !important; }
.topbar-secondary {
  background: transparent;
  border-top-color: #edf1f5;
}
.topbar .small.text-secondary,
.topbar .control-label { color: #5f7181 !important; }
.act-as-control {
  gap: 9px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.act-as-control .act-as-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  color: #536a7d !important;
  background: transparent;
  border-radius: 0;
  font-size: 11px;
  font-weight: 650;
}
.topbar-secondary .act-as-control .act-as-label { color: #536a7d !important; }
.act-as-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0b4a7a;
}
.act-as-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.act-as-control .form-select {
  width: min(260px, 28vw);
  min-height: 34px;
  color: #324b60;
  background-color: #fff;
  border-color: #d7e0e9;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
.act-as-control .form-select:focus {
  border-color: #8aa9c1;
  box-shadow: 0 0 0 .2rem rgba(6, 66, 115, .1);
}
.dataio-exports .stat .btn-outline-primary {
  color: #064273;
  background: #fff;
  border-color: #fff;
}
.dataio-exports .stat .btn-outline-primary:hover,
.dataio-exports .stat .btn-outline-primary:focus-visible {
  color: #042e50;
  background: #edf4fa;
  border-color: #edf4fa;
}
.branch-picker-enhanced .branch-picker-card {
  min-height: 88px;
  padding: 14px;
  background: linear-gradient(135deg, #f5f9fc, #fff 72%);
  border-color: #dbe6ef;
  border-radius: 12px;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.branch-picker-enhanced .branch-picker-card:hover {
  background: #f0f6fa;
  border-color: #9bb7cc;
  box-shadow: 0 4px 12px rgba(6, 66, 115, .08);
  transform: translateY(-1px);
}
.branch-picker-icon,
.rules-detail-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #0b4a7a;
  background: #e5f0f8;
  border: 1px solid #d8e7f2;
  border-radius: 11px;
}
.branch-picker-icon svg,
.rules-detail-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.rules-detail-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #f1f6fa;
  border: 1px solid #dfe9f1;
  border-left: 3px solid #0b4a7a;
  border-radius: 12px;
}
.rules-detail-card > span:last-child { display: grid; gap: 3px; }
.rules-detail-value { color: #1b2b3b; font-size: 15px; font-weight: 650; }
.rules-other-revenue {
  background: #f1f8f7;
  border-color: #d9ebe7;
  border-left-color: #168b86;
}
.rules-other-revenue .rules-detail-icon {
  color: #13756f;
  background: #e3f3f0;
  border-color: #d5eae5;
}
.incident-heading-icon,
.incident-record-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #0b4a7a;
  background: #e8f1f8;
  border: 1px solid #d9e7f1;
  border-radius: 9px;
}
.incident-heading-icon svg,
.incident-record-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.incident-record-card {
  background: #fbfdff !important;
  border-color: #dfe8f0 !important;
  border-radius: 12px !important;
}
.incident-import-panel {
  background: linear-gradient(145deg, #f2f7fb, #fff 76%);
  border-color: #dce7f0;
}
.incident-entry-panel { border-top: 3px solid #0b4a7a; }
.incident-list-panel { border-top: 3px solid #168b86; }
.incident-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  background: #f1f6fa;
  border: 1px solid #e0e9f0;
  border-left: 3px solid #3d79a5;
  border-radius: 10px;
}
.incident-stat-copy { display: grid; gap: 1px; min-width: 0; }
.incident-stat .stat-v { margin-top: 0; font-size: 16px; }
.incident-stat-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #0b4a7a;
  background: #e2edf5;
  border: 1px solid #d5e3ed;
  border-radius: 9px;
}
.incident-stat-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.incident-stat-fine { background: #fcf7ed; border-color: #eee2c8; border-left-color: #cc8a19; }
.incident-stat-fine .incident-stat-icon { color: #946211; background: #f8edda; border-color: #efdfbf; }
.incident-stat-date { background: #f0f8f7; border-color: #dcece8; border-left-color: #25877f; }
.incident-stat-date .incident-stat-icon { color: #19746d; background: #e1f1ee; border-color: #d3e8e4; }
.incident-stat-result { background: #f4f3fa; border-color: #e4e1f1; border-left-color: #6d62a7; }
.incident-stat-result .incident-stat-icon { color: #5d538f; background: #eae8f5; border-color: #dfdbee; }
.incident-record-card .row.row-cols-2.row-cols-md-4 > .col > .stat.incident-stat,
.incident-record-card .row.row-cols-1.row-cols-md-4 > .col > .stat.incident-stat {
  background: #f1f6fa !important;
  border-color: #dfe8f0 !important;
  border-left: 3px solid #3d79a5 !important;
  box-shadow: none !important;
}
.incident-record-card .row.row-cols-2.row-cols-md-4 > .col > .stat.incident-stat::after,
.incident-record-card .row.row-cols-1.row-cols-md-4 > .col > .stat.incident-stat::after { display: none !important; }
.incident-record-card .incident-stat .stat-k,
.incident-record-card .incident-stat .stat-v,
.incident-record-card .incident-stat .stat-s { color: #1b2b3b !important; }
.incident-record-card .incident-stat .stat-k,
.incident-record-card .incident-stat .stat-s { color: #687b8e !important; }
.incident-record-card .row.row-cols-2.row-cols-md-4 > .col > .incident-stat-fine,
.incident-record-card .row.row-cols-1.row-cols-md-4 > .col > .incident-stat-fine { background: #fcf7ed !important; border-color: #eee2c8 !important; border-left-color: #cc8a19 !important; }
.incident-record-card .row.row-cols-2.row-cols-md-4 > .col > .incident-stat-date,
.incident-record-card .row.row-cols-1.row-cols-md-4 > .col > .incident-stat-date { background: #f0f8f7 !important; border-color: #dcece8 !important; border-left-color: #25877f !important; }
.incident-record-card .row.row-cols-2.row-cols-md-4 > .col > .incident-stat-result,
.incident-record-card .row.row-cols-1.row-cols-md-4 > .col > .incident-stat-result { background: #f4f3fa !important; border-color: #e4e1f1 !important; border-left-color: #6d62a7 !important; }
@media (max-width: 576px) {
  .act-as-control { flex-wrap: wrap; width: 100%; }
  .act-as-control .form-select { width: auto; flex: 1 1 160px; min-width: 0; }
}

/* sidebar กระชับ + ฟอนต์บาง */
.app-sidebar { padding: 14px 10px 10px; }
.sidebar-brand { gap: 9px; margin-bottom: 12px; }
.sidebar-brand-mark { flex-basis: 34px; width: 34px; height: 34px; border-radius: 9px; font-size: 10px; }
.sidebar-brand-copy { gap: 1px; }
.sidebar-brand-copy b { font-weight: 600; }
.sidebar-heading { padding: 0 10px 6px; font-weight: 600; }
.side-nav { gap: 1px; }
.side-nav .nav-link {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.35;
}
.side-nav .nav-link.active { font-weight: 500; }
.side-nav .nav-link.active::before { top: 6px; bottom: 6px; }
.sidebar-footer { padding: 10px 6px 2px; }
@media (max-width: 992px) {
  .side-nav .nav-link { min-height: 34px; padding: 6px 10px; }
  .side-nav .nav-link.active::before { top: auto; bottom: 0; }
}

/* sidebar กลุ่มเมนู + ไอคอน */
.nav-group-label {
  padding: 12px 10px 4px;
  color: #8fb0cc;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}
.side-nav .nav-group-label:first-child { padding-top: 2px; }
.side-nav .nav-link { gap: 9px; }
.nav-icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}
.side-nav .nav-link:hover .nav-icon, .side-nav .nav-link.active .nav-icon { opacity: 1; }
@media (max-width: 992px) {
  .nav-group-label { display: none; }
}

/* topbar ไอคอนผู้ใช้ + ปุ่มออกจากระบบ */
.user-avatar {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #064273;
  background: #e8f0f7;
  border-radius: 50%;
}
.user-avatar svg, .btn-icon-logout svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.user-avatar svg { width: 18px; height: 18px; }
.btn-icon-logout {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
}
.btn-icon-logout svg { width: 17px; height: 17px; }
.btn-icon-logout:hover { color: #b42318; background: #fdf1f0; border-color: #f1c4bf; }

/* dialog ยืนยัน */
.confirm-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid #dfe7ef;
  border-radius: 12px;
}
.confirm-dialog::backdrop { background: rgba(11, 31, 51, .35); }
.confirm-dialog h3 { margin-bottom: 10px; color: #0b477a; font-size: 17px; }

/* dialog ฟอร์ม */
.form-dialog {
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 20px;
  overflow-y: auto;
  border: 1px solid #dfe7ef;
  border-radius: 12px;
}
.form-dialog::backdrop { background: rgba(11, 31, 51, .35); }
.form-dialog h3 { color: #0b477a; font-size: 17px; }
@media (max-width: 576px) {
  .form-dialog { padding: 14px; }
}

/* แถวตัวกรองรายการ */
.list-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.list-filters .form-select { flex: 0 1 200px; width: auto; min-width: 150px; }
.list-filters .list-filter-text { flex: 0 1 260px; min-width: 180px; }
@media (max-width: 576px) {
  .list-filters .form-select, .list-filters .list-filter-text { flex: 1 1 100%; }
}