/* =====================================================
   Dairy Products Admin — Design System
   Inter · Zinc palette · Professional Minimal
   ===================================================== */

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

/* ─── Base tokens ──────────────────────────────────── */
:root {
  --font-family-base:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-size-base:      0.875rem;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    600;
  --radius-sm:  6px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  /* legacy aliases */
  --border-radius-sm: 6px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --transition-base: all 0.14s ease;
}

/* ─── Light theme (default) ────────────────────────── */
:root, [data-theme="light"] {
  --bg-body:            #fafafa;
  --bg-primary:         #ffffff;
  --bg-secondary:       #f4f4f5;
  --bg-tertiary:        #e4e4e7;
  --bg-card:            #ffffff;
  --bg-hover:           #f4f4f5;
  --modal-bg:           #ffffff;

  --text-primary:       #09090b;
  --text-secondary:     #52525b;
  --text-muted:         #a1a1aa;
  --text-inverse:       #fafafa;
  --text-navs:          #fafafa;

  --border-color:       #e4e4e7;
  --border-color-light: #f0f0f0;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 8px rgba(0, 0, 0, 0.07);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.10);

  /* Near-black as the single primary action color */
  --color-primary:        #18181b;
  --color-primary-hover:  #09090b;
  --color-primary-light:  #f4f4f5;
  --color-secondary:      #3f3f46;
  --color-secondary-hover:#27272a;

  /* Semantic colors — kept for functional meaning */
  --color-success:        #16a34a;
  --color-success-hover:  #15803d;
  --color-success-light:  #f0fdf4;

  --color-danger:         #dc2626;
  --color-danger-hover:   #b91c1c;
  --color-danger-light:   #fef2f2;

  --color-warning:        #d97706;
  --color-warning-hover:  #b45309;
  --color-warning-light:  #fffbeb;

  --color-info:           #2563eb;
  --color-info-hover:     #1d4ed8;
  --color-info-light:     #eff6ff;

  --bs-body-bg:      #fafafa;
  --bs-body-color:   #09090b;
  --bs-border-color: #e4e4e7;
  --bs-primary:      #18181b;
  --bs-primary-rgb:  24, 24, 27;

  color-scheme: light;
}

/* ─── Dark theme ───────────────────────────────────── */
[data-theme="dark"] {
  --bg-body:            #09090b;
  --bg-primary:         #09090b;
  --bg-secondary:       #18181b;
  --bg-tertiary:        #27272a;
  --bg-card:            #18181b;
  --bg-hover:           #27272a;
  --modal-bg:           #18181b;

  --text-primary:       #fafafa;
  --text-secondary:     #a1a1aa;
  --text-muted:         #52525b;
  --text-inverse:       #09090b;
  --text-navs:          #fafafa;

  --border-color:       rgba(255, 255, 255, 0.09);
  --border-color-light: rgba(255, 255, 255, 0.05);

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 8px 28px rgba(0, 0, 0, 0.55);

  --color-primary:        #fafafa;
  --color-primary-hover:  #ffffff;
  --color-primary-light:  #27272a;
  --color-secondary:      #a1a1aa;
  --color-secondary-hover:#d4d4d8;

  --color-success:        #22c55e;
  --color-success-hover:  #16a34a;
  --color-success-light:  rgba(34, 197, 94, 0.10);

  --color-danger:         #ef4444;
  --color-danger-hover:   #dc2626;
  --color-danger-light:   rgba(239, 68, 68, 0.10);

  --color-warning:        #f59e0b;
  --color-warning-hover:  #d97706;
  --color-warning-light:  rgba(245, 158, 11, 0.10);

  --color-info:           #60a5fa;
  --color-info-hover:     #3b82f6;
  --color-info-light:     rgba(96, 165, 250, 0.10);

  --bs-body-bg:      #09090b;
  --bs-body-color:   #fafafa;
  --bs-border-color: rgba(255, 255, 255, 0.09);
  --bs-primary:      #fafafa;
  --bs-primary-rgb:  250, 250, 250;

  color-scheme: dark;
}

/* ─── Scrollbars ───────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── Base ─────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-family-base) !important;
  font-size: var(--font-size-base);
  background: var(--bg-body) !important;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
p, span, li, div, label, small, strong, em { color: inherit; }
.bg-light { background: var(--bg-body) !important; }
.bg-white  { background: var(--bg-card) !important; }

/* ─── Typography ───────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { color: var(--text-primary); font-weight: 700; letter-spacing: -0.02em; }
a { color: var(--text-primary); text-decoration: none; }
a:hover { color: var(--text-secondary); }

/* ─── Cards ────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
}
.card-header { background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); color: var(--text-primary); font-weight: 600; }
.card-body { color: var(--text-primary); }

/* ─── ======================================================
   BUTTONS — complete normalization
   All action buttons → single dark/light neutral
   Only btn-danger keeps red (semantic: destructive action)
   ====================================================== */
.btn {
  font-family: var(--font-family-base) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  padding: 6px 14px !important;
  border-radius: var(--radius-sm) !important;
  transition: var(--transition-base) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}
.btn:hover { transform: translateY(-1px) !important; }
.btn:active { transform: translateY(0) scale(0.98) !important; }

/* Primary, success, info, warning → all same dark/neutral */
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-dark {
  background: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
  color: var(--text-inverse) !important;
  box-shadow: none !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-dark:hover {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  color: var(--text-inverse) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15) !important;
}

/* Secondary → outlined/subtle */
.btn-secondary {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
}
.btn-secondary:hover {
  background: var(--bg-tertiary) !important;
  border-color: var(--text-muted) !important;
  color: var(--text-primary) !important;
}

/* Danger → keeps red (destructive actions) */
.btn-danger {
  background: var(--color-danger) !important;
  border: 1px solid var(--color-danger) !important;
  color: #fff !important;
}
.btn-danger:hover {
  background: var(--color-danger-hover) !important;
  border-color: var(--color-danger-hover) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(220,38,38,0.2) !important;
}

/* Outline variants */
.btn-outline-primary  { background: transparent !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; }
.btn-outline-primary:hover  { background: var(--bg-secondary) !important; border-color: var(--text-secondary) !important; }
.btn-outline-danger   { background: transparent !important; border: 1px solid var(--color-danger) !important; color: var(--color-danger) !important; }
.btn-outline-danger:hover   { background: var(--color-danger-light) !important; }
.btn-outline-secondary { background: transparent !important; border: 1px solid var(--border-color) !important; color: var(--text-secondary) !important; }
.btn-outline-secondary:hover { background: var(--bg-secondary) !important; color: var(--text-primary) !important; }

/* Nav/controls-grid links — same as btn-secondary */
.controls-grid a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 14px !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-family-base) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  transition: var(--transition-base) !important;
  white-space: nowrap !important;
}
.controls-grid a:hover {
  background: var(--bg-secondary) !important;
  border-color: var(--text-muted) !important;
  color: var(--text-primary) !important;
}

/* ─── Tables ───────────────────────────────────────── */
.table, table { color: var(--text-primary); --bs-table-bg: var(--bg-card); border-color: var(--border-color); }
.table th, thead th, th {
  background: var(--bg-secondary) !important;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--border-color);
}
.table td, td { background: var(--bg-card) !important; color: var(--text-primary); border-bottom: 1px solid var(--border-color-light); }
.table tbody tr:nth-child(even) td { background: var(--bg-secondary) !important; }
[data-theme="dark"] .table tbody tr:nth-child(even) td { background: rgba(255,255,255,.015) !important; }
.table tbody tr:hover td, tbody tr:hover td { background: var(--bg-hover) !important; }
tbody, td, tfoot, th, thead, tr { border-color: var(--border-color); border-width: 0; }
td, th { border-bottom: 1px solid var(--border-color-light); }

/* ─── Forms ────────────────────────────────────────── */
.form-control, .form-select,
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="search"], input[type="url"],
select, textarea {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-family-base) !important;
  font-size: 0.8125rem !important;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.form-control:focus, .form-select:focus,
input[type="text"]:focus, input[type="number"]:focus,
input[type="email"]:focus, input[type="search"]:focus,
textarea:focus, select:focus {
  background: var(--bg-card) !important;
  border-color: var(--text-secondary) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08) !important;
  outline: none;
}
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus {
  box-shadow: 0 0 0 2px rgba(250,250,250,0.10) !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--text-muted); }
.form-label, label { color: var(--text-secondary); font-weight: 600; font-size: 0.8125rem; margin-bottom: 4px; }
.form-text { color: var(--text-muted); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { color-scheme: dark; }

/* ─── Badges ───────────────────────────────────────── */
.badge {
  font-size: 0.68rem; font-weight: 600; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 4px;
}
.badge.bg-primary   { background: var(--bg-secondary) !important; color: var(--text-primary)    !important; border: 1px solid var(--border-color); }
.badge.bg-success   { background: var(--color-success-light)  !important; color: var(--color-success)  !important; }
.badge.bg-danger    { background: var(--color-danger-light)   !important; color: var(--color-danger)   !important; }
.badge.bg-warning   { background: var(--color-warning-light)  !important; color: var(--color-warning)  !important; }
.badge.bg-info      { background: var(--color-info-light)     !important; color: var(--color-info)     !important; }
.badge-primary  { background: var(--bg-secondary); color: var(--text-primary);  border: 1px solid var(--border-color); }
.badge-success  { background: var(--color-success-light); color: var(--color-success); }
.badge-danger   { background: var(--color-danger-light);  color: var(--color-danger);  }
.badge-warning  { background: var(--color-warning-light); color: var(--color-warning); }
.badge-info     { background: var(--color-info-light);    color: var(--color-info);    }

/* ─── Modals ───────────────────────────────────────── */
.modal-content {
  background: var(--modal-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
}
/* Use !important to beat ingredients.php inline <style> block gradient */
.modal-header {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: 14px 20px;
}
.modal-header .modal-title { color: var(--text-primary) !important; font-weight: 700; font-size: 0.9375rem; }
.modal-header .btn-close { opacity: 0.5; }
.modal-body   { background: var(--bg-card) !important; color: var(--text-primary); padding: 20px; }
.modal-footer { background: var(--bg-secondary) !important; border-top: 1px solid var(--border-color); border-radius: 0 0 var(--radius-lg) var(--radius-lg); gap: 8px; }

/* ─── Dropdowns ────────────────────────────────────── */
.dropdown-menu {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 4px;
}
.dropdown-item { color: var(--text-secondary); font-size: .8125rem; border-radius: 4px; padding: 7px 12px; }
.dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.dropdown-divider { border-color: var(--border-color); }

/* ─── Nav tabs ─────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--border-color); }
.nav-tabs .nav-link {
  color: var(--text-muted); border: none;
  border-bottom: 2px solid transparent; border-radius: 0;
  padding: 9px 16px; font-weight: 600; font-size: .8125rem;
  transition: var(--transition-base); margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: var(--text-primary); }
.nav-tabs .nav-link.active { color: var(--text-primary) !important; background: transparent !important; border-bottom: 2px solid var(--text-primary); }

/* ─── Alerts ───────────────────────────────────────── */
.alert { border-radius: var(--radius); border: 1px solid; font-size: .8125rem; }
.alert-success  { background: var(--color-success-light); color: var(--color-success);  border-color: #bbf7d0; }
.alert-danger   { background: var(--color-danger-light);  color: var(--color-danger);   border-color: #fecaca; }
.alert-warning  { background: var(--color-warning-light); color: var(--color-warning);  border-color: #fde68a; }
.alert-info     { background: var(--color-info-light);    color: var(--color-info);     border-color: #bfdbfe; }

/* ─── List groups / pagination ─────────────────────── */
.list-group-item { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); }
.list-group-item:hover { background: var(--bg-hover); }
.list-group-item.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--text-inverse); }
.page-link { background: var(--bg-card); border-color: var(--border-color); color: var(--text-secondary); }
.page-link:hover { background: var(--bg-secondary); color: var(--text-primary); }
.page-item.active .page-link    { background: var(--color-primary); border-color: var(--color-primary); color: var(--text-inverse); }
.page-item.disabled .page-link  { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-muted); }

/* ─── Header panel / ingredient group headers ──────── */
.ingr-group-header { background: var(--bg-secondary); color: var(--text-primary); border-bottom: 1px solid var(--border-color); }
.ingr-no-group .ingr-group-header { background: var(--bg-tertiary); color: var(--text-secondary); }
/* Force solid — beats the inline gradient in ingredients.php */
.header-panel { background: var(--color-primary) !important; color: var(--text-inverse) !important; }
[data-theme="dark"] .header-panel { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-bottom: 1px solid var(--border-color); }

/* ─── ingredients.php normalization ────────────────── */

/* All .ingridient-button (inline gradients overridden by !important) */
.ingridient-button {
  background: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
  color: var(--text-inverse) !important;
}
.ingridient-button:hover {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  color: var(--text-inverse) !important;
  transform: translateY(-1px) !important;
}

/* Count badges: neutral instead of blue */
.count-badge {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
  font-size: 0.72rem !important;
}
.count-badge.zero {
  background: var(--color-danger-light) !important;
  color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
}

/* Autocomplete dropdown */
.ac-dropdown { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; box-shadow: var(--shadow-md) !important; }
.ac-item:hover, .ac-item.active { background: var(--bg-hover) !important; color: var(--text-primary) !important; }
.ac-item .ac-cat { color: var(--text-muted) !important; }
.ac-item.ac-create { color: var(--text-secondary) !important; font-style: italic; }

/* Row action buttons */
.action-btn { background: transparent !important; border: 1px solid var(--border-color) !important; color: var(--text-muted) !important; }
.action-btn:hover { background: var(--bg-hover) !important; border-color: var(--text-secondary) !important; color: var(--text-primary) !important; }
.action-btn.delete { color: var(--color-danger) !important; }
.action-btn.delete:hover { background: var(--color-danger-light) !important; border-color: var(--color-danger) !important; }
.action-btn.split { color: var(--text-secondary) !important; }
.action-btn.split:hover { border-color: var(--text-secondary) !important; color: var(--text-primary) !important; }

/* Context merge buttons */
.ctx { color: var(--text-muted) !important; }
.ctx-id { color: var(--text-muted) !important; }
.ctx-merge { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; color: var(--text-muted) !important; }
.ctx-merge:hover { background: var(--bg-hover) !important; border-color: var(--text-secondary) !important; color: var(--text-primary) !important; }

/* Group tree elements */
.group-toggle { color: var(--text-muted) !important; }
.group-tree-indent { color: var(--text-muted) !important; }
.group-parent-badge { color: var(--text-muted) !important; border-color: var(--border-color) !important; }
.btn-set-parent { color: var(--text-secondary) !important; border: 1px solid var(--border-color) !important; }
.btn-set-parent:hover { border-color: var(--text-secondary) !important; background: var(--bg-hover) !important; color: var(--text-primary) !important; }
.btn-remove-parent { color: var(--color-danger) !important; border: 1px solid var(--border-color) !important; }
.btn-remove-parent:hover { border-color: var(--color-danger) !important; background: var(--color-danger-light) !important; }

/* Info button states */
.info-btn { border-color: var(--border-color) !important; color: var(--text-muted) !important; }
.info-btn:hover { background: var(--bg-secondary) !important; border-color: var(--text-secondary) !important; color: var(--text-primary) !important; }
.info-btn.has-draft    { background: var(--color-warning-light) !important; border-color: var(--color-warning) !important; color: var(--color-warning) !important; }
.info-btn.has-approved { background: var(--color-success-light) !important; border-color: var(--color-success) !important; color: var(--color-success) !important; }

/* Info status badges */
.info-status.draft    { background: var(--color-warning-light) !important; color: var(--color-warning) !important; }
.info-status.approved { background: var(--color-success-light) !important; color: var(--color-success) !important; }
.info-status.rejected { background: var(--color-danger-light)  !important; color: var(--color-danger)  !important; }

/* ─── Theme toggle button ──────────────────────────── */
.theme-toggle {
  position: fixed; top: 80px; right: 0;
  width: 34px; height: 34px;
  border-radius: 6px 0 0 6px;
  border: 1px solid var(--border-color); border-right: none;
  background: var(--bg-card); color: var(--text-muted);
  cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition-base);
  z-index: 1000; box-shadow: var(--shadow-sm);
}
.theme-toggle:hover { background: var(--bg-secondary); color: var(--text-primary); }

/* ─── Utility ──────────────────────────────────────── */
.text-primary   { color: var(--text-primary)   !important; }
.text-success   { color: var(--color-success)  !important; }
.text-danger    { color: var(--color-danger)    !important; }
.text-warning   { color: var(--color-warning)   !important; }
.text-info      { color: var(--color-info)      !important; }
.text-muted     { color: var(--text-muted)      !important; }
.text-secondary { color: var(--text-secondary)  !important; }
.bg-primary     { background: var(--bg-secondary) !important; }
.bg-secondary   { background: var(--bg-secondary) !important; }
.bg-card        { background: var(--bg-card)      !important; }

/* ─── Select2 ──────────────────────────────────────── */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  min-height: 32px !important;
  color: var(--text-primary) !important;
  transition: border-color 0.14s;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--text-secondary) !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08) !important;
  outline: none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-primary); line-height: 30px; padding-left: 10px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-muted); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 30px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--text-muted) transparent transparent transparent; }
.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--text-secondary) transparent; }
.select2-dropdown {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
  font-family: var(--font-family-base);
  font-size: .8125rem;
}
.select2-search--dropdown .select2-search__field {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  padding: 5px 9px;
  font-family: var(--font-family-base);
  outline: none;
}
.select2-results__option { color: var(--text-secondary); padding: 7px 11px; font-size: .8125rem; }
.select2-results__option--highlighted[aria-selected] { background: var(--bg-secondary) !important; color: var(--text-primary); }
.select2-results__option[aria-selected="true"] { background: var(--color-primary) !important; color: var(--text-inverse) !important; }
.select2-selection__choice {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: 4px !important;
  padding: 2px 7px !important;
}
.select2-selection__choice__remove { color: var(--text-muted) !important; opacity: 0.7; margin-right: 4px; }
.select2-selection__choice__remove:hover { color: var(--color-danger) !important; opacity: 1; }
.select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 2px 8px; }
.select2-container--default .select2-selection--multiple { height: auto; }

/* ─── ingredients.php tree highlight ──────────────────── */
.struct-tree-item.is-target { background: var(--bg-hover) !important; border-left-color: var(--color-primary) !important; color: var(--text-primary) !important; }

/* ═══════════════════════════════════════════════════════
   gemini_grouping.php — Award-quality minimal redesign
   All rules use !important to beat the page's own <style>
   ═══════════════════════════════════════════════════════ */

/* Header: remove gradient, clean card */
.header-panel {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 14px 20px !important;
  border-radius: var(--radius) !important;
}
.header-panel h1,
.header-panel .h1 {
  text-shadow: none !important;
  color: var(--text-primary) !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}
/* Inline status text was color:black (inline style) — override */
#statusText { color: var(--text-secondary) !important; font-size: 11px !important; }

/* ─── Buttons: rectangular, no lift, no gradient ───────── */
.btn {
  border-radius: var(--radius-sm) !important;
  padding: 7px 14px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  transition: background 0.13s, border-color 0.13s, color 0.13s !important;
}
.btn:hover {
  transform: none !important;
  box-shadow: none !important;
}
.btn-ai {
  background: var(--color-primary) !important;
  color: var(--text-inverse) !important;
  border: 1px solid var(--color-primary) !important;
}
.btn-ai:hover {
  background: var(--color-primary-hover) !important;
  color: var(--text-inverse) !important;
}
.btn-approve {
  background: var(--color-success) !important;
  color: #fff !important;
  border: 1px solid var(--color-success) !important;
}
.btn-approve:hover {
  background: var(--color-success-hover) !important;
  color: #fff !important;
}
.btn-back {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
}
.btn-back:hover {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}
.btn-back.black {
  background: var(--color-primary) !important;
  color: var(--text-inverse) !important;
  border-color: var(--color-primary) !important;
}

/* ─── Progress bars: thin 4px stripe ───────────────────── */
.progress-bar-custom {
  height: 4px !important;
  border-radius: 2px !important;
  background: var(--border-color) !important;
}
.progress-fill {
  background: var(--color-primary) !important;
  border-radius: 2px !important;
  font-size: 0 !important;
  color: transparent !important;
}
/* Spell-check top progress bar (fixed height in page) */
#scProgressFill,
#scProcessFill { background: var(--color-primary) !important; border-radius: 2px !important; }

/* ─── Main tab navigation: underline style ──────────────── */
.main-tabs {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  overflow: visible !important;
  margin-bottom: 24px !important;
}
.main-tab {
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  margin-bottom: -1px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  letter-spacing: 0.01em !important;
}
.main-tab:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}
.main-tab.active {
  color: var(--text-primary) !important;
  border-bottom-color: var(--color-primary) !important;
  background: transparent !important;
}
.main-tab .tab-count {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 10px !important;
  padding: 1px 6px !important;
  font-size: 10px !important;
}
.main-tab .tab-count.zero {
  background: transparent !important;
  color: var(--text-muted) !important;
}

/* ─── Stat cards: remove color highlights ───────────────── */
.stat-card.highlight {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
.stat-card.success {
  border-color: var(--border-color) !important;
}
.stat-value {
  font-size: 1.875rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}

/* ─── Confidence badges: use theme semantic colors ───────── */
.confidence-badge { font-weight: 500 !important; font-size: 11px !important; border-radius: 4px !important; }
.conf-high { background: var(--color-success-light) !important; color: var(--color-success) !important; }
.conf-mid  { background: var(--color-warning-light) !important; color: var(--color-warning) !important; }
.conf-low  { background: var(--color-danger-light)  !important; color: var(--color-danger)  !important; }

/* ─── Duplicate styles: use theme semantic colors ─────────── */
.dup-remove { background: var(--color-danger-light)  !important; border: 1px solid rgba(220,38,38,0.12) !important; }
.dup-keep   { background: var(--color-success-light) !important; border: 1px solid rgba(22,163,74,0.12)  !important; }

/* ─── Spell check diff colors ───────────────────────────── */
.sc-current    { background: var(--color-danger-light)  !important; color: var(--color-danger)  !important; }
.sc-corrected  { background: var(--color-success-light) !important; color: var(--color-success) !important; }
.sc-merge-prev { background: var(--bg-secondary) !important; color: var(--text-secondary) !important; }
.sc-merge-next { background: var(--bg-secondary) !important; color: var(--text-secondary) !important; }
.sc-ctx-row td { border-left: 2px solid var(--border-color) !important; background: var(--bg-secondary) !important; }
.sc-ctx-item.target { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; }
.sc-ctx-toggle { color: var(--text-secondary) !important; }

/* ─── Status dot: keep semantic colors ───────────────────── */
.status-dot.ok      { background: var(--color-success) !important; }
.status-dot.fail    { background: var(--color-danger)  !important; }
.status-dot.loading { background: var(--color-warning) !important; }

/* ─── Rule editor & misc ─────────────────────────────────── */
.rule-wrong   { color: var(--color-danger)  !important; }
.rule-correct { color: var(--color-success) !important; }
.rule-edit:hover { color: var(--text-primary) !important; }
.tab-btn { border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important; border-color: var(--border-color) !important; background: var(--bg-secondary) !important; color: var(--text-muted) !important; }
.tab-btn.active { background: var(--bg-card) !important; color: var(--text-primary) !important; }
.bulk-bar { background: var(--bg-secondary) !important; border-bottom: 1px solid var(--border-color) !important; }

/* ═══════════════════════════════════════════════════════
   ingredient_admin.php — Professional minimal redesign
   ═══════════════════════════════════════════════════════ */

/* Stat numbers: near-black, not blue */
.stat-value { color: var(--text-primary) !important; font-size: 1.75rem !important; font-weight: 600 !important; letter-spacing: -0.03em !important; }
.stat-label { color: var(--text-muted) !important; font-size: 12px !important; margin-top: 2px !important; }
.stat { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius) !important; box-shadow: none !important; }

/* Page title */
h1 { font-size: 1.375rem !important; font-weight: 600 !important; letter-spacing: -0.02em !important; color: var(--text-primary) !important; }

/* Bulk-actions bar */
.bulk-actions { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius) !important; padding: 10px 14px !important; margin-bottom: 12px !important; }

/* Row action buttons */
.btn-reject { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; color: var(--text-secondary) !important; }
.btn-reject:hover { background: var(--color-danger-light) !important; border-color: var(--color-danger) !important; color: var(--color-danger) !important; }
.btn-split  { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; color: var(--text-secondary) !important; }
.btn-split:hover  { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; }
.btn-delete { background: transparent !important; border: 1px solid var(--border-color) !important; color: var(--text-muted) !important; }
.btn-delete:hover { background: var(--color-danger-light) !important; border-color: var(--color-danger) !important; color: var(--color-danger) !important; }

/* Row actions container */
.actions .btn { padding: 4px 9px !important; font-size: 12px !important; }

/* Confidence display */
.confidence { border-radius: 4px !important; font-weight: 500 !important; padding: 2px 7px !important; }
.conf-high   { background: var(--color-success-light) !important; color: var(--color-success) !important; }
.conf-medium { background: var(--color-warning-light) !important; color: var(--color-warning) !important; }
.conf-low    { background: var(--color-danger-light)  !important; }

/* Group/assigned chips */
.assigned-group-chip { background: var(--bg-secondary) !important; color: var(--text-secondary) !important; border: 1px solid var(--border-color) !important; border-radius: 4px !important; font-weight: 400 !important; }
.badge-assigned { background: var(--color-success-light) !important; color: var(--color-success) !important; border-radius: 4px !important; font-weight: 500 !important; }
.suggested-chip { color: var(--color-success) !important; border-color: rgba(22,163,74,0.2) !important; border-radius: 4px !important; }
.suggested-chip:hover { background: var(--color-success-light) !important; }

/* Inline edit inputs */
.name-input:hover  { border-color: var(--border-color) !important; background: var(--bg-secondary) !important; }
.name-input:focus  { border-color: var(--text-secondary) !important; background: var(--bg-card) !important; box-shadow: 0 0 0 2px rgba(0,0,0,0.07) !important; }
.name-input.saving { background: var(--color-warning-light) !important; }
.name-input.saved  { background: var(--color-success-light) !important; }
.name-input.save-error { background: var(--color-danger-light) !important; }

.group-input { border: 1px solid var(--border-color) !important; background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; }
.group-input:focus { border-color: var(--text-secondary) !important; background: var(--bg-card) !important; box-shadow: 0 0 0 2px rgba(0,0,0,0.07) !important; }
.group-input.saving { background: var(--color-warning-light) !important; }
.group-input.saved  { background: var(--color-success-light) !important; }

/* Autocomplete dropdown */
.ac-dropdown { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; box-shadow: var(--shadow-md) !important; border-radius: var(--radius-sm) !important; }
.ac-item { border-bottom-color: var(--border-color-light) !important; color: var(--text-primary) !important; }
.ac-item:hover, .ac-item.active { background: var(--bg-secondary) !important; }
.ac-item .ac-cat { color: var(--text-muted) !important; }
.ac-item.ac-create { color: var(--text-secondary) !important; }

/* Context merge buttons */
.ctx { color: var(--text-muted) !important; }
.ctx-id { color: var(--text-muted) !important; }
.ctx-merge { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-muted) !important; border-radius: var(--radius-sm) !important; }
.ctx-merge:hover { background: var(--bg-hover) !important; border-color: var(--text-secondary) !important; color: var(--text-primary) !important; }

/* Highlighted rows: neutral warm, not orange */
tr.highlighted { background: var(--color-warning-light) !important; }
tr.highlighted:hover { background: var(--color-warning-light) !important; filter: brightness(0.97); }
tr.highlighted td:first-child { border-left: 3px solid var(--color-warning) !important; }
.highlight-separator td { background: var(--bg-secondary) !important; color: var(--text-muted) !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.05em !important; }

/* Assigned rows: subtle */
tr.assigned { background: var(--bg-card) !important; }
tr.assigned:hover { background: var(--bg-hover) !important; }
tr.assigned .name-input { color: var(--text-muted) !important; }
tr.assigned:hover .name-input { color: var(--text-primary) !important; }

/* Pagination: neutral */
.pagination { background: var(--bg-card) !important; border-top: 1px solid var(--border-color) !important; }
.pagination a.page-link { background: var(--color-primary) !important; color: var(--text-inverse) !important; border-radius: var(--radius-sm) !important; }
.pagination a.page-link:hover { background: var(--color-primary-hover) !important; }
.pagination a.page-link.current { background: var(--bg-secondary) !important; color: var(--text-secondary) !important; }
.pagination .page-info { color: var(--text-muted) !important; }

/* Sort link */
th a.sort-link:hover { color: var(--text-primary) !important; }

/* Toast notifications */
.toast.success { background: var(--color-success) !important; }
.toast.error   { background: var(--color-danger)  !important; }

/* Modal */
.modal-content { background: var(--bg-card) !important; color: var(--text-primary) !important; border-radius: var(--radius-lg) !important; }
.modal label { color: var(--text-primary) !important; font-weight: 500 !important; }
.help-text { color: var(--text-muted) !important; }
.close-btn { color: var(--text-muted) !important; }
.close-btn:hover { color: var(--text-primary) !important; }