/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 */

/* Custom Select Arrow Styling */
select:not([multiple]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.875rem center !important;
  background-size: 1rem 1rem !important;
  padding-right: 2.5rem !important;
  cursor: pointer;
}

select:not([multiple])::-ms-expand {
  display: none;
}

select option {
  background-color: #020617; /* slate-950 */
  color: #f8fafc; /* slate-50 */
}

/* ==========================================================================
   Theme Switcher Control (Component Styles)
   ========================================================================== */

/* Dark Mode (Default) */
.theme-switch-container {
  background-color: rgba(2, 6, 23, 0.75);
  border: 1px solid rgba(30, 41, 59, 0.8);
}

.theme-switch-btn {
  color: #94a3b8;
  background-color: transparent;
  border: 1px solid transparent;
}

.theme-switch-btn svg {
  color: #94a3b8;
  stroke: #94a3b8;
}

.theme-switch-btn span {
  color: #94a3b8;
}

.theme-switch-btn:hover {
  color: #f8fafc;
}

.theme-switch-btn:hover svg {
  color: #f8fafc;
  stroke: #f8fafc;
}

.theme-switch-btn:hover span {
  color: #f8fafc;
}

.theme-switch-btn.is-active {
  background-color: #1e293b !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border: 1px solid rgba(51, 65, 85, 0.6) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

.theme-switch-btn.is-active svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.theme-switch-btn.is-active span {
  color: #ffffff !important;
}

/* ==========================================================================
   Light Theme System (Default: Dark, User Toggleable)
   ========================================================================== */

html.theme-light {
  color-scheme: light;

  /* Remap Tailwind v4 slate color tokens for light mode */
  --color-slate-950: #f8fafc; /* Page background / canvas (slate-50) */
  --color-slate-900: #ffffff; /* Surface / Cards / Sidebar / Panels (pure white) */
  --color-slate-800: #f1f5f9; /* Sub-surfaces / Badges / Input bg (slate-100) */
  --color-slate-700: #e2e8f0; /* Default borders / dividers (slate-200) */
  --color-slate-600: #cbd5e1; /* Subtle outlines (slate-300) */
  --color-slate-500: #64748b; /* Muted text / icons (slate-500) */
  --color-slate-400: #475569; /* Secondary labels / descriptions (slate-600) */
  --color-slate-300: #334155; /* Body text / readable labels (slate-700) */
  --color-slate-200: #1e293b; /* Strong text / subheadings (slate-800) */
  --color-slate-100: #0f172a; /* Primary titles / headings (slate-900) */

  /* Deepen vibrant colors for clean high contrast on light backgrounds */
  --color-emerald-400: #059669;
  --color-emerald-300: #047857;
  --color-blue-400: #2563eb;
  --color-blue-300: #1d4ed8;
  --color-amber-400: #d97706;
  --color-amber-300: #92400e;
  --color-rose-400: #e11d48;
  --color-rose-300: #be123c;
  --color-indigo-400: #4f46e5;
  --color-indigo-300: #4338ca;
  --color-sky-400: #0284c7;
  --color-sky-300: #0369a1;
  --color-purple-400: #7c3aed;
  --color-purple-300: #6b21a8;
}

/* Base Body and Layout in Light Mode */
html.theme-light body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

/* Headings and General Text that have text-white on light surfaces */
html.theme-light .text-white:not(
  [class*="bg-blue-"],
  [class*="bg-emerald-"],
  [class*="bg-rose-"],
  [class*="bg-red-"],
  [class*="bg-amber-"],
  [class*="bg-indigo-"],
  [class*="bg-purple-"],
  [class*="from-blue-"],
  [class*="from-indigo-"],
  [data-group-tag],
  [data-group-tag] *,
  .group-tag-chip,
  .group-tag-chip *,
  [data-parsing-form-target="groupTagsContainer"],
  [data-parsing-form-target="groupTagsContainer"] *,
  [data-parsing-form-target="groupTagInput"],
  .btn-bulk-delete,
  .btn-bulk-action
) {
  color: #0f172a;
}

/* Hover brightening inverted to darkening in Light Mode, only for inline links/buttons (not colored buttons) */
html.theme-light a.hover\:text-white:not(
  [class*="bg-blue-"],
  [class*="bg-emerald-"],
  [class*="bg-rose-"],
  [class*="bg-red-"],
  [class*="bg-amber-"],
  [class*="bg-indigo-"],
  [class*="bg-purple-"]
):hover,
html.theme-light a.hover\:text-white:not(
  [class*="bg-blue-"],
  [class*="bg-emerald-"],
  [class*="bg-rose-"],
  [class*="bg-red-"],
  [class*="bg-amber-"],
  [class*="bg-indigo-"],
  [class*="bg-purple-"]
):hover span,
html.theme-light button.hover\:text-white:not(
  [class*="bg-blue-"],
  [class*="bg-emerald-"],
  [class*="bg-rose-"],
  [class*="bg-red-"],
  [class*="bg-amber-"],
  [class*="bg-indigo-"],
  [class*="bg-purple-"]
):hover,
html.theme-light button.hover\:text-white:not(
  [class*="bg-blue-"],
  [class*="bg-emerald-"],
  [class*="bg-rose-"],
  [class*="bg-red-"],
  [class*="bg-amber-"],
  [class*="bg-indigo-"],
  [class*="bg-purple-"]
):hover svg,
html.theme-light span.hover\:text-white:hover {
  color: #0f172a !important;
}

/* Custom group tag input & chips in Light Mode */
html.theme-light [data-group-tag],
html.theme-light .group-tag-chip,
html.theme-light span[data-group-tag] {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
}

html.theme-light [data-group-tag] *,
html.theme-light .group-tag-chip * {
  color: #ffffff !important;
}

html.theme-light [data-group-tag] button,
html.theme-light .group-tag-chip button {
  color: #ffffff !important;
  opacity: 0.85 !important;
}

html.theme-light [data-group-tag] button:hover,
html.theme-light .group-tag-chip button:hover {
  color: #ffffff !important;
  opacity: 1 !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Group tag input container & typing field in Light Mode */
html.theme-light [data-parsing-form-target="groupTagsContainer"] {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

html.theme-light [data-parsing-form-target="groupTagsContainer"] input,
html.theme-light [data-parsing-form-target="groupTagInput"],
html.theme-light input[data-parsing-form-target="groupTagInput"] {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html.theme-light [data-parsing-form-target="groupTagsContainer"] input::placeholder,
html.theme-light [data-parsing-form-target="groupTagInput"]::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

/* UNIVERSAL FIX: Keep pure white text on all solid & colored action buttons, inputs, links, chips */
html.theme-light :is(
  button,
  [type="button"],
  [type="submit"],
  input[type="submit"],
  .btn,
  .btn-bulk-delete,
  .btn-bulk-action,
  [data-group-tag],
  .group-tag-chip,
  a,
  span,
  div
):is(
  .bg-blue-600,
  .bg-blue-500,
  .bg-blue-700,
  .bg-blue-800,
  .bg-emerald-600,
  .bg-emerald-500,
  .bg-emerald-700,
  .bg-rose-600,
  .bg-rose-500,
  .bg-rose-700,
  .bg-red-600,
  .bg-red-500,
  .bg-red-700,
  .bg-indigo-600,
  .bg-indigo-500,
  .bg-indigo-700,
  .bg-purple-600,
  .bg-purple-500,
  .bg-purple-700,
  .bg-emerald-600\/90
):not(.theme-switch-btn):not(nav a) {
  color: #ffffff !important;
}

html.theme-light :is(
  button,
  [type="button"],
  [type="submit"],
  input[type="submit"],
  .btn,
  .btn-bulk-delete,
  .btn-bulk-action,
  [data-group-tag],
  .group-tag-chip,
  a,
  span,
  div
):is(
  .bg-blue-600,
  .bg-blue-500,
  .bg-blue-700,
  .bg-blue-800,
  .bg-emerald-600,
  .bg-emerald-500,
  .bg-emerald-700,
  .bg-rose-600,
  .bg-rose-500,
  .bg-rose-700,
  .bg-red-600,
  .bg-red-500,
  .bg-red-700,
  .bg-indigo-600,
  .bg-indigo-500,
  .bg-indigo-700,
  .bg-purple-600,
  .bg-purple-500,
  .bg-purple-700,
  .bg-emerald-600\/90
):not(.theme-switch-btn):not(nav a):hover {
  color: #ffffff !important;
}

html.theme-light :is(
  button,
  [type="button"],
  [type="submit"],
  input[type="submit"],
  .btn,
  .btn-bulk-delete,
  .btn-bulk-action,
  [data-group-tag],
  .group-tag-chip,
  a,
  span,
  div
):is(
  .bg-blue-600,
  .bg-blue-500,
  .bg-blue-700,
  .bg-blue-800,
  .bg-emerald-600,
  .bg-emerald-500,
  .bg-emerald-700,
  .bg-rose-600,
  .bg-rose-500,
  .bg-rose-700,
  .bg-red-600,
  .bg-red-500,
  .bg-red-700,
  .bg-indigo-600,
  .bg-indigo-500,
  .bg-indigo-700,
  .bg-purple-600,
  .bg-purple-500,
  .bg-purple-700,
  .bg-emerald-600\/90
):not(.theme-switch-btn):not(nav a) :is(.text-white, span, svg, strong, b, em) {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

html.theme-light :is(
  button,
  [type="button"],
  [type="submit"],
  input[type="submit"],
  .btn,
  .btn-bulk-delete,
  .btn-bulk-action,
  [data-group-tag],
  .group-tag-chip,
  a
):is(
  .bg-blue-600,
  .bg-blue-500,
  .bg-blue-700,
  .bg-blue-800,
  .bg-emerald-600,
  .bg-emerald-500,
  .bg-emerald-700,
  .bg-rose-600,
  .bg-rose-500,
  .bg-rose-700,
  .bg-red-600,
  .bg-red-500,
  .bg-red-700,
  .bg-indigo-600,
  .bg-indigo-500,
  .bg-indigo-700,
  .bg-purple-600,
  .bg-purple-500,
  .bg-purple-700,
  .bg-emerald-600\/90
):not(.theme-switch-btn):not(nav a):hover :is(.text-white, span, svg, strong, b, em) {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Specific guarantee for bulk update buttons (Сменить проект, Сменить прокси) */
html.theme-light button[formaction*="bulk_update"],
html.theme-light .btn-bulk-action {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

html.theme-light button[formaction*="bulk_update"]:hover,
html.theme-light .btn-bulk-action:hover {
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
}

html.theme-light button[formaction*="bulk_update"] *,
html.theme-light .btn-bulk-action * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Search / Filter "Найти" buttons & secondary buttons in Light Mode — soft neutral secondary style */
html.theme-light .btn-search,
html.theme-light input[value="Найти"],
html.theme-light input[type="submit"].bg-slate-800,
html.theme-light button.bg-slate-800:not(.btn-bulk-delete):not(.btn-bulk-action) {
  background-color: #e2e8f0 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}

html.theme-light .btn-search:hover,
html.theme-light input[value="Найти"]:hover,
html.theme-light input[type="submit"].bg-slate-800:hover,
html.theme-light button.bg-slate-800:not(.btn-bulk-delete):not(.btn-bulk-action):hover {
  background-color: #cbd5e1 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

html.theme-light .btn-search *,
html.theme-light input[value="Найти"] *,
html.theme-light button.bg-slate-800:not(.btn-bulk-delete):not(.btn-bulk-action) * {
  color: #334155 !important;
}

html.theme-light .btn-search:hover *,
html.theme-light input[value="Найти"]:hover *,
html.theme-light button.bg-slate-800:not(.btn-bulk-delete):not(.btn-bulk-action):hover * {
  color: #0f172a !important;
}

/* Neutral bg-slate-800 links & bg-slate-800/80 buttons/links in Light Mode
   (filter tabs, "Изменить", "Настройки", "Отмена", "Редактировать" etc.) */
html.theme-light a.bg-slate-800:not(nav a),
html.theme-light a.bg-slate-800\/80,
html.theme-light button.bg-slate-800\/80,
html.theme-light a.bg-slate-800\/50 {
  background-color: #e2e8f0 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}

html.theme-light a.bg-slate-800:not(nav a):hover,
html.theme-light a.bg-slate-800\/80:hover,
html.theme-light button.bg-slate-800\/80:hover,
html.theme-light a.bg-slate-800\/50:hover {
  background-color: #cbd5e1 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* Bulk limits submit button (Применить лимиты) in Light Mode — secondary neutral styling (never blue) */
html.theme-light #bulk_limits_form input[type="submit"] {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
  font-weight: 600 !important;
}

html.theme-light #bulk_limits_form input[type="submit"]:hover {
  background-color: #cbd5e1 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* ==========================================================================
   Table Action Buttons & Badges in Light Mode
   Ensures 100% legibility and high contrast across all tables and mobile cards
   ========================================================================== */

/* 1. Blue Table Action (Проверить, Логи, Логи задачи, Открыть) */
html.theme-light :is(button, a, span).bg-blue-500\/10,
html.theme-light :is(button, a, span).bg-blue-500\/15,
html.theme-light :is(button, a, span).bg-blue-500\/20 {
  background-color: #eff6ff !important; /* blue-50 */
  color: #1d4ed8 !important; /* blue-700 */
  border-color: #bfdbfe !important; /* blue-200 */
  font-weight: 600 !important;
}

html.theme-light :is(button, a, span).bg-blue-500\/10:hover,
html.theme-light :is(button, a, span).bg-blue-500\/15:hover,
html.theme-light :is(button, a, span).bg-blue-500\/20:hover {
  background-color: #dbeafe !important; /* blue-100 */
  color: #1e40af !important; /* blue-800 */
  border-color: #93c5fd !important; /* blue-300 */
}

html.theme-light :is(button, a, span).bg-blue-500\/10 *,
html.theme-light :is(button, a, span).bg-blue-500\/15 *,
html.theme-light :is(button, a, span).bg-blue-500\/20 * {
  color: #1d4ed8 !important;
  stroke: #1d4ed8 !important;
}

html.theme-light :is(button, a, span).bg-blue-500\/10:hover *,
html.theme-light :is(button, a, span).bg-blue-500\/15:hover *,
html.theme-light :is(button, a, span).bg-blue-500\/20:hover * {
  color: #1e40af !important;
  stroke: #1e40af !important;
}

/* 2. Rose Table Action (Удалить, Отменить) */
html.theme-light :is(button, a, span).bg-rose-500\/10,
html.theme-light :is(button, a, span).bg-rose-500\/15,
html.theme-light :is(button, a, span).bg-rose-500\/20 {
  background-color: #fff1f2 !important; /* rose-50 */
  color: #be123c !important; /* rose-700 */
  border-color: #fecdd3 !important; /* rose-200 */
  font-weight: 600 !important;
}

html.theme-light :is(button, a, span).bg-rose-500\/10:hover,
html.theme-light :is(button, a, span).bg-rose-500\/15:hover,
html.theme-light :is(button, a, span).bg-rose-500\/20:hover {
  background-color: #ffe4e6 !important; /* rose-100 */
  color: #9f1239 !important; /* rose-800 */
  border-color: #fda4af !important; /* rose-300 */
}

html.theme-light :is(button, a, span).bg-rose-500\/10 *,
html.theme-light :is(button, a, span).bg-rose-500\/15 *,
html.theme-light :is(button, a, span).bg-rose-500\/20 * {
  color: #be123c !important;
  stroke: #be123c !important;
}

html.theme-light :is(button, a, span).bg-rose-500\/10:hover *,
html.theme-light :is(button, a, span).bg-rose-500\/15:hover *,
html.theme-light :is(button, a, span).bg-rose-500\/20:hover * {
  color: #9f1239 !important;
  stroke: #9f1239 !important;
}

/* 3. Slate Neutral Table Action (Изменить, ⚙️ Настройки) */
html.theme-light :is(button, a).bg-slate-800\/80,
html.theme-light :is(button, a).bg-slate-800\/70,
html.theme-light :is(button, a).bg-slate-800\/60,
html.theme-light :is(button, a).bg-slate-800\/50 {
  background-color: #f1f5f9 !important; /* slate-100 */
  color: #334155 !important; /* slate-700 */
  border-color: #cbd5e1 !important; /* slate-300 */
  font-weight: 600 !important;
}

html.theme-light :is(button, a).bg-slate-800\/80:hover,
html.theme-light :is(button, a).bg-slate-800\/70:hover,
html.theme-light :is(button, a).bg-slate-800\/60:hover,
html.theme-light :is(button, a).bg-slate-800\/50:hover {
  background-color: #e2e8f0 !important; /* slate-200 */
  color: #0f172a !important; /* slate-900 */
  border-color: #94a3b8 !important; /* slate-400 */
}

html.theme-light :is(button, a).bg-slate-800\/80 *,
html.theme-light :is(button, a).bg-slate-800\/70 *,
html.theme-light :is(button, a).bg-slate-800\/60 *,
html.theme-light :is(button, a).bg-slate-800\/50 * {
  color: #334155 !important;
  stroke: #334155 !important;
}

html.theme-light :is(button, a).bg-slate-800\/80:hover *,
html.theme-light :is(button, a).bg-slate-800\/70:hover *,
html.theme-light :is(button, a).bg-slate-800\/60:hover *,
html.theme-light :is(button, a).bg-slate-800\/50:hover * {
  color: #0f172a !important;
  stroke: #0f172a !important;
}

/* 4. Emerald Table Action (Запустить, Возобновить) */
html.theme-light :is(button, a, span).bg-emerald-500\/10,
html.theme-light :is(button, a, span).bg-emerald-500\/15,
html.theme-light :is(button, a, span).bg-emerald-500\/20 {
  background-color: #ecfdf5 !important; /* emerald-50 */
  color: #047857 !important; /* emerald-700 */
  border-color: #a7f3d0 !important; /* emerald-200 */
  font-weight: 600 !important;
}

html.theme-light :is(button, a, span).bg-emerald-500\/10:hover,
html.theme-light :is(button, a, span).bg-emerald-500\/15:hover,
html.theme-light :is(button, a, span).bg-emerald-500\/20:hover {
  background-color: #d1fae5 !important; /* emerald-100 */
  color: #065f46 !important; /* emerald-800 */
  border-color: #6ee7b7 !important; /* emerald-300 */
}

html.theme-light :is(button, a, span).bg-emerald-500\/10 *,
html.theme-light :is(button, a, span).bg-emerald-500\/15 *,
html.theme-light :is(button, a, span).bg-emerald-500\/20 * {
  color: #047857 !important;
  stroke: #047857 !important;
}

html.theme-light :is(button, a, span).bg-emerald-500\/10:hover *,
html.theme-light :is(button, a, span).bg-emerald-500\/15:hover *,
html.theme-light :is(button, a, span).bg-emerald-500\/20:hover * {
  color: #065f46 !important;
  stroke: #065f46 !important;
}

/* 5. Amber Table Action (Пауза) */
html.theme-light :is(button, a, span).bg-amber-500\/10,
html.theme-light :is(button, a, span).bg-amber-500\/15,
html.theme-light :is(button, a, span).bg-amber-500\/20 {
  background-color: #fffbeb !important; /* amber-50 */
  color: #b45309 !important; /* amber-700 */
  border-color: #fde68a !important; /* amber-200 */
  font-weight: 600 !important;
}

html.theme-light :is(button, a, span).bg-amber-500\/10:hover,
html.theme-light :is(button, a, span).bg-amber-500\/15:hover,
html.theme-light :is(button, a, span).bg-amber-500\/20:hover {
  background-color: #fef3c7 !important; /* amber-100 */
  color: #92400e !important; /* amber-800 */
  border-color: #fcd34d !important; /* amber-300 */
}

html.theme-light :is(button, a, span).bg-amber-500\/10 *,
html.theme-light :is(button, a, span).bg-amber-500\/15 *,
html.theme-light :is(button, a, span).bg-amber-500\/20 * {
  color: #b45309 !important;
  stroke: #b45309 !important;
}

html.theme-light :is(button, a, span).bg-amber-500\/10:hover *,
html.theme-light :is(button, a, span).bg-amber-500\/15:hover *,
html.theme-light :is(button, a, span).bg-amber-500\/20:hover * {
  color: #92400e !important;
  stroke: #92400e !important;
}

/* Sidebar Navigation Items in Light Mode */
/* 1. Active Navigation Item */
html.theme-light nav a[class*="bg-blue-600"],
html.theme-light nav a[class*="border-blue-500"] {
  background-color: #eff6ff !important; /* Soft pastel blue-50 */
  color: #1d4ed8 !important; /* Rich deep blue-700 */
  border-left-color: #2563eb !important; /* Solid blue-600 left accent bar */
  font-weight: 600 !important;
}

html.theme-light nav a[class*="bg-blue-600"] svg,
html.theme-light nav a[class*="border-blue-500"] svg {
  color: #2563eb !important; /* Solid blue icon */
  stroke: #2563eb !important;
}

html.theme-light nav a[class*="bg-blue-600"] span,
html.theme-light nav a[class*="border-blue-500"] span {
  color: #1d4ed8 !important;
}

/* 2. Inactive Navigation Items */
html.theme-light nav a:not([class*="bg-blue-600"]):not([class*="border-blue-500"]) {
  color: #475569 !important; /* Slate-600: clean and readable */
}

html.theme-light nav a:not([class*="bg-blue-600"]):not([class*="border-blue-500"]) svg {
  color: #64748b !important; /* Slate-500 icon */
}

html.theme-light nav a:not([class*="bg-blue-600"]):not([class*="border-blue-500"]):hover {
  background-color: #f1f5f9 !important; /* Soft hover highlight */
  color: #0f172a !important; /* Dark slate on hover */
}

html.theme-light nav a:not([class*="bg-blue-600"]):not([class*="border-blue-500"]):hover svg {
  color: #0f172a !important;
}

/* 3. Section Group Headers */
html.theme-light nav div[class*="tracking-wider"] {
  color: #94a3b8 !important; /* Slate-400 for category headers */
}

/* Sidebar Support Link in Light Mode */
html.theme-light a.sidebar-support-link,
html.theme-light a[href*="t.me/hanna_flora"]:is(aside a, #mobile-drawer a) {
  color: #475569 !important;
}

html.theme-light a.sidebar-support-link:hover,
html.theme-light a[href*="t.me/hanna_flora"]:is(aside a, #mobile-drawer a):hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.theme-light a.sidebar-support-link:hover span,
html.theme-light a[href*="t.me/hanna_flora"]:is(aside a, #mobile-drawer a):hover span {
  color: #0f172a !important;
}

html.theme-light a.sidebar-support-link svg,
html.theme-light a[href*="t.me/hanna_flora"]:is(aside a, #mobile-drawer a) svg {
  color: #2563eb !important;
}

html.theme-light a.sidebar-support-link:hover svg,
html.theme-light a[href*="t.me/hanna_flora"]:is(aside a, #mobile-drawer a):hover svg {
  color: #1d4ed8 !important;
}

/* Theme Switcher in Light Mode */
html.theme-light .theme-switch-container {
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

html.theme-light .theme-switch-btn {
  color: #64748b !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
}

html.theme-light .theme-switch-btn svg {
  color: #64748b !important;
  stroke: #64748b !important;
}

html.theme-light .theme-switch-btn span {
  color: #64748b !important;
}

html.theme-light .theme-switch-btn:hover {
  color: #0f172a !important;
}

html.theme-light .theme-switch-btn:hover svg {
  color: #0f172a !important;
  stroke: #0f172a !important;
}

html.theme-light .theme-switch-btn:hover span {
  color: #0f172a !important;
}

html.theme-light .theme-switch-btn.is-active {
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08) !important;
}

html.theme-light .theme-switch-btn.is-active svg {
  color: #0f172a !important;
  stroke: #0f172a !important;
}

html.theme-light .theme-switch-btn.is-active span {
  color: #0f172a !important;
}

/* Card & Table Container Borders in Light Mode */
html.theme-light .border-slate-800,
html.theme-light .border-slate-800\/60,
html.theme-light .border-slate-800\/70,
html.theme-light .border-slate-800\/80,
html.theme-light .divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
  border-color: #e2e8f0 !important;
}

html.theme-light .border-slate-700,
html.theme-light .border-slate-700\/80,
html.theme-light .border-slate-700\/60,
html.theme-light .border-slate-700\/70 {
  border-color: #e2e8f0 !important;
}

/* Elevation / Shadows for Light Mode Cards */
html.theme-light .bg-slate-900.border {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05);
}

/* Table Header in Light Mode */
html.theme-light thead.bg-slate-950\/70,
html.theme-light thead.bg-slate-950\/60 {
  background-color: #f8fafc !important;
}

/* Mobile top bar and drawer in Light Mode */
html.theme-light header.md\:hidden {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04);
}

html.theme-light aside.md\:hidden {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* High contrast badges in Light Mode */
html.theme-light .text-emerald-300 { color: #047857 !important; }
html.theme-light .text-emerald-400 { color: #059669 !important; }
html.theme-light .text-amber-300 { color: #92400e !important; }
html.theme-light .text-blue-300 { color: #1d4ed8 !important; }
html.theme-light .text-indigo-300 { color: #4338ca !important; }
html.theme-light .text-sky-300 { color: #0369a1 !important; }
html.theme-light .text-red-300 { color: #b91c1c !important; }
html.theme-light .text-rose-300 { color: #be123c !important; }
html.theme-light .text-rose-400 { color: #e11d48 !important; }
html.theme-light .text-purple-300 { color: #6b21a8 !important; }
html.theme-light .text-cyan-300 { color: #0e7490 !important; }

/* Select element options in Light Mode */
html.theme-light select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

html.theme-light select:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") !important;
}

/* Notification toasts in Light Mode */
html.theme-light #flash-toasts .bg-slate-900\/95 {
  background-color: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  border-color: #cbd5e1 !important;
}

html.theme-light #flash-toasts .text-slate-100 {
  color: #0f172a !important;
}

/* Global trial notification banner in Light Mode */
html.theme-light .from-blue-900\/60 {
  background: linear-gradient(to right, #eff6ff, #f0fdf4, #f8fafc) !important;
  border-color: #bfdbfe !important;
}
html.theme-light .from-blue-900\/60 strong,
html.theme-light .from-blue-900\/60 span {
  color: #1e3a8a !important;
}
html.theme-light .from-blue-900\/60 a {
  color: #2563eb !important;
}

/* Code / mono tags in Light Mode */
html.theme-light .font-mono.text-slate-400 {
  color: #475569 !important;
}

/* Bulk Action Destructive Delete Button in Light Mode — ALWAYS solid rose with white text */
html.theme-light .btn-bulk-delete,
html.theme-light button.btn-bulk-delete,
html.theme-light button[formaction*="bulk_destroy"],
html.theme-light #bulk_limits_form button.btn-bulk-delete,
html.theme-light #bulk_limits_form button[formaction*="bulk_destroy"],
html.theme-light .text-rose-300.bg-rose-500\/15 {
  background-color: #e11d48 !important; /* solid rose-600 */
  color: #ffffff !important;
  border-color: #be123c !important;
  box-shadow: 0 1px 3px 0 rgba(225, 29, 72, 0.25) !important;
  font-weight: 600 !important;
}

html.theme-light .btn-bulk-delete:hover,
html.theme-light button.btn-bulk-delete:hover,
html.theme-light button[formaction*="bulk_destroy"]:hover,
html.theme-light #bulk_limits_form button.btn-bulk-delete:hover,
html.theme-light #bulk_limits_form button[formaction*="bulk_destroy"]:hover,
html.theme-light .text-rose-300.bg-rose-500\/15:hover {
  background-color: #be123c !important; /* solid rose-700 */
  color: #ffffff !important;
  border-color: #9f1239 !important;
}

html.theme-light .btn-bulk-delete svg,
html.theme-light button.btn-bulk-delete svg,
html.theme-light button[formaction*="bulk_destroy"] svg,
html.theme-light #bulk_limits_form button.btn-bulk-delete svg,
html.theme-light #bulk_limits_form button[formaction*="bulk_destroy"] svg,
html.theme-light .text-rose-300.bg-rose-500\/15 svg,
html.theme-light .btn-bulk-delete *,
html.theme-light button.btn-bulk-delete *,
html.theme-light button[formaction*="bulk_destroy"] *,
html.theme-light #bulk_limits_form button.btn-bulk-delete *,
html.theme-light #bulk_limits_form button[formaction*="bulk_destroy"] * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Subscription & Feature Promotional Banners in Light Mode */
html.theme-light .subscription-notice-banner,
html.theme-light .subscription-trial-banner,
html.theme-light .from-blue-900.to-slate-900,
html.theme-light .from-indigo-900.via-blue-900.to-slate-900 {
  background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 45%, #f8fafc 100%) !important;
  border: 1px solid #bfdbfe !important;
  box-shadow: 0 4px 20px -2px rgba(37, 99, 235, 0.08) !important;
}

html.theme-light .subscription-notice-banner h2,
html.theme-light .subscription-trial-banner h2,
html.theme-light .from-blue-900.to-slate-900 h2,
html.theme-light .from-indigo-900.via-blue-900.to-slate-900 h2 {
  color: #1e3a8a !important; /* Deep rich navy title */
  font-weight: 700 !important;
}

html.theme-light .subscription-notice-banner p,
html.theme-light .subscription-trial-banner p,
html.theme-light .from-blue-900.to-slate-900 p,
html.theme-light .from-indigo-900.via-blue-900.to-slate-900 p {
  color: #334155 !important; /* High-contrast readable body text */
}

html.theme-light .subscription-notice-banner .text-blue-200,
html.theme-light .subscription-trial-banner .text-blue-200,
html.theme-light .from-blue-900.to-slate-900 .text-blue-200,
html.theme-light .from-indigo-900.via-blue-900.to-slate-900 .text-blue-200 {
  color: #475569 !important; /* Slate-600 */
}

html.theme-light .subscription-notice-banner .bg-blue-500\/20,
html.theme-light .subscription-trial-banner .bg-blue-500\/20,
html.theme-light .from-blue-900.to-slate-900 .bg-blue-500\/20,
html.theme-light .from-indigo-900.via-blue-900.to-slate-900 .bg-blue-500\/20 {
  background-color: #dbeafe !important;
  border: 1px solid #bfdbfe !important;
}

html.theme-light .subscription-notice-banner .text-blue-300,
html.theme-light .subscription-trial-banner .text-blue-300,
html.theme-light .from-blue-900.to-slate-900 .text-blue-300,
html.theme-light .from-indigo-900.via-blue-900.to-slate-900 .text-blue-300 {
  color: #1d4ed8 !important; /* Deep blue badge text */
}

html.theme-light .subscription-notice-banner .text-slate-400,
html.theme-light .subscription-trial-banner .text-slate-400,
html.theme-light .from-blue-900.to-slate-900 .text-slate-400,
html.theme-light .from-indigo-900.via-blue-900.to-slate-900 .text-slate-400 {
  color: #64748b !important;
}

html.theme-light .subscription-notice-banner .text-white,
html.theme-light .subscription-trial-banner .text-white,
html.theme-light .from-blue-900.to-slate-900 .text-white,
html.theme-light .from-indigo-900.via-blue-900.to-slate-900 .text-white {
  color: #0f172a !important;
}

/* Telegram CTA button in subscription banner */
html.theme-light .subscription-notice-banner a.bg-blue-500,
html.theme-light .subscription-trial-banner a.bg-blue-600,
html.theme-light .from-blue-900.to-slate-900 a.bg-blue-500,
html.theme-light .from-indigo-900.via-blue-900.to-slate-900 a.bg-blue-600 {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #2563eb !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

html.theme-light .subscription-notice-banner a.bg-blue-500:hover,
html.theme-light .subscription-trial-banner a.bg-blue-600:hover,
html.theme-light .from-blue-900.to-slate-900 a.bg-blue-500:hover,
html.theme-light .from-indigo-900.via-blue-900.to-slate-900 a.bg-blue-600:hover {
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
}

html.theme-light .subscription-notice-banner a.bg-blue-500 *,
html.theme-light .subscription-trial-banner a.bg-blue-600 *,
html.theme-light .from-blue-900.to-slate-900 a.bg-blue-500 *,
html.theme-light .from-indigo-900.via-blue-900.to-slate-900 a.bg-blue-600 * {
  color: #ffffff !important;
}

/* ==========================================================================
   Subscription Expired Navigation & Banners
   ========================================================================== */

/* 1. Locked Navigation Links in Sidebar and Drawer */
.subscription-expired-nav a:not([href*="subscription"]):not([href*="logout"]) {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: auto !important;
}

.subscription-expired-nav a:not([href*="subscription"]):not([href*="logout"]):hover {
  opacity: 0.65 !important;
  background-color: rgba(244, 63, 94, 0.05) !important;
}

.subscription-expired-nav a:not([href*="subscription"]):not([href*="logout"])::after {
  content: '🔒';
  margin-left: auto;
  font-size: 11px;
  line-height: 1;
  opacity: 0.6;
}

html.theme-light .subscription-expired-nav a:not([href*="subscription"]):not([href*="logout"]) {
  color: #94a3b8 !important;
}

html.theme-light .subscription-expired-nav a:not([href*="subscription"]):not([href*="logout"]) svg {
  color: #94a3b8 !important;
  stroke: #94a3b8 !important;
}

html.theme-light nav a.border-rose-500,
html.theme-light nav a[class*="border-rose-500"],
html.theme-light nav a[class*="bg-rose-500"] {
  background-color: #fff1f2 !important;
  border-left-color: #e11d48 !important;
  color: #9f1239 !important;
}

html.theme-light nav a.border-rose-500 svg,
html.theme-light nav a[class*="border-rose-500"] svg,
html.theme-light nav a[class*="bg-rose-500"] svg {
  color: #e11d48 !important;
  stroke: #e11d48 !important;
}

.sidebar-subscription-expired-badge {
  font-size: 10px !important;
  line-height: 1 !important;
  padding: 3px 7px !important;
  letter-spacing: 0.02em !important;
}

html.theme-light .sidebar-subscription-expired-badge {
  background-color: #ffe4e6 !important;
  color: #be123c !important;
  border: 1px solid #fca5a5 !important;
}

/* 2. Global Top Notification Banner when subscription is expired */
html.theme-light .subscription-expired-banner-top {
  background-color: #fff1f2 !important; /* rose-50 */
  border-color: #fca5a5 !important; /* rose-300 */
  box-shadow: 0 1px 3px 0 rgba(159, 18, 57, 0.08) !important;
}

html.theme-light .subscription-expired-banner-top .subscription-expired-title {
  color: #881337 !important; /* rose-900 (ultra high contrast, dark ruby) */
}

html.theme-light .subscription-expired-banner-top .subscription-expired-subtitle {
  color: #9f1239 !important; /* rose-800 */
}

html.theme-light .subscription-expired-banner-top .subscription-expired-cta-btn {
  background-color: #e11d48 !important; /* rose-600 */
  color: #ffffff !important;
  border: 1px solid #be123c !important;
  box-shadow: 0 1px 2px 0 rgba(225, 29, 72, 0.25) !important;
}

html.theme-light .subscription-expired-banner-top .subscription-expired-cta-btn:hover {
  background-color: #be123c !important; /* rose-700 */
  color: #ffffff !important;
}

/* 3. Global Top Notification Banner for active trial */
html.theme-light .subscription-trial-top-banner {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}

html.theme-light .subscription-trial-top-banner strong {
  color: #1e3a8a !important;
}

html.theme-light .subscription-trial-top-banner span {
  color: #1d4ed8 !important;
}

/* 4. Page Banner on /subscription when expired */
html.theme-light .subscription-expired-banner,
html.theme-light .bg-rose-950\/70 {
  background-color: #fff1f2 !important;
  border-color: #fca5a5 !important;
  box-shadow: 0 4px 6px -1px rgba(159, 18, 57, 0.06) !important;
}

html.theme-light .subscription-expired-banner h2,
html.theme-light .bg-rose-950\/70 h2 {
  color: #881337 !important;
}

html.theme-light .subscription-expired-banner p,
html.theme-light .bg-rose-950\/70 p {
  color: #4c0519 !important;
}

html.theme-light .subscription-expired-banner span.bg-rose-500\/20 {
  background-color: #ffe4e6 !important;
  color: #9f1239 !important;
  border: 1px solid #fecdd3 !important;
}

/* Campaign Blocking / Pause Error Alert in Light Mode */
html.theme-light #campaign_blocking_alert.campaign-blocking-alert-error {
  background-color: #fff1f2 !important;
  border-color: #fda4af !important;
  box-shadow: 0 1px 3px 0 rgba(190, 18, 60, 0.08) !important;
}

html.theme-light #campaign_blocking_alert.campaign-blocking-alert-error .campaign-blocking-title {
  color: #881337 !important;
}

html.theme-light #campaign_blocking_alert.campaign-blocking-alert-error .campaign-blocking-time {
  color: #be123c !important;
}

html.theme-light #campaign_blocking_alert.campaign-blocking-alert-error .campaign-blocking-message {
  color: #4c0519 !important;
  font-weight: 500;
}

html.theme-light #campaign_blocking_alert.campaign-blocking-alert-error .campaign-blocking-hint {
  color: #475569 !important;
}

html.theme-light #campaign_blocking_alert a.campaign-blocking-settings-btn {
  background-color: #ffffff !important;
  color: #1e293b !important;
  border-color: #fecdd3 !important;
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.05) !important;
}

html.theme-light #campaign_blocking_alert a.campaign-blocking-settings-btn:hover {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: #fda4af !important;
}

html.theme-light #campaign_blocking_alert.campaign-blocking-alert-error a.campaign-blocking-log-btn {
  background-color: #ffe4e6 !important;
  color: #9f1239 !important;
  border-color: #fda4af !important;
  box-shadow: none !important;
}

html.theme-light #campaign_blocking_alert.campaign-blocking-alert-error a.campaign-blocking-log-btn:hover {
  background-color: #fecdd3 !important;
  color: #881337 !important;
  border-color: #fb7185 !important;
}

html.theme-light #campaign_blocking_alert.campaign-blocking-alert-warning {
  background-color: #fffbeb !important;
  border-color: #fcd34d !important;
  box-shadow: 0 1px 3px 0 rgba(180, 83, 9, 0.08) !important;
}

html.theme-light #campaign_blocking_alert.campaign-blocking-alert-warning .campaign-blocking-title {
  color: #78350f !important;
}

html.theme-light #campaign_blocking_alert.campaign-blocking-alert-warning .campaign-blocking-time {
  color: #b45309 !important;
}

html.theme-light #campaign_blocking_alert.campaign-blocking-alert-warning .campaign-blocking-message {
  color: #451a03 !important;
  font-weight: 500;
}

html.theme-light #campaign_blocking_alert.campaign-blocking-alert-warning .campaign-blocking-hint {
  color: #475569 !important;
}

html.theme-light #campaign_blocking_alert.campaign-blocking-alert-warning a.campaign-blocking-upgrade-btn {
  background-color: #d97706 !important;
  color: #ffffff !important;
  border: 1px solid #b45309 !important;
  box-shadow: 0 1px 2px 0 rgba(217, 119, 6, 0.25) !important;
}

html.theme-light #campaign_blocking_alert.campaign-blocking-alert-warning a.campaign-blocking-upgrade-btn:hover {
  background-color: #b45309 !important;
  color: #ffffff !important;
}

html.theme-light #campaign_blocking_alert.campaign-blocking-alert-warning a.campaign-blocking-log-btn {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border-color: #fcd34d !important;
  box-shadow: none !important;
}

html.theme-light #campaign_blocking_alert.campaign-blocking-alert-warning a.campaign-blocking-log-btn:hover {
  background-color: #fde68a !important;
  color: #78350f !important;
  border-color: #f59e0b !important;
}

/* Custom Confirm Modal in Light Mode */
html.theme-light #confirm-modal-panel {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

html.theme-light #confirm-modal-title {
  color: #0f172a !important;
}

html.theme-light #confirm-modal-message {
  color: #475569 !important;
}

html.theme-light #confirm-modal-cancel {
  background-color: #e2e8f0 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}

html.theme-light #confirm-modal-cancel:hover {
  background-color: #cbd5e1 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* Custom Sleek Scrollbar for Inbox */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.45);
}

html.theme-light .custom-scrollbar {
  scrollbar-color: rgba(100, 116, 139, 0.3) transparent;
}

html.theme-light .custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.3);
}

html.theme-light .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.5);
}