:root{
  --bg:#eef2fb;--surface:rgba(255,255,255,.78);--surface-strong:#fff;--ink:#17213d;--muted:#68748e;--line:#dfe6f5;
  --primary:#5b62f4;--primary-dark:#3945c7;--indigo:#5365df;--teal:#0f8f7b;--success:#11835f;--danger:#b82d42;--danger-deep:#781522;--warning:#a95608;--warning-deep:#7b3b05;
  --sidebar:#101936;--sidebar-2:#1c2b59;--radius:18px;--radius-sm:12px;--shadow:0 10px 30px rgba(39,54,112,.09);--shadow-hover:0 18px 42px rgba(33,47,105,.15);--transition:180ms cubic-bezier(.2,.75,.25,1);
}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-height:100vh;color:var(--ink);font:13px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(circle at 94% 0,#dce6ff 0,transparent 29rem),radial-gradient(circle at 8% 92%,#dff8f1 0,transparent 30rem),linear-gradient(135deg,#f8faff,#eef3ff 53%,#f8fbff);overflow-x:hidden}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}
.sidebar{position:fixed;inset:0 auto 0 0;z-index:30;width:244px;padding:16px 11px;display:flex;flex-direction:column;overflow:hidden;color:#e6ecff;background:linear-gradient(160deg,var(--sidebar),#172550 56%,var(--sidebar-2));box-shadow:13px 0 38px rgba(8,16,45,.19)}.sidebar:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,#fff0,rgba(120,139,255,.08) 48%,#43c6aa08);pointer-events:none}.sidebar-glow{position:absolute;top:-112px;right:-92px;width:240px;height:240px;border-radius:50%;background:#7180ff60;filter:blur(24px);pointer-events:none}.brand{position:relative;display:flex;align-items:center;gap:10px;padding:6px 9px 20px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid #ffffff2d;border-radius:13px;color:#fff;font-size:18px;font-weight:900;background:linear-gradient(135deg,#8191ff,#5862f3 58%,#19af93);box-shadow:0 9px 20px #080e3985}.brand strong{display:block;font-size:18px;letter-spacing:-.04em}.brand small,.user-card small{display:block;margin-top:1px;color:#aebbe0;font-size:10px}.sidebar-scroll{position:relative;flex:1;overflow-y:auto;padding:2px 2px 14px}.sidebar-scroll::-webkit-scrollbar{width:4px}.sidebar-scroll::-webkit-scrollbar-thumb{border-radius:9px;background:#ffffff33}.nav-group{margin:11px 0 17px}.nav-group-title{margin:0 0 6px;padding:0 10px;color:#8796bf;font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.nav-item{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:39px;margin:3px 0;padding:8px 10px;border:1px solid transparent;border-radius:11px;color:#c7d2ef;font-size:12px;font-weight:750;transition:transform var(--transition),background var(--transition),box-shadow var(--transition),color var(--transition)}.nav-item:before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 4px 4px 0;background:#90a0ff;opacity:0}.nav-item:hover{color:#fff;transform:translateX(2px);background:#ffffff10;box-shadow:inset 0 1px #ffffff0d}.nav-item.active{color:#fff;border-color:#ffffff12;background:linear-gradient(100deg,#7688ff3d,#31c3a622);box-shadow:inset 0 1px #ffffff1a,0 6px 17px #070d2c53}.nav-item.active:before{opacity:1}.nav-item-main{display:flex;align-items:center;gap:9px}.nav-icon{width:20px;text-align:center;font-size:15px}.nav-badge{display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;color:#fff;font-size:9px;background:linear-gradient(135deg,#f15f72,#bc2945);box-shadow:0 4px 10px #b927445c}.sidebar-footer{position:relative;padding:10px 5px 2px;border-top:1px solid #ffffff15}.user-card{display:flex;align-items:center;gap:9px;padding:9px;border-radius:12px;background:#ffffff0b}.user-card strong{display:block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.user-avatar{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:10px;color:#fff;font-weight:900;background:linear-gradient(135deg,#f3bb71,#e76b5d)}.logout-link{display:block;padding:9px;color:#aebbe0;font-size:11px;font-weight:750}.logout-link:hover{color:#fff}
main{min-height:100vh;max-width:1700px;margin-left:244px;padding:20px 26px 42px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:63px;margin:0 0 18px;padding:8px 13px 8px 11px;border:1px solid #dce4fa;border-radius:0 0 16px 16px;background:linear-gradient(115deg,rgba(239,244,255,.93),rgba(248,244,255,.9) 52%,rgba(234,251,247,.9));box-shadow:0 8px 20px rgba(50,70,142,.08);backdrop-filter:blur(15px)}.topbar-left{display:flex;align-items:center;gap:11px}.breadcrumb{margin:0 0 2px;color:var(--muted);font-size:10px;font-weight:750}.breadcrumb span{padding:0 4px;color:#9da9c4}.topbar h1{margin:0;font-size:23px;line-height:1.1;letter-spacing:-.045em}.page-title-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;font-size:17px;background:linear-gradient(135deg,#6275f4,#0e937e);box-shadow:0 8px 17px #4567d54d}.topbar-actions{display:flex;align-items:center;gap:8px}.header-date-chip{padding:7px 10px;border:1px solid #edf0f8;border-radius:10px;background:#ffffffb8;color:#51607f;font-size:10px;font-weight:800}.mobile-menu{display:none}
.button,button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:33px;padding:7px 11px;border:1px solid #dfe5f2;border-radius:10px;color:#465472;background:#fff;font-size:11px;font-weight:800;cursor:pointer;box-shadow:0 3px 9px #2333630c;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition),filter var(--transition)}.button:hover,button:hover{transform:translateY(-2px);border-color:#c7d2ff;box-shadow:0 9px 18px #263b7020}.button:active,button:active{transform:translateY(0);filter:brightness(.96)}.button.primary,button.primary{border-color:transparent;color:#fff;background:linear-gradient(135deg,#5964f3,#755bf3);box-shadow:0 8px 17px #5b63f542}.button.primary:hover,button.primary:hover{box-shadow:0 12px 25px #5b63f55c}.button.secondary{background:#f7f9ff}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.kpis article{position:relative;min-height:91px;padding:13px 15px;overflow:hidden;border:1px solid #ffffff9c;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);backdrop-filter:blur(15px);transition:transform var(--transition),box-shadow var(--transition)}.kpis article:after{content:"";position:absolute;top:-48px;right:-24px;width:108px;height:108px;border-radius:50%;background:#ffffff16}.kpis article:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}.kpis article:nth-child(1){background:linear-gradient(135deg,#153c72,#2865ae)}.kpis article:nth-child(2){background:linear-gradient(135deg,#832637,#bd4659)}.kpis article:nth-child(3){background:linear-gradient(135deg,#155f54,#198e7a)}.kpis article:nth-child(4){background:linear-gradient(135deg,#81500b,#b97914)}.kpis span,.kpis small,.kpis strong{position:relative;z-index:1;color:#fff}.kpis span,.kpis small{font-size:10px;font-weight:800}.kpis strong{display:block;margin-top:6px;font-size:21px;letter-spacing:-.045em}
.panel{position:relative;margin-top:14px;padding:15px;border:1px solid #ffffffbd;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);backdrop-filter:blur(15px)}.panel>h2,.panel .actions h2{margin:0;color:var(--ink);font-size:15px;letter-spacing:-.025em}.panel>p,.panel .actions p{color:var(--muted)}.actions{display:flex;align-items:center;gap:8px}.actions:has(h2){justify-content:space-between;margin-bottom:11px}.actions form{display:contents}.flash{padding:10px 12px;margin-bottom:12px;border:1px solid #f5c4cc;border-radius:12px;background:#fff2f4;color:#9b273e;font-size:12px;font-weight:750;box-shadow:0 5px 13px #b33c5015}.flash.success{border-color:#bcebd9;background:#edfdf6;color:#147b58}.flash.error{border-color:#f5c4cc;background:#fff2f4;color:#9b273e}
form.actions{align-items:end;flex-wrap:wrap;gap:7px;padding:9px 10px;margin:10px 0;border:1px solid #e8ecf7;border-radius:13px;background:rgba(249,250,255,.76)}label{display:grid;gap:4px;margin:0;color:#52607f;font-size:9px;font-weight:850;letter-spacing:.04em;text-transform:uppercase}input,select,textarea{width:100%;min-height:33px;padding:7px 9px;border:1px solid #dce3f1;border-radius:9px;outline:0;color:var(--ink);background:#fffffff0;font-size:12px;text-transform:none;transition:border-color var(--transition),box-shadow var(--transition),background var(--transition)}input:focus,select:focus,textarea:focus{border-color:#8391ff;background:#fff;box-shadow:0 0 0 3px #6875ff17}textarea{resize:vertical}.form-grid,.vehicle-form,.staff-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-span-2,.full,.form-actions{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:8px}
.table-wrap{overflow-x:auto;border:1px solid #e7ecf6;border-radius:13px;background:#fff}.table-wrap table{width:100%;border-collapse:collapse}.table-wrap th,.table-wrap td{padding:9px 11px;border-bottom:1px solid #edf0f7;text-align:left;vertical-align:middle;white-space:nowrap}.table-wrap th{color:#ecf1ff;background:linear-gradient(100deg,#1c315e,#263f72);font-size:9px;font-weight:900;letter-spacing:.065em;text-transform:uppercase}.table-wrap td{font-size:11px}.table-wrap tbody tr{transition:background var(--transition),transform var(--transition)}.table-wrap tbody tr:nth-child(even){background:#fbfcff}.table-wrap tbody tr:hover{background:#f0f4ff;transform:scale(1.001)}.table-wrap tbody tr:last-child td{border-bottom:0}.table-wrap small{display:block;margin-top:2px;color:var(--muted);font-size:10px}.table-wrap a{color:#4d5cda;font-weight:850}.amount,.number{text-align:right!important;font-variant-numeric:tabular-nums}.positive{color:var(--success)!important}.negative{color:var(--danger)!important}.reminder-overdue td{background:var(--danger-deep)!important;color:#ffe7eb!important}.reminder-overdue td strong,.reminder-overdue td .negative{color:#fff!important}.reminder-soon td{background:var(--warning-deep)!important;color:#fff3d7!important}.reminder-soon td strong{color:#fff!important}.alert-pill,.cat-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:999px;font-size:10px;font-weight:850}.alert-pill{color:#4e5e7e;background:#eef2fb}.alert-pill.pending{color:#8a4a04;background:#fff0d7}.alert-pill.approved{color:#117858;background:#e7faf1}.alert-pill.rejected,.alert-pill.voided{color:#a5263c;background:#ffedf0}.cat-badge.income{color:#087963;background:#e5f9f2}.cat-badge.fuel,.cat-badge.oil_change{color:#155f9d;background:#e8f3ff}.cat-badge.repair,.cat-badge.parts,.cat-badge.labour{color:#a43043;background:#fff0f2}.cat-badge.salary{color:#88500c;background:#fff5df}
.pagination{display:flex;align-items:center;justify-content:flex-end;gap:7px;margin-top:12px}.pagination small{margin-right:auto;color:var(--muted);font-size:10px;font-weight:800}.pagination .button{min-width:33px}.login{display:grid;min-height:100vh;place-items:center;background:radial-gradient(circle at 20% 15%,#7988ff52,transparent 25rem),linear-gradient(140deg,#131d40,#253c78)}.login-card{width:min(410px,90vw);padding:27px;border:1px solid #ffffff35;border-radius:22px;color:var(--ink);background:#ffffffeb;box-shadow:0 25px 65px #050a2040;backdrop-filter:blur(18px)}.login-card h1{margin:0;font-size:25px;letter-spacing:-.04em}.login-card p{margin:5px 0 20px;color:var(--muted)}.mobile-overlay{display:none}
@media(max-width:1000px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}main{padding:17px}}@media(max-width:760px){body{font-size:12px}.sidebar{width:min(280px,83vw);transform:translateX(-106%);transition:transform 220ms ease}.sidebar.open{transform:translateX(0)}.mobile-overlay{position:fixed;z-index:20;inset:0;display:block;visibility:hidden;opacity:0;background:#0d1635a3;transition:opacity 200ms,visibility 200ms}.mobile-overlay.open{visibility:visible;opacity:1}main{margin-left:0;padding:13px 12px 28px}.topbar{min-height:55px;margin-bottom:14px;padding:7px 9px;border-radius:0 0 14px 14px}.topbar h1{font-size:15px}.page-title-icon{width:34px;height:34px;border-radius:11px;font-size:15px}.mobile-menu{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border-radius:10px;font-size:16px}.header-date-chip{display:none}.topbar-actions .button{min-width:34px;padding:7px;font-size:0}.topbar-actions .button span{font-size:16px}.kpis{gap:9px}.kpis article{min-height:84px;padding:11px 12px}.kpis strong{font-size:18px}.panel{margin-top:11px;padding:12px;border-radius:15px}.actions{flex-wrap:wrap}.actions:has(h2){align-items:flex-start}.form-grid,.vehicle-form,.staff-form{grid-template-columns:1fr}.form-actions{display:flex}.form-actions .button,.form-actions button{flex:1}.table-wrap{margin:0 -1px}.table-wrap th,.table-wrap td{padding:8px 9px}.table-wrap td{font-size:11px}.table-wrap.mobile-card-table{border:0;background:transparent;overflow:visible}.table-wrap.mobile-card-table table,.table-wrap.mobile-card-table tbody,.table-wrap.mobile-card-table tr,.table-wrap.mobile-card-table td{display:block;width:100%}.table-wrap.mobile-card-table thead{display:none}.table-wrap.mobile-card-table tr{margin:0 0 9px;padding:7px 10px;border:1px solid #e5eaf5;border-radius:12px;background:#fff;box-shadow:0 4px 13px #263b7010;transform:none}.table-wrap.mobile-card-table tr:hover{transform:none}.table-wrap.mobile-card-table td{display:grid;grid-template-columns:minmax(92px,.7fr) minmax(0,1.3fr);gap:8px;padding:6px 0;border:0;white-space:normal;text-align:left!important}.table-wrap.mobile-card-table td:before{content:attr(data-label);color:#74819e;font-size:9px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.table-wrap.mobile-card-table td[colspan]{display:block}.table-wrap.mobile-card-table td[colspan]:before{content:""}}
@media(max-width:390px){.kpis{grid-template-columns:1fr}.topbar h1{font-size:18px}}