.app-layout{display:flex;min-height:100vh;background:#fff}.sidebar{width:256px;min-width:256px;background:#151a22;color:#c6ccd5;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;overflow-y:auto;border-right:1px solid rgba(255,255,255,.08);color-scheme:dark}.sidebar-header{padding:18px 20px 15px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#3b82f6,#06b6d4) left top/100% 2px no-repeat}.sidebar-controls{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:8px}.sidebar-controls label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#9aa4b2;margin-bottom:1px;display:block}.sidebar-controls select{width:100%;padding:7px 8px;border-radius:5px;font-size:11px;border:1px solid rgba(255,255,255,.08);background:#1d232e;color:#e8ecf1;font-weight:600;cursor:pointer;outline:none;transition:all .15s}.sidebar-controls select:focus{border-color:#3b82f680;box-shadow:0 0 0 2px #3b82f61a}.sidebar-nav{display:flex;flex-direction:column;gap:2px;padding:4px 8px}.nav-section-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#9aa4b2;padding:16px 16px 6px;-webkit-user-select:none;user-select:none}.nav-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:8px;font-size:12.5px;font-weight:400;color:#d7dce3;transition:all .2s ease;border-left:3px solid transparent;text-decoration:none;position:relative}.nav-item:hover{background:#ffffff0d;color:#fff}.nav-item:hover .material-symbols-outlined{color:#c3cad4}.nav-item.active{background:#3b82f61a;color:#fff;font-weight:600;border-left-color:#3b82f6}.nav-item.active .material-symbols-outlined{color:#60a5fa}.nav-item .material-symbols-outlined{font-size:20px;width:22px;text-align:center;color:#9aa4b2;transition:color .2s ease}.sidebar-user-profile{margin-top:auto;padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;background:#ffffff05}.sidebar-user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#06b6d4);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sidebar-user-avatar .material-symbols-outlined{font-size:18px;color:#fff}.sidebar-user-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.sidebar-user-name{font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user-role{font-size:10px;color:#9aa4b2;text-transform:capitalize}.sidebar-user-actions{display:flex;gap:2px;flex-shrink:0}.sidebar-action-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .15s;color:#9aa4b2;text-decoration:none}.sidebar-action-btn:hover{background:#ffffff14;color:#fff}.sidebar-action-btn .material-symbols-outlined{font-size:18px}.main-content{flex:1;margin-left:256px;padding:20px 24px;min-height:100vh;overflow-y:auto;background:#fff}.mobile-topbar,.drawer-backdrop{display:none}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}@media(max-width:768px),(orientation:landscape)and (max-height:500px){.app-layout{flex-direction:column;height:auto;min-height:100vh}.mobile-topbar{display:flex;align-items:center;gap:12px;background:#151a22;color:#c6ccd5;padding:10px 16px;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.08)}.hamburger-btn{background:none;border:none;cursor:pointer;padding:6px;display:flex;flex-direction:column;gap:4px;-webkit-tap-highlight-color:transparent}.hamburger-btn span{display:block;width:20px;height:2px;background:gray;border-radius:1px;transition:all .2s}.sidebar.sidebar-mobile{position:fixed;top:0;left:0;bottom:0;width:280px;min-width:280px;transform:translate(-100%);transition:transform .25s ease;z-index:200;overflow-y:auto}.sidebar.sidebar-mobile.sidebar-open{transform:translate(0)}.drawer-backdrop{display:block;position:fixed;inset:0;background:#0009;z-index:150;-webkit-tap-highlight-color:transparent}.main-content.main-content-mobile{margin-left:0;padding:14px 12px;min-height:auto;overflow:visible}.nav-item{padding:12px 14px;font-size:14px;min-height:44px}.nav-item .material-symbols-outlined{font-size:20px}.sidebar-action-btn{padding:8px}.sidebar-action-btn .material-symbols-outlined{font-size:20px}}@media(orientation:landscape)and (max-height:500px){.mobile-topbar{padding:4px 12px}.main-content.main-content-mobile{padding:8px 12px}.sidebar.sidebar-mobile{width:240px;min-width:240px}.nav-item{padding:8px 14px;font-size:13px;min-height:36px}.sidebar-action-btn{padding:6px}}.sidebar-impersonation{margin-top:auto;padding:8px 16px;border-top:1px solid rgba(255,255,255,.08)}.sidebar-impersonation label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#9aa4b2;display:block}.sidebar-impersonation select{width:100%;margin-top:4px;padding:6px 8px;border-radius:5px;font-size:11px;border:1px solid rgba(255,255,255,.08);background:#1d232e;color:#e8ecf1;font-family:inherit;font-weight:600;cursor:pointer;outline:none;transition:all .15s}.sidebar-impersonation select.impersonating{background:var(--warning-subtle);color:var(--warning);border-color:var(--warning)}.sidebar-impersonation select:focus{border-color:#3b82f680;box-shadow:0 0 0 2px #3b82f61a}.sidebar-user-profile.impersonating{background:var(--warning-subtle);box-shadow:inset 3px 0 0 var(--warning)}.sidebar-user-profile.impersonating .sidebar-user-avatar{background:linear-gradient(135deg,var(--warning) 0%,#d97706 100%)}.sidebar-user-profile.impersonating .sidebar-user-role{color:var(--warning);font-weight:600}.impersonation-banner{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:9px 14px;border:1px solid var(--warning);border-radius:6px;background:var(--warning-subtle);color:var(--text-body);font-size:12px;line-height:1.4}.impersonation-banner .material-symbols-outlined{font-size:18px;color:var(--warning);flex-shrink:0}.impersonation-banner-text{flex:1;min-width:0}.impersonation-banner button{flex-shrink:0;padding:5px 12px;border:1px solid var(--warning);border-radius:5px;background:transparent;color:#b45309;font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}.impersonation-banner button:hover{background:var(--warning);color:#fff}@media(max-width:900px){.impersonation-banner{flex-wrap:wrap;row-gap:8px}.impersonation-banner button{width:100%}}:root{--brand-blue: #3b82f6;--brand-teal: #06b6d4;--brand-blue-light: #60a5fa;--brand-gradient: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);--brand-hairline: linear-gradient(90deg, #3b82f6, #06b6d4);--black: #0a0a0a;--white: #ffffff;--gray-900: #1a1a1a;--gray-700: #555555;--gray-600: #666666;--gray-500: #888888;--gray-400: #999999;--gray-300: #cccccc;--gray-200: #e0e0e0;--gray-100: #f0f0f0;--gray-50: #f7f7f7;--ink-btn: #232a35;--ink-btn-hover: #2e3644;--ink-th: #1f2530;--ink-th-hover: #2a323f;--ink-th-text: #edf0f4;--ink-th-border-b: #141821;--ink-th-border-r: #2a323f;--sidebar-bg: #151a22;--sidebar-border: rgba(255, 255, 255, .08);--sidebar-control-bg: #1d232e;--sidebar-nav-text: #d7dce3;--sidebar-nav-icon: #9aa4b2;--sidebar-text-hover: #ffffff;--sidebar-active-bg: rgba(59, 130, 246, .1);--sidebar-active-border: var(--brand-blue);--sidebar-active-icon: var(--brand-blue-light);--sidebar-hover-bg: rgba(255, 255, 255, .05);--success: #059669;--success-dark: #047857;--success-text: #15803d;--success-bg: #d1fae5;--success-fg: #065f46;--danger: #dc2626;--danger-dark: #b91c1c;--danger-bg: #fee2e2;--danger-fg: #991b1b;--warning: #f59e0b;--info: var(--ink-btn);--brand-blue-subtle: rgba(59, 130, 246, .08);--success-subtle: rgba(5, 150, 105, .08);--danger-subtle: rgba(220, 38, 38, .08);--warning-subtle: rgba(245, 158, 11, .08);--text-body: var(--black);--text-table: var(--gray-900);--text-secondary: var(--gray-700);--text-meta: var(--gray-600);--text-placeholder: var(--gray-500);--text-disabled: var(--gray-400);--surface-page: var(--white);--surface-card: var(--white);--surface-row-even: var(--gray-50);--surface-row-hover: var(--gray-100);--surface-row-pending: #fef9e7;--border-card: var(--gray-200);--border-cell: var(--gray-200);--border-cell-inner: var(--gray-100);--border-table-wrap: var(--gray-300);--border-input: #d1d5db;--dark-bg: #0a0a0f;--dark-bg-alt: #0e0e14;--dark-surface: #12121a;--dark-surface-elevated: #1a1a24;--dark-text: #f0ede8;--dark-text-secondary: #9ca3af;--dark-text-muted: #6b7280;--dark-border-glass: rgba(255, 255, 255, .06);--role-superadmin-bg: #fff3e0;--role-superadmin-fg: #e65100;--role-accounting-bg: #e8f5e9;--role-accounting-fg: #2e7d32;--role-reporting-bg: #e3f2fd;--role-reporting-fg: #1565c0;--chart-1: var(--black);--chart-2: var(--gray-700);--chart-3: #0891b2;--chart-4: var(--success);--chart-5: #d97706;--chart-6: var(--danger);--chart-7: #db2777;--chart-8: #4f46e5;--chart-9: #84cc16;--chart-10: #f97316;--font-ui: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;--font-mono: "Cascadia Code", Consolas, monospace;--font-icons: "Material Symbols Outlined";--text-base: 13px;--text-page-title: 20px;--text-description: 12px;--text-th: 11px;--text-td: 12px;--text-label: 9px;--text-money: 11.5px;--text-mono: 11px;--text-badge: 10px;--text-button: 12px;--text-button-sm: 11px;--text-nav: 12.5px;--text-topbar: 14px;--brand-letter-spacing: -.02em;--hero-letter-spacing: -.033em;--label-letter-spacing: .5px;--th-letter-spacing: .03em;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--gap-form: 8px;--pad-card: 16px;--pad-formcard: 14px;--pad-content: 20px 24px;--pad-cell: 5px 10px;--pad-th: 7px 10px;--pad-btn: 6px 14px;--pad-btn-sm: 3px 10px;--gap-card-grid: 12px;--margin-section: 16px;--sidebar-width: 256px;--radius-input: 6px;--radius-btn: 6px;--radius-card: 8px;--radius-badge: 10px;--radius-pill: 16px;--radius-modal: 12px;--radius-modal-mobile: 16px 16px 0 0;--radius-table-wrap: 4px;--radius-auth-input: 10px;--radius-auth-card: 16px;--shadow-card: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);--shadow-dropdown: 0 8px 30px rgba(0, 0, 0, .18);--shadow-modal: 0 20px 60px rgba(0, 0, 0, .25);--shadow-toast: 0 4px 16px rgba(0, 0, 0, .15);--shadow-glass: inset 0 1px 1px rgba(255, 255, 255, .1), 0 4px 24px rgba(0, 0, 0, .3);--focus-ring: 0 0 0 3px rgba(0, 0, 0, .08);--focus-ring-sidebar: 0 0 0 2px rgba(59, 130, 246, .1);--transition-fast: all .15s ease;--transition-nav: all .2s ease;--overlay-modal: rgba(0, 0, 0, .45)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#fff;color:#0a0a0a;font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}#root{height:100vh;display:flex;flex-direction:column}a{color:inherit;text-decoration:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:silver;border-radius:3px}select,input[type=text],input[type=number],input[type=date]{padding:6px 10px;border:1px solid var(--border-card);border-radius:6px;font-size:12px;outline:none;transition:border .15s,box-shadow .15s;font-family:inherit;background:#fff;color:#0a0a0a}select:focus,input:focus{border-color:#0a0a0a;box-shadow:0 0 0 3px #00000014}button{font-family:inherit}.page-tabs{display:flex;gap:0;border-bottom:2px solid var(--border-card);margin-bottom:24px;flex-shrink:0}.page-tab{display:flex;align-items:center;gap:6px;padding:10px 20px;border:none;background:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-meta);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s ease;font-family:inherit}.page-tab:hover{color:var(--text-body)}.page-tab.active{color:var(--text-body);border-bottom-color:var(--brand-blue)}.modal-dialog{border:none;margin:auto;padding:24px;background:var(--surface-card);color:var(--text-body);border-radius:var(--radius-modal);box-shadow:var(--shadow-modal);width:92%;max-width:520px;max-height:90vh;overflow-y:auto}.modal-dialog::backdrop{background:var(--overlay-modal);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.modal-title{font-size:14px;font-weight:600;color:var(--text-body)}.modal-close{background:none;border:none;font-size:20px;line-height:1;padding:2px 6px;cursor:pointer;color:var(--text-meta);border-radius:4px}.modal-close:hover{color:var(--text-body)}.row-actions-cell{display:inline-flex;align-items:center;gap:2px}.row-action{background:none;border:none;cursor:pointer;padding:3px;border-radius:var(--radius-btn);display:inline-flex;align-items:center;justify-content:center;line-height:0;color:var(--text-meta);transition:var(--transition-fast)}.row-action .material-symbols-outlined{font-size:18px}.row-action:hover{background:var(--gray-100)}.row-action:focus-visible{outline:2px solid var(--brand-blue);outline-offset:1px}.row-action:disabled{opacity:.4;cursor:default}.row-action:disabled:hover{background:none}.row-action-muted{color:var(--text-disabled)}.row-action-info{color:var(--brand-blue)}.row-action-success{color:var(--success)}.row-action-success:hover{background:var(--success-bg)}.row-action-danger{color:var(--danger)}.row-action-danger:hover{background:var(--danger-bg)}@media(max-width:768px),(orientation:landscape)and (max-height:500px){body{overflow:auto;font-size:13px}#root{height:auto;min-height:100vh}select,input[type=text],input[type=number],input[type=date]{min-height:40px;font-size:14px;padding:8px 12px}.modal-dialog{margin:auto auto 0;border-radius:var(--radius-modal-mobile);max-height:85vh;width:100%;max-width:100%;padding:20px 16px;padding-bottom:max(20px,env(safe-area-inset-bottom))}.page-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:16px}.page-tab{padding:8px 14px;font-size:12px;white-space:nowrap}}@media(orientation:landscape)and (max-height:500px){select,input[type=text],input[type=number],input[type=date]{min-height:34px;font-size:12px}}