@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --asphalt: #1b1e21;
  --asphalt-2: #24282c;
  --paper: #faf6ec;
  --paper-line: #e4dcc6;
  --amber: #f2a93b;
  --amber-dark: #c8811d;
  --teal: #2c6e6b;
  --ink: #2a2723;
  --danger: #c1443a;
  --ok: #3f8c5c;
  --ask: #b8842f;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: var(--asphalt);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.035) 1px, transparent 0);
  background-size: 22px 22px;
  color:#e9e6dd;
  font-family:'Inter',system-ui,sans-serif;
  min-height:100vh;
}

a{color:inherit;text-decoration:none}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;
  background:var(--asphalt-2);
  border-bottom:3px solid var(--amber);
}
.topbar .brand{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:1.25rem;
  display:flex;align-items:center;gap:10px;
}
.topbar .brand .dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 8px var(--amber);
}
.topbar nav a{
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-weight:600;
  color:#c9c4b8;
  padding:8px 14px;border-radius:6px;
  transition:.15s;
}
.topbar nav a:hover, .topbar nav a.active{
  background:rgba(242,169,59,.12);
  color:var(--amber);
}

.wrap{max-width:1000px;margin:0 auto;padding:28px 20px 60px}

h1{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:1.6rem;
  margin:0 0 6px;
}
.subtitle{color:#9c968a;font-size:.95rem;margin-bottom:26px}

.panel{
  background:var(--asphalt-2);
  border:1px solid #33373b;
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:22px;
  box-shadow:var(--shadow);
}
.panel h2{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  font-size:1.05rem;
  letter-spacing:.6px;
  margin:0 0 16px;
  color:var(--amber);
}

.field{margin-bottom:14px}
.field label{
  display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.6px;
  color:#a8a29a;margin-bottom:6px;font-weight:600;
}
.field input[type=text], .field input[type=date], .field select, .field textarea{
  width:100%;
  background:#151719;
  border:1px solid #3a3f43;
  color:#f1eee6;
  border-radius:7px;
  padding:10px 12px;
  font-family:'Inter',sans-serif;
  font-size:.95rem;
}
.field textarea{min-height:70px;resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber);
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.grid-2{grid-template-columns:1fr}}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--amber);color:#1b1200;
  border:none;border-radius:7px;
  padding:10px 18px;
  font-weight:600;font-size:.9rem;
  text-transform:uppercase;letter-spacing:.5px;
  cursor:pointer;transition:.15s;
}
.btn:hover{background:var(--amber-dark)}
.btn.secondary{background:transparent;color:var(--amber);border:1px solid var(--amber)}
.btn.secondary:hover{background:rgba(242,169,59,.1)}
.btn.danger{background:transparent;color:#e07369;border:1px solid #6b3430}
.btn.danger:hover{background:rgba(193,68,58,.12)}
.btn.small{padding:6px 12px;font-size:.78rem}

/* vehicle ticket card */
.ticket{
  background:var(--paper);
  color:var(--ink);
  border-radius:8px;
  padding:16px 18px;
  margin-bottom:14px;
  position:relative;
  box-shadow:var(--shadow);
  border-left:6px solid var(--amber);
}
.ticket .ticket-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  margin-bottom:10px;flex-wrap:wrap;
}
.ticket .vname{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:1.15rem;letter-spacing:.4px;
}
.plate{
  font-family:'IBM Plex Mono',monospace;font-weight:600;letter-spacing:2px;
  background:#1b1e21;color:#f2a93b;
  padding:4px 10px;border-radius:4px;border:2px solid #2a2723;
  font-size:.85rem;white-space:nowrap;
}
.ticket .meta-row{
  display:flex;flex-wrap:wrap;gap:8px 18px;
  font-size:.85rem;margin-bottom:10px;color:#55504a;
}
.ticket .meta-row b{color:var(--ink)}
.status-badge{
  display:inline-block;padding:3px 10px;border-radius:20px;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
}
.status-paid_customer{background:#dcefe1;color:var(--ok)}
.status-paid_garage{background:#dcefe1;color:var(--ok)}
.status-unpaid{background:#fbdedb;color:var(--danger)}
.status-ask_responsible{background:#f8ecd6;color:var(--ask)}

.ticket .work-details{
  background:#f1ead7;border:1px dashed var(--paper-line);
  border-radius:6px;padding:10px 12px;font-size:.9rem;white-space:pre-wrap;
}
.ticket .ticket-actions{
  margin-top:12px;display:flex;gap:8px;
}

.empty-state{
  text-align:center;padding:40px 20px;color:#8b857a;
}

/* days list on dashboard */
.day-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-radius:8px;background:#151719;
  border:1px solid #2e3236;margin-bottom:10px;
}
.day-row .d-date{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.4px}
.day-row .d-count{color:#9c968a;font-size:.85rem}

.search-bar{display:flex;gap:10px}
.search-bar input{flex:1}

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

@media print{
  body{display:none}
}