/* Shared VETCC visual system. Business and authentication logic stay in each app. */
:root {
  --bg: #f5f6f8;
  --surface: #fff;
  --surface-2: #fafbfc;
  --text: #202a39;
  --muted: #728094;
  --line: #e6eaf0;
  --primary: #15745b;
  --primary-dark: #0e5946;
  --shadow: 0 3px 16px rgba(25, 39, 58, .035);
  font-family: "Segoe UI", "Khmer UI", "Noto Sans Khmer", "Khmer OS Battambang", sans-serif;
  font-size: 14px;
}
body, body.delivery-page { background: var(--bg); color: var(--text); }
body.jt-page { --primary: #b35636; --primary-dark: #91402a; }
body.delivery-page { --primary: #4266ab; --primary-dark: #324f87; --delivery: #4266ab; --delivery-dark: #324f87; }
button, input, select { font: inherit; }
button, .nav-button { transition: background .15s, border-color .15s, box-shadow .15s; }
button:focus-visible, a:focus-visible { outline: 3px solid #6faea1; outline-offset: 3px; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .13em; }
h1, h2, h3, h4 { letter-spacing: -.025em; line-height: 1.6; }
h2 { font-size: 18px; font-weight: 650; }
h3 { font-size: 17px; }
h4 { font-size: 16px; }
input, .delivery-form select {
  min-height: 44px; padding: 10px 12px; border: 1px solid #dfe4ec;
  border-radius: 8px; background: #fff; color: var(--text);
  box-shadow: 0 1px 2px rgba(25,39,58,.025);
}
input::placeholder { color: #9ba5b4; font-weight: 400; }
input:focus, .delivery-page input:focus, .delivery-page select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px #15745b12;
}
input:read-only { background: #f4f6f8; color: #69788b; }
label { gap: 6px; font-weight: 500; }
.record-form label span, .delivery-form label span, .compact-label span { color: #637187; font-size: 13px; }
button { border-radius: 8px; min-height: 40px; font-weight: 600; padding: 9px 14px; }
.primary, .delivery-page .primary { background: var(--primary); box-shadow: none; color: #fff; }
.primary:hover, .delivery-page .primary:hover { background: var(--primary-dark); box-shadow: 0 3px 9px #142b2318; }
.secondary, .delivery-page .secondary { color: #435269; background: #fff; border: 1px solid #dfe5ed; }
.secondary:hover, .delivery-page .secondary:hover { background: #f3f6f8; border-color: #bfc9d5; }
.ghost { color: #657489; }
.ghost:hover { background: #eff3f6; }
.danger-button { background: #b9424c; color: white; }
.danger-soft, .delete-button { color: #ae4350; background: #fff1f2; }
.edit-button { color: #355c90; background: #eff5fc; }
.table-button, .edit-button, .delete-button { min-height: 31px; padding: 6px 10px; font-size: 12px; }

/* Persistent navigation on wide screens; a compact header on smaller screens. */
.topbar {
  background: #172433; border: 0; color: #fff; padding: 26px 18px;
  position: fixed; inset: 0 auto 0 0; width: 220px; height: 100dvh;
  display: flex; flex-direction: column; align-items: stretch; gap: 32px;
  box-shadow: none; z-index: 30;
}
.brand-row { gap: 11px; }
.topbar .brand-mark.small {
  width: 38px; height: 38px; border-radius: 11px; font-size: 18px;
  color: #bce7d2; background: #2a493f; box-shadow: none;
}
.topbar .brand-row .eyebrow { color: #8093a8; font-size: 9px; letter-spacing: .15em; margin: 0; }
.topbar .brand-row h1 { font-size: 20px; letter-spacing: .07em; font-weight: 700; margin: 0; color: #fff; }
.top-actions, .vet-page .top-actions, .delivery-page .top-actions {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px; flex: 1; width: 100%;
}
.workspace-nav-label { color: #7c91a7; font-size: 9px; letter-spacing: .15em; font-weight: 600; margin: 0 10px 6px; }
.top-actions .nav-button, .delivery-page .top-actions .nav-button {
  width: 100%; min-height: 45px; justify-content: flex-start; gap: 12px;
  color: #a9b7c8; background: transparent; border: 1px solid transparent;
  border-radius: 9px; padding: 11px 13px; font-size: 13px; font-weight: 500;
}
.nav-symbol { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.nav-symbol svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.top-actions .nav-button:hover { background: #ffffff0b; color: #fff; }
.top-actions .nav-button[aria-current="page"], .delivery-page .top-actions .nav-button[aria-current="page"] {
  color: #d2f1e2; background: #2a433f; border-color: #3a574b; outline: none;
}
.top-actions #installButton { margin-top: auto; background: transparent; color: #a9b7c8; border-color: #354456; }
.top-actions #logoutButton { color: #a9b7c8; text-align: left; padding-left: 14px; }
.top-actions #logoutButton:hover { background: #ffffff0b; }
.sidebar-foot { color: #64788e; font-size: 10px; padding: 14px 10px 0; border-top: 1px solid #ffffff12; letter-spacing: .02em; }
.app-shell { padding-left: 220px; }
.content, .delivery-page .content { width: min(1420px, calc(100% - 64px)); margin: 0 auto; padding: 28px 0 40px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-heading .eyebrow { margin: 0 0 6px; color: #8b96a6; }
.page-heading h2 { font-size: 29px; font-weight: 700; margin: 0; }
.page-heading p:last-child { color: var(--muted); font-size: 13px; margin: 3px 0 0; }
.workspace-tag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; background: #fff; border: 1px solid var(--line); border-radius: 7px; color: #6c798c; font-size: 11px; white-space: nowrap; }
.workspace-tag::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--primary); }

/* Overview, entry and records share one clear visual hierarchy. */
.summary-grid, .delivery-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 0 0 22px; }
.jt-page .summary-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.delivery-summary { grid-template-columns: repeat(6,minmax(0,1fr)); }
.stat-card { min-height: 107px; border: 1px solid var(--line); border-radius: 11px; padding: 17px 18px; box-shadow: var(--shadow); }
.stat-card::after { inset: 18px 16px auto auto; width: 7px; height: 7px; border-radius: 50%; opacity: .8; }
.stat-card span { padding-right: 12px; font-size: 12px; font-weight: 500; color: #7b8696; }
.stat-card strong { margin-top: 12px; font-size: 26px; line-height: 1.25; letter-spacing: -.045em; font-weight: 650; color: #263347; font-variant-numeric: tabular-nums; }
.panel, .delivery-page .panel { border-radius: 12px; border: 1px solid var(--line); padding: 22px 24px; background: #fff; box-shadow: var(--shadow); margin-bottom: 22px; }
.entry-panel, .delivery-page .entry-panel { background: #fff; }
.section-heading { padding-bottom: 16px; border-bottom: 1px solid #eef1f5; }
.section-heading .eyebrow, .toolbar .eyebrow { font-size: 9px; margin: 0 0 4px; color: #8a96a7; }
.record-form { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px 20px; margin-top: 20px; }
.delivery-form { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; }
.save-button { grid-column: auto; align-self: end; min-height: 44px; }
.delivery-actions { margin-top: 2px; gap: 10px; }
.delivery-actions button { flex: 0 1 180px; }
.toolbar { align-items: flex-start; }
.toolbar-controls { justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.toolbar-controls .compact-label { margin-right: 3px; }
.compact-label input { min-height: 39px; }
.toolbar-controls button { font-size: 12px; }
.search-row { margin: 18px 0; }
.search-row input { max-width: 400px; }
.month-delete-row { background: #fcfcfd; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 16px 0; }
.month-delete-row small { color: #8993a2; font-size: 11px; }
.month-delete-row .danger-button { background: #fff0f1; color: #aa4550; border: 1px solid #f3dfe2; }
.table-wrap { border: 1px solid var(--line); border-radius: 9px; overflow: auto; }
table { border-collapse: collapse; width: 100%; }
th { color: #788496; background: #f7f9fb; font-size: 12px; font-weight: 600; padding: 13px 14px; white-space: nowrap; }
td, .delivery-table td { font-size: 13px; padding: 14px; color: #42516a; border-bottom: 1px solid #eef1f5; }
td.date-cell { font-size: 13px; font-weight: 500; }
tbody tr:nth-child(even) { background: #fff; }
tbody tr:hover { background: #f8fafb; }
tbody tr:last-child td { border-bottom: 0; }
.delivery-table { min-width: 1140px; }
.actions { gap: 5px; }
.empty-state { padding: 38px 18px; color: #8b96a7; font-size: 13px; }
.footer-note { color: #97a1ae; font-size: 11px; margin-top: 26px; }
.monthly-report-panel { border-top: 3px solid #9dcfbc; }
.combined-report-section { background: #fff; }
.combined-report-summary .stat-card { box-shadow: none; }
.driver-sum-table .summary-combined-row { background: #edf6f1; }
.driver-sum-table .summary-jt-row { background: #fff7ef; }
.toast { background: #202f40; border-radius: 9px; font-size: 13px; box-shadow: 0 8px 24px #14233222; }

/* The same sign-in experience on each product. */
.login-screen { grid-template-columns: minmax(0,1fr) minmax(360px,1fr); padding: 0; gap: 0; background: #fff; }
.login-story { justify-self: stretch; width:100%; align-self: stretch; padding: clamp(42px,8vw,112px); background: #172b32; color: #fff; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.login-story::after { content:''; position:absolute; width:430px; height:430px; border:1px solid #ffffff0b; border-radius:50%; right:-260px; top:-190px; box-shadow:0 0 0 70px #ffffff03,0 0 0 140px #ffffff02; pointer-events:none; }
.story-wordmark { font-size: 20px; font-weight: 700; letter-spacing: .12em; color: #c0e5d2; margin-bottom: 70px; }
.login-story .eyebrow { color: #7cb59e; font-size: 10px; }
.login-story h2 { color:#f7faf9; font-size:clamp(32px,4vw,55px); line-height:1.15; font-weight:600; letter-spacing:-.05em; margin:10px 0 20px; }
.login-story > p { color:#9db3b7; font-size:14px; line-height:1.9; max-width:330px; }
.story-apps { display:flex; gap:9px; flex-wrap:wrap; margin-top:30px; }
.story-apps span { color:#c4d8d2; border:1px solid #456058; border-radius:7px; padding:8px 12px; font-size:11px; }
.story-foot { color:#748f92; font-size:11px; margin-top:70px; }
.login-card { width:min(100% - 64px,390px); padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; backdrop-filter:none; margin:55px auto; }
.login-card .brand-mark { width:46px; height:46px; border-radius:12px; font-size:21px; background:var(--primary); box-shadow:none; margin-bottom:25px; }
.login-card .eyebrow { color:#91a0b0; font-size:9px; margin:0 0 5px; }
.login-card h1 { font-size:28px; font-weight:650; color:#263347; }
.login-card .login-caption { color:#8290a1; font-size:13px; margin:8px 0 26px; }
.login-card form { margin-top:24px; gap:14px; }
.login-card label { font-size:12px; font-weight:600; color:#59697d; }
.login-card input { min-height:49px; }
.login-card .full { margin-top:5px; min-height:46px; }
.login-card .tiny { font-size:11px; color:#97a2af; line-height:1.8; }

@media (min-width: 1600px) {
  .record-form { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .save-button { grid-column:span 2; }
}
@media (max-width: 1200px) {
  .content, .delivery-page .content { width:calc(100% - 40px); }
  .delivery-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .delivery-form { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .toolbar { flex-direction:column; gap:14px; }
  .toolbar-controls { justify-content:flex-start; }
  .jt-page .summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 1000px) {
  .app-shell { padding-left:0; }
  .topbar, .delivery-page .topbar { position:sticky; top:0; inset:auto; width:100%; height:auto; padding:14px 22px; flex-direction:row; align-items:center; gap:20px; }
  .topbar .brand-row { flex-shrink:0; }
  .topbar .brand-row .eyebrow { display:none; }
  .topbar .brand-row h1 { font-size:17px; }
  .topbar .brand-mark.small { width:32px; height:32px; font-size:15px; }
  .workspace-nav-label, .sidebar-foot { display:none; }
  .top-actions, .vet-page .top-actions, .delivery-page .top-actions { flex-direction:row; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:5px; }
  .top-actions .nav-button, .delivery-page .top-actions .nav-button { width:auto; min-height:37px; padding:8px 11px; gap:7px; font-size:12px; }
  .top-actions #installButton { margin-top:0; font-size:11px; min-height:36px; }
  .top-actions #logoutButton { min-height:36px; padding:8px; font-size:12px; }
  .page-heading h2 { font-size:26px; }
  .summary-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:768px), (max-width:1100px) and (pointer:coarse) {
  .app-shell { padding-left:0; }
  .topbar, .delivery-page .topbar { position:sticky; top:0; width:100%; height:auto; padding:12px 16px 10px; flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px; }
  .topbar .brand-row { flex:1; }
  .topbar .brand-row h1 { font-size:17px; }
  .topbar .brand-row .eyebrow, .workspace-nav-label, .sidebar-foot { display:none; }
  .topbar .brand-mark.small { width:30px; height:30px; border-radius:8px; font-size:14px; }
  .top-actions, .vet-page .top-actions, .delivery-page .top-actions { display:flex; flex:0 0 100%; flex-direction:row; align-items:center; flex-wrap:wrap; gap:5px; width:100%; }
  .top-actions .nav-button, .delivery-page .top-actions .nav-button { flex:1; width:auto; min-height:38px; padding:8px 9px; justify-content:center; font-size:12px; gap:6px; }
  .nav-symbol, .nav-symbol svg { width:15px; height:15px; }
  .top-actions #installButton { flex:0 1 auto; margin:0; min-height:30px; font-size:10px; padding:4px 8px; }
  .top-actions #logoutButton { flex:0 1 auto; width:auto; margin:0; padding:4px 8px; min-height:30px; font-size:11px; }
  .content, .delivery-page .content { width:calc(100% - 28px); padding:20px 0 30px; margin:0 auto; }
  .page-heading { margin-bottom:18px; gap:10px; }
  .page-heading h2 { font-size:25px; }
  .page-heading p:last-child { font-size:11px; }
  .page-heading .eyebrow { font-size:8px; }
  .workspace-tag { display:none; }
  .summary-grid, .jt-page .summary-grid, .delivery-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
  .stat-card, .delivery-page .stat-card { padding:14px; min-height:95px; border-radius:10px; }
  .stat-card span { font-size:12px; }
  .stat-card strong, .delivery-page .stat-card strong { font-size:24px; margin-top:10px; }
  .panel, .delivery-page .panel { padding:17px; margin-bottom:18px; border-radius:11px; }
  .section-heading { padding-bottom:13px; align-items:center; gap:10px; }
  h2, .delivery-page .section-heading h2 { font-size:17px; }
  .record-form, .delivery-form, .delivery-page .delivery-form { grid-template-columns:1fr; gap:14px; margin-top:17px; }
  input, .delivery-form select, .delivery-page .delivery-form input, .delivery-page .delivery-form select { min-height:47px; font-size:16px; }
  .save-button { grid-column:auto; min-height:45px; margin-top:3px; }
  .delivery-actions, .delivery-page .delivery-actions { flex-direction:column; }
  .delivery-actions button, .delivery-page .delivery-actions button { flex:auto; min-height:43px; width:100%; }
  .toolbar { flex-direction:column; gap:13px; }
  .toolbar-controls, .vet-page .toolbar-controls { display:flex; flex-wrap:wrap; width:100%; align-items:stretch; gap:7px; }
  .toolbar-controls button, .vet-page .toolbar-controls button { flex:1 1 calc(50% - 7px); font-size:11px; min-height:39px; }
  .compact-label { flex:1 1 100%; }
  .compact-label input { min-width:0; width:100%; }
  .search-row { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0; }
  .search-row input { max-width:none; flex:1 1 100%; }
  .search-row button { flex:1; }
  .month-delete-row { padding:12px; gap:9px; }
  .table-wrap, .delivery-page .delivery-table-wrap { overflow:visible; border:0; }
  table, thead, tbody, tr, th, td, .delivery-page .delivery-table { display:block; min-width:0; }
  thead { display:none; }
  tbody { display:grid; gap:12px; }
  tbody tr, .delivery-page .delivery-table tbody tr { background:#fff !important; border:1px solid var(--line); border-radius:9px; padding:10px 13px; }
  td, .delivery-table td, .delivery-page .delivery-table td { display:grid; grid-template-columns:minmax(90px,42%) minmax(0,1fr); gap:10px; padding:9px 0; text-align:right; border-bottom:1px solid #f0f2f5; font-size:12px; white-space:normal; overflow-wrap:anywhere; }
  td::before, .delivery-page .delivery-table td::before { content:attr(data-label); color:#8a95a5; font-size:11px; font-weight:500; text-align:left; }
  .delivery-page .delivery-table .table-button { width:auto; }
  .actions { justify-content:flex-end; flex-wrap:wrap; }
  .combined-report-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .login-screen { display:flex; flex-direction:column; justify-content:flex-start; }
  .login-story { width:100%; padding:25px 28px 30px; }
  .story-wordmark { font-size:16px; margin-bottom:25px; }
  .login-story .eyebrow { font-size:9px; margin-top:0; }
  .login-story h2 { font-size:31px; margin:7px 0 10px; }
  .login-story > p, .story-foot { display:none; }
  .story-apps { margin-top:14px; }
  .story-apps span { padding:6px 10px; font-size:10px; }
  .login-card { width:calc(100% - 56px); max-width:390px; margin:30px auto 40px; }
  .login-card .brand-mark { display:none; }
  .login-card h1 { font-size:24px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; transition:none !important; } }

.range-panel { border-top:3px solid #258465; }
.range-heading { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:18px; }
.range-heading h2 { margin:4px 0; }
#rangeStatus { color:#627287; font-size:12px; margin:8px 0 0; overflow-wrap:anywhere; }
.range-count { display:flex; flex-direction:column; text-align:right; gap:4px; color:#627287; font-size:11px; }
.range-count strong { font-size:28px; color:#176a50; }
.range-controls { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; }
.range-controls label { display:flex; flex-direction:column; gap:7px; min-width:0; flex:1 1 150px; font-size:12px; color:#627287; }
.range-controls input, .range-controls select { width:100%; min-width:0; min-height:44px; border:1px solid #dce3eb; border-radius:8px; padding:10px; background:white; color:#243449; font:inherit; }
.range-controls button { min-height:44px; }
.range-export { display:flex; align-items:flex-end; gap:8px; flex:1 1 235px; }
.range-error { color:#af342b; margin:10px 0 0; font-size:12px; }
.range-error:empty { display:none; }
.data-panel > .toolbar { flex-wrap:wrap; align-items:flex-end; }
.data-panel > .toolbar > div:first-child { flex:1 0 100%; }
.merged-filter { flex:1 1 530px; margin:0; }
.merged-filter label { flex:1 1 145px; }
.merged-filter button { padding:10px 12px; }
.filter-status { margin:10px 0; }
@media(max-width:768px) { .merged-filter { flex:auto; width:100%; } }
.inline-range { margin:18px 0; padding:18px 0; border-top:1px solid #dce3eb; border-bottom:1px solid #dce3eb; }
.inline-range .range-heading { margin-bottom:12px; }
.toolbar > .range-export { flex:0 1 250px; min-width:0; }
.toolbar > .range-export label { display:flex; flex-direction:column; gap:6px; min-width:0; font-size:12px; }
.toolbar > .range-export select, #searchScope { background:#fff; border:1px solid #dce3eb; border-radius:8px; padding:10px; min-height:44px; color:#243449; font:inherit; max-width:100%; }
.toolbar > .range-export button { min-height:44px; }
@media(max-width:768px) { .toolbar > .range-export { flex:auto; width:100%; } .toolbar > .range-export label { flex:1; } #searchScope { flex:1; min-width:0; } }
.range-controls button:disabled { opacity:.45; cursor:wait; }
@media(max-width:600px) {
 .range-heading { gap:12px; align-items:flex-start; }
 .range-controls { gap:10px; }
 .range-controls > label { flex:1 1 calc(50% - 10px); }
 .range-controls > button { flex:1 1 28%; padding:10px 7px; font-size:12px; }
 .range-export { flex:1 1 100%; }
 .range-controls input { font-size:14px; }
 .range-count { max-width:85px; }
}

@media(max-width:768px), (max-width:1100px) and (pointer:coarse) {
 .top-actions #installButton, .top-actions #logoutButton {width:auto;flex:0 1 auto;}
}