/* Wiggle BOS skin: the Business Operating System look on the shared admin.
   Loaded after admin.css (BRAND_CSS var). Palette and type from the brand
   guide (docs/brand/): Navy #0A2540, Royal Blue #007BFF, Electric Blue
   #00B4FF, Cyan #00D1D8, Teal Green #00C896, Mint Green #22E3A7, Light Gray
   #E6EEF5; Poppins. Actions are Electric Blue with navy text so they keep
   their contrast on the navy ground. Client-facing documents (proposals,
   booking, signing) keep their own look. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --bos-navy: #0A2540; --bos-royal: #007BFF; --bos-electric: #00B4FF; --bos-cyan: #00D1D8;
  --bos-teal: #00C896; --bos-mint: #22E3A7; --bos-gray: #E6EEF5;
  --bos-ground: #061A2E;           /* page, a shade under Navy so Navy surfaces lift off it */
  --bos-raise: #0F2F50; --bos-raise-2: #15395F;
  --bos-line: #1C4166; --bos-line-2: #275482;
  --bos-text: #F2F6FA; --bos-muted: #A9BFD3; --bos-dim: #86A3BE;

  --paper: var(--bos-navy); --ink: var(--bos-text); --dark: var(--bos-electric); --dark-hover: var(--bos-cyan);
  --surface-2: var(--bos-raise); --surface-3: var(--bos-raise-2); --line: var(--bos-line); --line-strong: var(--bos-line-2);
  --muted-ink: var(--bos-muted); --dim-ink: var(--bos-dim);
  --navy: var(--bos-raise); --navy-mid: var(--bos-raise-2); --navy-light: var(--bos-line-2);
  --cream: var(--bos-raise); --cream-dark: var(--bos-raise-2); --warm-white: var(--bos-navy); --white: var(--bos-navy);
  --text: var(--bos-text); --muted: var(--bos-muted);
  --accent: var(--bos-electric); --accent-lt: var(--bos-cyan); --accent-dk: var(--bos-royal);
  --border: var(--bos-line); --radius: 8px;
  --shadow: 0 4px 32px rgba(0,0,0,0.35); --shadow-lg: 0 12px 48px rgba(0,0,0,0.5);
  --bg: var(--bos-ground); --bg-2: var(--bos-navy); --bg-3: var(--bos-raise); --bg-4: var(--bos-raise-2); --surface: var(--bos-navy);
  --border-dk: var(--bos-line); --border-dk-hi: var(--bos-line-2); --text-light: var(--bos-text); --text-dim: var(--bos-dim);
  --dc-dark: var(--bos-electric); --dc-light: var(--bos-navy); --dc-accent: var(--bos-electric); --dc-warm: var(--bos-raise);
  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Poppins', 'Segoe UI', system-ui, sans-serif;
}
html, body { background: var(--bos-ground); color: var(--bos-text); }
body { font-family: var(--font-body); font-weight: 400; }
h1, h2, h3, .display, .hub-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.admin-page-title, .page-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; text-transform: none; }
a { color: inherit; }
::selection { background: var(--bos-electric); color: var(--bos-navy); }

/* Rail */
.side-nav { background: var(--bos-navy); border-right: 1px solid var(--bos-line); }
.side-nav-link { color: var(--bos-muted); font-weight: 500; }
.side-nav-link:hover { color: var(--bos-text); background: var(--bos-raise); }
.side-nav-link.active { color: var(--bos-navy); background: var(--bos-electric); }
.side-nav-link.active svg { stroke: var(--bos-navy); }
.side-nav-foot, .side-nav-settings { border-color: var(--bos-line); }
.side-nav-name { color: var(--bos-text); }
.side-nav-role, .side-nav-out { color: var(--bos-dim); border-color: var(--bos-line-2); }

/* The lockup: the production PNG, shown as an image, never recoloured.
   In the rail it sits at 160px wide (the guide's minimum is 120px). */
.wordmark-light { -webkit-mask: none !important; mask: none !important; background: url('/brand/wiggle-bos-primary-dark.png') left center / contain no-repeat !important; aspect-ratio: 1024 / 307; }
.side-nav .side-nav-brand { padding: 4px 0; }
.side-nav .side-nav-brand .wordmark-light { display: inline-block !important; width: 160px; height: auto !important; }
.side-nav .side-nav-collapse { flex-shrink: 0; background: var(--bos-raise) !important; border: 1px solid var(--bos-line-2) !important; color: var(--bos-text) !important; }
.side-nav .side-nav-collapse svg { stroke: var(--bos-text) !important; }

/* Chrome and surfaces */
.admin-wrap, .container, .editorial-main { background: transparent; }
.editorial > .page-head, .editorial > .admin-page-header { border-color: var(--bos-line-2); }
.dash-stats, .dash-cols h2, .assist-head, .set-sec, .set-nav, .wz-steps { border-color: var(--bos-line-2) !important; }
.dash-list li, .assist-log .turn, .set-nav li a, .wz-steps li, table.team td, .admin-table td, .admin-table th { border-color: var(--bos-line) !important; }
.dash-stat .k, .dash-list .sub, .dash-list .when, .assist-hint, .assist-log .turn .who, .assist-log .turn.you .body, .hint, .set-nav li.grp, .wz-for, .field label, label { color: var(--bos-muted) !important; }
.dash-stat .v, .dash-list li a, .assist-log .turn .body, .set-nav li a, .wz-main h1, .wz-main p, .bible-view dd, .assist-log .turn .acts a { color: var(--bos-text) !important; }
.dash-stat .v small { color: var(--bos-dim); }
.wz-main .lead, .set-sec .lead { color: var(--bos-muted) !important; }
.hub-card, .card, .p-row, .panel, .box, .msg, .staff-table-wrap, .df-modal, .modal, .toast { background: var(--bos-navy) !important; border-color: var(--bos-line) !important; color: var(--bos-text); }
pre, .copy, .status, .set-sec pre, pre.snip { background: var(--bos-raise) !important; color: var(--bos-text); }
.status.ok { background: #073A36 !important; color: var(--bos-mint); }

/* Inputs and buttons */
input[type=text], input[type=number], input[type=date], input[type=email], input[type=url], input[type=search], input[type=password], textarea, select,
.field input, .field textarea, .field select, .assist-form textarea, .eb-input, .eb-select {
  background: var(--bos-raise) !important; color: var(--bos-text) !important; border-color: var(--bos-line-2) !important; border-radius: 6px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--bos-electric) !important; outline-offset: 1px; }
input::placeholder, textarea::placeholder { color: var(--bos-dim) !important; }
.btn-a, .btn, .btn-primary, .df-save-btn, .assist-send, .wz .btn, .eb-save-btn, .btn.btn-outline-dark { background: var(--bos-electric) !important; border-color: var(--bos-electric) !important; color: var(--bos-navy) !important; border-radius: 999px; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em; text-transform: none; }
.btn-a:hover, .btn:hover, .btn-primary:hover { background: var(--bos-cyan) !important; border-color: var(--bos-cyan) !important; }
.btn-b, .btn.ghost, .btn-action, .df-cancel-btn, .assist-clear, .link, .eb-back-btn { color: var(--bos-text) !important; border-color: var(--bos-line-2) !important; background: transparent !important; border-radius: 999px; font-family: var(--font-display); font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
.link { border: 0 !important; border-radius: 0; }
.pill { background: var(--bos-raise); color: var(--bos-muted); border-color: var(--bos-line-2); }
.pill.active { background: #073A36; color: var(--bos-mint); }

/* CRM */
.crm { background: var(--bos-ground); }
.crm-nav { background: var(--bos-navy); border-right: 1px solid var(--bos-line); }
.crm-nav .mod { color: var(--bos-muted); }
.crm-nav .mod.on { background: var(--bos-electric); color: var(--bos-navy); }
.crm-main, .crm-head, .crm-body { background: var(--bos-ground); color: var(--bos-text); }
.crm-head { border-color: var(--bos-line); }
.crm-body table th, .crm-body table td, .list-row { border-color: var(--bos-line) !important; }
.set-sec h2, .crm-body h2, .crm-body h3 { color: var(--bos-text); }

/* Email builder shell */
.eb-builder, .eb-body, .eb-preview-panel, .eb-form-panel, .eb-action-bar, .eb-section, .eb-section-hd, .eb-section-body { background: var(--bos-navy) !important; color: var(--bos-text); border-color: var(--bos-line) !important; }
.eb-preview-panel { background-image: linear-gradient(var(--bos-raise) 1px, transparent 1px), linear-gradient(90deg, var(--bos-raise) 1px, transparent 1px) !important; }
.eb-label, .eb-section-title { color: var(--bos-muted) !important; }
.eb-campaign-input { color: var(--bos-text) !important; border-bottom-color: var(--bos-line-2) !important; }

/* Sign-in and activation cards */
.pm-card, .activate-card, .login-card { background: var(--bos-navy) !important; border: 1px solid var(--bos-line) !important; box-shadow: 0 12px 48px rgba(0,0,0,0.5) !important; color: var(--bos-text); border-radius: 14px; }
.pm-card h1, .pm-card h2, .activate-title, .pm-title, .pm-heading { color: var(--bos-text) !important; font-family: var(--font-display) !important; }
.pm-card p, .pm-card .sub, .activate-sub, .pm-eyebrow { color: var(--bos-muted) !important; }
.pm-card a, .activate-card a { color: var(--bos-electric); }
.pm-logo .wordmark-light { width: 220px; height: auto !important; }
.pm-btn { background: var(--bos-electric) !important; color: var(--bos-navy) !important; border-radius: 999px !important; font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: 0.02em !important; text-transform: none !important; }
.pm-access-note, .pm-card .muted, .pm-card small { color: var(--bos-muted) !important; }
.pm-divider { border-color: var(--bos-line) !important; background: var(--bos-line) !important; }

/* Proposal Builder and Email Builder chrome (their previews are separate documents and keep the client's look) */
.ed-right, .ed-panel, .panel-h, .p-row, .brief, .ai-box, .look, .ed .card { background: var(--bos-navy) !important; color: var(--bos-text) !important; border-color: var(--bos-line) !important; }
.ed h2, .ed h3, .panel-h, .p-row a, .p-row b { color: var(--bos-text) !important; }
.tab, .pill.tab, .tabs button { background: var(--bos-raise) !important; color: var(--bos-muted) !important; border-color: var(--bos-line-2) !important; }
.tab.on, .tabs button.on, .pill.tab.on { background: var(--bos-electric) !important; color: var(--bos-navy) !important; }
.eb-list-view, .eb-list-view table, .eb-list-view th, .eb-list-view td { background: transparent !important; color: var(--bos-text) !important; border-color: var(--bos-line) !important; }
.eb-offer-card, .eb-upload-zone, .eb-stepper-btn { background: var(--bos-raise) !important; border-color: var(--bos-line-2) !important; color: var(--bos-text) !important; }

/* Romey */
.ro-left { background: var(--bos-navy); border-color: var(--bos-line) !important; }
.ro-left li { border-color: var(--bos-line) !important; color: var(--bos-text); }
.ro-role, .ro-empty, .ro-msg .who, .ro-msg.thinking .body { color: var(--bos-muted) !important; }
.ro-name { color: #ffffff; }
.ro-msg.you .body { background: var(--bos-raise) !important; color: var(--bos-text); }
.ro-msg.romey .body { border-left-color: var(--bos-teal) !important; color: var(--bos-text); }
.ro-input { background: var(--bos-ground) !important; border-color: var(--bos-line) !important; }
.ro-input textarea { background: var(--bos-raise) !important; color: var(--bos-text) !important; border-color: var(--bos-line-2) !important; }
.ro-send { background: var(--bos-electric) !important; color: var(--bos-navy) !important; }