/*-----------------------------------------------
|   LCSuite Custom Styles
|   Phoenix Theme Customization
-----------------------------------------------*/

/* ==========================================================================
   CSS VARIABLES - LCSuite Brand Colors
   ========================================================================== */
:root {
    /* Brand Colors */
    --lcs-brand-green: #9cbd9c;
    --lcs-brand-green-dark: #8da88d;
    --lcs-brand-green-light: #a8c5a8;
    --lcs-brand-dark: #1a1f20;
    --lcs-brand-darker: #141819;

    /* Accent Colors */
    --lcs-accent: #222a2b;
    --lcs-secondary: #0f172a;

    /* Background Colors */
    --lcs-bg-light: #f1f5f9;
    --lcs-bg-dark: #0f172a;
    --lcs-surface-light: #ffffff;
    --lcs-surface-dark: #1e293b;

    /* Slate Palette */
    --lcs-slate-50: #f8fafc;
    --lcs-slate-100: #f1f5f9;
    --lcs-slate-200: #e2e8f0;
    --lcs-slate-300: #cbd5e1;
    --lcs-slate-400: #94a3b8;
    --lcs-slate-500: #64748b;
    --lcs-slate-600: #475569;
    --lcs-slate-700: #334155;
    --lcs-slate-800: #1e293b;
    --lcs-slate-900: #0f172a;

    /* Status Colors */
    --lcs-success: #22c55e;
    --lcs-success-bg: #dcfce7;
    --lcs-success-border: #bbf7d0;
    --lcs-warning: #f59e0b;
    --lcs-warning-bg: #fef3c7;
    --lcs-warning-border: #fde68a;
    --lcs-danger: #ef4444;
    --lcs-danger-bg: #fee2e2;
    --lcs-danger-border: #fecaca;
    --lcs-info: #3b82f6;
    --lcs-info-bg: #dbeafe;
    --lcs-info-border: #bfdbfe;

    /* Override Phoenix Primary Colors */
    --phoenix-primary: #9cbd9c !important;
    --phoenix-primary-rgb: 156, 189, 156 !important;
    --phoenix-primary-hover: #8da88d !important;
    --phoenix-primary-soft: rgba(156, 189, 156, 0.1) !important;
    --phoenix-link-color: #9cbd9c !important;

    /* Sidebar Dimensions */
    --lcs-sidebar-width: 18rem; /* 288px / w-72 */
    --lcs-header-height: 3.5rem; /* 56px / h-14 */
}

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

body,
.navbar,
.sidebar,
.card,
.btn,
input,
select,
textarea,
.form-control,
.form-select,
.dropdown-menu {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Font Weights */
.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }

/* Text Sizes */
.text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
.text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
.text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
.text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
.text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }

/* Tracking (Letter Spacing) */
.tracking-tight { letter-spacing: -0.025em !important; }
.tracking-wide { letter-spacing: 0.025em !important; }
.tracking-wider { letter-spacing: 0.05em !important; }
.tracking-widest { letter-spacing: 0.1em !important; }

/* ==========================================================================
   LAYOUT - Override Phoenix Layout
   ========================================================================== */

/* Main Container */
body {
    background-color: var(--lcs-bg-light) !important;
}

/* PWA layout (body.pwa-mode) keeps its own background — DM Sans font + 600px
   mobile-first wrapper come from pwaassets/css/style.css. user.css must NOT
   override those, but the LCS classes (.btn-lcs-*, .select2-*, .swal2-*,
   .lcs-btn-export, alerts, badges, etc.) DO apply on PWA. */
body.pwa-mode {
    background-color: inherit !important;
    max-width: 600px;
    margin: 0 auto;
    font-family: "DM Sans", sans-serif !important;
}
body.pwa-mode .navbar,
body.pwa-mode .sidebar,
body.pwa-mode .card,
body.pwa-mode input,
body.pwa-mode select,
body.pwa-mode textarea,
body.pwa-mode .form-control,
body.pwa-mode .form-select,
body.pwa-mode .dropdown-menu {
    font-family: "DM Sans", sans-serif !important;
}

.dark body,
body.dark {
    background-color: var(--lcs-bg-dark) !important;
}

/* ==========================================================================
   SIDEBAR / NAVIGATION
   ========================================================================== */
.navbar-vertical {
    width: var(--lcs-sidebar-width) !important;
    background-color: var(--lcs-brand-dark) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.navbar-vertical .navbar-brand {
    height: var(--lcs-header-height);
    background-color: var(--lcs-brand-darker) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0 1.25rem;
}

.navbar-vertical .navbar-brand-text {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.025em;
}

/* Logo Icon Container */
.lcs-logo-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: linear-gradient(to bottom right, var(--lcs-brand-green-light), var(--lcs-brand-green));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lcs-brand-dark);
}

/* Navigation Links */
.navbar-vertical .nav-link {
    color: var(--lcs-slate-400) !important;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    margin: 0.125rem 0.75rem;
    transition: all 0.15s ease;
}

.navbar-vertical .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

.navbar-vertical .nav-link:hover .nav-link-icon {
    color: var(--lcs-brand-green) !important;
}

.navbar-vertical .nav-link.active {
    background-color: rgba(156, 189, 156, 0.1) !important;
    color: var(--lcs-brand-green) !important;
}

.navbar-vertical .nav-link.active .nav-link-icon {
    color: var(--lcs-brand-green) !important;
}

/* Navigation Icons */
.navbar-vertical .nav-link-icon {
    color: var(--lcs-slate-500) !important;
    transition: color 0.15s ease;
    margin-right: 0.75rem;
}

/* Section Labels */
.navbar-vertical .navbar-label {
    font-size: 0.625rem !important;
    font-weight: 700;
    color: var(--lcs-slate-500) !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0 0.75rem;
    margin: 1rem 0 0.5rem 0;
}

/* Submenu Styling */
.navbar-vertical .nav-link[data-bs-toggle="collapse"] .nav-link-caret {
    color: var(--lcs-slate-600);
    transition: transform 0.2s ease;
}

.navbar-vertical .nav-link[data-bs-toggle="collapse"]:not(.collapsed) {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    font-weight: 700;
}

.navbar-vertical .nav-link[data-bs-toggle="collapse"]:not(.collapsed) .nav-link-icon {
    color: var(--lcs-brand-green) !important;
}

.navbar-vertical .nav-link[data-bs-toggle="collapse"]:not(.collapsed) .nav-link-caret {
    color: var(--lcs-brand-green) !important;
    transform: rotate(90deg);
}

/* Collapsed Menu Container */
.navbar-vertical .collapse.show,
.navbar-vertical .collapsing {
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 0.5rem;
    margin: 0.25rem 0.5rem;
    padding-bottom: 0.25rem;
}

/* Submenu Items - Override theme.css con selettore specifico */
.navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav .nav-link {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem 0.375rem 2rem !important;
    position: relative;
}

.navbar-vertical .navbar-vertical-content .navbar-nav .nav .nav-link::before {
    content: '';
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--lcs-slate-600);
    transition: background-color 0.15s ease;
}

.navbar-vertical .nav-item .nav .nav-link:hover::before,
.navbar-vertical .nav-item .nav .nav-link.active::before {
    background-color: var(--lcs-brand-green);
}

/* User Footer in Sidebar */
.lcs-user-footer {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background-color: var(--lcs-brand-darker);
}

.lcs-user-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.375rem;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.lcs-user-avatar .status-indicator {
    position: absolute;
    bottom: -0.25rem;
    right: -0.25rem;
    width: 0.75rem;
    height: 0.75rem;
    background-color: var(--lcs-success);
    border: 2px solid var(--lcs-brand-darker);
    border-radius: 50%;
}

.lcs-user-info {
    margin-left: 0.75rem;
    overflow: hidden;
    flex: 1;
}

.lcs-user-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lcs-user-role {
    font-size: 0.625rem;
    color: var(--lcs-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   HEADER / TOPBAR
   ========================================================================== */
.navbar-top,
.content-header {
    height: var(--lcs-header-height) !important;
    background-color: var(--lcs-surface-light) !important;
    border-bottom: 1px solid var(--lcs-slate-200) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dark .navbar-top,
.dark .content-header {
    background-color: var(--lcs-surface-dark) !important;
    border-bottom-color: var(--lcs-slate-700) !important;
}

/* Breadcrumb */
.breadcrumb {
    margin-bottom: 0;
    font-size: 0.875rem;
    font-weight: 500;
}

.breadcrumb-item a {
    color: var(--lcs-slate-400);
    transition: color 0.15s ease;
}

.breadcrumb-item a:hover {
    color: var(--lcs-brand-dark);
}

.breadcrumb-item.active {
    color: var(--lcs-slate-800);
    font-weight: 600;
}

.dark .breadcrumb-item.active {
    color: #ffffff;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '\e5cc'; /* chevron_right */
    font-family: 'Material Symbols Outlined';
    color: var(--lcs-slate-300);
    font-size: 1rem;
}

/* Header Actions */
.navbar-top .nav-item .nav-link {
    padding: 0.375rem;
    border-radius: 0.375rem;
    color: var(--lcs-slate-400);
    transition: all 0.15s ease;
}

.navbar-top .nav-item .nav-link:hover {
    background-color: var(--lcs-slate-50);
    color: var(--lcs-slate-600);
}

/* Notification Badge */
.notification-indicator {
    position: absolute;
    top: 0.25rem;
    right: 0.375rem;
    width: 0.375rem;
    height: 0.375rem;
    background-color: var(--lcs-danger);
    border-radius: 50%;
    border: 1px solid #ffffff;
}

/* Company Selector */
.lcs-company-selector {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    background-color: var(--lcs-slate-50);
    border: 1px solid var(--lcs-slate-200);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--lcs-slate-700);
    transition: border-color 0.15s ease;
    max-width: 20rem;
}

.lcs-company-selector:hover {
    border-color: var(--lcs-brand-green);
}

.lcs-company-selector .company-icon {
    color: var(--lcs-brand-green);
    margin-right: 0.5rem;
}

.lcs-company-selector .company-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lcs-company-selector .dropdown-icon {
    color: var(--lcs-slate-400);
    margin-left: 0.5rem;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

/* Primary Button - Brand Green */
.btn-primary,
.btn-lcs-primary {
    background-color: var(--lcs-brand-green) !important;
    border: 1px solid var(--lcs-brand-green-dark) !important;
    color: var(--lcs-brand-dark) !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.375rem 1rem;
    border-radius: 0.375rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 1px 0 rgba(0, 0, 0, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.12);
    transition: all 0.15s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-lcs-primary:hover,
.btn-lcs-primary:focus {
    background-color: var(--lcs-brand-green-dark) !important;
    border-color: var(--lcs-brand-green-dark) !important;
    color: var(--lcs-brand-dark) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 2px 0 rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.btn-primary:active,
.btn-lcs-primary:active {
    background-color: var(--lcs-brand-green-dark) !important;
    border-color: var(--lcs-brand-green-dark) !important;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(0, 0, 0, 0.05);
    transform: translateY(0);
}

/* Secondary Button */
.btn-secondary,
.btn-lcs-secondary {
    background-color: #ffffff !important;
    border: 1px solid var(--lcs-slate-300) !important;
    color: var(--lcs-slate-600) !important;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 0 rgba(0, 0, 0, 0.03),
        0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.15s ease;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-lcs-secondary:hover,
.btn-lcs-secondary:focus {
    background-color: var(--lcs-slate-50) !important;
    border-color: var(--lcs-slate-400) !important;
    color: var(--lcs-slate-700) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 2px 0 rgba(0, 0, 0, 0.04),
        0 4px 8px rgba(0, 0, 0, 0.10);
    transform: translateY(-1px);
}

.btn-secondary:active,
.btn-lcs-secondary:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.08),
        0 1px 0 rgba(0, 0, 0, 0.04);
    transform: translateY(0);
}

/* Ghost Button */
.btn-ghost,
.btn-lcs-ghost {
    background-color: transparent !important;
    border: none !important;
    color: var(--lcs-slate-500) !important;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
}

.btn-ghost:hover,
.btn-ghost:focus,
.btn-lcs-ghost:hover,
.btn-lcs-ghost:focus {
    background-color: var(--lcs-slate-100) !important;
    color: var(--lcs-slate-700) !important;
}

/* Danger Button */
.btn-danger {
    background-color: var(--lcs-danger) !important;
    border: 1px solid #dc2626 !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 1px 0 rgba(0, 0, 0, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.12);
    transition: all 0.15s ease;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 2px 0 rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.btn-danger:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(0, 0, 0, 0.05);
    transform: translateY(0);
}

/* ==========================================================================
   BOOTSTRAP COMPAT OVERRIDES - make legacy btn-* classes match LCS 3D style
   Per la convenzione le nuove view devono usare btn-lcs-*, ma esistono molte
   view legacy con btn-success/btn-info/btn-warning/btn-outline-*: qui le
   uniformiamo all'aspetto 3D (border + box-shadow + hover translate).
   ========================================================================== */

/* lcs-btn-export → verde brand 3D (usato per pulsanti Export/Excel/Stampa) */
.lcs-btn-export {
    background-color: var(--lcs-brand-green) !important;
    border: 1px solid var(--lcs-brand-green-dark) !important;
    color: var(--lcs-brand-dark) !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.375rem 1rem;
    border-radius: 0.375rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 1px 0 rgba(0, 0, 0, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.12);
    transition: all 0.15s ease;
}
.lcs-btn-export:hover,
.lcs-btn-export:focus {
    background-color: var(--lcs-brand-green-dark) !important;
    border-color: var(--lcs-brand-green-dark) !important;
    color: var(--lcs-brand-dark) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 2px 0 rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}
.lcs-btn-export:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(0, 0, 0, 0.05) !important;
    transform: translateY(0);
}

/* btn-success → identico a btn-lcs-primary (verde brand) */
.btn-success {
    background-color: var(--lcs-brand-green) !important;
    border: 1px solid var(--lcs-brand-green-dark) !important;
    color: var(--lcs-brand-dark) !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.375rem 1rem;
    border-radius: 0.375rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 1px 0 rgba(0, 0, 0, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.12);
    transition: all 0.15s ease;
}
.btn-success:hover,
.btn-success:focus {
    background-color: var(--lcs-brand-green-dark) !important;
    border-color: var(--lcs-brand-green-dark) !important;
    color: var(--lcs-brand-dark) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 2px 0 rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}
.btn-success:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(0, 0, 0, 0.05) !important;
    transform: translateY(0);
}

/* btn-info → blu informativo 3D */
.btn-info {
    background-color: #0ea5e9 !important;
    border: 1px solid #0284c7 !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.375rem 1rem;
    border-radius: 0.375rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 1px 0 rgba(0, 0, 0, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.12);
    transition: all 0.15s ease;
}
.btn-info:hover,
.btn-info:focus {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 2px 0 rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}
.btn-info:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(0, 0, 0, 0.05) !important;
    transform: translateY(0);
}

/* btn-warning → ambra 3D */
.btn-warning {
    background-color: #f59e0b !important;
    border: 1px solid #d97706 !important;
    color: var(--lcs-brand-dark) !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.375rem 1rem;
    border-radius: 0.375rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 1px 0 rgba(0, 0, 0, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.12);
    transition: all 0.15s ease;
}
.btn-warning:hover,
.btn-warning:focus {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    color: var(--lcs-brand-dark) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 2px 0 rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}
.btn-warning:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(0, 0, 0, 0.05) !important;
    transform: translateY(0);
}

/* btn-light / btn-dark → variante secondary 3D */
.btn-light {
    background-color: #ffffff !important;
    border: 1px solid var(--lcs-slate-300) !important;
    color: var(--lcs-slate-600) !important;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 0 rgba(0, 0, 0, 0.03),
        0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.15s ease;
}
.btn-light:hover,
.btn-light:focus {
    background-color: var(--lcs-slate-50) !important;
    border-color: var(--lcs-slate-400) !important;
    color: var(--lcs-slate-700) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 2px 0 rgba(0, 0, 0, 0.04),
        0 4px 8px rgba(0, 0, 0, 0.10);
    transform: translateY(-1px);
}
.btn-light:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.08),
        0 1px 0 rgba(0, 0, 0, 0.04) !important;
    transform: translateY(0);
}

.btn-dark {
    background-color: var(--lcs-slate-700) !important;
    border: 1px solid var(--lcs-slate-800) !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.375rem 1rem;
    border-radius: 0.375rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 1px 0 rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.18);
    transition: all 0.15s ease;
}
.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--lcs-slate-800) !important;
    border-color: var(--lcs-slate-800) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 2px 0 rgba(0, 0, 0, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}
.btn-dark:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.25),
        0 1px 0 rgba(0, 0, 0, 0.08) !important;
    transform: translateY(0);
}

/* btn-outline-primary / btn-outline-success → uguale a btn-success (verde 3D) */
.btn-outline-primary,
.btn-outline-success {
    background-color: var(--lcs-brand-green) !important;
    border: 1px solid var(--lcs-brand-green-dark) !important;
    color: var(--lcs-brand-dark) !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.375rem 1rem;
    border-radius: 0.375rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 1px 0 rgba(0, 0, 0, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.12);
    transition: all 0.15s ease;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: var(--lcs-brand-green-dark) !important;
    border-color: var(--lcs-brand-green-dark) !important;
    color: var(--lcs-brand-dark) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 2px 0 rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}
.btn-outline-primary:active,
.btn-outline-success:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(0, 0, 0, 0.05) !important;
    transform: translateY(0);
}

/* btn-outline-secondary / btn-outline-light / btn-outline-dark → secondary 3D */
.btn-outline-secondary,
.btn-outline-light,
.btn-outline-dark {
    background-color: #ffffff !important;
    border: 1px solid var(--lcs-slate-300) !important;
    color: var(--lcs-slate-600) !important;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 0 rgba(0, 0, 0, 0.03),
        0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.15s ease;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background-color: var(--lcs-slate-50) !important;
    border-color: var(--lcs-slate-400) !important;
    color: var(--lcs-slate-700) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 2px 0 rgba(0, 0, 0, 0.04),
        0 4px 8px rgba(0, 0, 0, 0.10);
    transform: translateY(-1px);
}
.btn-outline-secondary:active,
.btn-outline-light:active,
.btn-outline-dark:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.08),
        0 1px 0 rgba(0, 0, 0, 0.04) !important;
    transform: translateY(0);
}

/* btn-outline-danger → uguale a btn-danger (rosso 3D) */
.btn-outline-danger {
    background-color: var(--lcs-danger) !important;
    border: 1px solid #dc2626 !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.375rem 1rem;
    border-radius: 0.375rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 1px 0 rgba(0, 0, 0, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.12);
    transition: all 0.15s ease;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 2px 0 rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}
.btn-outline-danger:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(0, 0, 0, 0.05) !important;
    transform: translateY(0);
}

/* btn-outline-info → uguale a btn-info */
.btn-outline-info {
    background-color: #0ea5e9 !important;
    border: 1px solid #0284c7 !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.375rem 1rem;
    border-radius: 0.375rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 1px 0 rgba(0, 0, 0, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.12);
    transition: all 0.15s ease;
}
.btn-outline-info:hover,
.btn-outline-info:focus {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 2px 0 rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}
.btn-outline-info:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(0, 0, 0, 0.05) !important;
    transform: translateY(0);
}

/* btn-outline-warning → uguale a btn-warning */
.btn-outline-warning {
    background-color: #f59e0b !important;
    border: 1px solid #d97706 !important;
    color: var(--lcs-brand-dark) !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.375rem 1rem;
    border-radius: 0.375rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 1px 0 rgba(0, 0, 0, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.12);
    transition: all 0.15s ease;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    color: var(--lcs-brand-dark) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 2px 0 rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}
.btn-outline-warning:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(0, 0, 0, 0.05) !important;
    transform: translateY(0);
}

/* Icon Button */
.btn-icon,
.btn-lcs-icon {
    padding: 0.375rem;
    border-radius: 0.375rem;
    background-color: transparent;
    border: none;
    color: var(--lcs-slate-400);
    transition: all 0.15s ease;
}

.btn-icon:hover,
.btn-lcs-icon:hover {
    background-color: var(--lcs-slate-50);
    color: var(--lcs-slate-600);
}

/* Button with Icon */
.btn .material-symbols-outlined,
.btn .btn-icon-left {
    font-size: 1rem;
    margin-right: 0.25rem;
    vertical-align: middle;
}

/* ==========================================================================
   LCS BUTTON CONVENTIONS
   ==========================================================================

   USAGE GUIDE - Use these classes for all new buttons:

   | Class              | Use Case                                          |
   |--------------------|---------------------------------------------------|
   | btn-lcs-primary    | Primary actions: Save, Submit, Confirm            |
   | btn-lcs-secondary  | Secondary actions: Edit, Modify, Cancel           |
   | btn-lcs-ghost      | Tertiary actions: minor actions, icon-only btns   |
   | btn-lcs-icon       | Icon-only buttons (no text)                       |
   | btn-lcs-danger     | Destructive actions: Delete, Remove               |

   PATTERN:
   <button class="btn btn-sm btn-lcs-secondary d-inline-flex align-items-center gap-1">
       <span class="material-symbols-outlined" style="font-size: 1rem;">edit</span>
       Modifica
   </button>

   ========================================================================== */

/* LCS Edit Button - use for Edit/Modifica actions */
.btn-lcs-edit {
    background-color: #ffffff !important;
    border: 1px solid var(--lcs-brand-green) !important;
    color: var(--lcs-brand-green) !important;
    font-weight: 500;
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 0 rgba(0, 0, 0, 0.03),
        0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.15s ease;
}

.btn-lcs-edit:hover,
.btn-lcs-edit:focus {
    background-color: var(--lcs-brand-green) !important;
    border-color: var(--lcs-brand-green) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 2px 0 rgba(0, 0, 0, 0.04),
        0 4px 8px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.btn-lcs-edit:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.12),
        0 1px 0 rgba(0, 0, 0, 0.04);
    transform: translateY(0);
}

/* LCS Danger/Delete Button */
.btn-lcs-danger {
    background-color: #ffffff !important;
    border: 1px solid var(--lcs-danger) !important;
    color: var(--lcs-danger) !important;
    font-weight: 500;
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 0 rgba(0, 0, 0, 0.03),
        0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.15s ease;
}

.btn-lcs-danger:hover,
.btn-lcs-danger:focus {
    background-color: var(--lcs-danger) !important;
    border-color: var(--lcs-danger) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 2px 0 rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.btn-lcs-danger:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(0, 0, 0, 0.05);
    transform: translateY(0);
}

/* Size variations */
.btn-lcs-sm {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
}

.btn-lcs-xs {
    font-size: 0.7rem !important;
    padding: 0.125rem 0.375rem !important;
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
    background-color: var(--lcs-surface-light);
    border: 1px solid var(--lcs-slate-200);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dark .card {
    background-color: var(--lcs-surface-dark);
    border-color: var(--lcs-slate-700);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--lcs-slate-200);
    padding: 1rem;
}

.dark .card-header {
    border-bottom-color: var(--lcs-slate-700);
}

.card-body {
    padding: 1rem;
}

.card-footer {
    background-color: var(--lcs-slate-50);
    border-top: 1px solid var(--lcs-slate-200);
    padding: 0.75rem 1rem;
}

.dark .card-footer {
    background-color: var(--lcs-slate-800);
    border-top-color: var(--lcs-slate-700);
}

/* ==========================================================================
   PAGE HEADER CARD - MANDATORY First Element
   ========================================================================== */
.lcs-page-header {
    background-color: var(--lcs-surface-light);
    border: 1px solid var(--lcs-slate-200);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.dark .lcs-page-header {
    background-color: var(--lcs-surface-dark);
    border-color: var(--lcs-slate-700);
}

.lcs-page-header .page-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--lcs-accent);
    display: flex;
    align-items: center;
    margin: 0;
}

.dark .lcs-page-header .page-title {
    color: #ffffff;
}

.lcs-page-header .page-title-icon {
    background-color: rgba(156, 189, 156, 0.1);
    color: var(--lcs-brand-green);
    padding: 0.375rem;
    border-radius: 0.25rem;
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lcs-page-header .page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* Page Header Search */
.lcs-page-header .search-input-wrapper {
    position: relative;
    width: 16rem;
}

.lcs-page-header .search-input-wrapper .search-icon {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lcs-slate-400);
    font-size: 1.125rem;
    pointer-events: none;
}

.lcs-page-header .search-input {
    width: 100%;
    padding: 0.375rem 0.75rem 0.375rem 2.25rem;
    border: 1px solid var(--lcs-slate-300);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background-color: var(--lcs-slate-50);
    color: var(--lcs-slate-700);
    transition: all 0.15s ease;
}

.lcs-page-header .search-input:focus {
    outline: none;
    border-color: var(--lcs-brand-green);
    box-shadow: 0 0 0 3px rgba(156, 189, 156, 0.15);
}

.dark .lcs-page-header .search-input {
    background-color: var(--lcs-slate-900);
    border-color: var(--lcs-slate-600);
    color: var(--lcs-slate-300);
}

/* ==========================================================================
   TABLES
   ========================================================================== */
.table {
    width: 100%;
    font-size: 0.875rem;
}

.table thead {
    background-color: var(--lcs-slate-50);
    border-bottom: 1px solid var(--lcs-slate-200);
}

.dark .table thead {
    background-color: var(--lcs-slate-800);
    border-bottom-color: var(--lcs-slate-700);
}

.table thead th {
    font-weight: 600;
    color: var(--lcs-slate-500);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    border-bottom: none;
    white-space: nowrap;
}

.dark .table thead th {
    color: var(--lcs-slate-400);
}

.table tbody tr {
    transition: background-color 0.15s ease;
}

.table tbody tr:hover {
    background-color: var(--lcs-slate-50);
}

.dark .table tbody tr:hover {
    background-color: var(--lcs-slate-800);
}

.table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--lcs-slate-200);
    vertical-align: middle;
    color: var(--lcs-slate-600);
}

.dark .table tbody td {
    border-bottom-color: var(--lcs-slate-700);
    color: var(--lcs-slate-300);
}

/* Table Row Actions (appear on hover) */
.table .row-actions {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.table tbody tr:hover .row-actions {
    opacity: 1;
}

.table .row-actions .btn-icon {
    color: var(--lcs-slate-400);
}

.table .row-actions .btn-icon:hover {
    color: var(--lcs-brand-green);
}

/* Table Avatar Cell */
.table .cell-avatar {
    display: flex;
    align-items: center;
}

.table .cell-avatar .avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: rgba(156, 189, 156, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--lcs-brand-dark);
    margin-right: 0.75rem;
}

.table .cell-avatar .cell-text-primary {
    font-weight: 500;
    color: var(--lcs-accent);
}

.dark .table .cell-avatar .cell-text-primary {
    color: #ffffff;
}

.table .cell-avatar .cell-text-secondary {
    font-size: 0.75rem;
    color: var(--lcs-slate-500);
}

/* Table Pagination */
.lcs-table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background-color: var(--lcs-slate-50);
    border-top: 1px solid var(--lcs-slate-200);
    font-size: 0.75rem;
    color: var(--lcs-slate-500);
}

.dark .lcs-table-pagination {
    background-color: var(--lcs-slate-800);
    border-top-color: var(--lcs-slate-700);
    color: var(--lcs-slate-400);
}

.lcs-table-pagination .pagination-info .highlight {
    font-weight: 600;
    color: var(--lcs-slate-700);
}

.dark .lcs-table-pagination .pagination-info .highlight {
    color: var(--lcs-slate-300);
}

.lcs-table-pagination .pagination-buttons {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.lcs-table-pagination .pagination-btn {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    border: none;
    background-color: transparent;
    color: var(--lcs-slate-500);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.lcs-table-pagination .pagination-btn:hover:not(:disabled) {
    background-color: var(--lcs-slate-200);
}

.lcs-table-pagination .pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.lcs-table-pagination .pagination-btn.active {
    background-color: #ffffff;
    border: 1px solid var(--lcs-slate-300);
    color: var(--lcs-slate-700);
    font-weight: 500;
}

/* DataTables Integration */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    font-size: 0.875rem;
    color: var(--lcs-slate-600);
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--lcs-slate-300);
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--lcs-brand-green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(156, 189, 156, 0.15);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 0.25rem !important;
    margin: 0 0.125rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--lcs-brand-green) !important;
    border-color: var(--lcs-brand-green) !important;
    color: var(--lcs-brand-dark) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--lcs-slate-100) !important;
    border-color: var(--lcs-slate-300) !important;
    color: var(--lcs-slate-700) !important;
}

/* ==========================================================================
   BADGES / STATUS
   ========================================================================== */
.badge {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Success Badge (Active/In Turno) */
.badge-success,
.badge-lcs-success {
    background-color: var(--lcs-success-bg) !important;
    color: #15803d !important;
    border: 1px solid var(--lcs-success-border);
}

/* Neutral Badge (Inactive/Absent) */
.badge-secondary,
.badge-lcs-neutral {
    background-color: var(--lcs-slate-100) !important;
    color: var(--lcs-slate-600) !important;
    border: 1px solid var(--lcs-slate-200);
}

/* Warning Badge (Pending/Attention) */
.badge-warning,
.badge-lcs-warning {
    background-color: var(--lcs-warning-bg) !important;
    color: #b45309 !important;
    border: 1px solid var(--lcs-warning-border);
}

/* Danger Badge (Error/Expired) */
.badge-danger,
.badge-lcs-danger {
    background-color: var(--lcs-danger-bg) !important;
    color: #b91c1c !important;
    border: 1px solid var(--lcs-danger-border);
}

/* Info Badge */
.badge-info,
.badge-lcs-info {
    background-color: var(--lcs-info-bg) !important;
    color: #1d4ed8 !important;
    border: 1px solid var(--lcs-info-border);
}

/* Primary Badge (Counter/Notification) */
.badge-primary,
.badge-lcs-counter {
    background-color: var(--lcs-brand-green) !important;
    color: var(--lcs-brand-dark) !important;
    border: none;
}

/* ==========================================================================
   FORMS / INPUTS
   ========================================================================== */
.form-control,
.form-select {
    border: 1px solid var(--lcs-slate-300);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--lcs-slate-700);
    background-color: #ffffff;
    transition: all 0.15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--lcs-brand-green) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(156, 189, 156, 0.15) !important;
}

/* Override Phoenix/Bootstrap primary colors per tutti i selects e form-controls */
.form-control:focus,
.form-select:focus,
select:focus,
input:focus,
textarea:focus {
    border-color: var(--lcs-brand-green) !important;
    box-shadow: 0 0 0 0.25rem rgba(156, 189, 156, 0.25) !important;
}

.dark .form-control,
.dark .form-select {
    background-color: var(--lcs-slate-900);
    border-color: var(--lcs-slate-600);
    color: var(--lcs-slate-300);
}

.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lcs-slate-700);
    margin-bottom: 0.25rem;
}

.dark .form-label {
    color: var(--lcs-slate-300);
}

/* Input with Icon */
.input-group-text {
    background-color: var(--lcs-slate-50);
    border: 1px solid var(--lcs-slate-300);
    color: var(--lcs-slate-400);
}

/* Placeholder */
.form-control::placeholder {
    color: var(--lcs-slate-400);
}

/* Textarea */
textarea.form-control {
    resize: vertical;
}

/* Checkbox & Radio */
.form-check-input:checked {
    background-color: var(--lcs-brand-green);
    border-color: var(--lcs-brand-green);
}

.form-check-input:focus {
    border-color: var(--lcs-brand-green);
    box-shadow: 0 0 0 3px rgba(156, 189, 156, 0.15);
}

/* Select2 / Choices.js Integration */
.choices__inner {
    border: 1px solid var(--lcs-slate-300) !important;
    border-radius: 0.375rem !important;
    background-color: #ffffff !important;
    padding: 0.375rem 0.75rem !important;
    min-height: auto !important;
}

.choices__inner:focus,
.is-focused .choices__inner {
    border-color: var(--lcs-brand-green) !important;
    box-shadow: 0 0 0 3px rgba(156, 189, 156, 0.15) !important;
}

.choices__list--dropdown {
    border: 1px solid var(--lcs-slate-200) !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Header del dropdown (es. "Seleziona Appalto") */
.choices__heading {
    background-color: var(--lcs-brand-green) !important;
    color: #ffffff !important;
    border-bottom: 1px solid var(--lcs-brand-green-dark) !important;
    font-weight: 600;
    padding: 0.5rem 0.75rem !important;
}

/* Elemento evidenziato (hover) */
.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--lcs-brand-green) !important;
    color: #ffffff !important;
}

/* Elemento selezionato */
.choices__list--dropdown .choices__item--selectable[aria-selected="true"],
.choices__list--dropdown .choices__item--selectable.is-selected {
    background-color: rgba(156, 189, 156, 0.2) !important;
    color: var(--lcs-brand-green-dark) !important;
}

/* ==========================================================================
   STATS CARDS
   ========================================================================== */
.lcs-stat-card {
    background-color: var(--lcs-surface-light);
    border: 1px solid var(--lcs-slate-200);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dark .lcs-stat-card {
    background-color: var(--lcs-surface-dark);
    border-color: var(--lcs-slate-700);
}

.lcs-stat-card .stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--lcs-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lcs-stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lcs-accent);
    margin-top: 0.25rem;
}

.dark .lcs-stat-card .stat-value {
    color: #ffffff;
}

.lcs-stat-card .stat-icon {
    background-color: rgba(156, 189, 156, 0.1);
    color: var(--lcs-brand-green);
    padding: 0.75rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lcs-stat-card .stat-icon .material-symbols-outlined {
    font-size: 1.5rem;
}

/* ==========================================================================
   PROGRESS BARS
   ========================================================================== */
.progress {
    height: 0.375rem;
    background-color: var(--lcs-slate-200);
    border-radius: 9999px;
    overflow: hidden;
}

.progress-bar {
    background-color: var(--lcs-brand-green);
    border-radius: 9999px;
}

.lcs-progress-inline {
    display: flex;
    align-items: center;
}

.lcs-progress-inline .progress-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--lcs-slate-700);
    margin-right: 0.5rem;
}

.lcs-progress-inline .progress {
    width: 4rem;
}

/* ==========================================================================
   AVATARS
   ========================================================================== */
.avatar,
.lcs-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: rgba(156, 189, 156, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--lcs-brand-dark);
}

.avatar-sm { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
.avatar-md { width: 2rem; height: 2rem; font-size: 0.75rem; }
.avatar-lg { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
.avatar-xl { width: 3rem; height: 3rem; font-size: 1rem; }

/* Avatar with Status */
.avatar-status {
    position: relative;
}

.avatar-status .status-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

.avatar-status .status-indicator.online { background-color: var(--lcs-success); }
.avatar-status .status-indicator.offline { background-color: var(--lcs-slate-400); }
.avatar-status .status-indicator.busy { background-color: var(--lcs-danger); }
.avatar-status .status-indicator.away { background-color: var(--lcs-warning); }

/* ==========================================================================
   DROPDOWNS
   ========================================================================== */
.dropdown-menu {
    border: 1px solid var(--lcs-slate-200);
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 0.5rem;
}

.dark .dropdown-menu {
    background-color: var(--lcs-surface-dark);
    border-color: var(--lcs-slate-700);
}

.dropdown-item {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    color: var(--lcs-slate-600);
    transition: all 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--lcs-slate-50);
    color: var(--lcs-slate-800);
}

.dark .dropdown-item {
    color: var(--lcs-slate-300);
}

.dark .dropdown-item:hover,
.dark .dropdown-item:focus {
    background-color: var(--lcs-slate-800);
    color: #ffffff;
}

.dropdown-divider {
    border-top-color: var(--lcs-slate-200);
    margin: 0.5rem 0;
}

.dark .dropdown-divider {
    border-top-color: var(--lcs-slate-700);
}

/* ==========================================================================
   MODALS
   ========================================================================== */
.modal-content {
    border: 1px solid var(--lcs-slate-200);
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.dark .modal-content {
    background-color: var(--lcs-surface-dark);
    border-color: var(--lcs-slate-700);
}

.modal-header {
    border-bottom: 1px solid var(--lcs-slate-200);
    padding: 1rem 1.5rem;
}

.dark .modal-header {
    border-bottom-color: var(--lcs-slate-700);
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--lcs-accent);
}

.dark .modal-title {
    color: #ffffff;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid var(--lcs-slate-200);
    padding: 1rem 1.5rem;
    gap: 0.75rem;
}

.dark .modal-footer {
    border-top-color: var(--lcs-slate-700);
}

.btn-close {
    color: var(--lcs-slate-400);
    opacity: 1;
}

.btn-close:hover {
    color: var(--lcs-slate-600);
}

/* ==========================================================================
   ALERTS / TOASTS
   ========================================================================== */
.alert {
    border-radius: 0.5rem;
    border-width: 1px;
    padding: 1rem;
}

.alert-success {
    background-color: var(--lcs-success-bg);
    border-color: var(--lcs-success-border);
    color: #166534;
}

.alert-warning {
    background-color: var(--lcs-warning-bg);
    border-color: var(--lcs-warning-border);
    color: #92400e;
}

.alert-danger {
    background-color: var(--lcs-danger-bg);
    border-color: var(--lcs-danger-border);
    color: #991b1b;
}

.alert-info {
    background-color: var(--lcs-info-bg);
    border-color: var(--lcs-info-border);
    color: #1e40af;
}

/* Toastr Integration - LCS Theme Override */
#toast-container > div {
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    opacity: 1 !important;
    padding: 1rem 1rem 1rem 3.5rem !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

#toast-container > div:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

.toast-title {
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    margin-bottom: 0.25rem !important;
}

.toast-message {
    font-size: 0.875rem !important;
    opacity: 0.9 !important;
}

.toast-close-button {
    font-weight: 400 !important;
    font-size: 1.25rem !important;
    opacity: 0.7 !important;
    text-shadow: none !important;
}

.toast-close-button:hover {
    opacity: 1 !important;
}

.toast-progress {
    height: 3px !important;
    opacity: 0.3 !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
}

/* Success Toast - LCS Brand Green (muted light background) */
#toast-container > .toast-success,
#toast-container > div.toast-success {
    background-color: #e8f0e8 !important;
    border-left: 4px solid #9cbd9c !important;
    color: #3d5a3d !important;
    background-image: none !important;
}

#toast-container > .toast-success .toast-title,
#toast-container > .toast-success .toast-message {
    color: #3d5a3d !important;
}

#toast-container > .toast-success .toast-close-button {
    color: #3d5a3d !important;
}

/* Warning Toast */
#toast-container > .toast-warning,
#toast-container > div.toast-warning {
    background-color: #fef3c7 !important;
    border-left: 4px solid #f59e0b !important;
    color: #92400e !important;
    background-image: none !important;
}

#toast-container > .toast-warning .toast-title,
#toast-container > .toast-warning .toast-message {
    color: #92400e !important;
}

#toast-container > .toast-warning .toast-close-button {
    color: #92400e !important;
}

/* Error Toast */
#toast-container > .toast-error,
#toast-container > div.toast-error {
    background-color: #fee2e2 !important;
    border-left: 4px solid #ef4444 !important;
    color: #991b1b !important;
    background-image: none !important;
}

#toast-container > .toast-error .toast-title,
#toast-container > .toast-error .toast-message {
    color: #991b1b !important;
}

#toast-container > .toast-error .toast-close-button {
    color: #991b1b !important;
}

/* Info Toast */
#toast-container > .toast-info,
#toast-container > div.toast-info {
    background-color: #dbeafe !important;
    border-left: 4px solid #3b82f6 !important;
    color: #1e40af !important;
    background-image: none !important;
}

#toast-container > .toast-info .toast-title,
#toast-container > .toast-info .toast-message {
    color: #1e40af !important;
}

#toast-container > .toast-info .toast-close-button {
    color: #1e40af !important;
}

/* ==========================================================================
   TABS
   ========================================================================== */
.nav-tabs {
    border-bottom: 1px solid var(--lcs-slate-200);
}

.nav-tabs .nav-link {
    color: var(--lcs-slate-500);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border: none;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--lcs-slate-700);
    border-bottom-color: var(--lcs-slate-300);
}

.nav-tabs .nav-link.active {
    color: var(--lcs-brand-green);
    border-bottom-color: var(--lcs-brand-green);
}

/* ==========================================================================
   TOOLTIPS
   ========================================================================== */
.tooltip-inner {
    background-color: var(--lcs-slate-800);
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--lcs-slate-800);
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--lcs-slate-800);
}

/* ==========================================================================
   SELECT2 - LCS Theme Override
   ========================================================================== */
/* Base selection box — match .form-control border/padding so the widget is
   visually consistent with other inputs (and not borderless like the default).
   The selectors are doubled (.select2-container--default.select2-container--default)
   to outrank the vendor's `border: 0px solid !important` in select2.min.css
   regardless of <link> order in _Layout.cshtml. */
.select2-container--default.select2-container--default .select2-selection--single,
.select2-container--default.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--lcs-slate-300) !important;
    border-radius: 0.375rem !important;
    background-color: #ffffff !important;
    min-height: calc(1.5em + 0.75rem + 2px) !important; /* matches form-control */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.select2-container--default.select2-container--default .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px) !important;
    padding: 0.5rem 0.75rem !important;
    display: flex;
    align-items: center;
}
.select2-container--default.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    line-height: 1.5 !important;
    color: var(--lcs-slate-700);
}
.select2-container--default.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
}
.select2-container--default.select2-container--default .select2-selection--multiple {
    padding: 0.25rem 0.5rem !important;
}
/* Hover state matches form-control */
.select2-container--default.select2-container--default .select2-selection--single:hover,
.select2-container--default.select2-container--default .select2-selection--multiple:hover {
    border-color: var(--lcs-slate-400) !important;
}

/* Header gruppo (es. "Seleziona Appalto") */
.select2-container--default .select2-results__group {
    background-color: var(--lcs-brand-green) !important;
    color: #ffffff !important;
    font-weight: 600;
    padding: 0.5rem 0.75rem !important;
}

/* Elemento selezionato nel dropdown */
.select2-container--default .select2-results__option--selected {
    background-color: rgba(156, 189, 156, 0.15) !important;
    color: var(--lcs-brand-green-dark) !important;
}

/* Hover sulle opzioni */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected="true"],
.select2-container--default .select2-results__option--highlighted[aria-selected="false"] {
    background-color: var(--lcs-brand-green) !important;
    color: #ffffff !important;
}

/* Bordo focus del select */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--lcs-brand-green) !important;
    box-shadow: 0 0 0 2px rgba(156, 189, 156, 0.15) !important;
}

/* Dropdown border */
.select2-dropdown {
    border-color: var(--lcs-slate-300) !important;
}

/* Clear button (X) hover */
.select2-container--default .select2-selection--single .select2-selection__clear:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--lcs-danger) !important;
}

/* Multi-select tags */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(156, 189, 156, 0.15) !important;
    border-color: var(--lcs-brand-green) !important;
    color: var(--lcs-brand-green-dark) !important;
}

/* ==========================================================================
   SCROLLBARS
   ========================================================================== */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--lcs-slate-700);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--lcs-slate-600);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Text Colors */
.text-brand-green { color: var(--lcs-brand-green) !important; }
.text-brand-dark { color: var(--lcs-brand-dark) !important; }
.text-accent { color: var(--lcs-accent) !important; }
.text-slate-400 { color: var(--lcs-slate-400) !important; }
.text-slate-500 { color: var(--lcs-slate-500) !important; }
.text-slate-600 { color: var(--lcs-slate-600) !important; }
.text-slate-700 { color: var(--lcs-slate-700) !important; }

/* Background Colors */
.bg-brand-green { background-color: var(--lcs-brand-green) !important; }
.bg-brand-green-10 { background-color: rgba(156, 189, 156, 0.1) !important; }
.bg-brand-dark { background-color: var(--lcs-brand-dark) !important; }
.bg-slate-50 { background-color: var(--lcs-slate-50) !important; }
.bg-slate-100 { background-color: var(--lcs-slate-100) !important; }

/* Border Colors */
.border-slate-200 { border-color: var(--lcs-slate-200) !important; }
.border-slate-300 { border-color: var(--lcs-slate-300) !important; }
.border-brand-green { border-color: var(--lcs-brand-green) !important; }

/* Opacity utilities */
.opacity-0 { opacity: 0 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-100 { opacity: 1 !important; }

.group:hover .group-hover\:opacity-100 {
    opacity: 1 !important;
}

/* Transition */
.transition-all { transition: all 0.15s ease !important; }
.transition-colors { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease !important; }
.transition-opacity { transition: opacity 0.15s ease !important; }

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 768px) {
    .lcs-page-header {
        padding: 0.75rem;
    }

    .lcs-page-header .page-title {
        font-size: 1rem;
    }

    .lcs-page-header .page-actions {
        flex-direction: column;
        width: 100%;
    }

    .lcs-page-header .search-input-wrapper {
        width: 100%;
    }

    .lcs-page-header .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   PHOENIX SPECIFIC OVERRIDES
   ========================================================================== */

/* Override Phoenix navbar colors */
.phoenix-navbar-vertical .navbar-collapse {
    background-color: var(--lcs-brand-dark) !important;
}

/* Override Phoenix card shadows */
.phoenix-card {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Override Phoenix form focus states */
.phoenix-form-control:focus {
    border-color: var(--lcs-brand-green) !important;
    box-shadow: 0 0 0 3px rgba(156, 189, 156, 0.15) !important;
}

/* Override Phoenix button primary — uniform 3D format with btn-lcs-primary */
.phoenix-btn-primary {
    background-color: var(--lcs-brand-green) !important;
    border: 1px solid var(--lcs-brand-green-dark) !important;
    color: var(--lcs-brand-dark) !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.375rem 1rem;
    border-radius: 0.375rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 1px 0 rgba(0, 0, 0, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.12);
    transition: all 0.15s ease;
}

.phoenix-btn-primary:hover,
.phoenix-btn-primary:focus {
    background-color: var(--lcs-brand-green-dark) !important;
    border-color: var(--lcs-brand-green-dark) !important;
    color: var(--lcs-brand-dark) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 2px 0 rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.phoenix-btn-primary:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(0, 0, 0, 0.05);
    transform: translateY(0);
}

/* ==========================================================================
   SWEETALERT2 - LCS Theme Override
   ========================================================================== */

/* Button container spacing */
.swal2-actions {
    gap: 0.75rem !important;
}

/* Confirm button - Primary Green (full 3D format matching btn-lcs-primary) */
.swal2-confirm,
.swal2-styled.swal2-confirm {
    background-color: var(--lcs-brand-green) !important;
    border: 1px solid var(--lcs-brand-green-dark) !important;
    color: var(--lcs-brand-dark) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 0.375rem !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 1px 0 rgba(0, 0, 0, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.15s ease !important;
}

.swal2-confirm:hover,
.swal2-styled.swal2-confirm:hover,
.swal2-confirm:focus,
.swal2-styled.swal2-confirm:focus {
    background-color: var(--lcs-brand-green-dark) !important;
    border-color: var(--lcs-brand-green-dark) !important;
    color: var(--lcs-brand-dark) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 2px 0 rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px);
}

.swal2-confirm:active,
.swal2-styled.swal2-confirm:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(0, 0, 0, 0.05) !important;
    transform: translateY(0);
}

/* Cancel button - Secondary/Outline */
.swal2-cancel,
.swal2-styled.swal2-cancel {
    background-color: transparent !important;
    border: 1px solid var(--lcs-slate-300) !important;
    color: var(--lcs-slate-600) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 0.375rem !important;
    transition: all 0.15s ease !important;
}

.swal2-cancel:hover,
.swal2-styled.swal2-cancel:hover {
    background-color: var(--lcs-slate-50) !important;
    border-color: var(--lcs-slate-400) !important;
    color: var(--lcs-slate-700) !important;
}

/* Deny button (if used) - Danger style */
.swal2-deny,
.swal2-styled.swal2-deny {
    background-color: var(--lcs-danger) !important;
    border-color: var(--lcs-danger) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 0.375rem !important;
}

.swal2-deny:hover,
.swal2-styled.swal2-deny:hover {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
}

/* Modal popup styling */
.swal2-popup {
    border-radius: 0.5rem !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Title */
.swal2-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: var(--lcs-accent) !important;
}

/* Content text */
.swal2-html-container {
    font-size: 0.9375rem !important;
    color: var(--lcs-slate-600) !important;
}

/* Success icon - Green */
.swal2-icon.swal2-success {
    border-color: var(--lcs-brand-green) !important;
    color: var(--lcs-brand-green) !important;
}

.swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-icon.swal2-success .swal2-success-line-long {
    background-color: var(--lcs-brand-green) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(156, 189, 156, 0.3) !important;
}

/* Warning icon */
.swal2-icon.swal2-warning {
    border-color: var(--lcs-warning) !important;
    color: var(--lcs-warning) !important;
}

/* Error icon */
.swal2-icon.swal2-error {
    border-color: var(--lcs-danger) !important;
}

.swal2-icon.swal2-error .swal2-x-mark-line-left,
.swal2-icon.swal2-error .swal2-x-mark-line-right {
    background-color: var(--lcs-danger) !important;
}

/* Info icon */
.swal2-icon.swal2-info {
    border-color: var(--lcs-info) !important;
    color: var(--lcs-info) !important;
}

/* Question icon */
.swal2-icon.swal2-question {
    border-color: var(--lcs-slate-400) !important;
    color: var(--lcs-slate-400) !important;
}

/* Input styling in SweetAlert */
.swal2-input,
.swal2-textarea,
.swal2-select {
    border: 1px solid var(--lcs-slate-300) !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: var(--lcs-brand-green) !important;
    box-shadow: 0 0 0 3px rgba(156, 189, 156, 0.15) !important;
}

/* Flatpickr navigation fix — increase clickable area on prev/next arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    padding: 5px 10px !important;
}
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
    opacity: 1 !important;
    padding: 0 6px !important;
}

/* ==========================================================================
   FLATPICKR — day cells, selected/today/range, weekday header
   ========================================================================== */
.flatpickr-calendar {
    border-radius: 0.5rem !important;
    border: 1px solid var(--lcs-slate-200) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.10), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
.flatpickr-day.today {
    border-color: var(--lcs-brand-green) !important;
    color: var(--lcs-brand-green-dark) !important;
    font-weight: 600;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: var(--lcs-brand-green) !important;
    color: var(--lcs-brand-dark) !important;
    border-color: var(--lcs-brand-green) !important;
}
.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: rgba(156, 189, 156, 0.18) !important;
    border-color: transparent !important;
    color: var(--lcs-brand-dark) !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange {
    background: var(--lcs-brand-green) !important;
    border-color: var(--lcs-brand-green) !important;
    color: var(--lcs-brand-dark) !important;
}
.flatpickr-day.inRange {
    background: rgba(156, 189, 156, 0.20) !important;
    border-color: transparent !important;
    box-shadow: -5px 0 0 rgba(156, 189, 156, 0.20), 5px 0 0 rgba(156, 189, 156, 0.20) !important;
    color: var(--lcs-brand-dark) !important;
}
.flatpickr-weekday {
    color: var(--lcs-slate-500) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
}

/* ==========================================================================
   BOOTSTRAP PAGINATION — used by some custom paginators and Phoenix lists
   (DataTables paginate is themed separately above.)
   ========================================================================== */
.pagination .page-link {
    color: var(--lcs-slate-600) !important;
    border: 1px solid var(--lcs-slate-200) !important;
    background-color: #ffffff !important;
    font-size: 0.8125rem;
    padding: 0.375rem 0.625rem;
    transition: all 0.15s ease;
}
.pagination .page-link:hover {
    background-color: var(--lcs-slate-50) !important;
    border-color: var(--lcs-slate-300) !important;
    color: var(--lcs-slate-800) !important;
    z-index: 2;
}
.pagination .page-link:focus {
    box-shadow: 0 0 0 3px rgba(156, 189, 156, 0.20) !important;
    z-index: 3;
}
.pagination .page-item.active .page-link {
    background-color: var(--lcs-brand-green) !important;
    border-color: var(--lcs-brand-green-dark) !important;
    color: var(--lcs-brand-dark) !important;
    font-weight: 600;
}
.pagination .page-item.disabled .page-link {
    background-color: var(--lcs-slate-50) !important;
    color: var(--lcs-slate-400) !important;
    border-color: var(--lcs-slate-200) !important;
    pointer-events: none;
}

/* ==========================================================================
   FORM VALIDATION — is-invalid / is-valid / feedback
   ========================================================================== */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: var(--lcs-danger) !important;
    background-image: none;
    padding-right: 0.75rem;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus {
    border-color: var(--lcs-danger) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}
.form-control.is-valid,
.form-select.is-valid,
.was-validated .form-control:valid,
.was-validated .form-select:valid {
    border-color: var(--lcs-brand-green-dark) !important;
    background-image: none;
    padding-right: 0.75rem;
}
.form-control.is-valid:focus,
.form-select.is-valid:focus {
    border-color: var(--lcs-brand-green) !important;
    box-shadow: 0 0 0 3px rgba(156, 189, 156, 0.20) !important;
}
.invalid-feedback,
.text-danger.field-validation-error,
span.field-validation-error,
.field-validation-error {
    color: var(--lcs-danger) !important;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.25rem;
    display: block;
}
.valid-feedback {
    color: #166534 !important;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.25rem;
}
/* Select2 wrapper turns red when adjacent native select has .is-invalid */
.is-invalid + .select2-container--default .select2-selection {
    border-color: var(--lcs-danger) !important;
}

/* Light wrappers used by some legacy code: error/warn/success badge on Select2 */
.select2-container.error .select2-selection,
.select2-container.error .select2-selection--single,
.select2-container.error .select2-selection--multiple {
    border-color: var(--lcs-danger) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}
.select2-container.warn .select2-selection,
.select2-container.warn .select2-selection--single,
.select2-container.warn .select2-selection--multiple {
    border-color: var(--lcs-warning) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18) !important;
}
.select2-container.success .select2-selection,
.select2-container.success .select2-selection--single,
.select2-container.success .select2-selection--multiple {
    border-color: var(--lcs-brand-green-dark) !important;
    box-shadow: 0 0 0 3px rgba(156, 189, 156, 0.18) !important;
}

/* ==========================================================================
   SPINNERS — Bootstrap loading indicators tinted brand-green by default
   ========================================================================== */
.spinner-border,
.spinner-grow {
    color: var(--lcs-brand-green-dark);
}
.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--lcs-brand-green-dark) !important;
}
.spinner-border.text-success,
.spinner-grow.text-success {
    color: var(--lcs-brand-green) !important;
}
.btn .spinner-border,
.btn .spinner-grow {
    color: inherit; /* inherit from the surrounding button text color */
}

/* ==========================================================================
   FORM SWITCH (Bootstrap form-check.form-switch) — brand-green when on
   ========================================================================== */
.form-switch .form-check-input {
    background-color: var(--lcs-slate-200);
    border-color: var(--lcs-slate-300);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
    background-color: var(--lcs-brand-green) !important;
    border-color: var(--lcs-brand-green-dark) !important;
}
.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(156, 189, 156, 0.20) !important;
}

/* ==========================================================================
   BOOTSTRAP TEXT/BG COLOR HELPERS — keep brand green for "primary"
   ========================================================================== */
.text-primary,
a.text-primary {
    color: var(--lcs-brand-green-dark) !important;
}
.text-success {
    color: var(--lcs-brand-green-dark) !important;
}
.bg-primary {
    background-color: var(--lcs-brand-green) !important;
    color: var(--lcs-brand-dark) !important;
}
.bg-primary-subtle {
    background-color: rgba(156, 189, 156, 0.12) !important;
    color: var(--lcs-brand-green-dark) !important;
}
.border-primary {
    border-color: var(--lcs-brand-green) !important;
}

/* ==========================================================================
   MODAL POLISH — subtle separator + rounded headers, consistent close button
   ========================================================================== */
.modal-content {
    border-radius: 0.5rem;
    border: 1px solid var(--lcs-slate-200);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.modal-header {
    border-bottom: 1px solid var(--lcs-slate-200);
    padding: 0.875rem 1.25rem;
}
.modal-title {
    color: var(--lcs-slate-800);
    font-weight: 600;
    font-size: 1rem;
}
.modal-footer {
    border-top: 1px solid var(--lcs-slate-200);
    padding: 0.75rem 1.25rem;
    gap: 0.5rem;
}

/* ==========================================================================
   NAV PILLS — used in some settings tabs; tint with brand
   ========================================================================== */
.nav-pills .nav-link {
    color: var(--lcs-slate-600);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.375rem 0.875rem;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
}
.nav-pills .nav-link:hover {
    background-color: var(--lcs-slate-100);
    color: var(--lcs-slate-800);
}
.nav-pills .nav-link.active {
    background-color: var(--lcs-brand-green) !important;
    color: var(--lcs-brand-dark) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.08);
}

/*# sourceMappingURL=user.css.map */