@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap');
.delete-item{margin-left:10px;padding:8px 12px;border:1px solid #efb5b5;border-radius:7px;background:#fff5f5;color:#b42318;font-size:13px;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}.delete-item::before{content:'⌫';margin-right:6px;font-size:14px}.delete-item:hover{border-color:#d92d20;background:#d92d20;color:#fff;filter:none;transform:translateY(-1px)}.delete-item:focus-visible{outline:3px solid #f7b4ae;outline-offset:2px}
.order-form input[name="mileage"],.order-form input[name="hours[]"]{-moz-appearance:textfield}.order-form input[name="mileage"]::-webkit-outer-spin-button,.order-form input[name="mileage"]::-webkit-inner-spin-button,.order-form input[name="hours[]"]::-webkit-outer-spin-button,.order-form input[name="hours[]"]::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}
.login-card .remember{display:flex;align-items:center;gap:9px;margin:18px 0 4px;font-weight:600}.login-card .remember input{width:auto;margin:0}
.section-label{font-size:12px;font-weight:700;letter-spacing:.8px;color:#6f7d88;text-transform:uppercase;margin:0 0 12px}.vehicle-details{margin:24px 0;padding:20px;background:#edf7fa;border:1px solid #cce8ee;border-radius:10px;display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:center}.vehicle-details h2{margin:4px 0;font:600 20px Outfit,sans-serif}.vehicle-details p:last-child{color:#637580;font-size:13px;margin:6px 0 0}.vehicle-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}@media(max-width:820px){.vehicle-details{grid-template-columns:1fr}.vehicle-grid{grid-template-columns:1fr 1fr}}@media(max-width:500px){.vehicle-grid{grid-template-columns:1fr}}
:root{--ink:#101824;--navy:#132132;--blue:#146e9f;--cyan:#20c2d3;--pale:#f3f6f8;--line:#e2e9ed;--muted:#6f7d88;--green:#0f9b74;--orange:#e98536}*{box-sizing:border-box}body{margin:0;background:var(--pale);color:var(--ink);font:15px 'DM Sans',sans-serif}.app{min-height:100vh;display:grid;grid-template-columns:250px 1fr}aside{background:var(--navy);color:#dce7ed;padding:28px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{color:#fff;text-decoration:none;letter-spacing:2px;font:700 23px Outfit,sans-serif;padding:0 12px 36px}.brand span{color:var(--cyan)}.brand small{display:block;font:500 9px 'DM Sans';letter-spacing:3px;color:#8fa7b8;margin-left:23px}nav{display:grid;gap:7px}nav a{color:#a9bdca;text-decoration:none;padding:13px 14px;border-radius:8px;font-weight:600}nav a:hover,nav .active{background:#24364a;color:#fff}.user{margin-top:auto;border-top:1px solid #304155;padding:20px 12px 0;font-size:13px;color:#91a5b4}.user a{display:block;color:#fff;margin-top:8px}main{min-width:0;padding:0 38px 40px}header{height:92px;display:flex;align-items:center;justify-content:space-between;gap:18px}header strong{font:600 19px Outfit}header p{margin:4px 0 0;color:var(--muted);font-size:13px}.menu{display:none}.button,button{border:0;border-radius:7px;background:var(--blue);color:#fff;padding:12px 17px;text-decoration:none;font:600 14px 'DM Sans';cursor:pointer;white-space:nowrap}.button:hover,button:hover{filter:brightness(1.08)}.button.light{background:#fff;color:#164b68}.button.secondary{background:#e3f0f5;color:#12618e;padding:9px 13px}.hero{padding:37px 42px;background:linear-gradient(120deg,#142a3d,#17688d);border-radius:14px;color:#ecf9ff;display:flex;justify-content:space-between;align-items:center;gap:24px}.hero h1{font:600 clamp(24px,3vw,39px) Outfit;margin:7px 0}.hero p{max-width:540px;color:#c7deea;margin:0}.eyebrow{font-size:11px!important;letter-spacing:1.6px;font-weight:700;color:#46c8d3!important;margin:0;text-transform:uppercase}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0}.cards article,.panel{background:#fff;border:1px solid var(--line);border-radius:12px}.cards article{padding:22px}.cards span{color:var(--muted);font-size:13px}.cards b{display:block;font:600 27px Outfit;margin:8px 0}.cards small,table small{display:block;color:var(--muted);margin-top:3px}.panel{padding:25px;margin-top:20px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.panel h1,.panel h2{margin:3px 0;font:600 25px Outfit}.panel h2{font-size:20px}.panel-head>a{color:var(--blue);font-weight:700;text-decoration:none}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th{text-align:left;color:var(--muted);font-size:12px;font-weight:600;padding:0 12px 12px;border-bottom:1px solid var(--line)}td{padding:14px 12px;border-bottom:1px solid var(--line)}tbody tr:last-child td{border:0}tbody tr[onclick]{cursor:pointer}tbody tr[onclick]:hover{background:#f8fbfc}.badge{display:inline-block;padding:5px 9px;border-radius:20px;background:#e7edf1;text-transform:capitalize;font-size:12px;font-weight:700;color:#51616e}.badge.otvoren{background:#e3f0fa;color:#2672a4}.badge.u_toku{background:#fff0dc;color:#b76a1e}.badge.zavrsen{background:#dff5e9;color:#16845f}.badge.naplacen{background:#e5ecf0;color:#52636f}.empty{padding:34px;color:var(--muted);text-align:center}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.form-grid .full{grid-column:1/-1}label{font-size:13px;font-weight:700;color:#485762;display:grid;gap:7px}input,select,textarea{width:100%;border:1px solid #dbe4e9;border-radius:7px;background:#fbfcfd;padding:10px 11px;font:14px 'DM Sans';color:var(--ink);outline:none}input:focus,select:focus,textarea:focus{border-color:#35a3c3;box-shadow:0 0 0 3px #dff4f8}textarea{resize:vertical}.line-section{padding-bottom:14px}.line-table input{min-width:100px}.line-table td:first-child input{min-width:190px}.line-total{font-weight:700;white-space:nowrap}.remove{padding:3px 9px;background:#fff0f0;color:#cf4c4c;font-size:20px;line-height:1}.summary{display:grid;grid-template-columns:1fr minmax(310px,420px);gap:24px;margin-top:20px;align-items:start}.discount{background:#e7f4f7;padding:20px;border-radius:10px}.discount small{display:block;margin-top:9px;color:var(--muted)}.totals{background:var(--navy);color:white;padding:22px;border-radius:12px}.totals>div{display:flex;justify-content:space-between;padding:7px 0;color:#c6d6df}.totals b{color:white}.totals .grand{border-top:1px solid #405166;margin-top:10px;padding-top:15px}.totals .grand span,.totals .grand b{font:600 18px Outfit;color:#fff}.totals .profit b{color:#5cddba}.totals button{width:100%;margin-top:15px;background:var(--cyan);color:#083346}.notice{background:#dbf5e9;color:#117750;border:1px solid #bde6d1;border-radius:8px;padding:13px 16px;margin-bottom:18px}.text-link{color:var(--blue);font-weight:700;text-decoration:none}.login-body{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#102133,#1c6d8d)}.login-card{width:min(420px,calc(100% - 32px));padding:43px;background:#fff;border-radius:16px;box-shadow:0 18px 60px #07111a70}.logo{font-size:30px;color:#20c2d3}.login-card h1{font:600 26px Outfit;letter-spacing:1px;margin:10px 0 3px}.login-card>p{color:var(--muted);margin:0 0 27px}.login-card label{margin:15px 0}.login-card button{width:100%;margin-top:8px;background:#146e9f}.login-card small{display:block;text-align:center;color:var(--muted);margin-top:16px}.error{padding:10px;background:#fff0f0;color:#af3c3c;border-radius:6px}
@media(max-width:820px){.app{display:block}aside{position:fixed;z-index:5;left:-260px;width:250px;transition:left .2s}aside.open{left:0}.menu{display:block;background:#e5eef2;color:#18394d;padding:8px 11px;font-size:20px}main{padding:0 16px 28px}header{height:74px}.hero{padding:28px;display:block}.hero .button{display:inline-block;margin-top:20px}.cards{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr 1fr}.summary{grid-template-columns:1fr}.panel{padding:18px}.line-table{min-width:780px}}
@media(max-width:500px){header .button{display:none}header p{display:none}.hero{border-radius:10px}.hero h1{font-size:27px}.form-grid{grid-template-columns:1fr}.panel-head{align-items:flex-start}.panel-head h1{font-size:22px}.cards{gap:10px}.cards article{padding:17px}.cards b{font-size:23px}.login-card{padding:32px 25px}}
@media(max-width:820px){.inline-form{display:flex;flex-wrap:wrap;gap:8px}.inline-form input{flex:1 1 180px;min-width:0}.inline-form .button{flex:0 0 auto}}
@media(max-width:500px){main{padding:0 12px 24px}header{gap:10px}header>div{min-width:0}header strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.menu{flex:0 0 44px;min-height:44px}.hero{padding:22px}.panel{padding:15px}.panel-head{display:flex;flex-direction:column;gap:12px}.panel-head>div,.panel-head>form{width:100%}.panel-head form.inline-form{display:flex;flex-wrap:wrap}.panel-head form.inline-form input{flex:1 1 100%;width:100%}.panel-head form.inline-form .button{flex:1}.panel-head form.inline-form .text-link{align-self:center}.delete-item{margin-left:6px;padding:8px 10px}.table-wrap{margin-right:-3px}}
.profit-filter{display:flex;align-items:center;justify-content:space-between;gap:28px;background:#fff;border:1px solid #d7e8ed;border-left:4px solid var(--cyan);box-shadow:0 8px 24px rgba(19,33,50,.06)}.profit-filter h2{margin:5px 0 0;font:600 21px Outfit;color:var(--navy)}.profit-filter-form{display:flex;align-items:flex-end;gap:12px;margin:0}.profit-filter-form label{display:grid;gap:6px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase}.profit-filter-form select{min-width:150px;background:#f7fbfc;border-color:#c8dfe5;color:var(--navy);font-weight:600}.profit-filter-form select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(32,194,211,.14)}
@media(max-width:820px){.profit-filter{align-items:stretch;flex-direction:column;gap:16px}.profit-filter-form{display:grid;grid-template-columns:1fr 1fr}.profit-filter-form label select{width:100%}}
@media(max-width:500px){.profit-filter-form{grid-template-columns:1fr}.profit-filter-form select{min-width:0}}
.panel:has(form input[name="search"]) table tbody td:nth-child(2){font-weight:700;color:var(--blue)}.panel:has(form input[name="search"]) table tbody tr{transition:background .18s ease}.panel:has(form input[name="search"]) table tbody tr:hover{background:#f5fbfc}
.panel:has(form input[name="search"]) .document-filter{display:grid;grid-template-columns:150px minmax(190px,1fr) auto;align-items:end;gap:8px;padding:12px;border:1px solid #d5e8ed;border-radius:10px;background:#f4fafb;box-shadow:0 5px 16px rgba(19,33,50,.05)}.panel:has(form input[name="search"]) .document-filter::before{content:'FILTERI DOKUMENATA';grid-column:1/-1;color:#147b91;font-size:10px;font-weight:700;letter-spacing:1.2px}.panel:has(form input[name="search"]) .document-filter select{border-color:#c4dfe6;background:#fff;font-weight:600}.panel:has(form input[name="search"]) .document-filter input[name="search"]{background:#fff}.panel:has(form input[name="search"]) .document-filter select:focus,.panel:has(form input[name="search"]) .document-filter input[name="search"]:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(32,194,211,.14)}.panel:has(form input[name="search"]) .document-filter .button{height:42px}.panel:has(form input[name="search"]) .document-filter .text-link{grid-column:1/-1;justify-self:end;font-size:12px}
@media(max-width:820px){.panel:has(form input[name="search"]) .document-filter{grid-template-columns:1fr 1fr}.panel:has(form input[name="search"]) .document-filter input[name="search"]{grid-column:1/-1}.panel:has(form input[name="search"]) .document-filter .button{grid-column:1}.panel:has(form input[name="search"]) .document-filter .text-link{grid-column:2;align-self:center}}
@media(max-width:500px){.panel:has(form input[name="search"]) .document-filter{grid-template-columns:1fr}.panel:has(form input[name="search"]) .document-filter input[name="search"],.panel:has(form input[name="search"]) .document-filter .button,.panel:has(form input[name="search"]) .document-filter .text-link{grid-column:1}.panel:has(form input[name="search"]) .document-filter .text-link{justify-self:start}}
form.inline-form:has(input[name="search"]){display:grid;grid-template-columns:150px minmax(190px,1fr) auto;align-items:end;gap:8px;padding:12px;border:1px solid #d5e8ed;border-radius:10px;background:#f4fafb;box-shadow:0 5px 16px rgba(19,33,50,.05)}form.inline-form:has(input[name="search"])::before{content:'FILTERI DOKUMENATA';grid-column:1/-1;color:#147b91;font-size:10px;font-weight:700;letter-spacing:1.2px}form.inline-form:has(input[name="search"]) select{border-color:#c4dfe6;background:#fff;font-weight:600}form.inline-form:has(input[name="search"]) input[name="search"]{background:#fff}form.inline-form:has(input[name="search"]) select:focus,form.inline-form:has(input[name="search"]) input[name="search"]:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(32,194,211,.14)}form.inline-form:has(input[name="search"]) .button{height:42px}form.inline-form:has(input[name="search"]) .text-link{grid-column:1/-1;justify-self:end;font-size:12px}
@media(max-width:820px){form.inline-form:has(input[name="search"]){grid-template-columns:1fr 1fr}form.inline-form:has(input[name="search"]) input[name="search"]{grid-column:1/-1}form.inline-form:has(input[name="search"]) .button{grid-column:1}form.inline-form:has(input[name="search"]) .text-link{grid-column:2;align-self:center}}
@media(max-width:500px){form.inline-form:has(input[name="search"]){grid-template-columns:1fr}form.inline-form:has(input[name="search"]) input[name="search"],form.inline-form:has(input[name="search"]) .button,form.inline-form:has(input[name="search"]) .text-link{grid-column:1}form.inline-form:has(input[name="search"]) .text-link{justify-self:start}}
form.inline-form{display:grid;grid-template-columns:150px minmax(190px,1fr) auto;align-items:end;gap:8px;padding:12px;border:1px solid #d5e8ed;border-radius:10px;background:#f4fafb;box-shadow:0 5px 16px rgba(19,33,50,.05)}form.inline-form::before{content:'FILTERI DOKUMENATA';grid-column:1/-1;color:#147b91;font-size:10px;font-weight:700;letter-spacing:1.2px}form.inline-form select{border-color:#c4dfe6;background:#fff;font-weight:600}form.inline-form input[name="search"]{background:#fff}form.inline-form select:focus,form.inline-form input[name="search"]:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(32,194,211,.14)}form.inline-form .button{height:42px}form.inline-form .text-link{grid-column:1/-1;justify-self:end;font-size:12px}
@media(max-width:820px){form.inline-form{grid-template-columns:1fr 1fr}form.inline-form input[name="search"]{grid-column:1/-1}form.inline-form .button{grid-column:1}form.inline-form .text-link{grid-column:2;align-self:center}}
@media(max-width:500px){form.inline-form{grid-template-columns:1fr}form.inline-form input[name="search"],form.inline-form .button,form.inline-form .text-link{grid-column:1}form.inline-form .text-link{justify-self:start}}