@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root{--navy:#0b1e35;--blue:#2167e8;--bg:#f4f7fb;--line:#e7ebf1;--text:#172033;--muted:#748096}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',Arial,sans-serif}.sidebar{background:linear-gradient(180deg,#0d2240 0%,#091a30 100%);width:250px;color:#d8e2f1;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:28px 14px}.brand{display:flex;flex-direction:column;align-items:center;padding:10px 10px 20px;margin-bottom:6px;position:relative}.brand::after{content:'';position:absolute;bottom:0;left:20px;right:20px;height:1px;background:linear-gradient(90deg,transparent,#29415d 30%,#29415d 70%,transparent)}.brand-ww{font:800 38px Manrope;color:#fff;letter-spacing:.04em;line-height:1}.brand-name{font:600 13px 'DM Sans';color:rgba(255,255,255,.7);letter-spacing:.06em;margin-top:4px}.brand small{display:block;color:#91a1b8;font:500 10px 'DM Sans';letter-spacing:.08em;text-transform:uppercase;margin-top:3px}nav{display:grid;gap:4px}nav a{color:#aab8c9;text-decoration:none;border-radius:8px;padding:11px 12px;display:flex;gap:13px;align-items:center;font-size:14px;transition:all .15s ease}nav a.active,nav a:hover{background:rgba(33,103,232,.15);color:white}nav a.active{background:rgba(33,103,232,.22);box-shadow:inset 3px 0 0 #3b82f6}.side-bottom{margin-top:auto;border-top:1px solid #29415d;padding:18px 10px 2px;font-size:13px;display:flex;justify-content:space-between}.side-bottom a{color:#aab8c9;text-decoration:none}main{margin-left:250px;min-height:100vh;padding:0 42px 40px}header{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.eyebrow{margin:0 0 4px;color:#72819a;font-size:10px;font-weight:700;letter-spacing:.12em}h1{font:800 25px Manrope;margin:0}.header-user{display:flex;align-items:center;gap:10px;font-size:13px}.header-user small{display:block;color:var(--muted);margin-top:2px}.avatar{display:grid;place-items:center;border-radius:50%;height:34px;width:34px;background:#d9e6ff;color:#2566d5;font-weight:700}.welcome{padding:33px 0 26px;display:flex;justify-content:space-between;align-items:center}.welcome h2{font:700 21px Manrope;margin:0 0 6px}.welcome p,.panel-title p{margin:0;color:var(--muted);font-size:13px}.primary-action,button{background:var(--blue);color:white;border:0;border-radius:7px;padding:11px 15px;text-decoration:none;font-weight:600;font-size:13px}.metrics{display:grid;grid-template-columns:repeat(6,minmax(130px,1fr));gap:14px}.metrics article,.panel,.notice{background:white;border:1px solid var(--line);border-radius:10px}.metrics article{padding:17px}.metric-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;font-size:15px;font-weight:700}.blue{background:#e6efff;color:#2869e5}.green{background:#e8f8ef;color:#22965a}.orange{background:#fff1dc;color:#e98914}.red{background:#ffe8e9;color:#df4b54}.purple{background:#f0eafd;color:#7953d2}.teal{background:#e1f7f5;color:#15968d}.metrics p{font-size:12px;color:var(--muted);margin:13px 0 3px}.metrics strong{font:800 24px Manrope}.grid{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin-top:22px}.panel{min-height:230px;padding:21px}.panel-title{display:flex;justify-content:space-between;align-items:start}.panel h3{font:700 15px Manrope;margin:0 0 4px}.panel-title a{font-size:12px;color:var(--blue);font-weight:600;text-decoration:none}table{width:100%;border-collapse:collapse;margin-top:19px;font-size:12px}th{text-align:left;font-size:10px;color:#8792a3;letter-spacing:.07em;padding:0 0 10px}td{border-top:1px solid #edf0f5;padding:12px 0}.tag{font-size:10px;color:#b36c11;background:#fff4dc;padding:4px 7px;border-radius:10px}.empty{color:#8390a4;font-size:13px;text-align:center;padding:68px 0}.notice{margin-top:20px;padding:16px 18px;display:flex;gap:12px;background:#f9fbff}.notice span{color:#3473e6}.notice strong{font-size:13px}.notice p{color:var(--muted);font-size:12px;margin:4px 0 0}.login-page{min-height:100vh;background:linear-gradient(135deg,#091a30 0%,#0d2a4a 40%,#153f70 100%);display:grid;place-items:center}.login-card{width:min(420px,calc(100% - 32px));background:#fff;padding:44px 40px 36px;border-radius:18px;box-shadow:0 24px 65px #020a1670;text-align:center}.login-logo{margin-bottom:20px;display:flex;justify-content:center}.login-logo img{width:140px;height:auto;object-fit:contain;filter:drop-shadow(0 4px 16px rgba(0,0,0,.08))}.login-card h1{margin:0 0 8px;font:800 24px Manrope;color:#0d1b2a}.login-card .eyebrow{margin-bottom:6px}.muted{color:var(--muted);font-size:14px;line-height:1.5;margin-bottom:26px}.login-card form{display:grid;gap:17px;text-align:left}.login-card label{font-size:13px;font-weight:600;display:grid;gap:7px}.login-card input{border:1px solid #dbe1eb;border-radius:7px;padding:11px;font:14px 'DM Sans';outline-color:var(--blue)}.login-card button{margin-top:5px;cursor:pointer}.error{background:#ffeaeb;color:#a53f46;padding:9px;border-radius:6px;font-size:13px}@media(max-width:1050px){.metrics{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){.sidebar{width:64px;padding:20px 8px}.brand::after{display:none}.brand-name,nav span,.side-bottom{display:none}.brand-ww{font-size:22px}main{margin-left:64px;padding:0 18px}.grid{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.welcome{align-items:start;gap:16px}.header-user div{display:none}}

.form-input { border: 1px solid #ccc; border-radius: 6px; padding: 12px; font-size: 15px; font-family: 'DM Sans', Arial, sans-serif; outline-color: var(--blue); width: 100%; box-sizing: border-box; }
.form-input:focus { border-color: var(--blue); }
.table-action{display:inline-block;color:#fff;background:var(--blue);border-radius:6px;padding:7px 9px;margin:2px 3px 2px 0;text-decoration:none;font-size:11px;font-weight:600}.table-action.secondary{background:#e9eef6;color:#2d405b}

/* ═══════════════════════════════════════════════════
   FLEET DASHBOARD — Central Visual da Frota
   ═══════════════════════════════════════════════════ */

/* — Hero header ——————————————————————————————————— */
.fd-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:35px 0 25px}
.fd-hero-left{min-width:0}
.fd-eyebrow{display:block;color:#70819c;font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;margin-bottom:6px}
.fd-title{font:800 32px/1.1 Manrope;margin:0 0 8px;letter-spacing:-.03em;color:#0d1b2a}
.fd-subtitle{margin:0;color:#6b7c93;font-size:14px;font-weight:500}
.fd-hero-count{text-align:right;flex-shrink:0;background:#fff;padding:16px 24px;border-radius:14px;box-shadow:0 8px 24px rgba(13,27,42,.04);border:1px solid rgba(226,232,240,.8)}
.fd-hero-count strong{display:block;font:800 42px/1 Manrope;letter-spacing:-.04em;color:#1e3a8a}
.fd-hero-count span{font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-top:4px;display:block}

/* — Filter / indicator strip —————————————————————— */
.fd-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:28px;padding:8px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.02)}
.fd-filter-label{padding:0 8px 0 12px;color:#94a3b8;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}

.fd-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent !important;background:transparent !important;color:#64748b !important;border-radius:10px;padding:10px 14px !important;font:600 13px 'DM Sans' !important;cursor:pointer;white-space:nowrap;transition:all .15s ease}
.fd-chip:hover{background:#f8fafc !important;color:#334155 !important}
.fd-chip.active{background:#eff6ff !important;color:#1d4ed8 !important;border-color:#bfdbfe !important;box-shadow:0 2px 6px rgba(29,78,216,.08)}
.fd-chip b{font:800 13px Manrope;color:#0f172a;margin-left:4px;background:rgba(0,0,0,.04);padding:2px 8px;border-radius:20px}
.fd-chip.active b{color:#1e40af;background:#dbeafe}

.fd-dot{display:block;width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px #fff}
.fd-dot--all{background:#cbd5e1}
.fd-dot--red{background:#ef4444}
.fd-dot--orange{background:#f59e0b}
.fd-dot--purple{background:#8b5cf6}
.fd-dot--yellow{background:#eab308}
.fd-dot--blue{background:#3b82f6}

.fd-search-wrap{margin-left:auto;flex-shrink:0;position:relative}
.fd-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:16px}
.fd-search{border:1px solid #e2e8f0;border-radius:10px;padding:10px 14px 10px 38px;font:500 13px 'DM Sans';color:#334155;outline-color:#3b82f6;width:240px;background:#f8fafc;transition:all .2s ease}
.fd-search:focus{border-color:#93c5fd;background:#fff;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.fd-search::placeholder{color:#94a3b8}

/* — Board container ——————————————————————————————— */
.fd-board{background:transparent;border:0;padding:0}
.fd-board-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding:0 4px}
.fd-board-title{font:800 18px Manrope;color:#0f172a}
.fd-board-counter{font-size:12px;color:#64748b;font-weight:500;background:#fff;padding:6px 12px;border-radius:20px;border:1px solid #e2e8f0}
.fd-board-counter b{font:800 13px Manrope;color:#0f172a}

/* — Vehicle grid —————————————————————————————————— */
.fd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.fd-empty{grid-column:1/-1;padding:80px 20px;text-align:center;color:#64748b;font-size:15px;background:#fff;border-radius:16px;border:1px dashed #cbd5e1}

/* — Vehicle card (vc) ————————————————————————————— */
.vc{position:relative;display:block;text-decoration:none !important;color:var(--text) !important;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:20px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px -1px rgba(0,0,0,.02),0 2px 4px -1px rgba(0,0,0,.02)}
.vc[hidden]{display:none}

/* Hover */
.vc:hover{transform:translateY(-4px);box-shadow:0 12px 24px -8px rgba(15,23,42,.15);border-color:#cbd5e1}
.vc:hover .vc-arrow{opacity:1;transform:translateX(0);color:#3b82f6}

/* Status text at top */
.vc-status{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;padding:4px 10px;border-radius:20px;background:#f1f5f9;color:#64748b}

/* Priority colours */
.vc--revisao-vencida{border-top:4px solid #ef4444}
.vc--revisao-vencida .vc-status{background:#fef2f2;color:#dc2626}
.vc--revisao-proxima{border-top:4px solid #f59e0b}
.vc--revisao-proxima .vc-status{background:#fffbeb;color:#d97706}
.vc--manutencao{border-top:4px solid #8b5cf6}
.vc--manutencao .vc-status{background:#f5f3ff;color:#7c3aed}
.vc--multa{border-top:4px solid #eab308}
.vc--multa .vc-status{background:#fefce8;color:#ca8a04}
.vc--contrato{border-top:4px solid #3b82f6}
.vc--contrato .vc-status{background:#eff6ff;color:#2563eb}
.vc--normal{border-top:4px solid #e2e8f0}
.vc--normal .vc-status{background:#f8fafc;color:#64748b}

/* — Plate element (Mercosul-inspired) ————————————— */
.vc-plate-wrap{display:flex;justify-content:center;margin-bottom:16px}
.vc-plate{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:140px;padding:10px 16px;border:3px solid #0f172a;border-radius:8px;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.05)}
.vc-plate-bar{position:absolute;top:0;left:0;right:0;height:7px;background:#1d4ed8;border-radius:4px 4px 0 0}
.vc-plate-text{font:800 22px/1 Manrope;letter-spacing:.08em;color:#0f172a;padding-top:4px}

/* — Card content —————————————————————————————————— */
.vc-model{color:#64748b;font-size:12px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:12px}
.vc-details{display:grid;gap:6px;margin-bottom:12px;padding:10px 12px;background:#f8fafc;border-radius:8px}
.vc-detail-item{display:flex;align-items:flex-start;gap:6px;font-size:11px;color:#475569;font-weight:600;line-height:1.3;word-wrap:break-word}
.vc-detail-icon{font-size:12px;opacity:0.7;margin-top:1px}
.vc-footer{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid #f1f5f9}

.vc-indicators{display:flex;gap:6px;align-items:center}
.vc-ind{display:block;width:10px;height:10px;border-radius:50%}
.vc-ind--red{background:#ef4444;box-shadow:0 0 0 3px #fef2f2}
.vc-ind--orange{background:#f59e0b;box-shadow:0 0 0 3px #fffbeb}
.vc-ind--purple{background:#8b5cf6;box-shadow:0 0 0 3px #f5f3ff}
.vc-ind--yellow{background:#eab308;box-shadow:0 0 0 3px #fefce8}
.vc-ind--blue{background:#3b82f6;box-shadow:0 0 0 3px #eff6ff}
.vc-ind--green{background:#22c55e;box-shadow:0 0 0 3px #f0fdf4}

.vc-arrow{font-size:16px;font-weight:700;color:#cbd5e1;opacity:0;transform:translateX(-8px);transition:all .2s ease}

/* — Responsive breakpoints ———————————————————————— */
@media(max-width:900px){
  .fd-strip{padding:8px}
  .fd-search-wrap{width:100%;margin-left:0;margin-top:8px}
  .fd-search{width:100%}
  .fd-hero{flex-direction:column;align-items:flex-start}
}


/* Administração de usuários e permissões */
.accounts-page,.accounts-form-page{padding:30px 0}
.accounts-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px}
.accounts-head h2,.form-card h2{font:800 23px Manrope;margin:6px 0}
.accounts-head p{margin:0;color:var(--muted);font-size:13px}
.accounts-actions,.form-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.secondary-action{display:inline-block;background:#eef2f7;color:#30445f;border-radius:7px;padding:10px 13px;text-decoration:none;font-size:12px;font-weight:700;border:0}
.accounts-table-wrap{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:auto}
.accounts-table{margin:0;min-width:920px}
.accounts-table th{padding:14px 16px;background:#f8fafc}
.accounts-table td{padding:13px 16px;vertical-align:middle}
.owner-badge,.profile-tag,.status-active,.status-inactive{display:inline-block;border-radius:999px;padding:4px 8px;font-size:9px;font-weight:800;margin:2px 4px 2px 0}
.owner-badge{background:#e7efff;color:#2869e5}
.profile-tag{background:#eef2f7;color:#51637c}
.status-active{background:#e8f8ef;color:#27875a}
.status-inactive{background:#fff2df;color:#b87516}
.whatsapp-action{display:inline-block;background:#e8f8ef;color:#238052;border-radius:7px;padding:7px 10px;text-decoration:none;font-size:10px;font-weight:800}
.form-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:25px;max-width:650px}
.form-card.wide{max-width:950px}
.accounts-form{display:grid;gap:16px;margin-top:22px}
.accounts-form label{display:grid;gap:7px;font-size:12px;font-weight:700}
.accounts-form label small{color:var(--muted);font-weight:500}
.accounts-form input,.accounts-form select{width:100%;box-sizing:border-box}
.accounts-form select[multiple]{min-height:120px}
.error{color:#b23f49;font-size:11px;font-weight:600}
.permissions-box{border:1px solid var(--line);border-radius:10px;padding:15px;background:#fbfcfe;max-height:430px;overflow:auto}
.permissions-box ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:7px}
.permissions-box li{background:#fff;border:1px solid #edf0f5;border-radius:7px;padding:9px;font-size:11px}
.permissions-box label{display:flex;flex-direction:row;align-items:center;gap:8px;font-weight:600}
.profile-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:14px}
.profile-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.profile-card h3{font:800 15px Manrope;margin:7px 0 3px}
.profile-card p{margin:0;color:var(--muted);font-size:11px}
.profile-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#e8f8ef;color:#27875a;font-weight:800}
@media(max-width:900px){.accounts-head{align-items:flex-start;flex-direction:column}.profile-grid{grid-template-columns:1fr}.permissions-box ul{grid-template-columns:1fr}}