:root {
    --c-bg: #f4f6f9;
    --c-surface: #fff;
    --c-border: #e2e6ed;
    --c-text: #1a2332;
    --c-text2: #5a6577;
    --c-text3: #98a2b3;
    --c-primary: #4f6ef7;
    --c-primary-hover: #3b5de5;
    --c-primary-light: #eef1fe;
    --c-danger: #ef4444;
    --c-danger-light: #fef2f2;
    --c-success: #10b981;
    --c-success-light: #ecfdf5;
    --c-warn: #f59e0b;
    --c-warn-light: #fffbeb;
    --c-sidebar: #1e293b;
    --c-sidebar2: #334155;
    --c-sidebar-text: #94a3b8;
    --c-sidebar-active: #4f6ef7;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,.1);
    --shadow-lg: 0 4px 16px rgba(0,0,0,.1);
    --sidebar-w: 220px;
    --header-h: 52px;
    --font: 'Pretendard', -apple-system, 'Segoe UI', sans-serif;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; }
body { font-family: var(--font); font-size:13px; color:var(--c-text); background:var(--c-bg); line-height:1.5; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout */
.app-layout { display:flex; height:100%; }
.sidebar { width:var(--sidebar-w); background:var(--c-sidebar); color:var(--c-sidebar-text); display:flex; flex-direction:column; flex-shrink:0; }
.sidebar-header { padding:16px 20px; border-bottom:1px solid var(--c-sidebar2); }
.sidebar-header h2 { color:#fff; font-size:15px; margin:0; }
.sidebar-header .user-name { font-size:11px; color:var(--c-sidebar-text); margin-top:2px; }
.sidebar-nav { flex:1; padding:8px 0; overflow-y:auto; }
.sidebar-group { padding:12px 20px 4px; font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--c-text3); }
.sidebar-item { display:flex; align-items:center; gap:10px; padding:9px 20px; cursor:pointer; font-size:13px; transition:background .15s; color:var(--c-sidebar-text); text-decoration:none; }
.sidebar-item:hover { background:var(--c-sidebar2); text-decoration:none; color:var(--c-sidebar-text); }
.sidebar-item.active { background:var(--c-sidebar-active); color:#fff; }
.sidebar-bottom { padding:12px 20px; border-top:1px solid var(--c-sidebar2); }
.sidebar-bottom a { color:var(--c-sidebar-text); font-size:12px; text-decoration:none; display:block; padding:4px 0; }
.sidebar-bottom a:hover { color:#fff; text-decoration:none; }

.main-area { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.main-header { height:var(--header-h); background:var(--c-surface); border-bottom:1px solid var(--c-border); display:flex; align-items:center; padding:0 24px; }
.main-header h3 { font-size:16px; margin:0; }
.main-content { flex:1; overflow-y:auto; padding:24px; }

/* Login layout */
.login-wrap { display:flex; align-items:center; justify-content:center; height:100vh; background:linear-gradient(135deg,#1e293b,#334155); }
.login-box { background:var(--c-surface); border-radius:12px; padding:40px; width:400px; box-shadow:var(--shadow-lg); }
.login-box h1 { font-size:20px; margin-bottom:6px; }
.login-box p.subtitle { color:var(--c-text2); margin-bottom:24px; font-size:13px; }

/* Cards */
.card { background:var(--c-surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-bottom:16px; border:none; }
.card h4, .card-title { font-size:14px; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--c-border); }
.card-header { padding:12px 20px; background:var(--c-bg); border-bottom:1px solid var(--c-border); font-weight:600; font-size:13px; }
.card-body { padding:16px 20px; }

/* Stats grid */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.stats-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.stats-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.stat-card { background:var(--c-surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; text-align:center; }
.stat-card .stat-value { font-size:24px; font-weight:700; color:var(--c-primary); }
.stat-card .stat-label { font-size:11px; color:var(--c-text3); margin-top:4px; }

/* Tables */
table { width:100%; border-collapse:collapse; }
th, td { padding:8px 12px; text-align:left; border-bottom:1px solid var(--c-border); font-size:12px; }
th { background:var(--c-bg); font-weight:600; color:var(--c-text2); font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
tr:hover { background:#f8f9fb; }
tfoot td { background:var(--c-bg); font-weight:600; }
.text-end { text-align:right; }

/* Badges */
.badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; }
.badge-pending, .bg-warning { background:var(--c-warn-light); color:var(--c-warn); }
.badge-active, .bg-success { background:var(--c-success-light); color:var(--c-success); }
.badge-inactive, .bg-secondary { background:#f1f3f5; color:#868e96; }
.badge-danger, .bg-danger { background:var(--c-danger-light); color:var(--c-danger); }
.bg-primary { background:var(--c-primary-light); color:var(--c-primary); }

/* Buttons */
.btn { padding:6px 14px; border-radius:var(--radius); border:none; cursor:pointer; font-size:12px; font-weight:500; display:inline-flex; align-items:center; gap:4px; }
.btn-primary { background:var(--c-primary); color:#fff; }
.btn-primary:hover { background:var(--c-primary-hover); }
.btn-success { background:var(--c-success); color:#fff; }
.btn-danger { background:var(--c-danger); color:#fff; }
.btn-warning { background:var(--c-warn); color:#fff; }
.btn-outline { background:none; border:1px solid var(--c-border); color:var(--c-text2); }
.btn-outline:hover { background:var(--c-bg); }
.btn-sm { padding:4px 10px; font-size:11px; }
.btn:disabled { opacity:.6; cursor:not-allowed; }
.btn-close { background:none; border:none; font-size:16px; cursor:pointer; color:var(--c-text3); padding:4px; }
.btn-close::after { content:'\00d7'; }

/* Forms */
.form-group { margin-bottom:14px; }
.form-group label, .form-label { display:block; font-size:12px; font-weight:600; color:var(--c-text2); margin-bottom:4px; }
input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="email"],
.form-control, select, .form-select {
    width:100%; padding:8px 12px; border:1px solid var(--c-border); border-radius:var(--radius);
    font-size:13px; outline:none; background:#fff; color:var(--c-text); font-family:var(--font);
}
input:focus, select:focus, .form-control:focus, .form-select:focus {
    border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(79,110,247,.1);
}
input:disabled, .form-control:disabled { background:var(--c-bg); color:var(--c-text3); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Alerts */
.alert { padding:10px 14px; border-radius:var(--radius); margin-bottom:12px; font-size:12px; }
.alert-success { background:var(--c-success-light); color:#065f46; }
.alert-danger { background:var(--c-danger-light); color:#991b1b; }
.alert-info { background:#eff6ff; color:#1e40af; }
.alert-warning { background:var(--c-warn-light); color:#92400e; }
.alert-dismissible { display:flex; justify-content:space-between; align-items:center; }

/* PC grid */
.pc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(100px,1fr)); gap:8px; }
.pc-item { text-align:center; padding:8px 4px; border-radius:var(--radius); border:1px solid var(--c-border); font-size:11px; cursor:pointer; transition:all .15s; }
.pc-item.enabled { background:var(--c-success-light); border-color:var(--c-success); }
.pc-item.disabled { background:#f8f8f8; color:var(--c-text3); }
.pc-item .pc-num { font-size:14px; font-weight:700; }

/* Chart bar */
.chart-bar { background:var(--c-bg); height:6px; border-radius:3px; margin-top:4px; }
.chart-fill { height:100%; border-radius:3px; background:var(--c-primary); }
.bar-bg { background:var(--c-border); height:6px; border-radius:3px; overflow:hidden; }
.bar-fill { height:100%; border-radius:3px; background:var(--c-primary); transition:width .4s ease; }

/* Dashboard grid */
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; min-height:0; }
.dash-col { display:flex; flex-direction:column; min-height:0; }
.dash-col .card { flex:1; display:flex; flex-direction:column; min-height:0; padding:0; }
.dash-col .card-header { flex-shrink:0; }
.dash-col .card-body { flex:1; overflow-y:auto; padding:0; }
.dash-col table td, .dash-col table th { padding:8px 14px; }
.month-nav { display:inline-flex; gap:4px; align-items:center; }
table tr.clickable { cursor:pointer; }
table tr.clickable:hover { background:var(--c-primary-light); }
table tr.selected { background:var(--c-primary-light); font-weight:600; }

/* Toggle */
.toggle { position:relative; width:40px; height:22px; cursor:pointer; display:inline-block; }
.toggle input { display:none; }
.toggle .slider { position:absolute; inset:0; background:#ccc; border-radius:11px; transition:.2s; }
.toggle .slider::before { content:''; position:absolute; width:16px; height:16px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; }
.toggle input:checked + .slider { background:var(--c-success); }
.toggle input:checked + .slider::before { transform:translateX(18px); }

/* Utilities */
.text-muted { color:var(--c-text3); }
.text-center { text-align:center; }
.mb-2 { margin-bottom:8px; }
.mb-3 { margin-bottom:12px; }
.mb-4 { margin-bottom:16px; }
.mt-3 { margin-top:12px; }
.p-3 { padding:12px; }
.p-4 { padding:16px; }
.gap-2 { gap:8px; }
.gap-3 { gap:12px; }
.d-flex { display:flex; }
.d-inline-block { display:inline-block; }
.align-items-center { align-items:center; }
.align-items-end { align-items:end; }
.justify-content-between { justify-content:space-between; }
.flex-grow-1 { flex-grow:1; }
.w-100 { width:100%; }
.fw-bold { font-weight:700; }
.fs-4 { font-size:20px; }
.small { font-size:11px; }

/* Blazor validation */
.valid.modified:not([type=checkbox]) { outline:1px solid var(--c-success); }
.invalid { outline:1px solid var(--c-danger); }
.validation-message { color:var(--c-danger); font-size:11px; }

/* Blazor error */
.blazor-error-boundary { background:#b32121; padding:1rem; color:white; border-radius:var(--radius); }
.blazor-error-boundary::after { content:"An error has occurred."; }
#blazor-error-ui { display:none; }