/* WhatSell unified design layer.
 * Loaded by the shell and by every segment (dashboard, partners, marketing) so they
 * share one palette, type, controls and chrome. It only restyles; it never changes
 * markup, ids or behaviour. Standalone segment pages that don't have this file keep
 * their original look. Selectors use `html body` to outrank each segment's own CSS. */
:root {
  --ws-green:#2a9245; --ws-deep:#1f6f35; --ws-lime:#96c93e; --ws-ink:#2d2c2c;
  --ws-mint:#f4faf5; --ws-mint2:#e4f4e8; --ws-line:#e3ece5; --ws-muted:#5b6159;
  --ws-red:#c93c3c; --ws-amber:#b7791f; --ws-blue:#2b6cb0; --ws-card:#fff;
  --ws-radius:16px; --ws-font:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ws-shadow:0 1px 2px rgba(31,60,38,.05),0 6px 18px rgba(31,60,38,.06);
}
html body { font-family:var(--ws-font); color:var(--ws-ink); background:var(--ws-mint); }
html body h1, html body h2, html body h3, html body h4 { font-family:var(--ws-font); color:var(--ws-ink); }

/* ---- Buttons (partners + marketing) ---- */
html body .btn { font-family:var(--ws-font); font-weight:600; border-radius:10px; border:1px solid var(--ws-line); background:#fff; color:var(--ws-ink); cursor:pointer; transition:background .15s,border-color .15s,box-shadow .15s; }
html body .btn:hover { background:var(--ws-mint); border-color:var(--ws-green); }
html body .btn-primary, html body .btn-success { background:var(--ws-green); border-color:var(--ws-green); color:#fff; }
html body .btn-primary:hover, html body .btn-success:hover { background:var(--ws-deep); border-color:var(--ws-deep); }
html body .btn-secondary { background:#fff; color:var(--ws-deep); border-color:var(--ws-line); }
html body .btn-danger { background:var(--ws-red); border-color:var(--ws-red); color:#fff; }
html body .btn-danger:hover { background:#a83030; border-color:#a83030; }
html body .btn:focus-visible, html body a:focus-visible, html body button:focus-visible { outline:2px solid var(--ws-green); outline-offset:2px; }

/* ---- Forms ---- */
html body .form-group label { color:var(--ws-ink); font-weight:600; font-size:13px; }
html body .form-group input, html body .form-group select, html body .form-group textarea, html body .filters select {
  font-family:var(--ws-font); border:1px solid var(--ws-line); border-radius:10px; background:#fff; color:var(--ws-ink); }
html body .form-group input:focus, html body .form-group select:focus, html body .form-group textarea:focus {
  outline:none; border-color:var(--ws-green); box-shadow:0 0 0 3px rgba(42,146,69,.15); }

/* ---- Cards, stats, panels ---- */
html body .stat-card, html body .card, html body .auth-card, html body .login-card, html body .info-box {
  background:var(--ws-card); border:1px solid var(--ws-line); border-radius:var(--ws-radius); box-shadow:var(--ws-shadow); }
html body .stat-card h3, html body .stat-info p { color:var(--ws-muted); font-weight:500; }
html body .stat-value, html body .stat-info h3 { color:var(--ws-deep); font-weight:600; }
html body .card-header, html body .card-footer { border-color:var(--ws-line); }

/* ---- Tables ---- */
html body table { border-collapse:collapse; background:#fff; border-radius:var(--ws-radius); }
html body table th { background:var(--ws-mint); color:var(--ws-muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--ws-line); }
html body table td { border-bottom:1px solid var(--ws-line); }
html body table tr:hover td { background:#fafffa; }

/* ---- Tabs and navigation inside a segment ---- */
html body .tab-btn { font-family:var(--ws-font); border-radius:10px 10px 0 0; color:var(--ws-muted); }
html body .tab-btn:hover { color:var(--ws-deep); background:var(--ws-mint); }
html body .tab-btn.active { color:var(--ws-deep); border-bottom-color:var(--ws-green); background:#fff; }
html body .navbar { background:#fff; border-bottom:1px solid var(--ws-line); box-shadow:none; font-family:var(--ws-font); }
html body .navbar-brand, html body .navbar-brand h2 { color:var(--ws-ink); font-family:var(--ws-font); font-weight:600; }
html body .nav-link { color:var(--ws-muted); font-weight:500; border-radius:10px; }
html body .nav-link:hover { background:var(--ws-mint); color:var(--ws-deep); }
html body .nav-link.active { background:var(--ws-mint2); color:var(--ws-deep); }

/* ---- Badges, alerts, toasts, modals ---- */
html body .badge-success { background:#e3f5e8; color:var(--ws-deep); }
html body .badge-warning, html body .badge-orange { background:#fdf2dc; color:var(--ws-amber); }
html body .badge-danger { background:#fbe5e5; color:var(--ws-red); }
html body .badge-info { background:#e4eefb; color:var(--ws-blue); }
html body .alert-warning { background:#fff8e6; border-color:#f1d9a0; border-radius:var(--ws-radius); }
html body .modal-content { border-radius:18px; border:1px solid var(--ws-line); box-shadow:0 30px 80px rgba(0,0,0,.25); }
html body .toast { border-radius:10px; font-family:var(--ws-font); }

/* ---- Sign-in / landing screens: one look, same as the portal login ---- */
html body .auth-container, html body .login-container { background:linear-gradient(160deg,var(--ws-mint),#fff); }
html body .login-card h1, html body .auth-header h1 { color:var(--ws-ink); }
html body .subtitle, html body .auth-header p { color:var(--ws-muted); }

/* ================= Embedded inside the portal shell ================= */
/* The shell already supplies brand, section title, user and sign-out, so a segment drops its own. */
html.ws-embedded body { background:var(--ws-mint); }
html.ws-embedded .navbar-brand, html.ws-embedded .navbar-logo, html.ws-embedded .navbar-user { display:none; }
html.ws-embedded .navbar { justify-content:flex-start; padding:8px 20px; gap:16px; }
html.ws-embedded .navbar:not(:has(.nav-link)) { display:none; } /* partners bar only held brand, name, logout */
html.ws-embedded .navbar-menu { gap:6px; flex-wrap:nowrap; overflow-x:auto; max-width:100%; }
html.ws-embedded .nav-link { white-space:nowrap; }
html.ws-embedded .container { max-width:1280px; }
html.ws-embedded .hero-logo, html.ws-embedded .login-card > img { display:none; }
@media (max-width:760px) { html.ws-embedded .navbar { padding:6px 12px; } }

/* Group dashboard: the sidebar becomes a compact strip, so the portal has a single left rail. */
html.ws-embedded .shell { display:block; }
html.ws-embedded .sidebar { position:static; height:auto; width:auto; transform:none; flex-direction:row; align-items:center; gap:16px; padding:12px clamp(14px,2.1vw,34px); border-right:0; border-bottom:1px solid var(--ws-line); }
html.ws-embedded .sidebar > div:first-child { display:flex; align-items:center; gap:16px; flex:1; min-width:0; }
html.ws-embedded .side-head, html.ws-embedded .side-bottom, html.ws-embedded .scrim, html.ws-embedded .topbar .mobile, html.ws-embedded .viewer { display:none; }
html.ws-embedded .group-card { margin:0; min-width:180px; }
html.ws-embedded .sidebar nav { display:flex; gap:4px; overflow-x:auto; }
html.ws-embedded .sidebar nav a, html.ws-embedded .sidebar nav button { white-space:nowrap; padding:8px 12px; }
@media (max-width:760px) {
  html.ws-embedded .sidebar > div:first-child { flex-direction:column; align-items:stretch; gap:10px; }
  html.ws-embedded .group-card { min-width:0; }
}