/* Custom Tailwind classes for Buoni Spesa view */

/* Grid */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2 / span 2; }

/* Max width */
.max-w-4xl { max-width: 56rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Spacing */
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

/* Typography */
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.tracking-wide { letter-spacing: 0.025em; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Borders */
.rounded-xl { border-radius: 0.75rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }
.border { border-width: 1px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }

/* Colors - Green */
.bg-green-50 { background-color: rgb(240 253 244); }
.bg-green-100 { background-color: rgb(220 252 231); }
.bg-green-800 { background-color: rgb(22 101 52); }
.text-green-600 { color: rgb(22 163 74); }
.text-green-700 { color: rgb(21 128 61); }
.text-green-800 { color: rgb(22 101 52); }
.text-green-200 { color: rgb(187 247 208); }
.text-green-300 { color: rgb(134 239 172); }
.text-green-400 { color: rgb(74 222 128); }
.border-green-200 { border-color: rgb(187 247 208); }
.border-green-800 { border-color: rgb(22 101 52); }

/* Colors - Red */
.bg-red-100 { background-color: rgb(254 226 226); }
.text-red-700 { color: rgb(185 28 28); }
.text-red-400 { color: rgb(248 113 113); }

/* Colors - Amber */
.bg-amber-50 { background-color: rgb(255 251 235); }
.bg-amber-100 { background-color: rgb(254 243 199); }
.text-amber-500 { color: rgb(245 158 11); }
.text-amber-600 { color: rgb(217 119 6); }
.text-amber-700 { color: rgb(180 83 9); }
.text-amber-800 { color: rgb(146 64 14); }
.text-amber-200 { color: rgb(253 230 138); }
.text-amber-400 { color: rgb(251 191 36); }

/* Colors - Blue */
.bg-blue-100 { background-color: rgb(219 234 254); }
.text-blue-700 { color: rgb(29 78 216); }
.text-blue-400 { color: rgb(96 165 250); }

/* Colors - Purple */
.bg-purple-100 { background-color: rgb(243 232 255); }
.text-purple-700 { color: rgb(126 34 206); }
.text-purple-400 { color: rgb(192 132 252); }

/* Flexbox */
.flex-col-reverse { flex-direction: column-reverse; }
.flex-wrap { flex-wrap: wrap; }
.self-end { align-self: flex-end; }

/* Focus ring */
.focus\:ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.focus\:ring-primary-500:focus { --tw-ring-color: rgb(59 130 246); }
.focus\:border-primary-500:focus { border-color: rgb(59 130 246); }

/* Responsive - SM (640px+) */
@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm\:col-span-1 { grid-column: span 1 / span 1; }
    .sm\:col-span-2 { grid-column: span 2 / span 2; }
    .sm\:flex-row { flex-direction: row; }
    .sm\:items-center { align-items: center; }
    .sm\:justify-between { justify-content: space-between; }
    .sm\:gap-6 { gap: 1.5rem; }
    .sm\:space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
    .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\:py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
    .sm\:p-6 { padding: 1.5rem; }
    .sm\:self-end { align-self: flex-end; }
    .sm\:w-auto { width: auto; }
}

/* Responsive - MD (768px+) */
@media (min-width: 768px) {
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:col-span-1 { grid-column: span 1 / span 1; }
}

/* Responsive - LG (1024px+) */
@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:gap-6 { gap: 1.5rem; }
}

/* Dark mode */
.dark .dark\:bg-gray-800 { background-color: rgb(31 41 55); }
.dark .dark\:bg-gray-900 { background-color: rgb(17 24 39); }
.dark .dark\:bg-green-800 { background-color: rgb(22 101 52); }
.dark .dark\:bg-green-900\/20 { background-color: rgb(20 83 45 / 0.2); }
.dark .dark\:bg-amber-900\/20 { background-color: rgb(120 53 15 / 0.2); }
.dark .dark\:bg-red-900\/30 { background-color: rgb(127 29 29 / 0.3); }
.dark .dark\:bg-green-900\/30 { background-color: rgb(20 83 45 / 0.3); }
.dark .dark\:bg-blue-900\/30 { background-color: rgb(30 58 138 / 0.3); }
.dark .dark\:bg-purple-900\/30 { background-color: rgb(88 28 135 / 0.3); }
.dark .dark\:text-white { color: rgb(255 255 255); }
.dark .dark\:text-gray-300 { color: rgb(209 213 219); }
.dark .dark\:text-gray-400 { color: rgb(156 163 175); }
.dark .dark\:text-green-200 { color: rgb(187 247 208); }
.dark .dark\:text-green-300 { color: rgb(134 239 172); }
.dark .dark\:text-green-400 { color: rgb(74 222 128); }
.dark .dark\:text-amber-200 { color: rgb(253 230 138); }
.dark .dark\:text-amber-400 { color: rgb(251 191 36); }
.dark .dark\:text-red-400 { color: rgb(248 113 113); }
.dark .dark\:text-blue-400 { color: rgb(96 165 250); }
.dark .dark\:text-purple-400 { color: rgb(192 132 252); }
.dark .dark\:border-gray-600 { border-color: rgb(75 85 99); }
.dark .dark\:border-gray-700 { border-color: rgb(55 65 81); }
.dark .dark\:border-green-800 { border-color: rgb(22 101 52); }
.dark .dark\:hover\:text-white:hover { color: rgb(255 255 255); }

/* ========================================
   OPERATORE PANEL STYLES
   ======================================== */

/* Welcome Widget */
.welcome-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}
.welcome-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.welcome-avatar svg {
    width: 28px;
    height: 28px;
    color: white;
}
.welcome-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}
.welcome-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
}
@media (min-width: 640px) {
    .welcome-widget {
        flex-direction: row;
        text-align: left;
    }
}

/* Document Cards */
.doc-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.doc-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.doc-info {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}
.doc-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(6, 182, 212, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.doc-icon {
    width: 24px;
    height: 24px;
    color: #06b6d4;
}
.doc-content {
    flex: 1;
    min-width: 0;
}
.doc-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.doc-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: inherit;
}
.doc-meta {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.doc-meta svg {
    width: 16px;
    height: 16px;
}
.doc-note {
    font-size: 0.875rem;
    color: #4b5563;
    margin-top: 0.5rem;
}
.doc-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
@media (min-width: 640px) {
    .doc-card {
        flex-direction: row;
        align-items: center;
    }
    .doc-title {
        font-size: 1.125rem;
    }
}

/* Badge */
.badge-tipologia {
    display: inline-flex;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
    background: rgba(6, 182, 212, 0.1);
    color: #0891b2;
}

/* Filter Buttons */
.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}
.empty-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(107, 114, 128, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.empty-icon {
    width: 32px;
    height: 32px;
    color: #9ca3af;
}
.empty-title {
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0;
}
.empty-desc {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* Dark mode for operator panel */
.dark .welcome-subtitle { color: #9ca3af; }
.dark .doc-meta { color: #9ca3af; }
.dark .doc-note { color: #d1d5db; }
.dark .empty-desc { color: #9ca3af; }
.dark .badge-tipologia {
    background: rgba(6, 182, 212, 0.2);
    color: #22d3ee;
}

/* Fix heroicon sizes in operator panel */
.welcome-avatar svg,
.doc-icon-wrapper svg,
.empty-icon-wrapper svg,
.doc-meta svg {
    width: inherit;
    height: inherit;
}
.welcome-avatar svg { width: 28px; height: 28px; }
.doc-icon-wrapper svg { width: 24px; height: 24px; }
.empty-icon-wrapper svg { width: 32px; height: 32px; }
.doc-meta svg { width: 16px; height: 16px; }

/* Filament table overrides for operator panel */
.fi-ta-table {
    border-radius: 0.5rem;
    overflow: hidden;
}
.fi-ta-header-cell {
    white-space: nowrap;
}
.fi-ta-cell {
    vertical-align: middle;
}
@media (max-width: 639px) {
    .fi-ta-table th:nth-child(n+3),
    .fi-ta-table td:nth-child(n+3) {
        display: none;
    }
    .fi-ta-table th:last-child,
    .fi-ta-table td:last-child {
        display: table-cell;
    }
}