/* ═══════════════════════════════════════════════════════════
   Design tokens  (inspired by Linear / Stripe / shadcn-ui)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Sidebar — near-black (zinc-950) */
  --sb-bg:          #09090b;
  --sb-border:      #27272a;
  --sb-text:        #a1a1aa;
  --sb-hover-bg:    rgba(255,255,255,0.05);
  --sb-active-bg:   rgba(255,255,255,0.09);
  --sb-active-text: #fafafa;
  --sb-active-bar:  #818cf8;   /* indigo-400 */

  /* Brand */
  --indigo:       #6366f1;     /* primary     */
  --indigo-dark:  #4f46e5;
  --emerald:      #10b981;     /* success     */
  --emerald-dark: #059669;
  --rose:         #f43f5e;     /* danger      */
  --rose-dark:    #e11d48;
  --amber:        #f59e0b;

  /* Soft status badges */
  --badge-on-bg:    #f0fdf4;
  --badge-on-text:  #15803d;
  --badge-on-ring:  #bbf7d0;
  --badge-off-bg:   #fff1f2;
  --badge-off-text: #be123c;
  --badge-off-ring: #fecdd3;

  /* Surface */
  --page-bg:  #f9fafb;
  --card-bg:  #ffffff;
  --border:   #e4e4e7;
  --muted-bg: #f4f4f5;

  /* Text */
  --tx-main:  #09090b;
  --tx-muted: #71717a;
  --tx-soft:  #a1a1aa;

  --radius:   8px;
  --font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--tx-main);
  background: var(--page-bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--indigo); }
a:hover { color: var(--indigo-dark); }

/* ═══════════════════════════════════════════════════════════
   Sidebar
   ═══════════════════════════════════════════════════════════ */
.sidebar {
  background: var(--sb-bg);
  width: 220px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid var(--sb-border);
  z-index: 100;
  scrollbar-width: thin;
  scrollbar-color: #3f3f46 transparent;
}

/* Brand */
.sb-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 18px 16px 16px;
  border-bottom: 1px solid var(--sb-border);
  color: #fafafa;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.sb-logo {
  width: 28px; height: 28px;
  background: #6366f1;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}

/* Nav */
.sb-nav { flex: 1; padding: 8px; }
.sb-nav ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  background: transparent !important;
}
.sb-nav li { margin: 1px 0 !important; }
.sb-nav li a {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--sb-text) !important;
  padding: 8px 10px !important;
  font-size: 0.83rem;
  font-weight: 500;
  text-decoration: none !important;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.sb-nav li a:hover:not(.active) {
  background: var(--sb-hover-bg) !important;
  color: #e4e4e7 !important;
}
.sb-nav li a.active {
  background: var(--sb-active-bg) !important;
  color: var(--sb-active-text) !important;
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--sb-active-bar);
}
.sb-icon { width: 14px; text-align: center; font-size: 12px; opacity: 0.7; flex-shrink: 0; }
.sb-nav li a.active .sb-icon { opacity: 1; }

/* Plan widget */
.sb-plan {
  margin: 0 8px 6px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--sb-border);
  border-radius: 8px;
  font-size: 11px;
  flex-shrink: 0;
}
.sb-plan-badge {
  font-weight: 700;
  font-size: 11px;
  color: #a1a1aa;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sb-plan-badge.sb-plan-pro { color: #38bdf8; }
.sb-plan-badge.sb-plan-biz { color: #a78bfa; }
.sb-plan-limits { color: #71717a; margin-bottom: 7px; line-height: 1.4; }
.sb-plan-credits { color: #71717a; }
.sb-upgrade-btn {
  display: block;
  background: #6366f1;
  color: #fff !important;
  text-align: center;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11px;
  text-decoration: none !important;
  transition: background 0.15s;
}
.sb-upgrade-btn:hover { background: #4f46e5 !important; }

/* User footer */
.sb-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-top: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.sb-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #3f3f46;
  color: #e4e4e7;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}
.sb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sb-user-info { flex: 1; min-width: 0; }
.sb-username {
  color: #d4d4d8;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-plan-small {
  color: #52525b;
  font-size: 10px;
  font-weight: 500;
}
.sb-chevron {
  font-size: 10px;
  color: #52525b;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.sb-user {
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 0;
  position: relative;
  user-select: none;
}
.sb-user:hover { background: rgba(255,255,255,0.04); }

/* User popup menu */
.sb-user-menu {
  display: none;
  position: fixed;
  background: #18181b;
  border: 1px solid #3f3f46;
  border-radius: 10px;
  padding: 4px;
  z-index: 9999;
  box-shadow: 0 -8px 24px rgba(0,0,0,.4);
  width: 204px;
}
.sb-user-menu.open { display: block; }
.sb-user-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  color: #a1a1aa !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background 0.12s, color 0.12s;
}
.sb-user-menu-item i { width: 14px; text-align: center; font-size: 12px; }
.sb-user-menu-item:hover { background: rgba(255,255,255,0.06); color: #fafafa !important; }
.sb-user-menu-danger:hover { background: rgba(244,63,94,0.12) !important; color: #f43f5e !important; }
.sb-user-menu-divider { height: 1px; background: #27272a; margin: 4px 0; }

/* Legacy — keep for pages that still use .sidebar ul directly */
.sidebar ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 8px !important;
  width: 100% !important;
  background: transparent !important;
}
.sidebar li { margin: 1px 0 !important; }
.sidebar li a {
  display: flex; align-items: center; gap: 8px;
  color: var(--sb-text) !important;
  padding: 8px 10px !important;
  font-size: 0.83rem; font-weight: 500;
  text-decoration: none; border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.sidebar li a:hover:not(.active) { background: var(--sb-hover-bg) !important; color: #e4e4e7 !important; }
.sidebar li a.active { background: var(--sb-active-bg) !important; color: var(--sb-active-text) !important; font-weight: 600; box-shadow: inset 2px 0 0 var(--sb-active-bar); }

/* ═══════════════════════════════════════════════════════════
   Content area
   ═══════════════════════════════════════════════════════════ */
.content {
  margin-left: 220px;
  padding: 16px 12px 16px 14px;
  min-height: 100vh;
}

.content h1, .content h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tx-main);
  margin-bottom: 14px;
  letter-spacing: -0.3px;
}

/* Full-width table wrapper — replaces Bootstrap .container */
.page-table-wrap {
  width: 100%;
  max-width: none;
}

/* Keep table column widths stable when filtering rows.
   With table-layout: fixed, columns are sized from the header row (or first row)
   and ignore the visible content widths — so hiding rows won't reflow columns. */
#reposts-table,
#ch-table {
  table-layout: fixed;
  width: 100%;
}

/* Cell content wraps within the fixed column width instead of overflowing. */
#reposts-table td,
#ch-table td {
  word-break: break-word;
  overflow-wrap: anywhere;
}


/* ═══════════════════════════════════════════════════════════
   Buttons  — shadcn-style
   ═══════════════════════════════════════════════════════════ */
.btn {
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  transition: all 0.15s;
  letter-spacing: 0.1px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-primary {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
  box-shadow: 0 1px 2px rgba(99,102,241,0.25);
}
.btn-primary:hover {
  background: var(--indigo-dark);
  border-color: var(--indigo-dark);
  color: #fff;
  box-shadow: 0 2px 6px rgba(99,102,241,0.35);
}

.btn-success {
  background: var(--emerald);
  border-color: var(--emerald);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16,185,129,0.2);
}
.btn-success:hover {
  background: var(--emerald-dark);
  border-color: var(--emerald-dark);
  color: #fff;
}

.btn-danger {
  background: var(--rose);
  border-color: var(--rose);
  color: #fff;
}
.btn-danger:hover {
  background: var(--rose-dark);
  border-color: var(--rose-dark);
  color: #fff;
}

/* Secondary = white + border (shadcn ghost style) */
.btn-secondary {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--tx-main);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn-secondary:hover {
  background: var(--muted-bg);
  border-color: #d4d4d8;
  color: var(--tx-main);
}

.btn-outline-dark {
  border-color: var(--border);
  color: var(--tx-muted);
  background: transparent;
}
.btn-outline-dark:hover {
  background: var(--muted-bg);
  border-color: #d4d4d8;
  color: var(--tx-main);
}

.btn-outline-success {
  border-color: var(--emerald);
  color: var(--emerald);
  background: transparent;
}
.btn-outline-success:hover {
  background: var(--emerald);
  color: #fff;
}

.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }

/* ── Toolbar ──────────────────────────────────────────────── */
.top-buttons-container {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════
   Table
   ═══════════════════════════════════════════════════════════ */
.table {
  background: var(--card-bg);
  font-size: 13px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  border: 1px solid var(--border);
  margin-bottom: 0;
}

.table thead th {
  background: #18181b;          /* zinc-900 */
  color: #a1a1aa;
  border: none;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: 11px 14px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.table thead th:hover { color: #e4e4e7; }
.table thead th:first-child { border-radius: 0; }

.table tbody tr { transition: background 0.1s; }

.table tbody tr:hover td { background-color: #f9fafb !important; }

.table td {
  padding: 9px 14px;
  vertical-align: middle;
  border-color: #f4f4f5;
}

.table-striped tbody tr:nth-of-type(odd) td { background-color: #fdfdfd; }

.table-bordered { border-color: var(--border) !important; }

/* ── Status badge (soft pill) ─────────────────────────────── */
.repost-status {
  cursor: pointer;
  text-align: center;
}

.status-active {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: var(--badge-on-bg);
  color: var(--badge-on-text);
  border: 1px solid var(--badge-on-ring);
}

.status-inactive {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: var(--badge-off-bg);
  color: var(--badge-off-text);
  border: 1px solid var(--badge-off-ring);
}

/* ── Execution result ─────────────────────────────────────── */
.repost-execution-result {
  font-size: 11.5px !important;
  line-height: 1.4;
  word-break: break-word;
}

/* ── Table filter inputs & selects ───────────────────────── */
.table-filter-row th {
  background: #f8f8fb !important;
  padding: 5px 6px !important;
}

.table-filter-input,
.table-filter-select {
  font-size: 12px;
  border: 1px solid #e4e4e7;
  border-radius: 5px;
  padding: 4px 7px;
  width: 100%;
  background: #fff;
  color: var(--tx-main);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.table-filter-select {
  padding-right: 22px;
  appearance: auto;
}
.table-filter-input:focus,
.table-filter-select:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}

/* ── Channel cell (avatar + name) ────────────────────────── */
.channel-cell {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* ═══════════════════════════════════════════════════════════
   Overlay / Modal
   ═══════════════════════════════════════════════════════════ */
.overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84%;
  max-width: 980px;
  height: 86vh;
  background: var(--card-bg);
  border-radius: 12px;
  /* gradient top accent */
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%) 1;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.06),
    0 8px 16px rgba(0,0,0,0.08),
    0 24px 48px rgba(0,0,0,0.12);
  z-index: 9999;
  display: none;
  /* overflow: visible — allows Choices.js dropdown to render outside the modal bounds */
}

/* backdrop */
.overlay::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: -1;
  pointer-events: none;
}

/* ── Overlay header ───────────────────────────────────────── */
.overlay-header {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  border-radius: 12px 12px 0 0;  /* compensates for overlay overflow: visible */
}

.overlay-header-icon {
  color: var(--indigo);
  font-size: 14px;
  opacity: 0.85;
}

.overlay-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tx-main);
  flex: 1;
  letter-spacing: -0.2px;
}

.close-button {
  font-size: 18px;
  line-height: 1;
  color: var(--tx-soft);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.close-button:hover { background: var(--muted-bg); color: var(--tx-main); }

/* ── Overlay body (scrollable) ────────────────────────────── */
.overlay-content {
  overflow-y: auto;
  padding: 0 20px 80px;
  height: calc(86vh - 54px);
  background: var(--card-bg);
  scrollbar-width: thin;
  scrollbar-color: #e4e4e7 transparent;
}
.overlay-content::-webkit-scrollbar { width: 5px; }
.overlay-content::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 3px; }

/* ── Overlay footer ───────────────────────────────────────── */
.buttons-container {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--page-bg);
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 12px 12px;
}

/* ═══════════════════════════════════════════════════════════
   Pill tabs  (shadcn / Radix UI style)
   ═══════════════════════════════════════════════════════════ */
.nav-tabs {
  display: flex;
  align-items: center;
  background: var(--muted-bg);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  border: none !important;
  margin: 14px 0 4px;
}

.nav-tabs .nav-item.nav-link,
.nav-tabs .nav-link {
  border: none !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  font-size: 13px;
  font-weight: 500;
  color: var(--tx-muted) !important;
  background: transparent !important;
  margin: 0;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.nav-tabs .nav-item.nav-link:hover,
.nav-tabs .nav-link:hover {
  color: var(--tx-main) !important;
  background: rgba(255,255,255,0.5) !important;
}

.nav-tabs .nav-item.nav-link.active,
.nav-tabs .nav-link.active {
  background: var(--card-bg) !important;
  color: var(--tx-main) !important;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) !important;
}

.nav-tabs .nav-link i { font-size: 11px; opacity: 0.75; }

/* ═══════════════════════════════════════════════════════════
   Form section cards
   ═══════════════════════════════════════════════════════════ */
.form-section {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 12px;
  border: 1px solid var(--border);
}

.form-section-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--tx-soft);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.form-section-title i { color: var(--indigo); font-size: 10px; }

/* ═══════════════════════════════════════════════════════════
   Form controls
   ═══════════════════════════════════════════════════════════ */
.form-control,
.form-select,
select.form-select,
select.form-control {
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #d4d4d8;
  background: var(--card-bg);
  color: var(--tx-main);
  transition: border-color 0.15s, box-shadow 0.15s;
  padding: 6px 10px;
  height: auto;
}

.form-control::placeholder { color: #a1a1aa; }

.form-control:focus,
.form-select:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
  outline: none;
}

label {
  font-size: 12px;
  font-weight: 600;
  color: #52525b;
  margin-bottom: 4px;
  display: inline-block;
}

.form-label-sm {
  font-size: 11px;
  font-weight: 700;
  color: var(--tx-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 4px;
}

/* ── Switch accent ────────────────────────────────────────── */
.form-check-input:checked {
  background-color: var(--indigo);
  border-color: var(--indigo);
}

.form-check-label {
  font-size: 13px;
  color: var(--tx-main);
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════
   Chip checkboxes  (allowed types)
   ═══════════════════════════════════════════════════════════ */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tx-muted);
  background: var(--card-bg);
  margin: 0;
  transition: all 0.15s;
  user-select: none;
}

.chip-checkbox input[type="checkbox"] { display: none; }

.chip-checkbox:has(input:checked) {
  border-color: var(--indigo);
  background: rgba(99,102,241,0.07);
  color: var(--indigo);
  font-weight: 600;
}

.chip-checkbox i { font-size: 11px; }

.chip-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tx-muted);
  margin-bottom: 6px;
}
.chip-group-label small {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}

.chip-orthogonal {
  border-style: dashed;
}
.chip-orthogonal:has(input:checked) {
  border-style: solid;
  border-color: var(--teal, #14b8a6);
  background: rgba(20,184,166,0.07);
  color: var(--teal, #14b8a6);
}

/* ── Schedule picker ─────────────────────────────────────── */
/* ── Schedule table cell ─────────────────────────────────────── */
.sched-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-height: 72px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.sched-cell::-webkit-scrollbar { width: 3px; }
.sched-cell::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.sched-cell-tag {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(99,102,241,0.08);
  color: var(--indigo);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Schedule picker ─────────────────────────────────────────── */
.sched-input {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--tx);
  background: var(--card-bg);
}
.sched-input:focus {
  border-color: var(--indigo);
  outline: none;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

.sched-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
}

.sched-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 12px;
  border-radius: 20px;
  background: rgba(99,102,241,0.08);
  border: 1.5px solid var(--indigo);
  color: var(--indigo);
  font-size: 12.5px;
  font-weight: 600;
  user-select: none;
}
.sched-tag-remove {
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: 0.6;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}
.sched-tag-remove:hover { opacity: 1; }

.sched-tag.sched-tag-recurring {
  background: rgba(20,184,166,0.08);
  border-color: var(--teal, #14b8a6);
  color: var(--teal, #14b8a6);
}

/* ── Repost active toggle ─────────────────────────────────── */
.repost-active-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 600;
  border: 2px solid #e4e4e7;
  background: #f4f4f5;
  color: #71717a;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.repost-active-toggle input[type="checkbox"] { display: none; }

/* track */
.active-toggle-track {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 12px;
  background: #d1d5db;
  flex-shrink: 0;
  transition: background 0.2s;
}
.active-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: left 0.2s;
}

/* text spans */
.atl-off { display: inline; }
.atl-on  { display: none; }

/* checked state */
.repost-active-toggle:has(input:checked) {
  border-color: #16a34a;
  background: #f0fdf4;
  color: #15803d;
}
.repost-active-toggle:has(input:checked) .active-toggle-track {
  background: #16a34a;
}
.repost-active-toggle:has(input:checked) .active-toggle-thumb {
  left: 21px;
}
.repost-active-toggle:has(input:checked) .atl-off { display: none; }
.repost-active-toggle:has(input:checked) .atl-on  { display: inline; }

.chip-checkbox input[type="radio"] { display: none; }

.chip-checkbox.chip-radio {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 14px;
}

.chip-checkbox:has(input[type="radio"]:checked) {
  border-color: var(--indigo);
  background: rgba(99,102,241,0.07);
  color: var(--indigo);
  font-weight: 600;
}

.badge-forward-only {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 8px;
  background: #fde68a;
  color: #92400e;
  margin-left: 3px;
  vertical-align: middle;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════
   Filter / Replacement row containers
   ═══════════════════════════════════════════════════════════ */
.rows-container {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 0 2px;
  scrollbar-width: thin;
  scrollbar-color: #e4e4e7 transparent;
}
.rows-container::-webkit-scrollbar { width: 5px; }
.rows-container::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 3px; }

/* ── Row items inside the containers ─────────────────────── */
.rows-container .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-items: center;
  flex-wrap: nowrap;
  padding: 2px 0;
}

/* override Bootstrap p-0: add small right gutter except on last col */
.rows-container .row > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 5px !important;
  flex-shrink: 0;
}

.rows-container .row > [class*="col-"]:last-child {
  padding-right: 0 !important;
}

/* action column: keep remove + save buttons side by side */
.rows-container .row > [class*="col-"]:last-child {
  display: flex !important;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

/* inputs & selects inside rows */
.rows-container .form-control,
.rows-container select.form-select,
.rows-container select {
  background-color: #fff !important;
  font-size: 12.5px;
  height: 32px;
  padding: 4px 8px;
  border-color: #e4e4e7;
}

.rows-container .form-control:focus,
.rows-container select:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.12);
}

/* small action buttons */
.rows-container .btn {
  padding: 4px 9px;
  font-size: 12px;
  height: 32px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   Choices.js — channel search selects
   ═══════════════════════════════════════════════════════════ */

/* Outer wrapper */
.form-section .choices {
  margin-bottom: 8px;
}
.form-section .choices:last-of-type { margin-bottom: 0; }

/* The visible "select box" */
.form-section .choices__inner {
  border: 1px solid #d4d4d8 !important;
  border-radius: 6px !important;
  background: #fff !important;
  min-height: 38px !important;
  padding: 5px 10px 5px 10px !important;
  font-size: 13px !important;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-section .choices.is-focused .choices__inner,
.form-section .choices.is-open    .choices__inner {
  border-color: var(--indigo) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
  outline: none;
}

/* Selected item label */
.form-section .choices__list--single {
  padding: 0 !important;
}
.form-section .choices__list--single .choices__item {
  font-size: 13px;
  color: var(--tx-main);
}
.form-section .choices__placeholder {
  color: #a1a1aa !important;
  opacity: 1 !important;
}

/* Chevron arrow */
.form-section .choices[data-type*="select-one"]::after {
  border-color: #a1a1aa transparent transparent !important;
  right: 12px !important;
}
.form-section .choices[data-type*="select-one"].is-open::after {
  border-color: transparent transparent var(--indigo) !important;
}

/* ── Dropdown panel ───────────────────────────────────────── */
.form-section .choices__list--dropdown {
  z-index: 99999 !important;
  border: 1px solid #d4d4d8 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.13), 0 2px 6px rgba(0,0,0,0.06) !important;
  background: #fff !important;
  overflow: hidden;
  margin-top: 4px !important;
  min-width: 100%;
}

/* Search input inside dropdown */
.form-section .choices__list--dropdown .choices__input {
  font-size: 13px !important;
  padding: 8px 12px !important;
  border: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  background: #fff !important;
  color: var(--tx-main) !important;
  outline: none !important;
  width: 100% !important;
  box-shadow: none !important;
}
.form-section .choices__list--dropdown .choices__input::placeholder {
  color: #a1a1aa;
}

/* Options list */
.form-section .choices__list--dropdown .choices__list {
  max-height: 200px;
  overflow-y: auto;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: #e4e4e7 transparent;
}

/* Each option */
.form-section .choices__list--dropdown .choices__item {
  font-size: 13px !important;
  padding: 8px 14px !important;
  color: var(--tx-main) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.form-section .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: rgba(99,102,241,0.07) !important;
  color: var(--indigo) !important;
}
.form-section .choices__list--dropdown .choices__item.is-selected {
  background: rgba(99,102,241,0.04) !important;
  font-weight: 600;
}

/* No results */
.form-section .choices__list--dropdown .has-no-results .choices__item {
  color: var(--tx-muted) !important;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   Misc
   ═══════════════════════════════════════════════════════════ */
.editable-row td { background-color: #fefce8 !important; }

#filter-id     { width: 40px; }
#filter-state  { width: 60px; }
#filter-date   { width: 150px; }
#filter-result { width: 70px; }

/* ═══════════════════════════════════════════════════════════
   Admin area
   ═══════════════════════════════════════════════════════════ */
.admin-stats-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.admin-stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 28px;
  min-width: 130px;
  text-align: center;
  flex: 1;
}

.admin-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--indigo);
  line-height: 1;
}

.admin-stat-label {
  font-size: 12px;
  color: var(--tx-muted);
  margin-top: 6px;
}

.admin-section {
  margin-bottom: 28px;
}

.admin-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--tx-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.admin-input-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 4px;
}

.admin-table th,
.admin-table td {
  font-size: 13px;
  vertical-align: middle;
}

.badge-admin {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(99,102,241,0.13);
  color: var(--indigo);
  border: 1px solid rgba(99,102,241,0.3);
  letter-spacing: 0.03em;
}

.badge-user {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(100,116,139,0.1);
  color: var(--tx-muted);
  border: 1px solid var(--border);
}

.btn-xs {
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.6;
  border-radius: 5px;
}

/* ═══════════════════════════════════════════════════════════
   Posts page
   ═══════════════════════════════════════════════════════════ */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.posts-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
}

/* Wrapper container: hosts the swipe-to-delete BG layer + the card itself */
.post-card-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #fee2e2;     /* matches delete BG so corners look clean */
  touch-action: pan-y;     /* permette swipe orizzontale custom */
}
.post-card-delete-bg {
  position: absolute; inset: 0;
  background: #ef4444; color: #fff;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 24px;
  border: none; cursor: pointer;
  font-size: 24px;
  z-index: 0;
}
.post-card-delete-bg:hover { background: #dc2626; }

/* Whole card has fixed height; click anywhere → opens editor.
   Sits on top of the delete BG; slides left on swipe (mobile). */
.post-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: block !important;
  gap: 8px;
  cursor: pointer;
  transition: box-shadow .15s, transform .25s ease-out;
  height: 380px !important;
  max-height: 380px !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  z-index: 1;
  will-change: transform;
}
.post-card > * { margin-bottom: 8px; }
.post-card > *:last-child { margin-bottom: 0; }
.post-card::-webkit-scrollbar { width:8px; height:8px; }
.post-card::-webkit-scrollbar-thumb { background:rgba(0,0,0,.25); border-radius:4px; }
.post-card::-webkit-scrollbar-track { background:rgba(0,0,0,.04); }
.post-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); }

/* Corner × delete: visibile on hover (desktop); always-visible on touch */
.post-card-x {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px;
  border: none; border-radius: 50%;
  background: rgba(239, 68, 68, 0.10); color: #ef4444;
  font-size: 18px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .15s, background .15s;
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
}
.post-card:hover .post-card-x { opacity: 1; }
.post-card-x:hover { background: #ef4444; color: #fff; }
@media (hover: none) {
  .post-card-x { opacity: 0.6; }
}

/* Send CTA — bottone unico e ben visibile in fondo alla card */
.post-send-cta {
  background: #10b981 !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}
.post-send-cta:hover { background: #059669 !important; }
.post-send-cta i { margin-right: 5px; }

.post-card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.post-card-title { font-weight: 700; font-size: 14px; flex:1; }
.post-card-date  { font-size: 11px; color: var(--tx-muted); white-space:nowrap; }

.post-card-media { border-radius:8px; overflow:hidden; max-height:120px; }
.post-card-media img { width:100%; object-fit:cover; max-height:120px; }
.post-card-media-icon { padding:10px; background:rgba(99,102,241,.07); border-radius:8px;
  font-size:12px; color:var(--indigo); text-align:center; }

.post-card-album { position:relative; }
.post-card-album .album-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2px;
  max-height:160px; overflow:hidden; border-radius:8px; }
.post-card-album .album-cell { position:relative; aspect-ratio:1/1; overflow:hidden;
  background:rgba(99,102,241,.07); }
.post-card-album .album-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.post-card-album .album-icon { display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; color:var(--indigo); font-size:20px; }
.post-card-album .album-more { position:absolute; inset:0; background:rgba(0,0,0,.55);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:600; }
.post-card-album .album-badge { position:absolute; top:6px; right:6px;
  background:rgba(0,0,0,.6); color:#fff; padding:2px 8px; border-radius:10px;
  font-size:11px; font-weight:500; }

.post-card-text { font-size:13px; color:var(--tx-main); line-height:1.5;
  white-space:pre-wrap; word-wrap:break-word; }
.tg-spoiler-text { background:currentColor; border-radius:3px; color:inherit; cursor:default; }
.tg-custom-emoji { background:rgba(167,139,250,0.15); padding:0 3px; border-radius:3px; }

.post-card-btns { margin-top:6px; display:flex; flex-direction:column; gap:4px; }
.post-card-btn-row { display:flex; gap:4px; }
.post-card-btn { flex:1; text-align:center; font-size:12px; color:#2ca5e0; font-weight:500;
  background:#fff; border:1px solid #d0eaf8; border-radius:6px; padding:4px 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.post-card-stats { display:flex; gap:6px; flex-wrap:wrap; }
.ps-badge { font-size:11px; padding:2px 7px; border-radius:12px; font-weight:600; }
.ps-sent    { background:rgba(22,163,74,.1);  color:#16a34a; }
.ps-pending { background:rgba(234,179,8,.12); color:#b45309; }
.ps-failed  { background:rgba(220,38,38,.1);  color:#dc2626; }

.post-card-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }

/* post tabs (kept for back-compat) */
.post-tabs { display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--border); padding-bottom:0; }
.post-tab { background:none; border:none; padding:8px 14px; font-size:13px; font-weight:500;
  color:var(--tx-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.post-tab.active { color:var(--indigo); border-bottom-color:var(--indigo); }
.post-tab-panel { display: block; }
.post-label { font-size:11px; font-weight:600; color:var(--tx-muted); text-transform:uppercase;
  letter-spacing:.04em; display:block; margin-bottom:4px; }

/* schedule history */
.sched-hist-row { display:flex; gap:10px; align-items:center; padding:5px 0;
  border-bottom:1px solid var(--border); font-size:12px; flex-wrap:wrap; }
.sched-hist-ch   { font-weight:600; }
.sched-hist-time { color:var(--tx-muted); }

/* ── Post editor v2 ──────────────────────────────────── */
.pe2-title-input { width:100%; border:none; border-bottom:1px solid var(--border);
  padding:5px 0 4px; font-size:13px; margin-bottom:12px; outline:none;
  background:transparent; color:var(--tx-muted); }
.pe2-title-input:focus { border-bottom-color:var(--indigo); color:var(--tx-main); }
.pe2-title-input::placeholder { font-style:italic; color:var(--tx-soft); }

.pe2-type-bar { display:flex; gap:5px; flex-wrap:wrap; justify-content:center; margin-bottom:12px; }
.pe2-type-btn { border:1px solid var(--border); background:var(--card-bg); border-radius:20px;
  padding:4px 13px; font-size:12px; cursor:pointer; color:var(--tx-muted); white-space:nowrap;
  transition:all .15s; }
.pe2-type-btn:hover:not(.active) { border-color:var(--indigo); color:var(--indigo); }
.pe2-type-btn.active { background:var(--indigo); color:#fff; border-color:var(--indigo); }

.pe2-caption-ta { width:100%; border:none; outline:none; resize:none; font-size:13.5px;
  line-height:1.5; font-family:var(--font); background:transparent; padding:0; min-height:32px; }
.pe2-caption-ta::placeholder { color:#bbb; font-style:italic; }
#edit-text-rich:empty::before { content: attr(data-placeholder); color:#bbb; font-style:italic; pointer-events:none; }
#edit-text-rich .pe2-custom-emoji { background:rgba(167,139,250,0.15); padding:0 2px; border-radius:3px; }

/* Album grid (inside bubble) */
.pe2-album-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.pe2-album-cell { aspect-ratio:1; background:#c8d0d8; position:relative; overflow:hidden;
  border-radius:4px; }
.pe2-album-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.pe2-album-add { display:flex; align-items:center; justify-content:center; font-size:22px;
  color:#90a4ae; cursor:pointer; border:2px dashed #90a4ae; background:transparent; }
.pe2-album-add:hover { background:rgba(44,165,224,.06); border-color:#2ca5e0; color:#2ca5e0; }
.pe2-album-rm { position:absolute; top:3px; right:3px; width:18px; height:18px;
  border-radius:50%; background:rgba(0,0,0,.55); color:#fff; border:none; cursor:pointer;
  font-size:10px; display:flex; align-items:center; justify-content:center; padding:0; z-index:1; }

/* Formatting toolbar */
.pe2-fmt-bar { display:flex; gap:3px; flex-wrap:wrap; margin-top:8px; }
.pe2-fmt-btn { border:1px solid var(--border); background:var(--muted-bg); border-radius:4px;
  padding:3px 8px; font-size:12px; cursor:pointer; color:var(--tx-main); line-height:1.6;
  min-width:28px; text-align:center; }
.pe2-fmt-btn:hover { background:var(--indigo); color:#fff; border-color:var(--indigo); }

/* pe2 tab bar */
.pe2-tabs { display:flex; border-bottom:1px solid var(--border); }
.pe2-tab  { flex:1; padding:10px 6px; font-size:13px; background:none; border:none;
            border-bottom:2px solid transparent; cursor:pointer; color:var(--tx-muted);
            transition:color .15s, border-color .15s; }
.pe2-tab.active { color:var(--indigo); border-bottom-color:var(--indigo); font-weight:500; }
.pe2-tab:hover:not(.active) { color:var(--tx-main); }

/* History toggle */
.pe-history-toggle { background:none; border:none; width:100%; text-align:left;
  padding:8px 2px; font-size:12px; font-weight:600; color:var(--tx-muted);
  cursor:pointer; display:flex; align-items:center; gap:6px;
  border-top:1px solid var(--border); margin-top:8px; }
.pe-history-toggle:hover { color:var(--tx-main); }
.pe-history-list { padding:6px 0 2px; }

/* ── Telegram interactive editor (shared: channels welcome/goodbye + posts editor) ── */
.tg-chat-bg { background:#d4dde8; border-radius:10px; padding:10px 12px; }
.tg-msg-wrap { display:flex; flex-direction:column; align-items:flex-start; max-width:90%; }
.tg-bubble { background:#fff; border-radius:12px 12px 12px 3px; box-shadow:0 1px 4px rgba(0,0,0,.18); overflow:hidden; min-width:130px; width:100%; }
.tg-media-zone { cursor:pointer; }
.tg-media-ph { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:18px 12px; color:#90a4ae; border-bottom:2px dashed #cfd8dc; transition:background .15s; }
.tg-media-ph:hover { background:#f0f4f8; }
.tg-media-ph i { font-size:28px; }
.tg-media-ph span { font-size:11.5px; }
.tg-media-zone.drag-over .tg-media-ph { background:#eef4f8; border-color:#90caf9; }
.tg-img-remove { position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; border:none; cursor:pointer; font-size:12px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0; }
.tg-bubble-body { padding:7px 10px 5px; }
.tg-editable { font-size:13.5px; line-height:1.5; min-height:24px; outline:none; word-break:break-word; caret-color:#2ca5e0; }
.tg-editable:empty::before { content:attr(data-ph); color:#bbb; font-style:italic; font-size:13px; pointer-events:none; display:block; }
.tg-bubble-time { text-align:right; font-size:10.5px; color:#9db4c0; margin-top:4px; }
.tg-read { color:#4fc3f7; }
.tg-pv-btns { width:100%; margin-top:4px; }
.tg-btn-editor { margin-bottom:4px; background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.13); overflow:hidden; transition:box-shadow .15s; }
.tg-btn-editor:hover, .tg-btn-editor:focus-within { box-shadow:0 1px 3px rgba(44,165,224,.35), 0 0 0 1.5px #2ca5e0; }
.tg-btn-text-row { display:flex; align-items:stretch; }
.tg-pv-btn-text { flex:1; color:#2ca5e0; font-size:13px; text-align:center; padding:8px 28px 8px 28px; outline:none; min-height:36px; display:flex; align-items:center; justify-content:center; cursor:text; position:relative; }
.tg-pv-btn-text::after { content:"\f303"; font-family:"Font Awesome 5 Free"; font-weight:900; position:absolute; left:8px; top:50%; transform:translateY(-50%); font-size:10px; color:#cbd5e1; opacity:0; transition:opacity .15s; pointer-events:none; }
.tg-btn-editor:hover .tg-pv-btn-text::after,
.tg-pv-btn-text:focus::after { opacity:1; color:#2ca5e0; }
.tg-pv-btn-text:focus { background:#f0f9ff; }
.tg-pv-btn-text:empty::before { content:'Testo bottone'; color:#90caf9; font-style:italic; pointer-events:none; }
.tg-btn-del { width:30px; border:none; border-left:1px solid #f1f5f9; background:transparent; color:#ef4444; cursor:pointer; font-size:14px; }
.tg-btn-del:hover { background:#fef2f2; }
.tg-btn-url-row { display:flex; align-items:center; gap:5px; padding:3px 8px 5px; background:#f0f9ff; border-top:1px solid #e0f2fe; }
.tg-btn-url-row i { color:#93c5fd; font-size:10px; flex-shrink:0; }
.tg-btn-url { border:none; background:transparent; font-size:11.5px; color:#2ca5e0; flex:1; min-width:0; outline:none; cursor:text; }
.tg-btn-url:focus { background:#e0f2fe; padding:2px 4px; border-radius:3px; }
.tg-btn-url::placeholder { color:#bfdbfe; }
.tg-add-btn-row { margin-top:6px; background:transparent; border:1.5px dashed #90a4ae; border-radius:8px; color:#607d8b; font-size:12px; padding:5px 0; cursor:pointer; width:100%; text-align:center; transition:all .15s; }
.tg-add-btn-row:hover { background:#f8fafc; border-color:#455a64; color:#37474f; }

/* Welcome/Goodbye preview: narrower, taller, scrollable internally */
.cdm-wg-preview {
  max-width: 320px;
  margin: 0 auto;
  max-height: 480px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cdm-wg-preview::-webkit-scrollbar { width: 6px; }
.cdm-wg-preview::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 3px; }

/* pe2 button entry – committed pill */
.pe2-btn-entry { margin-bottom:4px; }
.pe2-btn-pill { display:flex; align-items:center; gap:6px; padding:7px 10px; background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.13); }
.pe2-btn-pill-icon { color:#2ca5e0; font-size:10px; flex-shrink:0; }
.pe2-btn-pill-text { flex:1; color:#2ca5e0; font-size:13px; text-align:center; font-weight:500; }
.pe2-btn-edit, .pe2-btn-rm { background:none; border:none; cursor:pointer; padding:2px 5px; color:#94a3b8; font-size:11px; line-height:1; }
.pe2-btn-edit:hover { color:var(--indigo); }
.pe2-btn-rm:hover { color:#ef4444; }

/* pe2 button editor popup */
.pe2-btn-popup-overlay { position:fixed; inset:0; z-index:20000; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; }
.pe2-btn-popup-box { background:var(--card-bg); border-radius:12px; width:320px; max-width:92%;
  box-shadow:0 8px 32px rgba(0,0,0,.28); }
.pe2-btn-popup-header { display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--border); font-weight:500; font-size:14px; }
.pe2-btn-popup-close { background:none; border:none; cursor:pointer; color:var(--tx-muted); font-size:15px; line-height:1; padding:2px 4px; }
.pe2-btn-popup-close:hover { color:var(--tx-main); }
.pe2-btn-popup-body { padding:16px; }
.pe2-btn-popup-field { margin-bottom:12px; }
.pe2-btn-popup-field:last-child { margin-bottom:0; }
.pe2-btn-popup-field label { display:block; font-size:11.5px; color:var(--tx-muted); margin-bottom:4px; }
.pe2-btn-popup-field input { width:100%; border:1px solid var(--border); border-radius:7px;
  padding:7px 10px; font-size:13px; background:var(--card-bg); color:var(--tx-main); outline:none; }
.pe2-btn-popup-field input:focus { border-color:var(--indigo); }
.pe2-btn-popup-footer { display:flex; justify-content:flex-end; gap:8px;
  padding:10px 16px 14px; border-top:1px solid var(--border); }

/* History toggle (posts editor) */
.pe-history-toggle { background:none; border:none; width:100%; text-align:left;
  padding:8px 2px; font-size:12px; font-weight:600; color:var(--tx-muted);
  cursor:pointer; display:flex; align-items:center; gap:6px; border-top:1px solid var(--border); margin-top:4px; }
.pe-history-toggle:hover { color:var(--tx-main); }
.pe-history-list { padding:6px 0 2px; }

/* ═══════════════════════════════════════════════════════════
   Generic modal overlay (modal-overlay / modal-box)
   ═══════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-box {
  background: var(--card-bg);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

.modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--page-bg);
}

.modal-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--tx-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.modal-close:hover { background: var(--muted-bg); }

/* ── Replacement rule builder ─────────────────────────────────────── */
.repl-type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.repl-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--tx-muted);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}
.repl-type-chip:hover { border-color: var(--indigo); color: var(--indigo); background: rgba(99,102,241,.06); }
.repl-type-chip.active { border-color: var(--indigo); background: var(--indigo); color: #fff; font-weight: 600; }

.repl-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 4px;
}
.repl-tb-btn {
  padding: 2px 7px;
  border: 1px solid var(--border);
  background: var(--muted-bg);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1.5;
  color: var(--tx-main);
  transition: background .1s, border-color .1s, color .1s;
}
.repl-tb-btn:hover { background: rgba(99,102,241,.08); border-color: var(--indigo); color: var(--indigo); }

.repl-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
}
.repl-card-view {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  flex-wrap: nowrap;
}
.repl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(99,102,241,.1);
  color: var(--indigo);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.repl-desc {
  flex: 1;
  font-size: 12.5px;
  color: var(--tx-main);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repl-desc mark {
  background: rgba(99,102,241,.12);
  color: var(--tx-main);
  border-radius: 3px;
  padding: 1px 4px;
}
.repl-desc em { color: var(--tx-muted); font-style: normal; }
.repl-desc code { background: var(--muted-bg); padding: 1px 4px; border-radius: 3px; font-size: 11px; }

.repl-edit-btn {
  padding: 3px 7px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  color: var(--tx-muted);
  font-size: 11px;
  transition: border-color .15s, color .15s, background .15s;
  flex-shrink: 0;
}
.repl-edit-btn:hover { border-color: var(--indigo); color: var(--indigo); background: rgba(99,102,241,.06); }

.repl-card .remove-replacement {
  padding: 3px 7px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  color: var(--tx-muted);
  font-size: 11px;
  transition: border-color .15s, color .15s, background .15s;
  flex-shrink: 0;
}
.repl-card .remove-replacement:hover { border-color: var(--rose); color: var(--rose); background: rgba(244,63,94,.06); }

.repl-card-edit {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--muted-bg);
}

/* ── AI tab ───────────────────────────────────────────── */
.ai-info-box {
  font-size: 0.82em;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 8px 12px;
}
.ai-info-box code {
  background: #dbeafe;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.95em;
}
.ai-example-label {
  font-size: 0.78em;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-chip {
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #3730a3;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.78em;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.ai-chip:hover {
  background: #e0e7ff;
  border-color: #a5b4fc;
}

/* ── Paginazione – link messaggio ─────────────────────── */
.msg-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75em;
  color: #2563eb;
  text-decoration: none;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
}
.msg-link-btn:hover {
  background: #dbeafe;
  color: #1d4ed8;
  text-decoration: none;
}

/* ── Send-mode pill toggle ────────────────────────────── */
.send-mode-pill {
  display: inline-flex;
  background: var(--muted-bg, #f4f4f5);
  border: 1px solid var(--border, #e4e4e7);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.smp-option {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}
.smp-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.smp-option > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  border-radius: 6px;
  font-size: 0.85em;
  font-weight: 500;
  color: var(--text-muted, #71717a);
  transition: background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
  user-select: none;
}
.smp-option input:checked ~ span {
  background: #fff;
  color: #18181b;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.send-mode-info {
  font-size: 0.82em;
  color: #374151;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  padding: 8px 12px;
  line-height: 1.5;
}
.send-mode-info i {
  margin-right: 4px;
  opacity: .7;
}

/* ── msg-id display helpers ───────────────────────────── */
.msg-id-badge {
  font-size: 0.75em;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 2px 7px;
}
.msg-id-error {
  font-size: 0.75em;
  color: #dc2626;
}

/* ── Paginazione ──────────────────────────────────────── */
.pag-label {
  font-size: 0.78em;
  font-weight: 600;
  color: var(--text-muted, #71717a);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
  display: block;
}
.pag-label i {
  margin-right: 4px;
}
.ppc-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ppc-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border, #e4e4e7);
  background: var(--muted-bg, #f4f4f5);
  border-radius: 6px;
  font-size: 1.1em;
  line-height: 1;
  cursor: pointer;
  color: #374151;
  flex-shrink: 0;
  transition: background .12s;
}
.ppc-btn:hover { background: #e4e4e7; }
.ppc-input {
  width: 64px;
  text-align: center;
  border: 1px solid var(--border, #e4e4e7);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 0.9em;
}
.ppc-input::-webkit-inner-spin-button,
.ppc-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.ppc-hint {
  font-size: 0.76em;
  color: var(--text-muted, #71717a);
}

/* ── Toggle rows (Opzioni / Elaborazione) ─────────────── */
.toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, #e4e4e7);
}
.toggle-row:first-of-type { padding-top: 2px; }
.toggle-row:last-of-type  { border-bottom: none; padding-bottom: 2px; }
.toggle-row-info {
  flex: 1;
  min-width: 0;
}
.toggle-row-label {
  font-size: 0.78em;
  font-weight: 600;
  color: var(--tx-muted, #71717a);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 3px;
}
.toggle-row-label i { margin-right: 4px; }
.toggle-row-desc {
  font-size: 0.81em;
  color: #374151;
  line-height: 1.45;
}
.toggle-row-ctrl {
  flex-shrink: 0;
  padding-top: 2px;
}
.toggle-row-ctrl .form-check-input {
  position: static !important;
  width: 2.2em;
  height: 1.2em;
  cursor: pointer;
  margin: 0;
  float: none;
}

/* ── Position column ──────────────────────────────────────── */
.pos-th { width: 52px; min-width: 52px; padding: 2px 0 !important; }
.pos-cell { width: 52px; min-width: 52px; padding: 2px 0 !important; vertical-align: middle; }
.pos-ctrl { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pos-btn {
  border: none; background: transparent; cursor: pointer;
  font-size: 0.65em; color: #a1a1aa; padding: 1px 4px; line-height: 1;
  border-radius: 3px; transition: color .1s, background .1s;
}
.pos-btn:hover { color: #18181b; background: #f0f0f0; }
.pos-inp {
  width: 38px; text-align: center;
  border: 1px solid var(--border, #e4e4e7); border-radius: 4px;
  padding: 1px 2px; font-size: 0.73em; color: #71717a;
}
.pos-inp:focus { outline: none; border-color: var(--indigo, #6366f1); color: #18181b; }
.pos-inp::-webkit-inner-spin-button,
.pos-inp::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── Lingua: fixed top-right corner ─────────────────────── */
.lang-corner {
  position: fixed; top: 14px; right: 14px; z-index: 1000;
}
.lang-corner select {
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,0.95) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23475569' d='M2 4l4 4 4-4z'/></svg>") no-repeat right 9px center;
  border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 7px 28px 7px 12px; font-size: 13px; font-weight: 600; color: #1e293b;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.lang-corner select:hover { border-color: #94a3b8; background-color: #fff; }
.lang-corner select:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }

/* ── Lingua corner: mobile ──────────────────────────────── */
@media (max-width: 700px) {
  .lang-corner { top: 10px; right: 8px; }
  .lang-corner select {
    padding: 5px 22px 5px 9px; font-size: 12px;
  }
  /* Lascia spazio nei dashboard header per non finire sotto al widget */
  .dash-wrap { padding-top: 52px; }
}

/* ── Mobile: hamburger + sidebar off-canvas ─────────────── */
.mobile-hamburger {
  display: none;
  position: fixed; top: 10px; left: 10px; z-index: 1100;
  width: 38px; height: 38px; border-radius: 8px;
  background: rgba(15,23,42,0.92); color: #fff;
  border: none; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.mobile-backdrop {
  display: none;
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: 99; backdrop-filter: blur(2px);
}
.mobile-backdrop.show { display: block; }
body.sb-open { overflow: hidden; }

@media (max-width: 700px) {
  .mobile-hamburger { display: flex; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    width: 240px;
    box-shadow: 4px 0 20px rgba(0,0,0,0.25);
  }
  .sidebar.open { transform: translateX(0); }
  .content { margin-left: 0 !important; padding: 56px 12px 16px !important; }

  /* Dashboard: compatta padding e font */
  .dash-wrap { padding: 14px 14px 24px !important; max-width: 100% !important; }
  .dash-header { gap: 10px !important; margin-bottom: 18px !important; }
  .dash-title { font-size: 1.25rem !important; }
  .dash-sub { font-size: 0.85rem !important; }
  .dash-empty { padding: 36px 18px !important; }
  .dash-empty h2 { font-size: 1.05rem !important; }
  .dash-empty p { font-size: 0.85rem !important; }
  .dash-stat-card { padding: 14px 12px !important; }
  .dash-stat-val { font-size: 1.5rem !important; }
  .dash-stat-icon { width: 30px !important; height: 30px !important; font-size: 13px !important; margin-bottom: 8px !important; }
  .dash-action-card { padding: 14px !important; }
  .dash-action-icon { font-size: 18px !important; margin-bottom: 6px !important; }

  /* Sposta hamburger NON sotto il lang-corner: hamburger a sx, lang a dx */
  .lang-corner { top: 10px; right: 8px; }
}

/* ── Mobile: ottimizzazioni complete ─────────────────────── */
@media (max-width: 700px) {
  /* Layout content */
  .content { padding: 56px 10px 18px !important; }
  body { font-size: 14px; }

  /* Tabelle: scroll orizzontale per non rompere il layout */
  .content table,
  .content .table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    font-size: 13px;
    white-space: nowrap;
  }
  .content table thead,
  .content table tbody { display: table; width: max-content; min-width: 100%; }

  /* Form: input più alti per touch */
  .form-control, input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], textarea, select {
    font-size: 16px !important; /* evita zoom su iOS */
    min-height: 40px;
  }
  textarea { min-height: 80px; }

  /* Bottoni: tap target più grandi */
  .btn { min-height: 38px; padding: 8px 16px; }

  /* Modali Bootstrap: quasi a tutto schermo */
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100% - 16px) !important;
  }
  .modal-content { border-radius: 12px; }
  .modal-body { padding: 14px; max-height: calc(100vh - 200px); overflow-y: auto; }

  /* Card e contenitori: padding ridotto */
  .card { padding: 12px !important; }

  /* Sidebar user menu (popup) - più larga */
  .sb-user-menu { width: calc(100% - 24px) !important; max-width: 320px; }

  /* Titoli */
  .content h1, .content h2 { font-size: 1.15rem !important; }

  /* Pricing inline (pagina pricing.html) */
  .price-grid, .plans-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
}

/* Tap target minimo 44px in modalità touch */
@media (hover: none) and (pointer: coarse) {
  .btn, button, a.btn, a.btn-primary, a.btn-outline { min-height: 38px; }
}

/* ── Sidebar: language pills always visible ─────────────── */
.sb-lang-row {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 12px;
  border-top: 1px solid var(--sb-border);
  border-bottom: 1px solid var(--sb-border);
  background: rgba(255,255,255,0.02);
}
.sb-lang-icon {
  font-size: 11px; color: var(--sb-text); opacity: 0.7; margin-right: 4px;
}
.sb-lang-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  font-size: 14px; line-height: 1;
  text-decoration: none !important;
  background: rgba(255,255,255,0.04);
  transition: background .15s, transform .15s;
  filter: saturate(0.9);
}
.sb-lang-pill:hover { background: rgba(255,255,255,0.10); transform: translateY(-1px); }
.sb-lang-pill.active {
  background: var(--sb-active-bg);
  box-shadow: inset 0 0 0 1px var(--sb-active-bar);
  filter: saturate(1);
}