/* ============================================================================
   SOLTRON CRM DEMO — design system (Les Cours Hyperbaric Centre)
   Brand pulled from hyperbaricmontreal.com: teal #3BAFBF actions, navy + gold
   from the logo, Source Sans Pro / Open Sans. Single committed light theme.
   Every screen uses ONLY these tokens + classes so the app reads as one system.
   ============================================================================ */
:root{
  --paper:#EEF3F5; --surface:#FFFFFF; --surface-2:#F7FAFB;
  --ink:#233240; --grey:#5C6B78; --faint:#93A2AE; --line:#E4EAED; --line-2:#EFF3F5;
  --teal:#2E9CAD; --teal-lt:#3BAFBF; --teal-dk:#227A88; --cyan:#2CE6E6;
  --navy:#243F6E; --gold:#B0863C; --wash:#E9F6F7; --navy-wash:#EEF1F7;
  /* semantic (status/report) */
  --green:#2E8B6B; --green-bg:#E6F4EE; --amber:#C08A2E; --amber-bg:#FaF1E1;
  --red:#C24141; --red-bg:#FBEBEB; --blue:#2F6DA6; --blue-bg:#E9F1F8;
  --purple:#6A5AA8; --purple-bg:#EFEBF7; --slate:#647689; --slate-bg:#EEF2F5;
  /* chamber colors */
  --c1:#2E9CAD; --c2:#2F6DA6; --c3:#3E9E8C; --c4:#B0863C; --c5:#6A5AA8;
  --r-sm:8px; --r-md:11px; --r-lg:15px;
  --shadow:0 1px 2px rgba(30,50,65,.06), 0 8px 24px -14px rgba(30,50,65,.18);
  --sb:236px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font-family:"Open Sans",system-ui,sans-serif;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:"Source Sans Pro",system-ui,sans-serif;margin:0;color:var(--ink);text-wrap:balance}
a{color:var(--teal);text-decoration:none}
.mono{font-family:"JetBrains Mono","SFMono-Regular",monospace}
button{font-family:inherit;cursor:pointer}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#cdd8dd;border-radius:6px;border:2px solid var(--paper)}

/* ---------- app shell ---------- */
.app{display:grid;grid-template-columns:var(--sb) 1fr;min-height:100vh}
.sidebar{background:#1B3050;color:#D7E0EC;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sb-brand{padding:18px 18px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-brand img{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.96}
.sb-brand .bt{font-family:"Source Sans Pro",sans-serif;font-weight:700;font-size:13px;line-height:1.15;color:#fff}
.sb-brand .bt small{display:block;font-weight:400;font-size:10px;color:#8FA6C4;letter-spacing:.04em}
.sb-nav{padding:10px 10px;flex:1;overflow-y:auto}
.sb-sec{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#6C86A8;padding:14px 10px 6px;font-weight:600}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:#C4D1E2;font-size:13.5px;font-weight:500;cursor:pointer;margin:1px 0;transition:background .12s,color .12s}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:var(--teal-lt);color:#062126}
.nav-item svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nav-item .badge{margin-left:auto;background:var(--gold);color:#2a1e08;font-size:10px;font-weight:700;padding:1px 7px;border-radius:20px}
.sb-user{padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px}
.sb-user .av{width:32px;height:32px;border-radius:50%;background:var(--teal-lt);color:#06262b;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:"Source Sans Pro",sans-serif;font-size:13px}
.sb-user .nm{font-size:12.5px;color:#fff;font-weight:600;line-height:1.2}
.sb-user .rl{font-size:10.5px;color:#8FA6C4}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--surface);border-bottom:1px solid var(--line);padding:0 26px;height:60px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20}
.topbar h1{font-size:19px;font-weight:700}
.topbar .crumb{color:var(--faint);font-size:12.5px}
.topbar .sp{flex:1}
.topbar .tdate{font-size:12.5px;color:var(--grey)}
.view{padding:22px 26px 60px;max-width:1240px;width:100%}
.view.wide{max-width:1500px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-sm);padding:8px 14px;font-size:13px;font-weight:600;white-space:nowrap;transition:all .13s}
.btn:hover{border-color:var(--teal);color:var(--teal)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn.primary{background:var(--teal-lt);border-color:var(--teal-lt);color:#fff}
.btn.primary:hover{background:var(--teal);color:#fff}
.btn.navy{background:var(--navy);border-color:var(--navy);color:#fff}.btn.navy:hover{background:#2d4f88;color:#fff}
.btn.ghost{border-color:transparent;background:transparent;color:var(--grey)}.btn.ghost:hover{background:var(--line-2);color:var(--ink)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.danger:hover{border-color:var(--red);color:var(--red)}
.iconbtn{width:32px;height:32px;padding:0;justify-content:center;border-radius:8px}

/* ---------- cards / panels ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow)}
.card-h{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.card-h h3{font-size:15px;font-weight:700}
.card-h .sp{flex:1}
.card-b{padding:18px}
.grid{display:grid;gap:16px}
.row{display:flex;gap:16px;flex-wrap:wrap}
.section-title{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:2px 0 10px;font-family:"Source Sans Pro",sans-serif}

/* ---------- KPI tiles ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi .k{font-size:12px;color:var(--grey);font-weight:600;display:flex;align-items:center;gap:7px}
.kpi .k svg{width:15px;height:15px;stroke:var(--teal);fill:none;stroke-width:1.8}
.kpi .v{font-family:"Source Sans Pro",sans-serif;font-weight:700;font-size:28px;line-height:1.05;margin-top:8px;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi .v small{font-size:14px;color:var(--grey);font-weight:600}
.kpi .d{font-size:11.5px;margin-top:4px;font-weight:600}
.kpi .d.up{color:var(--green)}.kpi .d.down{color:var(--red)}
.kpi .accent{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--teal-lt)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl thead th{background:var(--surface-2);text-align:left;font-family:"Source Sans Pro",sans-serif;font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--grey);padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl tbody td{padding:11px 14px;border-top:1px solid var(--line-2);vertical-align:middle}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tbody tr.clickable{cursor:pointer}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .muted{color:var(--faint)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--wash);color:var(--teal-dk);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;font-family:"Source Sans Pro",sans-serif;flex:none}
.who{display:flex;align-items:center;gap:9px}
.who .nm{font-weight:600}.who .sub{font-size:11.5px;color:var(--faint)}

/* ---------- pills / badges ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;font-family:"Source Sans Pro",sans-serif;white-space:nowrap;letter-spacing:.01em}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.green{background:var(--green-bg);color:#1f6b50}.pill.amber{background:var(--amber-bg);color:#8a6018}
.pill.red{background:var(--red-bg);color:#9c2f2f}.pill.blue{background:var(--blue-bg);color:#245785}
.pill.purple{background:var(--purple-bg);color:#4c3f86}.pill.slate{background:var(--slate-bg);color:#4a5a6b}
.pill.teal{background:var(--wash);color:var(--teal-dk)}.pill.gold{background:#F6EEDD;color:#7d5e22}

/* ---------- forms ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--grey);margin-bottom:5px;font-family:"Source Sans Pro",sans-serif}
.field label .req{color:var(--red)}
.input,.select,.textarea{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-sm);padding:9px 11px;font-size:13.5px;font-family:inherit;transition:border .13s,box-shadow .13s}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--wash)}
.textarea{resize:vertical;min-height:80px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row.three{grid-template-columns:1fr 1fr 1fr}
.hint{font-size:11.5px;color:var(--faint);margin-top:4px}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tab{padding:10px 16px;font-size:13.5px;font-weight:600;color:var(--grey);border-bottom:2px solid transparent;white-space:nowrap;font-family:"Source Sans Pro",sans-serif}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--teal-dk);border-bottom-color:var(--teal-lt)}

/* ---------- toolbar / filters ---------- */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.toolbar .sp{flex:1}
.search{position:relative}
.search input{padding-left:34px;min-width:230px}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--faint);fill:none;stroke-width:1.8}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--grey)}
.seg button.active{background:var(--teal-lt);color:#fff}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(20,35,50,.5);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal.open{display:flex}
.modal-card{background:var(--surface);border-radius:var(--r-lg);width:520px;max-width:100%;max-height:92vh;overflow:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.modal-card.lg{width:720px}
.modal-h{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.modal-h h3{font-size:17px;font-weight:700}.modal-h .sp{flex:1}
.modal-x{width:30px;height:30px;border:0;background:var(--line-2);border-radius:8px;color:var(--grey);font-size:16px}
.modal-b{padding:22px}
.modal-f{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}

/* ---------- misc ---------- */
.empty{text-align:center;padding:44px 20px;color:var(--faint)}
.empty svg{width:40px;height:40px;stroke:var(--line);fill:none;stroke-width:1.5;margin-bottom:8px}
.hatch{background:repeating-linear-gradient(45deg,#c9d2d8 0 5px,transparent 5px 10px)}
.progress{height:8px;border-radius:6px;background:var(--line);overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--teal-lt))}
.bar-track{height:22px;background:var(--line-2);border-radius:5px;overflow:hidden;position:relative}
.bar-fill{height:100%;border-radius:5px;display:flex;align-items:center;padding:0 8px;color:#fff;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.split{display:grid;grid-template-columns:340px 1fr;gap:20px}
.divider{height:1px;background:var(--line);margin:18px 0}
.notecard{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:10px}
.notecard .meta{font-size:11.5px;color:var(--faint);margin-bottom:5px;display:flex;gap:8px;align-items:center}

/* ---------- responsive ---------- */
.hamburger{display:none}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:200;width:250px;transform:translateX(-100%);transition:transform .22s;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .app.nav-open .sidebar{transform:translateX(0)}
  .app.nav-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:150}
  .hamburger{display:inline-flex}
  .view{padding:16px 15px 50px}
  .split{grid-template-columns:1fr}
  .form-row,.form-row.three{grid-template-columns:1fr}
  .topbar{padding:0 15px}
}
@media(max-width:600px){ .kpis{grid-template-columns:1fr 1fr} .topbar h1{font-size:16px} }