/* Midrand Tarp & Tent — Portal styles
   Palette pulled from their actual marketing template (WhatsApp 2026-06-03):
   navy + leaf green + gray + white. So the portal and the ads feel like
   the same product. */
:root{
  --forest:#1f2470;            /* navy primary (was forest #4c7a76) */
  --forest-dark:#161a55;
  --forest-light:#2f3690;
  --forest-50:#eef0f7;
  --coral:#5a8c3a;             /* leaf green accent (was coral #daa154) */
  --coral-dark:#467029;
  --coral-light:#7eb55a;
  --coral-50:#eaf3df;
  --cream:#f4f5fa;             /* soft gray bg matching their ad's product cards */
  --paper:#ffffff;
  --ink:#1a1d2b;
  --ink-soft:#5a6075;
  --ink-mute:#8a90a3;
  --line:#e5e7ee;
  --line-strong:#cdd0dd;
  --bg:#f4f5fa;
  --white:#ffffff;
  --amber:#daa154;             /* kept as warning-only secondary */
  --amber-50:#faf3e3;
  --red:#c54e3e;
  --red-50:#fae8e4;
  --green:#5a8c3a;             /* leaf for "good" states */
  --green-50:#eaf3df;
  --blue:#1f2470;
  --blue-50:#eef0f7;
  --shadow-sm:0 1px 2px rgba(20,30,80,.05);
  --shadow:0 4px 12px -2px rgba(20,30,80,.08);
  --shadow-lg:0 16px 40px -12px rgba(20,30,80,.16);
  --radius:8px;
  --radius-lg:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',-apple-system,system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* Demo ribbon */
.ribbon{
  position:fixed;top:0;left:0;right:0;
  background:var(--coral);color:white;
  text-align:center;padding:5px 16px;
  font-size:11.5px;font-weight:600;letter-spacing:.04em;
  z-index:1000;
}
.ribbon a{color:white;text-decoration:underline;font-weight:700}

/* Layout */
.app{
  display:grid;grid-template-columns:240px 1fr;
  min-height:100vh;
  padding-top:28px;
}
.sidebar{
  background:var(--ink);
  color:var(--cream);
  padding:24px 0;
  position:sticky;top:28px;height:calc(100vh - 28px);
  overflow-y:auto;
  border-right:1px solid var(--ink);
  display:flex;flex-direction:column;        /* lets the user-card sit cleanly at the bottom
                                                of the nav instead of absolute-positioned and
                                                overlapping mid-list when the nav scrolls */
}
.brand{
  display:flex;align-items:center;gap:12px;
  padding:0 20px 24px;
  border-bottom:1px solid rgba(245,241,232,.08);
  margin-bottom:20px;
}
.brand-mark{
  width:38px;height:38px;
  background:var(--forest);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--cream);font-weight:700;font-size:18px;
  font-family:'Fraunces',serif;
}
.brand-text .name{font-weight:600;font-size:15px;line-height:1.1}
.brand-text .sub{font-size:10.5px;color:var(--coral-light);letter-spacing:.16em;text-transform:uppercase;margin-top:2px}

.sidebar h6{
  font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,241,232,.4);
  padding:16px 20px 8px;
}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 20px;
  color:rgba(245,241,232,.7);
  text-decoration:none;
  font-size:13.5px;font-weight:500;
  cursor:pointer;border:none;background:none;
  text-align:left;width:100%;
  transition:all .12s;
}
.nav-item:hover{color:var(--cream);background:rgba(245,241,232,.04)}
.nav-item.active{
  color:var(--cream);
  background:linear-gradient(90deg,rgba(218,161,84,.18) 0%,transparent 100%);
  border-left:3px solid var(--coral);
  padding-left:17px;
}
.nav-item .ico{
  width:18px;height:18px;display:inline-flex;
  align-items:center;justify-content:center;
  font-size:14px;opacity:.85;
}
.nav-badge{
  margin-left:auto;
  background:var(--coral);color:white;
  font-size:10px;font-weight:700;
  padding:2px 7px;border-radius:99px;
}
.user-card{
  /* Flex-flow placement instead of absolute — margin-top:auto pushes it to the
     bottom when the nav is short, and naturally trails the last nav item when
     the nav overflows (so no more floating in the middle of the menu). */
  margin:auto 20px 4px;
  background:rgba(245,241,232,.05);
  border:1px solid rgba(245,241,232,.08);
  border-radius:8px;
  padding:12px;
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;
}
.user-avi{
  width:34px;height:34px;border-radius:50%;
  background:var(--coral);color:white;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;
}
.user-info .uname{font-size:13px;font-weight:600;color:var(--cream)}
.user-info .urole{font-size:11px;color:rgba(245,241,232,.55)}

/* Main */
.main{padding:24px 32px 80px;max-width:1400px}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:24px;
  flex-wrap:wrap;gap:16px;
}
.topbar h1{
  font-family:'Fraunces',serif;
  font-size:28px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink);
}
.topbar .sub{
  color:var(--ink-soft);font-size:13px;
  margin-top:3px;
}
.topbar-actions{display:flex;gap:10px;align-items:center}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;
  background:var(--coral);color:white;
  border:none;border-radius:6px;
  font-family:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;text-decoration:none;
  transition:all .12s;
}
.btn:hover{background:var(--coral-dark)}
.btn-ghost{
  background:white;color:var(--ink);
  border:1px solid var(--line);
}
.btn-ghost:hover{background:var(--cream);border-color:var(--line-strong)}
.btn-forest{background:var(--forest)}
.btn-forest:hover{background:var(--forest-dark)}
.btn-sm{padding:6px 12px;font-size:12.5px}

/* Cards */
.card{
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px;
  margin-bottom:16px;
}
.card-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.card-head h3{
  font-family:'Fraunces',serif;
  font-size:18px;font-weight:600;
  color:var(--ink);
}
.card-head .meta{font-size:12px;color:var(--ink-soft)}

/* KPI row */
.kpi-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px;margin-bottom:24px;
}
.kpi{
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:18px 20px;
  position:relative;overflow:hidden;
}
.kpi::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--coral);
}
.kpi.kpi-forest::before{background:var(--forest)}
.kpi.kpi-amber::before{background:var(--amber)}
.kpi.kpi-blue::before{background:var(--blue)}
.kpi .label{font-size:11.5px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.kpi .value{
  font-family:'Fraunces',serif;
  font-size:32px;font-weight:600;
  color:var(--ink);
  margin-top:6px;line-height:1;
}
.kpi .delta{
  font-size:12px;color:var(--forest);
  margin-top:6px;display:flex;align-items:center;gap:4px;
}
.kpi .delta.down{color:var(--red)}
.kpi .delta-mute{color:var(--ink-soft)}

/* Two-col layout */
.row-2{
  display:grid;grid-template-columns:1.5fr 1fr;gap:20px;
}
.row-3{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;
}

/* Pills */
.pill{
  display:inline-flex;align-items:center;
  font-size:10.5px;font-weight:700;
  padding:3px 9px;border-radius:99px;
  letter-spacing:.06em;text-transform:uppercase;
}
.pill-green{background:var(--green-50);color:var(--green)}
.pill-amber{background:var(--amber-50);color:#a07e1f}
.pill-coral{background:var(--coral-50);color:var(--coral-dark)}
.pill-blue{background:var(--blue-50);color:var(--blue)}
.pill-red{background:var(--red-50);color:var(--red)}
.pill-mute{background:var(--line);color:var(--ink-soft)}

/* Table */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{
  text-align:left;font-size:11px;font-weight:700;
  color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;
  padding:10px 12px;border-bottom:1px solid var(--line);
}
.table td{
  padding:12px;border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.table tr:last-child td{border-bottom:none}
.table tr.hover:hover{background:var(--cream);cursor:pointer}
.table .strong{font-weight:600;color:var(--ink)}
.table .meta{font-size:11.5px;color:var(--ink-soft);margin-top:2px}

/* Pipeline / Kanban */
.kanban{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:12px;
}
.kan-col{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:14px;
  min-height:400px;
}
.kan-col h5{
  font-size:11.5px;font-weight:700;
  color:var(--ink-soft);text-transform:uppercase;letter-spacing:.07em;
  margin-bottom:12px;
  display:flex;justify-content:space-between;align-items:center;
}
.kan-col h5 .count{
  background:white;border:1px solid var(--line);
  border-radius:99px;padding:1px 8px;
  font-size:10.5px;color:var(--ink);
}
.kan-card{
  background:white;
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px;margin-bottom:10px;
  cursor:pointer;
  transition:all .12s;
}
.kan-card:hover{
  border-color:var(--forest);
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}
.kan-card .client{font-weight:600;font-size:13px;color:var(--ink)}
.kan-card .prod{font-size:12px;color:var(--ink-soft);margin-top:2px}
.kan-card .footer{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:10px;font-size:11px;
}
.kan-card .value{font-weight:600;color:var(--coral-dark)}
.kan-card .due{color:var(--ink-soft)}
.kan-card .due.overdue{color:var(--red);font-weight:600}

/* Calendar / Schedule */
.schedule{
  display:flex;flex-direction:column;gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.sched-row{
  display:grid;grid-template-columns:90px 1fr 100px;
  background:white;padding:13px 16px;
  align-items:center;font-size:13px;
}
.sched-row .day{
  font-family:'Fraunces',serif;
  font-weight:600;font-size:14px;color:var(--coral-dark);
}
.sched-row .day .num{display:block;font-size:20px;color:var(--ink);line-height:1}
.sched-row .day .month{font-size:10px;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase}
.sched-row .info .title{font-weight:600;color:var(--ink)}
.sched-row .info .meta{font-size:12px;color:var(--ink-soft);margin-top:2px}

/* Quote builder */
.quote-builder{
  display:grid;grid-template-columns:1.4fr 1fr;gap:20px;
}
.qb-field{margin-bottom:14px}
.qb-label{
  display:block;font-size:11.5px;font-weight:700;
  color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:5px;
}
.qb-input,.qb-select,.qb-textarea{
  width:100%;padding:9px 12px;
  border:1.5px solid var(--line);border-radius:6px;
  font-family:inherit;font-size:13.5px;background:white;
  transition:border-color .12s;
}
.qb-input:focus,.qb-select:focus,.qb-textarea:focus{
  outline:none;border-color:var(--forest);
}
.qb-textarea{min-height:70px;resize:vertical;font-family:inherit}
.qb-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qb-preview{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px;
  position:sticky;top:90px;
}
.qb-prev-head{
  border-bottom:1px solid var(--line-strong);
  padding-bottom:14px;margin-bottom:14px;
}
.qb-prev-head .qno{
  font-family:'Fraunces',serif;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--coral-dark);font-weight:700;
}
.qb-prev-head .qtitle{
  font-family:'Fraunces',serif;font-size:20px;
  font-weight:600;margin-top:4px;
}
.qb-line{
  display:flex;justify-content:space-between;
  padding:8px 0;font-size:13px;
}
.qb-line.bold{font-weight:600;font-size:14px}
.qb-line .lab{color:var(--ink-soft)}
.qb-total{
  padding:14px 0 0;border-top:2px solid var(--ink);
  margin-top:8px;
  display:flex;justify-content:space-between;
  font-family:'Fraunces',serif;font-size:22px;font-weight:600;
}
.qb-actions{
  display:flex;gap:8px;margin-top:18px;
}

/* Calculator */
.calc-row{
  background:var(--forest-50);border-left:3px solid var(--forest);
  border-radius:6px;padding:12px 14px;
  font-size:13px;
  margin-bottom:14px;
}
.calc-row .lab{color:var(--ink-soft);font-size:11.5px;font-weight:600;letter-spacing:.04em}
.calc-row .rec{font-family:'Fraunces',serif;font-size:17px;font-weight:600;color:var(--forest-dark);margin-top:2px}

/* Repairs */
.repair-stages{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  margin-bottom:24px;
}
.repair-stage{
  background:white;border:1px solid var(--line);
  padding:14px 16px;text-align:center;
  position:relative;
}
.repair-stage:first-child{border-radius:var(--radius-lg) 0 0 var(--radius-lg)}
.repair-stage:last-child{border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.repair-stage:not(:last-child)::after{
  content:"";position:absolute;right:-8px;top:50%;transform:translateY(-50%);
  width:0;height:0;
  border-left:8px solid var(--line);
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  z-index:1;
}
.repair-stage .num{
  font-family:'Fraunces',serif;
  font-size:13px;color:var(--coral-dark);font-weight:700;
  letter-spacing:.08em;
}
.repair-stage .label{font-size:12px;color:var(--ink-soft);margin-top:4px}
.repair-stage .count{
  font-family:'Fraunces',serif;
  font-size:28px;font-weight:600;
  color:var(--ink);margin-top:8px;line-height:1;
}

/* Client list */
.client-card{
  background:white;border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:18px;margin-bottom:12px;
  display:grid;grid-template-columns:50px 1fr 200px 100px;
  gap:18px;align-items:center;
  cursor:pointer;transition:all .12s;
}
.client-card:hover{border-color:var(--forest);box-shadow:var(--shadow)}
.client-avi{
  width:50px;height:50px;border-radius:10px;
  background:var(--forest);color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:18px;font-weight:600;
}
.client-avi.b2c{background:var(--coral);color:white}
.client-info .name{font-weight:600;font-size:15px;color:var(--ink)}
.client-info .tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.client-info .meta{font-size:12px;color:var(--ink-soft);margin-top:2px}
.client-stats{font-size:12px;color:var(--ink-soft);text-align:right}
.client-stats .big{
  font-family:'Fraunces',serif;font-size:18px;font-weight:600;
  color:var(--ink);display:block;
}

/* Section nav (within views) */
.view{display:none}
.view.active{display:block}

/* Empty */
.empty{
  text-align:center;padding:48px 24px;color:var(--ink-soft);
  font-size:14px;
}

/* Responsive */
@media (max-width:1100px){
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .kanban{grid-template-columns:repeat(2,1fr)}
  .row-2{grid-template-columns:1fr}
  .quote-builder{grid-template-columns:1fr}
}
@media (max-width:780px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .main{padding:20px}
  .repair-stages{grid-template-columns:1fr 1fr}
}