/* ============================================================
   TENANT BRANDING LAYER
   Everything a Clinic Admin sets in Settings → Branding writes
   to these three variables + the logo markup. No other rule in
   this file should ever hardcode a brand colour directly.
   Defaults below are Nexxarra's own out-of-box identity —
   deliberately warm/clinical rather than generic SaaS blue.
   ============================================================ */
:root{
  --tenant-primary:#1B4D3E;
  --tenant-primary-dark:#123830;
  --tenant-primary-light:#E7F0EC;
  --tenant-accent:#E8866B;

  --paper:#F7F4ED;
  --surface:#FFFFFF;
  --ink:#2B2B26;
  --ink-soft:#5C584F;
  --line:#E4DFD2;

  --success:#3F8F5F;--success-bg:#E6F2EA;
  --warning:#C8862C;--warning-bg:#FBF0DF;
  --danger:#C24A3E;--danger-bg:#FAE7E3;
  --info:#3D6FA8;--info-bg:#E8F0F9;

  --sidebar-w:268px;--header-h:68px;
  --radius:14px;--radius-sm:9px;
  --shadow:0 1px 2px rgba(43,43,38,.04), 0 8px 24px -8px rgba(43,43,38,.08);
  --shadow-lift:0 4px 8px rgba(43,43,38,.06), 0 16px 32px -12px rgba(43,43,38,.14);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--paper);color:var(--ink);font-size:14.5px;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,h5,.display{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-.01em;}
code,.mono{font-family:'JetBrains Mono',monospace;}
*:focus-visible{outline:2px solid var(--tenant-accent);outline-offset:2px;border-radius:4px;}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important;}}

/* ───────── SIDEBAR ───────── */
#sidebar{
  position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh;
  background:var(--tenant-primary-dark);
  display:flex;flex-direction:column;z-index:1040;
  transition:transform .3s cubic-bezier(.4,0,.2,1), background .3s ease;
  overflow-y:auto;
}
#sidebar::-webkit-scrollbar{width:5px;}
#sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px;}

.sidebar-brand{display:flex;align-items:center;gap:11px;padding:22px 22px 18px;}
.brand-logo-slot{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.brand-logo-slot img{width:100%;height:100%;object-fit:contain;padding:3px;}
.brand-title{color:#fff;font-size:16.5px;font-weight:600;line-height:1.2;font-family:'Fraunces',serif;}
.brand-sub{color:rgba(255,255,255,.42);font-size:10px;letter-spacing:1px;text-transform:uppercase;margin-top:1px;}

.role-switcher{padding:0 18px 16px;}
.role-switcher select{
  width:100%;font-size:11.5px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.12);border-radius:7px;padding:6px 10px;
}
.role-switcher select:focus{outline:none;border-color:var(--tenant-accent);}

.sidebar-section-label{padding:18px 22px 7px;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.28);}
.nav-item-custom{padding:0 12px;margin-bottom:1px;}
.nav-link-custom{
  display:flex;align-items:center;gap:12px;padding:9.5px 13px;border-radius:9px;
  color:rgba(255,255,255,.68);text-decoration:none;font-size:13.5px;font-weight:500;
  transition:background .15s, color .15s;cursor:pointer;position:relative;
}
.nav-link-custom i{font-size:16px;width:18px;flex-shrink:0;}
.nav-link-custom:hover{background:rgba(255,255,255,.07);color:#fff;}
.nav-link-custom.active{background:rgba(255,255,255,.1);color:#fff;}
.nav-link-custom.active::before{
  content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;background:var(--tenant-accent);border-radius:0 3px 3px 0;
}

.sidebar-footer{margin-top:auto;padding:16px 18px 20px;border-top:1px solid rgba(255,255,255,.08);}
.user-pill{display:flex;align-items:center;gap:10px;}
.user-avatar{width:36px;height:36px;border-radius:50%;background:var(--tenant-accent);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:13px;flex-shrink:0;}
.user-name{color:#fff;font-size:13px;font-weight:600;}
.user-role{color:rgba(255,255,255,.4);font-size:11px;}

/* ───────── LAYOUT ───────── */
#main{margin-left:var(--sidebar-w);min-height:100vh;}
#topbar{
  height:var(--header-h);background:var(--paper);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 28px;
  position:sticky;top:0;z-index:1020;backdrop-filter:blur(6px);
}
#content{padding:28px 32px 48px;max-width:1320px;}
.page-title{font-size:24px;font-weight:600;color:var(--ink);}
.page-subtitle{font-size:13px;color:var(--ink-soft);margin-top:3px;}
.breadcrumb-bar{font-size:12.5px;color:var(--ink-soft);}
.breadcrumb-bar span{color:var(--ink);font-weight:600;}
.menu-toggle{display:none;background:none;border:none;font-size:22px;color:var(--ink);}
.icon-btn{
  width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:15px;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.icon-btn:hover{border-color:var(--tenant-primary);color:var(--tenant-primary);}

@media(max-width:991px){
  #sidebar{transform:translateX(-100%);}
  #sidebar.open{transform:translateX(0);}
  #main{margin-left:0;}
  .menu-toggle{display:block;}
  #content{padding:20px 16px 40px;}
}

/* ───────── CARDS & PRIMITIVES ───────── */
.card-hms{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.card-hms-header{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px;}
.card-hms-header h5{font-size:15px;font-weight:600;margin:0;font-family:'Fraunces',serif;}
.card-hms-body{padding:20px;}
.section-gap{margin-bottom:24px;}
.text-xs{font-size:11.5px;}
.text-soft{color:var(--ink-soft);}

.btn{
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;border-radius:9px;
  padding:8px 16px;border:1px solid transparent;cursor:pointer;transition:all .15s;
  display:inline-flex;align-items:center;gap:6px;
}
.btn-sm{padding:6px 13px;font-size:12.5px;}
.btn-xs{padding:3px 10px;font-size:11.5px;border-radius:7px;}
.btn-primary{background:var(--tenant-primary);color:#fff;}
.btn-primary:hover{background:var(--tenant-primary-dark);}
.btn-outline{background:transparent;border-color:var(--line);color:var(--ink-soft);}
.btn-outline:hover{border-color:var(--tenant-primary);color:var(--tenant-primary);}
.btn-ghost{background:transparent;color:var(--ink-soft);border:none;}
.btn-ghost:hover{color:var(--tenant-primary);}

/* Stat cards — used sparingly, content-driven not decoration */
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;display:flex;align-items:center;gap:14px;height:100%;}
.stat-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.stat-icon.primary{background:var(--tenant-primary-light);color:var(--tenant-primary);}
.stat-icon.success{background:var(--success-bg);color:var(--success);}
.stat-icon.warning{background:var(--warning-bg);color:var(--warning);}
.stat-icon.accent{background:#FBEAE3;color:var(--tenant-accent);}
.stat-value{font-size:23px;font-weight:700;font-family:'Fraunces',serif;line-height:1.1;}
.stat-label{font-size:12px;color:var(--ink-soft);margin-top:2px;}

/* ───────── PATIENT/LIST ROWS — signature element ─────────
   A colored left-edge bar functions like a vitals strip:
   status is felt peripherally while scanning, not read word
   by word. Used for appointment & patient-status lists. */
.status-row{
  display:flex;align-items:center;gap:14px;padding:13px 16px 13px 14px;
  border-left:3px solid var(--line);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:var(--surface);margin-bottom:8px;transition:box-shadow .15s,border-color .15s;
}
.status-row:hover{box-shadow:var(--shadow-lift);}
.status-row.s-active{border-left-color:var(--info);}
.status-row.s-progress{border-left-color:var(--tenant-accent);}
.status-row.s-success{border-left-color:var(--success);}
.status-row.s-warning{border-left-color:var(--warning);}
.status-row.s-muted{border-left-color:var(--line);}
.status-row .row-time{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft);width:62px;flex-shrink:0;}
.status-row .row-main{flex:1;min-width:0;}
.status-row .row-name{font-weight:600;font-size:13.5px;}
.status-row .row-sub{font-size:12px;color:var(--ink-soft);margin-top:1px;}
.status-pill{font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.2px;flex-shrink:0;}
.sp-active{background:var(--info-bg);color:var(--info);}
.sp-progress{background:#FBEAE3;color:var(--tenant-accent);}
.sp-success{background:var(--success-bg);color:var(--success);}
.sp-warning{background:var(--warning-bg);color:var(--warning);}
.sp-muted{background:#F1EEE4;color:var(--ink-soft);}

/* ───────── TABLES ───────── */
.table-hms{width:100%;font-size:13px;border-collapse:collapse;}
.table-hms th{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft);font-weight:700;text-align:left;border-bottom:1px solid var(--line);padding:10px 16px;}
.table-hms td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle;}
.table-hms tr:last-child td{border-bottom:none;}
.table-hms tbody tr{transition:background .15s;}
.table-hms tbody tr:hover{background:var(--tenant-primary-light);}
.muid{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-soft);background:#F1EEE4;padding:2px 7px;border-radius:5px;}

/* ───────── PATIENT PROFILE HEADER ───────── */
.patient-banner{
  background:linear-gradient(135deg, var(--tenant-primary), var(--tenant-primary-dark));
  border-radius:var(--radius);padding:24px 28px;color:#fff;display:flex;align-items:center;gap:18px;margin-bottom:20px;
}
.patient-banner .pb-avatar{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;font-family:'Fraunces',serif;flex-shrink:0;}
.patient-banner .pb-name{font-size:19px;font-weight:600;font-family:'Fraunces',serif;}
.patient-banner .pb-meta{font-size:12.5px;color:rgba(255,255,255,.7);margin-top:3px;display:flex;gap:14px;flex-wrap:wrap;}
.patient-banner .pb-meta span{display:flex;align-items:center;gap:5px;}

/* ───────── FORMS ───────── */
.form-label{font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;display:block;}
.form-control,.form-select{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:13.5px;
  font-family:'Inter',sans-serif;background:var(--surface);color:var(--ink);transition:border-color .15s;
}
.form-control:focus,.form-select:focus{outline:none;border-color:var(--tenant-primary);}
textarea.form-control{resize:vertical;}
.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:14px;}
.form-row.full{grid-template-columns:1fr;}
@media(max-width:600px){.form-row{grid-template-columns:1fr;}}

.form-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-soft);margin:22px 0 12px;}
.form-section-title:first-child{margin-top:0;}

/* Toggle switch */
.switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;inset:0;background:#D8D3C5;border-radius:22px;transition:.2s;}
.slider:before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;}
input:checked + .slider{background:var(--tenant-primary);}
input:checked + .slider:before{transform:translateX(16px);}

.feature-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);gap:14px;}
.feature-row:last-child{border-bottom:0;}
.feature-name{font-size:13.5px;font-weight:600;}
.feature-desc{font-size:12px;color:var(--ink-soft);margin-top:1px;}

/* ───────── SETTINGS / BRANDING ───────── */
.settings-tabs{display:flex;flex-direction:column;gap:2px;}
.settings-tab-btn{
  text-align:left;background:none;border:none;padding:10px 14px;border-radius:9px;
  font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:all .15s;
}
.settings-tab-btn:hover{background:var(--tenant-primary-light);color:var(--ink);}
.settings-tab-btn.active{background:var(--tenant-primary);color:#fff;}

.swatch-row{display:flex;gap:11px;align-items:center;flex-wrap:wrap;}
.swatch{width:40px;height:40px;border-radius:11px;border:2px solid transparent;cursor:pointer;transition:transform .15s;position:relative;}
.swatch:hover{transform:translateY(-2px);}
.swatch.selected::after{content:'\f633';font-family:'bootstrap-icons';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;}

.logo-dropzone{
  border:2px dashed var(--line);border-radius:var(--radius-sm);padding:32px 20px;text-align:center;
  color:var(--ink-soft);font-size:12.5px;cursor:pointer;transition:border-color .15s,background .15s;
}
.logo-dropzone:hover{border-color:var(--tenant-accent);background:var(--tenant-primary-light);}
.logo-dropzone i{font-size:26px;display:block;margin-bottom:8px;color:var(--tenant-accent);}

.live-preview-bar{
  height:56px;background:var(--tenant-primary-dark);border-radius:11px;display:flex;
  align-items:center;padding:0 18px;gap:12px;transition:background .25s;
}
.live-preview-bar .mini-logo{width:28px;height:28px;border-radius:8px;background:#fff;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.live-preview-bar .mini-logo img{width:100%;height:100%;object-fit:contain;padding:2px;}
.live-preview-bar .mini-text{color:#fff;font-size:13px;font-weight:600;font-family:'Fraunces',serif;}

.upgrade-banner{
  background:var(--warning-bg);border:1px solid #EDD9B5;border-radius:var(--radius-sm);
  padding:13px 18px;font-size:12.5px;color:#7A5418;font-weight:600;display:flex;align-items:center;gap:11px;
}

.perm-table th,.perm-table td{font-size:12px;padding:9px 12px;text-align:center;vertical-align:middle;}
.perm-table th:first-child,.perm-table td:first-child{text-align:left;}
.perm-yes{color:var(--success);font-size:15px;}
.perm-no{color:var(--line);font-size:15px;}

/* Placeholder module panels — honest about being stubs */
.module-stub{
  border:1px dashed var(--line);border-radius:var(--radius);padding:40px 28px;text-align:center;
  color:var(--ink-soft);background:var(--surface);
}
.module-stub i{font-size:30px;color:var(--tenant-accent);display:block;margin-bottom:12px;}
.module-stub .stub-ref{font-size:11.5px;margin-top:6px;font-family:'JetBrains Mono',monospace;}