/*
 * Sendy Custom Skin — Tabler Fluid Vertical
 * Dark sidebar, light content area, Inter font
 * Overrides Bootstrap 2.0.4 defaults
 *
 * Injection: <link> tag in includes/header.php after all.css
 * Server path: /home/bitnami/htdocs/css/custom-skin.css
 */

/* ============================================
   FONTS
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================
   CSS VARIABLES (Tabler tokens)
   ============================================ */

:root {
  --skin-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --skin-primary: #0b5faf;
  --skin-primary-light: rgba(6, 111, 209, 0.04);
  --skin-primary-focus: rgba(6, 111, 209, 0.25);
  --skin-success: #2fb344;
  --skin-danger: #d63939;
  --skin-warning: #f59f00;
  --skin-info: #4299e1;

  --skin-body-bg: #f0f2f5;
  --skin-surface: #ffffff;
  --skin-surface-secondary: #f9fafb;
  --skin-surface-tertiary: #f3f4f6;

  --skin-text: #1f2937;
  --skin-text-secondary: #374151;
  --skin-text-muted: #6b7280;
  --skin-text-light: #9ca3af;

  --skin-border: #d1d5db;
  --skin-border-light: #e5e7eb;
  --skin-border-translucent: rgba(4, 32, 69, 0.10);

  --skin-sidebar-bg: #0c0f14;
  --skin-sidebar-text: rgba(255, 255, 255, 0.65);
  --skin-sidebar-active-bg: rgba(255, 255, 255, 0.10);
  --skin-sidebar-active-text: #ffffff;
  --skin-sidebar-header: rgba(255, 255, 255, 0.55);

  --skin-navbar-bg: #ffffff;

  --skin-radius-sm: 4px;
  --skin-radius: 6px;
  --skin-radius-lg: 8px;

  --skin-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --skin-shadow-input: 0 1px 2px rgba(0, 0, 0, 0.05);
  --skin-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --skin-shadow-dropdown: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.05);

  --skin-transition: 0.15s ease;
}

/* ============================================
   BASE / BODY
   ============================================ */

body {
  font-family: var(--skin-font) !important;
  font-size: 14px;
  line-height: 1.5;
  color: var(--skin-text-secondary);
  background-color: var(--skin-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TOP NAVBAR
   ============================================ */

/* Un-fix the navbar — make it part of normal flow */
.navbar-fixed-top {
  position: relative !important;
  margin-bottom: 0;
}

body {
  padding-top: 0 !important;
}

.navbar .separator {
  display: none;
}

.navbar-inner {
  background: var(--skin-navbar-bg) !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 1px solid var(--skin-border-light) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
  min-height: 0 !important;
  padding: 0 20px;
}

.navbar .brand {
  font-family: var(--skin-font) !important;
  font-weight: 600;
  font-size: 14px;
  color: var(--skin-text) !important;
  text-shadow: none !important;
  padding: 4px 16px 4px 12px;
  margin-left: 0;
}

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

.navbar .brand .main-gravatar {
  border-radius: var(--skin-radius) !important;
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

/* User dropdown button */
.navbar .btn-inverse {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-radius: var(--skin-radius) !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  font-family: var(--skin-font) !important;
  font-weight: 500;
  font-size: 13px;
  color: var(--skin-text-secondary) !important;
  padding: 4px 10px;
  text-shadow: none !important;
  transition: all var(--skin-transition);
}

.navbar .btn-inverse:hover {
  background: var(--skin-surface-secondary) !important;
  border-color: rgba(0,0,0,0.06) !important;
}

/* Navbar pull-right — remove Bootstrap float, use flex order */
.navbar .pull-right {
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* Brand dropdown (btn-white) comes visually first, user dropdown (btn-inverse) second */
.navbar .pull-right:has(.btn-white) {
  order: 1;
  margin-left: auto !important;
}

.navbar .pull-right:has(.btn-inverse) {
  order: 2;
  margin-left: 6px !important;
}

/* Brand selector button */
.navbar .btn-white {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-radius: var(--skin-radius) !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  font-family: var(--skin-font) !important;
  font-weight: 500;
  font-size: 13px;
  padding: 4px 10px;
  color: var(--skin-text-secondary) !important;
  text-shadow: none !important;
  transition: all var(--skin-transition);
  margin-right: 8px;
}

.navbar .btn-white:hover {
  border-color: rgba(0,0,0,0.06) !important;
  background: var(--skin-surface-secondary) !important;
}

/* ============================================
   DROPDOWN MENUS
   ============================================ */

.dropdown-menu {
  background: var(--skin-surface);
  border: 1px solid var(--skin-border-light) !important;
  border-radius: var(--skin-radius-lg) !important;
  box-shadow: var(--skin-shadow-dropdown) !important;
  -webkit-box-shadow: var(--skin-shadow-dropdown) !important;
  padding: 4px;
  margin-top: 4px;
}

.dropdown-menu li > a {
  font-family: var(--skin-font) !important;
  font-size: 13px;
  color: var(--skin-text-secondary);
  padding: 8px 12px;
  border-radius: var(--skin-radius-sm);
  transition: background var(--skin-transition);
}

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus {
  background: var(--skin-surface-tertiary) !important;
  background-image: none !important;
  color: var(--skin-text);
}

.dropdown-menu li.active > a {
  background: var(--skin-primary-light) !important;
  color: var(--skin-primary) !important;
}

.dropdown-menu .divider {
  border-color: var(--skin-border-light);
  margin: 4px 0;
}

.dropdown-header {
  font-family: var(--skin-font) !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--skin-text-light) !important;
}

/* ============================================
   SIDEBAR BASE (light card — SES quota, etc.)
   ============================================ */

.sidebar-nav,
.sidebar-box {
  background: var(--skin-surface) !important;
  border-radius: var(--skin-radius-lg) !important;
  box-shadow: var(--skin-shadow-card) !important;
  -webkit-box-shadow: var(--skin-shadow-card) !important;
  border: 1px solid var(--skin-border-light);
  padding: 12px 0 !important;
}

.sidebar-box:hover {
  box-shadow: var(--skin-shadow-card) !important;
  -webkit-box-shadow: var(--skin-shadow-card) !important;
}

/* SES quota panel */
.sidebar-box:not(:has(.nav-list)) {
  padding: 16px !important;
}

.sidebar-box h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--skin-text);
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.sidebar-box p {
  font-family: var(--skin-font) !important;
  color: var(--skin-text-muted);
  font-size: 12px;
  margin-bottom: 8px;
  line-height: 1.6;
}

.sidebar-box p strong {
  color: var(--skin-text-light);
  font-weight: 400;
}

/* SES quota sidebar badges — strip pill style, use prominent plain text */
.sidebar-box:not(:has(.nav-list)) .badge,
.sidebar-box:not(:has(.nav-list)) .label {
  background: transparent !important;
  border: none;
  color: var(--skin-text) !important;
  font-weight: 600;
  font-size: 13px;
  padding: 0;
  font-variant-numeric: tabular-nums;
}

/* ============================================
   NAVIGATION SIDEBAR (DARK — has .nav-list)
   ============================================ */

.sidebar-box:has(.nav-list) {
  background: var(--skin-sidebar-bg) !important;
  border: none;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  padding: 16px 0 8px 0 !important;
  border-radius: 0 !important;
}

.sidebar-box:has(.nav-list):hover {
  box-shadow: 1px 0 0 rgba(0,0,0,0.08) !important;
  -webkit-box-shadow: 1px 0 0 rgba(0,0,0,0.08) !important;
}

.sidebar-nav .nav-list {
  margin: 0;
  padding: 0 14px;
}

.sidebar-nav .nav-list .nav-header {
  font-family: var(--skin-font) !important;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--skin-sidebar-header) !important;
  padding: 16px 10px 4px 10px;
  margin-top: 0;
  text-shadow: none !important;
}

.sidebar-nav .nav-list:first-child .nav-header:first-child {
  padding-top: 4px;
}

.sidebar-nav .nav-list .nav-header:first-child {
  margin-top: 0;
}

.sidebar-nav .nav-list li a {
  font-family: var(--skin-font) !important;
  font-size: 13px;
  font-weight: 400;
  color: var(--skin-sidebar-text) !important;
  padding: 7px 10px;
  border-radius: var(--skin-radius);
  text-shadow: none !important;
  transition: all var(--skin-transition);
  margin: 1px 0;
  border-left: 2px solid transparent;
}

.sidebar-nav .nav-list li a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--skin-sidebar-active-text) !important;
}

.sidebar-box:has(.nav-list) ul li.active a,
.sidebar-nav .nav-list li.active a {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--skin-sidebar-active-text) !important;
  font-weight: 500;
  text-shadow: none !important;
  border-left: 2px solid var(--skin-primary);
  border-radius: var(--skin-radius-sm);
}

/* Sidebar nav icons */
.sidebar-nav .nav-list li a i,
.sidebar-nav .nav-list li a [class^="icon-"],
.sidebar-nav .nav-list li a [class*=" icon-"] {
  color: var(--skin-sidebar-text) !important;
  opacity: 0.6;
  margin-right: 8px;
  width: 16px;
  text-align: center;
}

.sidebar-nav .nav-list li.active a i,
.sidebar-nav .nav-list li.active a [class^="icon-"],
.sidebar-nav .nav-list li.active a [class*=" icon-"],
.sidebar-nav .nav-list li a i.icon-white {
  color: var(--skin-sidebar-active-text) !important;
  opacity: 0.9;
}

.sidebar-nav .nav-list li a:hover i,
.sidebar-nav .nav-list li a:hover [class^="icon-"],
.sidebar-nav .nav-list li a:hover [class*=" icon-"] {
  opacity: 0.9;
}

/* RSS feed URL in nav sidebar */
.sidebar-box:has(.nav-list) .well#feed-url {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--skin-sidebar-text);
  border-radius: var(--skin-radius);
  font-size: 11px;
  margin: 8px 10px;
  padding: 8px 10px;
  word-break: break-all;
  box-shadow: none;
  -webkit-box-shadow: none;
}

/* ============================================
   CONTENT AREA
   ============================================ */

/* Navbar inner container — vertically center all elements */
.navbar-inner .container-fluid {
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
}

.container-fluid {
  padding: 0 28px 20px 0;
}

/* Flexbox layout — sidebar + content */
.container-fluid > .row-fluid {
  display: flex !important;
  align-items: stretch;
  min-height: calc(100vh - 34px);
}

.container-fluid > .row-fluid > [class*="span"] {
  float: none !important;
}

.container-fluid > .row-fluid > .span2 {
  flex-shrink: 0;
  padding-top: 0;
}

.container-fluid > .row-fluid > .span10 {
  flex: 1;
  min-width: 0;
  padding-top: 16px;
  padding-left: 28px;
}

.sidebar-box:has(.nav-list) {
  height: 100%;
  box-sizing: border-box;
}

/* ============================================
   HEADINGS
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--skin-font) !important;
  font-weight: 600;
  color: var(--skin-text);
}

h1 { font-size: 24px; line-height: 32px; }
h2 { font-size: 18px; line-height: 26px; margin-bottom: 16px; }
h3 { font-size: 16px; line-height: 24px; }
h4 { font-size: 14px; line-height: 20px; }

/* Brand name / lead text above page title — make it a breadcrumb */
.lead {
  font-family: var(--skin-font) !important;
  font-size: 12px;
  font-weight: 500;
  color: var(--skin-text-muted);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.lead a {
  color: var(--skin-text-muted) !important;
  text-decoration: none;
}

.lead a:hover {
  color: var(--skin-primary) !important;
  text-decoration: none;
}

.top-brand-pencil {
  font-size: 10px !important;
  color: var(--skin-text-light);
  opacity: 0.6;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  font-family: var(--skin-font) !important;
  font-weight: 500;
  font-size: 13px;
  border-radius: var(--skin-radius) !important;
  padding: 7px 14px;
  text-shadow: none !important;
  box-shadow: var(--skin-shadow-input) !important;
  -webkit-box-shadow: var(--skin-shadow-input) !important;
  background-image: none !important;
  border: 1px solid var(--skin-border-light);
  background: var(--skin-surface);
  color: var(--skin-text-secondary);
  transition: all var(--skin-transition);
  line-height: 1.5;
}

.btn:hover {
  background: var(--skin-surface-secondary) !important;
  border-color: var(--skin-border);
  color: var(--skin-text);
}

.btn-primary {
  background: var(--skin-primary) !important;
  border-color: var(--skin-primary) !important;
  color: #fff !important;
}

.btn-primary:hover {
  background: #0560b5 !important;
  border-color: #0560b5 !important;
}

.btn-success {
  background: var(--skin-success) !important;
  border-color: var(--skin-success) !important;
  color: #fff !important;
}

.btn-success:hover {
  background: #27993a !important;
  border-color: #27993a !important;
}

.btn-danger {
  background: var(--skin-danger) !important;
  border-color: var(--skin-danger) !important;
  color: #fff !important;
}

.btn-danger:hover {
  background: #c03030 !important;
  border-color: #c03030 !important;
}

.btn-warning {
  background: var(--skin-warning) !important;
  border-color: var(--skin-warning) !important;
  color: #fff !important;
}

.btn-info {
  background: var(--skin-info) !important;
  border-color: var(--skin-info) !important;
  color: #fff !important;
}

.btn-inverse {
  background: var(--skin-sidebar-bg) !important;
  border-color: var(--skin-sidebar-bg) !important;
  color: #fff !important;
}

.btn-inverse:hover {
  background: #111827 !important;
}

.btn-link {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  color: var(--skin-primary);
  font-weight: 500;
}

.btn-link:hover {
  color: #0560b5;
}

/* Small buttons */
.btn-mini, .btn-small {
  font-size: 12px;
  padding: 4px 8px;
}

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

.btn-group .btn:first-child {
  border-radius: var(--skin-radius) 0 0 var(--skin-radius) !important;
}

.btn-group .btn:last-child {
  border-radius: 0 var(--skin-radius) var(--skin-radius) 0 !important;
}

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

/* ============================================
   TABLES
   ============================================ */

.table {
  font-family: var(--skin-font) !important;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--skin-surface);
  border: 1px solid var(--skin-border-light);
  border-radius: var(--skin-radius-lg);
  overflow: hidden;
  box-shadow: var(--skin-shadow-card);
  margin-top: 4px;
}

.table th {
  background: var(--skin-surface-secondary) !important;
  color: var(--skin-text-secondary) !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 16px 12px !important;
  border-bottom: 1px solid var(--skin-border) !important;
  border-top: none !important;
}

.table td {
  padding: 12px 16px !important;
  border-top: 1px solid var(--skin-border-light) !important;
  vertical-align: middle;
  font-size: 14px;
  color: var(--skin-text-secondary);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* Right-align all columns by default, left-align first 2 (ID + name) */
.table th,
.table td {
  text-align: right;
}

.table th:first-child,
.table td:first-child,
.table th:nth-child(2),
.table td:nth-child(2) {
  text-align: left;
}

/* ID column — fixed width, no layout shift on hover.
   Only targets cells where the first child is a plain .label (no variant like -success),
   which is the truncated hash ID pattern. Campaign status badges use .label-success. */
.table td:first-child:has(> .label:not([class*="label-"]):first-child) {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Center icon-only action cells — but NOT name/link columns (1st, 2nd) */
.table td:has(> a:only-child):not(:first-child):not(:nth-child(2)) {
  text-align: center !important;
}

.table td:not(:first-child):not(:nth-child(2)) > a:only-child {
  display: block;
  text-align: center;
}

/* Center the matching th for action columns.
   Use nth-last-child since action columns are always at the end,
   but only when the th text is short (single-word action headers). */
.table th.sorter-false:nth-last-child(-n+3) {
  text-align: center !important;
}

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

.table tbody tr:hover td {
  background-color: rgba(6, 111, 209, 0.02);
}

.table-bordered {
  border: 1px solid var(--skin-border-light) !important;
  border-radius: var(--skin-radius-lg);
  overflow: hidden;
}

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

.table-bordered th:first-child,
.table-bordered td:first-child {
  border-left: none !important;
}

/* Table action icons (duplicate, delete, edit) — visible and interactive */
.table td a [class^="icon-"],
.table td a [class*=" icon-"] {
  color: var(--skin-text-muted);
  transition: color var(--skin-transition);
  font-size: 13px;
}

.table td a:hover [class^="icon-"],
.table td a:hover [class*=" icon-"] {
  color: var(--skin-primary);
}

/* Delete icon hover — red */
.table td a[href*="delete"]:hover [class^="icon-"],
.table td a[href*="delete"]:hover [class*=" icon-"],
.table td a .icon-trash:hover,
.table td a:hover .icon-trash {
  color: var(--skin-danger);
}

/* Name/campaign links in table — most prominent element in the row */
.table td a {
  font-weight: 600;
}

/* First and second column links — these are names, make them stand out */
.table td:first-child a,
.table td:nth-child(2) a {
  color: var(--skin-text);
  font-size: 15px;
  font-weight: 600;
}

/* Status badges in the campaign column (e.g. "Sent") — small pill.
   Only match cells that also contain a link (campaign name) after the badge. */
.table td:first-child > .label-success {
  font-size: 10px !important;
  padding: 1px 6px !important;
  vertical-align: middle;
  margin-right: 6px;
  background: rgba(47, 179, 68, 0.10) !important;
  color: #15803d !important;
  border-radius: 10px;
}

/* ============================================
   FORMS
   ============================================ */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="tel"],
textarea,
select {
  font-family: var(--skin-font) !important;
  font-size: 14px;
  color: var(--skin-text-secondary);
  background-color: var(--skin-surface);
  border: 1px solid var(--skin-border) !important;
  border-radius: var(--skin-radius) !important;
  padding: 8px 12px;
  box-shadow: var(--skin-shadow-input);
  -webkit-box-shadow: var(--skin-shadow-input);
  transition: border-color var(--skin-transition), box-shadow var(--skin-transition);
  -webkit-transition: border-color var(--skin-transition), box-shadow var(--skin-transition);
}

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,
textarea:focus,
select:focus {
  border-color: var(--skin-primary) !important;
  box-shadow: 0 0 0 3px var(--skin-primary-focus) !important;
  -webkit-box-shadow: 0 0 0 3px var(--skin-primary-focus) !important;
  outline: none;
}

/* Custom select styling */
select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 32px !important;
}

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

input[disabled],
textarea[disabled],
select[disabled] {
  background-color: var(--skin-surface-tertiary);
  cursor: not-allowed;
  opacity: 0.7;
}

label {
  font-family: var(--skin-font) !important;
  font-weight: 500;
  font-size: 14px;
  color: var(--skin-text);
}

.help-block,
.help-inline {
  font-size: 13px;
  color: var(--skin-text-muted);
}

/* ============================================
   ALERTS
   ============================================ */

.alert {
  font-family: var(--skin-font) !important;
  border-radius: var(--skin-radius) !important;
  padding: 12px 16px;
  font-size: 14px;
  border: 1px solid;
  text-shadow: none !important;
}

.alert-success {
  background: rgba(47, 179, 68, 0.06);
  border-color: rgba(47, 179, 68, 0.15);
  color: #1a6b27;
}

.alert-danger,
.alert-error {
  background: rgba(214, 57, 57, 0.06);
  border-color: rgba(214, 57, 57, 0.15);
  color: #a02424;
}

.alert-warning {
  background: rgba(245, 159, 0, 0.06);
  border-color: rgba(245, 159, 0, 0.15);
  color: #9a6600;
}

.alert-info {
  background: rgba(66, 153, 225, 0.06);
  border-color: rgba(66, 153, 225, 0.15);
  color: #1e5a99;
}

/* ============================================
   WELLS → CARDS
   ============================================ */

.well {
  background: var(--skin-surface);
  border: 1px solid var(--skin-border-light);
  border-radius: var(--skin-radius-lg);
  box-shadow: var(--skin-shadow-card);
  -webkit-box-shadow: var(--skin-shadow-card);
  padding: 16px 20px;
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination ul {
  box-shadow: none;
  -webkit-box-shadow: none;
}

.pagination ul > li > a,
.pagination ul > li > span {
  font-family: var(--skin-font) !important;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--skin-border-light);
  color: var(--skin-text-secondary);
  padding: 6px 12px;
  background: var(--skin-surface);
  transition: all var(--skin-transition);
}

.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
  border-radius: var(--skin-radius) 0 0 var(--skin-radius);
}

.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
  border-radius: 0 var(--skin-radius) var(--skin-radius) 0;
}

.pagination ul > li > a:hover {
  background: var(--skin-surface-tertiary);
  border-color: var(--skin-border);
}

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

.pagination ul > .disabled > a,
.pagination ul > .disabled > span {
  color: var(--skin-text-light);
  background: var(--skin-surface-secondary);
}

/* ============================================
   MODALS
   ============================================ */

.modal {
  border-radius: var(--skin-radius-lg);
  border: none;
  box-shadow: var(--skin-shadow-dropdown);
  -webkit-box-shadow: var(--skin-shadow-dropdown);
  background: var(--skin-surface);
}

.modal-header {
  border-bottom: 1px solid var(--skin-border-light);
  padding: 20px 24px;
}

.modal-header h3 {
  font-family: var(--skin-font) !important;
  font-size: 16px;
  font-weight: 600;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  background: var(--skin-surface-secondary);
  border-top: 1px solid var(--skin-border-light);
  padding: 16px 24px;
  border-radius: 0 0 var(--skin-radius-lg) var(--skin-radius-lg);
}

.modal-backdrop {
  background: #0f172a;
  opacity: 0.3;
}

/* ============================================
   BADGES & LABELS
   ============================================ */

.badge,
.label {
  font-family: var(--skin-font) !important;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--skin-radius-sm);
  text-shadow: none !important;
  letter-spacing: 0.01em;
  vertical-align: middle;
}

/* Default label (no variant class) — muted chip */
.label:not([class*="label-"]) {
  background: var(--skin-surface-tertiary) !important;
  color: var(--skin-text-muted) !important;
  border: 1px solid var(--skin-border-light);
}

/* Inside tables: strip heavy pill backgrounds, use subtle text color instead */
.table .badge,
.table .label {
  background: transparent !important;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: inline;
}

/* Hide trailing text in cells that have BOTH a badge AND trailing text nodes.
   Pattern: "<span class='label'>37.9%</span> 10,288 opened"
   These cells have childNodes.length > 1 (badge span + text node).

   Segs/ars cells have ONLY a badge as content (childNodes.length = 1) — don't hide those.

   We can't count childNodes in CSS, but we CAN distinguish by badge variant:
   - Campaigns opens: .label-success (also used in lists ACTIVE — exclude first 3 cols)
   - Campaigns clicks: .label-info (also used in segs/ars — but segs/ars .label-info
     wraps the entire content, while clicks .label-info is followed by text)

   Safest approach: only hide text in cells where the label is NOT the only child.
   CSS: td:has(.label + *) won't work for text nodes.

   Alternative: target by table context. The campaigns table has "CAMPAIGN" as first th.
   The lists table has "ID" as first th. But we can't scope CSS by th content.

   Pragmatic fix: use :not(:only-child) on the label to detect if there's sibling content.
   Text nodes don't count as CSS children, but we know:
   - Segs/ars: <span class="label-info"><a>1</a></span> (label is only-child of td)
   - Clicks: <span class="label-info">4%</span> text (label is only-child of td too!)

   Both are only-child! The difference is the trailing text node.

   Last resort: scope by column position. In campaigns table, opens is col 4, clicks is col 5.
   In lists table, segs is col 5, ars is col 6. These overlap at position 5.

   Actually — the campaigns table has 7+ columns (campaign, recipients, sent, opens, clicks,
   duplicate, delete). The opens/clicks labels are ALWAYS followed by trailing text.
   The segs/ars labels have the <a> INSIDE the label, never trailing text.

   So: hide font-size on ANY cell with .label-info or .label-success that also has
   text content outside the label. Since we can't detect text nodes, we'll check if
   the label's nextSibling is a text node by checking td's text content length vs
   label's text content length... can't do in CSS.

   FINAL pragmatic approach: Don't use label classes. Instead, target cells whose
   text content includes "opened" or "clicked" — but CSS can't match text content.

   OK — the REAL fix: just scope the font-size:0 to columns 4+ in tables that have
   7+ columns (campaigns/reports tables), and leave 11-column tables (lists) alone. */

/* Hide trailing text ("opened"/"clicked"/raw numbers) in cells where
   the badge does NOT contain a link. Badges with links inside (segs/ars)
   are the entire content and must stay visible. */
.table td:has(.label:not(:has(a))) {
  font-size: 0;
  color: transparent;
}

.table td:has(.label:not(:has(a))) .label {
  font-size: 13px !important;
}

/* Cells where badge DOES contain a link (segs/ars) — keep fully visible */
.table td:has(.label:has(a)) {
  font-size: 14px !important;
  color: var(--skin-text-secondary) !important;
}

/* First 2 columns always visible */
.table td:first-child,
.table td:nth-child(2) {
  font-size: 14px !important;
  color: var(--skin-text-secondary) !important;
}


/* Cells with plain .label (no variant) — segs, ars, ID hashes — always visible */
.table td .label:not([class*="label-"]) {
  font-size: 13px !important;
}

.table td .label:not([class*="label-"]) a {
  font-size: 13px !important;
  color: var(--skin-primary) !important;
}

/* Non-zero segs/ars use .label-info with inline style="color:white" on the link.
   Override that inline white — it's invisible on our transparent badge background. */
.table td .label a[style*="color:white"],
.table td .label a[style*="color: white"] {
  color: var(--skin-primary) !important;
}

.table .badge-success,
.table .label-success {
  color: #15803d !important;
}

.table .badge-warning,
.table .label-warning {
  color: #946200 !important;
}

.table .badge-important,
.table .label-important {
  color: #b82d2d !important;
}

.table .badge-info,
.table .label-info {
  color: #0b5ea8 !important;
}

.table .badge-inverse,
.table .label-inverse {
  color: var(--skin-text) !important;
}

.table .label:not([class*="label-"]),
.table .badge:not([class*="badge-"]) {
  color: var(--skin-text-muted) !important;
  background: transparent !important;
  border: none;
}

/* Outside tables: keep subtle pill style */
.badge-success, .label-success {
  background: rgba(47, 179, 68, 0.10) !important;
  color: #1a6b27 !important;
}

.badge-warning, .label-warning {
  background: rgba(245, 159, 0, 0.10) !important;
  color: #9a6600 !important;
}

.badge-important, .label-important {
  background: rgba(214, 57, 57, 0.10) !important;
  color: #a02424 !important;
}

.badge-info, .label-info {
  background: rgba(66, 153, 225, 0.10) !important;
  color: #1e5a99 !important;
}

.badge-inverse, .label-inverse {
  background: var(--skin-sidebar-bg) !important;
  color: #fff !important;
}

/* ============================================
   TABS & PILLS
   ============================================ */

.nav-tabs {
  border-bottom: 1px solid var(--skin-border-light);
}

.nav-tabs > li > a {
  font-family: var(--skin-font) !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--skin-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  margin-bottom: -1px;
  border-radius: 0;
  transition: all var(--skin-transition);
}

.nav-tabs > li > a:hover {
  background: transparent;
  border-bottom-color: var(--skin-border);
  color: var(--skin-text);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border: none;
  border-bottom: 2px solid var(--skin-primary);
  color: var(--skin-primary);
  background: transparent;
}

/* ============================================
   PROGRESS BARS
   ============================================ */

.progress {
  background: var(--skin-surface-tertiary);
  border-radius: var(--skin-radius);
  box-shadow: none;
  -webkit-box-shadow: none;
  height: 6px;
  overflow: hidden;
}

.progress .bar {
  background: var(--skin-primary);
  border-radius: var(--skin-radius);
  box-shadow: none;
  -webkit-box-shadow: none;
}

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

/* ============================================
   LINKS
   ============================================ */

a {
  color: var(--skin-primary);
  text-decoration: none;
  transition: color var(--skin-transition);
}

a:hover {
  color: #0560b5;
  text-decoration: none;
}

/* ============================================
   BREADCRUMBS
   ============================================ */

.breadcrumb {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 16px 0;
  font-family: var(--skin-font) !important;
  font-size: 13px;
}

.breadcrumb > li {
  color: var(--skin-text-muted);
}

/* ============================================
   MISC / UTILITIES
   ============================================ */

.error {
  color: var(--skin-danger) !important;
}

.grand_total {
  background: rgba(245, 159, 0, 0.06);
  border: 1px solid rgba(245, 159, 0, 0.12);
  border-radius: var(--skin-radius);
  font-weight: 600;
}

.dashed-box {
  border-color: var(--skin-border) !important;
  border-radius: var(--skin-radius);
}

.rounded-dashed-box {
  border-color: var(--skin-border-light) !important;
  border-radius: var(--skin-radius) !important;
}

.gravatar {
  border-radius: var(--skin-radius) !important;
}

/* Hide the empty HR divider before footer */
footer ~ hr,
hr:has(+ footer),
.container-fluid > .row-fluid + hr,
.span10 > hr:last-of-type {
  display: none !important;
}

/* Also hide any HR that's a sibling of footer at any level */
hr {
  border-color: var(--skin-border-light);
  margin: 12px 0;
}

/* Footer — compact and quiet */
footer {
  font-family: var(--skin-font) !important;
  font-size: 12px;
  color: var(--skin-text-light);
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid var(--skin-border-light);
}

.muted,
.thirtytwo,
.last-update,
.seg-note,
.wysiwyg-note {
  color: var(--skin-text-muted) !important;
}

.close {
  font-weight: 300;
  text-shadow: none;
  opacity: 0.4;
}

.close:hover {
  opacity: 0.8;
}

.tooltip-inner {
  font-family: var(--skin-font) !important;
  border-radius: var(--skin-radius);
  font-size: 12px;
  padding: 6px 10px;
  background: #1e293b;
}

.popover {
  border-radius: var(--skin-radius-lg);
  border: 1px solid var(--skin-border-light);
  box-shadow: var(--skin-shadow-dropdown);
  -webkit-box-shadow: var(--skin-shadow-dropdown);
}

.popover-title {
  font-family: var(--skin-font) !important;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid var(--skin-border-light);
  border-radius: var(--skin-radius-lg) var(--skin-radius-lg) 0 0;
  background: var(--skin-surface-secondary);
}

#attachments li {
  background: var(--skin-surface-tertiary);
  border-radius: var(--skin-radius);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 767px) {
  /* Reset flex layout — stack sidebar above content */
  .container-fluid > .row-fluid {
    flex-direction: column !important;
    min-height: auto !important;
  }

  .container-fluid > .row-fluid > [class*="span"] {
    width: 100% !important;
  }

  .container-fluid > .row-fluid > .span10 {
    padding-left: 0 !important;
    padding-top: 12px;
  }

  .container-fluid {
    padding: 0 !important;
  }

  /* Sidebar — ultra-compact horizontal bar */
  .sidebar-nav,
  .sidebar-box {
    border-radius: 0 !important;
    margin-bottom: 0;
  }

  .sidebar-box:has(.nav-list) {
    height: auto !important;
    padding: 6px 0 4px !important;
    border-radius: 0 !important;
  }

  /* Hide section headers on mobile — items are self-explanatory */
  .sidebar-nav .nav-list .nav-header {
    display: none !important;
  }

  /* Sidebar nav items — very compact to minimize scroll-past */
  .sidebar-nav .nav-list {
    padding: 0 12px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }

  .sidebar-nav .nav-list .nav-header {
    padding: 6px 8px 1px !important;
    font-size: 9px;
    width: 100%;
  }

  .sidebar-nav .nav-list li {
    flex: none;
  }

  .sidebar-nav .nav-list li a {
    font-size: 12px;
    padding: 4px 10px;
    border-left: none !important;
    margin-right: 4px;
    margin-bottom: 2px;
  }

  /* Content area needs padding */
  .container-fluid > .row-fluid > .span10 {
    padding: 12px 16px !important;
  }

  /* Tables — horizontal scroll */
  .table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Primary action buttons — full width on mobile */
  .btn-primary,
  .btn:has(.icon-plus),
  .btn:has(.icon-plus-sign) {
    display: block !important;
    width: 100% !important;
    margin-bottom: 16px;
    text-align: center;
    box-sizing: border-box;
  }

  /* Search — full width, attached input+button */
  .input-append,
  .form-search,
  form:has(input[type="text"]):has(.btn) {
    display: flex !important;
    width: 100% !important;
    margin-bottom: 16px;
    box-sizing: border-box;
  }

  .input-append input[type="text"],
  .form-search input[type="text"],
  form input[type="text"],
  .input-medium,
  .input-large,
  .input-xlarge,
  .search-query {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .input-append .btn,
  .form-search .btn {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Page title — stronger hierarchy */
  h1 { font-size: 22px; margin-bottom: 20px; }
  h2 { font-size: 18px; margin-bottom: 16px; }

  /* Opt-in toggle buttons — cleaner pill style */
  .btn-group[data-toggle="buttons-radio"] .btn {
    font-size: 12px !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    margin-right: 6px;
  }

  /* Navbar — compact for mobile */
  .navbar-inner .container-fluid {
    padding: 0 12px !important;
  }

  .navbar .brand {
    font-size: 13px;
    padding: 4px 8px 4px 4px;
  }

  .navbar .btn-inverse,
  .navbar .btn-white {
    font-size: 11px !important;
    padding: 3px 6px !important;
  }

  .navbar .brand .main-gravatar {
    width: 18px;
    height: 18px;
    margin-right: 6px;
  }

  /* Hide the "Add a new list" / "Create" top buttons — the inline form is always visible below */
  #new-list-btn,
  .btn:has(.icon-plus-sign) {
    display: none !important;
  }

  /* Stack form cards vertically on mobile */
  .well {
    padding: 12px !important;
  }

  #list-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
  }

  #list-form label,
  #list-form input[type="text"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #list-form .btn {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* SES quota sidebar — stack cleanly */
  .sidebar-box:not(:has(.nav-list)) {
    border-radius: 0 !important;
    margin: 0 0 8px 0 !important;
    padding: 12px !important;
  }

  .sidebar-box:not(:has(.nav-list)) h3 {
    font-size: 12px;
  }

  .sidebar-box:not(:has(.nav-list)) p {
    font-size: 11px;
    margin-bottom: 4px;
  }
}

/* ============================================
   ICON OVERRIDES
   ============================================ */

[class^="icon-"],
[class*=" icon-"] {
  font-size: 14px;
}

/* ============================================
   SENDY-SPECIFIC OVERRIDES
   ============================================ */

#set-campaign-title-btn {
  color: var(--skin-text-light);
  font-family: var(--skin-font) !important;
  font-size: 12px;
}

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

#brands-table th,
#brands-table td {
  font-family: var(--skin-font) !important;
}

/* Quick links icon buttons — borderless, clean */
#brands-table td .btn {
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: transparent !important;
  padding: 4px 6px !important;
  color: var(--skin-text-muted) !important;
}

#brands-table td .btn:hover {
  background: var(--skin-surface-tertiary) !important;
  color: var(--skin-primary) !important;
  border-radius: var(--skin-radius-sm) !important;
}

/* Infinity symbols — muted instead of bright green */
#brands-table .label-success {
  color: var(--skin-text-muted) !important;
  font-size: 16px;
}

.smtp-provider-img {
  border-radius: var(--skin-radius-sm) !important;
}

.btn-group.tracking a {
  font-family: var(--skin-font) !important;
}

/* Rules page — Enabled Yes/No toggle buttons */
[data-toggle="buttons-radio"].btn-group {
  display: inline-flex !important;
  border: 1px solid var(--skin-border-light);
  border-radius: var(--skin-radius) !important;
  overflow: hidden;
}

[data-toggle="buttons-radio"] .btn {
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: var(--skin-surface) !important;
  font-size: 12px !important;
  padding: 4px 12px !important;
  border-radius: 0 !important;
  color: var(--skin-text-muted) !important;
  white-space: nowrap;
  line-height: 1.4;
}

[data-toggle="buttons-radio"] .btn.active {
  background: var(--skin-primary) !important;
  color: #fff !important;
}

[data-toggle="buttons-radio"] .btn + .btn {
  border-left: 1px solid var(--skin-border-light) !important;
}

[data-toggle="buttons-radio"] .btn .icon {
  font-size: 10px;
  margin-right: 2px;
}

.seg_select_multiselect_list {
  border: 1px solid var(--skin-border);
  border-radius: var(--skin-radius);
}

.ares-email-table tbody tr td a {
  color: var(--skin-primary);
}

/* Primary action buttons — "Add new" / "Create" buttons with plus icon */
.btn:has(.icon-plus),
.btn:has(.icon-plus-sign) {
  background: var(--skin-primary) !important;
  border-color: var(--skin-primary) !important;
  color: #fff !important;
}

.btn:has(.icon-plus):hover,
.btn:has(.icon-plus-sign):hover {
  background: #0560b5 !important;
  border-color: #0560b5 !important;
}

.btn:has(.icon-plus) [class^="icon-"],
.btn:has(.icon-plus-sign) [class^="icon-"],
.btn:has(.icon-plus) [class*=" icon-"],
.btn:has(.icon-plus-sign) [class*=" icon-"] {
  color: #fff !important;
}

/* Search input group — attached input + button */
.input-append {
  display: inline-flex !important;
  align-items: stretch;
}

.input-append input[type="text"] {
  border-radius: var(--skin-radius) 0 0 var(--skin-radius) !important;
  border-right: none !important;
  height: auto;
}

.input-append .btn,
.input-append .add-on {
  border-radius: 0 var(--skin-radius) var(--skin-radius) 0 !important;
  margin-left: -1px;
}

.input-prepend .btn,
.input-prepend .add-on {
  border-radius: var(--skin-radius) 0 0 var(--skin-radius) !important;
}

.input-prepend input[type="text"] {
  border-radius: 0 var(--skin-radius) var(--skin-radius) 0 !important;
}

/* Search input height fix */
.span10 input[type="text"] {
  height: auto;
}

/* RSS icon */
.btn i.icon-rss {
  color: var(--skin-text-muted);
}

/* Footer — toned down version badge */
footer, .footer-left, .footer-right {
  font-family: var(--skin-font) !important;
  font-size: 12px;
  color: var(--skin-text-light);
}

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

footer .label-success {
  font-size: 10px;
  padding: 1px 6px;
  opacity: 0.7;
}

#footer-mode a {
  color: var(--skin-text-light);
}

.pie_open_rate {
  opacity: 0.7;
}

.open_rate_no {
  font-family: var(--skin-font) !important;
  font-size: 14px;
}

/* ============================================
   LOGIN PAGE
   ============================================ */

body > .container-fluid > div > div,
#login-form {
  font-family: var(--skin-font) !important;
}

#login-form h2,
.container-fluid h2 {
  font-family: var(--skin-font) !important;
}

#login-form .btn,
form .btn-primary {
  font-family: var(--skin-font) !important;
}