/* ==========================================================================
   REFRICO TEMA – ENDA KÄLLAN FÖR TEMA
   All tema-styling ska ligga här. Sidor ska inte duplicera :root, light-mode
   eller tabell/knappfärger – då kan Tailwind eller annan CSS störa.
   ========================================================================== */
:root {
    --theme-bg: #000000;
    --theme-text: #ffffff;
    --theme-bg-secondary: #1f2937;
    --theme-bg-tertiary: #374151;
    --theme-border: #4b5563;
    --theme-inp-bg: #374151;
    --theme-inp-border: #4b5563;
    --theme-inp-focus: #3b82f6;
    --theme-modal-bg: rgba(0,0,0,0.8);
    --theme-card-bg: #1f2937;
    --theme-card-border: #4b5563;
    --text-muted: rgba(150, 150, 150, 0.2);
    --list-hover-bg: #374151;
    --list-text-hover: #ffffff;
    --theme-accent: #3b82f6;
    --theme-text-muted: #9ca3af;
    --theme-positive: #22c55e;
    --theme-warning: #f59e0b;
    --theme-negative: #ef4444;
}

/* Tvinga body/html till tema överallt (gäller alla sidor) */
html { background-color: var(--theme-bg) !important; }
body { background-color: var(--theme-bg) !important; color: var(--theme-text) !important; transition: background-color 0.2s, color 0.2s; }

/* Ljust läge – sätt variabler på både html och body så att hela sidan följer */
html.light-mode,
body.light-mode {
    --theme-bg: #f5f5f5;
    --theme-text: #1f2937;
    --theme-bg-secondary: #ffffff;
    --theme-bg-tertiary: #f9fafb;
    --theme-border: #e5e7eb;
    --theme-inp-bg: #ffffff;
    --theme-inp-border: #d1d5db;
    --theme-inp-focus: #3b82f6;
    --theme-modal-bg: rgba(0,0,0,0.5);
    --theme-card-bg: #ffffff;
    --theme-card-border: #e5e7eb;
    --text-muted: rgba(150, 150, 150, 0.2);
    --list-hover-bg: #f3f4f6;
    --list-text-hover: #1f2937;
    --theme-accent: #2563eb;
    --theme-text-muted: #6b7280;
    --theme-positive: #16a34a;
    --theme-warning: #1f2937;
    --theme-negative: #dc2626;
}

/* Light mode – både html och body så att det gäller direkt (script kan köra i head) */
html.light-mode .bg-gray-800,
body.light-mode .bg-gray-800 { background-color: #ffffff !important; border-color: #e5e7eb !important; color: #1f2937 !important; }
html.light-mode .bg-gray-700,
body.light-mode .bg-gray-700 { background-color: #f9fafb !important; }
html.light-mode .bg-gray-900,
body.light-mode .bg-gray-900 { background-color: #f5f5f5 !important; }
html.light-mode .text-gray-400,
body.light-mode .text-gray-400 { color: #6b7280 !important; }
html.light-mode .text-white,
body.light-mode .text-white { color: #1f2937 !important; }
html.light-mode .text-gray-500,
body.light-mode .text-gray-500 { color: #6b7280 !important; }
html.light-mode .text-gray-300,
body.light-mode .text-gray-300 { color: #4b5563 !important; }
html.light-mode .text-slate-400,
body.light-mode .text-slate-400 { color: #6b7280 !important; }
html.light-mode .text-slate-300,
body.light-mode .text-slate-300 { color: #4b5563 !important; }
html.light-mode .text-slate-200,
body.light-mode .text-slate-200 { color: #4b5563 !important; }
html.light-mode .text-slate-500,
body.light-mode .text-slate-500 { color: #6b7280 !important; }
html.light-mode .text-slate-600,
body.light-mode .text-slate-600 { color: #4b5563 !important; }
html.light-mode .bg-slate-800,
body.light-mode .bg-slate-800 { background-color: #ffffff !important; border-color: #e5e7eb !important; }
html.light-mode .bg-slate-700,
body.light-mode .bg-slate-700 { background-color: #ffffff !important; border-color: #d1d5db !important; color: #1f2937 !important; }
html.light-mode select.bg-slate-700,
body.light-mode select.bg-slate-700 { background-color: #ffffff !important; border-color: #d1d5db !important; color: #1f2937 !important; }
html.light-mode input.bg-slate-700,
body.light-mode input.bg-slate-700 { background-color: #ffffff !important; border-color: #d1d5db !important; color: #1f2937 !important; }
html.light-mode .bg-slate-600,
body.light-mode .bg-slate-600 { background-color: #f3f4f6 !important; }
html.light-mode .bg-slate-900,
body.light-mode .bg-slate-900 { background-color: #f5f5f5 !important; }
html.light-mode .bg-slate-700\/50,
body.light-mode .bg-slate-700\/50 { background-color: #f3f4f6 !important; }
html.light-mode .bg-slate-800\/50,
body.light-mode .bg-slate-800\/50 { background-color: #ffffff !important; border-color: #e5e7eb !important; }
html.light-mode .bg-slate-900\/50,
body.light-mode .bg-slate-900\/50 { background-color: #f5f5f5 !important; }
html.light-mode .border-slate-700,
body.light-mode .border-slate-700 { border-color: #e5e7eb !important; }
html.light-mode .border-slate-600,
body.light-mode .border-slate-600 { border-color: #d1d5db !important; }
html.light-mode .hover\:bg-slate-700:hover,
body.light-mode .hover\:bg-slate-700:hover { background-color: #e5e7eb !important; }
html.light-mode .hover\:bg-slate-600:hover,
body.light-mode .hover\:bg-slate-600:hover { background-color: #e5e7eb !important; }
html.light-mode thead.bg-slate-700,
body.light-mode thead.bg-slate-700 { background-color: #f3f4f6 !important; }
html.light-mode .divide-slate-700 > *,
body.light-mode .divide-slate-700 > * { border-color: #e5e7eb !important; }
html.light-mode .border-gray-700,
body.light-mode .border-gray-700 { border-color: #e5e7eb !important; }
html.light-mode .border-gray-600,
body.light-mode .border-gray-600 { border-color: #d1d5db !important; }
html.light-mode table,
body.light-mode table { background-color: #ffffff !important; color: var(--theme-text) !important; }
body.light-mode table th,
body.light-mode table td { color: var(--theme-text) !important; }
/* Tabell: vit/ljus header, mörk text, ljusgrå hover – gäller alla tabeller */
html.light-mode thead th,
html.light-mode table thead th,
body.light-mode thead th,
body.light-mode table thead th { background-color: #f3f4f6 !important; color: #1f2937 !important; font-weight: bold !important; }
html.light-mode thead.bg-gray-700,
body.light-mode thead.bg-gray-700 { background-color: #f3f4f6 !important; }
html.light-mode table thead th span,
body.light-mode table thead th span { color: #4b5563 !important; }
html.light-mode table tbody td,
body.light-mode table tbody td { color: #1f2937 !important; }
html.light-mode table thead th:hover,
body.light-mode table thead th:hover { background-color: #e5e7eb !important; }

/* Global tabellheader – alltid ljus med mörk text (slår Tailwind .bg-gray-700) */
html table thead.bg-gray-700,
body table thead.bg-gray-700 { background-color: #e5e7eb !important; }
html table thead.bg-gray-700 th,
body table thead.bg-gray-700 th { background-color: #e5e7eb !important; color: #1f2937 !important; font-weight: bold !important; }
html table thead.bg-gray-700 th span,
body table thead.bg-gray-700 th span { color: #4b5563 !important; }
html table thead.bg-gray-700 th:hover,
body table thead.bg-gray-700 th:hover { background-color: #d1d5db !important; }
/* Index artikel-tabell (id så det slår Tailwind) */
#item-table thead,
#item-table thead.bg-gray-700,
#item-table thead th { background-color: #e5e7eb !important; color: #1f2937 !important; font-weight: bold !important; }
#item-table thead th span { color: #4b5563 !important; }
#item-table thead th:hover { background-color: #d1d5db !important; color: #1f2937 !important; }
/* CRM Försäljning per månad (följer tema – mörkt/ljust via variabler) */
#monthly-sales-table thead { background-color: var(--theme-bg-secondary) !important; }
#monthly-sales-table th { background-color: var(--theme-bg-secondary) !important; color: var(--theme-text) !important; font-weight: bold !important; }
html.light-mode #monthly-sales-table table,
body.light-mode #monthly-sales-table table { background: #ffffff !important; border-color: #e5e7eb !important; }
html.light-mode #monthly-sales-table thead,
body.light-mode #monthly-sales-table thead { background: #f3f4f6 !important; }
html.light-mode #monthly-sales-table th,
body.light-mode #monthly-sales-table th { background: #f3f4f6 !important; color: #1f2937 !important; }
html.light-mode #monthly-sales-table td,
body.light-mode #monthly-sales-table td { color: #1f2937 !important; border-bottom-color: #e5e7eb !important; }
html.light-mode #monthly-sales-table tbody tr:hover,
body.light-mode #monthly-sales-table tbody tr:hover { background: #e5e7eb !important; }
html.light-mode #monthly-sales-table .text-teal-400,
body.light-mode #monthly-sales-table .text-teal-400 { color: #1f2937 !important; }
html.light-mode .card,
body.light-mode .card { background-color: #ffffff !important; border-color: #e5e7eb !important; }
html.light-mode .bg-gray-700,
body.light-mode .bg-gray-700 { background-color: #f3f4f6 !important; }
/* Mörka rutor med genomskinlighet (bg-gray-700/80 och liknande) – ljusa i ljust läge */
html.light-mode .bg-gray-700\/80,
html.light-mode .theme-soft-box,
body.light-mode .bg-gray-700\/80,
body.light-mode .theme-soft-box {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}
html.light-mode [class^="bg-gray-600/"],
html.light-mode [class*=" bg-gray-600/"],
html.light-mode [class^="bg-gray-700/"],
html.light-mode [class*=" bg-gray-700/"],
html.light-mode [class^="bg-gray-800/"],
html.light-mode [class*=" bg-gray-800/"],
html.light-mode [class^="bg-gray-900/"],
html.light-mode [class*=" bg-gray-900/"],
html.light-mode [class^="bg-slate-600/"],
html.light-mode [class*=" bg-slate-600/"],
html.light-mode [class^="bg-slate-700/"],
html.light-mode [class*=" bg-slate-700/"],
html.light-mode [class^="bg-slate-800/"],
html.light-mode [class*=" bg-slate-800/"],
html.light-mode [class^="bg-slate-900/"],
html.light-mode [class*=" bg-slate-900/"],
body.light-mode [class^="bg-gray-600/"],
body.light-mode [class*=" bg-gray-600/"],
body.light-mode [class^="bg-gray-700/"],
body.light-mode [class*=" bg-gray-700/"],
body.light-mode [class^="bg-gray-800/"],
body.light-mode [class*=" bg-gray-800/"],
body.light-mode [class^="bg-gray-900/"],
body.light-mode [class*=" bg-gray-900/"],
body.light-mode [class^="bg-slate-600/"],
body.light-mode [class*=" bg-slate-600/"],
body.light-mode [class^="bg-slate-700/"],
body.light-mode [class*=" bg-slate-700/"],
body.light-mode [class^="bg-slate-800/"],
body.light-mode [class*=" bg-slate-800/"],
body.light-mode [class^="bg-slate-900/"],
body.light-mode [class*=" bg-slate-900/"] {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}
html.light-mode .hover\:bg-gray-600:hover,
html.light-mode .hover\:bg-gray-600\/50:hover,
html.light-mode .hover\:bg-gray-700\/30:hover,
html.light-mode .hover\:bg-gray-700\/50:hover,
html.light-mode .hover\:bg-gray-800:hover,
html.light-mode .hover\:bg-slate-600:hover,
html.light-mode .hover\:bg-slate-600\/50:hover,
html.light-mode .hover\:bg-slate-700\/50:hover,
html.light-mode .hover\:bg-slate-800:hover,
html.light-mode .hover\:bg-slate-800\/40:hover,
html.light-mode .hover\:bg-slate-800\/50:hover,
body.light-mode .hover\:bg-gray-600:hover,
body.light-mode .hover\:bg-gray-600\/50:hover,
body.light-mode .hover\:bg-gray-700\/30:hover,
body.light-mode .hover\:bg-gray-700\/50:hover,
body.light-mode .hover\:bg-gray-800:hover,
body.light-mode .hover\:bg-slate-600:hover,
body.light-mode .hover\:bg-slate-600\/50:hover,
body.light-mode .hover\:bg-slate-700\/50:hover,
body.light-mode .hover\:bg-slate-800:hover,
body.light-mode .hover\:bg-slate-800\/40:hover,
body.light-mode .hover\:bg-slate-800\/50:hover { background-color: #e5e7eb !important; }
html.light-mode .bg-gray-600,
body.light-mode .bg-gray-600 { background-color: #e5e7eb !important; }
html.light-mode .bg-gray-500,
body.light-mode .bg-gray-500 { background-color: #d1d5db !important; }
html.light-mode .border-gray-800,
body.light-mode .border-gray-800 { border-color: #d1d5db !important; }
html.light-mode .border-slate-500,
body.light-mode .border-slate-500 { border-color: #d1d5db !important; }
html.light-mode .border-slate-800,
body.light-mode .border-slate-800 { border-color: #d1d5db !important; }
html.light-mode .text-gray-100,
body.light-mode .text-gray-100 { color: #4b5563 !important; }
html.light-mode .text-gray-200,
body.light-mode .text-gray-200 { color: #4b5563 !important; }
html.light-mode .text-gray-600,
body.light-mode .text-gray-600 { color: #4b5563 !important; }
html.light-mode .text-slate-700,
body.light-mode .text-slate-700 { color: #374151 !important; }
html.light-mode .hover\:bg-gray-600:hover,
body.light-mode .hover\:bg-gray-600:hover { background-color: #e5e7eb !important; }
html.light-mode .hover\:bg-gray-700:hover,
body.light-mode .hover\:bg-gray-700:hover { background-color: #f3f4f6 !important; }
html.light-mode .hover\:text-gray-400:hover,
body.light-mode .hover\:text-gray-400:hover { color: #4b5563 !important; }
html.light-mode .hover\:text-white:hover,
body.light-mode .hover\:text-white:hover { color: #1f2937 !important; }

/* Rubriker och fetstil i ljust läge – alltid mörk text */
html.light-mode h1, html.light-mode h2, html.light-mode h3, html.light-mode h4,
body.light-mode h1, body.light-mode h2, body.light-mode h3, body.light-mode h4 { color: var(--theme-text) !important; }
html.light-mode .font-black, html.light-mode .font-bold, html.light-mode strong,
body.light-mode .font-black, body.light-mode .font-bold, body.light-mode strong { color: var(--theme-text) !important; }
html.light-mode .glass-card,
body.light-mode .glass-card { background: var(--theme-card-bg) !important; border-color: var(--theme-card-border) !important; color: var(--theme-text) !important; }
html.light-mode .prose,
body.light-mode .prose { color: #374151 !important; }
html.light-mode .prose strong,
body.light-mode .prose strong { color: #1f2937 !important; }
html.light-mode .prose h3, html.light-mode .prose h4,
body.light-mode .prose h3, body.light-mode .prose h4 { color: #1d4ed8 !important; }
html.light-mode .prose code,
body.light-mode .prose code { background: #e5e7eb !important; color: #1f2937 !important; }
html.light-mode .bg-black\/20,
html.light-mode .bg-black\/30,
body.light-mode .bg-black\/20,
body.light-mode .bg-black\/30 { background-color: #f3f4f6 !important; color: #1f2937 !important; }
html.light-mode .bg-black\/80,
body.light-mode .bg-black\/80 { background-color: rgba(0,0,0,0.5) !important; }
/* Grön/teal/emerald text i ljust läge – svart så att den syns tydligt */
html.light-mode .text-teal-400, html.light-mode .text-teal-300,
body.light-mode .text-teal-400, body.light-mode .text-teal-300 { color: #1f2937 !important; }
html.light-mode .text-green-400, html.light-mode .text-green-300,
body.light-mode .text-green-400, body.light-mode .text-green-300 { color: #1f2937 !important; }
html.light-mode .text-green-200,
body.light-mode .text-green-200 { color: #166534 !important; }
html.light-mode .text-emerald-400, html.light-mode .text-emerald-300, html.light-mode .text-emerald-500,
body.light-mode .text-emerald-400, body.light-mode .text-emerald-300, body.light-mode .text-emerald-500 { color: #1f2937 !important; }
/* Gul, amber och orange text i ljust läge – svart på ljus bakgrund */
html.light-mode [class*="text-yellow-"],
html.light-mode [class*="text-amber-"],
html.light-mode [class*="text-orange-"],
body.light-mode [class*="text-yellow-"],
body.light-mode [class*="text-amber-"],
body.light-mode [class*="text-orange-"] { color: #1f2937 !important; }
html.light-mode .crm-v2-freshness-stale,
body.light-mode .crm-v2-freshness-stale { color: #1f2937 !important; background: #fef3c7 !important; }
html.light-mode [class*="bg-yellow-9"],
html.light-mode [class*="bg-amber-9"],
html.light-mode [class*="bg-amber-8"],
body.light-mode [class*="bg-yellow-9"],
body.light-mode [class*="bg-amber-9"],
body.light-mode [class*="bg-amber-8"] {
    background-color: #fef3c7 !important;
    color: #1f2937 !important;
}
html.light-mode .text-blue-300,
body.light-mode .text-blue-300 { color: #1d4ed8 !important; }
html.light-mode .text-slate-400,
body.light-mode .text-slate-400 { color: #6b7280 !important; }
html.light-mode .tab-btn,
body.light-mode .tab-btn { color: #6b7280 !important; }
html.light-mode .tab-btn:hover,
body.light-mode .tab-btn:hover { color: #374151 !important; }
html.light-mode .tab-btn.active,
body.light-mode .tab-btn.active { color: #1d4ed8 !important; }
html.light-mode ::-webkit-scrollbar-track,
body.light-mode ::-webkit-scrollbar-track { background: #e5e7eb !important; }
html.light-mode ::-webkit-scrollbar-thumb,
body.light-mode ::-webkit-scrollbar-thumb { background: #d1d5db !important; }

/* Textmarkering (när man drar och markerar text) – ljusgrå i ljust läge */
html.light-mode ::selection,
body.light-mode ::selection { background-color: #cbd5e1 !important; color: #1e293b !important; }
html.light-mode ::-moz-selection,
body.light-mode ::-moz-selection { background-color: #cbd5e1 !important; color: #1e293b !important; }

/* Hover på tabellrader och listor */
html.light-mode table tbody tr:hover,
body.light-mode table tbody tr:hover { background-color: #e5e7eb !important; }
html.light-mode table tbody tr:hover td,
body.light-mode table tbody tr:hover td { color: #1f2937 !important; }
html.light-mode tr:hover,
body.light-mode tr:hover { background-color: #f1f5f9 !important; }
html.light-mode tbody tr:hover,
body.light-mode tbody tr:hover { background-color: #e5e7eb !important; }
html.light-mode .list-item:hover,
body.light-mode .list-item:hover { background-color: #f1f5f9 !important; }

/* Knappar i ljust läge – samma som verktygskorten: vit bakgrund, mjuk skugga, hover lyft.
   Hög specificitet (html.light-mode + .btn) så att det slår styles.css och Tailwind. */
html.light-mode .btn,
body.light-mode .btn {
    color: #1f2937 !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
html.light-mode .btn:hover,
body.light-mode .btn:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}
/* Neutrala knappar (Tillbaka etc.) – vit som verktygskort */
html.light-mode .btn.btn-dark,
html.light-mode .btn.btn-gray,
body.light-mode .btn.btn-dark,
body.light-mode .btn.btn-gray,
html.light-mode .btn-dark,
html.light-mode .btn-gray,
body.light-mode .btn-dark,
body.light-mode .btn-gray {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #e5e7eb !important;
}
html.light-mode .btn.btn-dark:hover,
html.light-mode .btn.btn-gray:hover,
body.light-mode .btn.btn-dark:hover,
body.light-mode .btn.btn-gray:hover,
html.light-mode .btn-dark:hover,
html.light-mode .btn-gray:hover,
body.light-mode .btn-dark:hover,
body.light-mode .btn-gray:hover {
    background-color: #f3f4f6 !important;
    background: #f3f4f6 !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}
/* Färgknappar – behåll accentfärg, samma hover-lyft och skugga */
html.light-mode .btn-primary,
html.light-mode .btn-blue,
body.light-mode .btn-primary,
body.light-mode .btn-blue { background: #2563eb !important; color: #ffffff !important; border-color: #1d4ed8 !important; }
html.light-mode .btn-primary:hover,
html.light-mode .btn-blue:hover,
body.light-mode .btn-primary:hover,
body.light-mode .btn-blue:hover { background: #1d4ed8 !important; color: #ffffff !important; }
html.light-mode .btn-success,
body.light-mode .btn-success { background: #16a34a !important; color: #ffffff !important; }
html.light-mode .btn-success:hover,
body.light-mode .btn-success:hover { background: #15803d !important; color: #ffffff !important; }
html.light-mode .btn-danger,
html.light-mode .btn-red,
body.light-mode .btn-danger,
body.light-mode .btn-red { background: #dc2626 !important; color: #ffffff !important; }
html.light-mode .btn-danger:hover,
html.light-mode .btn-red:hover,
body.light-mode .btn-danger:hover,
body.light-mode .btn-red:hover { background: #b91c1c !important; color: #ffffff !important; }
html.light-mode .btn-warning,
body.light-mode .btn-warning { background: #f59e0b !important; color: #111827 !important; }
html.light-mode .btn-warning:hover,
body.light-mode .btn-warning:hover { background: #d97706 !important; color: #ffffff !important; }
html.light-mode .btn-info,
body.light-mode .btn-info { background: #0ea5e9 !important; color: #ffffff !important; }
html.light-mode .btn-info:hover,
body.light-mode .btn-info:hover { background: #0284c7 !important; color: #ffffff !important; }
html.light-mode .btn-emerald,
body.light-mode .btn-emerald { background: #10b981 !important; color: #ffffff !important; }
html.light-mode .btn-emerald:hover,
body.light-mode .btn-emerald:hover { background: #059669 !important; color: #ffffff !important; }
html.light-mode .btn-cyan,
body.light-mode .btn-cyan { background: #06b6d4 !important; color: #ffffff !important; }
html.light-mode .btn-cyan:hover,
body.light-mode .btn-cyan:hover { background: #0891b2 !important; color: #ffffff !important; }
html.light-mode .btn-teal,
body.light-mode .btn-teal { background: #14b8a6 !important; color: #ffffff !important; }
html.light-mode .btn-teal:hover,
body.light-mode .btn-teal:hover { background: #0d9488 !important; color: #ffffff !important; }
html.light-mode .btn-purple,
body.light-mode .btn-purple { background: #9333ea !important; color: #ffffff !important; }
html.light-mode .btn-purple:hover,
body.light-mode .btn-purple:hover { background: #7e22ce !important; color: #ffffff !important; }
html.light-mode .btn-rose,
body.light-mode .btn-rose { background: #e11d48 !important; color: #ffffff !important; }
html.light-mode .btn-rose:hover,
body.light-mode .btn-rose:hover { background: #be185d !important; color: #ffffff !important; }
html.light-mode .btn-indigo,
body.light-mode .btn-indigo { background: #6366f1 !important; color: #ffffff !important; }
html.light-mode .btn-indigo:hover,
body.light-mode .btn-indigo:hover { background: #4f46e5 !important; color: #ffffff !important; }
html.light-mode a.btn,
body.light-mode a.btn { color: inherit; }

/* List-stilar */
.list-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.list-item {
    background-color: transparent;
    padding: 1rem;
    border-bottom: 1px solid var(--text-muted);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.list-item:last-child {
    border-bottom: none;
}

.list-item:hover {
    background-color: var(--list-hover-bg);
    color: var(--list-text-hover);
    border-radius: 8px;
}

/* Index: autofill-fälla – fixed långt utanför viewport, ingen negativ z-index (kan synas genom body) */
.refrico-autofill-honeypot-sink {
    position: fixed !important;
    left: -10000px !important;
    top: -10000px !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.refrico-autofill-honeypot-sink .refrico-autofill-honeypot {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    opacity: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    color: transparent !important;
    caret-color: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Topprad: språk + hjälp (F1) – höger uppe, inte i vägen för tabeller längst ned. */
.refrico-top-bar {
    position: fixed !important;
    top: max(0.5rem, env(safe-area-inset-top, 0px)) !important;
    right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 45;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    pointer-events: none;
    max-width: calc(100vw - 1.5rem);
}
.refrico-top-bar > * {
    pointer-events: auto;
}
/* Språkväxlare i underside-header (bredvid Hem) – ingen fixed krock. */
.refrico-subpage-actions .refrico-lang-switch-host--inline {
    position: static !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
}
.refrico-top-bar .refrico-lang-switch-host {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    pointer-events: auto;
}

/* Språkväxlare (i18n) – inuti topprad eller inbäddad (t.ex. login). */
.refrico-lang-switch-host {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1;
    pointer-events: auto;
    max-width: calc(100vw - 2rem);
}
/* login.php: i sidflöde ovanför kortet (undviker att flex-body placerar växlaren brevid kortet) */
.refrico-lang-switch-host--embed {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1;
    pointer-events: auto;
    max-width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}
.refrico-lang-switch-host--embed .refrico-lang-switch__panel {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.25rem;
}
.refrico-lang-switch-host .refrico-lang-switch__panel {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    background: var(--theme-card-bg, rgba(15, 23, 42, 0.92));
    border: 1px solid var(--theme-border);
    border-radius: 0.375rem;
    padding: 0.2rem 0.25rem 0.2rem 0.35rem;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}
.refrico-lang-switch-host--hidden .refrico-lang-switch__panel {
    display: none !important;
}
.refrico-lang-switch__reveal {
    display: none;
    pointer-events: auto;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    min-height: 1.6rem;
    font-size: 1rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    color: var(--theme-text, #e2e8f0);
    background: var(--theme-card-bg, rgba(15, 23, 42, 0.92));
    border: 1px solid var(--theme-border);
    border-radius: 0.375rem;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    font-family: "Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.refrico-lang-switch__reveal:hover,
.refrico-lang-switch__reveal:focus-visible {
    border-color: var(--theme-inp-focus);
    background: var(--theme-bg-tertiary);
    outline: none;
}
.refrico-lang-switch-host--hidden .refrico-lang-switch__reveal {
    display: inline-flex;
}
.refrico-lang-switch__hide {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    min-height: 1.4rem;
    margin: 0;
    padding: 0.05rem;
    border: none;
    border-radius: 0.25rem;
    background: transparent;
    color: var(--theme-text, #e2e8f0);
    opacity: 0.6;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    font-weight: 700;
}
.refrico-lang-switch__hide:hover,
.refrico-lang-switch__hide:focus-visible {
    opacity: 1;
    background: var(--theme-bg-tertiary);
    outline: none;
}
.refrico-lang-switch-host .refrico-lang-switch {
    pointer-events: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
}
.refrico-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
}
.refrico-lang-switch__a,
.refrico-lang-switch__cur {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.refrico-lang-switch__flag {
    position: relative;
    display: inline-block;
    width: 1.25rem;
    height: 0.85rem;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 0.12rem;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.55);
    background: var(--theme-bg-tertiary, #334155);
    vertical-align: -0.08em;
}
.refrico-lang-switch__flag::before,
.refrico-lang-switch__flag::after {
    content: "";
    position: absolute;
    inset: 0;
}
.refrico-lang-switch__flag--sv {
    background: #006aa7;
}
.refrico-lang-switch__flag--sv::before {
    left: 32%;
    width: 18%;
    background: #fecc00;
}
.refrico-lang-switch__flag--sv::after {
    top: 38%;
    height: 22%;
    background: #fecc00;
}
.refrico-lang-switch__flag--de {
    background: linear-gradient(to bottom, #000 0 33.33%, #dd0000 33.33% 66.66%, #ffce00 66.66% 100%);
}
.refrico-lang-switch__flag--en {
    background:
        linear-gradient(to bottom, transparent 40%, #fff 40% 60%, transparent 60%),
        linear-gradient(to right, transparent 40%, #fff 40% 60%, transparent 60%),
        linear-gradient(26deg, transparent 44%, #fff 44% 56%, transparent 56%),
        linear-gradient(-26deg, transparent 44%, #fff 44% 56%, transparent 56%),
        #012169;
}
.refrico-lang-switch__flag--en::before {
    background:
        linear-gradient(to bottom, transparent 45%, #c8102e 45% 55%, transparent 55%),
        linear-gradient(to right, transparent 45%, #c8102e 45% 55%, transparent 55%);
}
.refrico-lang-switch__reveal-icon {
    font-size: 1rem;
    line-height: 1;
    font-family: "Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.refrico-lang-switch__txt {
    white-space: nowrap;
}
.refrico-lang-switch__a {
    color: var(--theme-text);
    opacity: 0.75;
    text-decoration: none;
    padding: 0.12rem 0.3rem;
    border-radius: 0.25rem;
    border: 1px solid transparent;
}
.refrico-lang-switch__a:hover {
    opacity: 1;
    border-color: var(--theme-inp-focus);
    background: var(--theme-bg-tertiary);
}
.refrico-lang-switch__cur {
    color: var(--theme-text);
    opacity: 1;
    padding: 0.12rem 0.3rem;
    border-radius: 0.25rem;
    border: 1px solid var(--theme-inp-focus);
    background: var(--theme-bg-tertiary);
}

@media print {
    .refrico-top-bar,
    .refrico-lang-switch-host,
    #help-trigger-btn {
        display: none !important;
    }
}

/* Fördröjd laddningsindikator (js/refrico-delayed-loader.js) – visas efter ~1 s vid långsamma importer m.m. */
.refrico-delayed-loading {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.refrico-delayed-loading.refrico-delayed-loading--visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.refrico-delayed-loading__backdrop {
    position: absolute;
    inset: 0;
    background: var(--theme-modal-bg, rgba(0, 0, 0, 0.55));
}
.refrico-delayed-loading__box {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    background: var(--theme-card-bg, #1f2937);
    border: 1px solid var(--theme-border, #4b5563);
    color: var(--theme-text, #fff);
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    max-width: min(90vw, 24rem);
}
.refrico-delayed-loading__spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--theme-border, #4b5563);
    border-top-color: var(--theme-inp-focus, #3b82f6);
    border-radius: 50%;
    animation: refrico-dl-spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes refrico-dl-spin {
    to { transform: rotate(360deg); }
}
body.refrico-delayed-loading-active {
    cursor: wait;
}
@media print {
    .refrico-delayed-loading {
        display: none !important;
    }
}

/* CRM v2 – status och Kundbesök */
.board-v2-status-new { color: var(--theme-positive); }
.board-v2-status-changed { color: var(--theme-warning); }
.board-v2-status-gone { color: var(--theme-negative); }

.field-v2-panel-bought,
.field-v2-panel-stopped {
    border-left: none;
    background: transparent;
}
.field-v2-panel-title--bought { color: var(--theme-positive); }
.field-v2-panel-title--stopped { color: var(--theme-negative); }

.field-v2-tab-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--theme-border);
    -webkit-overflow-scrolling: touch;
}
.field-v2-tab-bar .crm-v2-field-tab {
    flex: 0 0 auto;
    white-space: nowrap;
}

.field-v2-kpi-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--theme-border);
    border-radius: 0.75rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--theme-card-bg) 92%, var(--theme-bg));
}
@media (min-width: 768px) {
    .field-v2-kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.field-v2-kpi-strip > article {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--theme-border);
}
.field-v2-kpi-strip > article:nth-child(odd) {
    border-right: 1px solid var(--theme-border);
}
@media (min-width: 768px) {
    .field-v2-kpi-strip > article {
        border-bottom: 0;
        border-right: 1px solid var(--theme-border);
    }
    .field-v2-kpi-strip > article:nth-child(odd) { border-right: 1px solid var(--theme-border); }
    .field-v2-kpi-strip > article:last-child { border-right: 0; }
}

.field-v2-customer-details > summary::-webkit-details-marker { display: none; }
.field-v2-customer-details-summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 0.35rem;
    transition: transform 0.15s ease;
}
.field-v2-customer-details[open] > .field-v2-customer-details-summary::before {
    transform: rotate(90deg);
}

.field-v2-customer-details .field-v2-customer-pick {
    width: 100%;
    text-align: left;
}

.field-v2-customer-search-input {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    font-size: 1rem;
    line-height: 1.4;
    padding: 0.65rem 0.875rem;
    box-sizing: border-box;
}
.field-v2-customer-toolbar select.inp {
    min-height: 2.5rem;
    box-sizing: border-box;
}

.field-v2-group-type {
    margin-top: 0.125rem;
}

.field-v2-legend-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    flex-shrink: 0;
}
.field-v2-legend-dot--current {
    background: var(--theme-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent) 35%, transparent);
}
.field-v2-legend-dot--compare {
    background: color-mix(in srgb, var(--theme-text-muted) 70%, var(--theme-border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-text-muted) 25%, transparent);
}
.field-v2-legend-current { color: var(--theme-text); }
.field-v2-legend-compare { color: var(--theme-text-muted); }

.field-v2-insight-row--stopped {
    background: color-mix(in srgb, var(--theme-negative) 6%, transparent);
}
.field-v2-insight-row--new {
    background: color-mix(in srgb, var(--theme-positive) 6%, transparent);
}
.field-v2-new-item-amount { color: var(--theme-positive); font-weight: 600; }
.field-v2-yoy-up { color: var(--theme-positive); }
.field-v2-yoy-down { color: var(--theme-negative); }
.field-v2-kpi-up { color: var(--theme-positive); }
.field-v2-kpi-down { color: var(--theme-negative); }

.field-v2-section-label--stopped { color: var(--theme-negative); }
.field-v2-section-label--new { color: var(--theme-positive); }
.field-v2-stopped-group-pick .field-v2-stopped-amount { color: var(--theme-negative); font-weight: 600; }

.crm-v2-sort-btn {
    cursor: pointer;
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
}

/* CRM v2 – hamburgermeny (drawer) och listor */
.crm-v2-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: color-mix(in srgb, var(--theme-bg) 35%, #000 65%);
    opacity: 0.55;
}
body.crm-v2-nav-open .crm-v2-nav-overlay {
    display: block;
}
#crm-v2-sidebar.crm-v2-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 81;
    width: min(100vw - 3rem, 17.5rem);
    max-width: 17.5rem;
    background: var(--theme-bg-secondary, var(--theme-card-bg));
    border-right: 1px solid var(--theme-border);
    box-shadow: 8px 0 32px color-mix(in srgb, var(--theme-bg) 20%, #000 35%);
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    overflow: hidden;
}
body.crm-v2-nav-open #crm-v2-sidebar.crm-v2-nav-drawer {
    transform: translateX(0);
}
.crm-v2-nav-drawer-head {
    border-bottom: 1px solid var(--theme-border);
}
.crm-v2-nav-drawer-close {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    padding: 0 !important;
}
.crm-v2-shell {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
}
.crm-v2-sidebar-toggle {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.crm-v2-user-chip {
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}
@media print {
    .crm-v2-sidebar-toggle,
    .crm-v2-nav-overlay,
    #crm-v2-sidebar { display: none !important; }
}
.crm-v2-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.crm-v2-nav-foot {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 0.75rem 0.75rem;
    shrink: 0;
}
#crm-v2-sidebar .crm-v2-nav-btn.hidden {
    display: none !important;
}
.crm-v2-nav-divider {
    border-top: 1px solid var(--theme-border);
    margin: 0.25rem 0;
}
#crm-v2-sidebar .crm-v2-nav-btn {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    white-space: nowrap;
    gap: 0.5rem;
}
#crm-v2-sidebar .crm-v2-nav-btn span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
#crm-v2-sidebar .crm-v2-nav-btn svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}
#crm-v2-sidebar .crm-v2-nav-btn.active,
#crm-v2-sidebar .crm-v2-nav.active {
    background: var(--color-primary, #2563eb);
    color: #fff;
}
#crm-v2-sidebar .crm-v2-nav-btn.active:hover,
#crm-v2-sidebar .crm-v2-nav.active:hover {
    background: #1d4ed8;
    color: #fff;
}
.crm-v2-sidebar-sub {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0.125rem 0 0.125rem 0.5rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--theme-border);
}
body:not([data-crm-v2-view="reports"]) .crm-v2-sidebar-sub {
    display: none;
}
#crm-v2-sidebar .crm-v2-board-tab-btn.active {
    background: var(--color-primary, #2563eb);
    color: #fff;
    box-shadow: inset 3px 0 0 color-mix(in srgb, #fff 35%, var(--color-primary));
}
#crm-v2-sidebar .crm-v2-board-tab-btn.active:hover {
    background: #1d4ed8;
    color: #fff;
}

.crm-v2-list-panel {
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    overflow-x: hidden;
}
.crm-v2-list-panel.crm-v2-scroll {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--theme-border) transparent;
}
.crm-v2-list-panel.crm-v2-scroll::-webkit-scrollbar {
    width: 8px;
}
.crm-v2-list-panel.crm-v2-scroll::-webkit-scrollbar-thumb {
    background: var(--theme-border);
    border-radius: 999px;
}
.crm-v2-groups-list-panel {
    max-height: var(--crm-v2-groups-list-max-height, min(24rem, 50vh));
}
#field-v2-groups-panel.crm-v2-groups-list-panel {
    max-height: var(--crm-v2-groups-list-max-height, min(36rem, 55vh));
}
.crm-v2-groups-list-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
#board-v2-groups-sort,
#field-v2-groups-sort {
    padding: 0.5rem 0.5rem 0;
}
.crm-v2-groups-list-scroll .list-item:last-child,
.crm-v2-groups-list-scroll .crm-v2-list-item:last-child {
    border-bottom: none;
}
.crm-v2-list-panel .list-item,
.crm-v2-list-panel .crm-v2-list-item {
    width: 100%;
    text-align: left;
    border-radius: 0;
    border-bottom: 1px solid var(--theme-border);
}
button.list-item {
    border: none;
    font: inherit;
    color: inherit;
    background: transparent;
}
.crm-v2-list-panel .board-v2-group-pick {
    align-items: flex-start;
}
.crm-v2-list-panel .list-item:last-child,
.crm-v2-list-panel .crm-v2-list-item:last-child {
    border-bottom: none;
}
.crm-v2-list-item.active,
.crm-v2-list-panel .list-item.active {
    background: color-mix(in srgb, var(--theme-accent, #2563eb) 14%, var(--theme-card-bg));
    box-shadow: inset 3px 0 0 var(--theme-accent, #2563eb);
    color: var(--theme-text);
}

.board-v2-group-pick {
    border: none;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.board-v2-group-pick:not(.board-v2-group-pick--active):not(.active) { opacity: 0.92; }
.board-v2-group-pick:hover { opacity: 1; }
.board-v2-group-pick--active,
.board-v2-group-pick.active { opacity: 1; }
.board-v2-group-pick--active .board-v2-group-pick-label,
.board-v2-group-pick.active .board-v2-group-pick-label { font-weight: 700; }

/* KAM: presentationsläge – dölj intern navigation och filter */
body.kam-v2-presentation .crm-v2-shell > header,
body.kam-v2-presentation #crm-v2-sidebar,
body.kam-v2-presentation .crm-v2-nav-overlay,
body.kam-v2-presentation .crm-v2-sidebar-toggle,
body.kam-v2-presentation #kam-v2-setup-panel,
body.kam-v2-presentation #kam-v2-pick-group,
body.kam-v2-presentation #kam-v2-tools-open,
body.kam-v2-presentation .kam-v2-tools-backdrop,
body.kam-v2-presentation #kam-v2-tools-panel,
body.kam-v2-presentation #kam-v2-error {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.kam-v2-presentation .crm-v2-shell {
    height: 100vh;
}

body.kam-v2-presentation #view-kam {
    padding-top: 1rem;
}

.kam-v2-presentation-exit {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 120;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

body:not(.kam-v2-presentation) .kam-v2-presentation-exit {
    display: none !important;
}

.kam-v2-tools-backdrop {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: color-mix(in srgb, var(--theme-bg, #0f172a) 55%, transparent);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.kam-v2-tools-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 191;
    width: min(100%, 42rem);
    display: flex;
    flex-direction: column;
    background: var(--theme-card-bg, var(--theme-bg-secondary));
    border-left: 1px solid var(--theme-border);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.28);
    transform: translateX(105%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.22s ease, visibility 0.22s ease;
}

body.kam-v2-tools-open .kam-v2-tools-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.kam-v2-tools-open .kam-v2-tools-panel {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

body.kam-v2-tools-open {
    overflow: hidden;
}

.index-items-more-item--file {
    margin: 0;
}

/* Index: justerbara monitor-rutor (Hansa / påfyllning) */
.index-monitor-panels {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .index-monitor-panels {
        display: grid;
        grid-template-columns: minmax(180px, var(--index-hansa-cols, 50fr)) 6px minmax(180px, var(--index-restock-cols, 50fr));
        gap: 0 0.75rem;
        align-items: stretch;
    }
}
.index-monitor-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    container-type: inline-size;
}
.index-monitor-panel-head {
    min-width: 0;
}
.index-monitor-panel-title {
    min-width: 0;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.index-monitor-panel-actions {
    min-width: 0;
}
.index-monitor-panel-actions .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
}
@container (max-width: 340px) {
    .index-monitor-panel-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .index-monitor-panel-actions .btn {
        width: 100%;
    }
}
.index-monitor-list {
    flex: 0 0 auto;
    min-height: 8rem;
    overflow-y: auto;
}
.index-monitor-list--hansa {
    height: var(--index-hansa-list-h, 20rem);
}
.index-monitor-list--restock {
    height: var(--index-restock-list-h, 20rem);
}
.index-monitor-resize-h {
    flex-shrink: 0;
    height: 10px;
    margin-top: 0.35rem;
    cursor: ns-resize;
    border-radius: 0 0 0.5rem 0.5rem;
    background: var(--theme-border, #4b5563);
    opacity: 0.55;
    position: relative;
    touch-action: none;
}
.index-monitor-resize-h:hover,
body.index-monitor-dragging-h .index-monitor-resize-h {
    opacity: 1;
    background: color-mix(in srgb, var(--theme-accent, #ec6608) 35%, var(--theme-border, #4b5563));
}
.index-monitor-resize-h::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2rem;
    height: 3px;
    border-radius: 2px;
    background: var(--theme-muted-text, #94a3b8);
}
.index-monitor-splitter {
    display: none;
    touch-action: none;
}
@media (min-width: 768px) {
    .index-monitor-splitter {
        display: block;
        cursor: col-resize;
        position: relative;
        align-self: stretch;
        min-height: 100%;
    }
    .index-monitor-splitter::before {
        content: '';
        position: absolute;
        top: 0.5rem;
        bottom: 0.5rem;
        left: 50%;
        width: 4px;
        margin-left: -2px;
        border-radius: 2px;
        background: var(--theme-border, #4b5563);
        opacity: 0.45;
    }
    .index-monitor-splitter:hover::before,
    body.index-monitor-dragging-w .index-monitor-splitter::before {
        opacity: 1;
        background: var(--theme-accent, #ec6608);
    }
}
body.index-monitor-dragging-h {
    cursor: ns-resize !important;
    user-select: none;
}
body.index-monitor-dragging-w {
    cursor: col-resize !important;
    user-select: none;
}
body.index-monitor-dragging-h *,
body.index-monitor-dragging-w * {
    cursor: inherit !important;
}

/* Hansa-order: radbrytning i smala paneler */
.index-monitor-order-card {
    min-width: 0;
}
.index-monitor-order-body {
    min-width: 0;
}
.index-monitor-order-company {
    word-break: break-word;
    overflow-wrap: anywhere;
}
.index-monitor-order-items {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.index-monitor-order-items .grid {
    min-width: 0;
}
.index-monitor-order-items .col-span-2,
.index-monitor-order-items .col-span-4,
.index-monitor-order-items .col-span-6 {
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.index-monitor-order-items .col-span-4 {
    word-break: break-all;
}

html.printing-labels,
html.printing-labels body {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111111 !important;
    color-scheme: light !important;
}

/* Utskrift: mörkt tema får INTE följa med till skrivaren.
   Annars blir pappret svart och QR/streckkod inverteras (vitt på svart).
   "Spara som PDF" hoppar ofta över bakgrunder, därför såg PDF rätt ut. */
@media print {
    :root {
        --theme-bg: #ffffff;
        --theme-text: #111111;
        --theme-bg-secondary: #ffffff;
        --theme-bg-tertiary: #ffffff;
        --theme-border: #d1d5db;
        --theme-card-bg: #ffffff;
        --theme-card-border: #d1d5db;
        --theme-text-muted: #4b5563;
    }
    html, body {
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #111111 !important;
        color-scheme: light !important;
    }
}