/* ========================================= */
/*  ELITE PORTAL - STYLE GUIDE OVERHAUL     */
/*  Exact replica from ui_final_complete.html */
/* ========================================= */

:root {
    /* DEFAULT ORANGE THEME */
    --primary-grad: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%);
    --primary-color: #ff6a00;
    --secondary-color: #ee0979;
    --accent-text: #ff6a00;
    --btn-hover: #e65100;

    --sidebar-width: 60px;
    --sidebar-expanded: 240px;
    --sidebar-bg: #1a1f36;
    --main-bg: #f4f6f8;
    --card-bg: #ffffff;
    --text-dark: #333;
    --text-muted: #888;
    --border-light: #f1f1f1;
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.03);
    --radius: 12px;
    --font-size: 0.85rem;
}

/* BLUE THEME OVERRIDE */
body.theme-blue {
    --primary-grad: linear-gradient(135deg, #0061f2 0%, #6900f2 100%);
    --primary-color: #0061f2;
    --secondary-color: #6900f2;
    --accent-text: #0061f2;
    --btn-hover: #004bbd;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--main-bg);
    color: var(--text-dark);
    margin: 0;
    font-size: var(--font-size);
    transition: background 0.3s;
}

/* ============ SIDEBAR ============ */
/* ============ SIDEBAR ============ */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.05);
}

.sidebar:hover {
    width: var(--sidebar-expanded);
}

/* Sidebar Menu - Scrollable section when expanded */
.sidebar .sidebar-menu {
    flex: 1;
    overflow: hidden;
    padding-bottom: 20px;
}

.sidebar:hover .sidebar-menu {
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Custom Scrollbar for Sidebar Menu */
.sidebar .sidebar-menu::-webkit-scrollbar {
    width: 6px;
}

.sidebar .sidebar-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.sidebar .sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
}

.sidebar .sidebar-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Sidebar Header */
.sidebar .sidebar-header {
    height: 70px;
    padding: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.sidebar .logo {
    width: 60px;
    /* Full sidebar width for centering */
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
}

.sidebar .brand {
    color: white;
    font-weight: 700;
    font-size: 1rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    position: absolute;
    left: 60px;
    /* Start text after icon area */
}

.sidebar:hover .brand {
    opacity: 1;
}

/* Area Toggle - Hidden when collapsed, visible when expanded */
.sidebar .area-toggle {
    margin: 10px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 4px;
    display: none;
}

.sidebar:hover .area-toggle {
    display: flex;
}

.sidebar .toggle-opt {
    flex: 1;
    text-align: center;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

.sidebar .toggle-opt.active {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-weight: 600;
}

/* Section Headers */
.sidebar .sidebar-section-header {
    padding: 0 20px;
    /* Horizontal padding only */
    max-height: 0;
    /* Use max-height for transition */
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin: 0;
}

.sidebar:hover .sidebar-section-header {
    max-height: 40px;
    /* Sufficient height */
    opacity: 1;
    padding-top: 16px;
    padding-bottom: 8px;
}

.sidebar .section-title {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

/* Navigation Items */

.sidebar .sidebar-menu li {
    list-style: none;
}

.sidebar .nav-item {
    display: flex;
    align-items: center;
    height: 48px;
    /* Fixed height per item */
    padding: 0;
    /* Remove padding to let icon container control layout */
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: 0.2s;
    white-space: nowrap;
    position: relative;
    border-left: 3px solid transparent;
}

/* Icon Container - Always 60px wide to match collapsed sidebar */
.sidebar .nav-item i {
    width: 60px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.7) !important;
    /* Neutral Color */
    transition: color 0.2s, transform 0.2s;
}

/* Text Container */
.sidebar .nav-item span {
    opacity: 0;
    transition: opacity 0.2s ease;
    margin-left: 0;
    /* No gap needed purely, icon width handles it */
    white-space: nowrap;
}

.sidebar:hover .nav-item span {
    opacity: 1;
}

/* Hover Effects */
.sidebar .nav-item:hover {
    color: white;
    background: rgba(255, 255, 255, 0.05);
}

.sidebar .nav-item:hover i {
    color: white !important;
}

/* Active State */
.sidebar .nav-item.active {
    color: white;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    border-left-color: var(--primary-color);
}

.sidebar .nav-item.active i {
    color: white !important;
}

/* ============ UTILITIES GROUP (Notification & Dark Mode) ============ */
.sidebar .sidebar-utilities {
    display: flex;
    flex-direction: column;
    /* Collapsed: Stacked vertical */
    padding: 0;
    margin-bottom: 5px;
    width: 60px;
    /* Fixed width in collapsed */
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar:hover .sidebar-utilities {
    flex-direction: row;
    /* Expanded: Side-by-side */
    width: 100%;
    padding: 0 10px;
    gap: 8px;
    margin-bottom: 10px;
}

/* Individual Utility Item (Bell / Moon) */
.sidebar .utility-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 100%;
    /* Full width of container */
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 0;
    position: relative;
    border-left: 3px solid transparent;
    /* Alignment consistency */
}

/* Expanded styling for items */
.sidebar:hover .utility-item {
    width: 50%;
    /* Share space */
    border-radius: 8px;
    border-left: none;
    /* No active indicator line in utilitarian row */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar .utility-item:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

/* Icon Container - Always Centered */
.sidebar .utility-item .icon-container {
    width: 32px;
    /* Intrinsic icon width */
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sidebar .utility-item i {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}

.sidebar .utility-item:hover i {
    color: white;
}

/* Labels - Hidden for Utilities to save space and keep clean look in side-by-side */
.sidebar .utility-label {
    display: none;
    /* User requested icons side-by-side for space, text would be too cramped */
}

/* Notification Badge Styling (Restored) */
.notification-count {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 0.6rem;
    padding: 2px 5px;
    background: #ef4444;
    color: white;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Bell Animation */
@keyframes bellShake {

    0%,
    100% {
        transform: rotate(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: rotate(-10deg);
    }

    20%,
    40%,
    60%,
    80% {
        transform: rotate(10deg);
    }
}

.sidebar .utility-item:hover i.fa-bell {
    animation: bellShake 0.5s ease-in-out;
    color: #ffd700;
    /* Gold color on hover as requested/implied by 'restoring' */
}

/* CLEANUP: Old classes removed */

/* Sidebar Toggle Buttons - Obsolete container styles removed/minimized */
.sidebar .sidebar-toggle-buttons {
    display: none;
    /* Removed from HTML flow, keep safe */
}

.sidebar .toggle-buttons-row {
    display: flex;
    gap: 0;
    /* Controlled by items */
    justify-content: center;
    width: 100%;
}

/* Notification Badge - ALWAYS Visible */
#sidebar-notification-badge {
    /* Dimensions controlled by .utility-item */
    padding: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    position: relative;
    cursor: pointer;
}

#sidebar-notification-badge i {
    font-size: 1.2rem;
    color: #fbbf24;
}

#sidebar-notification-badge:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Bell Animation */
@keyframes bellShake {

    0%,
    100% {
        transform: rotate(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: rotate(-10deg);
    }

    20%,
    40%,
    60%,
    80% {
        transform: rotate(10deg);
    }
}

#sidebar-notification-badge.has-notifications i {
    animation: bellShake 0.5s ease-in-out;
}

/* Note: Notification drawer styles are in notification-modern.css */

/* ============ SIDEBAR ICONS ROW (Fixed Height - No Vertical Shift) ============ */
.sidebar .sidebar-icons-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 10px;
    height: 75px;
    /* Reduced for tighter spacing */
    width: 60px;
    transition: width 0.3s ease;
}

.sidebar:hover .sidebar-icons-row {
    flex-wrap: nowrap;
    width: 100%;
    padding: 10px 20px;
    gap: 10px;
}

/* ============ SIDEBAR TOGGLE ROW (Fixed Height) ============ */
.sidebar .sidebar-toggle-row {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 38px;
    /* Tighter spacing */
    padding: 0 8px;
    width: 60px;
    transition: width 0.3s ease, padding 0.3s ease;
}

.sidebar:hover .sidebar-toggle-row {
    width: 100%;
    padding: 0 15px;
}

/* Individual Utility Item */
.sidebar .util-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0;
}

.sidebar .util-item:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    transform: scale(1.05);
}

.sidebar .util-item i {
    font-size: 0.95rem;
}

/* Notification Badge */
.sidebar .util-item .notification-count {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.55rem;
    padding: 0.15rem 0.3rem;
    min-width: 16px;
    line-height: 1;
}

/* Hide badge if 0 */
.sidebar .util-item .notification-count:empty,
.sidebar .util-item .notification-count[data-count="0"] {
    display: none;
}

/* Bell Animation */
.sidebar .util-item:hover i.fa-bell {
    animation: bellShake 0.5s ease-in-out;
}

/* Context Indicator - Simple icon style (visible when collapsed) */
.sidebar .util-item.context-indicator {
    display: flex;
    width: 36px;
    height: 36px;
    font-size: 1rem;
    background: transparent !important;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.sidebar .util-item.context-indicator.business {
    color: var(--primary-color, #ff6a00);
}

.sidebar .util-item.context-indicator.developer {
    color: #22c55e;
}

/* Hide context indicator when sidebar expands - completely remove from layout */
.sidebar:hover .util-item.context-indicator {
    display: none;
}

/* Toggle styling already defined in base area-toggle rules */

/* Area Toggle - Original style, slightly larger */
.sidebar .area-toggle .toggle-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    /* Slightly larger than original */
}

.sidebar .area-toggle .toggle-opt i {
    font-size: 0.8rem;
}

.sidebar .area-toggle .toggle-opt span {
    font-size: 0.75rem;
}

/* Individual Utility Item */
.sidebar .sidebar-utilities .utility-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 100%;
    /* Full width in collapsed */
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 12px;
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
}

/* Expanded styling */
.sidebar:hover .sidebar-utilities .utility-item {
    width: 50%;
    /* Share space */
    justify-content: flex-start;
    /* Align left for icon+text if needed */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar .sidebar-utilities .utility-item:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

/* Icon Container - Always Centered */
.sidebar .sidebar-utilities .utility-item .icon-container {
    width: 60px;
    /* Fixed icon width for centering */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar:hover .sidebar-utilities .utility-item .icon-container {
    width: 40px;
    /* Smaller in expanded mode */
}

.sidebar .sidebar-utilities .utility-item i {
    font-size: 1.2rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sidebar .sidebar-utilities .utility-item:hover i {
    transform: scale(1.1);
}

/* Label Texts */
.sidebar .sidebar-utilities .utility-item .utility-label {
    display: none;
    white-space: nowrap;
    opacity: 0;
    font-size: 0.85rem;
    font-weight: 500;
    margin-left: 5px;
}

.sidebar:hover .sidebar-utilities .utility-item .utility-label {
    display: block;
    opacity: 1;
}

/* --- Dark Mode Toggle Special Visibility --- */
/* --- Dark Mode Toggle Special Visibility --- */
#dark-mode-toggle {
    display: none !important;
    /* Hidden in collapsed */
}

.sidebar:hover #dark-mode-toggle {
    display: flex !important;
    /* Visible in expanded */
}

/* Force Notification Label Hidden (Icon Only requested) */
#sidebar-notification-badge .utility-label {
    display: none !important;
}

/* Dark Mode Label Visible on Expand */
.sidebar:hover #dark-mode-toggle .utility-label {
    display: block !important;
    opacity: 1;
}

/* NOTIFICATION BADGE Specifics */
#sidebar-notification-badge .notification-count {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(5px, -10px) !important;
    /* Adjusted for centered bell */
    font-size: 0.6rem;
    padding: 2px 5px;
    background: #ef4444;
    color: white;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Ensure Bell Shake works */
.sidebar .sidebar-utilities .utility-item:hover i.fa-bell {
    animation: bellShake 0.5s ease-in-out;
}

/* --- Section Headers (Dividers) --- */
.sidebar-section-header {
    min-height: 40px;
    /* Reserve space */
    display: flex;
    align-items: center;
    padding: 0 20px;
    margin-top: 10px;
    margin-bottom: 5px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Persistent line */
}

.sidebar-section-header .section-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 600;
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.2s ease 0.1s;
}

.sidebar:hover .sidebar-section-header .section-title {
    opacity: 1;
}

/* Hide old pseudo-element dividers */
/* Hide old pseudo-element dividers */
.sidebar-section-header::after {
    display: none;
}

/* Logout Button */
.sidebar .logout-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: 0.2s;
    font-size: inherit;
    text-align: left;
}

.sidebar .logout-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.sidebar .logout-btn i {
    width: 32px;
    font-size: 1.1rem;
    text-align: center;
}

.sidebar .logout-btn span {
    opacity: 0;
    transition: 0.2s;
}

.sidebar:hover .logout-btn span {
    opacity: 1;
}

/* PWA Install Button - Same Pattern as Logout */
.sidebar .pwa-install-sidebar-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: 0.2s;
    font-size: inherit;
    text-align: left;
}

.sidebar .pwa-install-sidebar-btn:hover {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.sidebar .pwa-install-sidebar-btn i {
    width: 32px;
    font-size: 1.1rem;
    text-align: center;
}

.sidebar .pwa-install-sidebar-btn span {
    opacity: 0;
    transition: 0.2s;
}

.sidebar:hover .pwa-install-sidebar-btn span {
    opacity: 1;
}


/* ============ MAIN CONTENT ============ */
.main-content {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    padding: 20px 32px;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 100vh;
    background: var(--main-bg);
    position: relative;
    z-index: 1;
}

/* When sidebar expands, shift the main content */
.sidebar:hover~.main-content {
    margin-left: var(--sidebar-expanded);
    width: calc(100% - var(--sidebar-expanded));
}


/* ============ HEADER / BREADCRUMB ============ */
.breadcrumb {
    font-size: 0.8rem;
    margin-bottom: 8px;
    display: flex;
    gap: 6px;
    color: var(--text-muted);
    background: transparent;
    padding: 0;
}

.breadcrumb a {
    color: var(--accent-text);
    text-decoration: none;
    opacity: 0.9;
}

.breadcrumb a:hover {
    text-decoration: underline;
    opacity: 1;
}

.breadcrumb span {
    color: #ccc;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 10px;
}

.page-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1f36;
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-title i {
    color: #fff;
    background: var(--primary-grad);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 4px;
    display: block;
}

/* ============ BUTTONS ============ */
.actions {
    display: flex;
    gap: 8px;
}

.btn-c {
    padding: 9px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-c:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-primary-c {
    background: var(--primary-grad);
    color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: none;
}

.btn-primary-c:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.btn-light-c {
    background: white;
    border-color: #ddd;
    color: #555;
}

.btn-light-c:hover {
    background: #f8f9fa;
    border-color: #ccc;
    color: #222;
}

.btn-warn-c {
    background: #fff8e1;
    color: #f39c12;
    border-color: #ffe0b2;
}

.btn-warn-c:hover {
    background: #fff3cd;
    color: #d35400;
    border-color: #ffd54f;
}

/* ============ STATS GRID ============ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.stat-box {
    background: white;
    padding: 22px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
    transition: 0.2s;
    border: 1px solid transparent;
}

.stat-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.stat-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #eee;
}

.stat-box.active::after {
    background: var(--primary-grad);
}

.stat-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    min-height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
    flex-shrink: 0;
}

/* Generic bg-gradient classes for all icons */
.bg-gradient-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.bg-gradient-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.bg-gradient-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.bg-gradient-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.bg-gradient-info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.8px;
    margin-bottom: 4px;
    font-weight: 700;
}

.stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1f36;
}

/* ============ CARDS ============ */
.card-custom {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    margin-bottom: 24px;
    border: 1px solid transparent;
}

.card-head {
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
}

.card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1f36;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-title i {
    font-size: 1rem;
    color: var(--text-muted);
}

/* Colored Icons */
.card-title .i-det {
    color: #3498db;
}

.card-title .i-team {
    color: #9b59b6;
}

.card-title .i-fin {
    color: #2ecc71;
}

.card-title .i-drive {
    color: #f39c12;
}

.card-title .i-bolt {
    color: #e74c3c;
}

.card-cont {
    padding: 24px;
}

/* ============ PILL TABS ============ */
.header-tabs {
    display: flex;
    gap: 4px;
    background: #f4f6f8;
    padding: 4px;
    border-radius: 8px;
}

.tab-item,
.header-tabs .nav-link {
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    text-decoration: none;
}

.tab-item:hover,
.header-tabs .nav-link:hover {
    color: #333;
}

.tab-item.active,
.header-tabs .nav-link.active {
    background: white;
    color: var(--accent-text);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.tab-item i {
    font-size: 0.9rem;
}

/* ============ DETAILS CLUSTER ============ */
.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.detail-group label {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-group div {
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============ TEAM ============ */
.team-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #f9f9f9;
}

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

.team-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.avatar {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.team-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.switch-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    background: #f8f9fa;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #eee;
}

.form-check-input {
    width: 2.2em;
    height: 1.1em;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: #2ecc71;
    border-color: #2ecc71;
}

/* ============ QUICK ACTIONS ============ */
.quick-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.action-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    color: #444;
    text-decoration: none;
    transition: 0.2s;
    font-weight: 500;
    font-size: 0.85rem;
}

.action-link i {
    color: #888;
    width: 20px;
    text-align: center;
    transition: 0.2s;
}

.action-link:hover {
    background: #f8f9fa;
    border-color: var(--accent-text);
    color: var(--accent-text);
}

.action-link:hover i {
    color: var(--accent-text);
}

/* ============ DRIVE MASTER WIDGET ============ */
.drive-widget {
    border: 2px dashed #e0e0e0;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    background: #fafafa;
    transition: 0.2s;
    cursor: pointer;
}

.drive-widget:hover {
    border-color: var(--accent-text);
    background: #fff5f0;
}

.drive-icon {
    font-size: 2.5rem;
    color: #ccc;
    margin-bottom: 12px;
    transition: 0.2s;
}

.drive-widget:hover .drive-icon {
    color: var(--accent-text);
}

.upload-btn {
    background: #333;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-size: 0.85rem;
    cursor: pointer;
    margin-top: 12px;
    font-weight: 500;
}

/* ============ THEME SWITCHER ============ */
.theme-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: white;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    text-align: center;
}

.theme-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid white;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: inline-block;
    margin: 0 5px;
    transition: transform 0.2s;
}

.theme-btn:hover {
    transform: scale(1.1);
}

.theme-btn.active {
    outline: 2px solid #333;
}

.t-orange {
    background: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%);
}

.t-blue {
    background: linear-gradient(135deg, #0061f2 0%, #6900f2 100%);
}

/* ============ HEADER TABS (Elite Style) ============ */
.header-tabs {
    display: flex;
    gap: 4px;
    background: #f4f6f8;
    padding: 4px;
    border-radius: 8px;
}

.tab-pill {
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.2s;
    text-decoration: none;
    display: inline-block;
}

.tab-pill:hover {
    color: #333;
    text-decoration: none;
}

.tab-pill.active {
    background: white;
    color: var(--primary-color, #ff6a00);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* ============ USECASE CARDS ENHANCED ============ */
.usecase-card {
    background: white;
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid transparent;
}

.usecase-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.usecase-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.usecase-icon.bg-gradient-info {
    background: linear-gradient(135deg, #3498db 0%, #2c80b4 100%);
}

.usecase-icon.bg-gradient-success {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.usecase-icon.bg-gradient-primary {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}

.usecase-icon.bg-gradient-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.usecase-icon.bg-gradient-warning {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

.usecase-content {
    flex: 1;
}

.usecase-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1f36;
    margin-bottom: 4px;
}

.usecase-description {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.usecase-arrow {
    color: #ccc;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.usecase-card:hover .usecase-arrow {
    color: var(--primary-color);
    transform: translateX(5px);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
    .sidebar {
        width: 0;
        transform: translateX(-100%);
    }

    .sidebar.active {
        width: var(--sidebar-expanded);
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
        width: 100%;
    }

    .stats-grid {
        grid-template-columns: repeat(4, minmax(120px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 600px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============ ELITE SELECTOR CARDS ============ */
.selector-card {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 24px;
    margin-bottom: 24px;
    border: none;
}

.selector-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.selector-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--primary-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.selector-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.selector-card-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* Elite Dropdown/Select */
.elite-select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 500;
    background: white;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 20px;
}

.elite-select:hover {
    border-color: var(--primary-color);
}

.elite-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}

/* ============ ELITE PILL TABS ============ */
.elite-tabs {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: #f3f4f6;
    border-radius: var(--radius);
    width: fit-content;
}

.elite-tab {
    padding: 10px 20px;
    border-radius: calc(var(--radius) - 2px);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.elite-tab:hover {
    color: var(--text-dark);
    background: rgba(255, 255, 255, 0.5);
}

.elite-tab.active {
    background: white;
    color: var(--text-dark);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.elite-tab i {
    font-size: 0.9rem;
}

/* ============ BUTTONS ============ */
.actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Standalone Settings Button (Circular Badge Style) */
.btn-settings-badge {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 12px !important;
    background: #fff !important;
    border: 1px solid #e0e6ed !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    flex-shrink: 0 !important;
    margin-top: 5px !important;
    /* Fine-tuned alignment with floating input */
    padding: 0 !important;
}

.btn-settings-badge:hover {
    background-color: #fff !important;
    border-color: #ff6a00 !important;
    color: #ff6a00 !important;
    box-shadow: 0 6px 15px rgba(255, 106, 0, 0.15) !important;
    transform: translateY(-2px) rotate(15deg) !important;
}

.btn-settings-badge i {
    font-size: 1.15rem;
}

.btn-c i {
    font-size: 0.85rem;
}

.btn-light-c {
    background: white;
    color: var(--text-dark);
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-light-c:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: var(--text-dark);
    transform: translateY(-1px);
}

.btn-primary-c {
    background: var(--primary-grad);
    color: white;
    box-shadow: 0 2px 4px rgba(255, 107, 53, 0.25);
}

.btn-primary-c:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 107, 53, 0.35);
    color: white;
}

/* ============ COMMESSA AUTOCOMPLETE ENHANCEMENTS ============ */

/* Row containing input wrapper + X button side by side */
.commessa-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

/* Wrapper contains input and dropdown */
.commessa-input-wrapper {
    position: relative;
    display: inline-block;
    width: 180px;
    transition: width 0.3s ease;
}

/* Expand wrapper when dropdown is open */
.commessa-input-row.open .commessa-input-wrapper {
    width: 250px;
}

/* Input field styling */
.commessa-autocomplete-input {
    background: white !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--radius) !important;
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--text-dark) !important;
    width: 100% !important;
    height: 38px !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.commessa-autocomplete-input::placeholder {
    color: #999 !important;
}

.commessa-autocomplete-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15) !important;
    outline: none !important;
}

/* X Clear button - sibling element using flexbox */
.commessa-clear-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    border: none;
}

.commessa-clear-btn:hover {
    background: #ef4444;
    color: white;
    transform: scale(1.1);
}

.commessa-clear-btn i {
    font-size: 0.7rem;
    line-height: 1;
}

/* Dropdown positioned under the wrapper, aligned right */
.commessa-input-wrapper .commessa-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    width: 280px;
    max-width: 280px;
    background: white;
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 1050;
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
}

.commessa-dropdown-section {
    padding: 0;
}

.commessa-dropdown-section:last-child {
    border-bottom: none;
}

.commessa-dropdown-header {
    padding: 8px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.commessa-dropdown-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 3px solid transparent;
}

.commessa-dropdown-item:hover {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.08), transparent);
    border-left-color: var(--primary-color);
}

.commessa-dropdown-item.selected {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(156, 39, 176, 0.1));
}

.commessa-item-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.commessa-item-name i {
    color: var(--primary-color);
    font-size: 0.85rem;
}

/* Section Headers - Enhanced Elite Style */
.commessa-dropdown-section-header {
    padding: 12px 16px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Star icon for "Le Mie Commesse" */
.commessa-dropdown-section-header i.fa-star {
    color: #f59e0b;
    font-size: 0.8rem;
    filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.3));
}

/* Folder icon for "Altre Commesse" */
.commessa-dropdown-section-header i.fa-folder {
    color: #64748b;
    font-size: 0.8rem;
}

.commessa-dropdown-section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0 20%, #e2e8f0 80%, transparent);
    margin: 0;
}

.commessa-item-company {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding-left: 24px;
}

/* ============ INFO BANNER ============ */
.info-banner {
    background: white;
    border-left: 4px solid var(--primary-color);
    padding: 16px 20px;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 24px;
    box-shadow: var(--shadow-soft);
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-banner i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.info-banner-text {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.info-banner-text strong {
    color: var(--text-dark);
}

/* ============ REFINED FORM STYLES ============ */
.form-control-elite {
    border-radius: 50px !important;
    padding: 0.75rem 1.5rem !important;
    border: 1px solid #e0e6ed;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

.form-control-elite:focus {
    box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.1) !important;
    border-color: #ff6a00 !important;
    outline: none;
}

.form-select.form-control-elite {
    background-position: right 1.5rem center;
    border-radius: 50px !important;
}

/* Chips for Elite Input */
.elite-chip {
    background: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%);
    color: white;
    border-radius: 50px;
    padding: 8px 16px;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(238, 9, 121, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.elite-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(238, 9, 121, 0.4);
}

.elite-chip .btn-close-white {
    filter: brightness(0) invert(1);
    opacity: 0.8;
    background-size: 0.8em;
}


/* ============ ULTRA PREMIUM FORM STYLES ============ */

/* Ensure wrapping container is relative for absolute positioning of icons */
.form-floating-elite {
    position: relative !important;
    margin-bottom: 1.5rem;
}

/* Adjust Input Padding for Floating Label + Pill Shape */
.form-floating-elite .form-control-elite {
    padding: 1.625rem 1.5rem 0.625rem 3rem !important;
    /* Space for label & icon */
    height: calc(3.5rem + 2px);
    line-height: 1.25;
}

/* Floating Label Positioning */
.form-floating-elite>label {
    padding: 1rem 1.5rem;
    padding-left: 3rem !important;
    /* Force align with text */
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
    color: #888;
    background: transparent !important;
    /* Ensure no white bg blocking input */
}

/* Base Label Stacking */
.form-floating-elite>label {
    z-index: 5 !important;
    /* Low enough to be behind absolute dropdowns */
}

/* Active State for Label (Focus or Has Value) */
.form-floating-elite>.form-control:focus~label,
.form-floating-elite>.form-control:not(:placeholder-shown)~label,
.form-floating-elite>.choices:focus-within~label,
.form-floating-elite>.choices~label,
.elite-search-wrapper .form-control:focus~label,
.elite-search-wrapper .form-control:not(:placeholder-shown)~label {
    transform: scale(.8) translateY(-0.35rem) translateX(0.25rem) !important;
    color: var(--primary-color, #ff6a00) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    z-index: 6 !important;
    background: linear-gradient(to bottom, transparent 45%, #fff 45%, #fff 55%, transparent 55%) !important;
    padding: 0 6px !important;
    padding-left: 2rem !important;
    top: 0 !important;
    left: 0 !important;
}

.elite-search-wrapper>label {
    left: 2.75rem !important;
}

/* Input Icon Styling - FORCE ABSOLUTE & CENTERED */
.form-floating-elite .input-icon,
.form-floating-elite .floating-icon {
    position: absolute !important;
    top: 50% !important;
    left: 1rem !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
    color: #adb5bd;
    font-size: 1rem;
    pointer-events: none;
    transition: color 0.3s ease;
}

.form-floating-elite .form-control:focus~.input-icon,
.form-floating-elite .form-control:focus~.floating-icon,
.form-floating-elite .form-select:focus~.input-icon,
.form-floating-elite .form-select:focus~.floating-icon {
    color: var(--primary-color, #ff6a00);
}


/* Select Support */
.form-floating-elite select.form-control-elite {
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
}

/* Section Header Gradient Underline - REMOVED */
.section-header-elite {
    position: relative;
    display: flex;
    align-items: center;
    padding-bottom: 0;
    margin-bottom: 25px;
}

.section-header-elite i {
    margin-right: 15px !important;
    font-size: 1.1em;
}

.section-header-elite::after {
    display: none !important;
}

/* Fix Border Radius on Elite Inputs (Standardize to 20px) */
.form-control-elite,
.form-floating-elite .form-control-elite,
.elite-search-wrapper .form-control {
    border-radius: 20px !important;
}

/* Orange Focus Effect (Elite Brand) */
.form-control-elite:focus,
.form-floating-elite .form-control:focus,
.elite-search-wrapper .form-control:focus {
    border-color: #ff6a00 !important;
    box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.15) !important;
    outline: none !important;
}

/* Search Wrapper for AutoComplete (Company Search) */
.elite-search-wrapper {
    position: relative !important;
    width: 100%;
    z-index: 1 !important;
    /* Base stacking, low */
}

/* When focused, bring the entire wrapper above everything */
.elite-search-wrapper:focus-within {
    z-index: 9999 !important;
}

.elite-search-wrapper .form-control {
    height: calc(3.5rem + 2px);
    /* Match floating height */
    padding-left: 3rem !important;
    /* Space for left icon */
    padding-right: 2.5rem !important;
    /* Space for chevron */
}

/* Precise Icon Positioning in Search Wrapper */
.elite-search-wrapper .input-icon {
    position: absolute !important;
    top: 50% !important;
    left: 1rem !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    color: #adb5bd;
    pointer-events: none;
}

/* Chevron Icon for Autocomplete fields - HIGH SPECIFICITY */
.form-floating-elite.elite-search-wrapper .autocomplete-icon,
.elite-search-wrapper .autocomplete-icon,
.elite-search-wrapper i.autocomplete-icon,
.elite-search-wrapper .fas.fa-chevron-down.autocomplete-icon,
.form-floating-elite .fa-chevron-down.autocomplete-icon {
    position: absolute !important;
    top: 50% !important;
    right: 1.25rem !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
    color: #adb5bd;
    pointer-events: none;
    font-size: 0.9rem;
    display: inline-block !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
}

/* Rotate chevron when dropdown is open */
.elite-search-wrapper.is-open .autocomplete-icon {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* Base style for labels with icons (non-floating) */
.form-label-elite-icon {
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    margin-bottom: 0.6rem !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.9rem !important;
}

.form-label-elite-icon i {
    margin-right: 15px !important;
    width: 20px !important;
    text-align: center !important;
}

/* ============ FIX: FLOATING LABELS ON SELECTS ============ */
/* Select elements and Choices.js always have "content" from a UI perspective, 
   so the label should always be "floated up" - but INSIDE the field, not on border */
.form-floating-elite>.form-select~label,
.form-floating-elite>select.form-control-elite~label,
.form-floating-elite>.choices~label,
.form-floating>.form-select~label {
    transform: scale(.8) translateY(-0.35rem) translateX(0.25rem) !important;
    color: var(--primary-color, #ff6a00) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    z-index: 6 !important;
    background: linear-gradient(to bottom, transparent 45%, #fff 45%, #fff 55%, transparent 55%) !important;
    padding: 0 6px !important;
    padding-left: 2rem !important;
    left: 0 !important;
    top: 0 !important;
}

/* ============ ELITE CHOICES.JS STYLING ============ */
/* Fix Choices.js dropdown arrow position - inside field on the right */
.choices[data-type*="select-one"]::after {
    position: absolute !important;
    top: 50% !important;
    right: 1.25rem !important;
    left: auto !important;
    margin-top: 0 !important;
    transform: translateY(-50%) !important;
    border-color: #adb5bd transparent transparent transparent !important;
    border-width: 5px !important;
}

.choices[data-type*="select-one"].is-open::after {
    border-color: transparent transparent #ff6a00 transparent !important;
    margin-top: 0 !important;
    transform: translateY(-50%) rotate(180deg) !important;
}

.choices {
    margin-bottom: 0 !important;
}

.choices__inner {
    min-height: calc(3.5rem + 2px) !important;
    /* Match floating input height */
    padding: 1.625rem 45px 0.625rem 3.25rem !important;
    /* EXACT COPY of .form-floating-elite .form-control-elite padding */
    border: 1px solid #e0e6ed !important;
    border-radius: 20px !important;
    background-color: #fff !important;
    font-size: 1rem !important;
    /* Standard input font size */
    line-height: 1.25 !important;
    transition: all 0.3s ease !important;
    display: flex;
    /* align-items: center;  <-- REMOVED to allow padding to push text down */
    align-items: flex-end;
    /* Push text to bottom to account for label */
}

/* Hide placeholder text when option is selected */
.choices__list--single .choices__placeholder {
    display: none !important;
}

/* Ensure single selected item doesn't show placeholder-like styling */
.choices__list--single .choices__item.choices__item--selectable {
    display: block !important;
}

/* Hide the "Seleziona..." text when there's a selection */
.choices[data-type*="select-one"] .choices__item--choice[data-value=""] {
    display: none !important;
}

/* Style for the selected single item */
.choices__list--single .choices__item {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    color: #333 !important;
    background: transparent !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.choices.is-focused .choices__inner {
    border-color: #ff6a00 !important;
    box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.15) !important;
}

.choices__list--multiple .choices__item {
    background: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%) !important;
    border: none !important;
    color: #fff !important;
    padding: 5px 12px !important;
    border-radius: 50px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    margin-right: 6px !important;
    margin-bottom: 6px !important;
    box-shadow: 0 2px 6px rgba(238, 9, 121, 0.25) !important;
}

.choices__list--multiple .choices__item.is-highlighted {
    filter: brightness(1.1) !important;
}

/* White X button for Choices.js multi-select items */
.choices__list--multiple .choices__item .choices__button {
    border: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    padding-left: 10px !important;
    margin-left: 6px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.4) !important;
    opacity: 0.9 !important;
    /* White X SVG icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") !important;
    background-size: 10px 10px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 10px !important;
    height: 10px !important;
    text-indent: -9999px !important;
}

.choices__list--multiple .choices__item .choices__button:hover {
    opacity: 1 !important;
}

.choices__list--dropdown {
    background: #ffffff !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    border-radius: 16px !important;
    border: 1px solid #e0e6ed !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
    margin-top: 8px !important;
    overflow: hidden !important;
    z-index: 99999 !important;
    /* ULTRA HIGH to beat even modals and labels */
}

.choices.is-open {
    z-index: 99999 !important;
}

.choices__list--dropdown .choices__item {
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: rgba(255, 106, 0, 0.08) !important;
    color: #ff6a00 !important;
}

.choices__placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

/* ============ ELITE MODAL STYLING ============ */
.modal-content {
    border-radius: 20px !important;
    border: none !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, #1a1f36 0%, #2d3561 100%) !important;
    color: white !important;
    padding: 1.25rem 1.5rem !important;
    border-bottom: none !important;
}

.modal-header .modal-title {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.modal-header .modal-title i {
    color: #ff6a00 !important;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1) !important;
    opacity: 0.7 !important;
}

.modal-header .btn-close:hover {
    opacity: 1 !important;
}

.modal-body {
    padding: 1.5rem !important;
    background: #fff !important;
    max-height: 60vh;
    overflow-y: auto;
}

/* Custom Scrollbar for Modal Body */
.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #ff6a00;
    border-radius: 10px;
}

.modal-body .form-control {
    border-radius: 50px !important;
    padding: 12px 18px !important;
    border: 1px solid #e0e6ed !important;
    transition: all 0.3s ease !important;
}

.modal-body .form-control:focus {
    border-color: #ff6a00 !important;
    box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.15) !important;
}

.modal-body .btn-primary {
    background: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(238, 9, 121, 0.3) !important;
    transition: all 0.3s ease !important;
}

.modal-body .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(238, 9, 121, 0.4) !important;
}

.modal-body .table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.modal-body .table thead th {
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

.modal-body .table tbody td {
    padding: 14px 16px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.modal-body .table tbody tr:hover {
    background-color: rgba(255, 106, 0, 0.03) !important;
}

.modal-body .btn-danger {
    background: transparent !important;
    border: none !important;
    color: #ef4444 !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.modal-body .btn-danger:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    transform: scale(1.1) !important;
}

.modal-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 1rem 1.5rem !important;
}

/* ============ ELITE AUTOCOMPLETE DROPDOWN (Like Agrinext Example) ============ */
.autocomplete-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    border-radius: 16px !important;
    border: 1px solid #e0e6ed !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
    margin-top: 8px !important;
    overflow: hidden !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    z-index: 99999 !important;
    /* ULTRA HIGH to beat everything */
}

/* Ensure wrapper also elevates when dropdown is visible */
.elite-search-wrapper.is-focused,
.elite-search-wrapper:focus-within {
    z-index: 10000 !important;
}

/* FIX: Floating labels INSIDE elite-search-wrapper */
.elite-search-wrapper>label,
.form-floating-elite.elite-search-wrapper>label {
    position: absolute !important;
    top: 0 !important;
    left: 2.5rem !important;
    /* Offset for icon */
    height: 100% !important;
    padding: 1rem 0.75rem !important;
    pointer-events: none !important;
    border: 1px solid transparent !important;
    transform-origin: 0 0 !important;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out !important;
    color: #6c757d !important;
    background: transparent !important;
    z-index: 2 !important;
}

/* When input is focused or has value, float the label up */
.elite-search-wrapper>.form-control:focus~label,
.elite-search-wrapper>.form-control:not(:placeholder-shown)~label,
.form-floating-elite.elite-search-wrapper>.form-control:focus~label,
.form-floating-elite.elite-search-wrapper>.form-control:not(:placeholder-shown)~label {
    transform: scale(.8) translateY(-0.35rem) translateX(0.25rem) !important;
    color: #ff6a00 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    background: linear-gradient(to bottom, transparent 45%, #fff 45%, #fff 55%, transparent 55%) !important;
    padding: 0 6px !important;
    padding-left: 2rem !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}

.autocomplete-header {
    padding: 10px 16px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid #e2e8f0 !important;
    letter-spacing: 0.05em !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
}

.autocomplete-item {
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-bottom: 1px solid #f5f5f5 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.autocomplete-item:last-child {
    border-bottom: none !important;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background: rgba(255, 106, 0, 0.08) !important;
}

.autocomplete-item i {
    color: #ff6a00 !important;
    font-size: 0.9rem !important;
    width: 20px !important;
    text-align: center !important;
}

.autocomplete-item span {
    font-weight: 500 !important;
    color: #1a1f36 !important;
}

/* ============ ALERT SOFT VARIANTS ============ */
.alert-soft-primary {
    background-color: rgba(13, 110, 253, 0.1) !important;
    color: #0d6efd !important;
}

.alert-soft-info {
    background-color: rgba(13, 202, 240, 0.08) !important;
    color: #0dcaf0 !important;
}

.alert-soft-success {
    background-color: rgba(25, 135, 84, 0.08) !important;
    color: #198754 !important;
}

.alert-soft-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
    color: #856404 !important;
}

/* ============ CUSTOM PILLS FOR TABS ============ */
.custom-pills .nav-link {
    border-radius: 50px !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    transition: all 0.3s ease !important;
}

.custom-pills .nav-link:hover {
    background-color: rgba(255, 106, 0, 0.08) !important;
    color: #ff6a00 !important;
}

.custom-pills .nav-link.active {
    background: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(238, 9, 121, 0.3) !important;
}

/* ============ CONTACT CHIPS / PREMIUM BADGES ============ */
.contact-chip {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50px !important;
    color: #475569 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin: 4px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.contact-chip:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 106, 0, 0.15) !important;
    border-color: #ff6a00 !important;
}

.contact-chip.is-primary {
    background: linear-gradient(135deg, rgba(255, 106, 0, 0.12) 0%, rgba(255, 153, 0, 0.12) 100%) !important;
    border: 1px solid rgba(255, 106, 0, 0.3) !important;
    color: #ff6a00 !important;
}

.contact-chip .remove-chip {
    margin-left: 10px !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    opacity: 0.5 !important;
    padding: 0 4px !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}

.contact-chip .remove-chip:hover {
    opacity: 1 !important;
    color: #ee0979 !important;
    background: rgba(238, 9, 121, 0.1) !important;
}

.contact-chip i.star-toggle,
.contact-chip i.fa-star,
.contact-chip i.fas.fa-star {
    margin-right: 8px !important;
}

.contact-chip i.star-toggle {
    cursor: pointer !important;
    transition: color 0.3s ease !important;
}

.contact-chip i.star-toggle:hover {
    color: #ff6a00 !important;
}

/* Professional Figure Badges inside Dropdown */
.autocomplete-item-sub .badge,
.autocomplete-item .badge {
    background-color: rgba(255, 106, 0, 0.1) !important;
    color: #ff6a00 !important;
    font-weight: 600 !important;
    border: 1px solid rgba(255, 106, 0, 0.2) !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
}

.autocomplete-item:hover .badge {
    background-color: #ff6a00 !important;
    color: #fff !important;
}

/* ============ TEXTAREA SPECIFIC FIXES ============ */
/* Fix icon positioning for textarea - align to top instead of center */
.form-floating-elite textarea.form-control-elite~.input-icon,
.form-floating-elite textarea~.input-icon {
    top: 1.5rem !important;
    transform: none !important;
}

/* Textarea specific styling */
.form-floating-elite textarea.form-control-elite,
.form-floating-elite textarea {
    padding-top: 2rem !important;
    padding-bottom: 0.75rem !important;
    min-height: 120px !important;
    border-radius: 16px !important;
    resize: vertical;
}

/* Floating label for textarea - positioned correctly */
.form-floating-elite>textarea.form-control:focus~label,
.form-floating-elite>textarea.form-control:not(:placeholder-shown)~label,
.form-floating-elite>textarea.form-control-elite:focus~label,
.form-floating-elite>textarea.form-control-elite:not(:placeholder-shown)~label {
    transform: scale(.8) translateY(-0.35rem) translateX(0.25rem) !important;
    color: var(--primary-color, #ff6a00) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    z-index: 6 !important;
    background: linear-gradient(to bottom, transparent 45%, #fff 45%, #fff 55%, transparent 55%) !important;
    padding: 0 6px !important;
    padding-left: 2rem !important;
    left: 0 !important;
    top: 0 !important;
}

/* Ensure textarea label starts in correct position */
.form-floating-elite>textarea~label {
    padding-top: 1.25rem !important;
}

/* ============ FORM CONTROL CONSISTENCY FIXES ============ */
/* Remove any default margin/padding that could cause visual gaps */
.form-floating-elite {
    margin-bottom: 0 !important;
}

/* Ensure consistent input height */
.form-floating-elite .form-control-elite:not(textarea),
.form-floating-elite .form-select {
    height: calc(3.5rem + 2px) !important;
}

/* Fix potential white line artifacts from floating labels */
.form-floating-elite>label {
    background: transparent !important;
    border: none !important;
}

/* Only show background when label is floated */
.form-floating-elite>.form-control:focus~label,
.form-floating-elite>.form-control:not(:placeholder-shown)~label,
.form-floating-elite>.form-select~label,
.form-floating-elite>select~label {
    background: linear-gradient(to bottom, transparent 45%, #fff 45%, #fff 55%, transparent 55%) !important;
}