/* ============================================================
   Orbdent Digital Agent — app.css
   Dark mode · Plus Jakarta Sans · Brand: teal / orange / purple
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* ---- Brand ---- */
  --accent:           #b2581b;
  --accent-light:     #f9e2d2;
  --accent-glow:      rgba(178, 88, 27, 0.25);
  --primary:          #0e7a74;
  --primary-light:    #dfeaea;
  --primary-dark:     #183a3d;
  --primary-glow:     rgba(14, 122, 116, 0.2);
  --purple:           #aa438f;
  --purple-light:     #f4d7e7;
  --purple-glow:      rgba(170, 67, 143, 0.2);

  /* ---- Dark surfaces ---- */
  --bg:               #0c1117;
  --surface-1:        #131920;
  --surface-2:        #1a2330;
  --surface-3:        #202d3d;
  --border:           rgba(255,255,255,0.07);
  --border-strong:    rgba(255,255,255,0.13);

  /* ---- Text ---- */
  --text-primary:     #f0f4f8;
  --text-secondary:   #b8cce0;
  --text-muted:       #8a9db5;

  /* ---- Layout ---- */
  --sidebar-w:        260px;
  --topbar-h:         60px;

  /* ---- Type ---- */
  --font:             'Plus Jakarta Sans', system-ui, sans-serif;

  /* ---- Semantic colour aliases (used in inline styles & JS templates) ---- */
  --teal:     #4ecdc8;
  --orange:   #fb923c;
  --blue:     #60a5fa;
  --green:    #4ade80;
  --bg-muted: var(--surface-2);

  /* ---- Radius ---- */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-full: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  margin: 0 0 .5rem;
}

h1 { font-size: 30px; font-weight: 800; letter-spacing: -.6px; }
h2 { font-size: 24px; font-weight: 800; letter-spacing: -.4px; }
h3 { font-size: 20px; font-weight: 700; }
h4 { font-size: 17px; font-weight: 700; }
h5 { font-size: 15px; font-weight: 700; }
h6 { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }

p { color: var(--text-secondary); margin: 0 0 1rem; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: #4ecdc8; }

small, .small { font-size: 13px; }

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-container {
  max-width: 1360px;
  margin: 0 auto;
  width: 100%;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* Logo */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 24px;
}

.logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -1px;
  box-shadow: 0 0 20px var(--primary-glow);
  flex: 0 0 auto;
}

.logo-text {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  line-height: 1.1;
}

.logo-sub {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Company pill */
.company-pill {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
}
.company-pill:hover { background: var(--surface-3); }

.company-dot {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), #0a5550);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  flex: 0 0 auto;
}

.company-pill-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-pill-id {
  font-size: 10px;
  color: var(--text-muted);
}

.company-pill-switch {
  color: var(--text-muted);
  font-size: 12px;
  flex: 0 0 auto;
}

/* Nav sections */
.nav-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 22px 12px 4px;
  opacity: .45;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  margin-bottom: 2px;
  position: relative;
}

.nav-item:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

.nav-item.active {
  background: rgba(14, 122, 116, 0.12);
  color: #4ecdc8;
  font-weight: 600;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}

.nav-icon {
  width: 18px;
  text-align: center;
  flex: 0 0 auto;
  font-size: 15px;
  color: inherit;
  opacity: .7;
}

.nav-item.active .nav-icon { opacity: 1; }

.nav-item.dim {
  opacity: .38;
  cursor: default;
  pointer-events: none;
}

/* nb = nav badge */
.nb {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--r-full);
  letter-spacing: .03em;
  white-space: nowrap;
}
.nb-new  { background: var(--accent);           color: #fff; }
.nb-beta { background: rgba(14,122,116,.15);    color: #4ecdc8; }
.nb-soon { background: var(--surface-3);        color: var(--text-muted); border: 1px solid var(--border); }

/* Legacy alias */
.nav-badge {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-full);
  letter-spacing: .04em;
}

/* Sidebar compact classes (used in sidebar.php) */
.logo        { display: flex; align-items: center; gap: 9px; padding: 4px 8px 20px; }
.company-name { font-size: 11.5px; font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.company-id   { font-size: 10px; color: var(--text-muted); }
.ni  { width: 15px; text-align: center; font-size: 12px; flex: 0 0 auto; opacity: .75; }
.nav-item.active .ni { opacity: 1; }

/* Sidebar footer */
.sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
}
.user-row:hover { background: var(--surface-2); }

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--accent), #8a3e10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex: 0 0 auto;
}

.user-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.user-role {
  font-size: 11px;
  color: var(--text-muted);
}

/* Logout */
.btn-logout {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: 12.5px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  margin-top: 4px;
  text-align: left;
}
.btn-logout:hover {
  background: rgba(239,68,68,.08);
  color: #f87171;
}

/* Mobile burger */
.bp-burger {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.bp-burger span {
  display: block;
  width: 16px; height: 2px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}

/* Sidebar backdrop */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

/* ============================================================
   TOPBAR / HEADER
   ============================================================ */
.app-topbar {
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: var(--surface-1);
  position: sticky;
  top: 0;
  z-index: 100;
  flex: 0 0 auto;
}

.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.page-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.page-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 15px;
  transition: all .15s;
  position: relative;
  text-decoration: none;
}
.icon-btn:hover {
  background: var(--surface-3);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.notif-dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--surface-1);
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}
.topbar-user:hover { background: var(--surface-3); }

.topbar-avatar {
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--accent), #8a3e10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex: 0 0 auto;
}

.topbar-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Content padding */
.content-pad {
  padding: 24px;
  flex: 1;
}

/* Flash messages */
#js-flash { margin-bottom: 16px; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  transition: border-color .2s;
  color: var(--text-primary);
}
.card:hover { border-color: var(--border-strong); }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.card-action {
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: rgba(14,122,116,.1);
  transition: background .15s;
  text-decoration: none;
}
.card-action:hover {
  background: rgba(14,122,116,.2);
  color: #4ecdc8;
}

/* Stat cards */
.stat-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, transform .2s;
  cursor: default;
}
.stat-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.stat-card.sc-teal::before   { background: linear-gradient(90deg, var(--primary), transparent); }
.stat-card.sc-orange::before { background: linear-gradient(90deg, var(--accent), transparent); }
.stat-card.sc-purple::before { background: linear-gradient(90deg, var(--purple), transparent); }
.stat-card.sc-mixed::before  { background: linear-gradient(90deg, #4ecdc8, var(--purple)); }

.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 16px;
}
.stat-icon.si-teal   { background: rgba(14,122,116,.15); color: #4ecdc8; }
.stat-icon.si-orange { background: rgba(178,88,27,.15);  color: #e8854a; }
.stat-icon.si-purple { background: rgba(170,67,143,.15); color: #d97ec5; }
.stat-icon.si-mixed  { background: rgba(78,205,200,.1);  color: #4ecdc8; }

.stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -1.5px;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.stat-change {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 10px;
  padding: 3px 8px;
  border-radius: var(--r-full);
}
.stat-change.up   { background: rgba(34,197,94,.1);  color: #4ade80; }
.stat-change.down { background: rgba(239,68,68,.1);  color: #f87171; }
.stat-change.neutral { background: var(--surface-2); color: var(--text-muted); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  border: none;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 16px var(--primary-glow);
}
.btn-primary:hover {
  background: #0c6a65;
  box-shadow: 0 6px 20px var(--primary-glow);
  transform: translateY(-1px);
  color: #fff;
}

.btn-accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 16px var(--accent-glow);
}
.btn-accent:hover {
  background: #9a4a14;
  transform: translateY(-1px);
  color: #fff;
}

.btn-ghost {
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  background: var(--surface-3);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn-danger {
  background: rgba(239,68,68,.1);
  color: #f87171;
  border: 1px solid rgba(239,68,68,.2);
}
.btn-danger:hover {
  background: rgba(239,68,68,.2);
  color: #fca5a5;
}

.btn-sm { padding: 6px 13px; font-size: 12px; }
.btn-lg { padding: 12px 24px; font-size: 15px; }

.btn:disabled, .btn.disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-control, .form-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: 13.5px;
  font-family: var(--font);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  appearance: none;
}

.form-control::placeholder { color: var(--text-muted); }

.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.form-control.is-invalid {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248,113,113,.15);
}

.invalid-feedback {
  font-size: 12px;
  color: #f87171;
  margin-top: 5px;
}

/* ============================================================
   TABLES
   ============================================================ */
.table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text-primary);
}

.table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text-secondary);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }

.table-hover tbody tr { transition: background .1s; }
.table-hover tbody tr:hover { background: var(--surface-2); }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-full);
}

.badge-teal    { background: rgba(14,122,116,.15);  color: #4ecdc8; }
.badge-orange  { background: rgba(178,88,27,.15);   color: #e8854a; }
.badge-purple  { background: rgba(170,67,143,.15);  color: #d97ec5; }
.badge-green   { background: rgba(34,197,94,.12);   color: #4ade80; }
.badge-red     { background: rgba(239,68,68,.12);   color: #f87171; }
.badge-muted   { background: var(--surface-2);      color: var(--text-muted); }

/* ============================================================
   ALERTS / FLASH
   ============================================================ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  border: 1px solid transparent;
}

.alert-success {
  background: rgba(14,122,116,.1);
  border-color: rgba(14,122,116,.2);
  color: #4ecdc8;
}
.alert-danger {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.2);
  color: #f87171;
}
.alert-warning {
  background: rgba(178,88,27,.1);
  border-color: rgba(178,88,27,.2);
  color: #e8854a;
}
.alert-info {
  background: rgba(14,122,116,.08);
  border-color: var(--border);
  color: var(--text-secondary);
}

/* ============================================================
   MODALS (Bootstrap override)
   ============================================================ */
.modal-content {
  background: var(--surface-1) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-xl) !important;
  color: var(--text-primary);
}

.modal-header {
  border-bottom: 1px solid var(--border) !important;
  padding: 20px 24px 16px !important;
}

.modal-body  { padding: 20px 24px !important; }

.modal-footer {
  border-top: 1px solid var(--border) !important;
  padding: 16px 24px 20px !important;
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.btn-close {
  filter: invert(1) opacity(.5);
}
.btn-close:hover { filter: invert(1) opacity(.8); }

.modal-backdrop.show { background: rgba(0,0,0,.7); }

/* ============================================================
   DROPDOWNS (Bootstrap override)
   ============================================================ */
.dropdown-menu {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-lg) !important;
  padding: 8px !important;
  box-shadow: var(--shadow-lg) !important;
}

.dropdown-item {
  color: var(--text-secondary) !important;
  border-radius: var(--r-md) !important;
  font-size: 13.5px;
  padding: 9px 12px !important;
  transition: all .1s;
}
.dropdown-item:hover {
  background: var(--surface-3) !important;
  color: var(--text-primary) !important;
}

.dropdown-divider {
  border-color: var(--border) !important;
  margin: 6px 0 !important;
}

/* Notification dropdown */
.notif-dropdown { min-width: 340px; }

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  transition: background .1s;
  cursor: pointer;
}
.notif-item:hover { background: var(--surface-3); }
.notif-item.unread { background: rgba(14,122,116,.05); }

.notif-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: rgba(14,122,116,.15);
  color: #4ecdc8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex: 0 0 auto;
}

.notif-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.notif-body  { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.notif-time  { font-size: 11px; color: var(--text-muted); margin-left: auto; white-space: nowrap; }

/* ============================================================
   TOASTS (Bootstrap override)
   ============================================================ */
.toast {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-lg) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ============================================================
   NPROGRESS
   ============================================================ */
#nprogress .bar {
  background: var(--primary) !important;
  height: 2px !important;
}
#nprogress .peg {
  box-shadow: 0 0 10px var(--primary), 0 0 5px var(--primary) !important;
}

/* ============================================================
   FILEPOND OVERRIDE
   ============================================================ */
.filepond--root {
  font-family: var(--font) !important;
}
.filepond--panel-root {
  background: var(--surface-2) !important;
  border: 2px dashed var(--border-strong) !important;
  border-radius: var(--r-lg) !important;
}
.filepond--drop-label label { color: var(--text-muted) !important; }
.filepond--label-action { color: var(--primary) !important; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ============================================================
   UTILITY
   ============================================================ */
.text-primary-color { color: var(--primary) !important; }
.text-accent        { color: var(--accent) !important; }
.text-purple        { color: var(--purple) !important; }
.text-muted-custom  { color: var(--text-muted) !important; }
.text-secondary-custom { color: var(--text-secondary) !important; }

.surface-1 { background: var(--surface-1); }
.surface-2 { background: var(--surface-2); }
.surface-3 { background: var(--surface-3); }

.border-subtle { border: 1px solid var(--border); }

.spacer1 { margin-top: 24px; }
.spacer2 { margin-top: 12px; }

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.anim-fade-up { animation: fadeUp .35s ease both; }
.anim-delay-1 { animation-delay: .05s; }
.anim-delay-2 { animation-delay: .10s; }
.anim-delay-3 { animation-delay: .15s; }
.anim-delay-4 { animation-delay: .20s; }

/* ============================================================
   RESPONSIVE SIDEBAR (mobile)
   ============================================================ */
@media (max-width: 1024px) {
  .bp-burger { display: inline-flex; }

  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 1050;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
  }

  body.sidebar-open .sidebar           { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop  { opacity: 1; pointer-events: auto; }
  body.sidebar-open                    { overflow: hidden; }

  body.sidebar-open .bp-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.sidebar-open .bp-burger span:nth-child(2) { opacity: 0; }
  body.sidebar-open .bp-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

@media (min-width: 1025px) {
  .sidebar-backdrop { display: none; }
}

/* ============================================================
   LIGHT MODE (content area only — sidebar always dark)
   Triggered by: body[data-theme="light"] or @media prefers-color-scheme
   ============================================================ */

/* Base light vars — applied when body has data-theme="light" */
body[data-theme="light"] {
  --bg:           #f4f6f9;
  --surface-1:    #ffffff;
  --surface-2:    #f0f3f7;
  --surface-3:    #e4e8ef;
  --border:       rgba(0,0,0,.08);
  --border-strong:rgba(0,0,0,.14);
  --text-primary: #0f1923;
  --text-secondary:#4a5568;
  --text-muted:   #9aa5b4;
  /* Colour aliases — darker shades for light bg */
  --teal:     #0e8c86;
  --orange:   #ea6900;
  --blue:     #2563eb;
  --green:    #16a34a;
  --bg-muted: var(--surface-2);
}

/* Sidebar is ALWAYS dark regardless of theme */
body[data-theme="light"] .sidebar {
  background:     var(--s1-dark, #131920) !important;
  border-color:   rgba(255,255,255,.07) !important;
  --text-primary: #f0f4f8;
  --text-secondary:#a8b8cc;
  --text-muted:   #6a7f95;
}

/* Topbar follows theme */
body[data-theme="light"] .app-topbar {
  background: var(--surface-1);
  border-color: var(--border);
}

/* Cards in light */
body[data-theme="light"] .card,
body[data-theme="light"] .stat-card,
body[data-theme="light"] .panel {
  background: var(--surface-1);
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* Form inputs in light */
body[data-theme="light"] .form-control,
body[data-theme="light"] .form-select {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

body[data-theme="light"] .form-control::placeholder { color: var(--text-muted); }

/* Dropdowns in light */
body[data-theme="light"] .dropdown-menu {
  background: var(--surface-1) !important;
  border-color: var(--border-strong) !important;
}
body[data-theme="light"] .dropdown-item { color: var(--text-secondary) !important; }
body[data-theme="light"] .dropdown-item:hover { background: var(--surface-2) !important; }

/* Table in light */
body[data-theme="light"] .table th { color: var(--text-muted); border-color: var(--border); }
body[data-theme="light"] .table td { color: var(--text-secondary); border-color: var(--border); }
body[data-theme="light"] .table-hover tbody tr:hover { background: var(--surface-2); }

/* Modal in light */
body[data-theme="light"] .modal-content  { background: var(--surface-1) !important; }
body[data-theme="light"] .modal-header,
body[data-theme="light"] .modal-footer   { border-color: var(--border) !important; }
body[data-theme="light"] .btn-close      { filter: none; }

/* Theme toggle button */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-secondary);
  font-size: 15px; transition: all .15s;
}
.theme-toggle:hover { background: var(--surface-3); color: var(--text-primary); }

/* OS preference fallback (no JS / before JS runs) */
@media (prefers-color-scheme: light) {
  body:not([data-theme="dark"]) {
    --bg:            #f4f6f9;
    --surface-1:     #ffffff;
    --surface-2:     #f0f3f7;
    --surface-3:     #e4e8ef;
    --border:        rgba(0,0,0,.08);
    --border-strong: rgba(0,0,0,.14);
    --text-primary:  #0f1923;
    --text-secondary:#4a5568;
    --text-muted:    #9aa5b4;
  }
}

/* ============================================================
   SETTINGS PAGE TABS
   ============================================================ */
.settings-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.settings-tab {
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all .15s;
  text-decoration: none;
}
.settings-tab:hover  { color: var(--text-secondary); }
.settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* Log viewer */
.log-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  transition: background .1s;
}
.log-row:last-child  { border-bottom: none; }
.log-row:hover       { background: var(--surface-2); }
.log-row.level-error   { border-left: 3px solid #f87171; }
.log-row.level-warning { border-left: 3px solid #e8854a; }
.log-row.level-info    { border-left: 3px solid #4ecdc8; }
.log-row.level-critical{ border-left: 3px solid #f472b6; }
.log-row.level-debug   { border-left: 3px solid var(--text-muted); }

.log-level {
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  padding: 2px 7px; border-radius: var(--r-full);
  flex: 0 0 auto; margin-top: 1px; text-transform: uppercase;
}
.ll-error    { background: rgba(248,113,113,.15); color: #f87171; }
.ll-warning  { background: rgba(232,133,74,.15);  color: #e8854a; }
.ll-info     { background: rgba(78,205,200,.15);  color: #4ecdc8; }
.ll-critical { background: rgba(244,114,182,.15); color: #f472b6; }
.ll-debug    { background: var(--surface-3); color: var(--text-muted); }

.log-time    { color: var(--text-muted); white-space: nowrap; flex: 0 0 auto; font-family: monospace; font-size: 11.5px; }
.log-event   { color: var(--primary); font-weight: 600; flex: 0 0 auto; font-size: 11.5px; }
.log-msg     { color: var(--text-secondary); flex: 1; min-width: 0; }
.log-user    { color: var(--text-muted); font-size: 11px; flex: 0 0 auto; }
.log-ctx     { color: var(--text-muted); font-size: 11px; font-family: monospace; margin-top: 3px; word-break: break-all; }

/* Dev log timeline */
.devlog-entry {
  display: flex;
  gap: 18px;
  padding: 0 0 32px;
  position: relative;
}
.devlog-entry::before {
  content: '';
  position: absolute;
  left: 14px; top: 30px; bottom: 0;
  width: 1px;
  background: var(--border);
}
.devlog-entry:last-child::before { display: none; }

.devlog-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex: 0 0 auto;
  position: relative; z-index: 1;
  border: 2px solid var(--bg);
}
.dd-feature     { background: rgba(14,122,116,.2);  color: #4ecdc8; }
.dd-fix         { background: rgba(248,113,113,.2); color: #f87171; }
.dd-improvement { background: rgba(178,88,27,.2);   color: #e8854a; }
.dd-breaking    { background: rgba(244,114,182,.2); color: #f472b6; }
.dd-security    { background: rgba(170,67,143,.2);  color: #d97ec5; }

.devlog-body { flex: 1; min-width: 0; }
.devlog-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.devlog-version { font-size: 13px; font-weight: 800; color: var(--text-primary); }
.devlog-title   { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.devlog-date    { font-size: 11px; color: var(--text-muted); }

.devlog-md { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.devlog-md h2 { font-size: 15px; margin: 0 0 8px; }
.devlog-md h3 { font-size: 13px; margin: 12px 0 4px; }
.devlog-md ul { padding-left: 20px; margin: 0 0 8px; }
.devlog-md li { margin-bottom: 3px; }
.devlog-md strong { color: var(--text-primary); }
.devlog-md code  { background: var(--surface-2); border-radius: 4px; padding: 1px 6px; font-size: 12px; }

.devlog-comments { margin-top: 14px; }
.devlog-comment  { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.dc-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg,var(--accent),#8a3e10); display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex:0 0 auto; }
.dc-body  { font-size: 12.5px; color: var(--text-secondary); }
.dc-meta  { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }

.comment-form { display: flex; gap: 8px; margin-top: 12px; }

/* ============================================================
   CLINIC SWITCHER (topbar)
   ============================================================ */
.clinic-switcher-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 5px 5px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all .15s;
  max-width: 220px;
}
.clinic-switcher-btn:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}

.clinic-switcher-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
  flex: 0 0 auto;
}

.clinic-switcher-info { min-width: 0; }

.clinic-switcher-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.clinic-switcher-id {
  font-size: 10px;
  color: var(--text-muted);
}

.clinic-switcher-menu {
  min-width: 260px;
  padding: 6px !important;
}

.clinic-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .1s;
  text-align: left;
  font-family: var(--font);
}
.clinic-switcher-item:hover:not(:disabled) { background: var(--surface-3); }
.clinic-switcher-item.current { background: rgba(14,122,116,.08); cursor: default; }
.clinic-switcher-item:disabled { cursor: default; }

.clinic-item-dot {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
  flex: 0 0 auto;
}

.clinic-item-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.clinic-item-city {
  font-size: 11px;
  color: var(--text-muted);
}

/* Always-dark override for clinic switcher (stays dark in light mode) */
body[data-theme="light"] .clinic-switcher-btn {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
}
body[data-theme="light"] .clinic-switcher-btn:hover {
  background: rgba(255,255,255,.14);
}

/* ============================================================
   BOOTSTRAP TABLE OVERRIDE — force dark theme on Bootstrap tables
   ============================================================ */
.table,
.table > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
.table-hover > tbody > tr:hover > * {
  background-color: var(--surface-2) !important;
  color: var(--text-primary) !important;
}
.table > thead > tr > th {
  color: var(--text-muted) !important;
  border-bottom-color: var(--border) !important;
}
/* Wrapper card must also be transparent */
.table-responsive { background: transparent !important; }

/* ============================================================
   NOTIFICATION TOASTS — custom styled (replaces Bootstrap toasts)
   ============================================================ */
.oda-toast-container {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.oda-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  min-width: 280px;
  max-width: 360px;
  pointer-events: all;
  animation: toastIn .22s cubic-bezier(.34,1.56,.64,1) both;
}
.oda-toast.hiding { animation: toastOut .18s ease both; }
@keyframes toastIn  { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { from { opacity:1; transform:translateX(0); }    to { opacity:0; transform:translateX(20px); } }

.oda-toast-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex: 0 0 auto;
}
.oda-toast.success .oda-toast-icon { background: rgba(16,185,129,.15); color: #34d399; }
.oda-toast.danger  .oda-toast-icon { background: rgba(248,113,113,.15); color: #f87171; }
.oda-toast.warning .oda-toast-icon { background: rgba(232,133,74,.15);  color: #e8854a; }
.oda-toast.info    .oda-toast-icon { background: rgba(14,122,116,.15);  color: #4ecdc8; }

.oda-toast-title   { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.oda-toast-message { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.oda-toast-close   {
  margin-left: auto; background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 13px; padding: 0; line-height: 1; flex: 0 0 auto;
  transition: color .1s;
}
.oda-toast-close:hover { color: var(--text-primary); }

/* Progress bar on buttons */
.btn-loading { position: relative; overflow: hidden; pointer-events: none; }
.btn-loading::after {
  content: '';
  position: absolute; bottom: 0; left: -100%; height: 2px;
  width: 100%; background: rgba(255,255,255,.5);
  animation: btnProgress 1.2s ease-in-out infinite;
}
@keyframes btnProgress { to { left: 100%; } }

/* ============================================================
   LANGUAGE SWITCHER
   ============================================================ */
.lang-switcher-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: var(--font);
  transition: all .15s;
}
.lang-switcher-btn:hover { background: var(--surface-3); }

.lang-flag { font-size: 15px; line-height: 1; }

.lang-menu { min-width: 150px !important; }
.lang-menu .lang-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .1s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--font);
}
.lang-menu .lang-option:hover   { background: var(--surface-2); }
.lang-menu .lang-option.active  { color: var(--primary); font-weight: 700; }

/* ============================================================
   DESKTOP FONT SCALE — +3px across content area (sidebar/header unchanged)
   ============================================================ */
@media (min-width: 1025px) {

  /* Base body font 14 → 17px */
  body { font-size: 17px; }

  /* Headings */
  h1 { font-size: 31px; }
  h2 { font-size: 25px; }
  h3 { font-size: 21px; }
  h4 { font-size: 18px; }
  h5 { font-size: 16px; }
  h6 { font-size: 15px; }

  p, small, .small { font-size: 15px; }

  /* Page sub-heading under h2 */
  p.page-sub-heading,
  .page-subheading,
  h2 + p,
  h2 + div > p:first-child { font-size: 17px !important; }

  /* Tables */
  .table th { font-size: 12px; }
  .table td { font-size: 15px; }

  /* Forms */
  .form-label   { font-size: 14px; }
  .form-control,
  .form-select  { font-size: 15px; }
  .invalid-feedback { font-size: 14px; }

  /* Buttons */
  .btn    { font-size: 15px; }
  .btn-sm { font-size: 13px; }
  .btn-lg { font-size: 17px; }

  /* Badges & alerts */
  .badge  { font-size: 13px; }
  .alert  { font-size: 15px; }

  /* Cards */
  .card-title  { font-size: 16px; }
  .card-action { font-size: 14px; }

  /* Stat cards */
  .stat-label  { font-size: 14px; }
  .stat-change { font-size: 13px; }

  /* Modals */
  .modal-title { font-size: 18px; }
  .dropdown-item { font-size: 15px; }

  /* Devlog */
  .devlog-md        { font-size: 15px; }
  .devlog-md h2     { font-size: 17px; }
  .devlog-md h3     { font-size: 15px; }
  .devlog-version   { font-size: 15px; }
  .devlog-title     { font-size: 15px; }

  /* Log viewer */
  .log-row  { font-size: 14px; }
  .log-time,
  .log-event { font-size: 13px; }

  /* Settings tabs */
  .settings-tab { font-size: 15px; }

  /* Toasts */
  .oda-toast-title   { font-size: 14px; }
  .oda-toast-message { font-size: 13px; }

  /* Notifications dropdown */
  .notif-title { font-size: 14px; }
  .notif-body  { font-size: 13px; }
  .notif-time  { font-size: 12px; }

  /* Inline-style font-size overrides commonly used in templates */
  /* We use CSS custom property so inline styles in content pages scale too */
  --fs-xs:   13px;
  --fs-sm:   14px;
  --fs-base: 17px;
  --fs-md:   15px;
  --fs-lg:   18px;

  /* Content builder cards */
  .ch-builder-name  { font-size:.8em; }
  .ch-builder-desc  { font-size:.7em; }
  .form-section-title { font-size:.82em; }

  /* S2 tab + field */
  .ch-tab           { font-size:.8em; }
  .field-label      { font-size:.75em; }
  .fab              { font-size:.75em; }
  .ch-save-status   { font-size:.82em; }

  /* History */
  .hist-title       { font-size:.85em; }
  .hist-meta        { font-size:.72em; }
  .hist-preview     { font-size:.72em; }
  .hist-panel-title { font-size:.88em; }

  /* Utility */
  .status-badge     { font-size:.75em; }
  .ch-chip          { font-size:.72em; }

  /* ── SIDEBAR — explicit revert to original sizes (never inherits body 17px) ── */
  .sidebar                   { font-size: 14px; }
  .sidebar .nav-item         { font-size: 12px; }
  .sidebar .nav-section-label{ font-size: 10px; }
  .sidebar .logo-text        { font-size: 14px; }
  .sidebar .logo-sub         { font-size: 10px; }
  .sidebar .company-name     { font-size: 12px; }
  .sidebar .company-id       { font-size: 10px; }
  .sidebar .user-name        { font-size: 12px; }
  .sidebar .user-role        { font-size: 10px; }
  .sidebar .btn-logout       { font-size: 11px; }
  .sidebar .nav-badge        { font-size: 9px; }
  .sidebar *                 { font-size: inherit; }
  /* Override back: each element gets its own size via specificity above */
  .sidebar .nav-item,
  .sidebar .nav-item span    { font-size: 12px; }

  /* ── TOPBAR — explicit revert to original sizes ── */
  .app-topbar                { font-size: 14px; }
  .app-topbar *              { font-size: inherit; }
  .app-topbar .topbar-title  { font-size: 14px; }
  .app-topbar .btn           { font-size: 13px; }
  .app-topbar .btn-sm        { font-size: 12px; }
  .app-topbar .dropdown-item { font-size: 13px; }
  .app-topbar .company-switcher-name { font-size: 13px; }
  .app-topbar .company-switcher-id   { font-size: 10px; }
  .app-topbar .notif-title   { font-size: 13px; }
  .app-topbar .notif-body    { font-size: 11px; }
  .app-topbar .notif-time    { font-size: 10px; }
  .app-topbar .badge         { font-size: 10px; }
}


/* ── S2 utility classes ── */
.faq-q-input          { font-size:.8rem;margin-bottom:5px; }
.faq-a-input          { font-size:.8rem; }
.ab-loading           { font-size:.8rem;color:var(--text-muted);padding:6px; }
.ab-variant-label     { font-size:.68rem;font-weight:700;color:var(--primary);margin-bottom:3px; }
.ab-variant-text      { font-size:.82rem; }
.ab-error             { font-size:.8rem;color:#f87171;padding:6px; }
.btn-full-sm          { width:100%; }

/* ============================================================
   SIDEBAR LIGHT MODE FIX
   Sidebar must ALWAYS look dark — override every element explicitly
   ============================================================ */
body[data-theme="light"] .sidebar {
  background:        #131920 !important;
  border-right-color: rgba(255,255,255,.07) !important;
}

/* All text inside sidebar stays dark-theme */
body[data-theme="light"] .sidebar,
body[data-theme="light"] .sidebar .nav-item,
body[data-theme="light"] .sidebar .nav-section-label,
body[data-theme="light"] .sidebar .logo-text,
body[data-theme="light"] .sidebar .logo-sub,
body[data-theme="light"] .sidebar .company-name,
body[data-theme="light"] .sidebar .company-id,
body[data-theme="light"] .sidebar .user-name,
body[data-theme="light"] .sidebar .user-role,
body[data-theme="light"] .sidebar .btn-logout {
  color: var(--dark-text, #b8cce0);
}

body[data-theme="light"] .sidebar .nav-item { color: #a8b8cc !important; }
body[data-theme="light"] .sidebar .nav-item:hover { background: rgba(255,255,255,.06) !important; color: #f0f4f8 !important; }
body[data-theme="light"] .sidebar .nav-item.active { background: rgba(14,122,116,.15) !important; color: #4ecdc8 !important; }

body[data-theme="light"] .sidebar .logo-text { color: #f0f4f8 !important; }
body[data-theme="light"] .sidebar .logo-sub  { color: #6a7f95 !important; }
body[data-theme="light"] .sidebar .nav-section-label { color: #6a7f95 !important; }

/* Company pill in sidebar */
body[data-theme="light"] .sidebar .company-pill {
  background:   #1a2330 !important;
  border-color: rgba(255,255,255,.1) !important;
}
body[data-theme="light"] .sidebar .company-pill:hover { background: #202d3d !important; }
body[data-theme="light"] .sidebar .company-name { color: #f0f4f8 !important; }
body[data-theme="light"] .sidebar .company-id   { color: #6a7f95 !important; }

/* Sidebar footer */
body[data-theme="light"] .sidebar .sidebar-footer { border-top-color: rgba(255,255,255,.07) !important; }
body[data-theme="light"] .sidebar .user-row:hover { background: rgba(255,255,255,.06) !important; }
body[data-theme="light"] .sidebar .user-name { color: #f0f4f8 !important; }
body[data-theme="light"] .sidebar .user-role { color: #6a7f95 !important; }
body[data-theme="light"] .sidebar .btn-logout { color: #6a7f95 !important; }
body[data-theme="light"] .sidebar .btn-logout:hover { background: rgba(239,68,68,.1) !important; color: #f87171 !important; }

/* Nav badges stay as-is */
body[data-theme="light"] .sidebar .nb-new  { background: var(--accent) !important; color: #fff !important; }
body[data-theme="light"] .sidebar .nb-beta { background: rgba(14,122,116,.2) !important; color: #4ecdc8 !important; }
body[data-theme="light"] .sidebar .nb-soon { background: rgba(255,255,255,.08) !important; color: #6a7f95 !important; border-color: rgba(255,255,255,.1) !important; }

/* Active indicator bar */
body[data-theme="light"] .sidebar .nav-item.active::before { background: var(--primary) !important; }

/* ============================================================
   CONTENT GENERATOR — STEP 2
   All font-sizes use inherit/em so desktop scale @media applies
   ============================================================ */

/* ── Step 2 layout ── */
.s2-header            { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px; }
.s2-header h2         { margin-bottom:3px; }
.s2-header-meta       { color:var(--text-muted); }
.s2-header-meta .aud  { color:#a78bfa; }
.s2-actions           { display:flex;gap:8px;flex-wrap:wrap; }

/* ── Tab nav ── */
.ch-tab-nav           { display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--border);margin-bottom:0; }
.ch-tab               { padding:9px 14px;border-radius:var(--r-md) var(--r-md) 0 0;font-size:.75rem;font-weight:700;color:var(--text-muted);cursor:pointer;transition:all .15s;border:1px solid transparent;border-bottom:none;position:relative;top:2px;display:flex;align-items:center;gap:6px; }
.ch-tab:hover         { background:var(--surface-2);color:var(--text-secondary); }
.ch-tab.active        { background:var(--surface-1);border-color:var(--border);border-bottom-color:var(--surface-1);color:var(--text-primary); }
.ch-tab .tab-dot      { width:7px;height:7px;border-radius:50%;background:var(--border-strong);flex-shrink:0; }
.ch-tab.done .tab-dot { background:#4ecdc8; }
.ch-tab.error .tab-dot{ background:#f87171; }
.ch-tab.loading .tab-dot { background:#f59e0b;animation:pulse .9s infinite; }
@keyframes pulse      { 0%,100%{opacity:1;}50%{opacity:.35;} }

/* ── Channel panel ── */
.ch-panel             { display:none;background:var(--surface-1);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r-lg) var(--r-lg); }
.ch-panel.active      { display:block; }
.ch-panel-inner       { display:grid;grid-template-columns:1fr 1fr;min-height:560px; }
.ch-editor            { padding:22px;border-right:1px solid var(--border);overflow-y:auto; }
.ch-preview           { padding:22px;background:var(--surface-2);border-radius:0 0 var(--r-lg) 0;overflow-y:auto; }
.ch-panel-footer      { display:flex;align-items:center;justify-content:space-between;padding:12px 22px;border-top:1px solid var(--border);background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg); }
.ch-save-status       { color:var(--text-muted);font-size:.8rem; }

/* ── Skeleton ── */
.skel                 { background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-md); }
@keyframes shimmer    { 0%{background-position:200% 0;}100%{background-position:-200% 0;} }
.skel-line            { height:14px;margin-bottom:8px; }
.skel-block           { height:80px;margin-bottom:8px; }
.skel-img             { aspect-ratio:1.91/1;width:100%; }
.skel-preview-card    { background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden; }

/* Gen status bar */
.gen-status-bar       { margin-bottom:16px;padding:13px 15px;background:rgba(14,122,116,.07);border:1px solid rgba(14,122,116,.2);border-radius:var(--r-lg); }
.gen-status-head      { display:flex;align-items:center;gap:9px;margin-bottom:5px; }
.gen-status-emoji     { font-size:1.1rem; }
.gen-status-msg       { font-size:.85rem;font-weight:700;color:var(--text-primary); }
.gen-status-eta       { font-size:.75rem;color:var(--text-muted);margin-bottom:8px; }
.gen-status-track     { height:3px;background:var(--surface-3);border-radius:2px;overflow:hidden; }
.gen-status-fill      { height:100%;background:linear-gradient(90deg,var(--primary),#7c3aed);border-radius:2px;width:5%;transition:width 1s ease; }

/* ── Field editor ── */
.field-block          { margin-bottom:16px; }
.field-label          { font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:5px;display:flex;align-items:center;justify-content:space-between; }
.field-actions        { display:flex;gap:3px; }
.fab                  { padding:3px 8px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--border);font-size:.72rem;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:3px; }
.fab:hover            { border-color:var(--primary);color:#4ecdc8; }
.fab.loading          { opacity:.6;pointer-events:none; }
.cta-url-row          { display:flex;align-items:center;gap:6px;margin-top:6px; }
.cta-url-row .url-label{ font-size:.7rem;color:var(--text-muted);white-space:nowrap;font-weight:600; }

/* ── AB / Tone / Instruction ── */
.ab-container         { display:none;margin-top:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:10px; }
.ab-container.open    { display:block; }
.ab-variant           { padding:9px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;font-size:.85rem;margin-bottom:5px;transition:all .15s;position:relative; }
.ab-variant:hover     { border-color:var(--primary); }
.ab-variant.chosen    { border-color:var(--primary);background:rgba(14,122,116,.04); }
.ab-variant:last-child{ margin-bottom:0; }
.use-btn              { position:absolute;top:6px;right:6px;font-size:.65rem;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--primary);color:#fff;opacity:0;transition:opacity .15s; }
.ab-variant:hover .use-btn { opacity:1; }
.tone-adj             { display:none;flex-wrap:wrap;gap:5px;margin-top:6px; }
.tone-adj.open        { display:flex; }
.tone-mini            { padding:4px 9px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--border);font-size:.72rem;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all .15s; }
.tone-mini:hover      { border-color:var(--primary);color:#4ecdc8; }
.instr-input          { display:none;margin-top:5px; }
.instr-input.open     { display:block; }
.instr-row            { display:flex;gap:6px;margin-top:5px; }

/* ── Media panel inside editor ── */
.media-panel          { border-top:1px solid var(--border);padding-top:14px;margin-top:6px; }
.media-panel-label    { font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:10px;display:flex;align-items:center;gap:6px; }
.media-sel-wrap       { display:none;margin-bottom:8px; }
.media-sel-img-wrap   { position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9;background:var(--surface-3);margin-bottom:6px; }
.media-sel-img-wrap img { width:100%;height:100%;object-fit:cover; }
.media-sel-clear      { position:absolute;top:6px;right:6px;background:rgba(0,0,0,.65);border:none;color:#fff;border-radius:50%;width:22px;height:22px;font-size:.7rem;cursor:pointer; }
.media-archive-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:5px; }
.media-archive-lbl    { font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em; }
.media-thumb-grid     { display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px; }
.media-thumb-item     { aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .15s;position:relative;background:var(--surface-3); }
.media-thumb-item:hover { border-color:var(--primary); }
.media-thumb-item.sel { border-color:var(--primary);box-shadow:0 0 0 2px rgba(14,122,116,.3); }
.media-thumb-item img,.media-thumb-item video { width:100%;height:100%;object-fit:cover;display:block; }
.media-ai-section     { margin-top:10px;border-top:1px solid var(--border);padding-top:10px; }
.media-ai-preview     { display:none;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9;background:var(--surface-3);margin-bottom:8px; }
.media-ai-preview img { width:100%;height:100%;object-fit:cover; }

/* ── Preview column ── */
.preview-label        { font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:12px;display:flex;align-items:center;gap:6px; }
.preview-coming-soon  { background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:var(--r-lg);padding:32px;text-align:center;color:var(--text-muted); }
.preview-coming-icon  { font-size:2rem;margin-bottom:12px; }

/* ── Facebook preview ── */
.fb-card              { background:#fff;border-radius:8px;overflow:hidden;font-family:'Helvetica Neue',sans-serif;border:1px solid #ddd;color:#000; }
.fb-header            { display:flex;align-items:center;gap:8px;padding:10px 12px; }
.fb-avatar            { width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#1877f2,#166fe5);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85rem;font-weight:800;flex-shrink:0; }
.fb-page-name         { font-size:.85rem;font-weight:700;color:#050505; }
.fb-sponsored         { font-size:.72rem;color:#65676b; }
.fb-body              { padding:0 12px 8px;font-size:.85rem;color:#050505;line-height:1.4;white-space:pre-wrap; }
.fb-img-wrap          { width:100%;aspect-ratio:1.91/1;overflow:hidden;position:relative; }
.fb-img-wrap img      { width:100%;height:100%;object-fit:cover;display:block; }
.fb-img-empty         { width:100%;aspect-ratio:1.91/1;background:#e4e6ea;display:flex;align-items:center;justify-content:center;color:#65676b;font-size:.8rem; }
.fb-link-box          { background:#f0f2f5;padding:12px;border-top:1px solid #ddd; }
.fb-link-domain       { font-size:.7rem;text-transform:uppercase;color:#65676b; }
.fb-link-title        { font-size:.9rem;font-weight:700;color:#050505;margin:2px 0; }
.fb-link-desc         { font-size:.78rem;color:#65676b; }
.fb-actions-row       { display:flex;padding:2px 12px;border-top:1px solid #e4e6ea; }
.fb-action-btn        { flex:1;padding:8px 4px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:.85rem;font-weight:600;color:#65676b;cursor:pointer; }
.fb-cta-btn           { display:block;margin:8px 12px;padding:8px;background:#e7f3ff;color:#1877f2;border-radius:4px;font-size:.85rem;font-weight:700;text-align:center;border:1px solid #c9d8f0; }

/* ── Instagram preview ── */
.ig-card              { background:#fff;border-radius:8px;overflow:hidden;font-family:-apple-system,sans-serif;border:1px solid #dbdbdb;color:#000; }
.ig-header            { display:flex;align-items:center;justify-content:space-between;padding:10px 12px; }
.ig-avatar-ring       { width:32px;height:32px;border-radius:50%;background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);padding:2px; }
.ig-avatar-inner      { width:100%;height:100%;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:#262626; }
.ig-username          { font-size:.85rem;font-weight:700;color:#262626; }
.ig-img-wrap          { width:100%;aspect-ratio:1/1;overflow:hidden; }
.ig-img-wrap img      { width:100%;height:100%;object-fit:cover;display:block; }
.ig-img-empty         { width:100%;aspect-ratio:1/1;background:#fafafa;display:flex;align-items:center;justify-content:center;color:#8e8e8e;font-size:.8rem; }
.ig-actions-row       { padding:8px 12px 4px;display:flex;gap:14px;align-items:center; }
.ig-caption           { padding:0 12px 10px;font-size:.85rem;color:#262626;line-height:1.4; }
.ig-caption strong    { font-weight:700; }
.ig-sponsored-lbl     { font-size:.72rem;color:#8e8e8e;padding:0 12px 4px; }
.ig-cta-bar           { background:#405DE6;color:#fff;text-align:center;padding:9px;font-size:.85rem;font-weight:700;margin:0 12px 12px;border-radius:4px;cursor:pointer; }

/* ── Google Ads preview ── */
.g-card               { background:#fff;border-radius:8px;padding:14px;font-family:arial,sans-serif;border:1px solid #dfe1e5; }
.g-ad-label           { display:inline-block;background:#fff;border:1px solid #006621;color:#006621;font-size:.65rem;padding:1px 4px;border-radius:3px;margin-bottom:4px; }
.g-display-url        { font-size:.85rem;color:#202124;margin-bottom:3px; }
.g-headline           { font-size:1.15rem;color:#1a0dab;line-height:1.3;margin-bottom:4px;cursor:pointer; }
.g-headline:hover     { text-decoration:underline; }
.g-description        { font-size:.85rem;color:#4d5156;line-height:1.5; }
.g-extensions         { margin-top:8px;display:flex;gap:12px;flex-wrap:wrap; }
.g-ext-link           { font-size:.85rem;color:#1a0dab;cursor:pointer; }
.g-ext-link:hover     { text-decoration:underline; }

/* ── Email preview ── */
.em-card              { background:#f4f5f7;border-radius:8px;overflow:hidden;font-family:Georgia,serif;border:1px solid #ddd; }
.em-topbar            { background:#2c3e50;padding:8px 14px;display:flex;align-items:center;justify-content:space-between; }
.em-topbar-title      { color:#ecf0f1;font-size:.72rem;font-family:sans-serif; }
.em-body-wrap         { background:#fff;margin:12px;border-radius:6px;overflow:hidden;border:1px solid #e8e8e8; }
.em-banner            { background:linear-gradient(135deg,#0e7a74,#183a3d);padding:22px;text-align:center; }
.em-banner-title      { color:#fff;font-size:1.15rem;font-weight:700;font-family:sans-serif;margin:0; }
.em-body-inner        { padding:20px; }
.em-body-inner p      { font-size:.85rem;color:#333;line-height:1.7;margin:0 0 14px; }
.em-img-wrap          { margin-bottom:14px;border-radius:4px;overflow:hidden; }
.em-img-wrap img      { width:100%;max-height:180px;object-fit:cover; }
.em-cta-btn           { display:block;background:#0e7a74;color:#fff !important;text-align:center;padding:12px 24px;border-radius:4px;font-size:.9rem;font-weight:700;font-family:sans-serif;text-decoration:none;margin:16px 0; }
.em-footer-bar        { background:#f4f5f7;padding:12px;text-align:center;font-size:.65rem;color:#999;font-family:sans-serif; }

/* ── TikTok preview — same proportions as FB/IG ── */
.tt-card              { background:#000;border-radius:8px;overflow:hidden;font-family:-apple-system,sans-serif;position:relative;aspect-ratio:1.91/1;display:flex;align-items:flex-end; }
.tt-bg-overlay        { position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.75) 100%);z-index:1; }
.tt-bg-img            { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0; }
.tt-no-media          { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#888;font-size:.8rem;z-index:0; }
.tt-no-media-icon     { font-size:2rem; }
.tt-content           { position:relative;z-index:2;padding:14px;width:100%; }
.tt-username-lbl      { font-size:.85rem;font-weight:700;color:#fff;margin-bottom:6px; }
.tt-caption-text      { font-size:.78rem;color:#fff;line-height:1.5;margin-bottom:8px; }
.tt-cta-pill          { background:rgb(254,44,85);color:#fff;padding:7px 14px;border-radius:4px;font-size:.78rem;font-weight:700;display:inline-block; }
.tt-side-btns         { position:absolute;right:10px;bottom:70px;display:flex;flex-direction:column;gap:16px;align-items:center;z-index:2; }
.tt-side-btn          { color:#fff;font-size:1.25rem;display:flex;flex-direction:column;align-items:center;gap:2px; }
.tt-side-count        { font-size:.65rem;color:#fff; }

/* ── SMS preview ── */
.sms-card             { background:#f2f2f7;border-radius:8px;padding:14px;font-family:-apple-system,sans-serif; }
.sms-time-lbl         { font-size:.72rem;color:#8e8e93;text-align:center;margin-bottom:10px; }
.sms-sender-lbl       { font-size:.72rem;color:#8e8e93;margin-bottom:5px; }
.sms-bubble           { background:#fff;border-radius:16px 16px 16px 4px;padding:12px 14px;max-width:90%;font-size:.85rem;color:#000;line-height:1.5;border:1px solid #e5e5ea; }

/* ── YouTube preview ── */
.yt-card              { background:#fff;border-radius:8px;overflow:hidden;font-family:Roboto,sans-serif;border:1px solid #e5e5e5; }
.yt-thumb             { width:100%;aspect-ratio:16/9;background:#0f0f0f;position:relative;display:flex;align-items:center;justify-content:center; }
.yt-play-btn          { width:48px;height:34px;background:rgba(255,0,0,.9);border-radius:8px;display:flex;align-items:center;justify-content:center;position:absolute;z-index:1; }
.yt-play-btn::after   { content:'';border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px; }
.yt-thumb-img         { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none; }
.yt-no-video-msg      { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#aaa;font-size:.78rem;width:100%;height:100%; }
.yt-info-panel        { padding:10px 12px; }
.yt-video-title       { font-size:.9rem;font-weight:500;color:#0f0f0f;line-height:1.4;margin-bottom:4px; }
.yt-channel-name      { font-size:.78rem;color:#606060; }
.yt-video-meta        { font-size:.78rem;color:#606060;margin-top:2px; }

/* ── Guard / draft modals ── */
.guard-overlay        { position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:2000;display:flex;align-items:center;justify-content:center; }
.guard-modal          { background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--r-xl);padding:28px 32px;max-width:420px;width:100%;box-shadow:var(--shadow-lg); }
.guard-icon           { font-size:1.5rem;margin-bottom:10px; }
.guard-actions        { display:flex;gap:10px;justify-content:flex-end; }

/* ── Media pick modal ── */
.media-modal-inner    { background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--r-xl);padding:24px 28px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg); }
.media-modal-header   { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.media-modal-header h3{ margin:0; }
.media-modal-tabs     { display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:16px; }
.media-modal-tab      { padding:8px 14px;font-size:.78rem;font-weight:700;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s; }
.media-modal-tab:hover{ color:var(--text-secondary); }
.media-modal-tab.active{color:var(--primary);border-bottom-color:var(--primary); }
.media-modal-grid     { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:320px;overflow-y:auto; }
.media-modal-empty    { text-align:center;padding:28px; }
.media-modal-empty-icon{ font-size:1.75rem;margin-bottom:10px; }
.media-modal-apply-bar{ margin-top:16px;padding-top:14px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap; }
.media-modal-sel-info { font-size:.78rem;color:var(--text-muted); }
.media-modal-sel-name { color:var(--text-primary);font-weight:600; }
.media-upload-drop    { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px;border:2px dashed var(--border-strong);border-radius:var(--r-lg);cursor:pointer;transition:border-color .15s;background:var(--surface-2);text-align:center; }
.media-upload-drop:hover { border-color:var(--primary); }
.media-upload-drop-icon { font-size:2rem; }
.media-upload-progress{ display:none;margin-top:12px; }
.media-upload-bar-wrap{ height:4px;background:var(--surface-3);border-radius:2px;overflow:hidden;margin-top:6px; }
.media-upload-bar-fill{ height:100%;background:var(--primary);border-radius:2px;width:0%;transition:width .3s; }
.media-ai-generate-btn{ width:100%; }


/* ── S2 utility classes ── */
.faq-q-input          { font-size:.8rem;margin-bottom:5px; }
.faq-a-input          { font-size:.8rem; }
.ab-loading           { font-size:.8rem;color:var(--text-muted);padding:6px; }
.ab-variant-label     { font-size:.68rem;font-weight:700;color:var(--primary);margin-bottom:3px; }
.ab-variant-text      { font-size:.82rem; }
.ab-error             { font-size:.8rem;color:#f87171;padding:6px; }
.btn-full-sm          { width:100%; }

/* ============================================================
   SIDEBAR LIGHT MODE FIX
   Sidebar must ALWAYS look dark — override every element explicitly
   ============================================================ */
body[data-theme="light"] .sidebar {
  background:        #131920 !important;
  border-right-color: rgba(255,255,255,.07) !important;
}

/* All text inside sidebar stays dark-theme */
body[data-theme="light"] .sidebar,
body[data-theme="light"] .sidebar .nav-item,
body[data-theme="light"] .sidebar .nav-section-label,
body[data-theme="light"] .sidebar .logo-text,
body[data-theme="light"] .sidebar .logo-sub,
body[data-theme="light"] .sidebar .company-name,
body[data-theme="light"] .sidebar .company-id,
body[data-theme="light"] .sidebar .user-name,
body[data-theme="light"] .sidebar .user-role,
body[data-theme="light"] .sidebar .btn-logout {
  color: var(--dark-text, #b8cce0);
}

body[data-theme="light"] .sidebar .nav-item { color: #a8b8cc !important; }
body[data-theme="light"] .sidebar .nav-item:hover { background: rgba(255,255,255,.06) !important; color: #f0f4f8 !important; }
body[data-theme="light"] .sidebar .nav-item.active { background: rgba(14,122,116,.15) !important; color: #4ecdc8 !important; }

body[data-theme="light"] .sidebar .logo-text { color: #f0f4f8 !important; }
body[data-theme="light"] .sidebar .logo-sub  { color: #6a7f95 !important; }
body[data-theme="light"] .sidebar .nav-section-label { color: #6a7f95 !important; }

/* Company pill in sidebar */
body[data-theme="light"] .sidebar .company-pill {
  background:   #1a2330 !important;
  border-color: rgba(255,255,255,.1) !important;
}
body[data-theme="light"] .sidebar .company-pill:hover { background: #202d3d !important; }
body[data-theme="light"] .sidebar .company-name { color: #f0f4f8 !important; }
body[data-theme="light"] .sidebar .company-id   { color: #6a7f95 !important; }

/* Sidebar footer */
body[data-theme="light"] .sidebar .sidebar-footer { border-top-color: rgba(255,255,255,.07) !important; }
body[data-theme="light"] .sidebar .user-row:hover { background: rgba(255,255,255,.06) !important; }
body[data-theme="light"] .sidebar .user-name { color: #f0f4f8 !important; }
body[data-theme="light"] .sidebar .user-role { color: #6a7f95 !important; }
body[data-theme="light"] .sidebar .btn-logout { color: #6a7f95 !important; }
body[data-theme="light"] .sidebar .btn-logout:hover { background: rgba(239,68,68,.1) !important; color: #f87171 !important; }

/* Nav badges stay as-is */
body[data-theme="light"] .sidebar .nb-new  { background: var(--accent) !important; color: #fff !important; }
body[data-theme="light"] .sidebar .nb-beta { background: rgba(14,122,116,.2) !important; color: #4ecdc8 !important; }
body[data-theme="light"] .sidebar .nb-soon { background: rgba(255,255,255,.08) !important; color: #6a7f95 !important; border-color: rgba(255,255,255,.1) !important; }

/* Active indicator bar */
body[data-theme="light"] .sidebar .nav-item.active::before { background: var(--primary) !important; }

/* ============================================================
   CONTENT GENERATOR — STEP 2
   ============================================================ */

/* ── Step 2 layout ── */
.s2-header            { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px; }
.s2-header-meta       { font-size:12px;color:var(--text-muted); }
.s2-header-meta .aud  { color:#a78bfa; }
.s2-actions           { display:flex;gap:8px;flex-wrap:wrap; }

/* ── Tab nav ── */
.ch-tab-nav           { display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--border);margin-bottom:0; }
.ch-tab               { padding:9px 14px;border-radius:var(--r-md) var(--r-md) 0 0;font-size:12px;font-weight:700;color:var(--text-muted);cursor:pointer;transition:all .15s;border:1px solid transparent;border-bottom:none;position:relative;top:2px;display:flex;align-items:center;gap:6px; }
.ch-tab:hover         { background:var(--surface-2);color:var(--text-secondary); }
.ch-tab.active        { background:var(--surface-1);border-color:var(--border);border-bottom-color:var(--surface-1);color:var(--text-primary); }
.ch-tab .tab-dot      { width:7px;height:7px;border-radius:50%;background:var(--border-strong);flex-shrink:0; }
.ch-tab.done .tab-dot { background:#4ecdc8; }
.ch-tab.error .tab-dot{ background:#f87171; }
.ch-tab.loading .tab-dot { background:#f59e0b;animation:pulse .9s infinite; }
@keyframes pulse      { 0%,100%{opacity:1;}50%{opacity:.35;} }

/* ── Channel panel ── */
.ch-panel             { display:none;background:var(--surface-1);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r-lg) var(--r-lg); }
.ch-panel.active      { display:block; }
.ch-panel-inner       { display:grid;grid-template-columns:1fr 1fr;min-height:560px; }
.ch-editor            { padding:22px;border-right:1px solid var(--border);overflow-y:auto; }
.ch-preview           { padding:22px;background:var(--surface-2);border-radius:0 0 var(--r-lg) 0;overflow-y:auto; }
.ch-panel-footer      { display:flex;align-items:center;justify-content:space-between;padding:12px 22px;border-top:1px solid var(--border);background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg); }
.ch-save-status       { font-size:12px;color:var(--text-muted); }

/* ── Skeleton ── */
.skel                 { background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-md); }
@keyframes shimmer    { 0%{background-position:200% 0;}100%{background-position:-200% 0;} }
.skel-line            { height:14px;margin-bottom:8px; }
.skel-block           { height:80px;margin-bottom:8px; }
.skel-img             { aspect-ratio:1.91/1;width:100%; }
.skel-preview-card    { background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden; }

/* Gen status bar inside skeleton */
.gen-status-bar       { margin-bottom:16px;padding:13px 15px;background:rgba(14,122,116,.07);border:1px solid rgba(14,122,116,.2);border-radius:var(--r-lg); }
.gen-status-head      { display:flex;align-items:center;gap:9px;margin-bottom:5px; }
.gen-status-emoji     { font-size:17px; }
.gen-status-msg       { font-size:13px;font-weight:700;color:var(--text-primary); }
.gen-status-eta       { font-size:11px;color:var(--text-muted);margin-bottom:8px; }
.gen-status-track     { height:3px;background:var(--surface-3);border-radius:2px;overflow:hidden; }
.gen-status-fill      { height:100%;background:linear-gradient(90deg,var(--primary),#7c3aed);border-radius:2px;width:5%;transition:width 1s ease; }

/* ── Field editor ── */
.field-block          { margin-bottom:16px; }
.field-label          { font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:5px;display:flex;align-items:center;justify-content:space-between; }
.field-actions        { display:flex;gap:3px; }
.fab                  { padding:3px 8px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--border);font-size:11px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:3px; }
.fab:hover            { border-color:var(--primary);color:#4ecdc8; }
.fab.loading          { opacity:.6;pointer-events:none; }
.cta-url-row          { display:flex;align-items:center;gap:6px;margin-top:6px; }
.cta-url-row .url-label{ font-size:10px;color:var(--text-muted);white-space:nowrap;font-weight:600; }

/* ── AB / Tone / Instruction ── */
.ab-container         { display:none;margin-top:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:10px; }
.ab-container.open    { display:block; }
.ab-variant           { padding:9px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;font-size:13px;margin-bottom:5px;transition:all .15s;position:relative; }
.ab-variant:hover     { border-color:var(--primary); }
.ab-variant.chosen    { border-color:var(--primary);background:rgba(14,122,116,.04); }
.ab-variant:last-child{ margin-bottom:0; }
.use-btn              { position:absolute;top:6px;right:6px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--primary);color:#fff;opacity:0;transition:opacity .15s; }
.ab-variant:hover .use-btn { opacity:1; }
.tone-adj             { display:none;flex-wrap:wrap;gap:5px;margin-top:6px; }
.tone-adj.open        { display:flex; }
.tone-mini            { padding:4px 9px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--border);font-size:11px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all .15s; }
.tone-mini:hover      { border-color:var(--primary);color:#4ecdc8; }
.instr-input          { display:none;margin-top:5px; }
.instr-input.open     { display:block; }
.instr-row            { display:flex;gap:6px;margin-top:5px; }

/* ── Media panel inside editor ── */
.media-panel          { border-top:1px solid var(--border);padding-top:14px;margin-top:6px; }
.media-panel-label    { font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:10px;display:flex;align-items:center;gap:6px; }
.media-sel-wrap       { display:none;margin-bottom:8px; }
.media-sel-img-wrap   { position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9;background:var(--surface-3);margin-bottom:6px; }
.media-sel-img-wrap img { width:100%;height:100%;object-fit:cover; }
.media-sel-clear      { position:absolute;top:6px;right:6px;background:rgba(0,0,0,.65);border:none;color:#fff;border-radius:50%;width:22px;height:22px;font-size:11px;cursor:pointer; }
.media-archive-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:5px; }
.media-archive-lbl    { font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em; }
.media-thumb-grid     { display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px; }
.media-thumb-item     { aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .15s;position:relative;background:var(--surface-3); }
.media-thumb-item:hover { border-color:var(--primary); }
.media-thumb-item.sel { border-color:var(--primary);box-shadow:0 0 0 2px rgba(14,122,116,.3); }
.media-thumb-item img,.media-thumb-item video { width:100%;height:100%;object-fit:cover;display:block; }
.media-ai-section     { margin-top:10px;border-top:1px solid var(--border);padding-top:10px; }
.media-ai-preview     { display:none;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9;background:var(--surface-3);margin-bottom:8px; }
.media-ai-preview img { width:100%;height:100%;object-fit:cover; }

/* ── Preview ── */
.preview-label        { font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:12px;display:flex;align-items:center;gap:6px; }
.preview-coming-soon  { background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:var(--r-lg);padding:32px;text-align:center;color:var(--text-muted); }
.preview-coming-icon  { font-size:32px;margin-bottom:12px; }

/* ── Facebook preview ── */
.fb-card              { background:#fff;border-radius:8px;overflow:hidden;font-family:'Helvetica Neue',sans-serif;border:1px solid #ddd;color:#000; }
.fb-header            { display:flex;align-items:center;gap:8px;padding:10px 12px; }
.fb-avatar            { width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#1877f2,#166fe5);display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800;flex-shrink:0; }
.fb-page-name         { font-size:13px;font-weight:700;color:#050505; }
.fb-sponsored         { font-size:11px;color:#65676b; }
.fb-body              { padding:0 12px 8px;font-size:13px;color:#050505;line-height:1.4;white-space:pre-wrap; }
.fb-img-wrap          { width:100%;aspect-ratio:1.91/1;overflow:hidden;position:relative; }
.fb-img-wrap img      { width:100%;height:100%;object-fit:cover;display:block; }
.fb-img-empty         { width:100%;aspect-ratio:1.91/1;background:#e4e6ea;display:flex;align-items:center;justify-content:center;color:#65676b;font-size:12px; }
.fb-link-box          { background:#f0f2f5;padding:12px;border-top:1px solid #ddd; }
.fb-link-domain       { font-size:11px;text-transform:uppercase;color:#65676b; }
.fb-link-title        { font-size:14px;font-weight:700;color:#050505;margin:2px 0; }
.fb-link-desc         { font-size:12px;color:#65676b; }
.fb-actions-row       { display:flex;padding:2px 12px;border-top:1px solid #e4e6ea; }
.fb-action-btn        { flex:1;padding:8px 4px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:13px;font-weight:600;color:#65676b;cursor:pointer; }
.fb-cta-btn           { display:block;margin:8px 12px;padding:8px;background:#e7f3ff;color:#1877f2;border-radius:4px;font-size:13px;font-weight:700;text-align:center;border:1px solid #c9d8f0; }

/* ── Instagram preview ── */
.ig-card              { background:#fff;border-radius:8px;overflow:hidden;font-family:-apple-system,sans-serif;border:1px solid #dbdbdb;color:#000; }
.ig-header            { display:flex;align-items:center;justify-content:space-between;padding:10px 12px; }
.ig-avatar-ring       { width:32px;height:32px;border-radius:50%;background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);padding:2px; }
.ig-avatar-inner      { width:100%;height:100%;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#262626; }
.ig-username          { font-size:13px;font-weight:700;color:#262626; }
.ig-img-wrap          { width:100%;aspect-ratio:1/1;overflow:hidden; }
.ig-img-wrap img      { width:100%;height:100%;object-fit:cover;display:block; }
.ig-img-empty         { width:100%;aspect-ratio:1/1;background:#fafafa;display:flex;align-items:center;justify-content:center;color:#8e8e8e;font-size:12px; }
.ig-actions-row       { padding:8px 12px 4px;display:flex;gap:14px;align-items:center; }
.ig-caption           { padding:0 12px 10px;font-size:13px;color:#262626;line-height:1.4; }
.ig-caption strong    { font-weight:700; }
.ig-sponsored-lbl     { font-size:11px;color:#8e8e8e;padding:0 12px 4px; }
.ig-cta-bar           { background:#405DE6;color:#fff;text-align:center;padding:9px;font-size:13px;font-weight:700;margin:0 12px 12px;border-radius:4px;cursor:pointer; }

/* ── Google Ads preview ── */
.g-card               { background:#fff;border-radius:8px;padding:14px;font-family:arial,sans-serif;border:1px solid #dfe1e5; }
.g-ad-label           { display:inline-block;background:#fff;border:1px solid #006621;color:#006621;font-size:10px;padding:1px 4px;border-radius:3px;margin-bottom:4px; }
.g-display-url        { font-size:13px;color:#202124;margin-bottom:3px; }
.g-headline           { font-size:18px;color:#1a0dab;line-height:1.3;margin-bottom:4px;cursor:pointer; }
.g-headline:hover     { text-decoration:underline; }
.g-description        { font-size:13px;color:#4d5156;line-height:1.5; }
.g-extensions         { margin-top:8px;display:flex;gap:12px;flex-wrap:wrap; }
.g-ext-link           { font-size:13px;color:#1a0dab;cursor:pointer; }
.g-ext-link:hover     { text-decoration:underline; }

/* ── Email preview ── */
.em-card              { background:#f4f5f7;border-radius:8px;overflow:hidden;font-family:Georgia,serif;border:1px solid #ddd; }
.em-topbar            { background:#2c3e50;padding:8px 14px;display:flex;align-items:center;justify-content:space-between; }
.em-topbar-title      { color:#ecf0f1;font-size:11px;font-family:sans-serif; }
.em-body-wrap         { background:#fff;margin:12px;border-radius:6px;overflow:hidden;border:1px solid #e8e8e8; }
.em-banner            { background:linear-gradient(135deg,#0e7a74,#183a3d);padding:22px;text-align:center; }
.em-banner-title      { color:#fff;font-size:18px;font-weight:700;font-family:sans-serif;margin:0; }
.em-body-inner        { padding:20px; }
.em-body-inner p      { font-size:13px;color:#333;line-height:1.7;margin:0 0 14px; }
.em-img-wrap          { margin-bottom:14px;border-radius:4px;overflow:hidden; }
.em-img-wrap img      { width:100%;max-height:180px;object-fit:cover; }
.em-cta-btn           { display:block;background:#0e7a74;color:#fff !important;text-align:center;padding:12px 24px;border-radius:4px;font-size:14px;font-weight:700;font-family:sans-serif;text-decoration:none;margin:16px 0; }
.em-footer-bar        { background:#f4f5f7;padding:12px;text-align:center;font-size:10px;color:#999;font-family:sans-serif; }

/* ── TikTok preview ── */
.tt-card              { background:#000;border-radius:8px;overflow:hidden;font-family:-apple-system,sans-serif;position:relative;aspect-ratio:4/3;display:flex;align-items:flex-end; }
.tt-bg-overlay        { position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.75) 100%);z-index:1; }
.tt-bg-img            { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0; }
.tt-no-media          { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#888;font-size:12px;z-index:0; }
.tt-no-media-icon     { font-size:32px; }
.tt-content           { position:relative;z-index:2;padding:14px;width:100%; }
.tt-username-lbl      { font-size:13px;font-weight:700;color:#fff;margin-bottom:6px; }
.tt-caption-text      { font-size:12px;color:#fff;line-height:1.5;margin-bottom:8px; }
.tt-cta-pill          { background:rgb(254,44,85);color:#fff;padding:7px 14px;border-radius:4px;font-size:12px;font-weight:700;display:inline-block; }
.tt-side-btns         { position:absolute;right:10px;bottom:70px;display:flex;flex-direction:column;gap:16px;align-items:center;z-index:2; }
.tt-side-btn          { color:#fff;font-size:20px;display:flex;flex-direction:column;align-items:center;gap:2px; }
.tt-side-count        { font-size:10px;color:#fff; }

/* ── SMS preview ── */
.sms-card             { background:#f2f2f7;border-radius:8px;padding:14px;font-family:-apple-system,sans-serif; }
.sms-time-lbl         { font-size:11px;color:#8e8e93;text-align:center;margin-bottom:10px; }
.sms-sender-lbl       { font-size:11px;color:#8e8e93;margin-bottom:5px; }
.sms-bubble           { background:#fff;border-radius:16px 16px 16px 4px;padding:12px 14px;max-width:90%;font-size:13px;color:#000;line-height:1.5;border:1px solid #e5e5ea; }

/* ── YouTube preview ── */
.yt-card              { background:#fff;border-radius:8px;overflow:hidden;font-family:Roboto,sans-serif;border:1px solid #e5e5e5; }
.yt-thumb             { width:100%;aspect-ratio:16/9;background:#0f0f0f;position:relative;display:flex;align-items:center;justify-content:center; }
.yt-play-btn          { width:48px;height:34px;background:rgba(255,0,0,.9);border-radius:8px;display:flex;align-items:center;justify-content:center;position:absolute;z-index:1; }
.yt-play-btn::after   { content:'';border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px; }
.yt-thumb-img         { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none; }
.yt-no-video-msg      { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#aaa;font-size:12px;width:100%;height:100%; }
.yt-info-panel        { padding:10px 12px; }
.yt-video-title       { font-size:14px;font-weight:500;color:#0f0f0f;line-height:1.4;margin-bottom:4px; }
.yt-channel-name      { font-size:12px;color:#606060; }
.yt-video-meta        { font-size:12px;color:#606060;margin-top:2px; }

/* ── Guard / draft modals ── */
.guard-overlay        { position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:2000;display:flex;align-items:center;justify-content:center; }
.guard-modal          { background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--r-xl);padding:28px 32px;max-width:420px;width:100%;box-shadow:var(--shadow-lg); }
.guard-icon           { font-size:24px;margin-bottom:10px; }
.guard-actions        { display:flex;gap:10px;justify-content:flex-end; }

/* ── Media pick modal ── */
.media-modal-inner    { max-width:560px;width:100%;max-height:90vh;overflow-y:auto; }
.media-modal-header   { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.media-modal-tabs     { display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:16px; }
.media-modal-tab      { padding:8px 14px;font-size:12px;font-weight:700;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s; }
.media-modal-tab:hover{ color:var(--text-secondary); }
.media-modal-tab.active{color:var(--primary);border-bottom-color:var(--primary); }
.media-modal-grid     { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:320px;overflow-y:auto; }
.media-modal-empty    { text-align:center;padding:28px; }
.media-modal-empty-icon{ font-size:28px;margin-bottom:10px; }
.media-modal-apply-bar{ margin-top:16px;padding-top:14px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap; }
.media-modal-sel-info { font-size:12px;color:var(--text-muted); }
.media-modal-sel-name { color:var(--text-primary);font-weight:600; }
.media-upload-drop    { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px;border:2px dashed var(--border-strong);border-radius:var(--r-lg);cursor:pointer;transition:border-color .15s;background:var(--surface-2); }
.media-upload-drop:hover { border-color:var(--primary); }
.media-upload-drop-icon { font-size:32px; }
.media-upload-progress{ display:none;margin-top:12px; }
.media-upload-bar-wrap{ height:4px;background:var(--surface-3);border-radius:2px;overflow:hidden;margin-top:6px; }
.media-upload-bar-fill{ height:100%;background:var(--primary);border-radius:2px;width:0%;transition:width .3s; }
.media-ai-generate-btn{ width:100%; }

/* ============================================================
   GLOBAL UTILITY CLASSES — replaces common inline styles
   ============================================================ */

/* Text helpers */
.text-muted      { color: var(--text-muted) !important; }
.text-primary-c  { color: var(--text-primary) !important; }
.text-secondary-c{ color: var(--text-secondary) !important; }
.text-teal       { color: var(--teal, #4ecdc8) !important; }
.text-orange     { color: var(--orange, #fb923c) !important; }
.text-purple     { color: var(--purple, #aa438f) !important; }
.text-blue       { color: var(--blue, #60a5fa) !important; }
.text-green      { color: var(--green, #4ade80) !important; }
.text-danger     { color: #f87171 !important; }
.text-warning    { color: #f59e0b !important; }
.text-success    { color: #4ade80 !important; }

/* Font weight */
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }

/* Typography scale — all scale with body @media */
.fs-xxs  { font-size: .65em; }
.fs-xs   { font-size: .72em; }
.fs-sm   { font-size: .8em;  }
.fs-base { font-size: 1em;   }
.fs-md   { font-size: 1.05em;}
.fs-lg   { font-size: 1.15em;}
.fs-xl   { font-size: 1.35em;}
.fs-2xl  { font-size: 1.6em; }
.fs-icon { font-size: 1.25em;}
.fs-icon-lg { font-size: 1.5em; }

/* Spacing */
.mb-0   { margin-bottom: 0; }
.mb-4   { margin-bottom: 4px; }
.mb-6   { margin-bottom: 6px; }
.mb-8   { margin-bottom: 8px; }
.mb-10  { margin-bottom: 10px; }
.mb-12  { margin-bottom: 12px; }
.mb-16  { margin-bottom: 16px; }
.mb-24  { margin-bottom: 24px; }
.mt-10  { margin-top: 10px; }
.mt-12  { margin-top: 12px; }
.mt-16  { margin-top: 16px; }

/* Layout shortcuts */
.flex-row       { display: flex; align-items: center; gap: 8px; }
.flex-row-6     { display: flex; align-items: center; gap: 6px; }
.flex-between   { display: flex; align-items: center; justify-content: space-between; }
.flex-between-16{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.flex-1         { flex: 1; min-width: 0; }
.w-full         { width: 100%; }
.gap-8          { gap: 8px; }
.gap-6          { gap: 6px; }

/* Page header pattern */
.page-header       { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.page-title        { font-size: 1.25em; font-weight: 800; letter-spacing: -.4px; margin-bottom: 4px; }
.page-subtitle     { color: var(--text-muted); margin: 0; }

/* Section cards */
.section-card      { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 22px; margin-bottom: 14px; }
.section-title     { font-size: .8em; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }

/* Form section (content builder) */
.form-section      { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 12px; }
.form-section-title{ font-size: .78em; font-weight: 800; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 7px; }

/* Step breadcrumb — shared across all 3 content steps */
.step-breadcrumb   { display: flex; align-items: center; gap: 8px; color: var(--text-muted); margin-bottom: 20px; flex-wrap: wrap; }
.step-dot          { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .72em; font-weight: 800; flex-shrink: 0; }
.step-dot.active   { background: var(--primary); color: #fff; }
.step-dot.done     { background: rgba(14,122,116,.2); color: #4ecdc8; }
.step-dot.todo     { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.step-line         { flex: 1; height: 1px; background: var(--border); max-width: 60px; }
.step-label        { font-size: .82em; }
.step-label.active { font-weight: 700; color: #4ecdc8; }

/* Status badge */
.status-badge      { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .72em; font-weight: 700; }
.status-badge.draft     { background: rgba(138,157,181,.15); color: #8a9db5; }
.status-badge.ready     { background: rgba(78,205,200,.12); color: #4ecdc8; }
.status-badge.published { background: rgba(74,222,128,.12); color: #4ade80; }
.status-badge.error     { background: rgba(248,113,113,.12); color: #f87171; }

/* Channel chip */
.ch-chip           { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-muted); font-size: .7em; font-weight: 700; }

/* History panel items */
.hist-panel        { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.hist-panel-header { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.hist-panel-title  { font-size: .85em; font-weight: 800; display: flex; align-items: center; gap: 7px; }
.hist-panel-count  { font-size: .72em; color: var(--text-muted); }
.hist-item         { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s; text-decoration: none; color: inherit; }
.hist-item:last-child  { border-bottom: none; }
.hist-item:hover   { background: var(--surface-2); }
.hist-icon         { width: 32px; height: 32px; border-radius: var(--r-md); background: rgba(14,122,116,.12); color: #4ecdc8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hist-title        { font-size: .82em; font-weight: 700; color: var(--text-primary); }
.hist-meta         { font-size: .7em; color: var(--text-muted); margin-top: 2px; }
.hist-channels     { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.hist-preview      { font-size: .7em; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.hist-empty        { padding: 32px; text-align: center; }
.hist-empty-icon   { font-size: 1.75em; margin-bottom: 10px; color: var(--text-muted); }
.hist-loading      { padding: 28px; text-align: center; color: var(--text-muted); }
.hist-footer       { padding: 10px 14px; border-top: 1px solid var(--border); text-align: center; }

/* Channel icon in content builder (fa-icons) */
.ch-card-icon      { font-size: 1.25em; line-height: 1; color: var(--primary); }

/* Stat mini cards */
.stat-mini-grid    { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.stat-mini         { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.stat-mini-icon    { font-size: 1.15em; color: var(--text-muted); }
.stat-mini-val     { font-size: 1.35em; font-weight: 800; color: var(--text-primary); line-height: 1; }
.stat-mini-lbl     { font-size: .72em; color: var(--text-muted); }

/* Intel teaser block */
.intel-teaser      { margin-top: 12px; background: linear-gradient(135deg,rgba(14,122,116,.08),rgba(139,92,246,.06)); border: 1px solid rgba(14,122,116,.15); border-radius: var(--r-lg); padding: 14px 16px; }
.intel-teaser-head { font-size: .82em; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.intel-teaser-desc { font-size: .72em; color: var(--text-muted); margin-bottom: 10px; }
.intel-score-badge { font-size: .65em; background: var(--surface-2); border-radius: 999px; padding: 1px 7px; color: var(--text-muted); }

/* ============================================================
   CHANNEL BUILDER CARDS (step 1 AI content)
   ============================================================ */
.ch-builder-grid     { display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:10px; }
.ch-builder-card     { background:var(--surface-1);border:2px solid var(--border);border-radius:var(--r-lg);padding:14px 10px;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:7px;user-select:none;position:relative;text-align:center; }
.ch-builder-card:hover{ border-color:var(--border-strong);transform:translateY(-1px); }
.ch-builder-card.sel { border-color:var(--primary);background:rgba(14,122,116,.06); }
.ch-builder-check    { position:absolute;top:6px;right:6px;width:16px;height:16px;border-radius:50%;background:var(--primary);color:#fff;font-size:.55em;display:none;align-items:center;justify-content:center; }
.ch-builder-card.sel .ch-builder-check { display:flex; }
.ch-builder-icon     { width:36px;height:36px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.05em; }
.ch-builder-name     { font-size:.75em;font-weight:700;color:var(--text-primary); }
.ch-builder-desc     { font-size:.65em;color:var(--text-muted);line-height:1.3; }

/* Channel icon colours */
.ch-color-fb  { background:rgba(24,119,242,.15); color:#1877f2; }
.ch-color-ig  { background:rgba(193,53,132,.15);  color:#c13584; }
.ch-color-g   { background:rgba(66,133,244,.15);  color:#4285f4; }
.ch-color-em  { background:rgba(14,122,116,.15);  color:#4ecdc8; }
.ch-color-tt  { background:rgba(0,0,0,.2);         color:#fff; }
.ch-color-sms { background:rgba(52,199,89,.15);   color:#34c759; }
.ch-color-yt  { background:rgba(255,0,0,.12);      color:#ff0000; }
.ch-color-web { background:rgba(139,92,246,.15);  color:#a78bfa; }
.ch-color-lp  { background:rgba(232,133,74,.15);  color:#e8854a; }

/* Treatment grid */
.treatment-grid      { display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:7px;margin-top:8px; }
.tr-chip             { background:var(--surface-1);border:2px solid var(--border);border-radius:var(--r-md);padding:9px 11px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:7px;font-weight:600;color:var(--text-secondary); }
.tr-chip:hover       { border-color:var(--border-strong); }
.tr-chip.sel         { border-color:var(--primary);color:#4ecdc8;background:rgba(14,122,116,.06); }

/* Tone / audience pills */
.tone-row            { display:flex;flex-wrap:wrap;gap:7px;margin-top:8px; }
.tone-pill           { padding:6px 13px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--border-strong);font-weight:600;color:var(--text-muted);cursor:pointer;transition:all .15s; }
.tone-pill:hover     { border-color:var(--primary); }
.tone-pill.sel       { background:rgba(14,122,116,.1);border-color:var(--primary);color:#4ecdc8; }
.audience-pill       { padding:5px 12px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--border-strong);font-weight:600;color:var(--text-muted);cursor:pointer;transition:all .15s; }
.audience-pill:hover { border-color:var(--purple); }
.audience-pill.sel   { background:rgba(139,92,246,.1);border-color:var(--purple);color:#a78bfa; }

/* Aud card */
.aud-card            { background:var(--surface-2);border:2px solid var(--border);border-radius:var(--r-lg);padding:13px;cursor:pointer;transition:all .15s; }
.aud-card:hover      { border-color:var(--purple);transform:translateY(-1px); }
.aud-card.sel        { border-color:var(--purple);background:rgba(139,92,246,.07); }

/* Modal backdrop */
.modal-backdrop      { display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:500;align-items:center;justify-content:center;padding:20px; }
.modal-backdrop.active{ display:flex; }
.modal-card          { background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--r-xl);padding:26px;max-width:100%;max-height:90vh;overflow-y:auto; }
.modal-box           { background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--r-xl);width:100%;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column; }
.modal-footer        { display:flex !important;align-items:center !important;justify-content:flex-end !important;gap:8px !important; }

/* ── Additional global utilities ── */
.text-center   { text-align: center; }
.text-italic   { font-style: italic; }
.resize-v      { resize: vertical; }
.text-success  { color: #4ade80 !important; }

/* ── Layout specifics ── */
.sticky-sidebar    { position: sticky; top: 80px; }
.flex-wrap         { flex-wrap: wrap; }
.modal-card-wide   { width: min(520px, 95vw); }
.modal-body-pad    { text-align: center; padding: 28px; }
.modal-divider     { border-top: 1px solid var(--border); padding-top: 12px; }
.modal-actions     { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.btn-min-cta       { min-width: 190px; }
.btn-center        { justify-content: center; }
.badge-ai          { background: rgba(139,92,246,.15); color: #a78bfa; }

/* ── Brief builder layout ── */
.content-brief-layout  { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
@media (max-width: 900px) {
  .content-brief-layout { grid-template-columns: 1fr; }
}
.form-row-2col         { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.flex-end              { display: flex; justify-content: flex-end; }
.pill-group            { display: flex; flex-wrap: wrap; gap: 6px; }
.aud-ai-list           { display: none; flex-direction: column; gap: 10px; }

/* ── Step2 specific utility classes ── */
.skel-60  { width: 60%; }
.skel-80  { width: 80%; }
.skel-50  { width: 50%; }
.skel-40  { width: 40%; }
.skel-90  { width: 90%; }
.skel-70  { width: 70%; }
.skel-pad { padding: 12px; }

.grid-full-center-pad    { grid-column: 1/-1; text-align: center; padding: 20px; color: var(--text-muted); }
.grid-full-center-pad-sm { grid-column: 1/-1; text-align: center; padding: 12px; color: var(--text-muted); }

.cta-input    { color: #4ecdc8; font-weight: 600; }
.btn-xs-pad   { padding: 2px 8px; }
.ml-auto      { margin-left: auto; }
.faq-item-wrap{ background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px; }
.text-center  { text-align: center; }

/* Preview-specific colour fixes (inside white-bg social cards) */
.ig-ellipsis      { color: #262626; }
.g-site-label     { color: #202124; }
.em-subject-preview{ color: #bdc3c7; }
.yt-req-label     { color: #555; }


/* ============================================================
   CLINIC SETTINGS PAGE
   ============================================================ */
.cs-tabs        { display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:24px;flex-wrap:wrap; }
.cs-tab         { background:none;border:none;padding:10px 18px;font-size:.82em;font-weight:700;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;border-radius:var(--r-sm) var(--r-sm) 0 0;display:flex;align-items:center;gap:7px; }
.cs-tab:hover   { color:var(--text-primary);background:var(--surface-2); }
.cs-tab.active  { color:#4ecdc8;border-bottom-color:#4ecdc8;background:rgba(14,122,116,.05); }
.cs-panel       { animation:fadeIn .15s ease; }
.cs-section     { background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px;margin-bottom:16px; }
.cs-section-title{ font-size:.78em;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:16px;display:flex;align-items:center;gap:8px; }
.cs-grid-2      { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
@media (max-width:768px) { .cs-grid-2 { grid-template-columns:1fr; } }
.cs-info-bar    { background:rgba(14,122,116,.07);border:1px solid rgba(14,122,116,.18);border-radius:var(--r-md);padding:11px 14px;font-size:.82em;color:var(--text-secondary);margin-bottom:16px;display:flex;align-items:center;gap:9px; }
.cs-save-row    { display:flex;align-items:center;gap:12px;margin-top:4px;padding-top:16px;border-top:1px solid var(--border); }
.cs-save-msg    { font-size:.82em;font-weight:700; }
.form-hint      { font-size:.72em;color:var(--text-muted);margin-top:4px; }
.api-key-wrap   { position:relative; }
.api-key-wrap .form-control { padding-right:38px; }
.api-eye-btn    { position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;line-height:1;transition:color .1s; }
.api-eye-btn:hover { color:var(--text-primary); }
.cs-placeholder { background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:var(--r-md);padding:28px;text-align:center;color:var(--text-muted);font-size:.82em; }
.table-footer   { display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--border); }

/* ============================================================
   WEBMAIL MODULE
   ============================================================ */
:root { --wm-folder-w:200px; --wm-list-w:380px; }
.wm-shell            { display:grid;grid-template-columns:var(--wm-folder-w) var(--wm-list-w) 1fr;height:calc(100vh - var(--topbar-h,60px));overflow:hidden;background:var(--surface-1); }

/* Folder pane */
.wm-folders          { border-right:1px solid var(--border);overflow-y:auto;background:var(--surface-2);padding:12px 0;display:flex;flex-direction:column; }
.wm-folders-section-label{ font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:10px 14px 4px; }
.wm-folder-item      { display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;font-size:13px;color:var(--text-secondary);transition:background .12s;user-select:none; }
.wm-folder-item:hover{ background:var(--surface-3); }
.wm-folder-item.active{ background:var(--teal-subtle);color:var(--teal);font-weight:600; }
.wm-folder-item i    { width:16px;text-align:center;opacity:.7; }
.wm-folder-badge     { margin-left:auto;background:var(--teal);color:#fff;border-radius:10px;font-size:10px;font-weight:700;padding:1px 6px;min-width:18px;text-align:center; }
.wm-folders-spacer   { flex:1; }
.wm-new-folder-btn   { margin:8px 10px 4px;font-size:12px;color:var(--text-muted);cursor:pointer;padding:6px 8px;border-radius:var(--r-sm);display:flex;align-items:center;gap:6px;border:1px dashed var(--border); }
.wm-new-folder-btn:hover{ color:var(--teal);border-color:var(--teal); }

/* List pane */
.wm-list             { border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;background:var(--surface-1); }
.wm-toolbar          { padding:10px 12px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:8px;background:var(--surface-2); }
.wm-toolbar-row      { display:flex;gap:8px;align-items:center; }
.wm-search           { flex:1;min-width:0;height:32px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-1);color:var(--text-primary);padding:0 10px;font-size:13px; }
.wm-search:focus     { outline:none;border-color:var(--teal); }
.wm-compose-btn      { flex-shrink:0;height:32px;padding:0 12px;font-size:12px;background:var(--teal);color:#fff;border:none;border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap; }
.wm-compose-btn:hover{ filter:brightness(1.1); }
.wm-filter-chips     { display:flex;gap:6px;flex-wrap:wrap; }
.wm-filter-chip      { font-size:11px;padding:3px 10px;border-radius:20px;border:1px solid var(--border);background:var(--surface-1);color:var(--text-secondary);cursor:pointer;transition:all .12s; }
.wm-filter-chip:hover{ border-color:var(--teal);color:var(--teal); }
.wm-filter-chip.active{ background:var(--teal);border-color:var(--teal);color:#fff; }
.wm-list-body        { flex:1;overflow-y:auto; }
.wm-row              { display:grid;grid-template-columns:24px 1fr 20px;align-items:start;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s; }
.wm-row:hover        { background:var(--surface-2); }
.wm-row.active       { background:var(--teal-subtle); }
.wm-row.unread .wm-row-subject{ font-weight:700;color:var(--text-primary); }
.wm-unread-dot       { width:8px;height:8px;border-radius:50%;background:var(--teal);margin-top:5px;flex-shrink:0; }
.wm-row-meta         { min-width:0; }
.wm-row-from         { font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.wm-row-subject      { font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.wm-row-date         { font-size:10px;color:var(--text-muted);margin-top:2px; }
.wm-star             { color:var(--text-muted);font-size:13px;cursor:pointer;padding:2px;margin-top:2px;line-height:1; }
.wm-star.flagged,.wm-star:hover{ color:#f5a623; }
.wm-attach-icon      { color:var(--text-muted);font-size:10px;margin-left:4px; }
.wm-pagination       { border-top:1px solid var(--border);padding:8px 12px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-muted);background:var(--surface-2);flex-shrink:0; }
.wm-pagination button{ background:none;border:1px solid var(--border);border-radius:4px;padding:3px 10px;font-size:12px;cursor:pointer;color:var(--text-secondary); }
.wm-pagination button:hover{ border-color:var(--teal);color:var(--teal); }
.wm-pagination button:disabled{ opacity:.4;cursor:default; }

/* View pane */
.wm-view             { overflow:hidden;display:flex;flex-direction:column;background:var(--surface-1); }
.wm-view-empty       { display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-muted);gap:12px;font-size:14px; }
.wm-view-empty i     { font-size:2.5rem;opacity:.3; }
.wm-view-scroll      { flex:1;overflow-y:auto;padding:24px; }
.wm-email-subject    { font-size:18px;font-weight:700;color:var(--text-primary);margin:0 0 14px;line-height:1.3; }
.wm-email-meta       { display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--text-muted);margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border); }
.wm-email-meta strong{ color:var(--text-secondary); }
.wm-email-actions    { display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap; }
.wm-btn              { height:30px;padding:0 12px;font-size:12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:all .12s; }
.wm-btn:hover        { border-color:var(--teal);color:var(--teal); }
.wm-btn.danger:hover { border-color:var(--danger);color:var(--danger); }
.wm-body-frame       { width:100%;border:1px solid var(--border);border-radius:var(--r-md);min-height:200px;background:var(--surface-1); }
.wm-attachments      { margin-top:16px;display:flex;flex-wrap:wrap;gap:8px; }
.wm-attachment-chip  { display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--border);border-radius:20px;font-size:12px;color:var(--text-secondary);text-decoration:none;background:var(--surface-2); }
.wm-attachment-chip:hover{ border-color:var(--teal);color:var(--teal); }
.wm-reply-area       { border-top:1px solid var(--border);padding:16px 24px;display:none; }
.wm-reply-area.open  { display:block; }
.wm-reply-toolbar    { display:flex;gap:8px;margin-top:10px;justify-content:flex-end;flex-wrap:wrap; }

/* Compose pane */
.wm-compose          { padding:24px;overflow-y:auto;height:100%; }
.wm-compose-header   { display:flex;justify-content:space-between;align-items:center;margin-bottom:20px; }
.wm-compose-title    { font-size:16px;font-weight:700; }
.wm-compose-field    { display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);padding:8px 0;margin-bottom:4px; }
.wm-compose-label    { font-size:12px;color:var(--text-muted);width:50px;flex-shrink:0; }
.wm-compose-input    { flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-size:13px; }
.wm-compose-toggle   { font-size:11px;color:var(--teal);cursor:pointer;margin-left:4px; }
.wm-editor-wrap      { margin-top:16px;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;min-height:220px; }
.wm-compose-actions  { margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center; }

/* Quill dark overrides */
.ql-toolbar          { background:var(--surface-2) !important;border-color:var(--border) !important; }
.ql-container        { background:var(--surface-1) !important;border-color:var(--border) !important;color:var(--text-primary) !important;font-size:14px;min-height:180px; }
.ql-editor           { min-height:180px;color:var(--text-primary) !important; }
.ql-snow .ql-stroke  { stroke:var(--text-secondary) !important; }
.ql-snow .ql-fill    { fill:var(--text-secondary) !important; }
.ql-snow .ql-picker  { color:var(--text-secondary) !important; }

/* Modals */
.wm-modal-backdrop   { position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1050;display:flex;align-items:center;justify-content:center; }
.wm-modal-card       { background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;width:min(460px,90vw);box-shadow:0 8px 32px rgba(0,0,0,.2); }
.wm-modal-title      { font-size:15px;font-weight:700;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center; }
.wm-modal-close      { cursor:pointer;color:var(--text-muted);font-size:18px;line-height:1; }
.wm-modal-close:hover{ color:var(--text-primary); }
.wm-modal-actions    { display:flex;gap:8px;justify-content:flex-end;margin-top:20px; }
.wm-setup            { max-width:480px;margin:80px auto;padding:0 16px; }
.wm-loading-row      { padding:12px;border-bottom:1px solid var(--border);opacity:.5;animation:wm-pulse 1.2s ease-in-out infinite; }
.wm-skel             { background:var(--surface-3);border-radius:4px;height:10px;margin-bottom:6px; }
@keyframes wm-pulse  { 0%,100%{opacity:.4;}50%{opacity:.7;} }

/* ============================================================
   MELDINGER MODULE — Internal messaging v2.6.0
   ============================================================ */

/* Force correct theme on meldinger modals (override Bootstrap if loaded) */
#msg-group-modal .form-control,
#msg-group-modal .form-select,
#msg-dm-modal    .form-control,
#msg-dm-modal    .form-select {
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}
#msg-group-modal .form-control::placeholder,
#msg-dm-modal    .form-control::placeholder { color: var(--text-muted) !important; }

/* Search results dropdown styling */
#msg-group-results,
#msg-dm-results {
  background: var(--surface-2);
  border-radius: var(--r-md);
  overflow: hidden;
}
#msg-group-results:not(:empty),
#msg-dm-results:not(:empty) {
  border: 1px solid var(--border-strong);
  margin-top: 4px;
}

/* Shell layout */
.msg-shell {
  display: flex;
  height: calc(100vh - 60px);
  overflow: hidden;
  background: var(--surface-1);
}

/* ── Sidebar ─────────────────────────────────────────────── */
.msg-sidebar {
  width: 320px;
  min-width: 280px;
  max-width: 340px;
  flex: 0 0 320px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-1);
}
.msg-sidebar-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  flex: 0 0 auto;
}
.msg-sidebar-title { font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.msg-icon-btn {
  width: 32px; height: 32px; border: none; background: none; border-radius: var(--r-md);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); font-size: 14px; transition: background .15s;
}
.msg-icon-btn:hover { background: var(--surface-3); color: var(--text-primary); }

.msg-search-wrap {
  display: flex; align-items: center; gap: 8px;
  margin: 0 12px 10px; padding: 8px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); flex: 0 0 auto;
}
.msg-search-wrap input {
  border: none; background: none; outline: none; flex: 1;
  font-size: 13px; color: var(--text-primary);
}
.msg-search-wrap input::placeholder { color: var(--text-muted); }

.msg-filter-tabs {
  display: flex; gap: 6px; padding: 0 12px 10px; flex: 0 0 auto;
}
.msg-filter-btn {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: none; cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--text-secondary); transition: all .15s;
}
.msg-filter-btn:hover   { background: var(--surface-3); }
.msg-filter-btn.active  { background: var(--primary); color: #fff; border-color: var(--primary); }

.msg-conv-list { flex: 1; overflow-y: auto; }

/* Section headers */
.msg-section-hdr {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); cursor: pointer; user-select: none;
}
.msg-section-caret { font-size: 10px; transition: transform .2s; }
.msg-section-hdr.collapsed .msg-section-caret { transform: rotate(-90deg); }
.msg-section-hdr.collapsed + .msg-section-body { display: none; }
.msg-section-hdr.no-caret .msg-section-caret { display: none; }

/* Conversation item */
.msg-conv-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; width: 100%; border: none;
  background: none; cursor: pointer; text-align: left;
  transition: background .12s; border-bottom: 1px solid var(--border);
}
.msg-conv-item:hover  { background: var(--surface-2); }
.msg-conv-item.active { background: rgba(14,122,116,.1); }
.msg-ci-body    { flex: 1; min-width: 0; }
.msg-ci-top     { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.msg-ci-name    { font-size: 13.5px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-ci-time    { font-size: 11px; color: var(--text-muted); flex: 0 0 auto; }
.msg-ci-preview { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; }
.msg-ci-text    { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.msg-conv-item.unread .msg-ci-name { font-weight: 800; }
.msg-conv-item.unread .msg-ci-text { color: var(--text-secondary); font-weight: 600; }
.msg-unread-badge {
  min-width: 18px; height: 18px; border-radius: 999px;
  background: var(--primary); color: #fff; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; padding: 0 5px; flex: 0 0 auto;
}
@keyframes msg-pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(14,122,116,.6); } 50%{ box-shadow:0 0 0 5px rgba(14,122,116,0); } }
.msg-pulse { animation: msg-pulse 1.8s ease-in-out infinite; }

/* Avatar */
.msg-avatar {
  border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; letter-spacing: -.5px;
}
.msg-group-avatar { background: var(--surface-3); color: var(--primary); }
.msg-ci-avatar { flex: 0 0 auto; }

/* ── Main chat area ──────────────────────────────────────── */
.msg-main {
  flex: 1; min-width: 0; display: flex;
  flex-direction: column; overflow: hidden;
  background: var(--surface-1);
}
.msg-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.msg-chat {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}

/* Chat header */
.msg-chat-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface-1); flex: 0 0 auto;
}
.msg-chat-name  { font-size: 15px; font-weight: 800; }
.msg-chat-sub   { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-back-btn   { display: none; border: none; background: none; cursor: pointer; color: var(--text-secondary); font-size: 16px; padding: 4px 8px 4px 0; }
.msg-chat-avatar-wrap { flex: 0 0 auto; }

/* Messages area */
.msg-messages {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 2px;
}
.msg-date-sep {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 8px; color: var(--text-muted); font-size: 11.5px;
}
.msg-date-sep::before, .msg-date-sep::after {
  content: ''; flex: 1; border-top: 1px solid var(--border);
}

/* Message rows */
.msg-row {
  display: flex; gap: 8px; align-items: flex-end; margin: 3px 0;
}
.msg-row-avatar { flex: 0 0 auto; }
.msg-row-in  { flex-direction: row; justify-content: flex-start; }
.msg-row-out { flex-direction: row-reverse; }
.msg-bubble-wrap { max-width: 70%; display: flex; flex-direction: column; gap: 2px; }
.msg-row-out .msg-bubble-wrap { align-items: flex-end; }
.msg-row-in  .msg-bubble-wrap { align-items: flex-start; }
.msg-sender-name { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 2px; padding-left: 2px; }

.msg-bubble-text {
  padding: 9px 13px; border-radius: 18px; font-size: 13.5px; line-height: 1.5;
  word-break: break-word; white-space: pre-wrap;
}
.msg-row-in  .msg-bubble-text { background: var(--surface-3); color: var(--text-primary); border-bottom-left-radius: 4px; }
.msg-row-out .msg-bubble-text { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.msg-bubble-time { font-size: 10.5px; color: var(--text-muted); padding: 0 4px; }

/* Attachment rendering in bubbles */
.msg-attach-img-wrap {
  display: block; margin-top: 6px; position: relative; width: fit-content; cursor: pointer;
}
.msg-attach-img-wrap::after {
  content: '\f019'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; bottom: 6px; right: 6px; font-size: 13px;
  background: rgba(0,0,0,.55); color: #fff; border-radius: 6px;
  padding: 3px 6px; opacity: 0; transition: opacity .15s;
}
.msg-attach-img-wrap:hover::after { opacity: 1; }
.msg-attach-img {
  max-width: 260px; max-height: 260px; border-radius: 10px;
  object-fit: cover; display: block; transition: opacity .15s;
}
.msg-attach-img-wrap:hover .msg-attach-img { opacity: .92; }
.msg-attach-file {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 8px; font-size: 12.5px; text-decoration: none;
  background: var(--surface-3); color: var(--text-primary); margin-top: 6px;
  border: 1px solid var(--border); transition: background .12s;
}
.msg-attach-file:hover { background: var(--surface-2); color: var(--primary); }

/* Emoji picker */
.msg-emoji-picker {
  flex: 0 0 auto; border-top: 1px solid var(--border);
  background: var(--surface-1); display: flex;
  flex-direction: column; height: 230px;
}
.msg-emoji-cats {
  display: flex; gap: 4px; padding: 8px 12px 6px;
  overflow-x: auto; flex: 0 0 auto; border-bottom: 1px solid var(--border);
}
.msg-emoji-cat-btn {
  padding: 4px 8px; border-radius: var(--r-md); border: none;
  background: none; cursor: pointer; font-size: 18px; transition: background .12s;
}
.msg-emoji-cat-btn:hover  { background: var(--surface-3); }
.msg-emoji-cat-btn.active { background: var(--surface-3); outline: 2px solid var(--primary); }
.msg-emoji-grid {
  display: flex; flex-wrap: wrap; gap: 2px;
  padding: 8px 10px; overflow-y: auto; flex: 1;
}
.msg-emoji-btn {
  width: 34px; height: 34px; border: none; background: none; cursor: pointer;
  font-size: 20px; border-radius: var(--r-md); transition: background .1s;
  display: flex; align-items: center; justify-content: center;
}
.msg-emoji-btn:hover { background: var(--surface-3); }

/* Compose */
.msg-compose {
  flex: 0 0 auto; border-top: 1px solid var(--border);
  padding: 10px 14px 12px; background: var(--surface-1);
}
.msg-compose-inner {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 8px 8px 8px 14px;
}
.msg-textarea {
  flex: 1; border: none; background: none; outline: none; resize: none;
  font-size: 13.5px; color: var(--text-primary); line-height: 1.5;
  max-height: 140px; overflow-y: auto;
  font-family: inherit;
}
.msg-textarea::placeholder { color: var(--text-muted); }
.msg-send-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: var(--primary); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex: 0 0 auto; transition: background .15s;
}
.msg-send-btn:hover { background: var(--primary-dark, #0b5f5a); }

.msg-compose-tools {
  display: flex; gap: 4px; margin-top: 8px;
}
.msg-tool-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--r-md);
  border: none; background: none; cursor: pointer;
  font-size: 12px; color: var(--text-muted); transition: all .13s;
}
.msg-tool-btn:hover { background: var(--surface-3); color: var(--text-primary); }
.msg-tool-btn i { font-size: 13px; }

/* Attachment preview in compose */
.msg-attach-thumb {
  position: relative; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); width: 64px; height: 64px;
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: var(--surface-3);
}
.msg-attach-file-thumb {
  flex-direction: column; gap: 4px; font-size: 11px;
  color: var(--text-muted); width: 72px; height: 72px; padding: 6px;
}
.msg-attach-remove {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 9px;
}

/* User result rows (in modals) */
.msg-user-result {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; width: 100%; border: none; background: none;
  cursor: pointer; border-radius: var(--r-md); text-align: left;
  transition: background .12s;
  color: var(--text-primary);
}
.msg-user-result:hover { background: var(--surface-3); }

/* Clinic group header in user picker */
.msg-clinic-group-hdr {
  padding: 8px 10px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--primary);
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
#msg-dm-results  .msg-clinic-group-hdr:first-child,
#msg-group-results .msg-clinic-group-hdr:first-child { border-top: none; margin-top: 0; }

/* Attachment choice buttons */
.msg-attach-choice-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 16px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--surface-2);
  cursor: pointer; text-align: left; transition: background .12s, border-color .12s;
  color: var(--text-primary);
}
.msg-attach-choice-btn:hover { background: var(--surface-3); border-color: var(--primary); }

/* Member chips (group creation) */
.msg-member-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px 4px 5px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--text-primary);
}

/* ── Mobile responsive ───────────────────────────────────── */
@media (max-width: 700px) {
  .msg-shell { position: relative; }
  .msg-sidebar { width: 100%; max-width: 100%; flex: 1; border-right: none; }
  .msg-main { position: absolute; inset: 0; transform: translateX(100%); transition: transform .25s ease; background: var(--surface-1); z-index: 10; }
  .msg-shell.chat-open .msg-main { transform: translateX(0); }
  .msg-shell.chat-open .msg-sidebar { pointer-events: none; }
  .msg-back-btn { display: flex !important; }
  .msg-bubble-wrap { max-width: 85%; }
}