:root{
  --bg:#0f1115;
  --panel:#171a21;
  --panel2:#1e222b;
  --border:#2a2f3a;
  --text:#e7e9ee;
  --muted:#9aa3b2;
  --accent:#ff7a1a;
  --accent2:#25d366; /* whatsapp green */
  --danger:#e5484d;
  --radius:12px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
header.topbar{
  background:linear-gradient(90deg,#1a1d24,#20242e);
  border-bottom:1px solid var(--border);
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
header.topbar h1{
  margin:0;
  font-size:20px;
  letter-spacing:.5px;
}
header.topbar h1 span{color:var(--accent);}
.container{
  max-width:1100px;
  margin:0 auto;
  padding:24px;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 16px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  text-decoration:none;
  font-size:14px;
  cursor:pointer;
  transition:.15s;
}
.btn:hover{border-color:var(--accent); color:var(--accent);}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#111; font-weight:600;}
.btn-primary:hover{opacity:.9; color:#111;}
.btn-whatsapp{background:var(--accent2); border-color:var(--accent2); color:#08210f; font-weight:600;}
.btn-whatsapp:hover{opacity:.9; color:#08210f;}
.btn-danger{color:var(--danger); border-color:var(--danger);}
.btn-danger:hover{background:var(--danger); color:#fff;}
.btn-sm{padding:6px 10px; font-size:12px;}

.toolbar{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:18px; flex-wrap:wrap; gap:10px;
}
.search-box{
  flex:1; max-width:360px;
  display:flex; gap:8px;
}
.search-box input{
  flex:1; padding:9px 12px; border-radius:8px; border:1px solid var(--border);
  background:var(--panel2); color:var(--text); font-size:14px;
}

table.vehicle-table{
  width:100%; border-collapse:collapse;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden;
}
table.vehicle-table th, table.vehicle-table td{
  padding:12px 14px; text-align:left; border-bottom:1px solid var(--border);
  font-size:14px;
}
table.vehicle-table th{
  background:var(--panel2); color:var(--muted); font-weight:600; text-transform:uppercase; font-size:12px; letter-spacing:.5px;
}
table.vehicle-table tr:last-child td{border-bottom:none;}
table.vehicle-table tr:hover{background:#1b1f28;}
.actions-cell{display:flex; gap:6px; flex-wrap:wrap;}

.badge{
  padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; display:inline-block;
}
.badge-progress{background:#3a2a13; color:#ffb454;}
.badge-completed{background:#123a24; color:#4fd685;}
.badge-delivered{background:#132a3a; color:#54b4ff;}

.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px; margin-bottom:20px;
}
.form-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.form-grid .full{grid-column:1/-1;}
@media(max-width:700px){.form-grid{grid-template-columns:1fr;}}

.field label{
  display:block; margin-bottom:6px; font-size:13px; color:var(--muted); font-weight:600;
}
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--border);
  background:var(--panel2); color:var(--text); font-size:14px; font-family:inherit;
}
.field textarea{resize:vertical; min-height:140px; line-height:1.5;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--accent);}

.form-actions{margin-top:20px; display:flex; gap:10px;}

.detail-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; margin-bottom:20px;
}
@media(max-width:600px){.detail-grid{grid-template-columns:1fr;}}
.detail-item .label{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px;}
.detail-item .value{font-size:16px; font-weight:600;}

.work-details-box{
  background:var(--panel2); border:1px solid var(--border); border-radius:8px;
  padding:16px; white-space:pre-wrap; font-size:14px; line-height:1.6;
}

.top-actions{display:flex; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px;}

.empty-state{
  text-align:center; padding:60px 20px; color:var(--muted);
}

.alert{
  padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:14px;
}
.alert-success{background:#123a24; color:#4fd685; border:1px solid #1e5a38;}
.alert-danger{background:#3a1414; color:#ff8a8a; border:1px solid #5a1e1e;}

@media print{
  header.topbar, .actions-cell, .top-actions, .btn{display:none !important;}
}