:root{
  --bg:#f3f6fb;
  --muted:#6b7280;
  --accent:#4f46e5;
  --card:#ffffff;
  --shadow: 0 6px 18px rgba(15,23,42,0.08);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
html,body,#root{height:100%}
body{margin:0;background:var(--bg);color:#0f172a;font-size:14px;line-height:1.4}
.app{display:flex;min-height:100vh}
.sidebar{width:260px;background:linear-gradient(180deg,#2b2f7a 0%, #1f234f 100%);color:#fff;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#7c3aed);display:flex;align-items:center;justify-content:center;font-weight:700}
.brand-text .title{font-weight:700}
.brand-text .subtitle {
  font-size: 10px;
  line-height: 1;
  color: rgba(255,255,255,0.85);
  max-width: calc(100% - 64px);
  display: block;
  white-space: nowrap;
  overflow: ;
  text-overflow: ellipsis;
}
.nav{margin-top:24px;display:flex;flex-direction:column;gap:8px}
.nav-item{padding:10px 12px;border-radius:8px;color:rgba(255,255,255,0.9);cursor:pointer;text-decoration:none}
.nav-item:hover{background:rgba(255,255,255,0.04)}
.nav-item.active{background:rgba(255,255,255,0.06);font-weight:600}
.sidebar-footer{margin-top:24px}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.08);color:#fff;padding:8px 10px;border-radius:8px;cursor:pointer}
.main{flex:1;padding:28px 36px;overflow:auto}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.company-name{font-size:12px;color:var(--muted);font-weight:600}
.page-title{margin:0;font-size:20px;font-weight:700}
.top-actions .btn{padding:8px 12px;border-radius:8px;background:#eef2ff;border:1px solid #e0e7ff;color:var(--accent);cursor:pointer}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.card{background:var(--card);padding:18px;border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.card-title{font-size:12px;color:var(--muted)}
.card-value{font-size:22px;font-weight:700;color:#0f172a}
.divider{border:none;height:1px;background:linear-gradient(90deg,transparent,#e6e9f2,transparent);margin:18px 0}
.grid{display:grid;grid-template-columns:1fr 360px;gap:18px}
.col-left{min-width:0}
.col-right{display:flex;flex-direction:column;gap:18px}
.panel{background:var(--card);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.panel.small{padding:12px}
.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.panel-header h2{margin:0;font-size:16px}
.panel-actions{display:flex;gap:8px;align-items:center}
.btn-sm{padding:6px 10px;border-radius:8px;background:#eef2ff;border:1px solid #e0e7ff;color:var(--accent);cursor:pointer}
.search{padding:8px;border-radius:8px;border:1px solid #e6e9f2;background:#fbfdff}
.table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse}
.table thead th{padding:12px;text-align:left;font-size:13px;color:var(--muted);border-bottom:1px solid #eef2ff}
.table tbody td{padding:12px;border-bottom:1px solid #f3f6fb;vertical-align:middle}
.table img{width:64px;height:40px;object-fit:cover;border-radius:6px;border:1px solid #eef2ff}
.bold{font-weight:600}
.muted{color:var(--muted);font-size:12px}
.list{list-style:none;padding:0;margin:0}
.list li{padding:10px 0;border-bottom:1px dashed #f1f5f9;font-size:14px}
.scoreboard{padding:0;margin:0;list-style:none}
.scoreboard li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #f1f5f9}
.btn{padding:8px 12px;border-radius:8px;background:var(--accent);color:#fff;border:none;cursor:pointer}
.btn:disabled{opacity:0.6;cursor:not-allowed}
.modal-overlay{position:fixed;inset:0;background:rgba(2,6,23,0.45);display:flex;align-items:center;justify-content:center;z-index:60}
.modal{width:520px;background:var(--card);border-radius:12px;padding:18px;box-shadow:0 20px 50px rgba(2,6,23,0.3)}
.hidden{display:none}
.form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form label{display:flex;flex-direction:column;font-size:13px;color:var(--muted)}
.form input[type="file"]{padding:6px}
.modal-actions{grid-column:1 / -1;display:flex;justify-content:flex-end;gap:8px;margin-top:8px}

/* Fuel cards */
.fuel-section-title {
  margin: 0 0 10px 0;
  font-size: 15px;
  color: #0f172a;
  font-weight: 600;
}
.fuel-status { margin-bottom: 18px; }
.fuel-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fuel-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(15,23,42,0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.fuel-title { font-size: 12px; color: var(--muted); }
.fuel-value { font-size: 20px; font-weight: 700; color: #0f172a; }

/* Responsive adjustments */
@media (max-width:1000px){
  .grid{grid-template-columns:1fr}
  .sidebar{display:none}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 900px) {
  .fuel-cards { grid-template-columns: repeat(2, 1fr); }
}