@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--font-family: "Inter", "Segoe UI", "Roboto", Arial, sans-serif;--font-size-base: 14px;--font-size-sm: 13px;--font-size-xs: 12px;--font-size-lg: 15px;--font-size-xl: 22px;--font-size-kpi: 28px;--bg-primary: #F8FAFC;--bg-sidebar: #0F172A;--bg-sidebar-hover: #1E293B;--bg-sidebar-active: #2563EB;--bg-card: #FFFFFF;--bg-input: #FFFFFF;--text-primary: #0F172A;--text-secondary: #64748B;--text-white: #FFFFFF;--text-sidebar: #94A3B8;--border-color: #E2E8F0;--border-radius-input: 8px;--border-radius-button: 8px;--border-radius-card: 12px;--border-radius-table: 12px;--color-primary: #2563EB;--color-primary-hover: #1D4ED8;--color-success: #16A34A;--color-danger: #DC2626;--color-warning: #F59E0B;--color-purple: #9333EA;--shadow-card: 0 1px 2px rgba(0,0,0,.05);--shadow-hover: 0 4px 12px rgba(0,0,0,.08);--sidebar-width: 240px;--sidebar-collapsed: 72px;--header-height: 72px;--content-padding: 24px;--grid-gap: 24px}*{margin:0;padding:0;box-sizing:border-box}html,body,#app{height:100%;width:100%}body{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--text-primary);background-color:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}::selection{background:#dbeafe;color:#1d4ed8}a{color:inherit;text-decoration:none}.page-header{margin-bottom:24px}.page-header h1{font-size:22px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px}.page-header p{font-size:14px;color:var(--text-secondary);margin-top:2px}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-card);padding:20px;box-shadow:var(--shadow-card)}.status-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:600;line-height:1.5}.status-badge.active{background:#dcfce7;color:#15803d}.status-badge.suspended{background:#f1f5f9;color:#64748b}.status-badge.pending{background:#fef3c7;color:#b45309}.status-badge.overdue{background:#fee2e2;color:#b91c1c}.status-badge.approved{background:#dcfce7;color:#15803d}.status-badge.rejected,.status-badge.cancelled{background:#fee2e2;color:#b91c1c}.status-badge.draft{background:#f1f5f9;color:#64748b}.status-badge.process{background:#dbeafe;color:#1d4ed8}.status-badge.completed{background:#dcfce7;color:#15803d}.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px}.filter-bar input,.filter-bar select{padding:8px 12px;font-size:13px;border:1px solid var(--border-color);border-radius:var(--border-radius-input);background:var(--bg-input);color:var(--text-primary);outline:none}.filter-bar input:focus,.filter-bar select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #2563eb1a}.filter-bar input::placeholder{color:#94a3b8}.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--grid-gap);margin-bottom:24px}.chart-grid{display:grid;grid-template-columns:2fr 1fr;gap:var(--grid-gap);margin-bottom:24px}.tables-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap);margin-bottom:24px}.bottom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}@media (max-width: 1400px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.chart-grid,.tables-grid{grid-template-columns:1fr}.bottom-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 1024px){:root{--header-height: 56px;--content-padding: 16px;--grid-gap: 16px}.kpi-grid{grid-template-columns:repeat(2,1fr)}.bottom-grid{grid-template-columns:1fr}.chart-container{min-height:240px}.enterprise-table{font-size:12px}.enterprise-table thead th,.enterprise-table tbody td{padding:10px 12px}.page-header h1{font-size:18px}.page-header{margin-bottom:16px}.filter-bar{gap:8px}.filter-bar input,.filter-bar select{font-size:12px;padding:6px 10px}.card{padding:16px}.kpi-icon{width:36px;height:36px}}@media (max-width: 640px){:root{--grid-gap: 12px}.kpi-grid{grid-template-columns:repeat(2,1fr);gap:12px}.filter-bar{flex-direction:column;align-items:stretch}.filter-bar input,.filter-bar select{width:100%}.btn{padding:6px 12px;font-size:12px}.pagination{flex-direction:column;gap:8px;align-items:center}.card{padding:12px;border-radius:8px}.section-title{font-size:14px}.tab-bar{width:100%}.tab-item{flex:1;text-align:center;font-size:12px;padding:6px 12px}.enterprise-table thead th,.enterprise-table tbody td{padding:8px 10px;white-space:nowrap}.page-header h1{font-size:16px}.page-header p{font-size:12px}}@media (max-width: 480px){:root{--header-height: 48px;--content-padding: 12px}.kpi-grid{grid-template-columns:1fr;gap:10px}.kpi-value{font-size:22px}.page-header h1{font-size:15px}.btn-sm{font-size:11px;padding:4px 8px}}.kpi-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center}.kpi-icon.blue{background:#dbeafe;color:var(--color-primary)}.kpi-icon.green{background:#dcfce7;color:var(--color-success)}.kpi-icon.red{background:#fee2e2;color:var(--color-danger)}.kpi-icon.amber{background:#fef3c7;color:var(--color-warning)}.kpi-icon.purple{background:#f3e8ff;color:var(--color-purple)}.chart-container{width:100%;min-height:320px}.enterprise-table{width:100%;border-collapse:collapse;font-size:13px}.enterprise-table thead th{background:#f8fafc;padding:12px 16px;text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);border-bottom:1px solid var(--border-color);white-space:nowrap}.enterprise-table tbody td{padding:12px 16px;border-bottom:1px solid #F1F5F9;color:var(--text-primary)}.enterprise-table tbody tr:hover td{background:#f1f5f9}.enterprise-table tbody tr:last-child td{border-bottom:none}.enterprise-table .text-right{text-align:right}.enterprise-table .text-center{text-align:center}.enterprise-table .font-mono{font-family:JetBrains Mono,monospace;font-size:12px}.enterprise-table .font-medium{font-weight:600}.enterprise-table .text-secondary{color:var(--text-secondary)}.enterprise-table .text-success{color:var(--color-success)}.enterprise-table .text-danger{color:var(--color-danger)}.enterprise-table .text-warning{color:var(--color-warning)}.pagination{display:flex;align-items:center;justify-content:space-between;padding-top:16px;margin-top:16px;border-top:1px solid var(--border-color)}.pagination span{font-size:13px;color:var(--text-secondary)}.pagination-btns{display:flex;gap:4px}.pagination-btns button{padding:6px 12px;font-size:13px;font-weight:500;border:1px solid var(--border-color);border-radius:6px;background:#fff;color:var(--text-primary);cursor:pointer}.pagination-btns button:hover{border-color:var(--color-primary);color:var(--color-primary)}.pagination-btns button.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.pagination-btns button:disabled{opacity:.4;cursor:not-allowed}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:600;border-radius:var(--border-radius-button);border:1px solid var(--border-color);cursor:pointer;background:#fff;color:var(--text-primary);line-height:1}.btn:hover{border-color:#cbd5e1;background:#f8fafc}.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.btn-primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.btn-sm{padding:6px 12px;font-size:12px}.btn-xs{padding:4px 8px;font-size:11px}.btn-text{border:none;background:transparent;color:var(--text-secondary)}.btn-text:hover{background:#f1f5f9;color:var(--text-primary)}.btn-danger{color:var(--color-danger)}.btn-danger:hover{background:#fee2e2;border-color:#fecaca}.input-group{position:relative}.input-group .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#94a3b8;pointer-events:none}.input-group input{width:100%;padding:8px 12px 8px 36px;font-size:13px;border:1px solid var(--border-color);border-radius:var(--border-radius-input);background:var(--bg-input);color:var(--text-primary);outline:none}.input-group input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #2563eb1a}.input-group input::placeholder{color:#94a3b8}.section-title{font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:16px}.tab-bar{display:flex;gap:4px;margin-bottom:20px;padding:4px;background:#f1f5f9;border-radius:10px;width:fit-content}.tab-item{padding:6px 16px;font-size:13px;font-weight:500;border-radius:8px;color:var(--text-secondary);cursor:pointer;border:none;background:transparent}.tab-item.active{background:#fff;color:var(--text-primary);box-shadow:0 1px 3px #00000014;font-weight:600}.tab-item:hover:not(.active){color:var(--text-primary)}.table-wrapper{overflow-x:auto;margin:0 -1px}.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;background:#0f172a66}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:520px;max-width:92vw;max-height:85vh;overflow-y:auto;background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000001f;z-index:2001}@media (max-width: 640px){.modal{width:96vw!important;max-height:90vh;border-radius:12px;top:50%;left:50%;transform:translate(-50%,-50%)}.modal .form-grid{grid-template-columns:1fr!important}}@media (max-width: 480px){.modal{padding:0;max-height:94vh}.modal-header{padding:16px 16px 0}.modal-body{padding:12px 16px 16px}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0}.modal-header h3{font-size:16px;font-weight:700;color:var(--text-primary)}.modal-close{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:6px}.modal-close:hover{background:#f1f5f9}.modal-body{padding:16px 24px 24px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid .field{display:flex;flex-direction:column;gap:6px;margin-bottom:0}.form-grid .field label{font-size:12px;font-weight:600;color:var(--text-primary)}.form-grid .field input,.form-grid .field select{padding:8px 10px;font-size:13px;border:1px solid var(--border-color);border-radius:8px;outline:none;font-family:inherit;background:#fff}.form-grid .field input:focus,.form-grid .field select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #2563eb1a}.form-error{color:var(--color-danger);font-size:13px;margin-top:8px;grid-column:1/-1}.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;grid-column:1/-1}