.garage-page { --garage-ink:#14213d; --garage-muted:#667085; --garage-line:#e5e7eb; }
.garage-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:24px; }
.garage-head h1 { margin:0; font-size:clamp(28px,4vw,44px); letter-spacing:-1.4px; color:var(--garage-ink); }
.garage-head p { margin:8px 0 0; color:#475467; max-width:720px; font-size:15px; line-height:1.55; }
.garage-actions { display:flex; gap:10px; flex-wrap:wrap; }
.garage-btn { min-height:44px; border:1px solid #cfd5dd; border-radius:12px; padding:11px 17px; background:#fff; color:#182230; font:inherit; font-size:14px; font-weight:850; cursor:pointer; box-shadow:0 2px 6px rgba(17,24,39,.04); transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease; }
.garage-btn:hover { border-color:#d99200; box-shadow:0 6px 16px rgba(17,24,39,.09); transform:translateY(-1px); }
.garage-btn:focus-visible { outline:3px solid rgba(255,176,0,.32); outline-offset:2px; }
.garage-btn:disabled { cursor:wait; opacity:.65; transform:none; }
.garage-btn.primary { background:#121926; color:#fff; border-color:#121926; }
.garage-btn.gold { background:linear-gradient(135deg,#ffd94a,#ffb000); color:#18120a; border-color:#e6a000; box-shadow:0 6px 16px rgba(205,137,0,.18); }
.garage-layout { display:grid; grid-template-columns:minmax(260px,340px) minmax(0,1fr); gap:20px; align-items:start; }
.garage-panel { background:#fff; border:1px solid var(--garage-line); border-radius:20px; box-shadow:0 12px 34px rgba(17,24,39,.07); overflow:hidden; }
.garage-panel-head { padding:18px; border-bottom:1px solid var(--garage-line); }
.garage-panel-head strong { display:block; font-size:17px; color:var(--garage-ink); }
.garage-panel-head span { display:block; margin-top:3px; font-size:12px; color:var(--garage-muted); }
.garage-search { width:100%; margin-top:13px; padding:11px 13px; border:1px solid #d7dce3; border-radius:11px; font:inherit; }
.garage-client-list { max-height:680px; overflow:auto; padding:8px; }
.garage-client { width:100%; border:0; background:transparent; border-radius:14px; padding:13px; display:grid; grid-template-columns:42px 1fr auto; gap:11px; align-items:center; text-align:left; cursor:pointer; }
.garage-client:hover { background:#f8fafc; }
.garage-client.active { background:#fff6df; box-shadow:inset 0 0 0 1px #f4c35c; }
.garage-avatar { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:#182230; color:#fff; font-weight:850; }
.garage-client-name { display:block; font-size:14px; font-weight:850; color:var(--garage-ink); }
.garage-client-meta { display:block; margin-top:3px; font-size:12px; color:var(--garage-muted); }
.garage-count { min-width:28px; height:28px; padding:0 8px; border-radius:999px; background:#f1f4f7; display:grid; place-items:center; font-size:12px; font-weight:800; }
.garage-detail { padding:22px; }
.garage-detail-top { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:20px; }
.garage-detail h2 { margin:0; color:var(--garage-ink); font-size:28px; letter-spacing:-.5px; }
.garage-contact { color:var(--garage-muted); font-size:13px; margin-top:5px; }
.garage-section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 0 12px; }
.garage-section-title h3 { margin:0; color:var(--garage-ink); font-size:18px; }
.garage-vehicle-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:12px; }
.garage-vehicle { border:1px solid var(--garage-line); border-radius:17px; padding:16px; background:linear-gradient(145deg,#fff,#f8fafc); }
.garage-vehicle.active { border-color:#f0a000; box-shadow:0 0 0 3px rgba(255,176,0,.13); }
.garage-vehicle-kicker { display:flex; justify-content:space-between; gap:8px; color:var(--garage-muted); font-size:11px; text-transform:uppercase; letter-spacing:.55px; font-weight:800; }
.garage-vehicle h4 { margin:9px 0 4px; font-size:18px; color:var(--garage-ink); }
.garage-vehicle p { margin:0; color:var(--garage-muted); font-size:13px; min-height:35px; }
.garage-vehicle-tags { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.garage-tag,.garage-cart-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:999px; background:#eef2f6; color:#344054; font-size:11px; font-weight:750; }
.garage-cart-badge { margin-left:8px; background:#fff3d6; color:#8a5200; }
.garage-vehicle-actions { display:flex; gap:8px; margin-top:12px; }
.garage-vehicle-actions .garage-btn { flex:1; padding:9px 10px; font-size:12px; }
.garage-timeline { display:flex; flex-direction:column; gap:0; }
.garage-event { display:grid; grid-template-columns:34px 1fr auto; gap:11px; padding:13px 0; border-bottom:1px solid #eef0f3; }
.garage-event:last-child { border-bottom:0; }
.garage-event-icon { width:34px; height:34px; border-radius:11px; background:#f2f4f7; display:grid; place-items:center; }
.garage-event strong { display:block; color:var(--garage-ink); font-size:13px; }
.garage-event span { display:block; margin-top:3px; color:var(--garage-muted); font-size:12px; }
.garage-event time { white-space:nowrap; color:#98a2b3; font-size:11px; }
.garage-empty { padding:38px 20px; text-align:center; color:var(--garage-muted); }
.garage-empty strong { display:block; color:var(--garage-ink); font-size:17px; margin-bottom:5px; }
.garage-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:18px; background:#f8fafc; border:1px solid var(--garage-line); border-radius:16px; margin-bottom:18px; }
.garage-form label { display:flex; flex-direction:column; gap:6px; color:#475467; font-size:12px; font-weight:750; }
.garage-form input,.garage-form textarea,.garage-form select { width:100%; border:1px solid #d0d5dd; border-radius:10px; padding:10px 11px; background:#fff; font:inherit; color:#101828; }
.garage-form textarea { resize:vertical; min-height:78px; }
.garage-form .full { grid-column:1/-1; }
.garage-form-actions { grid-column:1/-1; display:flex; justify-content:flex-end; gap:8px; }
.garage-active-strip { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:14px; background:#141b2d; color:#fff; margin-bottom:18px; }
.garage-active-strip small { display:block; color:#b9c2d0; margin-bottom:2px; }
.garage-active-strip strong { font-size:14px; }

/* Inserimento rapido dal catalogo: cerca il cliente senza perdere il veicolo. */
.garage-quick-modal { position:fixed; inset:0; z-index:10050; display:grid; place-items:center; padding:22px; background:rgba(12,18,28,.62); backdrop-filter:blur(5px); }
.garage-quick-card { width:min(680px,100%); max-height:min(850px,calc(100vh - 44px)); overflow:auto; border:1px solid rgba(255,255,255,.55); border-radius:24px; background:#fff; box-shadow:0 32px 90px rgba(5,12,24,.32); }
.garage-quick-head { position:relative; padding:25px 70px 22px 26px; color:#fff; background:linear-gradient(135deg,#111827 0%,#263247 100%); }
.garage-quick-kicker { color:#ffd03b; font-size:10px; font-weight:950; letter-spacing:1.1px; }
.garage-quick-head h2 { margin:5px 0 4px; font-size:30px; letter-spacing:-.7px; }
.garage-quick-head p { margin:0; color:#d5dae3; font-size:14px; font-weight:700; }
.garage-quick-close { position:absolute; top:18px; right:18px; width:40px; height:40px; border:1px solid rgba(255,255,255,.3); border-radius:12px; background:rgba(255,255,255,.1); color:#fff; font-size:27px; line-height:1; cursor:pointer; }
.garage-quick-close:hover { background:#fff; color:#111827; }
.garage-quick-body { padding:24px 26px 28px; }
.garage-quick-search-label,.garage-quick-form label { display:flex; flex-direction:column; gap:7px; color:#344054; font-size:13px; font-weight:850; }
.garage-quick-search,.garage-quick-form input,.garage-quick-form textarea { width:100%; border:1px solid #cfd5dd; border-radius:12px; padding:13px 14px; background:#fff; color:#101828; font:inherit; font-size:15px; }
.garage-quick-search:focus,.garage-quick-form input:focus,.garage-quick-form textarea:focus { border-color:#e7a000; outline:3px solid rgba(255,176,0,.16); }
.garage-quick-list { display:flex; flex-direction:column; gap:7px; max-height:275px; margin-top:12px; overflow:auto; }
.garage-quick-client { display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center; width:100%; padding:11px 13px; border:1px solid #e3e7ed; border-radius:14px; background:#fff; color:#182230; text-align:left; cursor:pointer; }
.garage-quick-client:hover { border-color:#e7a000; background:#fff9e9; transform:translateY(-1px); }
.garage-quick-client strong,.garage-quick-client small { display:block; }
.garage-quick-client strong { font-size:14px; }
.garage-quick-client small { margin-top:3px; color:#667085; font-size:12px; }
.garage-quick-arrow { color:#9a6700; font-size:19px; font-weight:900; }
.garage-quick-empty,.garage-quick-loading,.garage-quick-error { padding:28px 18px; border-radius:14px; background:#f7f8fa; color:#667085; text-align:center; }
.garage-quick-error { background:#fff1f1; color:#a32323; }
.garage-quick-divider { display:flex; align-items:center; gap:12px; margin:21px 0; color:#7b8492; font-size:11px; font-weight:850; letter-spacing:.3px; text-transform:uppercase; }
.garage-quick-divider::before,.garage-quick-divider::after { content:""; flex:1; height:1px; background:#e4e7ec; }
.garage-quick-form { display:flex; flex-direction:column; gap:14px; }
.garage-quick-form textarea { min-height:82px; resize:vertical; }
.garage-quick-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.garage-quick-save { width:100%; margin-top:3px; }
.garage-quick-selected { margin-bottom:19px; padding:16px 18px; border:1px solid #f0c65d; border-radius:15px; background:#fff8e5; }
.garage-quick-selected span,.garage-quick-selected strong { display:block; }
.garage-quick-selected span { margin-top:13px; color:#7a5b12; font-size:12px; }
.garage-quick-selected strong { margin-top:2px; color:#172033; font-size:20px; }
.garage-quick-back { border:0; padding:0; background:transparent; color:#714f00; font:inherit; font-size:12px; font-weight:850; cursor:pointer; }
@media(max-width:840px){.garage-head{align-items:flex-start;flex-direction:column}.garage-layout{grid-template-columns:1fr}.garage-client-list{max-height:310px}.garage-detail{padding:17px}}
@media(max-width:560px){.garage-form{grid-template-columns:1fr}.garage-form .full,.garage-form-actions{grid-column:1}.garage-detail-top{flex-direction:column}.garage-vehicle-grid{grid-template-columns:1fr}.garage-event{grid-template-columns:34px 1fr}.garage-event time{grid-column:2}}
@media(max-width:560px){.garage-quick-modal{padding:0;align-items:end}.garage-quick-card{max-height:92vh;border-radius:22px 22px 0 0}.garage-quick-head{padding:22px 60px 19px 20px}.garage-quick-head h2{font-size:25px}.garage-quick-body{padding:20px}.garage-quick-two{grid-template-columns:1fr}.garage-quick-list{max-height:230px}}

/* Garage experience refresh: officina premium, azioni evidenti e lettura più rapida. */
.garage-page {
  --garage-navy:#101a32; --garage-blue:#253d72; --garage-gold:#ffbd18;
  --garage-gold-2:#ffd85a; --garage-sky:#eaf3ff; --garage-mint:#e9f8f1;
  position:relative; padding:28px; border-radius:28px;
  background:
    radial-gradient(circle at 94% 4%,rgba(255,201,52,.22),transparent 25%),
    linear-gradient(150deg,#f8fbff 0%,#fffdf7 58%,#f3f7ff 100%);
  overflow:hidden;
}
.garage-page::before { content:""; position:absolute; inset:0 0 auto; height:6px; background:linear-gradient(90deg,#13203d 0 36%,#ffbd18 36% 72%,#ffdf78 72%); }
.garage-head { position:relative; align-items:center; margin-bottom:20px; padding:25px 27px; border-radius:22px; color:#fff; background:linear-gradient(125deg,#101a32 0%,#1d315f 72%,#314d86 100%); box-shadow:0 18px 42px rgba(16,26,50,.18); overflow:hidden; }
.garage-head::after { content:""; position:absolute; right:-75px; top:-100px; width:260px; height:260px; border:42px solid rgba(255,189,24,.16); border-radius:50%; pointer-events:none; }
.garage-head>div { position:relative; z-index:1; }
.garage-eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:7px; color:#ffdf78; font-size:11px; font-weight:900; letter-spacing:1.15px; text-transform:uppercase; }
.garage-eyebrow span { width:8px; height:8px; border-radius:50%; background:#ffbd18; box-shadow:0 0 0 5px rgba(255,189,24,.15); }
.garage-head h1 { color:#fff; font-size:clamp(30px,3.2vw,43px); line-height:1.02; letter-spacing:-1.5px; }
.garage-head p { max-width:650px; margin-top:9px; color:#dbe5f8; font-size:15px; }
.garage-actions { position:relative; z-index:1; justify-content:flex-end; }
.garage-btn { min-height:46px; border-radius:13px; padding:11px 18px; font-size:14px; box-shadow:0 4px 12px rgba(16,26,50,.08); }
.garage-btn:hover { border-color:#ffbd18; box-shadow:0 9px 22px rgba(16,26,50,.14); transform:translateY(-2px); }
.garage-btn.primary { background:linear-gradient(135deg,#1b2d55,#101a32); border-color:#2b4170; box-shadow:0 7px 18px rgba(8,16,35,.2); }
.garage-btn.gold { background:linear-gradient(135deg,#ffdc62,#ffb400); border-color:#efa900; color:#201600; box-shadow:0 8px 20px rgba(220,145,0,.27); }
.garage-btn.gold:hover { background:linear-gradient(135deg,#ffe681,#ffc126); box-shadow:0 11px 25px rgba(220,145,0,.35); }
.garage-btn.compact { min-height:38px; padding:8px 13px; font-size:12px; }
.garage-btn-icon { display:inline-grid; place-items:center; width:22px; height:22px; margin-right:5px; border-radius:7px; background:rgba(255,255,255,.18); font-size:17px; line-height:1; }
.garage-btn.gold .garage-btn-icon { background:rgba(255,255,255,.48); }
.garage-overview { display:flex; align-items:center; gap:0; margin:0 0 18px; padding:13px 18px; border:1px solid #d9e3f2; border-radius:17px; background:rgba(255,255,255,.86); box-shadow:0 8px 25px rgba(24,39,75,.06); backdrop-filter:blur(8px); }
.garage-overview>div { min-width:112px; padding:2px 22px; border-right:1px solid #dde5f0; }
.garage-overview>div:first-child { padding-left:5px; }
.garage-overview strong { display:inline-block; margin-right:7px; color:#172647; font-size:24px; line-height:1; }
.garage-overview span { color:#69758a; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.35px; }
.garage-overview p { margin:0 4px 0 auto; color:#526079; font-size:13px; font-weight:750; }
.garage-layout { grid-template-columns:minmax(285px,340px) minmax(0,1fr); gap:18px; }
.garage-panel { border-color:#dce4ef; border-radius:21px; box-shadow:0 14px 36px rgba(19,32,61,.08); }
.garage-clients-panel { position:sticky; top:18px; }
.garage-panel-head { padding:19px 18px 16px; background:linear-gradient(180deg,#f6f9ff,#fff); border-bottom-color:#e3e9f2; }
.garage-panel-head strong { display:flex; align-items:center; gap:9px; font-size:18px; }
.garage-panel-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:#e5efff; font-style:normal; font-size:16px; }
.garage-panel-head span { margin-left:42px; margin-top:-4px; }
.garage-search { min-height:46px; margin-top:15px; padding:11px 14px 11px 40px; border-color:#d6dfec; border-radius:13px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236b7890' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 13px center; box-shadow:0 3px 10px rgba(20,33,61,.04); }
.garage-search:focus { border-color:#e8aa00; outline:3px solid rgba(255,189,24,.16); }
.garage-client-list { padding:10px; }
.garage-client { position:relative; min-height:70px; margin-bottom:5px; border:1px solid transparent; border-radius:15px; padding:11px 12px; transition:background .16s ease,border-color .16s ease,transform .16s ease; }
.garage-client:hover { background:#f4f8ff; border-color:#dbe6f7; transform:translateX(2px); }
.garage-client.active { background:linear-gradient(110deg,#fff8df,#fffdf6); border-color:#f1c34d; box-shadow:inset 4px 0 0 #ffb800,0 5px 15px rgba(198,137,0,.1); }
.garage-avatar { width:44px; height:44px; border-radius:14px; background:linear-gradient(145deg,#2a4377,#101a32); box-shadow:0 5px 13px rgba(20,35,68,.2); }
.garage-client.active .garage-avatar { background:linear-gradient(145deg,#ffd65a,#ffb000); color:#211700; }
.garage-client-name { font-size:14px; }
.garage-count { min-width:30px; height:30px; background:#eaf0f8; color:#24375e; }
.garage-client.active .garage-count { background:#ffbd18; color:#211700; }
.garage-detail { padding:22px 24px 26px; }
.garage-active-strip { min-height:70px; justify-content:flex-start; padding:13px 15px; border:1px solid #314977; border-radius:16px; background:linear-gradient(120deg,#121d37,#233b6e); box-shadow:0 10px 24px rgba(15,27,54,.17); }
.garage-active-icon { flex:0 0 auto; display:grid; place-items:center; width:43px; height:43px; border-radius:13px; background:rgba(255,189,24,.16); font-size:21px; }
.garage-active-strip>div { flex:1; min-width:0; }
.garage-active-strip small { color:#aebcda; font-size:10px; font-weight:850; letter-spacing:.7px; text-transform:uppercase; }
.garage-active-strip strong { display:block; overflow:hidden; color:#fff; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.garage-active-strip .garage-btn { min-height:38px; padding:8px 13px; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.11); color:#fff; box-shadow:none; }
.garage-detail-top { align-items:center; margin:3px 0 20px; padding:3px 2px 15px; border-bottom:1px solid #e6ebf2; }
.garage-detail h2 { position:relative; padding-left:18px; font-size:29px; }
.garage-detail h2::before { content:""; position:absolute; left:0; top:6px; bottom:4px; width:6px; border-radius:8px; background:linear-gradient(#ffdc5b,#ffae00); }
.garage-contact { padding-left:18px; color:#647188; }
.garage-section-title { margin:25px 0 13px; }
.garage-section-title h3 { display:flex; align-items:center; gap:9px; font-size:19px; }
.garage-section-title h3 i { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:#eaf2ff; color:#203b70; font-style:normal; font-size:16px; }
.garage-section-title .garage-tag { padding:7px 11px; background:#eef4ff; color:#2d4775; }
.garage-vehicle-grid { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.garage-vehicle { position:relative; min-height:218px; border-color:#dae2ed; border-radius:19px; padding:18px; background:linear-gradient(155deg,#fff 0%,#f7faff 100%); box-shadow:0 7px 18px rgba(22,38,72,.06); overflow:hidden; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.garage-vehicle::before { content:""; position:absolute; inset:0 auto 0 0; width:5px; background:#9bb0d2; }
.garage-vehicle:nth-child(2n)::before { background:#65b992; }
.garage-vehicle:hover { border-color:#bdcbe0; box-shadow:0 13px 28px rgba(22,38,72,.11); transform:translateY(-2px); }
.garage-vehicle.active { border-color:#edb31a; background:linear-gradient(150deg,#fffdf7,#fff5d5); box-shadow:0 0 0 3px rgba(255,189,24,.15),0 14px 28px rgba(128,91,0,.11); }
.garage-vehicle.active::before { background:#ffb600; }
.garage-vehicle-kicker { color:#56647c; font-size:10px; letter-spacing:.8px; }
.garage-vehicle.active .garage-vehicle-kicker span:last-child { color:#8a5c00; }
.garage-vehicle h4 { margin-top:11px; font-size:20px; letter-spacing:-.3px; }
.garage-vehicle p { color:#5f6b7f; }
.garage-tag,.garage-cart-badge { padding:5px 9px; background:#edf2f8; color:#3a4962; }
.garage-vehicle-actions { margin-top:15px; }
.garage-vehicle-actions .garage-btn { min-height:42px; font-size:12px; }
.garage-vehicle-actions .garage-btn:disabled { cursor:not-allowed; background:#e8edf4; border-color:#dce3ec; color:#8490a3; box-shadow:none; opacity:1; }
.garage-timeline { padding:0 4px; }
.garage-event { position:relative; padding:14px 4px; }
.garage-event-icon { background:#e9f1ff; color:#254374; font-weight:900; }
.garage-empty { border-radius:15px; background:linear-gradient(145deg,#f8faff,#fffdf7); }
.garage-form { gap:14px; padding:20px; border-color:#d9e3f1; border-radius:18px; background:linear-gradient(145deg,#f5f9ff,#fffdf7); box-shadow:inset 0 1px 0 #fff; }
.garage-form label { color:#34435e; font-size:12px; font-weight:850; }
.garage-form input,.garage-form textarea,.garage-form select { min-height:45px; border-color:#ccd7e6; border-radius:12px; padding:11px 12px; box-shadow:0 2px 7px rgba(19,35,66,.04); }
.garage-form input:focus,.garage-form textarea:focus,.garage-form select:focus { border-color:#e6a900; outline:3px solid rgba(255,189,24,.15); }
.garage-form-actions { margin-top:4px; }

@media(max-width:1050px){.garage-overview p{display:none}.garage-overview>div{flex:1}.garage-head{align-items:flex-start;flex-direction:column}.garage-actions{width:100%;justify-content:flex-start}}
@media(max-width:840px){.garage-page{padding:18px;border-radius:20px}.garage-head{padding:22px}.garage-overview{overflow:auto}.garage-overview>div{min-width:120px}.garage-clients-panel{position:static}.garage-layout{grid-template-columns:1fr}}
@media(max-width:560px){.garage-page{padding:12px}.garage-head{padding:20px 18px}.garage-actions{display:grid;grid-template-columns:1fr}.garage-actions .garage-btn{width:100%}.garage-overview{padding:11px 7px;overflow:hidden}.garage-overview>div{flex:1 1 33%;min-width:0;padding:2px 8px}.garage-overview strong{display:block;margin:0 0 4px;font-size:21px}.garage-overview span{display:block;font-size:9px;line-height:1.25;white-space:normal}.garage-detail{padding:17px}.garage-detail-top .garage-btn{width:100%}.garage-active-strip{align-items:flex-start;flex-wrap:wrap}.garage-active-strip>div{width:calc(100% - 58px)}.garage-active-strip .garage-btn{margin-left:58px}.garage-vehicle{min-height:0}}