/* Modern UI Theme for Laravel Asset Management
 * Created: October 1, 2025
 */

/* ==== VARIABLES ==== */
:root {
    /* Primary brand colors */
    --primary-50: 239 246 255;
    --primary-100: 219 234 254;
    --primary-200: 191 219 254;
    --primary-300: 147 197 253;
    --primary-400: 96 165 250;
    --primary-500: 59 130 246;
    --primary-600: 37 99 235;
    --primary-700: 29 78 216;
    --primary-800: 30 64 175;
    --primary-900: 30 58 138;
    
    /* Secondary colors */
    --secondary-50: 240 253 244;
    --secondary-500: 34 197 94;
    --secondary-600: 22 163 74;
    
    /* Neutral colors */
    --gray-50: 249 250 251;
    --gray-100: 243 244 246;
    --gray-200: 229 231 235;
    --gray-300: 209 213 219;
    --gray-400: 156 163 175;
    --gray-500: 107 114 128;
    --gray-600: 75 85 99;
    --gray-700: 55 65 81;
    --gray-800: 31 41 55;
    --gray-900: 17 24 39;
    
    /* Accent colors */
    --success: 34 197 94;
    --warning: 234 179 8;
    --danger: 239 68 68;
    --info: 6 182 212;
    
    /* UI elements - Enhanced for cleaner look */
    --card-radius: 12px;
    --button-radius: 8px;
    --input-radius: 8px;
    --panel-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --hover-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --focus-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    
    /* Typography */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
}

/* ==== GLOBAL STYLES ==== */
body {
    background-color: #fafbfc !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.011em !important;
    font-family: 'Inter', sans-serif;
}

/* ==== LAYOUT COMPONENTS ==== */

/* Sidebar */
.filament-sidebar {
    background-color: rgb(var(--gray-900)) !important;
    border-right: none !important;
}

.filament-sidebar-header {
    padding: 1.5rem 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.filament-sidebar-nav-item a {
    border-radius: var(--button-radius) !important;
    margin: 0.25rem 0.75rem !important;
}

.filament-sidebar-group {
    margin-top: 1.5rem !important;
}

.filament-sidebar-group-label {
    color: rgb(var(--gray-400)) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0 1.5rem !important;
}

.filament-sidebar-item-active a {
    background-color: rgba(var(--primary-900), 0.5) !important;
    border-left: 3px solid rgb(var(--primary-400)) !important;
}

/* Header */
.filament-header {
    padding: 1.25rem 1.5rem !important;
    background-color: white !important;
    border-bottom: 1px solid rgb(var(--gray-200)) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

.filament-header-heading {
    font-weight: 600 !important;
    font-size: 1.5rem !important;
    color: rgb(var(--gray-800)) !important;
}

/* Main content */
.filament-main {
    padding: 1.5rem !important;
}

/* ==== CARDS & WIDGETS - Enhanced Clean Design ==== */

/* Dashboard cards with modern styling */
.filament-stats-card {
    border: 1px solid rgb(var(--gray-100)) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
    overflow: hidden !important;
    transition: all 0.15s ease-in-out !important;
    background-color: white !important;
    position: relative !important;
}

.filament-stats-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--hover-shadow) !important;
    border-color: rgb(var(--gray-200)) !important;
}

/* Chart widgets with cleaner appearance */
.filament-widget > div {
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
    border: 1px solid rgb(var(--gray-100)) !important;
    background-color: white !important;
    overflow: hidden !important;
    transition: all 0.15s ease-in-out !important;
}

.filament-widget:hover > div {
    box-shadow: var(--hover-shadow) !important;
}
    overflow: hidden !important;
}

.filament-widget-card-header {
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid rgb(var(--gray-100)) !important;
}

.filament-widget-card-header h2 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: rgb(var(--gray-800)) !important;
}

/* ==== FORMS & INPUTS - Enhanced Clean Design ==== */

/* Form field labels */
.filament-forms-field-wrapper-label {
    font-weight: var(--font-weight-medium) !important;
    color: rgb(var(--gray-700)) !important;
    font-size: 0.875rem !important;
    margin-bottom: var(--spacing-xs) !important;
}

/* Text inputs with modern styling */
.filament-forms-text-input,
.filament-forms-textarea,
.filament-forms-select {
    border-radius: var(--input-radius) !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid rgb(var(--gray-200)) !important;
    background-color: white !important;
    transition: all 0.15s ease-in-out !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

.filament-forms-text-input:focus,
.filament-forms-textarea:focus,
.filament-forms-select:focus {
    border-color: rgb(var(--primary-500)) !important;
    box-shadow: var(--focus-shadow) !important;
    outline: none !important;
}

.filament-forms-text-input:hover,
.filament-forms-textarea:hover,
.filament-forms-select:hover {
    border-color: rgb(var(--gray-300)) !important;
}

/* Form field wrapper styling */
.filament-forms-field-wrapper {
    margin-bottom: var(--spacing-lg) !important;
}

/* Form sections */
.filament-forms-section {
    background-color: white !important;
    border-radius: var(--card-radius) !important;
    border: 1px solid rgb(var(--gray-100)) !important;
    box-shadow: var(--card-shadow) !important;
    padding: var(--spacing-xl) !important;
    margin-bottom: var(--spacing-lg) !important;
}

/* ==== BUTTONS - Clean Modern Design ==== */

/* Primary buttons */
.filament-button,
.filament-button-primary {
    border-radius: var(--button-radius) !important;
    font-weight: var(--font-weight-medium) !important;
    padding: 0.75rem 1.5rem !important;
    transition: all 0.15s ease-in-out !important;
    font-size: 0.875rem !important;
    line-height: 1.25 !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

.filament-button-primary {
    background-color: rgb(var(--primary-600)) !important;
    color: white !important;
}

.filament-button-primary:hover {
    background-color: rgb(var(--primary-700)) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--hover-shadow) !important;
}

/* Secondary buttons */
.filament-button-secondary {
    background-color: white !important;
    color: rgb(var(--gray-700)) !important;
    border: 1px solid rgb(var(--gray-200)) !important;
}

.filament-button-secondary:hover {
    background-color: rgb(var(--gray-50)) !important;
    border-color: rgb(var(--gray-300)) !important;
    transform: translateY(-1px) !important;
}

/* Danger buttons */
.filament-button-danger {
    background-color: rgb(var(--danger)) !important;
    color: white !important;
}

.filament-button-danger:hover {
    background-color: rgb(220 38 38) !important;
    transform: translateY(-1px) !important;
}

/* Button sizes */
.filament-button-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.75rem !important;
}

.filament-button-lg {
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
}
}

.filament-button-primary {
    background-color: rgb(var(--primary-600)) !important;
    border-color: rgb(var(--primary-700)) !important;
}

.filament-button-primary:hover {
    background-color: rgb(var(--primary-700)) !important;
    transform: translateY(-1px) !important;
}

/* ==== TABLES ==== */
.filament-tables-table {
    border-radius: var(--card-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--card-shadow) !important;
}

.filament-tables-header-cell {
    background-color: rgb(var(--gray-50)) !important;
    color: rgb(var(--gray-600)) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
}

.filament-tables-row {
    transition: all 0.15s ease-in-out !important;
}

.filament-tables-row:hover {
    background-color: rgba(var(--primary-50), 0.5) !important;
}

/* ==== ANIMATIONS ==== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.filament-page {
    animation: fadeIn 0.3s ease-out;
}

/* ==== DASHBOARD SPECIFIC ==== */
.filament-stats-overview-widget {
    animation-delay: 0.1s;
}

.filament-stats-overview-widget-card {
    border-top: 4px solid rgb(var(--primary-500)) !important;
    padding: 1.25rem !important;
}

/* Customize each card with a different accent color */
.filament-stats-overview-widget-card:nth-child(1) {
    border-top-color: rgb(var(--primary-500)) !important;
}

.filament-stats-overview-widget-card:nth-child(2) {
    border-top-color: rgb(var(--secondary-500)) !important;
}

.filament-stats-overview-widget-card:nth-child(3) {
    border-top-color: rgb(var(--warning)) !important;
}

.filament-stats-overview-widget-card:nth-child(4) {
    border-top-color: rgb(var(--info)) !important;
}

/* Chart styling */
canvas.filament-chart {
    padding: 1rem !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgb(var(--gray-100));
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--gray-300));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--gray-400));
}