/* =====================================================
   USOBIO CRM - ORGANIC BRUTALISM
   Natura incontra industria. Texture. Carattere.
   ===================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=clash-display@600,700&f[]=satoshi@400,500,700&display=swap');

:root {
    /* Organic Palette - Terra, non plastica */
    --earth-900: #1a1c18;
    --earth-800: #2d312a;
    --earth-700: #3d4238;
    --earth-600: #4a5043;
    --earth-500: #5c6355;

    --leaf-primary: #4a6741;
    --leaf-bright: #6b8c5e;
    --leaf-muted: #8aa67d;

    --cream-100: #faf8f3;
    --cream-200: #f3efe6;
    --cream-300: #e8e2d5;
    --cream-400: #d4cbbe;

    --terracotta: #c4704b;
    --terracotta-light: #e8956d;
    --bark: #8b6f4e;

    /* Semantic */
    --surface: var(--cream-100);
    --surface-elevated: #ffffff;
    --surface-dark: var(--earth-900);
    --text-primary: var(--earth-900);
    --text-secondary: var(--earth-600);
    --text-muted: var(--earth-500);
    --text-inverse: var(--cream-100);

    --accent: var(--terracotta);
    --success: var(--leaf-primary);
    --warning: #d4a03a;
    --danger: #c45c4b;

    /* Spacing - Golden ratio inspired */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1.25rem;
    --space-lg: 2rem;
    --space-xl: 3.25rem;
    --space-2xl: 5.25rem;

    /* Typography */
    --font-display: 'Clash Display', sans-serif;
    --font-body: 'Satoshi', sans-serif;

    /* Borders */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-organic: 32px 8px 24px 12px;

    /* Sidebar */
    --sidebar-width: 280px;
}

/* Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 15px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--surface);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Grain texture overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.03;
    z-index: 10000;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* =====================================================
   SIDEBAR - Dark, organic, editorial
   ===================================================== */

.sidebar {
    width: var(--sidebar-width);
    background: var(--surface-dark);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Organic shape accent */
.sidebar::after {
    content: '';
    position: absolute;
    top: 120px;
    right: -30px;
    width: 60px;
    height: 200px;
    background: var(--leaf-primary);
    border-radius: 0 100px 100px 0;
    opacity: 0.15;
    z-index: -1;
}

.sidebar-header {
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.logo {
    height: 42px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.logo-text {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--leaf-muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.sidebar-nav {
    flex: 1;
    padding: var(--space-lg) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    position: relative;
    transition: all 0.3s ease;
}

.nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    background: var(--terracotta);
    border-radius: 0 2px 2px 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-item:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.03);
}

.nav-item.active {
    color: var(--cream-100);
    background: rgba(255, 255, 255, 0.05);
}

.nav-item.active::before {
    transform: translateY(-50%) scaleY(1);
}

.nav-icon {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    transition: opacity 0.3s, transform 0.3s;
}

.nav-item:hover .nav-icon {
    opacity: 1;
    transform: scale(1.1);
}

.nav-item.active .nav-icon {
    opacity: 1;
}

.sidebar-footer {
    padding: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.user-avatar {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--leaf-primary), var(--leaf-bright));
    border-radius: var(--radius-organic);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
}

.user-details {
    display: flex;
    flex-direction: column;
}

.user-name {
    color: var(--cream-100);
    font-weight: 600;
    font-size: 0.9rem;
}

.user-role {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

/* =====================================================
   MAIN CONTENT
   ===================================================== */

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26, 28, 24, 0.6);
    backdrop-filter: blur(4px);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.sidebar-overlay.active {
    opacity: 1;
}

.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* =====================================================
   TOP HEADER - Editorial, asymmetric
   ===================================================== */

.top-header {
    background: var(--surface-elevated);
    padding: var(--space-md) var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--cream-300);
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.header-title {
    display: flex;
    flex-direction: column;
}

.page-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.page-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.mobile-menu-btn {
    display: none;
    width: 44px;
    height: 44px;
    border: 2px solid var(--earth-800);
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.mobile-menu-btn:hover {
    background: var(--earth-800);
}

.mobile-menu-btn:hover svg {
    color: var(--cream-100);
}

.mobile-menu-btn svg {
    width: 20px;
    height: 20px;
    color: var(--earth-800);
    transition: color 0.3s;
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.search-box {
    display: flex;
    align-items: center;
    background: var(--cream-200);
    border: 1px solid transparent;
    border-radius: 100px;
    padding: var(--space-xs) var(--space-md);
    gap: var(--space-sm);
    width: 240px;
    transition: all 0.3s ease;
}

.search-box:focus-within {
    background: var(--surface-elevated);
    border-color: var(--leaf-primary);
    box-shadow: 0 0 0 3px rgba(74, 103, 65, 0.1);
}

.search-input {
    border: none;
    background: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-primary);
    width: 100%;
}

.search-input::placeholder {
    color: var(--text-muted);
}

.search-icon {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.notification-btn {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--cream-300);
    background: var(--surface-elevated);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.notification-btn:hover {
    border-color: var(--leaf-primary);
    transform: scale(1.05);
}

.notification-btn svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background: var(--terracotta);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--surface-elevated);
}

/* =====================================================
   CONTENT AREA
   ===================================================== */

.content-area {
    padding: var(--space-xl);
    flex: 1;
}

/* =====================================================
   STATS GRID - Organic cards
   ===================================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.stat-card {
    background: var(--surface-elevated);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--cream-300);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle at top right, var(--cream-200) 0%, transparent 70%);
    pointer-events: none;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(26, 28, 24, 0.12);
    border-color: var(--leaf-muted);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-organic);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.stat-icon svg {
    width: 24px;
    height: 24px;
}

.stat-icon.green {
    background: linear-gradient(135deg, var(--leaf-primary), var(--leaf-bright));
    color: white;
}

.stat-icon.blue {
    background: linear-gradient(135deg, #4a6785, #6b8caa);
    color: white;
}

.stat-icon.orange {
    background: linear-gradient(135deg, var(--terracotta), var(--terracotta-light));
    color: white;
}

.stat-icon.purple {
    background: linear-gradient(135deg, #6b5b7a, #8a7a9a);
    color: white;
}

.stat-content {
    position: relative;
}

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

.stat-value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin: var(--space-xs) 0;
}

.stat-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 100px;
}

.stat-change.positive {
    background: rgba(74, 103, 65, 0.1);
    color: var(--leaf-primary);
}

.stat-change.negative {
    background: rgba(196, 92, 75, 0.1);
    color: var(--danger);
}

.stat-change.neutral {
    background: var(--cream-200);
    color: var(--text-secondary);
}

/* =====================================================
   CARDS
   ===================================================== */

.card {
    background: var(--surface-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--cream-300);
    overflow: hidden;
}

.card-header {
    padding: var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--cream-200);
}

.card-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.card-body {
    padding: var(--space-lg);
}

.card-link {
    color: var(--terracotta);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s;
}

.card-link:hover {
    color: var(--terracotta-light);
}

.card-select {
    padding: 6px 12px;
    border: 1px solid var(--cream-300);
    border-radius: 100px;
    background: var(--cream-100);
    font-family: var(--font-body);
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.3s;
}

.card-select:focus {
    outline: none;
    border-color: var(--leaf-primary);
}

/* =====================================================
   DASHBOARD GRID
   ===================================================== */

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.chart-card canvas {
    max-height: 280px;
}

/* =====================================================
   ORDERS LIST
   ===================================================== */

.orders-list {
    display: flex;
    flex-direction: column;
}

.order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--cream-200);
    transition: background 0.3s;
}

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

.order-item:hover {
    background: var(--cream-100);
    margin: 0 calc(var(--space-lg) * -1);
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}

.order-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.order-id {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.order-client {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.order-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.order-amount {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
}

.order-status {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.order-status.status-consegnato {
    background: rgba(74, 103, 65, 0.12);
    color: var(--leaf-primary);
}

.order-status.status-in_preparazione {
    background: rgba(74, 103, 133, 0.12);
    color: #4a6785;
}

.order-status.status-spedito {
    background: rgba(139, 111, 78, 0.12);
    color: var(--bark);
}

.order-status.status-in_attesa {
    background: rgba(212, 160, 58, 0.12);
    color: var(--warning);
}

/* =====================================================
   ALERT LIST
   ===================================================== */

.alert-list {
    display: flex;
    flex-direction: column;
}

.alert-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--cream-200);
}

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

.alert-icon {
    width: 40px;
    height: 40px;
    background: rgba(212, 160, 58, 0.12);
    border-radius: var(--radius-organic);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alert-icon svg {
    width: 18px;
    height: 18px;
    color: var(--warning);
}

.alert-content {
    flex: 1;
}

.alert-title {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.alert-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.btn-small {
    padding: 8px 16px;
    background: var(--leaf-primary);
    color: white;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-small:hover {
    background: var(--leaf-bright);
    transform: scale(1.05);
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
    color: var(--leaf-primary);
}

.empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-md);
    opacity: 0.6;
}

.empty-state span {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* =====================================================
   PAGE ACTIONS
   ===================================================== */

.page-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.filters {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.filter-select {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--cream-300);
    border-radius: 100px;
    background: var(--surface-elevated);
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-select:focus {
    outline: none;
    border-color: var(--leaf-primary);
}

.filter-date {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--cream-300);
    border-radius: 100px;
    background: var(--surface-elevated);
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-primary);
}

.actions {
    display: flex;
    gap: var(--space-sm);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: var(--earth-900);
    color: var(--cream-100);
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary:hover {
    background: var(--earth-700);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(26, 28, 24, 0.4);
}

.btn-primary svg {
    width: 18px;
    height: 18px;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--cream-400);
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    border-color: var(--earth-800);
    background: var(--cream-200);
}

.btn-secondary svg {
    width: 18px;
    height: 18px;
}

/* =====================================================
   SUMMARY CARDS
   ===================================================== */

.summary-cards {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.summary-card {
    background: var(--surface-elevated);
    border: 1px solid var(--cream-300);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    min-width: 160px;
}

.summary-card.large {
    min-width: 240px;
    background: linear-gradient(135deg, var(--earth-900) 0%, var(--earth-700) 100%);
    border: none;
    color: var(--cream-100);
}

.summary-card.large .summary-label {
    color: rgba(255, 255, 255, 0.6);
}

.summary-card.large .summary-value {
    color: var(--cream-100);
}

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

.summary-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-period {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

/* =====================================================
   DATA TABLE
   ===================================================== */

.table-container {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th {
    text-align: left;
    padding: var(--space-md);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    background: var(--cream-100);
    border-bottom: 2px solid var(--cream-300);
}

.data-table td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--cream-200);
    font-size: 0.9rem;
    color: var(--text-primary);
}

.data-table tbody tr {
    transition: background 0.2s;
}

.data-table tbody tr:hover {
    background: var(--cream-100);
}

.product-code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
    background: var(--cream-200);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    color: var(--leaf-primary);
}

.product-name {
    font-weight: 500;
}

.category-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--cream-200);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.value-cell {
    font-family: var(--font-display);
    font-weight: 600;
}

.value-cell.negative {
    color: var(--danger);
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.success {
    background: rgba(74, 103, 65, 0.12);
    color: var(--leaf-primary);
}

.status-badge.warning {
    background: rgba(212, 160, 58, 0.12);
    color: var(--warning);
}

.status-badge.danger {
    background: rgba(196, 92, 75, 0.12);
    color: var(--danger);
}

.actions-cell {
    display: flex;
    gap: var(--space-xs);
}

.action-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--cream-300);
    background: var(--surface-elevated);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover {
    border-color: var(--leaf-primary);
    background: rgba(74, 103, 65, 0.05);
}

.action-btn svg {
    width: 15px;
    height: 15px;
    color: var(--text-secondary);
}

.action-btn:hover svg {
    color: var(--leaf-primary);
}

/* =====================================================
   CLIENT CARDS
   ===================================================== */

.clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-lg);
}

.client-card {
    background: var(--surface-elevated);
    border: 1px solid var(--cream-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.client-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(26, 28, 24, 0.1);
}

.client-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    background: linear-gradient(135deg, var(--earth-900) 0%, var(--earth-700) 100%);
}

.client-avatar {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-organic);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
}

.client-status {
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.client-status.status-attivo {
    background: rgba(107, 140, 94, 0.3);
    color: var(--leaf-muted);
}

.client-status.status-inattivo {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}

.client-body {
    padding: var(--space-lg);
}

.client-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.client-location,
.contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.client-location svg,
.contact-item svg {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
}

.client-contact {
    margin-top: var(--space-md);
}

.client-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--cream-100);
    border-top: 1px solid var(--cream-200);
}

.revenue-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.revenue-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--leaf-primary);
}

.client-actions {
    display: flex;
    gap: var(--space-xs);
}

/* =====================================================
   ORDER STATUS BADGES (expanded)
   ===================================================== */

.order-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
}

.order-status-badge svg {
    width: 14px;
    height: 14px;
}

.order-status-badge.status-consegnato {
    background: rgba(74, 103, 65, 0.12);
    color: var(--leaf-primary);
}

.order-status-badge.status-in_preparazione {
    background: rgba(74, 103, 133, 0.12);
    color: #4a6785;
}

.order-status-badge.status-spedito {
    background: rgba(139, 111, 78, 0.12);
    color: var(--bark);
}

.order-status-badge.status-in_attesa {
    background: rgba(212, 160, 58, 0.12);
    color: var(--warning);
}

.order-code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
    background: var(--cream-200);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    color: var(--leaf-primary);
}

.client-name-cell {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.client-avatar-small {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--leaf-primary), var(--leaf-bright));
    border-radius: var(--radius-organic);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* =====================================================
   SUPPLIERS GRID
   ===================================================== */

.suppliers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg);
}

.supplier-card {
    background: var(--surface-elevated);
    border: 1px solid var(--cream-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.supplier-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(26, 28, 24, 0.1);
}

.supplier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    background: var(--cream-100);
}

.supplier-icon {
    width: 48px;
    height: 48px;
    background: var(--surface-elevated);
    border-radius: var(--radius-organic);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cream-300);
}

.supplier-icon svg {
    width: 22px;
    height: 22px;
    color: var(--leaf-primary);
}

.supplier-category {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--leaf-primary);
    background: rgba(74, 103, 65, 0.1);
    padding: 4px 12px;
    border-radius: 100px;
}

.supplier-body {
    padding: var(--space-lg);
}

.supplier-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.supplier-location,
.supplier-email {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: var(--space-xs);
}

.supplier-location svg,
.supplier-email svg {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
}

.supplier-footer {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--cream-200);
}

.reliability-meter {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.reliability-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    min-width: 70px;
}

.reliability-bar {
    flex: 1;
    height: 6px;
    background: var(--cream-200);
    border-radius: 3px;
    overflow: hidden;
}

.reliability-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--leaf-primary), var(--leaf-bright));
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reliability-value {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--leaf-primary);
    min-width: 40px;
    text-align: right;
}

.supplier-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-xs);
}

/* =====================================================
   COSTS
   ===================================================== */

.costs-dashboard {
    margin-bottom: var(--space-xl);
}

.costs-summary {
    margin-bottom: var(--space-lg);
}

.costs-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.category-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.category-bar-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.category-info {
    min-width: 140px;
}

.category-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.category-amount {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.category-bar {
    flex: 1;
    height: 8px;
    background: var(--cream-200);
    border-radius: 4px;
    overflow: hidden;
}

.category-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--leaf-primary), var(--leaf-bright));
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-percent {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 50px;
    text-align: right;
}

.description-cell {
    max-width: 300px;
}

.cost-category-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 500;
}

.cost-category-badge.cat-materie-prime {
    background: rgba(74, 103, 65, 0.12);
    color: var(--leaf-primary);
}

.cost-category-badge.cat-trasporto {
    background: rgba(139, 111, 78, 0.12);
    color: var(--bark);
}

.cost-category-badge.cat-energia {
    background: rgba(212, 160, 58, 0.12);
    color: var(--warning);
}

.cost-category-badge.cat-personale {
    background: rgba(74, 103, 133, 0.12);
    color: #4a6785;
}

.cost-category-badge.cat-manutenzione {
    background: rgba(107, 91, 122, 0.12);
    color: #6b5b7a;
}

/* =====================================================
   REPORTS
   ===================================================== */

.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.report-card {
    background: var(--surface-elevated);
    border: 1px solid var(--cream-300);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.report-card.clickable {
    cursor: pointer;
}

.report-card.clickable:hover {
    transform: translateX(8px);
    border-color: var(--leaf-muted);
    box-shadow: -8px 0 0 var(--leaf-primary);
}

.report-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-organic);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.report-icon svg {
    width: 26px;
    height: 26px;
}

.report-icon.blue {
    background: linear-gradient(135deg, #4a6785, #6b8caa);
    color: white;
}

.report-icon.green {
    background: linear-gradient(135deg, var(--leaf-primary), var(--leaf-bright));
    color: white;
}

.report-icon.orange {
    background: linear-gradient(135deg, var(--terracotta), var(--terracotta-light));
    color: white;
}

.report-icon.purple {
    background: linear-gradient(135deg, #6b5b7a, #8a7a9a);
    color: white;
}

.report-icon.teal {
    background: linear-gradient(135deg, #4a7a6b, #6ba08c);
    color: white;
}

.report-icon.red {
    background: linear-gradient(135deg, #8b4a4a, #aa6b6b);
    color: white;
}

.report-content {
    flex: 1;
}

.report-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.report-description {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.report-arrow {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    transition: all 0.3s;
    flex-shrink: 0;
}

.report-card.clickable:hover .report-arrow {
    color: var(--leaf-primary);
    transform: translateX(4px);
}

/* Export Options */
.export-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.export-btn {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--cream-100);
    border: 1px solid var(--cream-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
}

.export-btn:hover {
    border-color: var(--leaf-primary);
    background: rgba(74, 103, 65, 0.05);
}

.export-btn svg {
    width: 20px;
    height: 20px;
    color: var(--leaf-primary);
}

.export-btn span {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* System Status */
.cometa-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 12px;
    background: rgba(74, 103, 65, 0.12);
    color: var(--leaf-primary);
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cometa-status {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-md);
}

.cometa-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--cream-100);
    border-radius: var(--radius-md);
}

.cometa-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cometa-indicator.success {
    background: var(--leaf-primary);
    box-shadow: 0 0 12px rgba(74, 103, 65, 0.4);
}

.cometa-indicator.warning {
    background: var(--warning);
    box-shadow: 0 0 12px rgba(212, 160, 58, 0.4);
}

.cometa-indicator.error {
    background: var(--danger);
    box-shadow: 0 0 12px rgba(196, 92, 75, 0.4);
}

.cometa-label {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.cometa-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Migration Card */
.migration-card {
    margin-top: var(--space-lg);
    border: 2px dashed var(--leaf-muted);
    background: linear-gradient(135deg, rgba(74, 103, 65, 0.03) 0%, rgba(107, 140, 94, 0.03) 100%);
}

.migration-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 12px;
    background: rgba(74, 103, 133, 0.12);
    color: #4a6785;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.migration-info {
    padding: var(--space-md) 0;
}

.migration-text {
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.migration-features {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-sm);
}

.migration-features li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.9rem;
    color: var(--text-secondary);
    padding: var(--space-xs) 0;
}

.migration-features li::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--leaf-primary);
    color: white;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: bold;
    flex-shrink: 0;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

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

@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .costs-breakdown {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    :root {
        --sidebar-width: 0;
    }

    .sidebar {
        width: 280px;
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-overlay {
        display: block;
        pointer-events: none;
    }

    .sidebar-overlay.active {
        pointer-events: auto;
    }

    .main-content {
        margin-left: 0;
    }

    .mobile-menu-btn {
        display: flex;
    }

    body.sidebar-open {
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .top-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
        padding: var(--space-md);
    }

    .header-left {
        flex-direction: row;
        align-items: center;
        gap: var(--space-md);
    }

    .header-right {
        flex-direction: row;
        gap: var(--space-sm);
    }

    .search-box {
        flex: 1;
        width: auto;
    }

    .content-area {
        padding: var(--space-md);
    }

    .page-title {
        font-size: 1.25rem;
    }

    .page-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .filters, .actions {
        flex-wrap: wrap;
    }

    .reports-grid,
    .clients-grid,
    .suppliers-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   ANIMATIONS
   ===================================================== */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-card,
.card,
.client-card,
.supplier-card,
.report-card {
    animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.2s; }

/* =====================================================
   SCROLLBAR
   ===================================================== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--cream-200);
}

::-webkit-scrollbar-thumb {
    background: var(--cream-400);
    border-radius: 5px;
    border: 2px solid var(--cream-200);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--earth-500);
}

/* =====================================================
   ORDER DETAIL PAGE
   ===================================================== */

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: var(--space-sm) var(--space-md);
    border-radius: 100px;
    background: var(--cream-200);
}

.back-link:hover {
    color: var(--text-primary);
    background: var(--cream-300);
}

.back-link svg {
    width: 18px;
    height: 18px;
}

.detail-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-lg);
}

.detail-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

.info-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}

.info-value.code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--leaf-primary);
}

/* Items Count */
.items-count {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Table Enhancements */
.card-body.no-padding {
    padding: 0;
}

.data-table tfoot .subtotal-row td {
    padding: var(--space-sm) var(--space-md);
    background: var(--cream-100);
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--cream-200);
}

.data-table tfoot .total-row td {
    padding: var(--space-md);
    background: var(--earth-900);
    color: var(--cream-100);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
}

/* Timeline */
.timeline {
    position: relative;
    padding-left: var(--space-lg);
}

.timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--cream-300);
}

.timeline-item {
    position: relative;
    padding-bottom: var(--space-lg);
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: calc(-1 * var(--space-lg) + 1px);
    top: 6px;
    width: 10px;
    height: 10px;
    background: var(--cream-300);
    border-radius: 50%;
    border: 2px solid var(--surface-elevated);
    z-index: 1;
}

.timeline-item.active .timeline-dot {
    background: var(--leaf-primary);
    box-shadow: 0 0 0 4px rgba(74, 103, 65, 0.2);
}

.timeline-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.timeline-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.timeline-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.timeline-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Client Detail Card */
.client-detail-card {
    text-align: center;
    padding: var(--space-md) 0;
}

.client-avatar-large {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--leaf-primary), var(--leaf-bright));
    border-radius: var(--radius-organic);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0 auto var(--space-md);
}

.client-detail-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.client-detail-info {
    text-align: left;
}

.detail-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.detail-row svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Address Box */
.address-box {
    background: var(--cream-100);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.address-box p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.address-box p:first-child {
    font-weight: 600;
    color: var(--text-primary);
}

.address-box p:last-child {
    margin-bottom: 0;
}

/* Notes */
.note-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    font-style: italic;
}

/* =====================================================
   NEW ORDER FORM
   ===================================================== */

.order-form {
    width: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-lg);
    align-items: start;
}

.form-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.form-sidebar {
    position: relative;
}

.sticky-card {
    position: sticky;
    top: calc(80px + var(--space-lg));
}

/* Client Selector */
.client-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-sm);
    max-height: 320px;
    overflow-y: auto;
    padding-right: var(--space-xs);
}

.client-option {
    cursor: pointer;
}

.client-option input {
    display: none;
}

.client-option-content {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--cream-100);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.client-option:hover .client-option-content {
    border-color: var(--cream-400);
}

.client-option input:checked + .client-option-content {
    background: rgba(74, 103, 65, 0.08);
    border-color: var(--leaf-primary);
}

.client-option-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.client-option-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.client-option-city {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.client-option-check {
    width: 24px;
    height: 24px;
    border: 2px solid var(--cream-400);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.client-option-check svg {
    width: 14px;
    height: 14px;
    color: white;
}

.client-option input:checked + .client-option-content .client-option-check {
    opacity: 1;
    background: var(--leaf-primary);
    border-color: var(--leaf-primary);
}

/* Order Items */
.order-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.order-item-row {
    display: grid;
    grid-template-columns: 2fr 100px 100px 100px 40px;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-md);
    background: var(--cream-100);
    border-radius: var(--radius-md);
}

.item-product {
    min-width: 0;
}

.item-qty {
    min-width: 0;
}

.item-price,
.item-total {
    text-align: right;
}

.item-price-display {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.item-total-display {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-primary);
}

.item-remove {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.item-remove svg {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

.item-remove:hover {
    background: rgba(196, 92, 75, 0.1);
}

.item-remove:hover svg {
    color: var(--danger);
}

/* Form Elements */
.form-group {
    margin-bottom: var(--space-md);
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.form-input,
.form-select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--cream-300);
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--leaf-primary);
    box-shadow: 0 0 0 3px rgba(74, 103, 65, 0.1);
}

.form-textarea {
    width: 100%;
    padding: var(--space-md);
    border: 1px solid var(--cream-300);
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-primary);
    resize: vertical;
    min-height: 100px;
    transition: all 0.3s ease;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--leaf-primary);
    box-shadow: 0 0 0 3px rgba(74, 103, 65, 0.1);
}

.qty-input {
    text-align: center;
    padding: var(--space-sm);
}

/* Add Item Button */
.add-item-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md);
    border: 2px dashed var(--cream-400);
    border-radius: var(--radius-md);
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: var(--space-md);
}

.add-item-btn:hover {
    border-color: var(--leaf-primary);
    color: var(--leaf-primary);
    background: rgba(74, 103, 65, 0.03);
}

.add-item-btn svg {
    width: 18px;
    height: 18px;
}

/* Text Button */
.btn-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: transparent;
    border: none;
    color: var(--terracotta);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: var(--radius-sm);
}

.btn-text:hover {
    background: rgba(196, 112, 75, 0.08);
    color: var(--terracotta-light);
}

.btn-text svg {
    width: 16px;
    height: 16px;
}

/* Summary Lines */
.summary-lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--cream-200);
}

.summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.summary-line.total {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    padding-top: var(--space-sm);
    margin-top: var(--space-sm);
    border-top: 2px solid var(--earth-900);
}

.summary-line .summary-value {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-primary);
    font-size: inherit;
}

.summary-line.total .summary-value {
    font-size: 1.5rem;
}

/* Form Actions */
.form-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.full-width {
    width: 100%;
    justify-content: center;
}

/* =====================================================
   RESPONSIVE FOR DETAIL/FORM PAGES
   ===================================================== */

@media (max-width: 1200px) {
    .detail-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .sticky-card {
        position: static;
    }
}

@media (max-width: 768px) {
    .order-item-row {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .item-price,
    .item-total {
        text-align: left;
    }

    .item-remove {
        justify-self: end;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .client-selector {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   CLIENT DETAIL PAGE
   ===================================================== */

.client-profile {
    margin-bottom: var(--space-md);
}

.client-profile-header {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.client-avatar-xlarge {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--leaf-primary), var(--leaf-bright));
    border-radius: var(--radius-organic);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    flex-shrink: 0;
}

.client-profile-info {
    flex: 1;
}

.client-profile-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.client-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.meta-item svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

/* Client Stats */
.client-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.client-stat {
    text-align: center;
    padding: var(--space-md);
    background: var(--cream-100);
    border-radius: var(--radius-md);
}

.client-stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--leaf-primary);
    margin-bottom: 4px;
}

.client-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Payment Terms */
.payment-terms {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.term-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--cream-200);
}

.term-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.term-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.term-value {
    font-weight: 600;
    color: var(--text-primary);
}

/* Quick Actions */
.quick-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--cream-100);
    border: 1px solid var(--cream-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
}

.quick-action-btn:hover {
    border-color: var(--leaf-primary);
    background: rgba(74, 103, 65, 0.05);
}

.quick-action-btn svg {
    width: 20px;
    height: 20px;
    color: var(--leaf-primary);
}

/* =====================================================
   NEW CLIENT FORM
   ===================================================== */

.client-form {
    width: 100%;
}

.form-row {
    margin-bottom: var(--space-md);
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-row.two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.form-row.three-cols {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: var(--space-md);
}

.input-with-prefix {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix {
    position: absolute;
    left: var(--space-md);
    color: var(--text-muted);
    font-weight: 500;
}

.input-with-prefix .form-input {
    padding-left: calc(var(--space-md) + 1rem);
}

.form-divider {
    height: 1px;
    background: var(--cream-200);
    margin: var(--space-lg) 0;
}

/* Responsive Form */
@media (max-width: 768px) {
    .form-row.two-cols,
    .form-row.three-cols {
        grid-template-columns: 1fr;
    }

    .client-profile-header {
        flex-direction: column;
        text-align: center;
    }

    .client-profile-meta {
        justify-content: center;
    }
}

/* =====================================================
   PRODUCT DETAIL PAGE
   ===================================================== */

.product-hero {
    display: flex;
    gap: var(--space-xl);
    align-items: flex-start;
}

.product-image {
    width: 140px;
    height: 140px;
    background: linear-gradient(135deg, var(--cream-100), var(--cream-200));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.product-image svg {
    width: 70px;
    height: 70px;
    color: var(--leaf-primary);
    opacity: 0.6;
}

.product-info {
    flex: 1;
}

.product-code-large {
    display: inline-block;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.9rem;
    background: var(--cream-200);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    color: var(--leaf-primary);
    margin-bottom: var(--space-sm);
}

.product-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}

.product-description {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Movement Badge */
.movement-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
}

.movement-badge.in {
    background: rgba(74, 103, 65, 0.12);
    color: var(--leaf-primary);
}

.movement-badge.out {
    background: rgba(196, 112, 75, 0.12);
    color: var(--terracotta);
}

.value-cell.positive {
    color: var(--leaf-primary);
}

.value-cell.negative {
    color: var(--danger);
}

/* Stock Meter */
.stock-meter {
    text-align: center;
    padding: var(--space-md) 0;
}

.stock-value {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--leaf-primary);
    line-height: 1;
}

.stock-value.warning {
    color: var(--warning);
}

.stock-unit {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.stock-bar {
    position: relative;
    height: 10px;
    background: var(--cream-200);
    border-radius: 5px;
    overflow: visible;
    margin-bottom: var(--space-md);
}

.stock-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--leaf-primary), var(--leaf-bright));
    border-radius: 5px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.stock-bar-fill.warning {
    background: linear-gradient(90deg, var(--warning), #e8c060);
}

.stock-bar-min {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 18px;
    background: var(--danger);
    border-radius: 1px;
}

.stock-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.stock-alert {
    color: var(--danger);
    font-weight: 600;
}

.stock-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

/* Value Stats */
.value-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.value-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--cream-200);
}

.value-stat:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.value-stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.value-stat-value {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-primary);
}

/* Reorder Info */
.reorder-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.reorder-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reorder-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.reorder-value {
    font-weight: 500;
    color: var(--text-primary);
}

/* Checkbox Group */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--leaf-primary);
}

.checkbox-text {
    font-size: 0.9rem;
    color: var(--text-primary);
}

/* Product Form */
.product-form {
    width: 100%;
}

/* Responsive Product Page */
@media (max-width: 768px) {
    .product-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* =====================================================
   PURCHASE ORDERS (ACQUISTI)
   ===================================================== */

/* Alert Banner */
.alert-banner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.alert-banner.warning {
    background: rgba(212, 160, 58, 0.12);
    border: 1px solid rgba(212, 160, 58, 0.3);
}

.alert-banner svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.alert-banner.warning svg {
    color: var(--warning);
}

.alert-banner .alert-content {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.alert-banner .alert-action {
    color: var(--warning);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.85rem;
}

.alert-banner .alert-action:hover {
    text-decoration: underline;
}

/* Origin Badge */
.origin-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 500;
}

.origin-badge.far_east {
    background: rgba(196, 112, 75, 0.12);
    color: var(--terracotta);
}

.origin-badge.europa {
    background: rgba(74, 103, 133, 0.12);
    color: #4a6785;
}

.origin-badge.italia {
    background: rgba(74, 103, 65, 0.12);
    color: var(--leaf-primary);
}

/* Cost Cell */
.cost-cell {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.cost-cell .estimate {
    color: var(--text-muted);
    font-style: italic;
}

.estimate-badge {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(212, 160, 58, 0.2);
    color: var(--warning);
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Purchase Status */
.purchase-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
}

.purchase-status svg {
    width: 14px;
    height: 14px;
}

.purchase-status.status-chiuso {
    background: rgba(74, 103, 65, 0.12);
    color: var(--leaf-primary);
}

.purchase-status.status-ricevuto {
    background: rgba(74, 103, 133, 0.12);
    color: #4a6785;
}

.purchase-status.status-in_transito {
    background: rgba(139, 111, 78, 0.12);
    color: var(--bark);
}

.purchase-status.status-aperto {
    background: rgba(212, 160, 58, 0.12);
    color: var(--warning);
}

/* Invoice Counter */
.invoice-counter {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.invoice-count {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-primary);
}

.invoice-missing {
    font-size: 0.8rem;
    color: var(--warning);
}

/* Row Warning */
.row-warning {
    background: rgba(212, 160, 58, 0.05);
}

.row-warning:hover {
    background: rgba(212, 160, 58, 0.08) !important;
}

/* Action Button Success */
.action-btn.success {
    border-color: var(--leaf-primary);
    background: rgba(74, 103, 65, 0.1);
}

.action-btn.success svg {
    color: var(--leaf-primary);
}

.action-btn.success:hover {
    background: var(--leaf-primary);
}

.action-btn.success:hover svg {
    color: white;
}

/* Cost Type Badge */
.cost-type-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 500;
}

.cost-type-badge.nolo {
    background: rgba(74, 103, 133, 0.12);
    color: #4a6785;
}

.cost-type-badge.dogana {
    background: rgba(107, 91, 122, 0.12);
    color: #6b5b7a;
}

.cost-type-badge.soste {
    background: rgba(212, 160, 58, 0.12);
    color: var(--warning);
}

.cost-type-badge.trasporto {
    background: rgba(139, 111, 78, 0.12);
    color: var(--bark);
}

.cost-type-badge.magazzino {
    background: rgba(196, 112, 75, 0.12);
    color: var(--terracotta);
}

/* Estimate Card */
.estimate-card {
    border: 2px dashed var(--warning);
    background: rgba(212, 160, 58, 0.03);
}

.estimate-card .card-title {
    display: flex;
    align-items: center;
    color: var(--warning);
}

.estimate-info {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.estimate-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.estimate-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--cream-200);
}

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

.estimate-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.estimate-value {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-primary);
}

.estimate-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

.estimate-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
    margin-top: var(--space-sm);
    border-top: 2px solid var(--warning);
}

.estimate-total .estimate-label {
    font-weight: 600;
    color: var(--text-primary);
}

.estimate-total .estimate-value {
    font-size: 1.25rem;
    color: var(--warning);
}

/* Valuation Summary */
.valuation-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.valuation-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.valuation-row .value {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-primary);
}

.valuation-row.estimate {
    color: var(--warning);
    font-style: italic;
}

.valuation-row.estimate .value {
    color: var(--warning);
}

.valuation-row.total {
    padding-top: var(--space-md);
    margin-top: var(--space-sm);
    border-top: 2px solid var(--earth-900);
    font-weight: 600;
    color: var(--text-primary);
}

.valuation-row.total .value {
    font-size: 1.25rem;
}

.valuation-row.highlight {
    background: var(--cream-100);
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-sm) calc(-1 * var(--space-lg));
    border-radius: var(--radius-sm);
}

.valuation-row.highlight .value {
    color: var(--terracotta);
}

/* Valuation Status */
.valuation-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
}

.valuation-status svg {
    width: 18px;
    height: 18px;
}

.valuation-status.complete {
    background: rgba(74, 103, 65, 0.1);
    color: var(--leaf-primary);
}

.valuation-status.pending {
    background: rgba(212, 160, 58, 0.1);
    color: var(--warning);
}

/* Documents List */
.documents-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.document-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm);
    background: var(--cream-100);
    border-radius: var(--radius-sm);
}

.document-icon {
    width: 36px;
    height: 36px;
    background: var(--surface-elevated);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.document-icon svg {
    width: 18px;
    height: 18px;
    color: var(--terracotta);
}

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

.document-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}

.document-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 28, 24, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-lg);
}

.modal-content {
    background: var(--surface-elevated);
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--cream-200);
}

.modal-header h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--cream-100);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.modal-close svg {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

.modal-close:hover {
    background: var(--cream-200);
}

.modal-body {
    padding: var(--space-lg);
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-top: 1px solid var(--cream-200);
}

/* Upload Zone */
.upload-zone {
    border: 2px dashed var(--cream-400);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-zone:hover {
    border-color: var(--leaf-primary);
    background: rgba(74, 103, 65, 0.03);
}

.upload-zone svg {
    width: 48px;
    height: 48px;
    color: var(--leaf-primary);
    margin-bottom: var(--space-md);
}

.upload-zone h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.upload-zone p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.upload-hint {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: rgba(74, 103, 65, 0.08);
    border-radius: 100px;
    display: inline-block;
    font-size: 0.8rem;
    color: var(--leaf-primary);
}

/* Estimate Form */
.estimate-form {
    margin-top: var(--space-md);
}

.estimate-note-box {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--cream-100);
    border-radius: var(--radius-md);
    margin-top: var(--space-lg);
}

.estimate-note-box svg {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.estimate-note-box p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Summary Line Estimate */
.summary-line.estimate {
    color: var(--warning);
    font-style: italic;
}

.summary-line.estimate .summary-value {
    color: var(--warning);
}

.summary-line.highlight {
    background: var(--cream-100);
    margin: var(--space-sm) calc(-1 * var(--space-lg));
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-sm);
}

.summary-line.highlight .summary-value {
    color: var(--terracotta);
}

/* Input Small Variant */
.input-with-prefix.small {
    max-width: 100px;
}

.input-with-prefix.small .form-input {
    padding: var(--space-xs) var(--space-sm);
    padding-left: calc(var(--space-sm) + 1rem);
    font-size: 0.85rem;
}

/* Value Cell Variants */
.value-cell.total {
    font-weight: 700;
}

.value-cell.final {
    color: var(--leaf-primary);
}

.value-cell.estimate {
    color: var(--text-muted);
    font-style: italic;
}

.value-cell.estimate small {
    font-size: 0.7rem;
    margin-left: 4px;
}

/* =====================================================
   ANALYTICS & CONTAINER OPTIMIZER
   ===================================================== */

/* Analytics Header */
.analytics-header,
.optimizer-header {
    margin-bottom: var(--space-lg);
}

.analytics-nav {
    display: flex;
    gap: var(--space-md);
}

.analytics-nav .nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-elevated);
    border: 1px solid var(--cream-300);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}

.analytics-nav .nav-link:hover {
    background: var(--cream-200);
    border-color: var(--leaf-primary);
}

.analytics-nav .nav-link.highlight {
    background: var(--leaf-primary);
    color: var(--text-inverse);
    border-color: var(--leaf-primary);
}

.analytics-nav .nav-link svg {
    width: 18px;
    height: 18px;
}

/* Live Costs Banner */
.live-costs-banner {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    background: linear-gradient(135deg, var(--earth-900) 0%, var(--earth-800) 100%);
    color: var(--text-inverse);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

.live-indicator .pulse {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.live-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.live-label {
    font-size: 0.9rem;
    opacity: 0.8;
}

.live-value {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--terracotta-light);
}

.live-rate {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* KPI Grid */
.analytics-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.kpi-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--surface-elevated);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--cream-300);
}

.kpi-card.highlight {
    background: linear-gradient(135deg, var(--terracotta) 0%, var(--terracotta-light) 100%);
    color: var(--text-inverse);
    border: none;
}

.kpi-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

.kpi-icon svg {
    width: 24px;
    height: 24px;
}

.kpi-icon.blue { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.kpi-icon.green { background: rgba(74, 103, 65, 0.15); color: var(--leaf-primary); }
.kpi-icon.orange { background: rgba(196, 112, 75, 0.15); color: var(--terracotta); }
.kpi-icon.red { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.kpi-icon.purple { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.kpi-icon.live { 
    background: rgba(239, 68, 68, 0.2); 
    color: #ef4444; 
    animation: pulse 1.5s infinite;
}

.kpi-card.highlight .kpi-icon {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-inverse);
}

.kpi-content {
    display: flex;
    flex-direction: column;
}

.kpi-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.kpi-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.kpi-card.highlight .kpi-label {
    color: rgba(255, 255, 255, 0.8);
}

/* Analytics Grid */
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

@media (max-width: 1024px) {
    .analytics-grid {
        grid-template-columns: 1fr;
    }
}

.analytics-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.analytics-card .card-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.analytics-card .card-title svg {
    width: 20px;
    height: 20px;
    color: var(--leaf-primary);
}

/* Forecast Styles */
.badge.forecast {
    background: var(--warning);
    color: var(--earth-900);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
}

.forecast-intro {
    color: var(--text-muted);
    margin-bottom: var(--space-md);
    font-size: 0.9rem;
}

.forecast-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.forecast-item {
    display: grid;
    grid-template-columns: 80px 1fr 120px;
    align-items: center;
    gap: var(--space-md);
}

.forecast-period {
    font-weight: 600;
    font-size: 0.9rem;
}

.forecast-bar {
    height: 24px;
    background: var(--cream-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.forecast-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--terracotta) 0%, var(--terracotta-light) 100%);
    border-radius: var(--radius-sm);
    transition: width 0.5s ease;
}

.forecast-values {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.forecast-add {
    font-weight: 600;
    color: var(--terracotta);
}

.forecast-total {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.forecast-warning {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: rgba(212, 160, 58, 0.1);
    border: 1px solid var(--warning);
    border-radius: var(--radius-md);
    color: var(--earth-800);
}

.forecast-warning svg {
    width: 20px;
    height: 20px;
    color: var(--warning);
    flex-shrink: 0;
}

/* Live Badge */
.live-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--earth-900);
    color: var(--text-inverse);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.live-badge .pulse {
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

/* Live Costs List */
.live-costs-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.live-cost-item {
    background: var(--cream-100);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    border-left: 4px solid var(--terracotta);
}

.live-cost-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.live-cost-ordine {
    font-family: var(--font-display);
    font-weight: 600;
}

.live-cost-fornitore {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.live-cost-details {
    margin-bottom: var(--space-sm);
}

.live-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    border-bottom: 1px dashed var(--cream-300);
}

.live-cost-row:last-child {
    border-bottom: none;
}

.cost-type {
    font-size: 0.85rem;
}

.cost-days {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.cost-value {
    font-weight: 600;
}

.live-cost-total {
    display: flex;
    justify-content: space-between;
    padding-top: var(--space-sm);
    border-top: 2px solid var(--cream-300);
    font-weight: 600;
}

.live-cost-value {
    color: var(--terracotta);
    font-size: 1.1rem;
}

/* Product Cost Table */
.product-cost-table {
    overflow-x: auto;
}

.extra-cost {
    color: var(--terracotta);
    font-weight: 500;
}

.incidenza-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.incidenza-badge.low {
    background: rgba(74, 103, 65, 0.15);
    color: var(--leaf-primary);
}

.incidenza-badge.medium {
    background: rgba(212, 160, 58, 0.15);
    color: #b8860b;
}

.incidenza-badge.high {
    background: rgba(196, 112, 75, 0.15);
    color: var(--terracotta);
}

/* Storico */
.storico-chart-container {
    margin-bottom: var(--space-lg);
}

.storico-table .data-table.compact td,
.storico-table .data-table.compact th {
    padding: var(--space-sm);
    font-size: 0.85rem;
}

/* =====================================================
   CONTAINER OPTIMIZER STYLES
   ===================================================== */

/* Budget Selector */
.budget-selector .card-body {
    padding: var(--space-lg);
}

.budget-form {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.budget-input-group {
    display: flex;
    align-items: center;
    background: var(--surface-elevated);
    border: 2px solid var(--leaf-primary);
    border-radius: var(--radius-md);
    padding: 0 var(--space-md);
}

.budget-input-group .currency {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--leaf-primary);
}

.budget-input {
    border: none;
    background: transparent;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    width: 150px;
    padding: var(--space-sm);
    outline: none;
}

.budget-presets {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.budget-presets span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.preset-btn {
    padding: var(--space-xs) var(--space-md);
    background: var(--cream-200);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.preset-btn:hover {
    background: var(--cream-300);
}

.preset-btn.active {
    background: var(--leaf-primary);
    color: var(--text-inverse);
}

/* Optimizer Summary */
.optimizer-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.summary-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--surface-elevated);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--cream-300);
}

.summary-card.success { border-left: 4px solid var(--leaf-primary); }
.summary-card.info { border-left: 4px solid #3b82f6; }
.summary-card.warning { border-left: 4px solid var(--terracotta); }
.summary-card.profit { border-left: 4px solid #10b981; }
.summary-card.orders { border-left: 4px solid #8b5cf6; }
.summary-card.remaining { border-left: 4px solid var(--warning); }

.summary-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.summary-icon svg {
    width: 20px;
    height: 20px;
}

.summary-card.success .summary-icon { background: rgba(74, 103, 65, 0.15); color: var(--leaf-primary); }
.summary-card.info .summary-icon { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.summary-card.warning .summary-icon { background: rgba(196, 112, 75, 0.15); color: var(--terracotta); }
.summary-card.profit .summary-icon { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.summary-card.orders .summary-icon { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.summary-card.remaining .summary-icon { background: rgba(212, 160, 58, 0.15); color: var(--warning); }

.summary-content {
    display: flex;
    flex-direction: column;
}

.summary-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.summary-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Daily Cost Alert */
.daily-cost-alert {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: linear-gradient(135deg, rgba(196, 112, 75, 0.1) 0%, rgba(212, 160, 58, 0.1) 100%);
    border: 1px solid var(--terracotta);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.daily-cost-alert .alert-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--terracotta);
    color: var(--text-inverse);
    border-radius: 50%;
    flex-shrink: 0;
}

.daily-cost-alert .alert-icon svg {
    width: 24px;
    height: 24px;
}

.daily-cost-alert .alert-content {
    flex: 1;
}

.daily-cost-alert .alert-sub {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Recommended Section */
.recommended-section .card-header.success {
    background: var(--leaf-primary);
    color: var(--text-inverse);
    margin: -1px -1px 0 -1px;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.recommended-section .card-header.success .card-title {
    color: var(--text-inverse);
}

.recommended-section .card-header.success svg {
    color: var(--text-inverse);
}

.header-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
}

/* Container Grid */
.container-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-lg);
}

.container-card {
    position: relative;
    background: var(--surface-elevated);
    border: 2px solid var(--cream-300);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: all 0.3s;
}

.container-card:hover {
    border-color: var(--leaf-primary);
    box-shadow: 0 8px 30px rgba(74, 103, 65, 0.15);
}

.container-card.priority-1 {
    border-color: var(--leaf-primary);
    background: linear-gradient(180deg, rgba(74, 103, 65, 0.05) 0%, transparent 100%);
}

.container-card.priority-1::before {
    content: "PRIORITÀ MASSIMA";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--leaf-primary);
    color: var(--text-inverse);
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.container-rank {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--earth-900);
    color: var(--text-inverse);
    font-family: var(--font-display);
    font-weight: 700;
    border-radius: 50%;
}

.container-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.container-id {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9rem;
}

.container-id svg {
    width: 18px;
    height: 18px;
    color: var(--leaf-primary);
}

.urgency-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.urgency-badge.alta {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.urgency-badge.media {
    background: rgba(212, 160, 58, 0.15);
    color: #b8860b;
}

.urgency-badge.bassa {
    background: rgba(74, 103, 65, 0.15);
    color: var(--leaf-primary);
}

.urgency-badge.small {
    padding: 2px 8px;
    font-size: 0.65rem;
}

.container-supplier {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.container-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.container-metrics .metric {
    display: flex;
    flex-direction: column;
    padding: var(--space-sm);
    background: var(--cream-100);
    border-radius: var(--radius-sm);
}

.container-metrics .metric-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.container-metrics .metric-value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
}

.container-metrics .metric-value.cost {
    color: var(--terracotta);
}

.container-metrics .metric-value.warning {
    color: var(--warning);
}

.container-metrics .metric.highlight {
    background: var(--earth-900);
    grid-column: span 2;
}

.container-metrics .metric.highlight .metric-label {
    color: rgba(255, 255, 255, 0.7);
}

.container-metrics .metric.highlight .metric-value {
    color: var(--text-inverse);
    font-size: 1.25rem;
}

/* ROI Bar */
.container-roi {
    margin-bottom: var(--space-md);
}

.roi-bar {
    height: 8px;
    background: var(--cream-200);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--space-xs);
}

.roi-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    border-radius: 4px;
}

.roi-values {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.roi-label {
    color: var(--text-muted);
}

.roi-value {
    font-weight: 700;
    color: #10b981;
}

/* Container Products */
.container-products {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.products-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.product-chip {
    background: var(--cream-200);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-family: monospace;
}

/* Container Orders */
.container-orders {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm);
    background: rgba(139, 92, 246, 0.1);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
}

.orders-pending {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.85rem;
    color: #7c3aed;
}

.orders-pending svg {
    width: 16px;
    height: 16px;
}

.orders-value {
    font-weight: 600;
    font-size: 0.85rem;
}

/* Container Daily */
.container-daily {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: var(--space-sm) 0;
    border-top: 1px dashed var(--cream-300);
    margin-bottom: var(--space-sm);
}

.daily-cost {
    color: var(--terracotta);
    font-weight: 600;
}

.days-waiting {
    color: var(--text-muted);
}

/* Container Score */
.container-score {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm);
    background: var(--earth-900);
    border-radius: var(--radius-sm);
    color: var(--text-inverse);
}

.score-label {
    font-size: 0.8rem;
    opacity: 0.8;
}

.score-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

/* Blocked Section */
.blocked-section .card-header.warning {
    background: var(--warning);
    color: var(--earth-900);
    margin: -1px -1px 0 -1px;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.blocked-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.blocked-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    background: var(--cream-100);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--warning);
}

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

.blocked-container {
    font-family: monospace;
    font-weight: 600;
}

.blocked-supplier {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.blocked-cost {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.cost-needed {
    font-weight: 600;
}

.cost-shortage {
    font-size: 0.85rem;
    color: var(--danger);
}

.blocked-daily {
    font-size: 0.85rem;
    color: var(--terracotta);
    font-weight: 500;
}

/* Decision Matrix */
.decision-matrix tr.unlockable {
    background: rgba(74, 103, 65, 0.05);
}

.decision-matrix tr.blocked {
    opacity: 0.6;
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--earth-900);
    color: var(--text-inverse);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.8rem;
}

.status-badge.danger {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

/* =====================================================
   LIVE COSTS CARD STYLES
   ===================================================== */

/* Header Badges */
.header-badges {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Live Costs Card */
.live-costs-card {
    border: 2px solid var(--terracotta);
    background: linear-gradient(180deg, rgba(196, 112, 75, 0.05) 0%, transparent 100%);
}

.live-costs-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.live-costs-card .card-title {
    display: flex;
    align-items: center;
}

.live-costs-card .card-title svg {
    color: var(--terracotta);
}

/* Daily Costs Grid */
.daily-costs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.daily-cost-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--surface-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--cream-300);
}

.daily-cost-type {
    margin-bottom: var(--space-xs);
}

.daily-cost-calc {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.daily-days {
    font-weight: 700;
    color: var(--terracotta);
}

.daily-rate {
    font-weight: 600;
}

.daily-cost-total {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--terracotta);
}

.daily-costs-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    background: var(--earth-900);
    color: var(--text-inverse);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
}

.daily-total-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--terracotta-light);
}

.daily-costs-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
}

/* Button Highlight Variant */
.btn-secondary.highlight {
    background: linear-gradient(135deg, var(--leaf-primary) 0%, var(--leaf-bright) 100%);
    color: var(--text-inverse);
    border: none;
}

.btn-secondary.highlight:hover {
    background: linear-gradient(135deg, var(--leaf-bright) 0%, var(--leaf-primary) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 103, 65, 0.3);
}

/* Full Width Card */
.card.full-width {
    grid-column: 1 / -1;
}

/* Text alignment helpers */
.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

/* Badge Info */
.badge.info {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Product Code styling */
.product-code {
    font-family: 'JetBrains Mono', monospace;
    background: var(--cream-200);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Data Table Compact */
.data-table.compact td,
.data-table.compact th {
    padding: var(--space-sm);
}

/* Analytics responsive */
@media (max-width: 768px) {
    .analytics-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .optimizer-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .container-grid {
        grid-template-columns: 1fr;
    }
    
    .forecast-item {
        grid-template-columns: 60px 1fr;
    }
    
    .forecast-values {
        grid-column: span 2;
        text-align: left;
        margin-top: var(--space-xs);
    }
    
    .budget-form {
        flex-direction: column;
        align-items: stretch;
    }
    
    .budget-presets {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* =====================================================
   FIX: Card Title Icons & Decision Matrix
   ===================================================== */

/* Card title icons should be fixed size */
.card-header .card-title svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-right: var(--space-xs);
}

.card-header .card-title {
    display: flex;
    align-items: center;
}

/* Decision Matrix Table Fix */
.decision-matrix {
    width: 100%;
    font-size: 0.85rem;
}

.decision-matrix th,
.decision-matrix td {
    padding: var(--space-sm) var(--space-xs);
    white-space: nowrap;
}

.decision-matrix code {
    font-size: 0.75rem;
}

/* Full width card needs overflow handling */
.card.full-width .card-body {
    overflow-x: auto;
}

/* Blocked section icon fix */
.blocked-section .card-title svg {
    width: 20px;
    height: 20px;
}

/* Recommended section icon fix */
.recommended-section .card-title svg {
    width: 20px;
    height: 20px;
}

/* =====================================================
   REPORTISTICA PAGE STYLES
   ===================================================== */

/* Report Toolbar */
.report-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.period-selector {
    display: flex;
    background: var(--surface-elevated);
    border-radius: var(--radius-md);
    padding: 4px;
    border: 1px solid var(--cream-300);
}

.period-btn {
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: none;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.period-btn:hover {
    color: var(--text-primary);
}

.period-btn.active {
    background: var(--leaf-primary);
    color: var(--text-inverse);
}

/* KPI Row */
.kpi-row {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

@media (max-width: 1200px) {
    .kpi-row {
        grid-template-columns: repeat(3, 1fr);
    }
    .kpi-row .kpi-card.large {
        grid-column: span 3;
    }
}

@media (max-width: 768px) {
    .kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .kpi-row .kpi-card.large {
        grid-column: span 2;
    }
}

.kpi-row .kpi-card {
    background: var(--surface-elevated);
    border: 1px solid var(--cream-300);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.kpi-row .kpi-card.large {
    padding: var(--space-lg);
}

.kpi-row .kpi-card.highlight {
    background: var(--leaf-primary);
    border: none;
    color: var(--text-inverse);
}

.kpi-row .kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
}

.kpi-row .kpi-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.kpi-row .kpi-card.highlight .kpi-label {
    color: rgba(255, 255, 255, 0.8);
}

.kpi-trend {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
}

.kpi-trend.positive {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.kpi-trend.negative {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.kpi-row .kpi-value {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.kpi-row .kpi-card.large .kpi-value {
    font-size: 2.5rem;
}

.kpi-sparkline {
    margin-top: var(--space-sm);
    height: 30px;
}

.kpi-sparkline svg {
    width: 100%;
    height: 100%;
}

/* Charts Row */
.charts-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

@media (max-width: 1024px) {
    .charts-row {
        grid-template-columns: 1fr;
    }
}

.chart-card.wide {
    /* Just for specificity */
}

.chart-legend {
    display: flex;
    gap: var(--space-md);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-item.ricavi .legend-dot { background: rgba(74, 103, 65, 0.85); }
.legend-item.costi .legend-dot { background: rgba(196, 112, 75, 0.85); }
.legend-item.utile .legend-dot { background: #10b981; }

/* Tables Row */
.tables-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

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

@media (max-width: 768px) {
    .tables-row {
        grid-template-columns: 1fr;
    }
}

.card-link {
    font-size: 0.85rem;
    color: var(--leaf-primary);
    text-decoration: none;
    font-weight: 500;
}

.card-link:hover {
    text-decoration: underline;
}

/* Client Cell */
.client-cell {
    display: flex;
    flex-direction: column;
}

.client-name {
    font-weight: 500;
}

.client-city {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Product Cell */
.product-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-cell .product-name {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Rank Badge Small */
.rank-badge.small {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
}

/* Trend Indicator */
.trend-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.trend-indicator svg {
    width: 16px;
    height: 16px;
}

.trend-indicator.up {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.trend-indicator.down {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

/* Margin Badge */
.margin-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.margin-badge.high {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.margin-badge.medium {
    background: rgba(212, 160, 58, 0.15);
    color: #b8860b;
}

.margin-badge.low {
    background: rgba(196, 112, 75, 0.15);
    color: var(--terracotta);
}

/* Supplier Cell */
.supplier-cell {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.supplier-trend {
    font-size: 0.9rem;
}

.supplier-trend.up { color: #059669; }
.supplier-trend.down { color: #dc2626; }
.supplier-trend.stable { color: var(--text-muted); }

/* Progress Mini */
.progress-mini {
    height: 6px;
    background: var(--cream-200);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 2px;
}

.progress-mini .progress-fill {
    height: 100%;
    background: var(--leaf-primary);
    border-radius: 3px;
}

.progress-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Ratio Badge */
.ratio-badge {
    font-size: 0.85rem;
    font-weight: 500;
}

/* Quality Badge */
.quality-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.quality-badge.excellent {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.quality-badge.good {
    background: rgba(74, 103, 65, 0.15);
    color: var(--leaf-primary);
}

.quality-badge.average {
    background: rgba(212, 160, 58, 0.15);
    color: #b8860b;
}

/* Insights Row */
.insights-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

@media (max-width: 1024px) {
    .insights-row {
        grid-template-columns: 1fr;
    }
}

/* Alert Card */
.alert-card.warning {
    border-left: 4px solid var(--warning);
}

.alert-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alert-count {
    background: var(--warning);
    color: var(--earth-900);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
}

/* Critical List */
.critical-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.critical-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm);
    background: var(--cream-100);
    border-radius: var(--radius-sm);
}

.critical-info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.critical-info code {
    font-size: 0.8rem;
}

.critical-stock {
    font-size: 0.85rem;
}

.critical-stock .current {
    font-weight: 700;
    color: var(--danger);
}

.critical-stock .separator {
    color: var(--text-muted);
    margin: 0 4px;
}

.critical-stock .minimum {
    color: var(--text-muted);
}

/* Insight Card */
.insight-card {
    border-left: 4px solid var(--leaf-primary);
}

.insight-metric {
    text-align: center;
    margin-bottom: var(--space-md);
}

.insight-value {
    display: block;
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    color: var(--terracotta);
    line-height: 1;
}

.insight-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

.insight-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.insight-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background: var(--leaf-primary);
    color: var(--text-inverse);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all 0.2s;
}

.insight-link:hover {
    background: var(--leaf-bright);
}

.insight-link svg {
    width: 18px;
    height: 18px;
}

/* Quick Actions */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--cream-100);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s;
}

.quick-action:hover {
    background: var(--cream-200);
    transform: translateY(-2px);
}

.action-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.action-icon svg {
    width: 20px;
    height: 20px;
}

.action-icon.blue { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.action-icon.green { background: rgba(74, 103, 65, 0.15); color: var(--leaf-primary); }
.action-icon.orange { background: rgba(196, 112, 75, 0.15); color: var(--terracotta); }
.action-icon.purple { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

.quick-action span {
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
}