/* ==========================================================================
   Sendy Redesign — Phase 1: Base Layer
   Loaded AFTER bootstrap.css + all.css. Pure CSS override, zero PHP changes.
   Reference: Loops × Stripe hybrid, Apple Blue accent.
   ========================================================================== */

/* --- Design Tokens ---------------------------------------------------- */
:root {
  /* Surfaces */
  --bg:              #FAFAF9;
  --surface:         #FFFFFF;
  --surface-raised:  #F4F4F3;
  --surface-inset:   #F0EFED;

  /* Text */
  --text-primary:    #1C1917;
  --text-secondary:  #57534E;
  --text-tertiary:   #A8A29E;
  --text-on-accent:  #FFFFFF;
  --text-on-dark:    #E8E8E8;

  /* Accent */
  --accent:          #2563EB;
  --accent-hover:    #1D4ED8;
  --accent-subtle:   #EFF6FF;

  /* Semantic */
  --success:         #16A34A;
  --success-subtle:  #F0FDF4;
  --warning:         #D97706;
  --warning-subtle:  #FFFBEB;
  --error:           #DC2626;
  --error-subtle:    #FEF2F2;

  /* Borders & shadows (Linear-style depth) */
  --border:          rgba(0,0,0,0.06);
  --border-strong:   rgba(0,0,0,0.10);
  --shadow-xs:       0px 1px 1px 0px rgba(0,0,0,0.07);
  --shadow-sm:       0px 1px 4px -1px rgba(0,0,0,0.08);
  --shadow-md:       0px 3px 12px rgba(0,0,0,0.07);
  --shadow-lg:       0px 7px 24px rgba(0,0,0,0.05);
  --shadow-focus:    0 0 0 3px rgba(37,99,235,0.15);
  /* Stacked shadow for elevated buttons */
  --shadow-stack:    0px -1px 1px 0px rgba(0,0,0,0.09) inset,
                     0px 3px 2px 0px rgba(0,0,0,0.04),
                     0px 1px 1px 0px rgba(0,0,0,0.07),
                     0px 0px 1px 0px rgba(0,0,0,0.08);

  /* Radius (concentric: outer - padding = inner) */
  --radius-sm:       6px;
  --radius:          12px;
  --radius-inner:    8px;
  --radius-lg:       16px;
  --radius-full:     9999px;

  /* Spacing (4px grid) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px;

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Fira Mono", Menlo, monospace;
  --leading-tight: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Layout */
  --navbar-h: 56px;
  --sidebar-w: 220px;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.0);
  --ease-press: cubic-bezier(0.2, 0.8, 0.2, 1.0);
  --duration: 150ms;

  /* Glass (Liquid Glass / Apple Tahoe) */
  --glass-blur: 20px;
  --glass-saturation: 180%;
  --glass-bg: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --radius-xl: 16px;
}


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

html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font);
  color: var(--text-primary);
  background: linear-gradient(180deg, #FAFAF9 0%, #F6F5F3 100%) fixed;
  line-height: var(--leading-normal);
  padding-top: calc(var(--navbar-h) + var(--sp-6)); /* navbar + breathing room */
  padding-bottom: var(--sp-8);
}


/* --- Typography ------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--text-primary);
  letter-spacing: -0.015em;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

p { color: var(--text-secondary); }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration) var(--ease-spring);
}
a:hover {
  color: var(--accent-hover);
  text-decoration: none;
}
a:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

small, .muted {
  color: var(--text-tertiary);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-6) 0;
}


/* --- Navbar ----------------------------------------------------------- */
.navbar {
  margin-bottom: 0;
}

.navbar .separator {
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #7C3AED, var(--accent));
  background-size: 200% 100%;
}

.navbar-inner {
  min-height: var(--navbar-h);
  padding: 0 var(--sp-5);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  border: none;
  border-bottom: 1px solid var(--glass-border);
  border-radius: 0;
  box-shadow: var(--shadow-sm), var(--glass-highlight);
  filter: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
}

.navbar-inner > .container-fluid {
  display: flex;
  align-items: center;
  min-height: var(--navbar-h);
}

/* Push pull-right groups to the right in flex container */
.navbar-inner .btn-group.pull-right {
  float: none;
  margin-left: var(--sp-2);
}

/* Auto-push first pull-right to far right */
.navbar-inner .nav-collapse {
  display: none;
}

.navbar-inner .brand {
  margin-right: auto;
}

.navbar-fixed-top {
  border-radius: 0;
}

.navbar-fixed-top .navbar-inner {
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
}

.navbar .brand {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0 var(--sp-4) 0 0;
  margin-left: 0;
  line-height: var(--navbar-h);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.navbar .brand:hover {
  color: var(--text-primary);
  text-decoration: none;
}

.navbar .brand .main-gravatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  margin: 0;
  float: none;
  background: var(--surface-raised);
  object-fit: cover;
}

/* User dropdown */
.navbar .btn-group.pull-right .btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  box-shadow: none;
  line-height: 1.4;
}

.navbar .btn-group.pull-right .btn .caret {
  opacity: 0.7;
}

.navbar .btn-group.pull-right .btn:hover {
  background: var(--surface-raised);
  border-color: var(--border-strong);
  color: var(--text-primary);
  box-shadow: none;
}

/* User dropdown (.btn-inverse) — same style as brand dropdown next to it */
.navbar .btn-group.pull-right .btn.btn-inverse {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.navbar .btn-group.pull-right .btn.btn-inverse:hover {
  background: var(--surface-raised);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* Dropdown menus */
.dropdown-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: var(--sp-1) 0;
  margin-top: var(--sp-1);
  min-width: 180px;
}

.dropdown-menu li > a {
  padding: var(--sp-2) var(--sp-4);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  transition: background var(--duration) var(--ease-spring), color var(--duration) var(--ease-spring), border-color var(--duration) var(--ease-spring), box-shadow var(--duration) var(--ease-spring);
}

.dropdown-menu li > a:hover {
  background: var(--surface-raised);
  color: var(--text-primary);
}

.dropdown-menu li.active > a,
.dropdown-menu li.active > a:hover {
  background: var(--accent-subtle);
  color: var(--accent);
}

.dropdown-menu .divider {
  background-color: var(--border);
  border-bottom: none;
  margin: var(--sp-1) 0;
}


/* --- Sidebar ---------------------------------------------------------- */
.sidebar-nav {
  padding: var(--sp-3) 0;
}

.sidebar-box {
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm), inset 0px 1px 0px rgba(255,255,255,0.80);
  transition: box-shadow var(--duration) var(--ease-spring);
}

.sidebar-box:hover {
  box-shadow: var(--shadow-md), inset 0px 1px 0px rgba(255,255,255,0.80);
}

.nav-list {
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: 0;
}

.nav .nav-header {
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-2) 0 var(--sp-1) 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: none;
}

.nav-list > li > a,
.nav-list .nav-header {
  margin-left: 0;
  margin-right: 0;
  text-shadow: none;
}

.nav-list > li > a {
  padding: var(--sp-2) var(--sp-3);
  font-size: 0.8125rem;
  font-weight: 450;
  color: var(--text-secondary);
  border-radius: var(--radius-inner);
  transition: background var(--duration) var(--ease-spring), color var(--duration) var(--ease-spring), border-color var(--duration) var(--ease-spring), box-shadow var(--duration) var(--ease-spring);
}

.nav-list > li > a:hover {
  background: var(--surface-raised);
  color: var(--text-primary);
}

.nav-list > .active > a,
.nav-list > .active > a:hover {
  background: var(--accent-subtle) !important;
  color: var(--accent) !important;
  text-shadow: none;
  font-weight: 500;
}

.sidebar-box ul li.active a {
  background: var(--accent-subtle);
  color: var(--accent);
  text-shadow: none;
}

.nav-list [class^="icon-"] {
  width: 18px;
  text-align: center;
  margin-right: var(--sp-2);
  opacity: 0.7;
}

.nav-list > .active > a [class^="icon-"],
.nav-list > .active > a:hover [class^="icon-"] {
  opacity: 1;
}

/* Remove icon-white overrides on active — we use accent color now */
.nav-list > .active > a .icon-white {
  background-image: none;
}


/* --- Buttons ---------------------------------------------------------- */
.btn {
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
  transition: background var(--duration) var(--ease-spring), color var(--duration) var(--ease-spring), border-color var(--duration) var(--ease-spring), box-shadow var(--duration) var(--ease-spring), transform 200ms var(--ease-spring);
  line-height: 1.4;
  text-shadow: none;
  background-image: none;
  filter: none;
}

.btn:hover {
  background: var(--surface-raised);
  border-color: var(--border-strong);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  background-position: 0 0;
}

.btn:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn:active {
  background: var(--surface-inset);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
  border-color: var(--border-strong);
  transform: scale(0.97);
}

/* Toggle "selected" state — no scale, just visual */
.btn.active {
  background: var(--surface-inset);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
  border-color: var(--border-strong);
}

.btn.disabled,
.btn[disabled] {
  background: var(--surface-raised);
  color: var(--text-tertiary);
  border-color: var(--border);
  box-shadow: none;
  opacity: 0.6;
}

/* Primary */
.btn-primary {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: transparent;
  box-shadow: var(--shadow-stack);
}

.btn-primary:hover {
  background: var(--accent);
  border-color: transparent;
  color: var(--text-on-accent);
  filter: brightness(108%);
  box-shadow: var(--shadow-stack);
}

.btn-primary:focus {
  box-shadow: var(--shadow-focus);
}

.btn-primary:active,
.btn-primary.active {
  background: #1E40AF;
  border-color: #1E40AF;
}

.btn-primary.disabled,
.btn-primary[disabled] {
  background: var(--accent);
  border-color: var(--accent);
  opacity: 0.5;
}

/* Danger */
.btn-danger {
  background: var(--error);
  color: #fff;
  border-color: var(--error);
}

.btn-danger:hover {
  background: #B91C1C;
  border-color: #B91C1C;
  color: #fff;
}

/* Success */
.btn-success {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}

.btn-success:hover {
  background: #15803D;
  border-color: #15803D;
  color: #fff;
}

/* Inverse — styled as primary action (accent blue) */
.btn-inverse {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: transparent;
  box-shadow: var(--shadow-stack);
}

.btn-inverse:hover {
  background: var(--accent-hover);
  border-color: transparent;
  color: var(--text-on-accent);
  box-shadow: var(--shadow-stack);
}

/* White variant (brand dropdown in navbar) */
.btn-white {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
}

.btn-white:hover {
  background: var(--surface-raised);
  border-color: var(--border-strong);
}

/* Size variants */
.btn-large {
  padding: var(--sp-3) var(--sp-5);
  font-size: 0.875rem;
  border-radius: var(--radius-inner);
}

.btn-small {
  padding: var(--sp-1) var(--sp-2);
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
}

.btn-mini {
  padding: 2px 6px;
  font-size: 0.6875rem;
  border-radius: var(--radius-sm);
}

/* Button groups */
.btn-group > .btn {
  border-radius: 0;
}

.btn-group > .btn:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.btn-group > .btn + .btn {
  margin-left: -1px;
}

/* Single button in btn-group (non-btn siblings present) */
.btn-group > .btn:first-child:last-of-type {
  border-radius: var(--radius-sm);
}


/* --- Forms ------------------------------------------------------------ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
textarea,
select,
.uneditable-input {
  font-family: var(--font);
  font-size: 0.875rem;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration) var(--ease-spring), box-shadow var(--duration) var(--ease-spring);
  line-height: 1.4;
  height: auto;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary);
}

/* File inputs — styled wrapper + button */
input[type="file"] {
  font-family: var(--font);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  padding: var(--sp-4);
  min-height: 57px;
  display: flex;
  align-items: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease-spring), background var(--duration) var(--ease-spring);
}

input[type="file"]:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

input[type="file"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

/* "Choose file" button inside file input */
input[type="file"]::file-selector-button {
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-primary);
  cursor: pointer;
  margin-right: var(--sp-3);
  transition: background var(--duration) var(--ease-spring), border-color var(--duration) var(--ease-spring);
}

input[type="file"]::file-selector-button:hover {
  background: var(--surface-inset);
  border-color: var(--border-strong);
}

select {
  height: 36px;
  padding-right: var(--sp-8);
}

/* Input groups (prepend/append + add-on) — card-style */
.input-prepend,
.input-append {
  display: inline-flex;
  align-items: stretch;
  margin-bottom: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.input-prepend input,
.input-append input {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  margin: 0;
  flex: 1;
}

.input-prepend input:focus,
.input-append input:focus {
  box-shadow: none;
  border: none;
  outline: none;
}

/* Focus on the wrapper instead */
.input-prepend:focus-within,
.input-append:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

.input-prepend .add-on,
.input-append .add-on {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-tertiary);
  background: var(--surface-raised);
  border: none;
  border-left: 1px solid var(--border);
  border-radius: 0;
  white-space: nowrap;
  text-shadow: none;
  line-height: 1.4;
  height: auto;
  min-width: auto;
}

.input-prepend .add-on:first-child {
  border-left: none;
  border-right: 1px solid var(--border);
}

.input-prepend .add-on:first-child + input {
  border-radius: 0;
}

/* Accordion (settings, brand pages) */
.accordion-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
  background: var(--surface);
  overflow: hidden;
}

.accordion-heading {
  background: transparent;
}

.accordion-heading .accordion-toggle {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-primary);
  text-decoration: none;
}

.accordion-heading .accordion-toggle:hover {
  background: var(--surface-raised);
}

.accordion-heading .accordion-toggle h3 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.accordion-body {
  border-top: none;
}

.accordion-body.in,
.accordion-body.collapse.in {
  border-top: 1px solid var(--border);
  padding: var(--sp-4);
}

textarea {
  min-height: 80px;
  resize: vertical;
}

label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--sp-1);
}

.help-block {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: var(--sp-1);
}

.help-inline {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

/* Control groups (Bootstrap 2 form layout) */
.control-group {
  margin-bottom: var(--sp-4);
}

/* Ensure file inputs aren't clipped by parent */
.control-group:has(input[type="file"]),
.controls:has(input[type="file"]) {
  overflow: visible;
  padding-bottom: var(--sp-1);
}

.control-group.error input,
.control-group.error select,
.control-group.error textarea {
  border-color: var(--error);
}

.control-group.error .help-block,
.control-group.error .help-inline {
  color: var(--error);
}

.control-group.success input,
.control-group.success select,
.control-group.success textarea {
  border-color: var(--success);
}


/* --- Tables (Hybrid: Stripe rows + Loops container) ------------------- */
.table {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm), inset 0px 1px 0px rgba(255,255,255,0.80);
  width: 100%;
  margin-bottom: var(--sp-5);
}

.table th {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background-color: var(--surface-raised);
  white-space: nowrap;
}

/* Tablesorter overrides — tablesorter.css loads AFTER redesign in app.php,
   so we need !important to win the cascade.
   Sort arrows moved to LEFT of text (padding-left for arrow space,
   background-position: left center). */
.table.tablesorter-default .tablesorter-header,
.table.tablesorter-default .header,
.table.tablesorter-default thead .sorter-false {
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6) !important;
  background-color: var(--surface-raised) !important;
  background-position: 8px center !important;
  background-size: 10px 8px;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  color: var(--text-tertiary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid var(--border) !important;
  white-space: nowrap;
}

/* Non-sortable columns — no arrow, equal padding */
.table.tablesorter-default thead .sorter-false {
  padding: var(--sp-4) !important;
  background-image: none !important;
}

/* Tablesorter row colors — override tablesorter.css */
.table.tablesorter-default td {
  background-color: transparent !important;
}

.table.tablesorter-default tr.odd > td {
  background-color: transparent !important;
}

.table.tablesorter-default tr.even > td {
  background-color: var(--surface-raised) !important;
}

.table.tablesorter-default tbody > tr:hover > td {
  background-color: var(--accent-subtle) !important;
}

.table td {
  padding: var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.8125rem;
  vertical-align: middle !important;
}

/* Last row — no bottom border (container border handles it) */
.table tbody tr:last-child td {
  border-bottom: none;
}

/* Striped rows — very subtle */
.table-striped tbody > tr:nth-child(even) > td,
.table-striped tbody > tr:nth-child(even) > th {
  background-color: var(--surface-raised);
}

.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
  background-color: transparent;
}

/* Hover */
.table tbody tr:hover td,
.table tbody tr:hover th {
  background-color: var(--accent-subtle) !important;
}

/* Campaign name link */
.table td a {
  font-weight: 500;
  color: var(--text-primary);
}

.table td a:hover {
  color: var(--accent);
}

/* Action icons (duplicate, delete) */
.table td .icon-copy {
  color: var(--text-tertiary);
  font-size: 0.875rem;
}

.table td .icon-trash,
.table th .icon-trash {
  color: var(--error);
  font-size: 0.875rem;
}

.table td a:hover .icon-copy {
  color: var(--accent);
}

/* Trash icon links — always red (destructive action) */
.table td a .icon-trash,
.table th a .icon-trash,
a .icon-trash,
a.icon-trash,
a:hover .icon-trash,
a.icon-trash:hover {
  color: var(--error);
}

/* Bordered variant — already handled by container */
.table-bordered {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.table-bordered th,
.table-bordered td {
  border-left: 1px solid var(--border);
}

.table-bordered th:first-child,
.table-bordered td:first-child {
  border-left: 0;
}


/* --- Alerts ----------------------------------------------------------- */
.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 0.8125rem;
  line-height: var(--leading-normal);
  margin-bottom: var(--sp-4);
  background-image: none;
  text-shadow: none;
}

.alert,
.alert-warning {
  background: var(--warning-subtle);
  border-color: #FDE68A;
  color: #92400E;
}

.alert-error,
.alert-danger {
  background: var(--error-subtle);
  border-color: #FECACA;
  color: #991B1B;
}

.alert-success {
  background: var(--success-subtle);
  border-color: #BBF7D0;
  color: #166534;
}

.alert-info {
  background: var(--accent-subtle);
  border-color: #BFDBFE;
  color: #1E40AF;
}

.alert .close {
  font-size: 1.125rem;
  opacity: 0.5;
  text-shadow: none;
}


/* --- Labels & Badges -------------------------------------------------- */
.label,
.badge {
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  text-shadow: none;
  background-image: none;
  line-height: 1.4;
  display: inline-block;
  white-space: nowrap;
  border: 1px solid transparent;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Labels/badges in table cells — no offset needed, cells handle alignment */
td .label,
td .badge,
th .label,
th .badge {
  top: 0;
}

.label,
.badge {
  background-color: var(--surface-raised);
  color: var(--text-secondary);
  border-color: var(--border);
}

.label-success, .badge-success {
  background-color: var(--success-subtle);
  color: var(--success);
  border-color: rgba(22, 163, 74, 0.2);
}

.label-warning, .badge-warning {
  background-color: var(--warning-subtle);
  color: var(--warning);
  border-color: rgba(217, 119, 6, 0.2);
}

.label-important, .badge-important {
  background-color: var(--error-subtle);
  color: var(--error);
  border-color: rgba(220, 38, 38, 0.2);
}

.label-info, .badge-info {
  background-color: var(--accent-subtle);
  color: var(--accent);
  border-color: rgba(37, 99, 235, 0.2);
}

/* Links inside labels — inherit label color, override inline style="color:white" */
.label a,
.badge a,
.label-info a,
.label-success a,
.label-warning a,
.label-important a {
  color: inherit !important;
  text-decoration: none;
}

.label-inverse, .badge-inverse {
  background-color: var(--text-primary);
  color: #fff;
  border-color: transparent;
}


/* --- Wells & Boxes ---------------------------------------------------- */
.well {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm), inset 0px 1px 0px rgba(255,255,255,0.80);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}

/* Well bar with floated links (subscribers) — contain floats + breathing room */
p.well {
  overflow: hidden;
  line-height: 2.2;
}

/* Badges inside well bar — reduce border overhead so items fit */
p.well .badge {
  border: none;
  padding: 2px 6px;
}

.well-small {
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
}

.dashed-box {
  border: 1px dashed var(--border-strong);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
}

.rounded-dashed-box {
  border: 1px dashed var(--border);
  padding: var(--sp-6) var(--sp-5) var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
}

.grand_total {
  background: var(--accent-subtle);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  padding: var(--sp-3) var(--sp-4);
}


/* --- Layout (container / grid) ---------------------------------------- */
.container-fluid {
  padding-left: var(--sp-6);
  padding-right: var(--sp-6);
}

/* Main content area — Bootstrap 2 span10 */
.row-fluid .span10 {
  /* Let Bootstrap handle width; we just polish spacing */
}

.row-fluid .span2 {
  /* Align sidebar top with h2 in content — skip past .lead + margins */
  margin-top: 70px;
}


/* --- Footer ----------------------------------------------------------- */
footer {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  padding: var(--sp-4) 0;
}

footer a {
  color: var(--text-tertiary);
}

footer a:hover {
  color: var(--text-secondary);
}

hr + footer {
  border-top: none;
}

/* Light/Dark toggle in footer — all.css sets width:2px height:10px, must override */
#footer-mode a {
  width: auto !important;
  height: auto !important;
  min-width: 32px;
  min-height: 28px;
  padding: var(--sp-1) var(--sp-2);
  font-size: 0.8125rem;
  box-shadow: none;
  border-color: var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#footer-mode i {
  float: none;
  margin: 0;
  font-size: 14px;
}


/* --- Icon-only buttons (global fix) ---------------------------------- */
/* Buttons with only an icon and no text need minimum touch target */
.btn > i:only-child,
.btn > span[class^="icon"]:only-child,
.btn > .icon:only-child {
  margin: 0;
  vertical-align: middle;
}


/* --- Campaign RSS button — position next to "Create" dropdown -------- */
/* RSS btn is float:right in HTML but we move it to float:left next to .dropdown */
.campaigns-rss-btn {
  float: left !important;
  width: 35px !important;
  height: 35px !important;
  padding: 0 !important;
  margin: 0 0 30px var(--sp-2) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  line-height: 1.4;
}


/* --- Resume/Stop campaign buttons — inline padding:3px 5px override -- */
#continue-sending-btn,
[id^="continue-sending-btn-"],
#stop-sending-btn,
[id^="stop-sending-btn-"] {
  padding: var(--sp-1) var(--sp-2) !important;
  font-size: 0.75rem !important;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}


/* --- Brands table buttons — all.css sets padding:1px 7px ------------- */
#brands-table td a.btn {
  padding: var(--sp-1) var(--sp-2);
  font-size: 0.6875rem;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  line-height: 1.3;
}


/* Tracking toggles handled by global pill toggle below */


/* --- Autoresponder email option buttons — all.css padding:4px 7px ---- */
ul.ares_email_options li a.btn {
  padding: var(--sp-1) var(--sp-2);
  font-size: 0.6875rem;
  min-height: 24px;
}


/* --- Webhooks log button — all.css explicit positioning -------------- */
#webhooks-log-btn {
  padding: var(--sp-2) var(--sp-3);
}


/* Override all.css #rules-status-btns a { width:35px; height:14px; padding:3px 10px 8px 10px } */
#rules-status-btns a {
  width: auto !important;
  height: auto !important;
  padding: var(--sp-1) var(--sp-3) !important;
}

/* --- Pill Toggle — all btn-group radio toggles (except .tracking & .email-views) */
.btn-group[data-toggle="buttons-radio"]:not(.email-views) {
  display: inline-flex;
  gap: 0;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: none;
}

.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn {
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: var(--sp-1) var(--sp-3);
  font-size: 0.75rem;
  font-weight: 500;
  min-height: 26px;
  width: auto;
  height: auto;
  background: var(--surface);
  color: var(--text-tertiary);
  transition: background var(--duration) var(--ease-spring), color var(--duration) var(--ease-spring);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Hide icons inside toggle buttons (circle, ok, remove-sign) — except footer mode toggle */
.btn-group[data-toggle="buttons-radio"]:not(.email-views):not(#footer-mode) .btn i,
.btn-group[data-toggle="buttons-radio"]:not(.email-views):not(#footer-mode) .btn .icon {
  display: none;
}

/* All active states — font-weight bump + default accent highlight */
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active {
  font-weight: 600;
  background: var(--accent-subtle);
  color: var(--accent);
}

/* Active state — "Yes" / enabled / on → green (overrides default accent) */
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active[id^="enabled-"],
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active[id$="_on"],
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active#cd-enabled,
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active#strict_delete_on,
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active[id$="_tracking_on"],
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active#save_as_template_on,
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active#check_for_broken_links_on {
  background: var(--success-subtle);
  color: var(--success);
}

/* Active state — "No" / disabled / off → subtle grey */
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active[id^="disabled-"],
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active[id$="_off"],
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active#cd-disabled,
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active#strict_delete_off,
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active[id$="_tracking_off"],
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active#save_as_template_off,
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active#check_for_broken_links_off {
  background: var(--surface-raised);
  color: var(--text-secondary);
}

/* Active state — "Anonymously" → accent blue */
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active[id$="_tracking_anon"] {
  background: var(--accent-subtle);
  color: var(--accent);
}

/* Active state — opt-in/option/nav toggles (neutral accent) */
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active#single,
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active#double,
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active#single-unsubscribe,
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active#double-unsubscribe,
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active#this-list,
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active#all-list,
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active#light_btn,
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active#dark_btn,
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active#light_btn_small,
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn.active#dark_btn_small {
  background: var(--accent-subtle);
  color: var(--accent);
}

/* Hover */
.btn-group[data-toggle="buttons-radio"]:not(.email-views) .btn:hover {
  background: var(--surface-raised);
  color: var(--text-primary);
}

/* Nav-style toggles in .well (blacklist, housekeeping) — slightly larger */
.well .btn-group[data-toggle="buttons-radio"] .btn {
  font-size: 0.8125rem;
  padding: var(--sp-2) var(--sp-4);
  min-height: 32px;
}


/* --- Modals (glass treatment) ---------------------------------------- */
.modal {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}

.modal-header {
  border-bottom: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-5);
}

.modal-header h3 {
  font-size: 1.125rem;
  font-weight: 700;
}

.modal-body {
  padding: var(--sp-5);
}

.modal-footer {
  border-top: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-5);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: none;
}

.modal-backdrop {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Prevent Bootstrap's .modal-backdrop.in opacity from double-dimming */
.modal-backdrop.in {
  opacity: 1;
}


/* --- Tabs (Bootstrap 2 tabs) ------------------------------------------ */
/* --- Tabs — pill filter style (InFakt-inspired) ------------------------- */
.nav-tabs {
  border-bottom: none;
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--sp-6);
  gap: var(--sp-2);
  padding: 0;
  margin-bottom: var(--sp-4);
  list-style: none;
}

.nav-tabs > li {
  float: none;
}

.nav-tabs > li > a {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-secondary);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 32px;
  white-space: nowrap;
  margin: 0;
  transition: background var(--duration) var(--ease-spring), color var(--duration) var(--ease-spring), border-color var(--duration) var(--ease-spring);
}

.nav-tabs > li > a:hover {
  background: var(--surface-raised);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* Active tab — accent border + text (Bootstrap .active on li OR Sendy .tab-active on a) */
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus,
.nav-tabs > li > a.tab-active,
.nav-tabs > li > a.tab-active:hover {
  color: var(--accent);
  border: 2px solid var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  background: var(--accent-subtle) !important;
  background-color: var(--accent-subtle) !important;
  font-weight: 500;
}

/* Badges inside filter tabs — smaller pill */
.nav-tabs > li > a > .badge {
  font-size: 0.6875rem;
  padding: 1px 6px;
  min-width: 20px;
  text-align: center;
  line-height: 1.4;
}


/* --- Pagination ------------------------------------------------------- */
.pagination ul {
  box-shadow: none;
  border-radius: var(--radius-sm);
}

.pagination ul > li > a,
.pagination ul > li > span {
  padding: var(--sp-2) var(--sp-3);
  font-size: 0.8125rem;
  border-color: var(--border);
  color: var(--text-secondary);
  background: var(--surface);
}

.pagination ul > li > a:hover {
  background: var(--surface-raised);
  color: var(--text-primary);
}

.pagination ul > .active > a,
.pagination ul > .active > span {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}


/* --- Progress bars ---------------------------------------------------- */
.progress {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--surface-inset);
  box-shadow: none;
  overflow: hidden;
  margin-bottom: var(--sp-4);
}

.progress .bar {
  background: var(--accent);
  border-radius: var(--radius-full);
  box-shadow: none;
  background-image: none;
}

.progress-success .bar { background: var(--success); }
.progress-warning .bar { background: var(--warning); }
.progress-danger .bar  { background: var(--error); }


/* --- Misc Sendy-specific overrides ------------------------------------ */

/* Error text */
.error {
  color: var(--error);
}

/* Gravatar in brand/lists */
.gravatar {
  border-radius: var(--radius-sm);
}

/* Campaign title link */
#set-campaign-title-btn {
  color: var(--text-tertiary);
  font-size: 0.75rem;
}

#set-campaign-title-btn:hover {
  color: var(--accent);
}

/* Report header — Campaign title & Subject styling */
/* "Campaign title:" — parent span bold, link (value) plain */
span:has(> #edit-campaign-title) {
  font-weight: 600;
}

#edit-campaign-title {
  color: var(--text-primary);
  font-weight: 400;
  text-decoration: none;
}

#edit-campaign-title:hover {
  color: var(--accent);
}

/* Pencil icon next to campaign title — slightly smaller, aligned */
#edit-campaign-title .icon {
  font-size: 0.85em;
  vertical-align: baseline;
  position: relative;
  top: 1px;
  color: var(--text-tertiary);
}

/* Subject h3 — "Subject:" bold via <strong>, title plain */
h3:has(> .iframe-preview) {
  font-weight: 400;
}

/* Eye icon next to subject — smaller, aligned */
.iframe-preview {
  color: var(--text-tertiary);
  font-size: 0.85em;
  vertical-align: baseline;
  position: relative;
  top: 1px;
}

.iframe-preview:hover {
  color: var(--accent);
}

/* Attachment list */
#attachments li {
  background: var(--warning-subtle);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-1);
}

/* Brands table */
#brands-table th,
#brands-table td {
  padding: var(--sp-3) var(--sp-2);
}

#brands-table td a.btn {
  font-size: 0.6875rem;
  padding: 2px 8px;
}

/* Last update / segment note */
.last-update, .seg-note {
  color: var(--text-tertiary);
  font-style: normal;
  font-size: 0.75rem;
}

/* Loader */
.loader {
  opacity: 0.5;
}

/* SMTP provider images */
.smtp-provider-img {
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Phase 2: Page-by-page Refinement
   ========================================================================== */


/* --- 2.1 app.php (Dashboard / All Campaigns) ----------------------------- */

/* Override inline margin-top:55px on campaigns table */
.span10 > table.table.responsive[style] {
  margin-top: var(--sp-6) !important;
}

/* Override inline float:left; margin: 0 0 30px 0 on Create dropdown */
.span10 .dropdown[style*="float"] {
  margin-bottom: var(--sp-5) !important;
}

/* H2 spacing on dashboard */
.span10 > h2 {
  margin-bottom: var(--sp-5);
}

/* Modal surface background (Phase 1 set radius/border/shadow, ensure bg) */
.modal {
  background: var(--surface);
}

/* Modal form spacing inside body */
.modal-body .control-group {
  margin-bottom: var(--sp-4);
}

.modal-body .control-group:last-child {
  margin-bottom: 0;
}

/* Modal footer button spacing */
.modal-footer .btn + .btn {
  margin-left: var(--sp-2);
}

/* Subscriber info modal */
#subscriber-info {
  border-radius: var(--radius-lg);
}

/* Tooltip / popover polish */
.tooltip-inner {
  font-family: var(--font);
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-2);
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: normal;
  max-width: 260px;
}

.popover {
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border-color: var(--border);
}

/* Hide old Google Fonts (we use system font stack) */
/* The link tags for Roboto/Questrial are still in HTML but our font-family overrides them */


/* --- 2.2 report.php (Campaign Report) ------------------------------------ */

/* Metric wells row — equal height */
.row-fluid:has(> .span6 > .well) {
  display: flex;
  gap: 0;
}

.row-fluid:has(> .span6 > .well) > .span6 {
  display: flex;
}

.row-fluid:has(> .span6 > .well) > .span6 > .well {
  flex: 1;
}

/* Metric wells — flex container for card layout */
.row-fluid > .span6 > .well {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
}

/* Each h3 inside well = one metric card */
.row-fluid > .span6 > .well > h3 {
  flex: 1;
  min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  margin: 0;
  border-left: 4px solid var(--border-strong);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  /* Reset inline float/clear/margin-top from PHP */
  float: none !important;
  clear: none !important;
  margin-top: 0 !important;
}

/* Metric badge = large display number */
.row-fluid > .span6 > .well > h3 > .badge {
  display: block;
  font-size: 1.5rem !important;
  font-weight: 700;
  padding: 0;
  margin-bottom: var(--sp-1);
  border-radius: 0;
  border: none;
  background: transparent !important;
  line-height: 1.2;
}

/* Semantic colors on badges — text color for large number display */
.row-fluid > .span6 > .well > h3 > .badge-success {
  color: var(--success) !important;
}
.row-fluid > .span6 > .well > h3 > .badge-warning {
  color: var(--warning) !important;
}
.row-fluid > .span6 > .well > h3 > .badge-info {
  color: var(--accent) !important;
}
.row-fluid > .span6 > .well > h3 > .badge-important {
  color: var(--error) !important;
}
.row-fluid > .span6 > .well > h3 > .badge-inverse {
  color: var(--text-tertiary) !important;
  background: transparent !important;
}
.row-fluid > .span6 > .well > h3 > .badge {
  color: var(--text-secondary) !important;
}

/* Colored left border on card — match badge class */
.row-fluid > .span6 > .well > h3:has(> .badge-success) {
  border-left-color: var(--success);
}
.row-fluid > .span6 > .well > h3:has(> .badge-info) {
  border-left-color: var(--accent);
}
.row-fluid > .span6 > .well > h3:has(> .badge-warning) {
  border-left-color: var(--warning);
}
.row-fluid > .span6 > .well > h3:has(> .badge-important) {
  border-left-color: var(--error);
}
.row-fluid > .span6 > .well > h3:has(> .badge-inverse) {
  border-left-color: var(--text-tertiary);
}

/* Secondary .label inside metric card — descriptive text, not pill */
.row-fluid > .span6 > .well > h3 > .label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--text-tertiary);
  background: transparent;
  padding: var(--sp-1) 0 0 0;
  margin-top: var(--sp-1);
  text-transform: none;
  border: none;
  white-space: normal;
  line-height: var(--leading-normal);
}

/* Export icons — keep inline with "not opened" card */
.row-fluid > .span6 > .well > .notopened-export-btns {
  flex: 0 0 auto;
  align-self: center;
  color: var(--text-tertiary);
  font-size: 0.875rem;
  margin-left: calc(-1 * var(--sp-3));
  padding: var(--sp-1);
}

.row-fluid > .span6 > .well > .notopened-export-btns:hover {
  color: var(--accent);
}

/* Chart containers — card frame, aligned and equal height */
#container,
#countries-container,
#container2 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

/* Override inline margins */
#container[style],
#countries-container[style] {
  margin: var(--sp-6) 0 0 0 !important;
}

/* All chart containers — equal height */
#container,
#countries-container,
#container2 {
  min-height: 300px;
  height: 300px;
  overflow: hidden;
}

/* Chart rows — flex for equal height alignment */
.row-fluid:has(> .span4 > #countries-container),
.row-fluid:has(> .span3 > #container2) {
  display: flex;
}

.row-fluid:has(> .span4 > #countries-container) > [class*="span"],
.row-fluid:has(> .span3 > #container2) > [class*="span"] {
  display: flex;
  flex-direction: column;
}

.row-fluid:has(> .span4 > #countries-container) #container,
.row-fluid:has(> .span4 > #countries-container) #countries-container,
.row-fluid:has(> .span3 > #container2) #container,
.row-fluid:has(> .span3 > #container2) #container2 {
  flex: 1;
  height: auto;
  min-height: 300px;
}

/* Links and icons inside table headers — match header size exactly */
.table th a,
.table th a .icon,
.table th a [class^="icon-"] {
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  color: var(--text-tertiary) !important;
  vertical-align: baseline;
  text-decoration: none;
}

/* Subscribers activity chart label — override inline margin:-20px
   Scope to div[style] to avoid matching tablesorter-header-inner inside <th> */
div[style]:has(> .last-activity-info) {
  margin: 0 0 var(--sp-3) 0 !important;
  color: var(--text-secondary) !important;
  font-size: 0.8125rem;
  font-weight: 500;
}

div:has(> .last-activity-info) .icon[style] {
  color: var(--text-tertiary) !important;
}

/* Report section titles */
h2.report-titles {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
  display: inline;
}

/* Export icons next to section titles — vertically centered with h2 */
.report-export {
  color: var(--text-tertiary);
  font-size: 0.875rem;
  margin-left: var(--sp-2);
  transition: color var(--duration) var(--ease-spring);
  vertical-align: middle;
  position: relative;
  top: -6px;
}
.report-export:hover {
  color: var(--accent);
}

.notopened-export-btns {
  color: var(--text-tertiary);
  font-size: 0.875rem;
  margin-left: var(--sp-2);
  transition: color var(--duration) var(--ease-spring);
}
.notopened-export-btns:hover {
  color: var(--accent);
}

/* --- Current brand/project indicator ---------------------------------- */
.lead {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  color: var(--text-secondary);
  margin: var(--sp-5) 0 var(--sp-5) 0;
  padding: 0;
  border: none;
  text-align: center;
}

.lead a {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: var(--sp-2) var(--sp-4);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.lead a:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.lead .top-brand-pencil {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  margin-left: var(--sp-1);
}


/* --- Scrollbar (WebKit) ----------------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}


/* --- Selection -------------------------------------------------------- */
::selection {
  background: var(--accent-subtle);
  color: var(--accent);
}


/* --- Icon cursor fix -------------------------------------------------- */
/* font-awesome.min.css sets cursor:default on icon ::before pseudo-elements.
   This overrides the parent link/button pointer. Fix: inherit from parent. */
[class^="icon-"]::before,
[class*=" icon-"]::before {
  cursor: inherit !important;
}

/* Table-condensed — smaller padding, same container treatment */
.table.table-condensed {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.table.table-condensed th {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  background-color: var(--surface-raised);
  white-space: normal;
}

.table.table-condensed td {
  padding: var(--sp-2) var(--sp-3);
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

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

/* --- 2.3 create.php (Create Campaign) ------------------------------------ */

/* Left panel — card-like container */
form#edit-form > .span3 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
}

/* Input-xlarge inside left panel — full width */
form#edit-form > .span3 input.input-xlarge,
form#edit-form > .span3 textarea.input-xlarge {
  width: 100% !important;
  box-sizing: border-box;
}

/* Template dropdown in left panel */
form#edit-form > .span3 > .dropdown {
  margin-bottom: var(--sp-4);
}

/* Attachment file input — width only (global styles handle the rest) */
form#edit-form > .span3 input[type="file"] {
  width: 100%;
}

/* Right panel — frame the editor area */
form#edit-form > .span9 {
  /* No card wrap — just frame the editor */
}

form#edit-form > .span9 textarea#html {
  width: 100% !important;
  box-sizing: border-box;
  min-height: 400px;
}

/* Bottom form buttons — equal size, aligned */
form#edit-form > .span3 > a.btn,
form#edit-form > .span3 > button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  margin-right: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  min-height: 36px;
  vertical-align: middle;
  box-sizing: border-box;
}

form#edit-form > .span3 > button.btn-inverse {
  margin-right: 0;
}

/* --- Cross-page Consistency Fixes ---------------------------------------- */

/* Badge sizing — default stays small (Phase 1: 0.6875rem) */
/* Report metric badges are overridden in Task 3 (1.5rem via context selector) */
/* No additional rules needed — Phase 1 defaults + Task 3 context overrides handle it */

/* Table links — consistent across all pages */
.table td a,
.table-condensed td a {
  font-weight: 500;
  color: var(--text-primary);
  transition: color var(--duration) var(--ease-spring);
}
.table td a:hover,
.table-condensed td a:hover {
  color: var(--accent);
}

/* Override inline style="width: 300px;" on import modal table */
.modal-body .table-condensed[style] {
  width: 100% !important;
}

/* Inline style overrides — edit/status links in table cells */
.table.responsive td span[style*="color:#737373"],
.table.responsive td a[style*="color:#737373"] {
  color: var(--text-tertiary) !important;
  font-size: 0.75rem !important;
}

/* Inline margin-left on campaign title links */
.table.responsive td a[style*="margin-left"] {
  margin-left: var(--sp-2) !important;
}

/* Subscribers well bar — navigation links use text color, not accent */
p.well a {
  color: var(--text-primary);
  font-weight: 500;
}

p.well a:hover {
  color: var(--accent);
}

/* Duplicate forms inline margin-bottom:0px — keep as-is (already 0) */

/* --- Heroicons Chevron Indicators ---------------------------------------- */

/* Heroicons chevron-down SVG (strokeWidth 1.5) */
/* Path: m19.5 8.25-7.5 7.5-7.5-7.5 */
/* Path up: m4.5 15.75 7.5-7.5 7.5 7.5 */

/* Bootstrap .caret — Heroicons chevron-down as SVG mask */
.caret {
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  border: 0;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  vertical-align: baseline;
  position: relative;
  top: -1px;
  margin-left: 3px;
  opacity: 0.5;
}

.dropdown:hover .caret,
.open .caret,
.btn:hover .caret {
  opacity: 0.8;
}

/* Dropup — Heroicons chevron-up */
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 15.75 7.5-7.5 7.5 7.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 15.75 7.5-7.5 7.5 7.5'/%3E%3C/svg%3E");
}

/* Caret in colored buttons — white via background */
.btn-primary .caret,
.btn-danger .caret,
.btn-success .caret,
.btn-inverse .caret {
  background: #fff;
}

/* Navbar user dropdown — inherit text color */
.navbar .btn-group.pull-right .btn.btn-inverse .caret {
  background: currentColor;
}

/* Tablesorter — Heroicons chevron SVG masks */
.table.tablesorter-default .tablesorter-header,
.table.tablesorter-default .header {
  background-image: none !important;
  padding-left: var(--sp-8) !important;
  position: relative;
}

/* Unsorted: up + down chevrons via ::before + ::after */
.table.tablesorter-default .tablesorter-header::before,
.table.tablesorter-default .header::before,
.table.tablesorter-default .tablesorter-header::after,
.table.tablesorter-default .header::after {
  content: "";
  position: absolute;
  left: 8px;
  width: 10px;
  height: 10px;
  background: var(--text-tertiary);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* Up chevron (top) */
.table.tablesorter-default .tablesorter-header::before,
.table.tablesorter-default .header::before {
  top: calc(50% - 10px);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 15.75 7.5-7.5 7.5 7.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 15.75 7.5-7.5 7.5 7.5'/%3E%3C/svg%3E");
}

/* Down chevron (bottom) */
.table.tablesorter-default .tablesorter-header::after,
.table.tablesorter-default .header::after {
  top: calc(50% + 0px);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
}

/* Ascending — up chevron accent, down dimmed */
.table.tablesorter-default thead .headerSortUp,
.table.tablesorter-default thead .tablesorter-headerAsc,
.table.tablesorter-default thead .tablesorter-headerSortUp {
  background-image: none !important;
  border-bottom-color: var(--border) !important;
}

.table.tablesorter-default thead .headerSortUp::before,
.table.tablesorter-default thead .tablesorter-headerAsc::before,
.table.tablesorter-default thead .tablesorter-headerSortUp::before {
  background: var(--accent);
}

.table.tablesorter-default thead .headerSortUp::after,
.table.tablesorter-default thead .tablesorter-headerAsc::after,
.table.tablesorter-default thead .tablesorter-headerSortUp::after {
  opacity: 0.3;
}

/* Descending — down chevron accent, up dimmed */
.table.tablesorter-default thead .headerSortDown,
.table.tablesorter-default thead .tablesorter-headerDesc,
.table.tablesorter-default thead .tablesorter-headerSortDown {
  background-image: none !important;
  border-bottom-color: var(--border) !important;
}

.table.tablesorter-default thead .headerSortDown::after,
.table.tablesorter-default thead .tablesorter-headerDesc::after,
.table.tablesorter-default thead .tablesorter-headerSortDown::after {
  background: var(--accent);
}

.table.tablesorter-default thead .headerSortDown::before,
.table.tablesorter-default thead .tablesorter-headerDesc::before,
.table.tablesorter-default thead .tablesorter-headerSortDown::before {
  opacity: 0.3;
}

/* Non-sortable — no chevrons */
.table.tablesorter-default thead .sorter-false::before,
.table.tablesorter-default thead .sorter-false::after {
  display: none;
}


/* ============================================
   Heroicons Outline CSS Icon System
   Replaces Font Awesome 3.x glyphs with
   SVG mask icons (Heroicons 2.2.0, 24/outline)
   ============================================ */

/* Base: replace FA glyphs with SVG mask icons */
[class^="icon-"]::before,
[class*=" icon-"]::before {
  content: "" !important;
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  vertical-align: -0.125em;
}

/* --- Status & Validation --- */

.icon-ok::before,
.icon-check::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E");
}

.icon-ok-sign::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
}

.icon-info-sign::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z'/%3E%3C/svg%3E");
}

.icon-warning-sign::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z'/%3E%3C/svg%3E");
}

.icon-exclamation-sign::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z'/%3E%3C/svg%3E");
}

.icon-question-sign::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z'/%3E%3C/svg%3E");
}

/* --- Edit & CRUD --- */

.icon-pencil::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125'/%3E%3C/svg%3E");
}

.icon-edit::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10'/%3E%3C/svg%3E");
}

.icon-trash::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0'/%3E%3C/svg%3E");
}

.icon-remove-sign::before,
.icon-remove-circle::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
}

.icon-remove::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E");
}

.icon-plus-sign::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
}

.icon-plus::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E");
}

.icon-minus-sign::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
}

.icon-minus::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 12h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 12h14'/%3E%3C/svg%3E");
}

/* --- Files & Documents --- */

.icon-download-alt::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3'/%3E%3C/svg%3E");
}

.icon-copy::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75'/%3E%3C/svg%3E");
}

.icon-file-text-alt::before,
.icon-file-text::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z'/%3E%3C/svg%3E");
}

/* --- Time & Calendar --- */

.icon-time::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
}

.icon-calendar::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5'/%3E%3C/svg%3E");
}

/* --- Mail --- */

.icon-envelope-alt::before,
.icon-envelope::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75'/%3E%3C/svg%3E");
}

/* --- Shapes --- */

.icon-circle-blank::before,
.icon-circle::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
}

/* --- Lists & Layout --- */

.icon-align-justify::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5'/%3E%3C/svg%3E");
}

.icon-list-alt::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z'/%3E%3C/svg%3E");
}

.icon-list::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z'/%3E%3C/svg%3E");
}

.icon-reorder::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12'/%3E%3C/svg%3E");
}

/* --- Access & Security --- */

.icon-ban-circle::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18.364 18.364A9 9 0 0 0 5.636 5.636m12.728 12.728A9 9 0 0 1 5.636 5.636m12.728 12.728L5.636 5.636'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18.364 18.364A9 9 0 0 0 5.636 5.636m12.728 12.728A9 9 0 0 1 5.636 5.636m12.728 12.728L5.636 5.636'/%3E%3C/svg%3E");
}

.icon-eye-open::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3C/svg%3E");
}

.icon-eye-close::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88'/%3E%3C/svg%3E");
}

.icon-key::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z'/%3E%3C/svg%3E");
}

.icon-lock::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z'/%3E%3C/svg%3E");
}

/* --- Search & Filter --- */

.icon-filter::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z'/%3E%3C/svg%3E");
}

.icon-search::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/%3E%3C/svg%3E");
}

/* --- Arrows --- */

.icon-arrow-right::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3'/%3E%3C/svg%3E");
}

.icon-arrow-left::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18'/%3E%3C/svg%3E");
}

/* --- Chevrons --- */

.icon-double-angle-down::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 5.25 7.5 7.5 7.5-7.5m-15 6 7.5 7.5 7.5-7.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 5.25 7.5 7.5 7.5-7.5m-15 6 7.5 7.5 7.5-7.5'/%3E%3C/svg%3E");
}

.icon-double-angle-right::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5'/%3E%3C/svg%3E");
}

.icon-double-angle-left::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5'/%3E%3C/svg%3E");
}

.icon-angle-right::before,
.icon-chevron-sign-right::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m8.25 4.5 7.5 7.5-7.5 7.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m8.25 4.5 7.5 7.5-7.5 7.5'/%3E%3C/svg%3E");
}

.icon-chevron-left::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 19.5 8.25 12l7.5-7.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 19.5 8.25 12l7.5-7.5'/%3E%3C/svg%3E");
}

/* --- Social & Sharing --- */

.icon-share-alt::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z'/%3E%3C/svg%3E");
}

.icon-rss::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12.75 19.5v-.75a7.5 7.5 0 0 0-7.5-7.5H4.5m0-6.75h.75c7.87 0 14.25 6.38 14.25 14.25v.75M6 18.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12.75 19.5v-.75a7.5 7.5 0 0 0-7.5-7.5H4.5m0-6.75h.75c7.87 0 14.25 6.38 14.25 14.25v.75M6 18.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z'/%3E%3C/svg%3E");
}

.icon-link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244'/%3E%3C/svg%3E");
}

/* --- Actions --- */

.icon-refresh::before,
.icon-spinner::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99'/%3E%3C/svg%3E");
}

.icon-undo::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3'/%3E%3C/svg%3E");
}

.icon-expand-alt::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15'/%3E%3C/svg%3E");
}

/* --- Navigation & Places --- */

.icon-globe::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418'/%3E%3C/svg%3E");
}

.icon-home::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25'/%3E%3C/svg%3E");
}

/* --- Users --- */

.icon-group::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z'/%3E%3C/svg%3E");
}

.icon-user::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z'/%3E%3C/svg%3E");
}

/* --- Misc Objects --- */

.icon-certificate::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z'/%3E%3C/svg%3E");
}

.icon-moon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z'/%3E%3C/svg%3E");
}

.icon-sun::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z'/%3E%3C/svg%3E");
}

.icon-meh::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.182 16.318A4.486 4.486 0 0 0 12.016 15a4.486 4.486 0 0 0-3.198 1.318M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.182 16.318A4.486 4.486 0 0 0 12.016 15a4.486 4.486 0 0 0-3.198 1.318M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z'/%3E%3C/svg%3E");
}

.icon-magic::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z'/%3E%3C/svg%3E");
}

.icon-wrench::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.75 6.75a4.5 4.5 0 0 1-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 1 1-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 0 1 6.336-4.486l-3.276 3.276a3.004 3.004 0 0 0 2.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.867 19.125h.008v.008h-.008v-.008Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.75 6.75a4.5 4.5 0 0 1-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 1 1-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 0 1 6.336-4.486l-3.276 3.276a3.004 3.004 0 0 0 2.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.867 19.125h.008v.008h-.008v-.008Z'/%3E%3C/svg%3E");
}

.icon-cog::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3C/svg%3E");
}

/* --- Charts & Finance --- */

.icon-bar-chart::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z'/%3E%3C/svg%3E");
}

.icon-money::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z'/%3E%3C/svg%3E");
}

.icon-dollar::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
}

/* --- Auth & Power --- */

.icon-signin::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9'/%3E%3C/svg%3E");
}

.icon-power-off::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9'/%3E%3C/svg%3E");
}

/* --- Media Controls --- */

.icon-pause::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 5.25v13.5m-7.5-13.5v13.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 5.25v13.5m-7.5-13.5v13.5'/%3E%3C/svg%3E");
}

.icon-play-circle::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z'/%3E%3C/svg%3E");
}

/* --- Devices --- */

.icon-mobile-phone::before,
.icon-android::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3'/%3E%3C/svg%3E");
}

/* Apple (computer-desktop as fallback — Heroicons has no brand logos) */
.icon-apple::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25'/%3E%3C/svg%3E");
}

/* --- Additional icon mappings --- */

/* Brands (swatch) */
.icon-th-list::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z'/%3E%3C/svg%3E");
}

/* Housekeeping (arrow-path-rounded-square) */
.icon-leaf::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 0 0-3.7-3.7 48.678 48.678 0 0 0-7.324 0 4.006 4.006 0 0 0-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 0 0 3.7 3.7 48.656 48.656 0 0 0 7.324 0 4.006 4.006 0 0 0 3.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3-3 3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 0 0-3.7-3.7 48.678 48.678 0 0 0-7.324 0 4.006 4.006 0 0 0-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 0 0 3.7 3.7 48.656 48.656 0 0 0 7.324 0 4.006 4.006 0 0 0 3.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3-3 3'/%3E%3C/svg%3E");
}

/* Logout (arrow-right-end-on-rectangle) */
.icon-off::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15M12 9l3 3m0 0-3 3m3-3H2.25'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15M12 9l3 3m0 0-3 3m3-3H2.25'/%3E%3C/svg%3E");
}

/* --- Destructive Action Buttons (Delete) --------------------------------- */

/* Modal confirm "Delete" buttons — PHP uses .btn-primary, override to danger red */
#delete-brand-btn.btn.btn-primary,
#delete-list-btn.btn.btn-primary,
#delete-campaign-btn.btn.btn-primary,
#delete-template-btn.btn.btn-primary,
#delete-rule-btn.btn.btn-primary,
#delete-subscriber-2.btn.btn-primary {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
  box-shadow: var(--shadow-xs);
}

#delete-brand-btn.btn.btn-primary:hover,
#delete-list-btn.btn.btn-primary:hover,
#delete-campaign-btn.btn.btn-primary:hover,
#delete-template-btn.btn.btn-primary:hover,
#delete-rule-btn.btn.btn-primary:hover,
#delete-subscriber-2.btn.btn-primary:hover {
  background: #B91C1C;
  border-color: #B91C1C;
  color: #fff;
}

/* "Delete all" plain .btn buttons — subtle danger style */
#delete-all-btn.btn {
  color: var(--error);
  border-color: var(--error);
}

#delete-all-btn.btn:hover {
  background: var(--error);
  color: #fff;
}