/* ==========================================================================
   Sendy theme — loaded last, after Sendy's own stylesheets.
   Sections: tokens · base and type · navbar · sidebar · layout · buttons ·
   forms · tables · labels and badges · dropdowns · modals · alerts ·
   pagination · tabs and wells · editor chrome · page-specific · responsive · dark
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ----- 1. Tokens ---------------------------------------------------------- */
:root{
  --primary:#FF500F;
  --primary-hover:#C73A0A;
  --primary-soft:#FCE7DB;
  --primary-border:#F6CBB6;
  --primary-fg:#0B0B0B;
  --accent-link:#A23B14;

  --page-bg:#F1EFE8;
  --card-bg:#FFFFFF;
  --group-bg:#FAF9F5;
  --input-bg:#FBFAF6;
  --border:#E3E1D9;
  --border-soft:#ECEAE3;
  --row-divider:#F1EFE8;

  --ink:#161410;
  --sub:#57564E;
  --faint:#8C8B86;
  --faint-icon:#A0A097;
  --dark:#171C28;

  --status-draft-fg:#6F6E63;   --status-draft-bg:#EAE8E0;   --status-draft-dot:#9A988E;
  --status-review-fg:#8A5A17;  --status-review-bg:#FBEACB;  --status-review-dot:#E0922F;
  --status-info-fg:#3E4C68;    --status-info-bg:#E9EDF5;
  --status-ok-fg:#1F7A43;      --status-ok-bg:#D9EFDF;      --status-ok-dot:#2E9E5B;
  --status-warn-fg:#8A6512;    --status-warn-bg:#FBF1DA;    --status-warn-border:#EFDFB4;
  --status-danger-fg:#C2382F;  --status-danger-bg:#FDECEB;  --status-danger-border:#F6CDC9;
  --inverse-bg:#171C28;        --inverse-fg:#FFFFFF;

  --font-ui:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius:12px;      /* cards, large surfaces */
  --radius-sm:9px;    /* inputs, buttons */
  --radius-menu:13px; /* dropdown menus */
  --radius-pill:20px;

  --shadow-card:0 1px 3px rgba(16,24,40,.04);
  --shadow-btn:0 1px 2px rgba(16,24,40,.12);
  --shadow-menu:0 16px 42px rgba(16,24,40,.17);
  --shadow-modal:0 28px 60px rgba(16,24,40,.22);

  --header-h:64px;
  --content-max:1360px;
}

/* ----- 2. Base and type --------------------------------------------------- */
html{ background:var(--page-bg); }
body{
  min-height:100vh;
  padding-top:0;
  padding-bottom:40px;
  background:var(--page-bg);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body, button, input, select, textarea{ font-family:var(--font-ui); }

a{ color:var(--accent-link); text-decoration:none; transition:color .12s ease, background .12s ease; }
a:hover, a:focus{ color:var(--primary-hover); text-decoration:none; }

p{ line-height:1.55; }
strong{ font-weight:700; }

h1,h2,h3,h4,h5,h6,.lead{ color:var(--ink); font-family:var(--font-ui); letter-spacing:-.02em; }
h2{ margin:0 0 18px; font-size:30px; font-weight:800; line-height:1.15; }
h3{ margin:22px 0 10px; font-size:18px; font-weight:800; line-height:1.3; }
h4{ font-size:15px; font-weight:700; line-height:1.3; }
h2 + br{ display:none; }
h2 .icon, h3 .icon, h2 [class^="icon-"], h3 [class^="icon-"]{ color:var(--faint-icon); }

/* Brand eyebrow above the page title (favicon · brand name · pencil) */
.lead, .lead a{
  display:inline-flex; align-items:center; gap:6px;
  margin:0 0 6px; padding:0;
  color:var(--faint);
  font-size:11.5px; font-weight:700; line-height:1.2;
  letter-spacing:.12em; text-transform:uppercase;
}
.lead a:hover{ color:var(--ink); }
.top-brand-logo{ width:16px; height:16px; margin:0; border-radius:4px; }
.top-brand-pencil{ position:static; font-size:12px; color:var(--faint-icon); }

blockquote{
  margin:0 0 20px; padding:14px 18px;
  background:var(--group-bg);
  border:1px solid var(--border); border-left:1px solid var(--border);
  border-radius:var(--radius);
}
blockquote p{ margin:0; font-size:13.5px; line-height:2; color:var(--sub); }
blockquote strong{ color:var(--ink); }

code, pre{
  color:var(--ink);
  background:var(--group-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:12.5px;
}
pre{ padding:12px 14px; }
hr{ margin:28px 0; border:0; border-top:1px solid var(--border); }
.muted, .thirtytwo, .help-block, .help-inline{ color:var(--faint); font-size:12.5px; }
.tooltip-inner{ padding:7px 10px; background:var(--dark); border-radius:8px; font-size:12px; font-weight:600; }
.tooltip.top .tooltip-arrow{ border-top-color:var(--dark); }
.tooltip.right .tooltip-arrow{ border-right-color:var(--dark); }
.tooltip.bottom .tooltip-arrow{ border-bottom-color:var(--dark); }
.tooltip.left .tooltip-arrow{ border-left-color:var(--dark); }

/* ----- 3. Navbar ---------------------------------------------------------- */
.navbar-fixed-top{
  position:sticky; top:0; z-index:1030;
  margin:0; box-shadow:none;
}
.navbar-fixed-top .navbar-inner, .navbar .navbar-inner{
  min-height:var(--header-h);
  padding:0 24px;
  background:var(--card-bg);
  border:0; border-bottom:1px solid var(--border);
  border-radius:0; box-shadow:none;
}
.navbar .container-fluid{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px;
  max-width:none; min-height:var(--header-h);
  padding:0;
}
.navbar .brand{
  display:inline-flex; align-items:center; gap:12px;
  order:1; float:none;
  margin:0; padding:0;
  color:var(--ink);
  font-size:15px; font-weight:700; letter-spacing:-.01em; text-shadow:none;
}
.navbar .brand:hover{ color:var(--ink); }
.navbar .brand img{
  float:none; width:34px; height:34px; margin:0;
  border-radius:7px; object-fit:cover; background:var(--page-bg);
}
.navbar .nav-collapse{ order:2; flex:1 1 auto; }
.navbar .nav-collapse .nav{ margin:0; }
.navbar .btn-navbar{
  order:5; float:none;
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  width:40px; height:40px; margin:0; padding:0;
  background:var(--card-bg); border:1px solid var(--border); border-radius:50%;
  box-shadow:none;
}
.navbar .btn-navbar .icon-bar{ width:16px; height:2px; background:var(--sub); border-radius:2px; box-shadow:none; }
.navbar .btn-navbar .icon-bar + .icon-bar{ margin-top:0; }

/* Right cluster: brand switcher (btn-white) then user menu (btn-inverse) */
.navbar .btn-group{ float:none; display:inline-flex; margin:0; order:4; }
.navbar .btn-group:has(> .btn-white){ order:3; }
.navbar .btn-group > .btn,
.navbar .btn-group > .btn:hover,
.navbar .btn-group > .btn:focus{
  display:inline-flex; align-items:center; gap:8px;
  height:40px; min-height:0; padding:0 14px 0 12px;
  background:var(--card-bg);
  border:1px solid var(--border); border-radius:30px;
  box-shadow:none; transform:none;
  color:var(--ink); font-size:13.5px; font-weight:600; line-height:1;
}
.navbar .btn-group > .btn:hover, .navbar .btn-group > .btn:focus{ background:var(--page-bg); }
.navbar .btn-group.open > .btn{ background:var(--page-bg); }
.navbar .btn-group > .btn img{ border-radius:4px; margin:0 !important; }
.navbar .btn-group > .btn [class^="icon-"], .navbar .btn-group > .btn .icon{ color:var(--faint-icon); margin:0; font-size:14px; }
.navbar .btn-group > .btn .icon-white{ color:var(--faint-icon); }
.navbar .btn-group > .btn .caret{
  margin:0 0 0 2px; opacity:.6;
  border-top-color:var(--ink); border-bottom-color:var(--ink);
  transition:transform .15s ease;
}
.navbar .btn-group.open > .btn .caret{ transform:rotate(180deg); }
.navbar .btn-group > .dropdown-menu{ right:0; left:auto; min-width:230px; max-height:min(70vh, 560px); overflow-y:auto; }

/* ----- 4. Sidebar --------------------------------------------------------- */
.sidebar-box{
  padding:10px 0 12px;
  background:var(--card-bg);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
.sidebar-box:hover{ box-shadow:var(--shadow-card); }
.sidebar-box .nav{ margin:0; }
.sidebar-box .nav-header{
  margin:14px 20px 6px; padding:0;
  color:var(--faint);
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; text-shadow:none;
}
.sidebar-box .nav-list > li:first-child.nav-header,
.sidebar-box .nav:first-child .nav-header{ margin-top:6px; }
.sidebar-box .nav-list > li > a{
  position:relative;
  display:flex; align-items:center; gap:10px;
  margin:1px 10px; padding:9px 10px;
  border-radius:var(--radius-sm);
  color:var(--sub);
  font-size:14px; font-weight:600; line-height:1.3; text-shadow:none;
}
.sidebar-box .nav-list [class^="icon-"], .sidebar-box .nav-list [class*=" icon-"]{
  width:16px; margin:0; text-align:center;
  color:var(--faint-icon); font-size:14px;
}
/* !important mirrors Sendy's own !important on the same selectors */
.sidebar-box .nav-list > li > a:hover,
.sidebar-box .nav-list > li > a:focus{
  background:var(--page-bg) !important;
  color:var(--ink) !important;
  box-shadow:none;
}
.sidebar-box .nav-list > .active > a,
.sidebar-box .nav-list > .active > a:hover,
.sidebar-box .nav-list > .active > a:focus{
  background:var(--primary-soft) !important;
  color:var(--ink) !important;
  box-shadow:inset 3px 0 0 var(--primary);
}
.sidebar-box .nav-list > .active > a [class^="icon-"],
.sidebar-box .nav-list > .active > a .icon-white{ color:var(--primary) !important; }
.sidebar-box .nav-list > li > a .caret{ margin-left:auto; opacity:.6; border-top-color:var(--sub); border-bottom-color:var(--sub); }
.sidebar-box .nav-list > li.open > a{ background:var(--page-bg); color:var(--ink); }
.sidebar-box .nav-list > li.dropdown > .dropdown-menu{ left:10px; right:10px; min-width:0; }
.btn.brand-sidebar-toggle, .btn.dashboard-ses-toggle, .btn.subscribers-tools-toggle{ display:none; }

/* Amazon SES panel (same sidebar box, prose content) */
.dashboard-ses-panel h3{ margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.dashboard-ses-panel h3 + br{ display:none; }
.dashboard-ses-panel p{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; padding:7px 0; border-bottom:1px solid var(--row-divider); font-size:13px; color:var(--sub); }
.dashboard-ses-panel p strong{ color:var(--ink); font-weight:600; }
.dashboard-ses-panel p:last-child{ border-bottom:0; }
.dashboard-ses-panel > br{ display:block; content:""; height:12px; }

/* ----- 5. Layout ---------------------------------------------------------- */
.container-fluid{ padding-left:24px; padding-right:24px; }
/* Some pages (list settings) wrap the grid in a form; others (send-to, settings) have no .span10 and lay the
   content out as two columns next to the sidebar. One rule set covers all three shapes. */
.container-fluid > .row-fluid,
.container-fluid > form > .row-fluid{
  display:flex; align-items:flex-start; gap:20px;
  max-width:var(--content-max); margin:24px auto 0;
}
.container-fluid > .row-fluid > .span2,
.container-fluid > form > .row-fluid > .span2{
  flex:0 0 232px; width:232px; margin-left:0;
  position:sticky; top:calc(var(--header-h) + 16px); z-index:20;
}
.container-fluid > .row-fluid > .span10,
.container-fluid > form > .row-fluid > .span10,
.container-fluid > .row-fluid > .sendy-report-card{
  flex:1 1 auto; width:auto; min-width:0; margin-left:0;
  padding:26px 28px 28px;
  background:var(--card-bg);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
/* Column pages: the two content columns become one shared card (no gap, joined borders) */
.container-fluid > .row-fluid > .span2 ~ [class*="span"]:not(.span10):not(.sendy-report-card),
.container-fluid > form > .row-fluid > .span2 ~ [class*="span"]:not(.span10){
  margin-left:0; min-width:0;
  padding:26px 28px 28px;
  background:var(--card-bg);
  border:1px solid var(--border);
}
/* the [class] hooks lift these above the generic column rule's :not() chain */
.container-fluid > .row-fluid > .span2 + .span3[class][class]{ flex:0 0 min(38%, 420px); width:auto; border-right:0; border-radius:var(--radius) 0 0 var(--radius); }
.container-fluid > .row-fluid > .span2 + .span3 ~ .span7[class][class]{ flex:1 1 auto; width:auto; border-radius:0 var(--radius) var(--radius) 0; background:var(--group-bg); }
.container-fluid > .row-fluid > .span2 + .span5[class][class]{ flex:1 1 0; width:auto; border-right:0; border-radius:var(--radius) 0 0 var(--radius); }
.container-fluid > .row-fluid > .span2 + .span5 ~ .span5[class][class]{ flex:1 1 0; width:auto; border-radius:0 var(--radius) var(--radius) 0; }
.container-fluid > .row-fluid > .span2 ~ .span3,
.container-fluid > .row-fluid > .span2 ~ .span5,
.container-fluid > .row-fluid > .span2 ~ .span7{ box-shadow:var(--shadow-card); }
/* the two halves stretch to one shared height; the sidebar keeps its own (sticky) height */
.container-fluid > .row-fluid:has(> .span2 + .span3), .container-fluid > .row-fluid:has(> .span2 + .span5){ gap:0 0; align-items:stretch; }
.container-fluid > .row-fluid:has(> .span2 + .span3) > .span2, .container-fluid > .row-fluid:has(> .span2 + .span5) > .span2{ margin-right:20px; align-self:flex-start; }
.container-fluid > .row-fluid:has(> .span2 + .span3) > .span2 ~ [class*="span"],
.container-fluid > .row-fluid:has(> .span2 + .span5) > .span2 ~ [class*="span"]{ height:auto; box-sizing:border-box; }
/* A trailing save-button row (list settings) should not read as a second empty card */
.container-fluid > form > .row-fluid + .row-fluid{ margin-top:16px; }
.container-fluid > form > .row-fluid + .row-fluid > .span2{ position:static; }
.container-fluid > form > .row-fluid + .row-fluid > .span10{ padding:0; background:transparent; border:0; box-shadow:none; }
.container-fluid > .row-fluid > .span10 > .row-fluid:first-child h2{ font-size:30px; }
.row-fluid [class*="span"]{ min-height:1px; }
.row-fluid .span12{ width:100%; }

/* Footer */
.container-fluid > hr{ max-width:var(--content-max); margin:28px auto 0; border-top:0; }
footer{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  max-width:var(--content-max); margin:0 auto; padding:14px 4px 0;
  color:var(--faint); font-size:12.5px;
}
.footer-left, .footer-right{ float:none; margin:0; }
footer a{ color:var(--sub); }
footer a:hover{ color:var(--ink); }
footer .label{ margin-left:6px; }

/* ----- 6. Buttons --------------------------------------------------------- */
.btn, #campaign-save-only-btn, #autoresponder-save-only-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:38px; margin-bottom:0; padding:0 14px;
  background:var(--card-bg);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:none;
  color:var(--ink);
  font-size:13.5px; font-weight:600; line-height:1.2; text-shadow:none; white-space:nowrap;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover, .btn:focus,
#campaign-save-only-btn:hover, #campaign-save-only-btn:focus,
#autoresponder-save-only-btn:hover, #autoresponder-save-only-btn:focus{
  background:var(--page-bg); border-color:var(--border); color:var(--ink);
  box-shadow:none; transform:none; outline:0;
}
.btn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.btn.active, .btn:active{ background:var(--page-bg); box-shadow:none; }
.btn [class^="icon-"], .btn [class*=" icon-"]{ color:var(--faint-icon); font-size:14px; line-height:1; }
.btn:hover [class^="icon-"], .btn:hover [class*=" icon-"]{ color:var(--sub); }
.btn .caret{ margin:0; opacity:.6; border-top-color:var(--ink); border-bottom-color:var(--ink); }
.btn img{ margin:0; border-radius:3px; }

.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.active, .btn-primary:active,
.btn-large.btn-inverse, .btn-large.btn-inverse:hover{
  background:var(--primary); border-color:var(--primary);
  color:var(--primary-fg); font-weight:700;
  box-shadow:var(--shadow-btn);
}
.btn-primary:hover, .btn-primary:focus, .btn-large.btn-inverse:hover{ background:var(--primary-hover); border-color:var(--primary-hover); }
.btn-primary [class^="icon-"], .btn-primary:hover [class^="icon-"],
.btn-large.btn-inverse [class^="icon-"]{ color:var(--primary-fg); }
.btn-primary .icon-white{ color:var(--primary-fg); }

.btn-inverse, .btn-inverse:hover, .btn-inverse:focus, .btn-inverse.active, .btn-inverse:active{
  background:var(--dark); border-color:var(--dark);
  color:#fff; font-weight:700; box-shadow:none;
}
.btn-inverse:hover, .btn-inverse:focus{ background:#2A3040; border-color:#2A3040; }
.btn-inverse [class^="icon-"], .btn-inverse:hover [class^="icon-"], .btn-inverse .icon-white{ color:#fff; opacity:.85; }

.btn-white, .btn-white:hover{ background:var(--card-bg); color:var(--ink); }
.btn-danger{ background:var(--status-danger-bg); border-color:var(--status-danger-border); color:var(--status-danger-fg); }
.btn-success{ background:var(--status-ok-bg); border-color:var(--status-ok-bg); color:var(--status-ok-fg); }
.btn-warning{ background:var(--status-warn-bg); border-color:var(--status-warn-border); color:var(--status-warn-fg); }

.btn-large{ min-height:46px; padding:0 22px; font-size:15px; border-radius:var(--radius-sm); }
.btn-small{ min-height:32px; padding:0 10px; font-size:12.5px; }
.btn-mini{ min-height:26px; padding:0 8px; font-size:11.5px; }
.btn.disabled, .btn[disabled]{ opacity:.5; }

/* Segmented controls (radio button groups, tracking on/off, light/dark) */
.btn-group{ display:inline-flex; vertical-align:middle; }
.btn-group > .btn{ border-radius:0; margin-left:-1px; }
.btn-group > .btn:first-child{ margin-left:0; border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm); }
.btn-group > .btn:last-child, .btn-group > .dropdown-toggle{ border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm); }
.btn-group[data-toggle="buttons-radio"], .btn-group.tracking{
  gap:2px; padding:3px;
  background:var(--page-bg); border-radius:var(--radius-sm);
}
.btn-group[data-toggle="buttons-radio"] > .btn, .btn-group.tracking > .btn{
  min-height:32px; margin:0; padding:0 12px;
  background:transparent; border:0; border-radius:7px;
  color:var(--sub); font-size:13px; font-weight:600;
}
.btn-group[data-toggle="buttons-radio"] > .btn:hover, .btn-group.tracking > .btn:hover{ color:var(--ink); background:transparent; }
.btn-group[data-toggle="buttons-radio"] > .btn.active,
.btn-group[data-toggle="buttons-radio"] > .btn.active:hover,
.btn-group[data-toggle="buttons-radio"] > .btn.active:focus,
.btn-group[data-toggle="buttons-radio"] > .btn:active,
.btn-group.tracking > .btn.active,
.btn-group.tracking > .btn.active:hover,
.btn-group.tracking > .btn.active:focus,
.btn-group.tracking > .btn:active{
  background:var(--card-bg); color:var(--ink);
  box-shadow:0 1px 2px rgba(16,24,40,.08); font-weight:700;
}
.btn-group[data-toggle="buttons-radio"] > .btn.active [class^="icon-"], .btn-group.tracking > .btn.active [class^="icon-"]{ color:var(--primary); }

/* Toolbar rows above tables */
.page-actions-toolbar, .brands-toolbar, .lists-actions-toolbar, .subscribers-actions-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:0 0 18px; clear:both;
}
.page-actions-secondary{ display:flex; align-items:center; gap:10px; }
.page-actions-primary .btn.dropdown-toggle, .brands-add-btn, .lists-actions-primary .btn:first-child, .subscribers-actions-primary .btn:first-child{
  background:var(--primary); border-color:var(--primary); color:var(--primary-fg); font-weight:700; box-shadow:var(--shadow-btn);
}
.page-actions-primary .btn.dropdown-toggle:hover, .brands-add-btn:hover, .lists-actions-primary .btn:first-child:hover, .subscribers-actions-primary .btn:first-child:hover{ background:var(--primary-hover); border-color:var(--primary-hover); }
.page-actions-primary .btn [class^="icon-"], .brands-add-btn [class^="icon-"], .lists-actions-primary .btn:first-child [class^="icon-"], .subscribers-actions-primary .btn:first-child [class^="icon-"]{ color:var(--primary-fg); }
.subscribers-actions-primary, .lists-actions-primary{ display:flex; flex-wrap:wrap; gap:8px; }
.page-actions-primary .btn .caret{ border-top-color:var(--primary-fg); opacity:.7; }
.page-actions-primary .btn.dropdown-toggle{ display:inline-flex; gap:8px; }

/* ----- 7. Forms ----------------------------------------------------------- */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="search"], input[type="url"], textarea, select, .uneditable-input{
  box-sizing:border-box;
  min-height:40px; margin-bottom:0; padding:8px 12px;
  background:var(--input-bg);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:none;
  color:var(--ink); font-size:14px; line-height:1.4;
  transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
textarea{ min-height:120px; padding:10px 12px; }
select{ height:40px; padding:0 34px 0 12px; appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--sub) 50%), linear-gradient(135deg, var(--sub) 50%, transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
select[multiple]{ height:auto; padding:6px; background-image:none; }
select[multiple] option{ padding:6px 8px; border-radius:6px; }
select[multiple] optgroup{ color:var(--faint); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
select[multiple] option{ color:var(--ink); font-size:14px; font-weight:500; text-transform:none; letter-spacing:0; }
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus,
input[type="search"]:focus, input[type="url"]:focus, textarea:focus, select:focus{
  background:var(--card-bg);
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-soft);
  outline:0;
}
::placeholder{ color:var(--faint); opacity:1; }
input[type="checkbox"], input[type="radio"]{ accent-color:var(--primary); width:16px; height:16px; margin:0 6px 0 0; vertical-align:-3px; }
input[type="file"]{ height:40px; line-height:40px; color:var(--sub); font-size:13px; }
input[type="file"]::file-selector-button, input[type="file"]::-webkit-file-upload-button{
  height:32px; margin-right:10px; padding:0 12px;
  background:var(--card-bg); border:1px solid var(--border); border-radius:7px; box-shadow:none;
  color:var(--ink); font-family:var(--font-ui); font-size:13px; font-weight:600; cursor:pointer;
}
input[type="file"]:hover::file-selector-button, input[type="file"]:hover::-webkit-file-upload-button{ background:var(--page-bg); color:var(--ink); border-color:var(--border); }

label, .control-label{
  display:block; margin-bottom:6px;
  color:var(--ink); font-size:13px; font-weight:700; letter-spacing:0;
}
label.checkbox, label.radio{ display:flex; align-items:center; gap:8px; padding-left:0; font-weight:500; color:var(--ink); }
label.checkbox input, label.radio input{ float:none; margin:0; }
.control-group{ margin-bottom:18px; }
.control-group .controls{ margin-left:0; }
.form-vertical .control-group > .control-label + .controls{ margin-top:6px; }
legend{ margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--border); color:var(--ink); font-size:16px; font-weight:800; letter-spacing:-.01em; }
.input-xlarge{ width:min(100%, 420px); }
.input-large{ width:min(100%, 300px); }
.input-medium{ width:min(100%, 220px); }
.input-small{ width:min(100%, 120px); }
.input-prepend, .input-append{ display:inline-flex; align-items:stretch; margin-bottom:0; font-size:14px; }
.input-prepend .add-on, .input-append .add-on{
  display:inline-flex; align-items:center;
  min-height:40px; height:auto; padding:0 12px;
  background:var(--group-bg); border:1px solid var(--border); border-radius:var(--radius-sm) 0 0 var(--radius-sm);
  color:var(--sub); font-size:13px; font-weight:600; line-height:1; text-shadow:none;
}
.input-append .add-on{ border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.input-prepend .add-on:first-child + input, .input-prepend input{ border-top-left-radius:0; border-bottom-left-radius:0; }
.input-append input{ border-top-right-radius:0; border-bottom-right-radius:0; }
.input-prepend .add-on [class^="icon-"]{ color:var(--faint-icon); }
.input-prepend.input-append .add-on:first-child, .input-prepend.input-append .btn:first-child,
.input-prepend.input-append .add-on:last-child, .input-prepend.input-append .btn:last-child{ padding:0 12px; }

/* Search forms (campaigns, brands, subscribers) */
.form-search{ display:flex; align-items:center; gap:8px; margin:0; }
.form-search .search-query{
  width:240px !important;  /* beats Sendy's inline width and its own !important */
  height:40px; margin:0; padding:0 14px;
  border-radius:var(--radius-sm); background:var(--input-bg);
}
.form-search .search-query:focus{ background:var(--card-bg); }
.form-search .btn{ white-space:nowrap; }
.form-search .search-query::placeholder{ color:var(--faint); }

/* Validation */
.error, label.error{ display:block; margin:6px 0 0; color:var(--status-danger-fg); font-size:12.5px; font-weight:600; }
input.error, textarea.error, select.error,
.control-group.error input, .control-group.error textarea, .control-group.error select{
  border-color:var(--status-danger-fg); background:var(--card-bg);
  box-shadow:0 0 0 3px var(--status-danger-bg);
}
.control-group.error .control-label, .control-group.error .help-inline, .control-group.error .help-block{ color:var(--status-danger-fg); }
.control-group.success input{ border-color:var(--status-ok-dot); }

/* ----- 8. Tables ---------------------------------------------------------- */
table.table{
  width:100%; margin:0 0 20px;
  background:transparent;
  border:1px solid var(--border); border-radius:var(--radius);
  border-collapse:separate; border-spacing:0; overflow:hidden;
  box-shadow:none;
}
.table th, .table td{
  padding:12px 16px;
  border-top:1px solid var(--border-soft);
  vertical-align:middle;
  color:var(--ink); font-size:14px; line-height:1.4;
}
.table thead th{
  padding:10px 16px;
  background:var(--group-bg); border-top:0; border-bottom:1px solid var(--border);
  color:var(--faint);
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;
}
.table tbody tr:first-child td{ border-top:0; }
.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th{ background:transparent; }
.table tbody tr:hover td{ background:var(--group-bg); }
.table-condensed th, .table-condensed td{ padding:9px 14px; }
.table-bordered{ border:1px solid var(--border); }
.table-bordered th, .table-bordered td{ border-left:1px solid var(--border-soft); }
.table-bordered th:first-child, .table-bordered td:first-child{ border-left:0; }
.table td a{ color:var(--ink); font-weight:600; }
.table td a:hover{ color:var(--primary); }
.table td p{ margin:0; }
/* Title cell: the status chip sits before the title link */
.table td > .label + a{ margin-left:8px !important; font-size:14.5px; font-weight:700; } /* overrides inline margin-left:5px */
.table td > .label + a + span, .table td > .label + a + span + a{ font-weight:500; }
/* Draft rows: "| Edit" carries an inline grey; re-colour from the palette so it also reads in dark */
.table td > .label + a + span{ color:var(--faint) !important; }
.table td > a[title="Edit this campaign"]{ color:var(--sub) !important; }
.table td > a[title="Edit this campaign"]:hover{ color:var(--primary) !important; }
/* Icon-only row actions (duplicate, delete, unsubscribe, preview). The first column is always the title
   column in Sendy's tables, so it is excluded: :only-child ignores text nodes and would also match "icon + title". */
.table td:not(:first-child) > a:has(> .icon:only-child), .table td:not(:first-child) > a:has(> [class^="icon-"]:only-child){
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; margin:-6px 0;
  border-radius:8px; color:var(--faint-icon);
}
/* Icon-only columns shrink to content so the title column keeps the width */
.table td:not(:first-child):has(> a > .icon:only-child), .table td:not(:first-child):has(> a > [class^="icon-"]:only-child){ width:1%; white-space:nowrap; }
.table td:first-child{ width:auto; }
.table td:first-child a .icon, .table td:first-child a [class^="icon-"]{ margin-right:2px; color:var(--faint-icon); }
.table td:not(:first-child) > a:has(> .icon:only-child):hover, .table td:not(:first-child) > a:has(> [class^="icon-"]:only-child):hover{ background:var(--page-bg); color:var(--ink); }
.table td:not(:first-child) > a:has(> .icon-trash):hover{ background:var(--status-danger-bg); color:var(--status-danger-fg); }
.table .badge, .table .label.brand-id{ font-family:var(--font-mono); }
/* tablesorter headers */
.tablesorter-header{ cursor:pointer; }
.tablesorter-headerAsc, .tablesorter-headerDesc{ color:var(--primary); }
.tablesorter-header-inner{ display:inline-block; }
table.table thead th.tablesorter-header{ background-image:none; }

/* ----- 9. Labels and badges ----------------------------------------------- */
.label, .badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px;
  background:var(--status-draft-bg);
  border-radius:var(--radius-pill);
  color:var(--status-draft-fg);
  font-size:12px; font-weight:700; line-height:1.3; letter-spacing:0; text-shadow:none; text-transform:none;
  vertical-align:middle; white-space:nowrap;
}
.badge{ min-width:22px; justify-content:center; padding:2px 8px; font-family:var(--font-mono); font-weight:500; font-size:11.5px; }
.label-success, .badge-success{ background:var(--status-ok-bg); color:var(--status-ok-fg); }
.label-warning, .badge-warning{ background:var(--status-review-bg); color:var(--status-review-fg); }
.label-info, .badge-info{ background:var(--status-info-bg); color:var(--status-info-fg); }
.label-important, .badge-important{ background:var(--status-danger-bg); color:var(--status-danger-fg); }
.label-inverse, .badge-inverse{ background:var(--inverse-bg); color:var(--inverse-fg); }
a .label:hover, a .badge:hover{ filter:brightness(.96); }
strong.label{ font-weight:700; }

/* ----- 10. Dropdowns ------------------------------------------------------ */
.dropdown-menu{
  min-width:220px; margin-top:8px; padding:6px;
  background:var(--card-bg);
  border:1px solid var(--border); border-radius:var(--radius-menu);
  box-shadow:var(--shadow-menu);
  animation:sendy-dd-in .15s ease;
}
@keyframes sendy-dd-in{ from{ opacity:0; transform:translateY(-6px) scale(.99); } to{ opacity:1; transform:none; } }
.dropdown-menu li > a, .dropdown-menu a{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:8px;
  color:var(--ink); font-size:13.5px; font-weight:600; line-height:1.3; white-space:normal;
}
.dropdown-menu li > a [class^="icon-"], .dropdown-menu li > a .icon{ width:16px; text-align:center; color:var(--faint-icon); font-size:14px; }
.dropdown-menu li > a img{ border-radius:4px; }
/* !important mirrors Sendy's own !important on the same selectors */
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus{
  background:var(--group-bg) !important; color:var(--ink) !important; box-shadow:none;
}
.dropdown-menu .active > a, .dropdown-menu .active > a:hover{
  background:var(--primary-soft) !important; color:var(--ink) !important; box-shadow:none;
}
.dropdown-menu .active > a [class^="icon-"]{ color:var(--primary); }
.dropdown-menu .divider{ height:1px; margin:6px 4px; background:var(--border); border:0; }
.dropdown-menu .dropdown-header{
  padding:8px 10px 4px;
  color:var(--faint); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.dropdown-menu .dropdown-header:not(:first-child){ margin-top:4px; }
/* "Create with AI" — Sendy paints this with an !important rainbow; bring it back to the palette */
.sendy-create-with-ai-link, .dropdown-menu > li > a.sendy-create-with-ai-link:hover{ color:var(--accent-link) !important; }
.sendy-create-with-ai-text, .dropdown-menu > li > a.sendy-create-with-ai-link:hover .sendy-create-with-ai-text{
  animation:none;
  background-image:none !important;
  -webkit-text-fill-color:var(--accent-link) !important;
  color:var(--accent-link) !important;
}
.sendy-create-with-ai-link [class^="icon-"]{ color:var(--accent-link); }

/* ----- 11. Modals --------------------------------------------------------- */
.modal{
  background:var(--card-bg);
  border:1px solid var(--border); border-radius:15px;
  box-shadow:var(--shadow-modal);
  overflow:hidden;
}
.modal-header{ padding:18px 22px 14px; background:var(--card-bg); border-bottom:1px solid var(--border); }
.modal-header h3{ margin:0; font-size:20px; font-weight:800; line-height:1.25; letter-spacing:-.02em; }
.modal-header h3 .icon{ margin-right:6px; color:var(--faint-icon); }
.modal-body{ padding:20px 22px; max-height:min(60vh, 520px); overflow-x:hidden; color:var(--ink); font-size:14px; }
.modal-body p{ font-size:14px; line-height:1.55; }
.modal-body .control-label{ margin-top:0; }
.modal-footer{
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
  padding:14px 22px;
  background:var(--group-bg); border-top:1px solid var(--border);
  box-shadow:none; border-radius:0;
}
.modal-footer .btn + .btn{ margin:0; }
.modal-footer input{ margin:0 !important; } /* Sendy's inline negative margin on the DELETE confirmation field */
.modal-footer input + .btn{ margin-left:0; }
.modal-backdrop, .modal-backdrop.fade.in{ background:#161410; opacity:.45; }
.close{ color:var(--faint); font-size:22px; font-weight:400; line-height:1; opacity:1; text-shadow:none; }
.close:hover{ color:var(--ink); opacity:1; }
.alert .close{ top:0; right:0; line-height:20px; }

/* ----- 12. Alerts --------------------------------------------------------- */
.alert{
  margin-bottom:18px; padding:12px 40px 12px 16px;
  background:transparent;
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:none;
  color:var(--sub); font-size:13.5px; font-weight:500; line-height:1.5; text-shadow:none;
}
.alert [class^="icon-"], .alert .icon{ color:var(--faint-icon); }
.alert a{ color:var(--accent-link); }
p.alert{ display:flex; gap:8px; align-items:flex-start; padding-right:16px; }
.alert strong{ font-weight:700; }
.alert a{ color:inherit; text-decoration:underline; }
.alert .icon, .alert [class^="icon-"]{ margin-right:4px; }
.alert-success{ background:var(--status-ok-bg); border-color:var(--status-ok-bg); color:var(--status-ok-fg); }
.alert-info{ background:var(--status-info-bg); border-color:var(--status-info-bg); color:var(--status-info-fg); }
.alert-danger, .alert-error{ background:var(--status-danger-bg); border-color:var(--status-danger-border); color:var(--status-danger-fg); }
.alert-warning{ background:var(--status-warn-bg); border-color:var(--status-warn-border); color:var(--status-warn-fg); }
.alert-success [class^="icon-"], .alert-info [class^="icon-"], .alert-danger [class^="icon-"], .alert-error [class^="icon-"], .alert-warning [class^="icon-"],
.alert-success a, .alert-info a, .alert-danger a, .alert-error a, .alert-warning a{ color:inherit; }
.alert .close{ color:inherit; opacity:.6; }
.alert .close:hover{ opacity:1; }

/* ----- 13. Pagination ----------------------------------------------------- */
.pagination, #pagination{ height:auto; margin:18px 0 4px; overflow:visible; }
.pagination ul{
  display:inline-flex; gap:6px;
  background:transparent; border:0; border-radius:0; box-shadow:none;
}
.pagination ul > li > a, .pagination ul > li > span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 10px;
  background:var(--card-bg);
  border:1px solid var(--border) !important; border-radius:var(--radius-sm) !important;
  color:var(--sub); font-size:13px; font-weight:600; line-height:1;
}
.pagination ul > li > a:hover{ background:var(--page-bg); color:var(--ink); }
.pagination ul > .active > a, .pagination ul > .active > span, .pagination ul > .active > span:hover{
  background:var(--primary); border-color:var(--primary) !important; color:var(--primary-fg);
}
.pagination ul > .disabled > span, .pagination ul > .disabled > a{ color:var(--faint-icon); background:var(--card-bg); }
.pagination .icon{ font-size:12px; }

/* ----- 14. Tabs and wells ------------------------------------------------- */
.nav-tabs{
  display:flex; flex-wrap:wrap; gap:0 4px;
  margin:0 0 18px; border-bottom:1px solid var(--border);
}
.nav-tabs > li{ float:none; margin-bottom:-1px; }
.nav-tabs > li > a{
  display:inline-flex; align-items:center; gap:8px;
  margin:0; padding:12px 12px;
  border:0; border-bottom:3px solid transparent; border-radius:0;
  color:var(--sub); font-size:14px; font-weight:600; line-height:1.3;
}
.nav-tabs > li > a:hover{ background:transparent; border-color:transparent; border-bottom-color:var(--border); color:var(--ink); }
.nav-tabs > .active > a, .nav-tabs > .active > a:hover,
.nav-tabs > li > a.active{ background:transparent; border:0; border-bottom:3px solid var(--primary); color:var(--ink); }
.nav-tabs .badge{ font-size:11px; }

.well, .grand_total, #attachments li, #rdp-email, .rounded-dashed-box, .dashed-box{
  margin:0 0 18px; padding:18px 20px;
  background:var(--group-bg);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:none;
}
.well:hover{ box-shadow:none; }
.well .well, .well table.table{ background:var(--card-bg); }
.dashed-box, .rounded-dashed-box{ border-style:dashed; }
.grand_total{ font-size:15px; font-weight:600; }

/* Accordions (settings, brand settings, subscribe form options) */
.accordion-group{ margin-bottom:8px; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.accordion-heading{ background:var(--card-bg); }
.accordion-heading .accordion-toggle{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  color:var(--ink); font-size:14px; font-weight:700;
}
.accordion-heading .accordion-toggle:hover{ background:var(--group-bg); color:var(--ink); }
.accordion-heading .accordion-toggle h3{ display:flex; align-items:center; gap:10px; margin:0; font-size:14px; font-weight:700; line-height:1.3; }
.accordion-heading .accordion-toggle [class^="icon-"], .accordion-heading .accordion-toggle .icon{ width:16px; text-align:center; color:var(--faint-icon); font-size:14px; }
.accordion-heading .accordion-toggle::after{ content:""; margin-left:auto; width:6px; height:6px; border:solid var(--faint-icon); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); transition:transform .15s ease; }
.accordion-group:has(> .accordion-body.in) > .accordion-heading .accordion-toggle::after{ transform:rotate(-135deg); }
.accordion-inner{ padding:16px; border-top:1px solid var(--border); }
/* Sendy puts content straight into .accordion-body (no .accordion-inner): pad through the children so the collapse animation stays clean */
.accordion-body:not(:has(> .accordion-inner)) > *{ margin-left:14px; margin-right:14px; }
.accordion-body:not(:has(> .accordion-inner)) > :first-child{ margin-top:14px; }
.accordion-body:not(:has(> .accordion-inner)) > :last-child{ margin-bottom:14px; }
.accordion-body:not(:has(> .accordion-inner)) > br:last-child{ display:none; }
.accordion-body.in{ border-top:1px solid var(--border); }
.accordion-body > .control-group{ margin-bottom:14px; }

/* Progress bars */
.progress{ height:8px; margin-bottom:0; background:var(--border-soft); border-radius:8px; box-shadow:none; }
.progress .bar{ background:var(--status-ok-dot); box-shadow:none; }
.progress-danger .bar{ background:var(--status-danger-fg); }
.progress-warning .bar{ background:var(--status-review-dot); }

/* ----- 15. Editor chrome -------------------------------------------------- */
textarea#html + .ck.ck-editor{
  --ck-border-radius:var(--radius);
  --ck-color-base-border:var(--border);
  --ck-color-toolbar-border:var(--border);
  --ck-color-toolbar-background:var(--group-bg);
  --ck-color-focus-border:var(--primary);
  --ck-focus-ring:1px solid var(--primary);
  --ck-color-button-default-hover-background:var(--page-bg);
  --ck-color-button-default-active-background:var(--primary-soft);
  --ck-color-button-on-background:var(--primary-soft);
  --ck-color-button-on-hover-background:var(--primary-soft);
  --ck-color-button-on-active-background:var(--primary-soft);
  --ck-color-button-on-color:var(--accent-link);
  --ck-color-text:var(--ink);
  --ck-font-face:var(--font-ui);
}
textarea#html + .ck.ck-editor .ck-editor__main > .ck-editor__editable{
  min-height:560px; padding:24px 28px; margin-bottom:20px;
  border:1px solid var(--border); border-radius:0 0 var(--radius) var(--radius);
  background:var(--card-bg); box-shadow:none;
}
textarea#html + .ck.ck-editor .ck-editor__main > .ck-editor__editable.ck-focused{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.sendy-grapesjs-shell .gjs-one-bg{ background:var(--group-bg); }
.sendy-grapesjs-shell .gjs-two-color{ color:var(--ink); }
.sendy-grapesjs-shell .gjs-three-bg{ background:var(--primary); color:var(--primary-fg); }
.sendy-grapesjs-shell .gjs-four-color, .sendy-grapesjs-shell .gjs-four-color-h:hover{ color:var(--accent-link); }
.sendy-editor-toolbar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.sendy-editor-toolbar .btn-group{ margin:0; }
.sendy-content-improvements-panel{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-menu); }
.sendy-content-improvements-content > strong, #sendy-report-analysis-content > strong, #sendy-report-analysis-content h3 strong{ color:var(--accent-link); }
.sendy-ai-rainbow-text{ color:var(--accent-link); }
.fancybox-bg{ background:#161410; }
.fancybox-content{ border-radius:var(--radius); overflow:hidden; }

/* ----- 16. Page-specific rules (each listed in the README) ---------------- */

/* Login */
#wrapper{ position:static; height:auto; margin:min(14vh, 140px) auto 0; width:min(100%, 380px); border-radius:0; }
#login-form.well, #forgot .well, #forgot-form .well{ display:block; margin:0; padding:30px 28px 26px; background:var(--card-bg); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-card); }
#login-form h2, #forgot h2{ display:flex; align-items:center; gap:10px; margin:0 0 20px; font-size:24px; }
#login-form h2 .icon, #forgot h2 .icon{ margin:0 !important; font-size:18px; color:var(--faint-icon); } /* inline margin on the lock icon */
#login-form h2 + div{ display:none; }
#login-form br, #forgot br{ display:none; }
#login-form input.input, #forgot input.input{ display:block; width:100%; margin:0 0 10px; }
#password-row{ margin-bottom:14px; }
#login-form .login-actions{ display:flex; width:100%; margin:4px 0 0; }
.login-actions .btn{ flex:1 1 auto; min-height:42px; background:var(--primary); border-color:var(--primary); color:var(--primary-fg); font-weight:700; }
.login-actions .btn:hover{ background:var(--primary-hover); border-color:var(--primary-hover); }
.login-actions .btn [class^="icon-"]{ color:var(--primary-fg); }
#login-form p{ margin:16px 0 0; text-align:center; }
.recovery{ margin:0; font-size:13px; color:var(--sub); }
#forgot-form{ width:380px; height:auto !important; margin-left:-190px; } /* Sendy sets the modal height inline */
#forgot-form input{ width:100%; }

/* Brands (operator home) */
#brands-table{ margin-top:0; }
#brands-table th, #brands-table td{ padding:12px 14px; }
#brands-table td:nth-child(2) a{ font-size:14.5px; font-weight:700; }
#brands-table td:nth-child(4) p{ gap:2px; flex-wrap:nowrap; }
#brands-table td:nth-child(4) a.btn{ min-height:30px; height:30px; padding:0; background:transparent; border-color:transparent; border-radius:8px; box-shadow:none; font-size:12.5px; color:var(--sub); }
#brands-table td:nth-child(4) a.btn:nth-child(-n+4){ width:30px; }
#brands-table td:nth-child(4) a.btn .icon{ color:var(--faint-icon); }
#brands-table td:nth-child(4) a.btn:hover{ background:var(--page-bg); color:var(--ink); }
#brands-table td:nth-child(4) a.btn:hover .icon{ color:var(--ink); }
#brands-table td:nth-child(4) a.last-campaign-quick-link{ gap:6px; margin-left:6px; padding:0 8px; }
#brands-table td:nth-child(4) .open_rate_no{ color:var(--sub); font-size:12px; }
#brands-table td:nth-child(4) a.last-campaign-quick-link:hover .open_rate_no{ color:var(--ink); }
#brands-table .badge{ padding:1px 7px; font-size:11px; }
#brands-table td .label.brand-id{ padding:2px 7px; font-size:11.5px; }
#brands-table td:nth-child(3) .brand-smtp-icons[title*="Amazon"]::after{ color:var(--sub); font-size:12.5px; font-weight:600; }
.brand-smtp-icons img, .smtp-provider-img{ border-radius:4px; }
.open_rate_no{ font-family:var(--font-mono); font-size:12px; }

/* Campaigns */
.campaigns-rss-btn{ box-sizing:border-box; width:40px !important; height:40px !important; min-height:0; padding:0 !important; } /* mirrors Sendy's own !important sizing */
table.table.responsive{ margin-top:0 !important; } /* Sendy sets margin-top inline on the campaigns table */

/* Report */
.sendy-report-heading-content h2{ font-size:26px; }
.report-metrics-grid{ gap:12px; }
.report-metric-card{
  min-height:0; padding:16px 18px 14px;
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:none;
}
.report-metric-pill{
  padding:0; background:none !important; border-radius:0;
  color:var(--ink); font-size:30px; font-weight:800; line-height:1; letter-spacing:-.02em;
}
.report-metric-opened{ color:var(--status-ok-fg); }
.report-metric-clicked{ color:var(--status-info-fg); }
.report-metric-ctor{ color:var(--accent-link); }
.report-metric-unsubscribed{ color:var(--status-danger-fg); }
.report-metric-not-opened{ color:var(--status-warn-fg); }
.report-metric-bounced, .report-metric-spam{ color:var(--sub); }
.report-metric-disabled{ color:var(--faint); font-size:14px; font-weight:700; }
.report-metric-label{ margin-top:8px; color:var(--ink); font-size:13.5px; font-weight:700; }
.report-metric-detail{ margin-top:4px; color:var(--sub); font-size:12.5px; }
.report-metric-footer{ margin-top:12px; padding-top:10px; border-top:1px solid var(--border-soft); color:var(--sub); font-size:12.5px; }
.report-metric-footer-actions a{ color:var(--faint-icon); opacity:1; }
.report-metric-footer-actions a:hover{ color:var(--ink); }
.sendy-report-score strong{ color:var(--ink); font-size:34px; font-weight:800; }
.sendy-report-score-bar{ background:var(--border-soft); }
.sendy-report-score-bar span{ background:var(--primary); }
.sendy-report-analysis-card{ background:var(--group-bg); border:1px solid var(--border); border-radius:var(--radius); }
.report-titles{ margin:0; }
.report-titles h2{ margin:26px 0 12px; font-size:20px; }
.report-titles h3{ margin:0; }
.report-export{ margin:26px 0 0 10px; }
.sendy-sending-bar-track{ background:var(--border-soft); border-radius:8px; }
.sendy-sending-bar-fill{ background:var(--primary); border-radius:8px; }
.sendy-live-toggle{ background:var(--border); }
.sendy-live-toggle[aria-checked="true"]{ background:var(--primary); }
.sendy-live-toggle-thumb{ background:#fff; }
#countries-container, #container{ font-family:var(--font-ui); }

/* Lists */
.lists-actions-toolbar{ margin-bottom:18px; }
.encrypted-list-id{ font-family:var(--font-mono); font-size:12px; color:var(--sub); }
#list-form{ max-width:420px; margin-top:0; padding:20px; background:var(--group-bg); border:1px solid var(--border); border-radius:var(--radius); }

/* Subscribers */
.subscribers-list-toolbar.well{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 18px;
  margin-bottom:18px; padding:12px 16px;
}
.subscribers-list-summary{ display:inline-flex; align-items:center; gap:8px; color:var(--sub); font-size:13.5px; font-weight:600; }
.subscribers-list-links{ display:flex; flex-wrap:wrap; gap:4px; }
.subscribers-list-link{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; font-size:13.5px; font-weight:600; }
.subscribers-list-link:hover{ background:var(--card-bg); }
.subscribers-list-link a{ display:inline-flex; align-items:center; gap:7px; color:var(--ink); }
.subscribers-list-link [class^="icon-"]{ color:var(--faint-icon); }
.subscribers-tools-spacer{ display:none; }
.subscribers-charts{ display:flex; align-items:flex-start; gap:24px; margin-bottom:18px; }
.subscribers-charts > .span3{ flex:0 0 240px; width:auto; margin-left:0; }
.subscribers-charts > .span9{ flex:1 1 auto; width:auto; min-width:0; margin-left:0; }
.subscribers-activity-title{ display:flex; align-items:center; gap:8px; }

/* Send-to */
.send-newsletter-now-icon{ margin:0; border-radius:3px; }
#real-btn{ margin-top:12px; }
#excl{ margin-top:12px !important; } /* Sendy sets the margin inline */
#excl br{ display:none; }
#email_list, #email_list_exclude{ width:100% !important; height:220px !important; } /* Sendy sets width/height inline */
.schedule-date{ width:90px; }
.real-data-preview{ float:none; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.email-views{ float:none; display:inline-flex; }
#email_width{ margin:0 0 0 8px; height:40px; }

/* List settings */
#edit-list-save-btn{ min-height:44px; padding:0 22px; background:var(--primary); border-color:var(--primary); color:var(--primary-fg); font-weight:700; }
#edit-list-save-btn:hover{ background:var(--primary-hover); border-color:var(--primary-hover); }

/* Templates */
.iframe-preview{ border-radius:var(--radius-sm); border:1px solid var(--border); }

/* Settings & brand settings */
#settings-form .control-group{ margin-bottom:20px; }
#settings-form > .btn[type="submit"], #settings-form .btn.btn-primary[type="submit"]{ min-height:44px; padding:0 22px; background:var(--primary); border-color:var(--primary); color:var(--primary-fg); font-weight:700; }
.passkeys-well{ padding:14px 16px; }
.passkey-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.passkey-item:last-child{ border-bottom:0; }
#qr-code{ border-radius:var(--radius-sm); }
.customdomain th, .customdomain td{ font-family:var(--font-mono); font-size:12.5px; }

/* Highcharts (styled through CSS where it reaches) */
.highcharts-background{ fill:transparent; }
.highcharts-title, .highcharts-axis-labels text, .highcharts-legend-item text{ font-family:var(--font-ui) !important; fill:var(--sub) !important; }
.highcharts-grid-line{ stroke:var(--border-soft); }
.highcharts-axis-line{ stroke:var(--border); }

/* Datepicker (Pikaday) */
.pika-single{ font-family:var(--font-ui); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-menu); color:var(--ink); }
.pika-button{ border-radius:6px; background:transparent; color:var(--ink); font-size:13px; }
.pika-button:hover{ background:var(--page-bg); color:var(--ink); }
.is-selected .pika-button{ background:var(--primary); color:var(--primary-fg); box-shadow:none; }
.is-today .pika-button{ color:var(--primary); }
.pika-label{ background:var(--card-bg); color:var(--ink); font-weight:700; }

/* ----- 17. Responsive ----------------------------------------------------- */
@media (max-width: 979px){
  .container-fluid{ padding-left:16px; padding-right:16px; }
  .navbar .navbar-inner{ padding:0 16px; }
  .navbar .btn-navbar{ display:inline-flex; }
  .navbar .nav-collapse{ flex:1 1 auto; order:2; }
  .navbar .nav-collapse.collapse{ height:0 !important; overflow:hidden; } /* the collapse holds an empty list; Bootstrap sets its height inline while animating */
  .navbar .nav-collapse .nav{ display:none; }

  .container-fluid > .row-fluid, .container-fluid > form > .row-fluid{ display:block; margin-top:16px; }
  .container-fluid > .row-fluid > [class*="span"],
  .container-fluid > form > .row-fluid > [class*="span"]{ position:static; flex:none; width:100%; min-width:0; margin:0; box-sizing:border-box; }
  .container-fluid > .row-fluid > .span10,
  .container-fluid > form > .row-fluid > .span10,
  .container-fluid > .row-fluid > .sendy-report-card{ margin-top:14px; padding:20px 18px 22px; }
  .container-fluid > .row-fluid > .span2 ~ [class*="span"]:not(.span10):not(.sendy-report-card){ padding:20px 18px 22px; border-radius:0; border-right:1px solid var(--border); border-top:0; }
  .container-fluid > .row-fluid > .span2 + .span3[class][class], .container-fluid > .row-fluid > .span2 + .span5[class][class]{ margin-top:14px; border-right:1px solid var(--border); border-top:1px solid var(--border); border-radius:var(--radius) var(--radius) 0 0; }
  .container-fluid > .row-fluid > .span2 + .span3 ~ .span7[class][class], .container-fluid > .row-fluid > .span2 + .span5 ~ .span5[class][class]{ border-top:0; border-radius:0 0 var(--radius) var(--radius); }
  .container-fluid > .row-fluid:has(> .span2 + .span3) > .span2, .container-fluid > .row-fluid:has(> .span2 + .span5) > .span2{ margin-right:0; }

  /* Sidebar collapses behind its toggle button */
  .btn.brand-sidebar-toggle, .btn.dashboard-ses-toggle, .btn.subscribers-tools-toggle{
    display:flex; align-items:center; justify-content:space-between;
    width:100%; margin:0; box-sizing:border-box;
  }
  .brand-sidebar-toggle .caret, .dashboard-ses-toggle .caret{ transition:transform .2s ease; }
  .brand-sidebar-toggle[aria-expanded="true"] .caret, .dashboard-ses-toggle[aria-expanded="true"] .caret{ transform:rotate(180deg); }
  .brand-sidebar-panel, .dashboard-ses-panel{ display:none; margin-top:10px; }
  .brand-sidebar-panel.is-open, .dashboard-ses-panel.is-open{ display:block; }

  h2{ font-size:26px; }
  .page-actions-toolbar, .page-actions-secondary, .brands-toolbar, .lists-actions-toolbar, .subscribers-actions-toolbar{ align-items:stretch; flex-direction:column; }
  .page-actions-primary .btn.dropdown-toggle, .brands-add-btn, .lists-actions-primary .btn{ width:100%; box-sizing:border-box; }
  .subscribers-charts{ flex-direction:column; }
  .subscribers-charts > .span3{ flex:none; width:100%; }
  .form-search{ flex-direction:column; align-items:stretch; }
  .form-search .search-query{ width:100% !important; }
  .form-search .btn{ width:100%; }
  .page-actions-toolbar .campaigns-rss-btn{ align-self:flex-start; }
  .input-xlarge, .input-large{ width:100%; }
  .modal{ width:auto; left:12px; right:12px; margin-left:0; }
  #subscriber-info, #subscribeform{ width:auto !important; margin-left:0 !important; } /* Sendy sizes these modals inline */
}

/* responsive-tables.js turns each row into a card below 768px; keep the cells readable */
@media (max-width: 767px){
  /* Bootstrap pads body by 20px here and pulls the fixed navbar back out with negative margins; the sticky navbar needs neither */
  body{ padding-left:0; padding-right:0; }
  .navbar .navbar-inner{ padding:0 12px; }
  .navbar .container-fluid{ padding:10px 0; }
  .navbar .brand{ font-size:14px; }
  .navbar .btn-group > .btn{ height:36px; padding:0 10px; font-size:13px; }
  .navbar .btn-group:has(> .btn-white){ margin-left:0; }
  .navbar .btn-group > .dropdown-menu{ max-height:60vh; }

  table.table{ border:0; border-radius:0; }
  div.table-wrapper{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
  table.responsive td, table.responsive th{ white-space:nowrap; }
  .table th, .table td{ padding:10px 12px; font-size:13.5px; }
  .nav-tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .nav-tabs > li > a{ white-space:nowrap; }
  footer{ flex-direction:column; align-items:flex-start; }
  .report-metrics-grid{ gap:10px; }
  .report-metric-card{ flex-basis:calc(50% - 5px); min-width:0; }
}

@media (max-width: 480px){
  .navbar .brand{ max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .navbar .btn-group > .btn{ padding:0 9px; gap:6px; }
  .navbar .btn-group > .btn .icon-user{ display:inline-block; }
  .modal{ left:8px; right:8px; }
  .modal-footer{ flex-wrap:wrap; }
  .pagination ul{ flex-wrap:wrap; }
}

/* ----- 18. Dark ----------------------------------------------------------- */
html:has(link[href*="/css/dark/"]){
  color-scheme:dark;
  --page-bg:#161513;
  --card-bg:#1E1D1A;
  --group-bg:#242321;
  --input-bg:#1A1917;
  --border:#34322D;
  --border-soft:#2B2A26;
  --row-divider:#2B2A26;

  --ink:#F1EFE8;
  --sub:#B9B7AE;
  --faint:#8C8B86;
  --faint-icon:#7A7973;
  --dark:#E3E1D9;

  --primary:#FF500F;
  --primary-hover:#FF6A33;
  --primary-soft:#3A2218;
  --primary-border:#5A3222;
  --primary-fg:#0B0B0B;
  --accent-link:#FF8A5B;

  --status-draft-fg:#B9B7AE;  --status-draft-bg:#2E2D29;  --status-draft-dot:#8C8B86;
  --status-review-fg:#E6B45C; --status-review-bg:#3A2E14; --status-review-dot:#E0922F;
  --status-info-fg:#AEBBDD;   --status-info-bg:#272D3B;
  --status-ok-fg:#7BD39A;     --status-ok-bg:#1C3326;    --status-ok-dot:#2E9E5B;
  --status-warn-fg:#E3C56A;   --status-warn-bg:#352C13;  --status-warn-border:#4A3D1A;
  --status-danger-fg:#F08C84; --status-danger-bg:#3A1F1C; --status-danger-border:#55302B;
  --inverse-bg:#E3E1D9;       --inverse-fg:#161410;

  --shadow-card:0 1px 3px rgba(0,0,0,.3);
  --shadow-menu:0 16px 42px rgba(0,0,0,.5);
  --shadow-modal:0 28px 60px rgba(0,0,0,.6);
}
html:has(link[href*="/css/dark/"]) .btn-inverse,
html:has(link[href*="/css/dark/"]) .btn-inverse:hover,
html:has(link[href*="/css/dark/"]) .btn-inverse:focus{ background:var(--dark); border-color:var(--dark); color:#161410; }
html:has(link[href*="/css/dark/"]) .btn-inverse [class^="icon-"]{ color:#161410; }
html:has(link[href*="/css/dark/"]) .btn-group[data-toggle="buttons-radio"] > .btn.active,
html:has(link[href*="/css/dark/"]) .btn-group.tracking > .btn.active{ box-shadow:0 1px 2px rgba(0,0,0,.4); }
html:has(link[href*="/css/dark/"]) .modal-backdrop{ background:#000; opacity:.6; }
html:has(link[href*="/css/dark/"]) .tooltip-inner{ background:#F1EFE8; color:#161410; }
html:has(link[href*="/css/dark/"]) select{
  background-image:linear-gradient(45deg, transparent 50%, var(--sub) 50%), linear-gradient(135deg, var(--sub) 50%, transparent 50%);
}
html:has(link[href*="/css/dark/"]) .navbar .brand img{ background:var(--group-bg); }
html:has(link[href*="/css/dark/"]) .report-metric-pill{ background:none !important; }
html:has(link[href*="/css/dark/"]) .highcharts-background{ fill:transparent; }
html:has(link[href*="/css/dark/"]) .sendy-live-toggle-thumb{ background:var(--ink); }