:root{--text: rgb(0, 0, 0);--sidebar-bg: #0f172a;--sidebar-text: rgb(31, 41, 55);--sidebar-fg: #e5e7eb;--sidebar-muted: #94a3b8;--header-bg: rgb(255, 255, 255);--header-text: rgb(31, 41, 55);--bg: #f1f5f9;--card: #ffffff;--border: #e5e7eb;--primary: #1d4ed8;--primary-hover: #1e40af;--danger: #dc2626;--success: #16a34a;--muted: #6b7280;--font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);color:var(--text);background:var(--bg);font-size:14px}a{color:inherit;text-decoration:none}.layout{display:flex;min-height:100vh}.sidebar{width:240px;background:var(--sidebar-bg);color:var(--sidebar-fg);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0}.sidebar-logo{padding:20px;display:flex;align-items:center;justify-content:center;background:#fff}.sidebar-logo img,.sidebar-logo .logo-text{font-weight:700;color:#1d4ed8;font-size:18px}.sidebar-section{padding:16px 20px 8px;font-size:11px;letter-spacing:1px;color:var(--sidebar-muted)}.sidebar-menu{list-style:none;padding:0;margin:0;flex:1}.sidebar-menu a{display:flex;align-items:center;gap:12px;padding:10px 20px;color:var(--sidebar-fg);font-size:14px}.sidebar-menu a:hover,.sidebar-menu a.active{background:#ffffff14}.sidebar-footer{padding:16px 20px;border-top:1px solid rgba(255,255,255,.08)}.sidebar-footer button{background:none;border:none;color:var(--sidebar-fg);cursor:pointer;display:flex;align-items:center;gap:12px;font-size:14px;padding:0}.main{flex:1;margin-left:240px;display:flex;flex-direction:column}.header{background:var(--header-bg);color:var(--header-text);padding:16px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.header-title{font-size:18px;font-weight:700}.header-right{display:flex;align-items:center;gap:16px}.bell{color:var(--muted);cursor:pointer}.user-info{text-align:right;line-height:1.2}.user-info .name{font-weight:700;font-size:13px}.user-info .role{color:var(--muted);font-size:12px}.avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700}.page{padding:24px 28px}.page-title{margin:0 0 16px;font-size:18px;font-weight:700}.card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:20px;margin-bottom:16px}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.card-header h3{margin:0;font-size:16px;font-weight:700}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:16px}.stat-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:20px}.stat-label{color:var(--muted);font-size:12px;text-transform:uppercase}.stat-value{font-size:28px;font-weight:700;margin-top:8px}.stat-sub{color:var(--muted);font-size:13px;margin-top:4px}.chart{display:flex;align-items:flex-end;gap:12px;height:220px;padding:16px 0;border-bottom:1px solid var(--border)}.bar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}.bar-wrap{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}.bar{width:70%;background:var(--primary);border-radius:4px 4px 0 0;min-height:4px;transition:height .3s}.bar-green{background:var(--success)}.bar-label{font-size:11px;color:var(--muted)}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);font-size:14px}.table th{background:#f9fafb;font-weight:600;color:#374151}.empty{text-align:center;color:var(--muted);padding:24px}.btn{padding:8px 14px;border-radius:6px;border:1px solid transparent;font-size:14px;cursor:pointer;font-weight:500}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover)}.btn-secondary{background:#fff;border-color:var(--border);color:#374151}.btn-secondary:hover{background:#f3f4f6}.btn-danger{background:var(--danger);color:#fff}.form-group{margin-bottom:14px}.form-group label{display:block;font-size:13px;margin-bottom:6px;font-weight:500}.form-control{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:14px;font-family:inherit}.form-control:focus{outline:none;border-color:var(--primary)}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1e3a8a,#1d4ed8);padding:20px}.login-card{background:#fff;padding:32px;border-radius:12px;width:100%;max-width:400px;box-shadow:0 10px 30px #0003}.login-title{text-align:center;margin:0 0 24px;font-size:20px;font-weight:700}.login-hint{text-align:center;color:var(--muted);font-size:12px;margin-top:16px}.notif-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--border)}.notif-item:last-child{border-bottom:none}.notif-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--primary)}.notif-body{flex:1}.notif-text{font-size:14px;color:#111827}.notif-time{font-size:12px;color:var(--muted);margin-top:4px}.notif-chev{color:var(--muted)}.error-text{color:var(--danger);font-size:13px;margin-top:8px}.status-badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:500}.status-active{background:#dbeafe;color:#1e40af}.status-pending{background:#fef3c7;color:#92400e}.status-rejected{background:#fee2e2;color:#991b1b}.status-paid_off{background:#dcfce7;color:#166534}