* { font-family: Sarabun, system-ui, sans-serif; }
.btn { display:inline-flex; align-items:center; gap:.5rem; border-radius:.5rem; padding:.6rem .9rem; font-weight:600; font-size:.9rem; transition:.18s ease; box-shadow:0 1px 2px rgb(15 23 42 / .08); border:1px solid transparent; }
.btn:focus, .icon-btn:focus, .field:focus { outline:3px solid rgb(37 99 235 / .22); outline-offset:2px; }
.btn:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgb(15 23 42 / .12); }
.btn-primary { background:#2563EB; color:#fff; }
.btn-secondary { background:#475569; color:#fff; }
.btn-success { background:#10B981; color:#fff; }
.btn-warning { background:#F59E0B; color:#111827; }
.btn-danger { background:#EF4444; color:#fff; }
.btn-outline { background:#fff; color:#1E3A8A; border-color:#bfdbfe; }
.btn-summary-excel { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.btn-summary-excel:hover { background:#10B981; color:#fff; border-color:#10B981; }
.btn-summary-pdf { background:#fff1f2; color:#be123c; border-color:#fecdd3; }
.btn-summary-pdf:hover { background:#e11d48; color:#fff; border-color:#e11d48; }
.icon-btn { display:grid; place-items:center; width:2.35rem; height:2.35rem; border-radius:.5rem; border:1px solid #dbeafe; background:#fff; color:#1e3a8a; transition:.18s ease; }
.icon-btn:hover { background:#dbeafe; }
.app-header { background-image:linear-gradient(90deg, rgb(255 255 255 / .96) 0%, rgb(255 255 255 / .78) 36%, rgb(255 255 255 / .22) 66%, rgb(255 255 255 / .08) 100%), url("../img/header.png"); background-size:cover; background-position:center; background-repeat:no-repeat; }
.header-action-panel { border-radius:.65rem; background:rgb(255 255 255 / .74); padding:.35rem; backdrop-filter:blur(8px); box-shadow:0 1px 2px rgb(15 23 42 / .08); }
.profile-mini-avatar { position:relative; display:grid; place-items:center; width:2rem; height:2rem; overflow:hidden; border-radius:999px; background:#dbeafe; color:#1e3a8a; box-shadow:0 0 0 2px rgb(255 255 255 / .75); }
.profile-mini-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.developer-credit { position:absolute; right:1.5rem; bottom:.35rem; border-radius:999px; background:rgb(255 255 255 / .68); padding:.18rem .65rem; color:#0f766e; font-size:.78rem; font-weight:700; backdrop-filter:blur(8px); box-shadow:0 1px 2px rgb(15 23 42 / .08); }
.app-footer { position:fixed; right:0; bottom:0; left:0; z-index:25; display:flex; align-items:center; justify-content:space-between; gap:1rem; border:1px solid #bfdbfe; border-bottom:0; border-radius:.75rem .75rem 0 0; background:linear-gradient(90deg,rgb(219 234 254 / .97),rgb(226 232 240 / .98)); padding:.65rem .85rem; color:#1e293b; box-shadow:0 -8px 24px rgb(15 23 42 / .12), inset 0 1px 0 rgb(255 255 255 / .65); backdrop-filter:blur(10px); }
.app-footer-brand { display:flex; min-width:0; align-items:center; gap:.75rem; }
.app-footer-icon { display:grid; place-items:center; flex:0 0 auto; width:2.5rem; height:2.5rem; border-radius:.65rem; background:#dbeafe; color:#1d4ed8; box-shadow:inset 0 0 0 1px rgb(255 255 255 / .75); }
.app-footer-title { color:#0f172a; font-size:.95rem; font-weight:800; line-height:1.2; }
.app-footer-subtitle { margin-top:.1rem; color:#64748b; font-size:.78rem; font-weight:600; }
.app-footer-meta { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem .9rem; color:#475569; font-size:.8rem; font-weight:600; }
.app-footer-meta i { color:#2563eb; margin-right:.25rem; }
.header-brand-copy { max-width:min(72rem, calc(100vw - 25rem)); text-shadow:0 1px 0 rgb(255 255 255 / .7); }
.header-hospital-name { overflow:visible; text-overflow:clip; white-space:normal; color:#047857; font-size:clamp(2.2rem, 3.6vw, 2.84rem); line-height:1.08; font-weight:800; text-shadow:0 2px 3px rgb(0 0 0 / .28), 0 6px 16px rgb(0 0 0 / .22); }
@media (max-width: 1023px) {
  .header-brand-copy { max-width:calc(100vw - 9rem); }
  .app-footer { align-items:flex-start; flex-direction:column; }
  .app-footer-meta { justify-content:flex-start; }
}
.header-hospital-address { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:.15rem; color:#385f91; font-size:.88rem; line-height:1.25; font-weight:500; }
.header-director { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:.25rem; color:#1e4f9a; font-size:.98rem; line-height:1.28; font-weight:700; }
.header-labor-head { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:.12rem; color:#64748b; font-size:.84rem; line-height:1.25; font-weight:600; }
.hospital-logo { display:grid; place-items:center; flex:0 0 auto; width:6rem; height:6rem; border-radius:.9rem; background:#2563eb; color:#fff; overflow:hidden; box-shadow:0 1px 2px rgb(15 23 42 / .12); }
.hospital-logo:has(img) { background:transparent; border-radius:0; overflow:visible; box-shadow:none; }
.hospital-logo img { width:100%; height:100%; object-fit:contain; background:transparent; padding:0; }
.card { border:1px solid #e2e8f0; background:#fff; border-radius:.5rem; padding:1rem; box-shadow:0 1px 2px rgb(15 23 42 / .05); transition:.18s ease; }
.card:hover { box-shadow:0 10px 24px rgb(15 23 42 / .08); }
.viewer-watermark { position:relative; overflow:hidden; }
.viewer-watermark::after { content:attr(data-watermark); position:absolute; left:50%; top:50%; z-index:1; transform:translate(-50%, -50%) rotate(-18deg); color:#1e3a8a; font-size:clamp(2.5rem, 7vw, 6rem); font-weight:800; letter-spacing:.08em; opacity:.11; white-space:nowrap; pointer-events:none; user-select:none; }
.viewer-watermark > * { position:relative; z-index:2; }
.form-section-header { display:flex; align-items:center; gap:.7rem; margin:-.25rem -.25rem 1rem; border:1px solid #dbeafe; border-radius:.5rem; padding:.65rem .75rem; color:#172554; font-weight:800; box-shadow:inset 0 1px 0 rgb(255 255 255 / .75); }
.form-section-title { line-height:1.2; }
.form-section-icon { display:grid; place-items:center; flex:0 0 auto; width:2.2rem; height:2.2rem; border-radius:.5rem; background:#fff; box-shadow:0 1px 2px rgb(15 23 42 / .08), inset 0 0 0 1px rgb(255 255 255 / .8); }
.form-section-header-blue { background:linear-gradient(90deg,#eff6ff,#f8fafc); border-color:#bfdbfe; }
.form-section-header-blue .form-section-icon { color:#1d4ed8; background:#dbeafe; }
.form-section-header-emerald { background:linear-gradient(90deg,#ecfdf5,#f8fafc); border-color:#a7f3d0; }
.form-section-header-emerald .form-section-icon { color:#047857; background:#d1fae5; }
.form-section-header-orange { background:linear-gradient(90deg,#fff7ed,#f8fafc); border-color:#fed7aa; }
.form-section-header-orange .form-section-icon { color:#c2410c; background:#ffedd5; }
.form-section-header-pink { background:linear-gradient(90deg,#fdf2f8,#f8fafc); border-color:#fbcfe8; }
.form-section-header-pink .form-section-icon { color:#be185d; background:#fce7f3; }
.form-section-header-rose { background:linear-gradient(90deg,#fff1f2,#f8fafc); border-color:#fecdd3; }
.form-section-header-rose .form-section-icon { color:#be123c; background:#ffe4e6; }
.form-section-header-slate { background:linear-gradient(90deg,#f8fafc,#fff); border-color:#e2e8f0; }
.form-section-header-slate .form-section-icon { color:#475569; background:#e2e8f0; }
.chart-card { position:relative; }
.chart-card:fullscreen { display:flex; flex-direction:column; overflow:auto; background:#ffffff; padding:1.5rem; }
.chart-card:fullscreen > [id] { flex:1 1 auto; min-height:calc(100vh - 190px); }
.chart-source { display:flex; align-items:center; gap:.45rem; border-top:1px solid #e2e8f0; padding-top:.55rem; }
#monthlyBirthWeightChart .apexcharts-datalabel,
#monthlyBirthWeightChart .apexcharts-data-label {
  transform:rotate(-90deg);
  transform-box:fill-box;
  transform-origin:center;
  fill:#fff;
  paint-order:stroke;
  stroke:#111827;
  stroke-width:3px;
  stroke-linejoin:round;
  filter:drop-shadow(0 1px 2px rgb(0 0 0 / .75));
}
#ageChart .apexcharts-data-labels rect,
#ageChart .apexcharts-datalabels rect {
  fill:#92400E !important;
  stroke:#92400E !important;
}
#ageChart .apexcharts-data-label,
#ageChart .apexcharts-datalabel {
  fill:#fff !important;
}
.kpi-card { display:flex; align-items:center; gap:.9rem; min-height:7rem; }
.kpi-icon { display:grid; place-items:center; flex:0 0 auto; width:3rem; height:3rem; border-radius:.75rem; font-size:1.15rem; box-shadow:inset 0 0 0 1px rgb(255 255 255 / .45); }
.kpi-icon-blue { background:#DBEAFE; color:#1D4ED8; }
.kpi-icon-green { background:#D1FAE5; color:#047857; }
.kpi-icon-indigo { background:#E0E7FF; color:#4338CA; }
.kpi-icon-cyan { background:#CFFAFE; color:#0E7490; }
.kpi-icon-violet { background:#EDE9FE; color:#6D28D9; }
.kpi-icon-amber { background:#FEF3C7; color:#B45309; }
.kpi-icon-orange { background:#FFEDD5; color:#C2410C; }
.kpi-icon-red { background:#FEE2E2; color:#B91C1C; }
.kpi-icon-emerald { background:#D1FAE5; color:#047857; }
.kpi-icon-rose { background:#FFE4E6; color:#BE123C; }
.kpi-icon-slate { background:#E2E8F0; color:#334155; }
.field-label { display:block; font-size:.86rem; font-weight:600; color:#334155; }
.address-field-label { display:block; min-width:0; color:#334155; font-size:.82rem; font-weight:600; }
.delivery-type-builder-grid { display:grid; gap:.6rem; }
@media (min-width: 640px) { .delivery-type-builder-grid { grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); } }
.field { margin-top:.35rem; width:100%; border:1px solid #cbd5e1; border-radius:.5rem; background:#fff; padding:.62rem .72rem; color:#0f172a; transition:.18s ease; }
.profile-avatar-editor { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; border:1px solid #dbeafe; border-radius:.5rem; background:#f8fafc; padding:1rem; }
.profile-avatar-editor[hidden] { display:none; }
.profile-avatar-crop { position:relative; width:15rem; max-width:100%; aspect-ratio:1; overflow:hidden; border-radius:999px; background:#e2e8f0; cursor:grab; touch-action:none; box-shadow:inset 0 0 0 2px #bfdbfe, 0 1px 2px rgb(15 23 42 / .08); }
.profile-avatar-crop:active { cursor:grabbing; }
.profile-avatar-crop img { position:absolute; left:50%; top:50%; max-width:none; user-select:none; pointer-events:none; transform-origin:center; will-change:transform; }
.profile-avatar-crop::after { content:""; position:absolute; inset:0; border-radius:999px; box-shadow:inset 0 0 0 3px rgb(255 255 255 / .95), inset 0 0 0 4px #2563eb; pointer-events:none; }
.profile-avatar-editor-meta { display:flex; min-width:min(100%, 18rem); align-items:center; gap:.8rem; }
.profile-avatar-preview-small { display:grid; place-items:center; flex:0 0 auto; width:6rem; height:6rem; overflow:hidden; border-radius:999px; background:#dbeafe; box-shadow:inset 0 0 0 2px #bfdbfe; }
.profile-avatar-preview-small canvas { width:100%; height:100%; }
.diagnosis-combobox { position:relative; display:block; }
.diagnosis-combobox-toggle { display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-height:2.75rem; text-align:left; font-weight:700; cursor:pointer; }
.diagnosis-combobox-toggle span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.diagnosis-combobox:not(.has-value) .diagnosis-combobox-toggle span { color:#64748b; font-weight:500; }
.diagnosis-combobox-menu { display:none; position:absolute; left:0; right:0; top:calc(100% + .35rem); z-index:90; max-height:min(70vh, 34rem); overflow:auto; border:1px solid #cbd5e1; border-radius:.5rem; background:#fff; padding:.45rem; box-shadow:0 18px 38px rgb(15 23 42 / .16); }
.diagnosis-combobox.is-open .diagnosis-combobox-menu { display:block; }
.dashboard-risk-combobox .diagnosis-combobox-menu { right:auto; width:max(100%, 24rem); max-width:min(42rem, calc(100vw - 2rem)); }
.diagnosis-combobox-custom { margin-top:0; margin-bottom:.4rem; }
.diagnosis-combobox-selected { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.45rem; }
.diagnosis-combobox-chip { border:1px solid #93c5fd; border-radius:999px; background:#eff6ff; padding:.28rem .55rem; color:#1d4ed8; font-size:.78rem; font-weight:800; cursor:pointer; }
.diagnosis-combobox-chip:hover, .diagnosis-combobox-chip:focus { background:#dbeafe; outline:none; }
.diagnosis-combobox-options { display:grid; gap:.15rem; }
.diagnosis-combobox-options button { position:relative; width:100%; border:0; border-radius:.35rem; background:transparent; padding:.48rem .55rem; color:#0f172a; font-weight:600; text-align:left; cursor:pointer; }
.diagnosis-combobox-options button:hover, .diagnosis-combobox-options button:focus { background:#eff6ff; color:#1d4ed8; outline:none; }
.diagnosis-combobox-options button.is-selected { background:#dbeafe; color:#1d4ed8; padding-right:2rem; }
.diagnosis-combobox-options button.is-selected::after { content:"\2713"; position:absolute; right:.65rem; top:50%; transform:translateY(-50%); font-weight:800; }
.diagnosis-combobox-multiple .diagnosis-combobox-toggle span { white-space:normal; line-height:1.35; }
.thai-datepicker-input { cursor:pointer; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23334155' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat right .7rem center; padding-right:2.4rem; }
.thai-datepicker { position:absolute; z-index:80; width:19rem; border:1px solid #cbd5e1; border-radius:.5rem; background:#fff; padding:.75rem; box-shadow:0 18px 36px rgb(15 23 42 / .18); }
.thai-datepicker-header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.6rem; color:#0f172a; }
.thai-datepicker-header button { display:grid; place-items:center; width:2rem; height:2rem; border-radius:.45rem; color:#1e3a8a; }
.thai-datepicker-header button:hover { background:#dbeafe; }
.thai-datepicker-selects { display:flex; min-width:0; flex:1; gap:.35rem; }
.thai-datepicker-selects select { min-width:0; height:2rem; border:1px solid #cbd5e1; border-radius:.45rem; background:#fff; padding:0 .45rem; color:#0f172a; font-weight:700; outline:none; }
.thai-datepicker-selects select:first-child { flex:1.3; }
.thai-datepicker-selects select:last-child { flex:.9; }
.thai-datepicker-selects select:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgb(37 99 235 / .14); }
.thai-datepicker-weekdays, .thai-datepicker-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:.2rem; text-align:center; }
.thai-datepicker-weekdays { margin-bottom:.25rem; color:#64748b; font-size:.78rem; font-weight:700; }
.thai-datepicker-day { height:2rem; border-radius:.45rem; color:#0f172a; font-weight:600; transition:.15s ease; }
.thai-datepicker-day:hover { background:#dbeafe; color:#1e3a8a; }
.thai-datepicker-day.is-muted { color:#94a3b8; font-weight:400; }
.thai-datepicker-day.is-today { box-shadow:inset 0 0 0 1px #2563eb; }
.thai-datepicker-day.is-selected { background:#2563eb; color:#fff; }
.thai-datepicker-actions { display:flex; justify-content:space-between; border-top:1px solid #e2e8f0; margin-top:.65rem; padding-top:.55rem; }
.thai-datepicker-actions button { color:#2563eb; font-weight:700; font-size:.85rem; }
.field-error { display:block; min-height:1rem; margin-top:.2rem; font-size:.75rem; color:#dc2626; }
.nav-link { display:flex; align-items:center; gap:.75rem; border-radius:.5rem; padding:.7rem .8rem; color:#334155; font-weight:600; transition:.18s ease; }
.nav-link:hover { background:#bfdbfe; color:#1e3a8a; }
.nav-icon { width:1.25rem; text-align:center; font-size:1rem; filter:drop-shadow(0 1px 1px rgb(15 23 42 / .12)); }
.nav-icon-blue { color:#2563eb; }
.nav-icon-emerald { color:#059669; }
.nav-icon-violet { color:#7c3aed; }
.nav-icon-orange { color:#ea580c; }
.nav-icon-purple { color:#9333ea; }
.nav-icon-indigo { color:#4f46e5; }
.nav-icon-red { color:#dc2626; }
.nav-icon-cyan { color:#0891b2; }
.nav-icon-slate { color:#475569; }
.nav-icon-teal { color:#0d9488; }
.app-sidebar { background:#eaf4ff; border-color:#bfdbfe; }
@media (max-width: 1023px) {
  body.sidebar-collapsed #sidebar {
    translate:calc(-100% + 4.75rem) 0 !important;
    transform:translateX(calc(-100% + 4.75rem)) !important;
  }
  body.sidebar-collapsed .sidebar-toggle-row {
    justify-content:flex-end;
  }
  body.sidebar-collapsed #sidebar .nav-link {
    opacity:0;
    pointer-events:none;
  }
}
@media (min-width: 1024px) {
  body.sidebar-collapsed #sidebar { width:4.75rem; translate:0 0 !important; transform:translateX(0) !important; }
  body.sidebar-collapsed main { padding-left:4.75rem !important; }
  body.sidebar-collapsed .app-footer { left:5.75rem; }
  body.sidebar-collapsed .sidebar-toggle-row { justify-content:center; }
  body.sidebar-collapsed .nav-link { justify-content:center; padding:.7rem; }
  body.sidebar-collapsed .nav-link span { display:none; }
}
@media (min-width: 1024px) {
  .app-footer { left:19rem; }
}
.badge { display:inline-flex; align-items:center; border-radius:999px; padding:.2rem .55rem; font-size:.75rem; font-weight:700; }
.badge-blue { background:#dbeafe; color:#1e40af; }
.badge-pink { background:#fce7f3; color:#be185d; }
.badge-green { background:#d1fae5; color:#047857; }
.badge-amber { background:#fef3c7; color:#92400e; }
.badge-red { background:#fee2e2; color:#b91c1c; }
.skeleton { animation:pulse 1.2s infinite; background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9); background-size:200% 100%; }
@keyframes pulse { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@media (prefers-color-scheme: dark) {
  body { background:#0f172a; color:#e2e8f0; }
}

/* Responsive application shell */
:root {
  --app-header-height:9rem;
  --app-sidebar-width:18rem;
  --app-sidebar-collapsed-width:4.75rem;
}
.app-header-inner { min-height:9rem; }
.app-mobile-menu-toggle { display:none; flex:0 0 auto; }
.app-main { min-height:100vh; padding-top:var(--app-header-height); padding-bottom:5rem; transition:padding-left .18s ease; }
.app-sidebar { top:var(--app-header-height); width:var(--app-sidebar-width); transition:width .18s ease, transform .18s ease; }
.sidebar-overlay { display:none; }
.table-scroll { overscroll-behavior-inline:contain; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch; }
.responsive-table { min-width:56rem; }
.dashboard-filters { grid-template-columns:repeat(6, minmax(0, 1fr)); }

@media (max-width: 1023px) {
  :root { --app-header-height:6.25rem; }
  .app-header-inner { min-height:6.25rem; }
  .app-mobile-menu-toggle { display:grid; }
  .header-brand-copy { max-width:none; }
  .header-hospital-name { font-size:1.75rem; }
  .hospital-logo { width:4rem; height:4rem; }
  .developer-credit { display:none; }
  .app-main { min-height:calc(100vh - var(--app-header-height)); padding-bottom:0; }
  .app-sidebar,
  body.sidebar-collapsed #sidebar {
    top:var(--app-header-height);
    width:min(18rem, 88vw);
    translate:0 0 !important;
    transform:translateX(-105%) !important;
    box-shadow:12px 0 32px rgb(15 23 42 / .18);
  }
  body.sidebar-open #sidebar { transform:translateX(0) !important; }
  body.sidebar-open { overflow:hidden; }
  body.sidebar-collapsed #sidebar .nav-link { opacity:1; pointer-events:auto; }
  .sidebar-overlay {
    position:fixed;
    inset:var(--app-header-height) 0 0;
    z-index:35;
    display:block;
    border:0;
    background:rgb(15 23 42 / .42);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
  }
  body.sidebar-open .sidebar-overlay { opacity:1; pointer-events:auto; }
  .app-footer {
    position:static;
    left:0;
    align-items:center;
    flex-direction:row;
    border-right:0;
    border-left:0;
    border-radius:0;
    padding:.7rem 1rem;
  }
  .app-footer-meta { justify-content:flex-end; }
  .dashboard-filters { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  :root { --app-header-height:4.5rem; }
  .app-header-inner { min-height:4.5rem; }
  .hospital-logo { width:2.75rem; height:2.75rem; border-radius:.55rem; }
  .header-brand-copy { max-width:calc(100vw - 10.75rem); }
  .header-hospital-name {
    display:-webkit-box;
    overflow:hidden;
    font-size:1.1rem;
    line-height:1.25;
    text-shadow:0 1px 2px rgb(0 0 0 / .2);
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .header-action-panel { gap:0; padding:.2rem; }
  .header-action-panel .profile-mini-avatar { display:none; }
  .header-logout-button { width:2.5rem; height:2.5rem; justify-content:center; padding:0; }
  .header-logout-button span { display:none; }
  .page-heading h1 { align-items:flex-start; font-size:1.25rem; line-height:1.35; }
  .page-heading h1 > span:first-child { width:2.25rem; height:2.25rem; border-radius:.5rem; }
  .app-content { overflow-x:hidden; }
  .app-footer { align-items:flex-start; flex-direction:column; gap:.55rem; }
  .app-footer-icon { width:2.1rem; height:2.1rem; }
  .app-footer-meta { justify-content:flex-start; font-size:.75rem; }
  .app-footer-meta span:first-child { display:none; }
  .dashboard-filters { grid-template-columns:minmax(0, 1fr); }
  .dashboard-export-actions,
  .dashboard-export-actions .btn { width:100%; }
  .dashboard-export-actions .btn { justify-content:center; }
  .chart-card-header { flex-direction:column; }
  .chart-card-actions { width:100%; justify-content:flex-start; }
  .chart-card-actions label { flex:1 1 auto; justify-content:center; }
  .card { padding:.85rem; }
}

@media (min-width: 1024px) {
  .app-sidebar { transform:translateX(0); }
  .app-footer { left:calc(var(--app-sidebar-width) + 1rem); }
  body.sidebar-collapsed #sidebar { width:var(--app-sidebar-collapsed-width); }
  body.sidebar-collapsed main { padding-left:var(--app-sidebar-collapsed-width) !important; }
  body.sidebar-collapsed .app-footer { left:calc(var(--app-sidebar-collapsed-width) + 1rem); }
}

@media (prefers-reduced-motion: reduce) {
  .app-main,
  .app-sidebar,
  .sidebar-overlay { transition:none; }
}