/* DCF Invoice System UI/UX Fixes */

/* Logo Sizing and Responsive Design */
.fi-logo img {
    max-height: 2.5rem !important; /* 40px */
    width: auto !important;
    object-fit: contain !important;
    transition: all 0.2s ease-in-out;
}

.fi-logo img:hover {
    transform: scale(1.05);
}

/* Navigation Header Improvements */
.fi-topbar {
    padding: 0.75rem 1rem !important;
    min-height: 4rem !important;
}

/* Logo Container Responsive */
.fi-logo {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    max-width: 300px !important;
}

/* Brand Text Styling */
.fi-logo span {
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: #374151 !important;
    white-space: nowrap !important;
}

.dark .fi-logo span {
    color: #f3f4f6 !important;
}

/* Mobile Responsive Logo */
@media (max-width: 640px) {
    .fi-logo img {
        max-height: 2rem !important; /* 32px on mobile */
        max-width: 60px !important;
    }
    
    .fi-logo span {
        display: none !important; /* Hide text on mobile */
    }
    
    .fi-topbar {
        padding: 0.5rem !important;
        min-height: 3.5rem !important;
    }
}

/* Tablet Responsive */
@media (min-width: 641px) and (max-width: 1024px) {
    .fi-logo img {
        max-height: 2.25rem !important; /* 36px on tablet */
        max-width: 70px !important;
    }
    
    .fi-logo span {
        font-size: 0.875rem !important;
    }
}

/* Desktop Optimization */
@media (min-width: 1025px) {
    .fi-logo img {
        max-height: 2.5rem !important; /* 40px on desktop */
        max-width: 80px !important;
    }
}

/* Login Page Logo Fixes */
.fi-simple-page .fi-logo img {
    max-height: 4rem !important; /* 64px on login */
    max-width: 120px !important;
}

.fi-simple-page .fi-logo {
    justify-content: center !important;
    margin-bottom: 1.5rem !important;
}

/* Content Alignment Fixes */
.fi-main {
    padding: 1rem !important;
}

.fi-page {
    max-width: none !important;
}

/* Typography Improvements */
.fi-header-heading {
    font-weight: 600 !important;
    color: #111827 !important;
}

.dark .fi-header-heading {
    color: #f9fafb !important;
}

/* Button Spacing */
.fi-btn {
    padding: 0.5rem 1rem !important;
    font-weight: 500 !important;
}

/* Table Responsive */
.fi-ta-table {
    font-size: 0.875rem !important;
}

@media (max-width: 768px) {
    .fi-ta-table {
        font-size: 0.75rem !important;
    }
}

/* Form Improvements */
.fi-fo-field-wrp {
    margin-bottom: 1rem !important;
}

.fi-input {
    border-radius: 0.375rem !important;
    border: 1px solid #d1d5db !important;
    transition: all 0.2s ease-in-out !important;
}

.fi-input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

/* Card Improvements */
.fi-section {
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

/* Sidebar Improvements */
.fi-sidebar {
    border-right: 1px solid #e5e7eb !important;
}

.dark .fi-sidebar {
    border-right-color: #374151 !important;
}

/* Navigation Item Spacing */
.fi-sidebar-nav-item {
    margin-bottom: 0.25rem !important;
}

/* Dashboard Widget Spacing */
.fi-wi {
    margin-bottom: 1.5rem !important;
}

/* Notification Improvements */
.fi-no {
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Modal Improvements */
.fi-modal {
    border-radius: 0.75rem !important;
}

/* Action Button Improvements */
.fi-ac-btn-group {
    gap: 0.5rem !important;
}

/* Badge Improvements */
.fi-badge {
    font-weight: 500 !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 9999px !important;
}

/* Loading State Improvements */
.fi-loading {
    opacity: 0.7 !important;
    transition: opacity 0.2s ease-in-out !important;
}

/* Print Styles */
@media print {
    .fi-topbar,
    .fi-sidebar,
    .fi-page-actions {
        display: none !important;
    }
    
    .fi-main {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .fi-logo img {
        max-height: 3rem !important;
    }
}

/* High DPI Display Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .fi-logo img {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
}

/* Focus Improvements for Accessibility */
.fi-btn:focus,
.fi-input:focus,
.fi-select:focus {
    outline: 2px solid #6366f1 !important;
    outline-offset: 2px !important;
}

/* Smooth Transitions */
* {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important;
}

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

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.dark ::-webkit-scrollbar-track {
    background: #1e293b;
}

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}