:root{
  --bg:#f6f8fb;
  --card:#fff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --ok:#16a34a;
  --bad:#dc2626;
  --primary:#0b1f3b;
  --shadow: 0 10px 24px rgba(15,23,42,.08);
  --radius:16px;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:var(--bg)}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.topbar{position:sticky;top:0;z-index:20;background:rgba(246,248,251,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.topbar-row{display:flex;gap:12px;align-items:center;justify-content:space-between}
.brand-title{font-weight:800}
.brand-sub{font-size:12px;color:var(--muted)}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav a{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:999px;border:1px solid transparent}
.nav a:hover{border-color:var(--border);background:#fff}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin:14px 0}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.kpi{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.kpi-label{color:var(--muted);font-size:12px}
.kpi-value{font-size:22px;font-weight:800;margin-top:6px}
.kpi-ok{border-color:rgba(22,163,74,.25)}
.kpi-bad{border-color:rgba(220,38,38,.25)}

.form{display:grid;gap:10px}
label{font-size:13px;color:var(--muted)}
input,select,button{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  font-size:14px;
  background:#fff;
}
input[readonly]{background:#f8fafc}

.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}
.inline{display:flex;gap:8px;align-items:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--text);text-decoration:none;cursor:pointer}
.btn-primary{background:var(--primary);color:#fff;border-color:transparent}
.btn-ghost{background:transparent}
.btn-disabled{opacity:.5;cursor:not-allowed}

.alert{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#fff;margin:10px 0}
.alert-danger{border-color:rgba(220,38,38,.25);background:#fff5f5}
.alert-ok{border-color:rgba(22,163,74,.25);background:#f0fdf4}
.muted{color:var(--muted)}
.pill{padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:#fff}

.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th{font-size:12px;color:var(--muted);text-align:left}
.table td{background:#fff;border:1px solid var(--border);padding:10px 12px}
.table tr td:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
.table tr td:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}
.ok{color:var(--ok);font-weight:700}
.bad{color:var(--bad);font-weight:700}

.steps{margin:0;padding-left:18px}
.auth{max-width:420px;margin:40px auto}

@media (max-width: 900px){
  .grid-4{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}


/* Profit text only — LOCK */

.profit-green{
  color: #16a34a !important; /* green */
}

.profit-yellow{
  color: #f59e0b !important; /* yellow */
}

.profit-red{
  color: #ef4444 !important; /* red */
}

.profit-neutral{
  color: inherit;
}

/* =========================================================
   Responsive Additions (APPEND-ONLY) — LOCK
   Works with: .grid-2 .grid-3 .grid-4 .card .actions .table .form .kpi .btn
   ========================================================= */

/* Base mobile polish */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

.card{
  max-width: 100%;
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Tables: safe mobile behavior (no broken layout) */
.card .table-wrap,
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

table.table{
  width:100%;
  border-collapse: collapse;
  min-width: 720px; /* forces horizontal scroll instead of squeezing */
}

/* Forms: better touch targets */
.form input,
.form select,
.form textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.btn{
  white-space: nowrap;
}

/* KPIs: prevent overflow */
.kpi .kpi-value{
  word-break: break-word;
}

/* ---------- Breakpoints ---------- */

/* Phones */
@media (max-width: 640px){
  .grid-4{ display:grid; grid-template-columns: 1fr !important; gap:12px; }
  .grid-3{ display:grid; grid-template-columns: 1fr !important; gap:12px; }
  .grid-2{ display:grid; grid-template-columns: 1fr !important; gap:12px; }

  .actions{
    align-items:stretch;
  }

  .actions .btn,
  .actions a.btn,
  .actions button.btn{
    width:100%;
    justify-content:center;
  }

  /* Reduce padding a bit for small screens */
  .card{ padding: 12px !important; }
  .kpi{ padding: 12px !important; }

  .kpi .kpi-label{ font-size: 12px; }
  .kpi .kpi-value{ font-size: 20px; line-height: 1.2; }

  /* Make inline forms stack cleanly */
  form.inline{ display:flex; flex-wrap:wrap; gap:10px; }
  form.inline input,
  form.inline select,
  form.inline button{
    width:100%;
  }
}

/* Tablets */
@media (min-width: 641px) and (max-width: 980px){
  .grid-4{ display:grid; grid-template-columns: 1fr 1fr !important; gap:12px; }
  .grid-3{ display:grid; grid-template-columns: 1fr 1fr !important; gap:12px; }
  .grid-2{ display:grid; grid-template-columns: 1fr 1fr !important; gap:12px; }

  .card{ padding: 14px !important; }
}

/* Optional: improve tap comfort */
@media (max-width: 980px){
  .btn{
    padding: 10px 12px;
  }
  input, select, textarea{
    min-height: 42px;
  }
}




/* ================================
   Topbar (clean + responsive)
================================ */

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.topbar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 10px 0;
}

.brand{
  display:flex;
  flex-direction:column;
  gap:2px;
  text-decoration:none;
  color: inherit;
  min-width: 220px;
}

.brand-title{
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.1;
}

.brand-sub{
  font-size: 12px;
  color: #6b7280;
  letter-spacing: .6px;
}

.nav{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav a{
  text-decoration:none;
  color:#111827;
  padding:8px 10px;
  border-radius:10px;
  border: 1px solid transparent;
}

.nav a:hover{
  background:#f6f8fb;
  border-color:#e5e7eb;
}

.nav-divider{
  width:1px;
  height:24px;
  background:#e5e7eb;
  margin: 0 6px;
}

.logout{
  margin:0;
}

/* Mobile toggle button */
.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:0;
}

.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:#111827;
  border-radius:2px;
}

/* Mobile behavior */
@media (max-width: 840px){
  .brand{ min-width: unset; }
  .nav-toggle{ display:flex; }

  .nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:#fff;
    border-bottom:1px solid #e5e7eb;
    padding: 10px 0;
  }

  .nav.nav-open{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }

  .nav a{
    margin: 0 12px;
  }

  .nav-divider{
    width:auto;
    height:1px;
    margin: 6px 12px;
  }

  .logout{
    margin: 0 12px;
  }

  .logout .btn{
    width:100%;
    justify-content:center;
  }
}