:root{--bg:#f2f7f3;--fg:#1f2d24;--muted:#6f7f75;--card:#f8fbf8;--accent:#2f9a59;--accent-strong:#2d9356;--border:#cfdcd3;--border-strong:#c4d2c8;--surface:#eaf3ec;--surface-2:#d8e4dc;--surface-3:#deece3;--shadow:rgba(21, 45, 31, .18);--warn:#f4a261;--primary:var(--accent);--text:var(--fg);--row-alt:var(--surface);--color-danger:#c0392b;--color-warning:#b8860b}:root[data-theme=dark]{--bg:#0f1113;--fg:#e6e8ea;--muted:#9aa3a8;--card:#171b1f;--accent:#6ac48f;--accent-strong:#4b9b6f;--border:#2a3238;--border-strong:#343e46;--surface:#1d2329;--surface-2:#222a31;--surface-3:#28313a;--shadow:rgba(0, 0, 0, .5);--warn:#f4a261;--primary:var(--accent);--text:var(--fg);--row-alt:var(--surface-2);--color-danger:#ff8a8a;--color-warning:#ffd700}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg)}a{color:var(--accent);text-decoration:none}.app-shell{display:flex;min-height:100%}.app-shell.auth-only{display:block}.main{display:flex;flex-direction:column;flex:1;min-width:0}.sidebar{display:flex;flex-direction:column;gap:12px;width:240px;padding:16px 14px;background:var(--card);border-right:1px solid var(--border);flex-shrink:0;position:sticky;top:0;height:100vh;overflow:hidden}.sidebar.collapsed{width:72px;padding:14px 10px}.sidebar .brand{display:flex;align-items:center;gap:10px}.sidebar .brand-mark{font-size:20px}.sidebar .brand-text{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}.sidebar .nav-links{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;overflow:auto}.sidebar .nav-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--fg);position:relative}.sidebar .nav-alert{width:8px;height:8px;border-radius:50%;background:var(--warn);margin-left:auto;box-shadow:0 0 0 2px var(--card)}.sidebar.collapsed .nav-alert{position:absolute;right:10px;top:8px;margin-left:0}.sidebar .nav-link:hover{background:var(--surface-3)}.sidebar .link-icon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);font-size:14px}.sidebar .sidebar-toggle{align-self:flex-start;padding:6px 10px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border-strong)}.sidebar .sidebar-footer{margin-top:auto;display:flex;flex-direction:column;gap:10px}.sidebar .user-email{font-size:12px;color:var(--muted);word-break:break-word}.user-menu{position:relative;display:flex;flex-direction:column;gap:8px}.user-menu-button{background:transparent;border:none;padding:0;text-align:left;color:var(--fg);cursor:pointer}.user-menu-button:hover{color:var(--accent)}.user-actions{display:flex;align-items:center;gap:8px}.user-logout{align-self:center}.theme-toggle{width:28px;height:28px;padding:0;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--fg)}.theme-toggle:hover{background:var(--surface-3)}.theme-icon{width:16px;height:16px;display:block;color:var(--fg)}.user-popover{position:absolute;left:0;bottom:100%;margin-bottom:10px;width:220px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px;box-shadow:0 12px 24px var(--shadow);z-index:20}.user-popover-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}.user-popover-body{font-size:13px;color:var(--fg)}.sidebar.collapsed .brand-text,.sidebar.collapsed .link-label,.sidebar.collapsed .user-email{display:none}.sidebar.collapsed .nav-link{justify-content:center}.sidebar a.router-link-active{background:var(--surface-2)}.container{width:100%;max-width:none;margin:0;padding:16px}.app-footer{text-align:center;padding:20px;color:var(--muted)}.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px;width:100%}input,button,select,textarea{background:var(--surface);color:var(--fg);border:1px solid var(--border-strong);border-radius:8px;padding:10px}input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{cursor:pointer;background:var(--surface-2)}button.primary{background:var(--accent);color:#fff;border:none}ul.reset{list-style:none;padding:0;margin:0}.row{display:flex;gap:10px}.grow{flex:1}:root[data-theme=dark] table th,:root[data-theme=dark] table td{border-color:var(--border)!important}:root[data-theme=dark] table th{background:var(--surface-2)!important;color:var(--muted)!important}:root[data-theme=dark] .table-row:hover{background:#ffffff0a!important}:root[data-theme=dark] .th{background:var(--surface-2)!important;border-bottom-color:var(--border)!important}:root[data-theme=dark] .cell{border-bottom-color:var(--border)!important}:root[data-theme=dark] .first-col,:root[data-theme=dark] .month-col{background:var(--surface)!important;border-color:var(--border)!important}:root[data-theme=dark] .month-header{background:var(--accent-strong)!important;color:#f6fff8!important}:root[data-theme=dark] .month-col.flagged,:root[data-theme=dark] .month-header.flagged,:root[data-theme=dark] .foot-cell.flagged{background:#f6efc7!important;color:#1f2d24!important;border-color:#d7c06a!important}:root[data-theme=dark] .highlight{background:var(--accent-strong)!important;color:#f6fff8!important}:root[data-theme=dark] .section,:root[data-theme=dark] .chart-card,:root[data-theme=dark] .modal-content{border-color:var(--border)!important;background:var(--card)!important}:root[data-theme=dark] .input,:root[data-theme=dark] .select,:root[data-theme=dark] .textarea,:root[data-theme=dark] .compact input,:root[data-theme=dark] .compact select{background:var(--surface)!important;border-color:var(--border-strong)!important;color:var(--fg)!important}:root[data-theme=dark] .orders-table{background:var(--card)!important}:root[data-theme=dark] .orders-table th,:root[data-theme=dark] .orders-table td{border-color:var(--border)!important}:root[data-theme=dark] .orders-table th{background:var(--surface-2)!important;color:var(--muted)!important}:root[data-theme=dark] .items-table{background:var(--card)!important;border-color:var(--border)!important}:root[data-theme=dark] .items-table th,:root[data-theme=dark] .items-table td{border-color:var(--border)!important}:root[data-theme=dark] .items-table th{background:var(--surface-2)!important;color:var(--muted)!important}:root[data-theme=dark] table,:root[data-theme=dark] .table,:root[data-theme=dark] .orders-table,:root[data-theme=dark] .products-table,:root[data-theme=dark] .suppliers-table,:root[data-theme=dark] .items-table,:root[data-theme=dark] .mine-orders-table{border-color:var(--border)!important}:root[data-theme=dark] table th,:root[data-theme=dark] table td,:root[data-theme=dark] .table th,:root[data-theme=dark] .table td,:root[data-theme=dark] .orders-table th,:root[data-theme=dark] .orders-table td,:root[data-theme=dark] .products-table th,:root[data-theme=dark] .products-table td,:root[data-theme=dark] .suppliers-table th,:root[data-theme=dark] .suppliers-table td,:root[data-theme=dark] .items-table th,:root[data-theme=dark] .items-table td,:root[data-theme=dark] .mine-orders-table th,:root[data-theme=dark] .mine-orders-table td,:root[data-theme=dark] .cell{border-color:var(--border)!important}:root[data-theme=dark] .table-wrap,:root[data-theme=dark] .table-container,:root[data-theme=dark] .table-wrapper,:root[data-theme=dark] .items-table-wrap,:root[data-theme=dark] .orders-table,:root[data-theme=dark] .products-table,:root[data-theme=dark] .suppliers-table,:root[data-theme=dark] .mine-orders-table,:root[data-theme=dark] .items-table{border-color:var(--border)!important}:root[data-theme=dark] .status-badge.status-ordered,:root[data-theme=dark] .status-badge.payment-offset,:root[data-theme=dark] .category-badge.category-product,:root[data-theme=dark] .btn-status-change,:root[data-theme=dark] .btn-edit,:root[data-theme=dark] .doc-type,:root[data-theme=dark] .expand-btn,:root[data-theme=dark] .summary-total,:root[data-theme=dark] .summary-row strong,:root[data-theme=dark] .info-badge{color:#2f9a59!important}:root[data-theme=dark] .status-badge.status-confirmed,:root[data-theme=dark] .status-badge.status-delivered,:root[data-theme=dark] .status-badge.payment-paid,:root[data-theme=dark] .payment-badge.payment-paid,:root[data-theme=dark] .status-badge[data-status=added],:root[data-theme=dark] .status-badge[data-status=confirmed],:root[data-theme=dark] .status-badge.status-active,:root[data-theme=dark] .message-success,:root[data-theme=dark] .helper-success,:root[data-theme=dark] .btn-success{color:#4caf50!important}:root[data-theme=dark] .status-badge.status-pending_confirmation,:root[data-theme=dark] .status-badge.payment-pending,:root[data-theme=dark] .status-badge.payment-payment_pending,:root[data-theme=dark] .payment-badge.payment-pending,:root[data-theme=dark] .payment-badge.payment-payment_pending,:root[data-theme=dark] .payment-badge.payment-invoice_pending,:root[data-theme=dark] .status-badge[data-status=pending],:root[data-theme=dark] .helper-loading{color:gold!important}:root[data-theme=dark] .status-badge.status-requires_change,:root[data-theme=dark] .category-badge.category-service,:root[data-theme=dark] .btn-warning{color:#ff9800!important}:root[data-theme=dark] .status-badge.status-cancelled,:root[data-theme=dark] .status-badge.payment-refund_pending,:root[data-theme=dark] .status-badge.payment-refunded,:root[data-theme=dark] .payment-badge.payment-cancelled,:root[data-theme=dark] .payment-badge.payment-refunded,:root[data-theme=dark] .payment-badge.payment-partial_refund,:root[data-theme=dark] .status-badge[data-status=skip],:root[data-theme=dark] .status-badge.status-inactive,:root[data-theme=dark] .inactive-badge,:root[data-theme=dark] .message-error,:root[data-theme=dark] .helper-error,:root[data-theme=dark] .error,:root[data-theme=dark] .err,:root[data-theme=dark] .required,:root[data-theme=dark] .btn-cancel,:root[data-theme=dark] .status-badge[data-status=cancelled]{color:#ff8a8a!important}:root[data-theme=dark] .btn-delete{color:#ff6363!important}:root[data-theme=dark] .btn-danger,:root[data-theme=dark] button.danger{color:#7a2f2f!important}:root[data-theme=dark] .danger-text{color:#d14b4b!important}:root[data-theme=dark] .nds-badge.nds-0{color:#6f7f75!important}:root[data-theme=dark] .nds-badge.nds-16{color:#6c5ce7!important}:root[data-theme=dark] .action-btn.status-approved{color:#24513a!important}:root[data-theme=dark] .action-btn.status-rejected{color:#6a2d26!important}:root[data-theme=dark] .action-btn.status-pending{color:#6a5a00!important}:root[data-theme=dark] .mine-table .status-badge[data-status=pending]{background:#ffd70033!important;color:gold!important;border:1px solid rgba(255,215,0,.3)!important}:root[data-theme=dark] .mine-table .status-badge[data-status=confirmed]{background:#4caf5033!important;color:#4caf50!important;border:1px solid rgba(76,175,80,.3)!important}:root[data-theme=dark] .mine-table .status-badge[data-status=cancelled]{background:#ff636333!important;color:#ff8a8a!important;border:1px solid rgba(255,99,99,.3)!important}:root[data-theme=dark] .director-page .legend-mark.approve,:root[data-theme=dark] .director-page .action-btn.approve{background:#63d17c!important;color:#1f2d24!important;border:none!important}:root[data-theme=dark] .director-page .legend-mark.edit,:root[data-theme=dark] .director-page .action-btn.edit{background:#f4e04d!important;color:#1f2d24!important;border:none!important}:root[data-theme=dark] .director-page .legend-mark.reject,:root[data-theme=dark] .director-page .action-btn.reject{background:#f06c5a!important;color:#1f2d24!important;border:none!important}:root[data-theme=dark] .director-page .action-btn.status-approved{background:#cfead8!important;color:#1f2d24!important;border:none!important}:root[data-theme=dark] .director-page .action-btn.status-rejected{background:#f5d1cc!important;color:#1f2d24!important;border:none!important}:root[data-theme=dark] .director-page .action-btn.status-pending{background:#f6efc7!important;color:#1f2d24!important;border:none!important}
