:root {
  --color-ink: hsl(210 25% 16%); --color-ink-soft: hsl(211 16% 37%); --color-canvas: hsl(210 33% 98%); --color-surface: hsl(0 0% 100%); --color-primary: hsl(218 89% 61%); --color-primary-dark: hsl(218 79% 48%); --color-primary-tint: hsl(217 100% 96%); --color-good: hsl(144 51% 41%); --color-good-tint: hsl(144 62% 94%); --color-warn: hsl(39 94% 47%); --color-warn-tint: hsl(43 100% 93%); --color-line: hsl(215 25% 88%); --color-muted: hsl(215 28% 95%); --color-paper: hsl(0 0% 100%);
  --font-body: "Noto Sans Thai", system-ui, sans-serif; --font-mono: "Roboto Mono", monospace;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
  --radius-sm: 0.5rem; --radius-md: 1rem; --radius-lg: 1.5rem; --radius-pill: 99rem; --shadow-card: 0 0.25rem 1.25rem hsl(215 30% 25% / 0.07); --shadow-float: 0 0.75rem 2rem hsl(218 55% 35% / 0.16); --content: 78rem; --nav-height: 4.5rem; --motion-fast: 160ms; --motion-base: 240ms;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; } body { margin: 0; background: var(--color-canvas); color: var(--color-ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; } button, input, select { font: inherit; } button { cursor: pointer; } button:focus-visible, input:focus-visible, select:focus-visible { outline: var(--space-1) solid var(--color-primary); outline-offset: var(--space-1); } .app-shell { min-height: 100dvh; } .topbar { height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-inline: clamp(var(--space-5), 5vw, var(--space-12)); background: var(--color-surface); border-bottom: 0.0625rem solid var(--color-line); position: sticky; inset-block-start: 0; z-index: 10; } .brand { color: var(--color-ink); display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; font-weight: 500; font-size: 1.125rem; white-space: nowrap; } .brand b { color: var(--color-primary); } .brand-mark { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; color: var(--color-surface); background: var(--color-primary); border-radius: var(--radius-sm); } .main-nav { display: flex; gap: var(--space-2); } .nav-link, .text-button, .back-button, .menu-button { border: 0; background: transparent; color: var(--color-ink-soft); padding: var(--space-2) var(--space-3); } .nav-link { border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; } .nav-link:hover, .nav-link.is-active { color: var(--color-primary); background: var(--color-primary-tint); } .menu-button { display: none; font-size: 1.35rem; } main { max-inline-size: var(--content); margin-inline: auto; padding: var(--space-10) clamp(var(--space-5), 5vw, var(--space-12)) var(--space-16); } .view { display: none; animation: enter var(--motion-base) ease-out; } .view.is-visible { display: block; } @keyframes enter { from { opacity: 0; transform: translateY(var(--space-3)); } to { opacity: 1; transform: translateY(0); } }
.hero-copy { max-inline-size: 42rem; } .eyebrow { color: var(--color-primary); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; margin: 0 0 var(--space-2); text-transform: uppercase; } h1, h2, p { margin-block: 0; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.15; letter-spacing: -0.045em; } h1 span { color: var(--color-primary); } h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.3; } .hero-copy > p:last-child, .page-intro { color: var(--color-ink-soft); max-inline-size: 38rem; margin-top: var(--space-4); } .dashboard-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-4); margin-top: var(--space-10); } .summary-card { min-block-size: 11rem; padding: var(--space-6); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; background: var(--color-surface); border: 0.0625rem solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .summary-card--focus { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-surface); } .summary-label { font-size: 0.875rem; font-weight: 600; opacity: 0.78; } .summary-card strong { font-size: 2.75rem; line-height: 1; letter-spacing: -0.06em; margin-bottom: calc(var(--space-8) * -1); } .summary-suffix { font-size: 0.875rem; font-weight: 600; opacity: 0.78; } .status-pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 700; } .status-pill--good { color: var(--color-good); background: var(--color-good-tint); } .status-pill--warn { color: hsl(32 74% 34%); background: var(--color-warn-tint); } .status-pill--neutral { color: var(--color-ink-soft); background: var(--color-muted); } .summary-card--focus .status-pill { color: var(--color-surface); background: hsl(0 0% 100% / 0.18); }
.department-section { margin-top: var(--space-16); } .section-heading, .page-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); } .text-button { color: var(--color-primary); font-weight: 700; } .text-button span { margin-inline-start: var(--space-1); transition: transform var(--motion-fast); display: inline-block; } .text-button:hover span { transform: translateX(var(--space-1)); } .department-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .department-card { background: var(--color-surface); border: 0.0625rem solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-5); transition: transform var(--motion-fast), box-shadow var(--motion-fast); } .department-card:hover { transform: translateY(calc(var(--space-1) * -1)); box-shadow: var(--shadow-card); } .department-card header { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); } .department-card h3 { margin: 0; font-size: 1rem; } .department-card p { margin-top: var(--space-4); color: var(--color-ink-soft); font-size: 0.8125rem; } .department-card .meter { margin-top: var(--space-4); block-size: var(--space-2); background: var(--color-muted); border-radius: var(--radius-pill); overflow: hidden; } .meter i { display: block; block-size: 100%; background: var(--color-good); border-radius: inherit; } .meter i.warn { background: var(--color-warn); } .center-action { display: grid; justify-items: center; gap: var(--space-3); margin-top: var(--space-16); text-align: center; } .center-action p { color: var(--color-ink-soft); font-size: 0.8125rem; } .primary-button, .secondary-button { border-radius: var(--radius-sm); padding: var(--space-3) var(--space-5); font-weight: 700; border: 0.0625rem solid transparent; transition: transform var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast); } .primary-button { color: var(--color-surface); background: var(--color-primary); box-shadow: 0 0.375rem 1rem hsl(218 89% 61% / 0.2); } .primary-button:hover { background: var(--color-primary-dark); transform: translateY(calc(var(--space-1) * -1)); } .primary-button--large { padding: var(--space-4) var(--space-8); font-size: 1.0625rem; border-radius: var(--radius-md); } .primary-button--large span { margin-inline-end: var(--space-2); } .secondary-button { color: var(--color-primary); border-color: var(--color-line); background: var(--color-surface); } .secondary-button:hover { background: var(--color-primary-tint); border-color: var(--color-primary); }
.back-button { color: var(--color-ink-soft); padding-inline-start: 0; font-size: 0.875rem; font-weight: 600; margin-bottom: var(--space-3); } .stepper { display: flex; align-items: center; gap: var(--space-2); color: var(--color-ink-soft); font-size: 0.75rem; font-weight: 700; } .stepper span { white-space: nowrap; } .stepper span.is-current { color: var(--color-primary); } .stepper i { display: block; inline-size: var(--space-6); block-size: 0.0625rem; background: var(--color-line); } .checklist-layout { display: grid; grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.6fr); gap: var(--space-6); align-items: start; } .selection-panel, .assessment-panel, .admin-card { border: 0.0625rem solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-card); } .selection-panel { padding: var(--space-6); display: grid; gap: var(--space-4); } label { display: grid; gap: var(--space-2); color: var(--color-ink-soft); font-size: 0.8125rem; font-weight: 700; } input, select { color: var(--color-ink); background: var(--color-surface); border: 0.0625rem solid var(--color-line); border-radius: var(--radius-sm); padding: var(--space-3); min-inline-size: 0; } .form-divider { block-size: 0.0625rem; background: var(--color-line); margin-block: var(--space-1); } .assessment-panel { min-block-size: 30rem; } .assessment-empty { min-block-size: 30rem; display: grid; place-content: center; justify-items: center; padding: var(--space-8); text-align: center; color: var(--color-ink-soft); } .assessment-empty span { display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: var(--radius-pill); background: var(--color-primary-tint); color: var(--color-primary); font-size: 2rem; margin-bottom: var(--space-4); } .assessment-empty p { margin-top: var(--space-2); font-size: 0.875rem; } .assessment-head { padding: var(--space-6); border-bottom: 0.0625rem solid var(--color-line); } .assessment-head p { margin-top: var(--space-1); color: var(--color-ink-soft); font-size: 0.875rem; } .check-items { padding: var(--space-3) var(--space-6); } .check-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 0.0625rem solid var(--color-line); color: var(--color-ink); font-size: 0.9375rem; font-weight: 500; } .check-item:last-child { border: 0; } .check-item input { appearance: none; inline-size: 1.35rem; block-size: 1.35rem; padding: 0; flex: 0 0 auto; border-radius: var(--radius-sm); } .check-item input:checked { background: var(--color-primary); border-color: var(--color-primary); } .check-item input:checked::after { content: "✓"; color: var(--color-surface); display: grid; place-items: center; font-size: 0.875rem; } .assessment-actions { display: flex; justify-content: end; padding: var(--space-6); border-top: 0.0625rem solid var(--color-line); }
.report-filters { display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: end; gap: var(--space-4); background: var(--color-surface); padding: var(--space-5); border-radius: var(--radius-md); border: 0.0625rem solid var(--color-line); margin-bottom: var(--space-8); } .report-paper { background: var(--color-paper); color: hsl(210 25% 16%); box-shadow: var(--shadow-float); padding: clamp(var(--space-6), 5vw, var(--space-12)); min-block-size: 46rem; } .paper-head { display: flex; justify-content: space-between; gap: var(--space-6); padding-bottom: var(--space-5); border-bottom: 0.125rem solid hsl(210 25% 16%); } .paper-head p { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; } .paper-head h2 { margin-top: var(--space-1); } .paper-badge { font-size: 0.75rem; font-weight: 700; padding: var(--space-2) var(--space-3); background: hsl(210 33% 95%); align-self: start; } .paper-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); padding-block: var(--space-6); } .paper-meta small { display: block; color: hsl(210 15% 40%); margin-bottom: var(--space-1); } .paper-meta b { font-size: 0.875rem; } table { inline-size: 100%; border-collapse: collapse; font-size: 0.8125rem; } th, td { text-align: left; padding: var(--space-3); border-bottom: 0.0625rem solid hsl(210 20% 84%); vertical-align: top; } th { background: hsl(210 33% 96%); font-size: 0.75rem; } .result-good { color: hsl(144 51% 31%); font-weight: 700; } .result-warn { color: hsl(32 74% 34%); font-weight: 700; } .paper-footer { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-10); padding-top: var(--space-4); border-top: 0.0625rem solid hsl(210 20% 84%); font-size: 0.75rem; } .paper-footer strong { font-family: var(--font-mono); white-space: nowrap; }
.admin-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--space-6); } .admin-card { padding: var(--space-6); } .card-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); } .icon-button { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border: 0; border-radius: var(--radius-pill); background: var(--color-primary-tint); color: var(--color-primary); font-size: 1.25rem; } .admin-list { list-style: none; padding: 0; margin: var(--space-4) 0 0; } .admin-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 0.0625rem solid var(--color-line); } .admin-list li input { flex: 1; border: 0; padding: var(--space-2); } .delete-item { color: hsl(3 63% 48%); border: 0; background: transparent; font-weight: 700; } .helper-text { color: var(--color-ink-soft); font-size: 0.875rem; } .toast { position: fixed; inset-inline: 50%; inset-block-end: var(--space-6); translate: -50% 150%; min-inline-size: min(20rem, calc(100vw - var(--space-10))); padding: var(--space-3) var(--space-5); background: var(--color-ink); color: var(--color-surface); border-radius: var(--radius-sm); text-align: center; box-shadow: var(--shadow-float); transition: translate var(--motion-base); z-index: 20; } .toast.is-showing { translate: -50% 0; }
@media (max-width: 52rem) { .dashboard-grid, .department-grid { grid-template-columns: repeat(2, 1fr); } .summary-card--focus { grid-column: span 2; } .report-filters { grid-template-columns: repeat(2, 1fr); } .report-filters .primary-button { grid-column: span 2; } .admin-grid { grid-template-columns: 1fr; } }
@media (max-width: 40rem) { .topbar { padding-inline: var(--space-4); } .main-nav { display: none; position: absolute; inset-inline: var(--space-4); inset-block-start: calc(var(--nav-height) + var(--space-2)); flex-direction: column; padding: var(--space-2); background: var(--color-surface); border: 0.0625rem solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-float); } .main-nav.is-open { display: flex; } .menu-button { display: block; } main { padding: var(--space-8) var(--space-4) var(--space-12); } .dashboard-grid, .department-grid, .checklist-layout, .report-filters, .paper-meta { grid-template-columns: 1fr; } .summary-card--focus, .report-filters .primary-button { grid-column: auto; } .stepper { display: none; } .page-heading { align-items: start; } .assessment-panel, .assessment-empty { min-block-size: 22rem; } .report-paper { padding: var(--space-5); overflow-x: auto; } .paper-head, .paper-footer { flex-direction: column; } table { min-inline-size: 38rem; } }
@media print { :root { --color-canvas: hsl(0 0% 100%); } .topbar, .page-heading, .report-filters, .toast { display: none !important; } main { padding: 0; max-inline-size: none; } .view { display: none !important; } #reports { display: block !important; } .report-paper { box-shadow: none; padding: 0; min-block-size: 0; } }
:root { --meter-ready: 100%; }
.meter i.meter--ready { inline-size: var(--meter-ready); }
.report-logo { display: block; inline-size: 9rem; block-size: auto; object-fit: contain; object-position: left center; }
.report-title { text-align: right; margin-inline-start: auto; }
.report-title .paper-badge { display: inline-block; margin-block-start: var(--space-2); }
@media (max-width: 40rem) { .report-logo { inline-size: 7rem; } .report-title { text-align: left; margin-inline-start: 0; } }
.dashboard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.summary-card { min-block-size: 9rem; padding: var(--space-5); }
.summary-card strong { font-size: 2.25rem; }
.readiness-card { align-items: center; text-align: center; }
.donut { position: relative; display: grid; place-items: center; inline-size: 5rem; block-size: 5rem; border-radius: var(--radius-pill); background: conic-gradient(var(--color-good) var(--meter-ready), var(--color-muted) var(--meter-ready)); }
.donut::before { content: ""; position: absolute; inline-size: 3.65rem; block-size: 3.65rem; border-radius: inherit; background: var(--color-surface); }
.donut strong { position: relative; z-index: 1; font-size: 1.1rem; margin: var(--space-0); }
.department-card { inline-size: 100%; border: 0.0625rem solid var(--color-line); text-align: left; font-family: inherit; cursor: pointer; }
.department-action { display: block; color: var(--color-primary); font-size: 0.75rem; font-weight: 700; margin-block-start: var(--space-3); }
.assessment-panel, .assessment-empty { min-block-size: 6rem; }
.assessment-empty { padding: var(--space-5); place-content: center; }
.check-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; border-bottom: 0.0625rem solid var(--color-line); }
.check-row .check-item { border: 0; }
.item-dates { display: flex; gap: var(--space-2); }
.item-dates label { font-size: 0.6875rem; }
.item-dates input { padding: var(--space-2); font-size: 0.75rem; }
.is-locked { opacity: 0.56; pointer-events: none; filter: grayscale(0.4); }
@page { size: A4 landscape; margin: 8mm; }
@media print { .report-paper { inline-size: 100%; min-block-size: auto; } .report-paper table { min-inline-size: 0; } }
@media (max-width: 64rem) { .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .dashboard-grid { grid-template-columns: 1fr; } .check-row { grid-template-columns: 1fr; gap: 0; } .item-dates { padding: 0 var(--space-4) var(--space-4); } }
.excel-report-table th:first-child, .excel-report-table td:first-child { inline-size: 10%; text-align: center; }
.excel-report-table th:last-child, .excel-report-table td:last-child { inline-size: 22%; text-align: center; }
.report-signature { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); margin-block-start: var(--space-8); }
.report-signature div { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: end; font-size: 0.8125rem; }
.report-signature span { min-block-size: 1.5rem; border-bottom: 0.0625rem dotted var(--color-ink-soft); }
.report-note { margin-block-start: var(--space-6); color: var(--color-ink-soft); font-size: 0.75rem; }
.daily-report-scroll { overflow-x: auto; }
.daily-report { min-inline-size: 62rem; font-size: 0.6875rem; }
.daily-report th, .daily-report td { padding: var(--space-2); }
.daily-report th:first-child, .daily-report td:first-child { inline-size: 3rem; }
.daily-report th:nth-child(2), .daily-report td:nth-child(2) { inline-size: 16rem; text-align: left; }
.daily-report th:not(:nth-child(2)), .daily-report td:not(:nth-child(2)) { text-align: center; }
.daily-status { font-weight: 700; }
#dashboard .department-coverflow { block-size: 23rem; }
#dashboard .dashboard-grid { overflow: hidden; }
:root { --dashboard-number: 1.75rem; --dashboard-heading: clamp(1.75rem, 4vw, 2.5rem); --dashboard-ring: 4.5rem; --dashboard-ring-inner: 3.25rem; --dashboard-border: 0.0625rem; --space-0: 0; }
#dashboard .dashboard-heading { position: relative; max-inline-size: none; padding-inline-end: 12rem; }
#dashboard h1 { font-size: var(--dashboard-heading); letter-spacing: normal; }
#dashboard .dashboard-start { position: absolute; inset-inline-end: var(--space-0); inset-block-start: var(--space-4); }
#dashboard .dashboard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--color-surface); border: var(--dashboard-border) solid var(--color-line); border-radius: var(--radius-md); gap: var(--space-0); margin-top: var(--space-6); }
#dashboard .summary-card { min-block-size: 8rem; border: none; border-radius: var(--space-0); box-shadow: none; justify-content: center; gap: var(--space-3); border-inline-end: var(--dashboard-border) solid var(--color-line); }
#dashboard .summary-card:last-child { border-inline-end: none; }
#dashboard .summary-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
#dashboard .summary-card strong { margin: var(--space-0); font-size: var(--dashboard-number); line-height: 1.2; letter-spacing: normal; }
#dashboard .summary-value span { font-size: var(--space-3); color: var(--color-ink-soft); }
#dashboard .donut { inline-size: var(--dashboard-ring); block-size: var(--dashboard-ring); background: conic-gradient(var(--color-primary) var(--progress, 0%), var(--color-muted) var(--progress, 0%)); }
#dashboard .donut::before { inline-size: var(--dashboard-ring-inner); block-size: var(--dashboard-ring-inner); }
#dashboard .donut strong { font-size: var(--space-4); }
#dashboard .department-section { margin-top: var(--space-8); }
#dashboard .department-card { text-align: center; box-shadow: var(--shadow-card); border-radius: var(--radius-md); }
#dashboard .department-card header { justify-content: center; }
#dashboard .department-action { padding: var(--space-2); border-radius: var(--radius-sm); background: var(--color-primary-tint); }
.dashboard-guide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); padding: var(--space-5); border-radius: var(--radius-md); background: var(--color-primary-tint); color: var(--color-ink-soft); font-size: var(--space-3); }
:root { --summary-label-compact: clamp(0.5rem, 2.1vw, 0.75rem); --summary-number-compact: clamp(0.875rem, 3.6vw, 1.75rem); --summary-unit-compact: 0.5625rem; --summary-ring-compact: 2.75rem; --summary-ring-inner-compact: 2rem; --summary-height-compact: 6rem; }
@media (max-width: 52rem) { #dashboard .summary-card { padding: var(--space-3); } }
@media (max-width: 40rem) { #dashboard .dashboard-heading { padding-inline-end: var(--space-0); } #dashboard .dashboard-start { position: static; margin-top: var(--space-4); } #dashboard .summary-card { padding: var(--space-2); min-inline-size: var(--space-0); min-block-size: var(--summary-height-compact); gap: var(--space-2); align-items: center; text-align: center; } #dashboard .summary-label { font-size: var(--summary-label-compact); white-space: nowrap; } #dashboard .summary-value { flex-direction: column; align-items: center; gap: var(--space-1); } #dashboard .summary-card strong { font-size: var(--summary-number-compact); white-space: nowrap; } #dashboard .summary-value span { font-size: var(--summary-unit-compact); } #dashboard .donut { inline-size: var(--summary-ring-compact); block-size: var(--summary-ring-compact); } #dashboard .donut::before { inline-size: var(--summary-ring-inner-compact); block-size: var(--summary-ring-inner-compact); } #dashboard .donut strong { font-size: var(--space-3); } .dashboard-guide { flex-direction: column; align-items: start; } }
.department-coverflow, .department-coverflow .department-card { cursor: grab; user-select: none; }
.department-coverflow.is-dragging, .department-coverflow.is-dragging .department-card { cursor: grabbing; }
.expiry-readonly { display: block; padding: var(--space-2); background: var(--color-muted); border-radius: var(--radius-sm); color: var(--color-ink); }
#expirySettings { display: grid; gap: var(--space-4); margin-block-start: var(--space-6); }
:root { --department-card-width: clamp(14rem, 30vw, 19rem); --department-stage-height: 20rem; --department-perspective: 60rem; --department-depth: -5rem; --department-count-font: 2.5rem; }
.department-coverflow { position: relative; block-size: var(--department-stage-height); overflow: hidden; perspective: var(--department-perspective); touch-action: pan-y; }
.department-coverflow .department-card { position: absolute; inset-inline-start: 50%; inset-block-start: var(--space-6); inline-size: var(--department-card-width); transform: translateX(calc(-50% + var(--card-offset) * var(--department-card-width) * 0.78)) translateZ(calc(var(--card-distance) * var(--department-depth))) rotateY(var(--card-tilt)); transition: transform var(--motion-base), opacity var(--motion-base); }
.department-count { font-size: var(--department-count-font); font-weight: 700; color: var(--color-primary); margin-block: var(--space-3); }
.department-count small { font-size: var(--space-4); color: var(--color-ink-soft); }
.department-controls { display: flex; justify-content: center; align-items: center; gap: var(--space-5); }
@media (prefers-reduced-motion: reduce) { .department-coverflow .department-card { transition: none; } }
.daily-inspectors td { writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap; vertical-align: top; color: var(--color-ink); }
.daily-inspectors th { text-align: left; }
@media print { .daily-report-scroll { overflow: visible; } .daily-report { min-inline-size: 0; font-size: 0.5rem; } .daily-report th, .daily-report td { padding: 0.1rem; } }
:root {
  --report-width: 281mm;
  --report-height: 193mm;
  --report-font: 7pt;
  --report-title-font: 12pt;
  --report-cell-padding: 0.5mm;
  --report-row-height: 4mm;
  --report-name-height: 12mm;
  --report-line: 0.15mm;
  --report-number-width: 4%;
  --report-item-width: 30%;
}
:root { --check-scroll-height: 24rem; --department-title-size: 1.25rem; --history-height: 22rem; --inspector-screen-height: 7rem; }
#checklist .assessment-empty { min-block-size: var(--space-16); padding: var(--space-3); }
#checklist .assessment-head { padding: var(--space-3) var(--space-5); }
#checklist .assessment-head p, #checklist .assessment-head h2 { margin: var(--space-0); }
#checklist .check-items { max-block-size: var(--check-scroll-height); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#checklist .check-item { padding-block: var(--space-3); }
#checklist .assessment-actions { padding: var(--space-3) var(--space-5); }
#dashboard .department-card h3 { font-size: var(--department-title-size); line-height: 1.4; }
.inspection-history { margin-block-start: var(--space-6); padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-md); }
#inspectionHistory { max-block-size: var(--history-height); overflow-y: auto; }
.history-record { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); border-bottom: var(--report-line) solid var(--color-line); }
.history-record p { margin: var(--space-0); }
.history-actions { display: flex; gap: var(--space-2); align-items: center; }
.daily-inspectors td { block-size: auto; height: var(--inspector-screen-height); padding: var(--space-1); }
.daily-inspectors td:nth-child(2) { inline-size: auto; text-align: center; }
@media print { .inspection-history { display: none; } }
@media print {
  html, body { margin: 0; padding: 0; }
  .app-shell { min-height: 0; }
  #reportPaper { width: var(--report-width); max-width: 100%; min-height: 0; padding: 0; overflow: visible; font-size: var(--report-font); line-height: 1.2; break-inside: avoid; }
  #reportPaper .paper-head { flex-direction: row; align-items: start; padding-bottom: var(--space-2); gap: var(--space-4); }
  #reportPaper .report-logo { width: var(--space-16); }
  #reportPaper .report-title { text-align: right; margin-inline-start: auto; }
  #reportPaper h2 { font-size: var(--report-title-font); }
  #reportPaper .paper-head p, #reportPaper .paper-meta b, #reportPaper .paper-meta small { font-size: var(--report-font); }
  #reportPaper .paper-meta { grid-template-columns: repeat(3, 1fr); padding-block: var(--space-2); }
  #reportPaper .daily-report-scroll { overflow: visible; }
  #reportPaper .daily-report { width: 100%; min-width: 0; table-layout: fixed; font-size: var(--report-font); }
  #reportPaper .daily-report th, #reportPaper .daily-report td { width: auto; padding: var(--report-cell-padding); border: var(--report-line) solid var(--color-ink-soft); height: var(--report-row-height); color: var(--color-ink); background: var(--color-paper); overflow-wrap: anywhere; }
  #reportPaper .daily-report tbody tr:not(.daily-inspectors) td:first-child, #reportPaper .daily-report thead tr:first-child th:first-child { width: var(--report-number-width); }
  #reportPaper .daily-report tbody tr:not(.daily-inspectors) td:nth-child(2), #reportPaper .daily-report thead tr:first-child th:nth-child(2) { width: var(--report-item-width); }
  #reportPaper .daily-inspectors td { height: var(--report-name-height); white-space: normal; }
  #reportPaper .report-note { font-size: var(--report-font); margin-top: var(--space-2); }
  #reportPaper .paper-footer { flex-direction: row; font-size: var(--report-font); margin-top: var(--space-2); padding-top: var(--space-2); }
  #reportPaper tr { break-inside: avoid; }
}
:root { --toast-width: 24rem; --report-logo-print-width: 22mm; --report-title-max: 70%; --report-screen-name-height: 5rem; }
html, body { max-inline-size: 100%; overflow-x: clip; }
.app-shell, main, .view, .report-paper { min-inline-size: var(--space-0); }
.toast { display: none; inset-inline: auto; inset-inline-start: 50%; inline-size: min(var(--toast-width), calc(100% - var(--space-8))); min-inline-size: var(--space-0); translate: -50% 0; overflow-wrap: anywhere; }
.toast.is-showing { display: block; }
.daily-report { table-layout: fixed; }
.daily-report th:last-child, .daily-report td:last-child { inline-size: auto; }
.daily-inspectors td { height: var(--report-screen-name-height); white-space: normal; overflow-wrap: anywhere; }
@media print {
  html, body { overflow: visible; }
  *, *::before, *::after { animation: none !important; transition: none !important; box-shadow: none !important; }
  #reports { transform: none; opacity: 1; overflow: visible; }
  #reportPaper { inline-size: var(--report-width); max-inline-size: 100%; }
  #reportPaper .paper-head { display: flex; flex-direction: row; flex-wrap: nowrap; break-inside: avoid; }
  #reportPaper .report-logo { inline-size: var(--report-logo-print-width); width: var(--report-logo-print-width); flex-shrink: 0; }
  #reportPaper .report-title { max-inline-size: var(--report-title-max); min-inline-size: var(--space-0); }
  #reportPaper .report-title h2 { margin: var(--space-0); line-height: 1.3; overflow-wrap: anywhere; }
  #reportPaper .daily-report th, #reportPaper .daily-report td { inline-size: auto; }
  #reportPaper .daily-report thead tr:first-child th:first-child, #reportPaper .daily-report tbody tr:not(.daily-inspectors) td:first-child { inline-size: var(--report-number-width); }
  #reportPaper .daily-report thead tr:first-child th:nth-child(2), #reportPaper .daily-report tbody tr:not(.daily-inspectors) td:nth-child(2) { inline-size: var(--report-item-width); }
  #reportPaper .daily-inspectors td { height: var(--report-name-height); font-weight: normal; }
}
[hidden] { display: none !important; }