:root { --red:#e6002d; --ink:#17202a; --muted:#6b7785; --line:#e5e9ed; --soft:#f6f7f9; --green:#18864a; --amber:#a96a00; }
*{box-sizing:border-box} body{margin:0;background:var(--soft);color:var(--ink);font-family:Arial,"Noto Sans Thai",sans-serif;font-size:15px}.app-shell{display:flex;min-height:100vh}.sidebar{width:250px;background:#14191f;color:#f5f7f8;padding:22px 14px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:700;padding:0 9px 25px}.brand img{width:45px;height:36px;object-fit:cover;object-position:center;border-radius:7px}.brand span{letter-spacing:.4px}nav{display:grid;gap:5px}.nav-item{border:0;background:transparent;color:#bdc6ce;text-align:left;padding:12px 13px;border-radius:9px;font-size:15px;cursor:pointer}.nav-item:hover,.nav-item.active{color:white;background:#2a323a}.nav-item.active{box-shadow:inset 3px 0 var(--red)}.sidebar-note{margin-top:auto;background:#222a32;border-radius:10px;padding:12px;color:#9ca8b3;font-size:12px;line-height:1.6}.sidebar-note b{color:#fff}.main-content{flex:1;min-width:0}.topbar{height:82px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid var(--line)}.eyebrow{font-size:11px;letter-spacing:1px;font-weight:700;color:var(--red);margin:0 0 4px;text-transform:uppercase}h1{font-size:22px;margin:0}h2{font-size:20px;margin:0}h3{font-size:16px;margin:0}.top-actions{display:flex;align-items:center;gap:12px}.top-actions select{border:1px solid var(--line);border-radius:8px;padding:9px;background:#fff;color:var(--ink)}.bell{position:relative;border:0;background:transparent;color:var(--red);font-size:20px}.bell span{position:absolute;right:-7px;top:-5px;background:var(--red);color:#fff;width:16px;height:16px;border-radius:50%;font-size:10px;padding-top:2px}.user-avatar{width:35px;height:35px;border-radius:50%;background:#ffe2e8;color:var(--red);display:grid;place-items:center;font-weight:bold}.menu-button{display:none}.page{display:none;padding:30px 34px}.page.active{display:block}.welcome-row,.page-toolbar,.page-intro,.panel-title,.search-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.welcome-row h2{margin-bottom:5px}.welcome-row p,.page-intro p{margin:0;color:var(--muted)}button{font:inherit;cursor:pointer}.primary,.secondary,.text-button,.filter,.icon-button{border:0;border-radius:8px;padding:10px 14px;font-weight:700}.primary{background:var(--red);color:#fff}.secondary{background:#fff;border:1px solid var(--line);color:var(--ink)}.text-button{color:var(--red);background:transparent;padding:5px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:25px 0}.metric{background:#fff;padding:17px;border:1px solid var(--line);border-radius:12px}.metric span{color:var(--muted);font-size:13px}.metric b{font-size:28px;display:block;margin-top:7px}.metric em{font-style:normal;font-size:12px;color:var(--green)}.dashboard-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:16px}.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}.panel-title{margin-bottom:11px}.job-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--line)}.job-row:first-child{border-top:0}.job-icon{width:40px;height:40px;border-radius:10px;background:#fff0f3;color:var(--red);display:grid;place-items:center;font-size:20px}.job-main{flex:1;min-width:0}.job-main b{display:block}.job-main small{color:var(--muted)}.tag{font-size:11px;font-weight:bold;padding:5px 8px;border-radius:99px;white-space:nowrap}.tag.red{background:#ffe0e6;color:#b60027}.tag.amber{background:#fff0d2;color:#8a5700}.tag.green{background:#dff6e9;color:#15723e}.timeline-item{display:flex;gap:11px;padding:10px 0}.timeline-dot{width:9px;height:9px;background:var(--red);border-radius:50%;margin-top:5px;box-shadow:0 0 0 4px #fff0f3}.timeline-item p{margin:0;font-size:13px}.timeline-item small{color:var(--muted)}.filter-tabs{display:flex;gap:7px;flex-wrap:wrap}.filter{background:#eceff2;color:#56616d}.filter.active{background:#171d23;color:#fff}.job-list{margin-top:18px;display:grid;gap:12px}.job-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px;display:grid;grid-template-columns:1fr auto;gap:14px}.job-card h3{margin:5px 0}.job-meta{display:flex;gap:12px;color:var(--muted);font-size:13px;flex-wrap:wrap}.card-actions{display:flex;align-items:center;gap:9px}.outline-button{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 11px;color:var(--ink);font-weight:bold}.search-row{justify-content:flex-start}.search-row input{width:min(500px,100%);padding:12px;border:1px solid var(--line);border-radius:8px;font:inherit}.vehicle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}.vehicle-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px}.vehicle-card .plate{font-size:21px;font-weight:bold}.vehicle-card p{color:var(--muted);font-size:13px}.vehicle-card b{font-size:13px}.stock-table-wrap{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:auto}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:14px 17px;border-bottom:1px solid var(--line)}th{font-size:12px;color:var(--muted);background:#fbfcfd}.status-low{color:#b35c00;font-weight:bold}.status-ok{color:var(--green);font-weight:bold}.report-cards{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-top:18px}.bar-row{display:grid;grid-template-columns:1fr 32px;gap:8px;margin-top:20px;position:relative;padding-bottom:9px}.bar-row i{grid-column:1/3;background:linear-gradient(90deg,var(--red),#ff7892);height:7px;border-radius:5px}.score{font-size:50px;font-weight:bold;color:var(--red);margin-top:27px}.score small{font-size:16px;color:var(--muted)}.settings-panel{max-width:680px;display:grid;gap:17px}.settings-panel label,.form-grid label{display:grid;gap:7px;font-size:13px;font-weight:bold}.settings-panel input,.form-grid input,.form-grid select,.form-grid textarea{border:1px solid var(--line);border-radius:8px;padding:11px;font:inherit;color:var(--ink);background:#fff}.settings-panel .primary{justify-self:start}dialog{border:0;border-radius:14px;padding:0;box-shadow:0 18px 70px #0005;width:min(620px,calc(100% - 28px))}dialog::backdrop{background:#11182788}dialog form,dialog>#job-detail{padding:24px}.modal-head{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid var(--line);padding-bottom:15px}.icon-button{background:var(--soft);font-size:22px;line-height:20px;padding:5px 9px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:20px 0}.form-grid .full{grid-column:1/-1}.form-grid textarea{min-height:85px;resize:vertical}.modal-actions{display:flex;justify-content:flex-end;gap:9px}.detail-steps{display:grid;gap:0;margin:18px 0}.detail-step{display:flex;gap:10px;border-left:2px solid var(--line);padding:0 0 17px 15px;margin-left:7px}.detail-step:last-child{padding-bottom:0}.detail-dot{width:14px;height:14px;border-radius:50%;background:var(--red);margin-left:-23px;margin-top:3px;border:3px solid #fff}.detail-step p{margin:2px 0;color:var(--muted);font-size:13px}#toast{position:fixed;right:20px;bottom:20px;background:#17202a;color:#fff;border-radius:9px;padding:13px 17px;transform:translateY(100px);transition:.25s;box-shadow:0 8px 20px #0003;z-index:20}#toast.show{transform:translateY(0)}
@media(max-width:820px){.sidebar{position:fixed;z-index:10;left:-270px;height:100vh;transition:.2s}.sidebar.open{left:0}.menu-button{display:block;border:0;background:transparent;font-size:22px;padding:0}.topbar{height:auto;min-height:70px;padding:13px 18px;gap:13px}.topbar h1{font-size:18px}.top-actions select{max-width:125px}.page{padding:20px 16px}.welcome-row{align-items:flex-start;flex-direction:column}.metrics{grid-template-columns:1fr 1fr;margin:18px 0}.dashboard-grid,.report-cards{grid-template-columns:1fr}.vehicle-grid{grid-template-columns:1fr}.job-card{grid-template-columns:1fr}.card-actions{justify-content:flex-start}.page-toolbar,.page-intro{align-items:flex-start;flex-direction:column}.job-row{align-items:flex-start}.job-row .tag{margin-left:auto}.brand img{width:45px}.sidebar-note{margin-top:25px}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}}