/* ===== Havarti palette (keep brand) ===== */
:root{
  --navy: #0b1d39;          /* deep header/side */
  --navy-2:#102542;         /* slightly lighter */
  --blue: #1f6feb;          /* action blue (limited use) */
  --green:#2f7d32;          /* logo green */
  --lime: #d8e26f;          /* light lime accent */
  --bg:   #f6f7fb;          /* page background */
  --panel:#ffffff;          /* card/panel surface */
  --line: #e7e7ee;          /* subtle borders */
  --ink:  #0f172a;          /* text */
  --muted:#6b7280;          /* muted text */
  --shadow: 0 2px 10px rgba(6,7,29,.06), 0 1px 2px rgba(6,7,29,.05);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body.havarti{
  margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg); color: var(--ink);
}

/* ===== Layout (Stripe-like spacing/hierarchy) ===== */
.layout{display:flex; min-height:100vh}

/* Sidebar */
.sidebar{
  width:264px; background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  padding:18px 16px; color:#fff; position:sticky; top:0; align-self:flex-start; height:100vh;
  border-right:1px solid rgba(0,0,0,.25);
  display:flex; flex-direction:column;
}

/* Logo block */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;      /* center horizontally */
  justify-content: center;  /* center vertically within block */
  text-decoration: none;
  color: #fff;
  margin: 30px 0;           /* space around logo */
}

.brand-logo {
  width: 80%;      /* fills 80% of sidebar width */
  height: auto;    /* keeps aspect ratio */
  display: block;
  margin: 0 auto;  /* center horizontally */
}


.brand-word { display: none; } /* hide fallback text */

/* Sidebar nav */
.nav {
  margin-top: 40px; /* push nav down so logo has breathing room */
  flex:1;
}
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; color:#e7eefc; text-decoration:none; margin-bottom:6px
}
.nav-item:hover{background: rgba(255,255,255,.08); color:#fff}
.nav-item.is-active{background: var(--green); color:#fff}
.dot{width:8px; height:8px; border-radius:999px; background:#8aa0c9; flex:0 0 8px}
.nav-item.is-active .dot{background:#fff}

/* Main column */
.main{flex:1; display:flex; flex-direction:column}

/* Topbar */
.topbar{
  height:60px; display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; background: var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:5
}
.page-title{font-size:18px; font-weight:700}
.badge{background: var(--lime); color:#1a2; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px}

/* Page body */
.page{padding:20px}

/* Cards (Stripe-like) */
.grid-3{display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:16px}
.card{
  background: var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow: var(--shadow);
  display:flex; flex-direction:column; min-height:140px
}
.card-head{padding:14px 16px 0 16px}
.card-title{font-weight:700; color:#0b1d39}
.card-main{padding:8px 16px 0 16px}
.card-foot{padding:12px 16px 16px 16px}
.metric{font-size:28px; font-weight:800}
.card-accent{border-top:5px solid var(--green); background: var(--panel)}

/* Panel (full-width section) */
.panel{
  margin-top:18px; background: var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow: var(--shadow)
}
.panel-head{padding:14px 16px; border-bottom:1px solid var(--line)}
.panel-title{font-weight:700}
.actions{display:flex; gap:10px; padding:12px 16px}

/* Typography helpers */
.subtle{color: var(--muted)}

/* Buttons */
.btn{
  background: var(--green); border:1px solid var(--green); color:#fff; text-decoration:none;
  padding:10px 14px; border-radius:10px; font-weight:600; display:inline-block
}
.btn:hover{filter: brightness(0.95)}
.btn-outline{
  background: #fff; color: var(--green); border:1px solid var(--green)
}
.btn-ghost{
  background: transparent; color: var(--navy); border:1px solid var(--line)
}
.btn-ghost:hover{background:#f3f6ff}

/* Forms & tables (carry over) */
label{font-weight:600}
input,select,button{padding:8px; border:1px solid #cfd3da; border-radius:8px}
button{cursor:pointer; background: var(--green); color:#fff; border:0}
button:hover{filter:brightness(.95)}
table{border-collapse:collapse; width:100%}
th,td{border:1px solid var(--line); padding:8px}
tbody tr:nth-child(even){background:#fafafa}

/* Create Model helpers (unchanged) */
.driver-card{border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 12px 0; background: var(--panel)}
.row{display:flex; gap:12px; flex-wrap:wrap}
.row>*{flex:1; min-width:220px}
.pill{background:#eef; padding:2px 8px; border-radius:999px; margin-right:6px; display:inline-block}
.small{font-size:12px; color:#666}
.kv-row{display:flex; gap:8px; margin:6px 0}
.kv-row input[type=text]{flex:0 0 220px}
.kv-row input[type=number]{flex:0 0 160px}