:root {
    --bg: #f4f8f9;
    --surface: #ffffff;
    --surface-soft: #f8fbfc;
    --sidebar: #0d3b45;
    --sidebar-2: #0f5963;
    --primary: #167b84;
    --primary-dark: #0f626b;
    --primary-soft: #e9f6f6;
    --blue: #397aa8;
    --text: #163038;
    --muted: #6d8086;
    --border: #dfe9ec;
    --clean: #1ca66f;
    --clean-soft: #e9f7f0;
    --disinfect: #dc5b61;
    --disinfect-soft: #fdeff0;
    --orange: #f07822;
    --shadow: 0 12px 32px rgba(18, 63, 72, .08);
    --radius: 16px;
    --sidebar-width: 258px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; font-family: Inter, "Segoe UI", Arial, sans-serif; color: var(--text); background: var(--bg); }
button, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }

.app-shell { min-height: 100vh; }
.sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: 40;
    display: flex; flex-direction: column; padding: 22px 16px;
    background: linear-gradient(180deg, var(--sidebar) 0%, #0c4650 100%); color: #fff;
    box-shadow: 8px 0 30px rgba(12, 54, 63, .08);
}
.brand-block { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 5px 8px 22px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-logo { width: 46px; height: 46px; object-fit: contain; border-radius: 12px; background: rgba(255,255,255,.96); padding: 5px; }
.brand-name { font-size: 20px; font-weight: 750; letter-spacing: .2px; }
.brand-subtitle { margin-top: 3px; font-size: 11px; color: rgba(255,255,255,.66); letter-spacing: 1.1px; text-transform: uppercase; }
.side-nav { display: grid; gap: 8px; padding-top: 24px; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 47px; padding: 0 13px; border-radius: 11px; color: rgba(255,255,255,.78); font-size: 14px; font-weight: 600; transition: .2s ease; }
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateX(2px); }
.nav-item.active { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 3px 0 0 #7cddda; }
.nav-icon { width: 23px; height: 23px; display: grid; place-items: center; font-size: 18px; }
.sidebar-bottom { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); }
.logout-item { color: #ffdede; }

.main-area { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
    min-height: 86px; display: flex; align-items: center; gap: 16px; padding: 18px 30px;
    background: rgba(255,255,255,.94); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 25; backdrop-filter: blur(12px);
}
.topbar h1 { margin: 0; font-size: 23px; font-weight: 750; letter-spacing: -.3px; }
.topbar p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.topbar-user { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user-avatar { width: 39px; height: 39px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-dark); font-weight: 800; border: 1px solid #cce9e9; }
.user-meta { display: grid; gap: 2px; }
.user-meta strong { font-size: 13px; }
.user-meta span { font-size: 11px; color: var(--muted); }
.menu-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--border); background: #fff; border-radius: 10px; cursor: pointer; color: var(--text); }
.content-area { flex: 1; padding: 26px 30px 30px; }

.stats-grid { display: grid; gap: 18px; margin-bottom: 22px; }
.stats-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-card { min-height: 128px; display: flex; align-items: center; gap: 15px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.stat-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 18px; }
.stat-icon.teal { color: var(--primary-dark); background: var(--primary-soft); }
.stat-icon.blue { color: #326d9a; background: #edf5fb; }
.stat-icon.slate { color: #4d6570; background: #eef2f4; }
.stat-icon.green { color: var(--clean); background: var(--clean-soft); }
.stat-icon.red { color: var(--disinfect); background: var(--disinfect-soft); }
.stat-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 650; margin-bottom: 4px; }
.stat-card strong { display: block; font-size: 27px; line-height: 1.05; letter-spacing: -.7px; }
.stat-card strong.compact-value { font-size: 19px; word-break: break-word; }
.stat-card small { display: block; color: #93a2a7; font-size: 11px; margin-top: 7px; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.dashboard-grid, .chart-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 21px 22px 10px; }
.panel-head h2 { margin: 4px 0 0; font-size: 17px; }
.panel-kicker { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; }
.panel-badge { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--border); color: var(--muted); font-size: 10px; font-weight: 700; }
.chart-panel { min-width: 0; }
.chart-wrap { position: relative; height: 285px; padding: 10px 20px 18px; }
.donut-wrap { height: 265px; max-width: 430px; margin: 0 auto; }
.legend-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 22px 22px; }
.legend-summary > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 10px; background: var(--surface-soft); font-size: 12px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.legend-dot.clean { background: var(--clean); }
.legend-dot.disinfect { background: var(--disinfect); }
.summary-list { display: grid; gap: 0; padding: 5px 22px 22px; }
.summary-list > div { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.summary-list > div:last-child { border-bottom: 0; }
.summary-list strong { color: var(--text); font-size: 15px; }
.text-clean { color: var(--clean) !important; }
.text-disinfect { color: var(--disinfect) !important; }
.last-record { padding: 0 22px 20px; color: var(--muted); font-size: 12px; }

.split-layout { display: grid; grid-template-columns: minmax(320px, .75fr) minmax(520px, 1.25fr); gap: 20px; align-items: start; }
.form-panel { overflow: hidden; }
.form-grid { display: grid; gap: 16px; padding: 14px 22px 22px; }
.form-stack { display: grid; gap: 17px; }
.field-group { display: grid; gap: 7px; }
.field-group > span { color: #526970; font-size: 12px; font-weight: 700; }
.field-group input, .field-group select, .filter-control select, .search-box input {
    width: 100%; min-height: 44px; border: 1px solid #d7e3e6; border-radius: 10px; padding: 0 12px; outline: none; color: var(--text); background: #fff; transition: border .2s, box-shadow .2s;
}
.field-group input:focus, .field-group select:focus, .filter-control select:focus, .search-box input:focus { border-color: #7ebfc3; box-shadow: 0 0 0 3px rgba(22,123,132,.10); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; padding: 0 16px; font-weight: 750; font-size: 12px; cursor: pointer; transition: .2s ease; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 7px 17px rgba(22,123,132,.16); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn-secondary { background: #edf7f7; color: var(--primary-dark); border: 1px solid #cfe7e8; }
.btn-secondary:hover { background: #e2f2f3; }
.btn-light { background: #f3f6f7; color: #52666d; border: 1px solid var(--border); }
.btn-block { width: 100%; }

.alert { margin: 8px 22px 0; padding: 11px 13px; border-radius: 10px; font-size: 12px; line-height: 1.5; }
.alert-success { color: #166b4b; background: var(--clean-soft); border: 1px solid #c9ebdc; }
.alert-danger { color: #9f3f44; background: var(--disinfect-soft); border: 1px solid #f3cfd2; }

.table-panel { min-width: 0; overflow: hidden; }
.table-scroll { width: 100%; overflow: auto; }
.compact-table { max-height: 570px; }
.collection-table-wrap { max-height: 540px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.data-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.data-table th { position: sticky; top: 0; z-index: 2; text-align: left; white-space: nowrap; padding: 13px 14px; color: #5b7178; background: #f6fafb; border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase; letter-spacing: .45px; }
.data-table td { padding: 13px 14px; border-bottom: 1px solid #edf2f3; white-space: nowrap; color: #344f56; }
.data-table tbody tr:hover td { background: #fbfdfd; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table code { font-family: Consolas, monospace; color: #355f68; font-size: 11px; }
.empty-cell { text-align: center !important; color: #8a9b9f !important; padding: 34px !important; }
.status-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 78px; padding: 6px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .2px; }
.status-pill.clean { color: #16754f; background: var(--clean-soft); }
.status-pill.disinfect { color: #a14046; background: var(--disinfect-soft); }
.status-pill.neutral { color: #526a73; background: #edf2f4; }

.collection-panel { overflow: hidden; }
.collection-head { align-items: center; padding-bottom: 18px; }
.filter-bar { display: grid; grid-template-columns: minmax(240px, 1fr) 190px 190px; gap: 12px; padding: 0 22px 18px; }
.search-box { position: relative; display: block; }
.search-box > span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #84989e; font-size: 18px; pointer-events: none; }
.search-box input { padding-left: 39px; }
.filter-control { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; padding-left: 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.filter-control > span { color: #7b8e93; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.filter-control select { min-height: 42px; border: 0; padding-left: 2px; box-shadow: none !important; }
.table-footer { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 22px; color: var(--muted); font-size: 11px; }
.pagination { display: flex; align-items: center; gap: 5px; }
.pagination button { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: #597078; font-size: 11px; cursor: pointer; }
.pagination button.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
.pagination span { padding: 0 3px; }
.collection-charts { margin-top: 20px; }
.table-action { min-width: 58px; height: 30px; border: 0; border-radius: 8px; font-size: 10px; font-weight: 800; cursor: pointer; }
.table-action.edit { color: #2f7080; background: #eaf5f7; }
.table-action.delete { color: #a64147; background: var(--disinfect-soft); }
#collectionBody.loading { opacity: .55; }

.modal { display: none; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; padding: 20px; background: rgba(9,39,45,.48); backdrop-filter: blur(4px); }
.modal.show { display: flex; }
.modal-card { width: min(520px, 100%); max-height: 90vh; overflow: auto; background: #fff; border-radius: 17px; box-shadow: 0 30px 80px rgba(0,0,0,.18); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 22px 22px 4px; }
.modal-head h2 { margin: 4px 0 0; font-size: 18px; }
.icon-btn { width: 35px; height: 35px; border: 1px solid var(--border); border-radius: 9px; background: #fff; color: #62767c; font-size: 22px; cursor: pointer; }
.modal-actions { padding-top: 8px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 150; max-width: 340px; transform: translateY(20px); opacity: 0; pointer-events: none; padding: 12px 15px; border-radius: 10px; color: #fff; background: #176f62; box-shadow: 0 16px 40px rgba(0,0,0,.16); font-size: 12px; transition: .22s ease; }
.toast.danger { background: #a9484d; }
.toast.show { opacity: 1; transform: translateY(0); }

.app-footer { min-height: 66px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 25px; border-top: 1px solid var(--border); background: #fff; color: #798b90; font-family: Calibri, "Segoe UI", sans-serif; font-size: 12px; }
.app-footer strong, .login-footer strong { color: var(--orange); font-family: Calibri, "Segoe UI", sans-serif; }
.app-footer img, .login-footer img { width: 28px; height: 28px; object-fit: contain; border-radius: 5px; }

.sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 35; background: rgba(7,31,36,.45); }
.sidebar-overlay.show { display: block; }

/* Login */
.login-body { min-height: 100vh; background: #eef6f7; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.login-visual { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 42px 54px; color: #fff; background: linear-gradient(145deg, #0c4650 0%, #116f79 65%, #1a8b8e 100%); }
.login-visual::after { content: ""; position: absolute; width: 500px; height: 500px; right: -190px; bottom: -210px; border-radius: 50%; border: 70px solid rgba(255,255,255,.05); }
.login-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; }
.login-brand img { width: 58px; height: 58px; object-fit: contain; padding: 6px; border-radius: 14px; background: rgba(255,255,255,.96); }
.login-brand h1 { margin: 0; font-size: 27px; }
.login-brand p { margin: 4px 0 0; font-size: 11px; color: rgba(255,255,255,.72); letter-spacing: .5px; }
.visual-copy { position: relative; z-index: 2; max-width: 530px; padding-bottom: 40px; }
.eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 1.6px; color: #bde9e8; }
.visual-copy h2 { margin: 12px 0 12px; font-size: clamp(34px, 5vw, 58px); line-height: 1.02; letter-spacing: -1.8px; }
.visual-copy p { max-width: 490px; margin: 0; color: rgba(255,255,255,.75); line-height: 1.7; font-size: 14px; }
.medical-orbit { position: absolute; left: 50%; top: 43%; width: 230px; height: 230px; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid rgba(255,255,255,.15); }
.medical-orbit::before, .medical-orbit::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); }
.medical-orbit::before { inset: 34px; }
.medical-orbit::after { inset: 72px; }
.orbit-center { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: rgba(255,255,255,.13); font-size: 34px; font-weight: 300; }
.orbit-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #bfeeed; box-shadow: 0 0 0 7px rgba(191,238,237,.08); }
.dot-a { left: 22px; top: 40px; }.dot-b { right: 15px; top: 105px; }.dot-c { left: 100px; bottom: -5px; }
.login-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; background: #f8fbfc; }
.login-card { width: min(440px, 100%); padding: 32px; background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 22px 60px rgba(18,63,72,.09); }
.login-card-head { margin-bottom: 24px; }
.login-card-head h2 { margin: 12px 0 7px; font-size: 27px; letter-spacing: -.5px; }
.login-card-head p { margin: 0; color: var(--muted); font-size: 13px; }
.secure-chip { display: inline-flex; padding: 7px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-size: 9px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; }
.login-card .alert { margin: 0 0 17px; }
.login-note { margin: 18px 0 0; text-align: center; color: #99a7aa; font-size: 10px; }
.login-footer { display: flex; align-items: center; gap: 7px; margin-top: 24px; color: #87989d; font-family: Calibri, "Segoe UI", sans-serif; font-size: 11px; }
.login-footer img { width: 24px; height: 24px; }

@media (max-width: 1180px) {
    .stats-grid.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .split-layout { grid-template-columns: 1fr; }
    .form-panel { max-width: none; }
}

@media (max-width: 980px) {
    .sidebar { transform: translateX(-102%); transition: transform .25s ease; box-shadow: 20px 0 50px rgba(0,0,0,.15); }
    .sidebar.open { transform: translateX(0); }
    .main-area { margin-left: 0; }
    .menu-toggle { display: grid; place-items: center; }
    body.nav-open { overflow: hidden; }
    .login-shell { grid-template-columns: 1fr; }
    .login-visual { display: none; }
    .login-panel { min-height: 100vh; }
}

@media (max-width: 760px) {
    .topbar { min-height: 76px; padding: 14px 16px; }
    .topbar p, .user-meta { display: none; }
    .topbar h1 { font-size: 19px; }
    .content-area { padding: 17px 14px 22px; }
    .stats-grid.three, .stats-grid.four { grid-template-columns: 1fr; gap: 12px; }
    .stat-card { min-height: 104px; padding: 16px; }
    .stat-card strong { font-size: 23px; }
    .dashboard-grid, .chart-grid { grid-template-columns: 1fr; gap: 14px; }
    .panel-head { padding: 17px 16px 9px; }
    .panel-head h2 { font-size: 16px; }
    .panel-badge { font-size: 9px; max-width: 165px; text-align: center; }
    .chart-wrap { height: 245px; padding-left: 10px; padding-right: 10px; }
    .legend-summary, .summary-list { padding-left: 16px; padding-right: 16px; }
    .filter-bar { grid-template-columns: 1fr; padding: 0 16px 16px; }
    .filter-control { grid-template-columns: 70px 1fr; }
    .collection-head { flex-wrap: wrap; }
    .collection-head .export-link { width: 100%; }
    .table-footer { flex-direction: column; align-items: flex-start; padding: 12px 16px 16px; }
    .pagination { width: 100%; overflow-x: auto; padding-bottom: 2px; }
    .app-footer { flex-wrap: wrap; text-align: center; padding: 14px; }
    .login-panel { padding: 20px 14px; }
    .login-card { padding: 24px 19px; border-radius: 16px; }
    .login-footer { flex-wrap: wrap; justify-content: center; text-align: center; }
    .toast { left: 14px; right: 14px; bottom: 14px; max-width: none; }
}

@media (max-width: 420px) {
    .user-avatar { width: 35px; height: 35px; }
    .stat-icon { width: 44px; height: 44px; }
    .legend-summary { grid-template-columns: 1fr; }
    .modal { padding: 10px; }
}