:root{--lumo-primary-color:#2563eb;--lumo-primary-text-color:#1e40af;--lumo-primary-color-10pct:#eff6ff;--lumo-primary-color-50pct:#93c5fd;--lumo-primary-color-10pct:#edefff;--lumo-primary-color-50pct:#7983ed;--lumo-base-color:#fff;--lumo-body-text-color:#17233a;--lumo-secondary-text-color:#667085;--lumo-border-radius-m:12px;--lumo-font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;background:#f4f6fa;color:#17233a}html,body{margin:0;min-height:100%;background:#f4f6fa}body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif}h1{font-size:clamp(1.8rem,3vw,2.35rem);line-height:1.15;letter-spacing:-.045em;margin:8px 0 4px;font-weight:650}h2{font-size:1.3rem;letter-spacing:-.025em;font-weight:620;margin:0 0 16px}h3{letter-spacing:-.02em}.top-header{height:76px;box-sizing:border-box;padding:10px 28px;border-bottom:1px solid #e7eaf0;background:rgba(255,255,255,.92);backdrop-filter:blur(22px);gap:20px}.brand-lockup{gap:8px}.perle-logo{width:48px;height:48px;object-fit:contain;border-radius:12px}.brand-name{font-size:20px;font-weight:650;letter-spacing:-.04em;color:#141e33}.brand-product{font-size:9px;letter-spacing:.2em;font-weight:700;color:#0012d9}.brand-text{margin-left:4px}.header-spacer{flex:1}.header-location{font-size:15px;color:#344054;font-weight:600;white-space:nowrap}.header-user-area{gap:16px}.header-user{font-size:13px;color:#485467}.logout-button{border-radius:10px}.perle-drawer-toggle{color:#344054}.side-nav{min-height:calc(100vh - 76px);box-sizing:border-box;padding:24px 14px 18px;background:#fff}.nav-section-label{margin:4px 10px 12px;font-size:10px;font-weight:700;letter-spacing:.14em;color:#98a2b3}.nav-link{width:100%;box-sizing:border-box;padding:12px 14px;margin:2px 0;gap:12px;border-radius:11px;color:#475467;text-decoration:none;font-size:14px}.nav-link:hover{background:#f4f6fa;color:#00107a}.nav-link[aria-current=page]{background:#eef0ff;color:#0012d9;font-weight:600}.nav-footer{margin-top:auto;padding:20px 10px 4px;border-top:1px solid #edf0f4;display:flex;flex-direction:column;gap:4px;color:#667085;font-size:12px}.fleet-page{width:min(100%,1320px);box-sizing:border-box;margin:0 auto;padding:34px 40px 56px;gap:22px}.page-heading{gap:0}.page-heading>span{font-size:12px;letter-spacing:.17em;color:#0012d9;font-weight:750}.page-heading p{margin:4px 0 0;color:#667085;font-size:15px}.page-heading-row{gap:24px}.live-badge{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border:1px solid #d7eadf;background:#f0faf3;color:#267247;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:600}.live-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:#35a46b;box-shadow:0 0 0 3px #35a46b20}.page-actions{justify-content:flex-end;width:100%;padding-bottom:10px;border-bottom:1px solid #e7eaf0}.page-actions vaadin-button{min-height:42px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:100%;margin:0}.metric{min-width:0;box-sizing:border-box;background:#fff;border:1px solid #e7eaf0;padding:20px 22px;border-radius:16px;display:flex;flex-direction:column;gap:7px;box-shadow:0 3px 12px #1b2a4a06}.metric h3{font-size:28px;line-height:1.05;margin:0;font-weight:650;letter-spacing:-.04em}.metric span{font-size:12px;color:#667085}.cost-overview{align-self:flex-end;display:flex;align-items:center;gap:12px;color:#667085;font-size:12px}.cost-overview h3{font-size:17px;color:#17233a;margin:0}.dashboard-section{width:100%;box-sizing:border-box;margin-top:12px;padding:0;gap:4px}.dashboard-section h2{margin-bottom:10px}.appointment-row{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(140px,1fr) minmax(190px,1fr) auto;align-items:center;gap:14px;width:100%;box-sizing:border-box;padding:13px 16px;background:#fff;border:1px solid #e7eaf0;border-radius:12px}.appointment-row>span{font-size:13px;color:#667085}.appointment-row vaadin-button{min-height:36px}.vehicle-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;width:100%}.vehicle-card{box-sizing:border-box;background:#fff;border:1px solid #e7eaf0;border-radius:16px;padding:22px 22px 18px;box-shadow:0 4px 16px #15203b07;gap:8px}.vehicle-card>span:first-child{font-size:10px;letter-spacing:.16em;color:#0012d9;font-weight:700}.vehicle-card h2{margin:2px 0 0;font-size:25px}.vehicle-card p{margin:0;color:#475467;font-size:14px}.vehicle-card>span{font-size:12px;color:#667085}.vehicle-card vaadin-button{width:100%;margin-top:10px}.deadline{display:grid;grid-template-columns:minmax(120px,.6fr) minmax(150px,1fr) auto;align-items:center;gap:14px;width:100%;box-sizing:border-box;border:1px solid #f2dfbf;border-left:4px solid #cb8733;background:#fffaf2;padding:13px 16px;border-radius:11px}.deadline strong{font-size:13px}.deadline span{font-size:12px;color:#667085}.vehicle-dialog{max-width:960px}vaadin-dialog-overlay::part(content){padding:0;overflow:hidden;border:1px solid #e7eaf0;border-radius:20px;box-shadow:0 24px 90px #15203b24}vaadin-dialog-overlay::part(header){padding:18px 24px;border-bottom:1px solid #edf0f4;font-weight:650}vaadin-dialog-overlay::part(footer){padding:12px 20px;border-top:1px solid #edf0f4;background:#fff}vaadin-dialog-overlay::part(backdrop){backdrop-filter:blur(3px)}.vehicle-detail-body{max-height:calc(90vh - 126px);overflow-y:auto;overscroll-behavior:contain;padding:18px 24px 28px;box-sizing:border-box;gap:10px}.vehicle-summary{display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;padding:6px 0 12px;color:#667085;font-size:13px}.vehicle-summary span+span{border-left:1px solid #e7eaf0;padding-left:20px}.vehicle-quick-actions{flex-wrap:wrap;gap:8px;padding:0 0 14px;border-bottom:1px solid #edf0f4}.vehicle-quick-actions vaadin-button{flex:1 1 170px;min-height:42px}.detail-section{width:100%;border:1px solid #e7eaf0;border-radius:13px;background:#fff;overflow:hidden}.detail-section::part(summary){padding:14px 16px;font-size:14px;font-weight:620;color:#26334b}.detail-section[opened]::part(summary){border-bottom:1px solid #edf0f4;color:#00107a}.detail-section-content{padding:8px 14px 16px;gap:8px}.detail-row{display:grid;grid-template-columns:minmax(115px,.8fr) minmax(120px,1fr) auto;align-items:center;gap:12px;width:100%;box-sizing:border-box;padding:11px 12px;background:#f8f9fc;border-radius:10px}.detail-row strong{font-size:13px}.detail-row span{font-size:12px;color:#667085;overflow-wrap:anywhere}.detail-row vaadin-button{min-height:34px}.detail-row a{overflow-wrap:anywhere}.tire-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:8px 16px;width:100%;box-sizing:border-box;padding:14px;background:#f8f9fc;border-radius:12px}.tire-card strong{grid-column:1/-1;font-size:13px}.tire-card span{font-size:12px;color:#667085;overflow-wrap:anywhere}.tire-card vaadin-button{justify-self:start}.issue-link{justify-content:flex-start!important}.appointment-card{border:1px solid #e6e8f0;border-radius:14px;background:#f8f9fc;padding:16px}.actions{flex-wrap:wrap;gap:8px;align-items:center}.actions vaadin-button{min-height:40px}vaadin-button{cursor:pointer;min-height:42px;border-radius:10px}a{color:#00107a}.login-view{background:#f4f6fa}.login-logo{width:150px}.login-title{font-size:28px}.content-view{padding:24px}.panel{background:white;border-radius:16px}.data-grid{min-height:400px}@media(max-width:800px){.fleet-page{padding:25px 22px 42px}.top-header{padding:8px 14px;gap:12px}.header-location{display:none}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric{padding:17px}.metric h3{font-size:25px}.page-heading-row{align-items:flex-start}.live-badge{font-size:10px;padding:7px 9px}.appointment-row{grid-template-columns:1fr auto;gap:6px 10px}.appointment-row>span:nth-of-type(1){grid-column:1}.appointment-row>span:nth-of-type(2){grid-column:1}.appointment-row vaadin-button{grid-column:2;grid-row:1/3}.deadline{grid-template-columns:1fr auto;gap:4px 10px}.deadline strong{grid-column:1}.deadline span:nth-child(2){grid-column:1}.deadline span:nth-child(3){grid-column:2;grid-row:1/3}.vehicle-detail-body{max-height:calc(88vh - 118px);padding:14px}.vehicle-summary span+span{padding-left:10px}.detail-row{grid-template-columns:1fr auto;gap:6px 10px}.detail-row strong,.detail-row a{grid-column:1}.detail-row span{grid-column:1}.detail-row vaadin-button{grid-column:2;grid-row:1/4}.cost-overview{align-self:flex-start;flex-wrap:wrap}.nav-footer{margin-top:auto}}@media(max-width:480px){.fleet-page{padding:20px 14px 32px;gap:16px}.brand-lockup{gap:3px}.perle-logo{width:40px;height:40px}.brand-name{font-size:17px}.header-user-area{gap:4px}.header-user{display:none}.page-heading-row{gap:6px}.page-heading p{font-size:13px}.page-heading>span{font-size:11px}.live-badge{max-width:115px;white-space:normal;line-height:1.25}.page-actions{justify-content:stretch}.page-actions vaadin-button{flex:1}.metric{padding:14px 12px}.metric h3{font-size:23px}.metric span{font-size:11px}.vehicle-cards{grid-template-columns:1fr}.vehicle-summary{gap:7px 12px}.vehicle-summary span+span{padding-left:8px}.vehicle-quick-actions vaadin-button{flex:1 1 100%}.tire-card{grid-template-columns:1fr}.tire-card strong{grid-column:1}.side-nav{padding:18px 10px}.logout-button{font-size:12px}}.appointment-row>span:first-child,.detail-row>span:first-child,.tire-card>span:first-of-type,.deadline>span:first-child{font-weight:620;color:#26334b}.nav-link:focus-visible,vaadin-button:focus-visible{outline:3px solid #0012d944;outline-offset:2px}.metric-clickable{cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.metric-clickable:hover{transform:translateY(-2px);border-color:#c8ceff;box-shadow:0 8px 22px #15203b10}.metric-clickable:focus-visible{outline:3px solid #0012d944;outline-offset:2px}.metric-clickable span:after{content:" ↗";color:#0012d9;font-weight:650}.section-header{justify-content:space-between;gap:16px}.section-header h2{margin:0}.section-header a{font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}.vehicle-preview-list,.fleet-list{width:100%;gap:0;border:1px solid #e7eaf0;border-radius:14px;background:#fff;overflow:hidden}.vehicle-preview-row{display:grid;grid-template-columns:minmax(130px,.65fr) minmax(160px,1fr) minmax(100px,.55fr) minmax(150px,.8fr) auto;align-items:center;gap:14px;width:100%;box-sizing:border-box;padding:12px 16px;border-bottom:1px solid #edf0f4}.vehicle-preview-row:last-child,.fleet-table-row:last-child{border-bottom:0}.vehicle-preview-row>span:first-child{font-weight:650;color:#17233a}.vehicle-preview-row>span:not(:first-child){font-size:12px;color:#667085}.vehicle-preview-row vaadin-button{min-height:34px}.vehicle-preview-row:hover{background:#fafbff}.fleet-section-content{gap:20px}.fleet-section-content>.page-heading{margin-bottom:2px}.section-intro{gap:18px;flex-wrap:wrap}.section-intro h2{margin:0}.section-intro>span{font-size:13px;color:#667085}.fleet-table-head,.fleet-table-row{display:grid;grid-template-columns:minmax(135px,.7fr) minmax(190px,1.15fr) minmax(145px,.8fr) minmax(145px,.8fr);align-items:center;gap:18px;width:100%;box-sizing:border-box;padding:11px 18px}.fleet-table-head{background:#f8f9fc;border-bottom:1px solid #e7eaf0;color:#667085;font-size:11px;font-weight:650;letter-spacing:.02em}.fleet-table-row{min-height:64px;border-bottom:1px solid #edf0f4;font-size:13px}.fleet-table-row>span,.fleet-table-row>a{min-width:0;overflow-wrap:anywhere}.fleet-table-row>span:first-child{font-weight:650;color:#17233a}.fleet-row-detail{gap:3px}.fleet-row-detail>span:first-child{font-weight:620;color:#26334b}.fleet-row-detail>span+span{font-size:11px;color:#98a2b3}.fleet-data-row{grid-template-columns:minmax(160px,.8fr) minmax(200px,1fr) minmax(210px,1fr) auto}.document-table-row{grid-template-columns:minmax(130px,.55fr) minmax(150px,.7fr) minmax(220px,1.3fr) auto}.empty-state{box-sizing:border-box;margin:0;padding:24px;border:1px solid #e7eaf0;border-radius:14px;background:#fff;color:#667085}.fleet-total-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px 20px;padding:18px 20px;border:1px solid #e7eaf0;border-radius:15px;background:#fff}.fleet-total-card>span{font-size:12px;color:#667085}.fleet-total-card h2{grid-column:2;grid-row:1/3;margin:0}.issue-list{max-height:68vh;overflow:auto;padding:4px 22px 16px;box-sizing:border-box}.issue-list-row{padding:13px 4px;border-bottom:1px solid #edf0f4}.issue-list-info h3{font-size:15px;margin:3px 0}.issue-list-info>span{font-size:12px;color:#667085}.issue-list-info>span:first-child{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#0012d9;font-weight:650}@media(max-width:850px){.vehicle-preview-row{grid-template-columns:minmax(110px,.8fr) minmax(140px,1fr) auto;gap:8px 12px}.vehicle-preview-row>span:nth-child(3),.vehicle-preview-row>span:nth-child(4){font-size:11px}.vehicle-preview-row>span:nth-child(4){grid-column:2}.vehicle-preview-row vaadin-button{grid-column:3;grid-row:1/3}.fleet-table-head{display:none}.fleet-table-row,.fleet-data-row,.document-table-row{grid-template-columns:minmax(110px,.8fr) minmax(130px,1fr);gap:8px 14px;padding:13px 14px}.fleet-table-row>*:nth-child(n+3){font-size:12px}.section-intro{align-items:flex-start}.issue-list-row{align-items:flex-start}.issue-list-row vaadin-button{white-space:nowrap}}@media(max-width:480px){.section-header{align-items:flex-start}.section-header h2{font-size:18px}.section-header a{font-size:11px;white-space:normal;text-align:right}.vehicle-preview-row{grid-template-columns:minmax(95px,.8fr) minmax(130px,1fr) auto;padding:11px 10px;gap:7px}.vehicle-preview-row>span{font-size:11px}.vehicle-preview-row vaadin-button{font-size:11px}.section-intro{gap:5px}.section-intro>span{font-size:12px}.fleet-table-row,.fleet-data-row,.document-table-row{grid-template-columns:1fr;padding:12px}.fleet-total-card{grid-template-columns:1fr}.fleet-total-card h2{grid-column:auto;grid-row:auto}.issue-list{padding:4px 14px 14px}.issue-list-row{flex-direction:column}.issue-list-row vaadin-button{width:100%}}.fleet-table-row>a:first-child{font-weight:650;color:#17233a;text-decoration:none}.fleet-table-row>a:first-child{font-size:14px}.vehicle-preview-row>a:first-child{font-size:15px;font-weight:650;color:#17233a;text-decoration:none}.vehicle-preview-row{grid-template-columns:minmax(130px,.65fr) minmax(160px,1fr) minmax(100px,.55fr) minmax(150px,.8fr)}.nav-link{display:flex;align-items:center;gap:10px;min-height:44px;box-sizing:border-box;text-align:left}.nav-link vaadin-icon{width:20px;height:20px;flex:0 0 20px}.nav-link span{line-height:1.25}.nav-link[aria-current=page]{background:#eef0ff;color:#0012d9;font-weight:650;box-shadow:inset 3px 0 #0012d9}.nav-link[aria-current=page] vaadin-icon{color:#0012d9}.notification-area{position:relative;display:flex;align-items:center}.notification-button{width:42px;min-width:42px;padding:0;color:#344054}.notification-button vaadin-icon{width:20px;height:20px}.notification-badge{position:absolute;top:-5px;right:-5px;z-index:1;min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;border-radius:999px;background:#d92d45;color:white;font-size:10px;font-weight:700;line-height:17px;text-align:center;pointer-events:none}.notification-list{max-height:68vh;overflow:auto;padding:4px 20px 16px;box-sizing:border-box}.notification-item{padding:13px 2px;border-bottom:1px solid #edf0f4}.notification-item-details h3{font-size:15px;margin:2px 0 4px}.notification-item-details p{margin:0 0 5px;color:#475467;font-size:13px}.notification-item-details>span{font-size:11px;color:#98a2b3}.vehicle-detail-toolbar{gap:16px;flex-wrap:wrap}.vehicle-detail-toolbar h2{margin:0}.vehicle-page-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.vehicle-summary-item{padding:14px 16px;border:1px solid #e7eaf0;border-radius:13px;background:#fff}.vehicle-summary-item span{font-size:11px;color:#667085}.vehicle-summary-item h2{margin:5px 0 0;font-size:18px;overflow-wrap:anywhere}.vehicle-page-actions{flex-wrap:wrap;gap:8px;width:100%}.vehicle-page-actions vaadin-button{flex:0 1 auto}.vehicle-page-section{width:100%;border:1px solid #e7eaf0;border-radius:14px;background:#fff;overflow:hidden}.vehicle-page-section::part(summary){padding:14px 16px;font-size:14px;font-weight:650;color:#26334b}.vehicle-page-section[opened]::part(summary){border-bottom:1px solid #edf0f4}.vehicle-page-section>div{padding:10px 14px 14px;box-sizing:border-box}.vehicle-page-section .fleet-table-row{border-bottom:1px solid #edf0f4}.vehicle-page-section .fleet-table-row:last-child{border-bottom:0}.vehicle-page-section .empty-state{border:0;padding:12px}.fleet-message-row{padding:13px 16px;border-bottom:1px solid #edf0f4}.fleet-message-row:last-child{border-bottom:0}.fleet-message-row .fleet-row-detail>span:first-child{font-weight:650}.fleet-message-row .fleet-row-detail>span:nth-child(2){font-size:14px;color:#17233a;padding:3px 0}.fleet-message-row .fleet-row-detail>span:last-child{font-size:11px;color:#667085}.conversation-list{max-height:44vh;overflow:auto;padding:2px 18px;box-sizing:border-box}.conversation-message{margin:5px 0;padding:12px 14px;border:1px solid #e7eaf0;border-radius:12px;background:#f8f9fc}.conversation-message>span{font-size:11px;color:#667085}.conversation-message p{margin:6px 0 0;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}.cost-vehicle-card{width:100%;margin:0 0 14px;padding:0;border:1px solid #e7eaf0;border-radius:14px;background:#fff;overflow:hidden}.cost-vehicle-card>a{padding:12px 16px;text-decoration:none;font-size:13px;font-weight:600}.cost-vehicle-heading{padding:14px 16px;border-bottom:1px solid #e7eaf0;background:#f8f9fc;gap:12px}.cost-vehicle-heading h2{margin:0;font-size:17px}.cost-vehicle-heading span{font-size:12px;color:#667085}.cost-vehicle-heading>vaadin-vertical-layout span:first-child{font-weight:650;color:#26334b}@media(max-width:850px){.vehicle-page-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.fleet-message-row{align-items:flex-start}.fleet-message-row vaadin-button{white-space:nowrap}.cost-vehicle-heading{flex-wrap:wrap;align-items:flex-start}.cost-vehicle-heading h2{font-size:15px}}@media(max-width:480px){.nav-link{min-height:46px;padding:12px 13px;gap:10px;font-size:14px}.nav-link vaadin-icon{width:19px;height:19px;flex-basis:19px}.notification-button{width:38px;min-width:38px;min-height:38px}.header-user-area{gap:6px}.vehicle-page-summary{grid-template-columns:1fr 1fr;gap:8px}.vehicle-summary-item{padding:11px}.vehicle-summary-item h2{font-size:15px}.vehicle-page-actions vaadin-button{flex:1 1 100%}.vehicle-detail-toolbar{align-items:flex-start}.vehicle-detail-toolbar h2{font-size:18px}.fleet-message-row{flex-direction:column;padding:12px}.fleet-message-row vaadin-button{width:100%}.notification-list{padding:4px 13px 14px}.notification-item{align-items:flex-start}.notification-item vaadin-button{font-size:12px;white-space:nowrap}.vehicle-preview-row{grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;padding:12px}.vehicle-preview-row>a:first-child{grid-column:1;grid-row:1;font-size:15px}.vehicle-preview-row>span:first-of-type{grid-column:1;grid-row:2}.vehicle-preview-row>span:nth-of-type(2){grid-column:2;grid-row:1;text-align:right;font-size:12px}.vehicle-preview-row>span:nth-of-type(3){grid-column:1/-1;grid-row:3;font-size:12px}.vehicle-preview-row>span{font-size:12px}}.pending-attachment{padding:7px 10px;border-radius:8px;background:#f8f9fc;color:#475467;font-size:13px}.pending-attachment vaadin-button{min-height:34px;margin-left:auto}.conversation-attachments{gap:7px;margin-top:8px;padding-top:8px;border-top:1px solid #e7eaf0}.conversation-attachments>a{display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:max-content;max-width:100%;font-size:12px;overflow-wrap:anywhere}.conversation-attachment-preview{display:block;width:auto;max-width:min(420px,70vw);max-height:280px;object-fit:contain;border:1px solid #e7eaf0;border-radius:10px;background:#fff}vaadin-app-layout::part(navbar){background: rgba(255,255,255,0.78);backdrop-filter: blur(18px) saturate(160%);-webkit-backdrop-filter: blur(18px) saturate(160%);border-bottom: 1px solid rgba(15,23,42,0.08);box-shadow: 0 1px 2px rgba(15,23,42,0.03),0 8px 24px rgba(15,23,42,0.05)}vaadin-app-layout::part(drawer){background: rgba(248,250,252,0.94);border-right: 1px solid rgba(15,23,42,0.07)}vaadin-drawer-toggle{border-radius: 12px;transition: background 160ms ease,transform 160ms ease}vaadin-drawer-toggle:hover{background: rgba(37,99,235,0.08)}vaadin-drawer-toggle:active{transform: scale(0.95)}