:root{
 --primary:#b91c1c;--primary2:#dc2626;--dark:#111827;--dark2:#1f2937;
 --muted:#6b7280;--bg:#f4f6f8;--line:#e5e7eb;--ok:#15803d;
 --warn:#b45309;--info:#0369a1;--purple:#6d28d9
}
*{box-sizing:border-box}
body{margin:0;font-family:Tahoma,Arial,sans-serif;background:var(--bg);color:var(--dark)}
a{text-decoration:none;color:inherit}
.topbar{background:#fff;padding:12px 4%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:12px}.brand-icon{font-size:32px}.brand strong{font-size:18px}.brand small{display:block;color:var(--muted);margin-top:3px}
.user-menu{display:flex;align-items:center;gap:10px}
.nav{background:var(--dark);padding:0 4%;display:flex;gap:4px;position:sticky;top:66px;z-index:9}
.nav a{color:#fff;padding:14px 18px;white-space:nowrap}.nav a.active,.nav a:hover{background:var(--primary)}
.container{width:min(1280px,94%);margin:24px auto}
.grid{display:grid;gap:16px}.stats{grid-template-columns:repeat(5,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 4px 16px rgba(0,0,0,.045)}
.stat{display:flex;justify-content:space-between;align-items:center;min-height:112px}.stat b{display:block;font-size:31px;margin-top:7px}.stat span{color:var(--muted)}
.stat-icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:25px;background:#f3f4f6}
h1{font-size:27px;margin:0 0 18px}h2{margin:0 0 14px}h3{margin:0 0 12px}
.toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.btn{border:0;border-radius:10px;padding:10px 16px;cursor:pointer;display:inline-block;font:inherit}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary2)}
.btn-light{background:#f3f4f6}.btn-danger{background:#fee2e2;color:#991b1b}.btn-success{background:#dcfce7;color:#166534}
.btn-sm{padding:7px 11px;font-size:13px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
th,td{padding:12px;border-bottom:1px solid var(--line);text-align:right;vertical-align:middle}th{background:#f9fafb;color:#374151}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
label{display:block;font-weight:bold;margin-bottom:6px}.input,select,textarea{width:100%;padding:11px;border:1px solid #d1d5db;border-radius:9px;font:inherit;background:#fff}
textarea{min-height:105px}.full{grid-column:1/-1}
.alert{padding:12px 16px;border-radius:10px;margin-bottom:16px}.success{background:#dcfce7;color:#166534}.error{background:#fee2e2;color:#991b1b}
.search{max-width:430px}.empty{text-align:center;color:var(--muted);padding:35px}
.badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:bold}
.badge.received{background:#e0f2fe;color:#075985}.badge.inspecting{background:#fef3c7;color:#92400e}.badge.approval{background:#ede9fe;color:#5b21b6}
.badge.repairing{background:#ffedd5;color:#9a3412}.badge.ready{background:#dcfce7;color:#166534}.badge.delivered{background:#e5e7eb;color:#374151}.badge.cancelled{background:#fee2e2;color:#991b1b}
.meta{color:var(--muted);font-size:13px;line-height:1.7}
.workorder-shell{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.workorder-main{display:grid;gap:16px}.workorder-side{display:grid;gap:16px;position:sticky;top:130px}
.hero-order{background:linear-gradient(135deg,#111827,#1f2937);color:#fff;border:0}
.hero-order .meta{color:#d1d5db}.hero-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.vehicle-title{font-size:25px;font-weight:bold;margin-bottom:7px}.order-number{font-size:14px;color:#fecaca}
.status-steps{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:18px}
.status-step{padding:9px 6px;border-radius:9px;background:#374151;text-align:center;font-size:11px;color:#d1d5db}
.status-step.active{background:#b91c1c;color:#fff}.status-step.done{background:#166534;color:#fff}
.section-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}.section-tabs a{padding:9px 13px;background:#f3f4f6;border-radius:9px;font-size:13px}
.item-row{display:grid;grid-template-columns:1.5fr .55fr .7fr .7fr auto;gap:8px;align-items:end;padding:10px 0;border-bottom:1px solid var(--line)}
.total-box{font-size:22px;font-weight:bold;color:var(--primary)}
.timeline{border-right:3px solid #d1d5db;padding-right:20px}.timeline-item{position:relative;margin-bottom:18px}.timeline-item:before{content:"";position:absolute;right:-28px;top:5px;width:13px;height:13px;border-radius:50%;background:var(--primary)}
.image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.image-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.image-card img{width:100%;height:150px;object-fit:cover;display:block}.image-card .cap{padding:9px;font-size:12px}
.kpi{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line)}.kpi:last-child{border:0}
@media(max-width:1050px){.workorder-shell{grid-template-columns:1fr}.workorder-side{position:static}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.form-grid{grid-template-columns:1fr}.topbar{padding:12px 3%}.nav{padding:0;overflow:auto;top:64px}.nav a{padding:13px 14px}.user-menu span{display:none}
table{font-size:13px}th,td{padding:9px}.status-steps{grid-template-columns:repeat(2,1fr)}.item-row{grid-template-columns:1fr 1fr}.image-grid{grid-template-columns:repeat(2,1fr)}}


/* V0.4 - Vehicle Health Profile */
.search-bar{display:flex;gap:10px;margin-bottom:18px}.search-bar .input{flex:1}
.vehicle-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.vehicle-card{display:flex;flex-direction:column;gap:16px}
.vehicle-card-head{display:flex;align-items:center;gap:13px}
.vehicle-avatar{width:54px;height:54px;border-radius:16px;background:#fee2e2;display:grid;place-items:center;font-size:27px}
.vehicle-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vehicle-facts div{background:#f9fafb;border:1px solid var(--line);border-radius:11px;padding:10px}
.vehicle-facts span{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}
.vehicle-facts b{font-size:13px}
.vehicle-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.full-width{grid-column:1/-1}
.toolbar-actions{display:flex;gap:8px;flex-wrap:wrap}
.vehicle-profile-hero{background:linear-gradient(135deg,#111827,#283244);color:#fff;display:flex;justify-content:space-between;align-items:center;border:0}
.vehicle-profile-title{display:flex;align-items:center;gap:17px}.vehicle-big-icon{font-size:48px}
.profile-kicker{color:#fca5a5;font-size:13px;margin-bottom:5px}.vehicle-profile-title h2{font-size:27px;margin:0 0 7px}
.meta-light{color:#d1d5db;line-height:1.8}.profile-owner{text-align:left}.profile-owner span,.profile-owner small{display:block;color:#d1d5db}.profile-owner b{display:block;font-size:18px;margin:5px 0}
.health-alerts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}
.health-alert{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;border-radius:11px;padding:12px;font-weight:bold}
.health-stats{grid-template-columns:repeat(4,1fr);margin:16px 0}.stat-mini span{color:var(--muted);display:block;margin-bottom:8px}.stat-mini b{font-size:22px}
.profile-layout{display:grid;grid-template-columns:1fr 330px;gap:18px;align-items:start}.profile-main{display:grid;gap:16px}.profile-side{display:grid;gap:16px;position:sticky;top:130px}
.order-history{display:grid;gap:10px}.order-history-row{border:1px solid var(--line);border-radius:12px;padding:13px;display:flex;justify-content:space-between;gap:15px;align-items:center;transition:.15s}
.order-history-row:hover{border-color:#fca5a5;background:#fffafa}.order-history-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.order-history-meta small{color:var(--muted)}
.profile-side label{margin-top:11px}.whatsapp-wide{width:100%;text-align:center}
@media(max-width:1050px){.profile-layout{grid-template-columns:1fr}.profile-side{position:static}.vehicle-card-grid{grid-template-columns:1fr}.health-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.vehicle-profile-hero{align-items:flex-start;gap:18px;flex-direction:column}.profile-owner{text-align:right}.vehicle-facts{grid-template-columns:repeat(2,1fr)}.health-alerts{grid-template-columns:1fr}.health-stats{grid-template-columns:1fr 1fr}.order-history-row{align-items:flex-start;flex-direction:column}.order-history-meta{justify-content:flex-start}.search-bar{flex-wrap:wrap}.search-bar .input{flex-basis:100%}}


/* V0.5 - Reception */
.reception-layout{display:grid;grid-template-columns:1fr 315px;gap:18px;align-items:start}
.reception-main{display:grid;gap:16px}.reception-side{display:grid;gap:16px;position:sticky;top:130px}
.section-title{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.section-title span{width:32px;height:32px;border-radius:10px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:bold}
.section-title h2{margin:0}.reception-vehicle-grid{grid-template-columns:repeat(3,1fr)}
.fuel-range{width:100%;accent-color:var(--primary);margin-top:12px}
.approval-box{background:#f9fafb;border:1px solid var(--line);padding:13px;border-radius:10px}
.approval-box label{margin:0;font-weight:normal}.approval-box input{margin-left:7px}
.reception-submit{display:flex;justify-content:flex-end}.btn-large{font-size:16px;padding:13px 22px}
.reception-help{background:linear-gradient(135deg,#111827,#273449);color:#fff;border:0}
.reception-help h3{color:#fff}.reception-step{padding:10px 0;border-bottom:1px solid #ffffff22;color:#e5e7eb}
.reception-step:last-child{border:0}.recent-receptions{display:grid}
.recent-receptions a{padding:11px 0;border-bottom:1px solid var(--line)}
.recent-receptions a:last-child{border:0}.recent-receptions b,.recent-receptions span{display:block}
.recent-receptions span{color:var(--muted);font-size:12px;margin-top:4px}
@media(max-width:1050px){.reception-layout{grid-template-columns:1fr}.reception-side{position:static}.reception-vehicle-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.reception-vehicle-grid{grid-template-columns:1fr}.reception-submit .btn{width:100%}.toolbar-actions{width:100%}}

/* V0.6 */
.invoice-stats,.invoice-summary{grid-template-columns:repeat(4,1fr);margin-bottom:16px}
.invoice-filter{display:grid;grid-template-columns:1fr 220px auto;gap:10px;margin-bottom:16px}
.table-wrap{overflow:auto}.invoice-unpaid{background:#fee2e2;color:#991b1b}.invoice-partial{background:#fef3c7;color:#92400e}.invoice-paid{background:#dcfce7;color:#166534}
.invoice-layout{display:grid;grid-template-columns:1fr 330px;gap:18px;align-items:start}.invoice-main,.invoice-side{display:grid;gap:16px}.invoice-side{position:sticky;top:130px}.invoice-side label{margin-top:11px}
@media(max-width:1050px){.invoice-layout{grid-template-columns:1fr}.invoice-side{position:static}.invoice-stats,.invoice-summary{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.invoice-filter{grid-template-columns:1fr}}


/* V0.7 - Workshop Kanban */
.board-search{display:flex;gap:10px;margin-bottom:16px}
.board-search .input{flex:1}
.board-message{padding:11px 15px;border-radius:10px;margin-bottom:14px;font-weight:bold}
.board-success{background:#dcfce7;color:#166534}
.board-error{background:#fee2e2;color:#991b1b}
.kanban-board{display:grid;grid-template-columns:repeat(5,minmax(270px,1fr));gap:13px;overflow-x:auto;padding-bottom:10px;align-items:start}
.kanban-column{background:#eef1f4;border:1px solid #dde2e7;border-radius:15px;min-height:560px;padding:10px}
.kanban-header{display:flex;justify-content:space-between;align-items:center;padding:7px 5px 12px}
.kanban-header>div{display:flex;align-items:center;gap:8px}
.kanban-icon{font-size:20px}
.kanban-count{background:#fff;border:1px solid var(--line);min-width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-weight:bold}
.kanban-list{min-height:470px;display:grid;gap:10px;align-content:start;border-radius:11px;transition:.15s}
.kanban-list.drag-over{background:#fee2e2;outline:2px dashed #dc2626;outline-offset:2px;padding:6px}
.kanban-card{background:#fff;border:1px solid #e2e5e9;border-radius:13px;padding:12px;box-shadow:0 3px 10px #0000000b;cursor:grab;transition:.15s}
.kanban-card:hover{border-color:#fca5a5;transform:translateY(-1px)}
.kanban-card.dragging{opacity:.45;transform:rotate(1deg)}
.kanban-card-top{display:flex;justify-content:space-between;align-items:center}
.order-code{font-size:11px;color:var(--muted)}
.drag-handle{font-size:18px;color:#9ca3af;letter-spacing:-3px}
.kanban-card-link{display:block}
.kanban-card h3{font-size:16px;margin:8px 0 4px}
.plate-line{font-size:13px;font-weight:bold;color:var(--primary)}
.kanban-info{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px}
.kanban-info div{background:#f9fafb;border-radius:8px;padding:7px}
.kanban-info span{display:block;color:var(--muted);font-size:10px;margin-bottom:3px}
.kanban-info b{font-size:11px}
.kanban-complaint{font-size:12px;line-height:1.6;color:#374151;background:#fff7ed;padding:8px;border-radius:8px;margin:9px 0 0;max-height:58px;overflow:hidden}
.kanban-due{font-size:11px;margin-top:9px;color:#075985;background:#e0f2fe;padding:7px;border-radius:8px}
.kanban-due.late{color:#991b1b;background:#fee2e2}
.kanban-total{text-align:left;font-weight:bold;color:#166534;margin-top:10px;font-size:13px}
.kanban-empty{display:none;text-align:center;color:#9ca3af;font-size:12px;padding:20px 5px}
.kanban-column.is-empty .kanban-empty{display:block}
@media(max-width:900px){
 .kanban-board{grid-template-columns:repeat(5,280px)}
 .board-search{flex-wrap:wrap}.board-search .input{flex-basis:100%}
}


/* V0.7.1 - Board layout and drag clarity */
.board-help{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;
    padding:11px 14px;border-radius:11px;margin-bottom:14px;font-size:13px
}
.kanban-board{
    width:100%;
    display:grid;
    grid-template-columns:repeat(5,minmax(250px,1fr));
    gap:14px;
    overflow-x:auto;
    padding:2px 2px 18px;
    align-items:start
}
.kanban-column{
    min-width:250px;
    min-height:620px;
    background:#f8fafc;
    border:1px solid #dbe2ea;
    border-top:5px solid #94a3b8;
    border-radius:16px;
    padding:10px;
    transition:.18s
}
.kanban-column.received{border-top-color:#2563eb}
.kanban-column.inspecting{border-top-color:#7c3aed}
.kanban-column.approval{border-top-color:#d97706}
.kanban-column.repairing{border-top-color:#dc2626}
.kanban-column.ready{border-top-color:#16a34a}
.kanban-column.drag-over{
    background:#fff7ed;
    outline:3px solid #f97316;
    outline-offset:2px;
    transform:translateY(-2px)
}
.kanban-header{padding:8px 5px 10px}
.kanban-title-wrap{display:flex;gap:9px;align-items:center}
.kanban-title-wrap b{display:block;font-size:15px}
.kanban-title-wrap small{display:block;color:#64748b;font-size:10px;margin-top:2px}
.kanban-drop-zone{
    border:2px dashed #cbd5e1;
    border-radius:11px;
    padding:9px;
    text-align:center;
    color:#94a3b8;
    font-size:11px;
    margin-bottom:9px;
    transition:.15s
}
.is-dragging-card .kanban-drop-zone{
    border-color:#f97316;
    background:#fff7ed;
    color:#c2410c;
    font-weight:bold
}
.kanban-drop-zone.drag-over{
    border-color:#ea580c;
    background:#ffedd5;
    color:#9a3412;
    transform:scale(1.02)
}
.kanban-list{min-height:420px;gap:12px}
.kanban-card{
    padding:13px;
    border-radius:14px;
    box-shadow:0 5px 16px #0f172a12;
    border:1px solid #e2e8f0
}
.kanban-card-top{border-bottom:1px solid #eef2f7;padding-bottom:7px}
.drag-handle{
    border:0;background:#f1f5f9;color:#475569;border-radius:8px;
    width:34px;height:30px;cursor:grab;font-size:18px;line-height:1
}
.drag-handle:active{cursor:grabbing}
.kanban-card h3{font-size:17px;margin:10px 0 5px}
.plate-line{
    display:inline-block;background:#111827;color:#fff;
    padding:4px 8px;border-radius:7px;font-size:12px
}
.kanban-info{margin-top:12px}
.kanban-info div{padding:9px}
.kanban-complaint{max-height:68px}
.kanban-total{font-size:14px}
.kanban-move{
    display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;
    border-top:1px solid #eef2f7;margin-top:11px;padding-top:10px
}
.kanban-move label{font-size:11px;color:#64748b;margin:0}
.kanban-move select{height:34px;padding:4px 8px;font-size:11px}
.kanban-empty{padding:18px 5px;color:#94a3b8}
@media(max-width:1400px){
    .kanban-board{grid-template-columns:repeat(5,270px)}
}
@media(max-width:700px){
    .kanban-board{grid-template-columns:repeat(5,85vw)}
    .kanban-column{min-width:85vw}
}