/* KitchenFlow Theme Styles */

:root {
    --bs-primary: #f27d26;
    --bs-success: #198754;
    --bs-danger: #dc3545;
    --bs-warning: #ffc107;
    --bs-warning-rgb: 255, 193, 7;
    --bs-info: #0dcaf0;
    --bs-info-rgb: 13, 202, 240;
    --kf-info-text-emphasis: #084298;
    --kf-warning-text-emphasis: #664d03;
    --bs-success-text-emphasis: #0a3622;
    --bs-danger-text-emphasis: #58151c;

    /* Custom variables derived from custom.css */
    --kf-hover-bg-subtle: var(--bs-tertiary-bg); /* For permissions-accordion .category-header:hover */
    --kf-form-check-input-border: var(--bs-secondary); /* For permissions-accordion .form-check-input border */
    --kf-accordion-active-bg: var(--bs-primary-bg-subtle); /* For article-detail .accordion-button:not(.collapsed) background */
    --kf-accordion-active-color: var(--bs-primary); /* For article-detail .accordion-button:not(.collapsed) color */
    --kf-code-color: var(--bs-pink); /* For markdown-content code color */
    --kf-search-result-hover-bg: rgba(var(--bs-success-rgb), .1); /* For #article-search-results .list-group-item:hover:not(.active) */

    /* Orders List Redesign variables mapped to Bootstrap */
    --ol-steel: var(--bs-body-color);
    --ol-steel-rgb: 45, 52, 54;
    --ol-steel-light: var(--bs-secondary-color);
    --ol-steel-muted: var(--bs-tertiary-color);
    --ol-surface: var(--bs-body-bg);
    --ol-surface-warm: var(--bs-tertiary-bg);
    --ol-white: var(--bs-white);

    --ol-herb: var(--bs-success);
    --ol-herb-rgb: 0, 184, 148;
    --ol-herb-light: var(--bs-success-bg-subtle);
    --ol-tomato: var(--bs-danger);
    --ol-tomato-rgb: 225, 112, 85;
    --ol-tomato-light: var(--bs-danger-bg-subtle);
    --ol-lemon: var(--bs-warning);
    --ol-lemon-light: var(--bs-warning-bg-subtle);
    --ol-eggplant: var(--bs-primary); /* Mapping to primary for now */
    --ol-eggplant-light: var(--bs-primary-bg-subtle);

    --ol-status-draft: var(--bs-info);
    --ol-status-draft-bg: var(--bs-info-bg-subtle);
    --ol-status-sent: var(--bs-secondary);
    --ol-status-sent-bg: var(--bs-secondary-bg-subtle);
    --ol-status-received: var(--bs-success);
    --ol-status-received-bg: var(--bs-success-bg-subtle);
    --ol-status-cancelled: var(--bs-danger);
    --ol-status-cancelled-bg: var(--bs-danger-bg-subtle);

    /* Shadows mapped to Bootstrap */
    --ol-shadow-subtle: var(--bs-box-shadow-sm);
    --ol-shadow-soft: var(--bs-box-shadow);
    --ol-shadow-medium: var(--bs-box-shadow-lg);
    --ol-shadow-strong: var(--bs-box-shadow-sm); /* Re-evaluating this one */
    --ol-shadow-glow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
    --bs-black-rgb: 0, 0, 0;
    --bs-white-rgb: 255, 255, 255;
    --bs-primary-rgb: 242, 125, 38;
    --bs-success-rgb: 25, 135, 84;
    --bs-danger-rgb: 220, 53, 69;
    --bs-dark-rgb: 33, 37, 41;
    --bs-secondary-rgb: 108, 117, 125;

    /* FAB variables mapped to Bootstrap */
    --fab-bg: var(--bs-primary);
    --fab-contrast: var(--bs-white);
    --fab-accent: var(--bs-primary);
    --fab-action-bg: var(--bs-white);
    --fab-action-text: var(--bs-body-color);
    --fab-shadow: 0 .5rem 1rem rgba(var(--bs-primary-rgb),.18);

    /* Recipe Detail Page - Accordion Layout variables mapped to Bootstrap */
    --accent-primary-rgb: var(--bs-primary-rgb);
    --accent-success-rgb: var(--bs-success-rgb);
    --accent-warning-rgb: var(--bs-warning-rgb);
    --accent-danger-rgb: var(--bs-danger-rgb);
    --muted-rgb: var(--bs-secondary-rgb);
    --accent-white-rgb: var(--bs-white-rgb);
    --bs-purple: #6f42c1;
    --bs-purple-rgb: 111, 66, 193;
    --bs-teal: #20c997;
    --bs-teal-rgb: 32, 201, 151;
    --kf-pc-accent: #c9463d;
    --kf-pc-accent-rgb: 201, 70, 61;

    /* Recipe Print Configurator variables mapped to Bootstrap */
    --pc-bg: var(--bs-tertiary-bg);
    --pc-paper: var(--bs-body-bg);
    --pc-paper-shadow: 0 2px 12px rgba(var(--bs-black-rgb),0.08);
    --pc-accent: var(--kf-pc-accent);
    --pc-accent-light: var(--bs-danger-bg-subtle);
    --pc-text: var(--bs-body-color);
    --pc-text-muted: var(--bs-secondary-color);
    --pc-border: var(--bs-border-color);
    --pc-sidebar-bg: var(--bs-body-bg);
    --pc-input-bg: var(--bs-tertiary-bg);

    /* Settings Page Custom Industrial Theme Variables */
    --kf-slate-50: var(--bs-gray-100);
    --kf-slate-100: var(--bs-gray-200);
    --kf-slate-200: var(--bs-gray-300);
    --kf-slate-300: var(--bs-gray-400);
    --kf-slate-400: var(--bs-gray-500);
    --kf-slate-500: var(--bs-gray-600);
    --kf-slate-600: var(--bs-gray-700);
    --kf-slate-700: var(--bs-gray-800);
    --kf-slate-800: var(--bs-gray-900);
    --kf-slate-900: var(--bs-gray-dark);

    --kf-copper-color: #b87333;
    --kf-copper-rgb: 184, 115, 51;
    --kf-copper-light: color-mix(in srgb, var(--kf-copper-color) 80%, white);
    --kf-copper-dark: color-mix(in srgb, var(--kf-copper-color) 80%, black);

    --kf-amber-color: #f59e0b;
    --kf-amber-rgb: 245, 158, 11;
    --kf-amber-light: color-mix(in srgb, var(--kf-amber-color) 80%, white);

    --kf-success-color: #059669;
    --kf-success-rgb: 5, 150, 105;
    --kf-success-light: color-mix(in srgb, var(--kf-success-color) 80%, white);
    --kf-success-bg: color-mix(in srgb, var(--kf-success-color) 10%, white);

    --kf-danger-color: #dc2626;
    --kf-danger-rgb: 220, 38, 38;
    --kf-danger-light: color-mix(in srgb, var(--kf-danger-color) 80%, white);
    --kf-danger-dark: color-mix(in srgb, var(--kf-danger-color) 80%, black);
    --kf-danger-bg: color-mix(in srgb, var(--kf-danger-color) 10%, white);

    --kf-warning-color: #d97706;
    --kf-warning-rgb: 217, 119, 6;
    --kf-warning-light: color-mix(in srgb, var(--kf-warning-color) 80%, white);
    --kf-warning-bg: color-mix(in srgb, var(--kf-warning-color) 10%, white);

    --kf-info-color: #0284c7;
    --kf-info-rgb: 2, 132, 199;
    --kf-info-light: color-mix(in srgb, var(--kf-info-color) 80%, white);
    --kf-info-bg: color-mix(in srgb, var(--kf-info-color) 10%, white);

    /* Alias shorthand (senza suffisso) */
    --kf-copper: var(--kf-copper-color);
    --kf-info: var(--kf-info-color);
    --kf-warning: var(--kf-warning-color);
    --kf-danger: var(--kf-danger-color);
    --kf-success: var(--kf-success-color);

    /* Gradient KPI colors */
    --kf-gradient-purple-start: #667eea;
    --kf-gradient-purple-end: #764ba2;
    --kf-gradient-pink-start: #f093fb;
    --kf-gradient-pink-end: #f5576c;
    --kf-gradient-blue-start: #4facfe;
    --kf-gradient-blue-end: #00f2fe;
    --kf-gradient-green-start: #11998e;
    --kf-gradient-green-end: #38ef7d;

    /* Contextual backgrounds */
    --kf-dietary-bg: #f0fdf4;
    --kf-success-alert-bg: #d1e7dd;
    --kf-success-dark: #146c43;
    --kf-warning-border: rgba(217, 119, 6, 0.2);
    --kf-info-shadow: rgba(2, 132, 199, 0.4);

    /* Transition timing */
    --kf-transition: 0.2s ease;
    --kf-transition-fast: 0.15s ease;

    /* Border radius scale */
    --kf-radius-sm: 0.25rem;
    --kf-radius: 0.5rem;
    --kf-radius-lg: 0.75rem;

    /* Shadows mapped to Bootstrap */
    --kf-shadow-sm: var(--bs-box-shadow-sm);
    --kf-shadow: var(--bs-box-shadow);
    --kf-shadow-md: var(--bs-box-shadow-lg);
    --kf-shadow-lg: var(--bs-box-shadow-lg); /* Using same as md or define a larger one */
    --kf-shadow-xl: var(--bs-box-shadow-xl);
}



/* ============================================
   Light mode — warm white (meno accecante)
   ============================================ */
:root:not([data-bs-theme="dark"]),
[data-bs-theme="light"] {
    --bs-body-bg:       #fdf2e4;   /* carta antica, sfondo principale */
    --bs-secondary-bg:  #ecddd0;   /* input, badge, aree leggermente più scure */
    --bs-tertiary-bg:   #f5e9d6;   /* footer, card header, table-light */
    --bs-border-color:  #cfc0ae;   /* bordi caldi */
}

/* Navbar glass: bootstrap-glass.css usa hsla(0,0%,100%,.78) hardcodato.
   Sostituiamo con vetro caldo in light mode. */
:root:not([data-bs-theme="dark"]) .bg-primary,
[data-bs-theme="light"] .bg-primary {
    background: hsla(34, 75%, 95%, 0.85) !important;
    border-bottom: 1px solid hsla(34, 50%, 78%, 0.5) !important;
}

/* Footer: forziamo il caldo in light mode (tertiary-bg già aggiornato,
   ma l'override esplicito evita conflitti con il glass CSS) */
:root:not([data-bs-theme="dark"]) footer,
[data-bs-theme="light"] footer {
    background-color: #f0e4d0 !important;
}

/* Dark mode overrides */
[data-bs-theme="dark"] {
    /* color-mix backgrounds: in dark mode mescola con nero invece di bianco */
    --kf-copper-light: color-mix(in srgb, var(--kf-copper-color) 80%, black);
    --kf-success-light: color-mix(in srgb, var(--kf-success-color) 80%, black);
    --kf-danger-light: color-mix(in srgb, var(--kf-danger-color) 80%, black);
    --kf-warning-light: color-mix(in srgb, var(--kf-warning-color) 80%, black);
    --kf-info-light: color-mix(in srgb, var(--kf-info-color) 80%, black);
    --kf-amber-light: color-mix(in srgb, var(--kf-amber-color) 80%, black);

    /* Sfondi "subtle" per dark mode: mescola con nero */
    --kf-success-bg: color-mix(in srgb, var(--kf-success-color) 15%, black);
    --kf-danger-bg: color-mix(in srgb, var(--kf-danger-color) 15%, black);
    --kf-warning-bg: color-mix(in srgb, var(--kf-warning-color) 15%, black);
    --kf-info-bg: color-mix(in srgb, var(--kf-info-color) 15%, black);

    /* Gradient KPI - toni smorzati per dark */
    --kf-gradient-purple-start: #4a5bb5;
    --kf-gradient-purple-end: #5a3880;
    --kf-gradient-pink-start: #b06db8;
    --kf-gradient-pink-end: #b84050;
    --kf-gradient-blue-start: #3a82c4;
    --kf-gradient-blue-end: #00b8be;
    --kf-gradient-green-start: #0d7a6f;
    --kf-gradient-green-end: #2ab862;

    /* Contextual backgrounds - dark */
    --kf-dietary-bg: #0d2818;
    --kf-success-alert-bg: #0d3320;
    --kf-success-dark: #4ade80;
    --kf-warning-border: rgba(217, 119, 6, 0.3);
    --kf-info-shadow: rgba(2, 132, 199, 0.25);
}

/* Bootstrap utility classes: dark mode overrides
   bg-light e text-dark sono classi "statiche" che non si adattano al tema.
   Li rendiamo dark-mode aware per evitare di modificare 100+ template. */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .bg-light.text-dark,
[data-bs-theme="dark"] .bg-light .text-dark {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .badge.bg-light {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .text-dark {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-warning.text-dark {
    background-color: var(--kf-warning-color) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .bg-white {
    background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .table-light {
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
}

/* Alert success: in dark mode Bootstrap usa --bs-success-text-emphasis
   (verde chiaro su verde scuro = scarso contrasto).
   Forziamo --bs-body-color come per i guide-box. */
[data-bs-theme="dark"] .alert-success {
    --bs-alert-color: var(--bs-body-color);
}

.permissions-accordion .category-header:hover {
    background-color: var(--kf-hover-bg-subtle) !important;
}

.permissions-accordion .form-check {
    border-bottom: 1px solid var(--bs-border-color);
}

.permissions-accordion .form-check-input {
    border: 2px solid var(--kf-form-check-input-border);
}

.permissions-accordion .form-check-input:checked {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

.permissions-accordion .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-success-rgb), 0.25);
}

footer {
    background-color: var(--bs-tertiary-bg); /* Using tertiary-bg as a slightly darker background */
    border-top: 1px solid var(--bs-border-color);
}

.spinner-overlay {
    background: rgba(var(--bs-black-rgb), 0.5);
}

.mobile-card-view .card-meta {
    color: var(--bs-secondary-color);
}

.offcanvas-nav {
    box-shadow: 2px 0 10px rgba(var(--bs-black-rgb), 0.3);
}

.offcanvas-nav .list-group-item[data-bs-toggle="collapse"]:not(.collapsed) {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

.offcanvas-nav .collapse .list-group-item {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.article-detail .alert-success {
    background-color: var(--bs-success-bg-subtle);
    border-color: var(--bs-success-border-subtle);
}

.article-detail .accordion-button:not(.collapsed) {
    background-color: var(--kf-accordion-active-bg);
    color: var(--kf-accordion-active-color);
}

.markdown-content h1 {
    border-bottom: 2px solid var(--bs-border-color);
}

.markdown-content h2 {
    border-bottom: 1px solid var(--bs-border-color);
}

.markdown-content code {
    background-color: var(--bs-code-bg);
    color: var(--kf-code-color);
}

.markdown-content pre {
    background-color: var(--bs-tertiary-bg); /* Using tertiary-bg for pre blocks */
    border: 1px solid var(--bs-border-color);
}

.markdown-content blockquote {
    border-left: 4px solid var(--bs-primary);
    color: var(--bs-secondary-color);
}

.markdown-content table th,
.markdown-content table td {
    border: 1px solid var(--bs-border-color);
}

.markdown-content table th {
    background-color: var(--bs-tertiary-bg); /* Using tertiary-bg for table headers */
}

.markdown-content hr {
    border-top: 1px solid var(--bs-border-color);
}

.markdown-content a {
    color: var(--bs-link-color);
}

.markdown-content a:hover {
    color: var(--bs-link-hover-color);
}

.pos-input:focus {
    background-color: var(--bs-form-control-focus-bg) !important;
}

.pos-input-wrapper::after {
    color: var(--bs-success);
}

#article-search-results {
    border: 1px solid var(--bs-border-color);
}

#article-search-results .list-group-item:hover:not(.active) {
    background-color: var(--kf-search-result-hover-bg);
}

#article-search-results .list-group-item.active {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

#article-search-results mark {
    background-color: var(--bs-highlight-bg);
}

/* ============================================
   Gradient utility classes (dark-mode aware)
   ============================================ */
.kf-gradient-purple {
    background: linear-gradient(135deg, var(--kf-gradient-purple-start) 0%, var(--kf-gradient-purple-end) 100%);
    color: #fff;
}
.kf-gradient-pink {
    background: linear-gradient(135deg, var(--kf-gradient-pink-start) 0%, var(--kf-gradient-pink-end) 100%);
    color: #fff;
}
.kf-gradient-blue {
    background: linear-gradient(135deg, var(--kf-gradient-blue-start) 0%, var(--kf-gradient-blue-end) 100%);
    color: #fff;
}
.kf-gradient-green {
    background: linear-gradient(135deg, var(--kf-gradient-green-start) 0%, var(--kf-gradient-green-end) 100%);
    color: #fff;
}

/* Border color matching gradient-pink (for dashboard card) */
.kf-border-pink {
    border-color: var(--kf-gradient-pink-end) !important;
}

/* Dietary indicators background */
.kf-dietary-bg {
    background-color: var(--kf-dietary-bg);
}

/* Success alert contextual */
.kf-success-alert-bg {
    background: var(--kf-success-alert-bg);
}
.kf-success-dark {
    color: var(--kf-success-dark);
}

/* Warning border for settings alerts */
.kf-warning-border {
    border-color: var(--kf-warning-border);
}

/* Info gradient with shadow (settings link) */
.kf-gradient-info {
    background: linear-gradient(135deg, var(--kf-info) 0%, var(--kf-info-light) 100%);
    box-shadow: 0 4px 12px -2px var(--kf-info-shadow);
}

/* Correzione per card header cliccabili in Dark Mode */
[data-bs-theme="dark"] .card-header[role="button"]:hover {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .card-header[role="button"]:hover .text-body {
    color: var(--bs-primary-text-emphasis) !important; /* Opzionale: evidenzia il testo invece di farlo sparire */
}

[data-bs-theme="dark"] .btn-dark {
    --bs-btn-bg: var(--bs-primary); /* o var(--bs-secondary) */
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #0b5ed7; /* un blu leggermente più scuro */
    --bs-btn-hover-border-color: #0a58ca;
}