/* TKV CRM - Mobile Redesign v2.0 */
/* Comprehensive mobile UI fixes for all pages */
/* Browser Compatibility: Chrome, Safari, Firefox, Edge, Opera */

/* ============================================
   CROSS-BROWSER COMPATIBILITY
   ============================================ */

/* Ensure consistent box-sizing across all browsers */
*, *::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Smooth scrolling with fallback */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Touch action for better mobile experience */
button, a, .mobile-nav-item, .mobile-more-item, .mobile-card-main {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

/* Flexbox prefixes for older browsers */
.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.flex-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.items-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.justify-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* Transform prefixes */
.transform {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

/* Transition prefixes */
.transition-all {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

/* Animation prefixes */
@-webkit-keyframes fadeIn {
    from { opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@-moz-keyframes fadeIn {
    from { opacity: 0; -moz-transform: translateY(8px); transform: translateY(8px); }
    to { opacity: 1; -moz-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Backdrop filter with fallback */
.backdrop-blur {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

@supports not ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
    .backdrop-blur {
        background-color: rgba(0, 0, 0, 0.7);
    }
}

/* ============================================
   DESKTOP: Hide mobile elements
   ============================================ */
.mobile-bottom-nav,
.mobile-more-menu,
.mobile-card-list {
    display: none !important;
}

.desktop-table {
    display: block !important;
}

/* ============================================
   MOBILE STYLES (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {

    /* ========================================
       RESET & BASE TYPOGRAPHY
       ======================================== */
    html {
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100% !important;
    }

    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background-color: #f8fafc !important;
        background-image: none !important;
        min-height: 100vh !important;
        height: auto !important;
        display: block !important;
    }

    /* Reset font weights for mobile */
    html, body, * {
        font-weight: normal !important;
        letter-spacing: normal !important;
    }

    h1, h2, h3, h4, h5, h6, .font-heading {
        font-family: 'Schibsted Grotesk', sans-serif !important;
        font-weight: 600 !important;
        color: #111827 !important;
    }

    p, span, div, td, th, input, textarea, select, button, label, li, a {
        font-family: 'Schibsted Grotesk', sans-serif !important;
        font-weight: 400 !important;
    }

    .text-xs { font-size: 12px !important; }
    .text-sm { font-size: 14px !important; }
    .text-base { font-size: 16px !important; }
    .text-lg { font-size: 18px !important; }
    .text-xl { font-size: 20px !important; }
    .text-2xl { font-size: 24px !important; }
    .font-bold { font-weight: 700 !important; }
    .font-semibold { font-weight: 600 !important; }
    .font-medium { font-weight: 500 !important; }

    /* ========================================
       MAIN LAYOUT CONTAINER
       ======================================== */
    #app-container {
        width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        background: #f8fafc !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* App inner container */
    #app {
        display: flex !important;
        flex-direction: column !important;
        min-height: 100vh !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Flex container for main content area */
    #app > .flex-1 {
        display: flex !important;
        flex-direction: column !important;
        min-height: 100vh !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* ========================================
       SIDEBAR - Hidden on Mobile
       ======================================== */
    .glass-sidebar {
        display: none !important;
    }

    /* ========================================
       HEADER - Fixed at Top
       ======================================== */
    header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 56px !important;
        z-index: 100 !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-shrink: 0 !important;
    }
    
    .dark header {
        background: #18181b !important;
        border-bottom: 1px solid #3f3f46 !important;
    }

    /* Header left section - page title */
    header > div:first-child {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Hide hamburger menu button */
    .mobile-menu-btn {
        display: none !important;
    }

    /* Hide breadcrumb separator */
    header i[data-lucide="chevron-right"] {
        display: none !important;
    }
    
    /* Hide "TKV CRM" text */
    header > div:first-child > span.hidden {
        display: none !important;
    }

    /* Page title in header */
    header > div:first-child > span:last-child,
    header > div:first-child > span.text-gray-900 {
        display: block !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #111827 !important;
    }
    
    .dark header > div:first-child > span:last-child,
    .dark header > div:first-child > span.text-gray-900 {
        color: #fafafa !important;
    }

    /* Header right section */
    header > div:last-child {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }

    /* Hide greeting text and last login on mobile */
    header > div:last-child > div.text-right,
    header > div:last-child > div.hidden,
    header > div:last-child > div.border-r {
        display: none !important;
    }

    /* Header icons - same size */
    header > div:last-child > div.w-8,
    header > div:last-child > button,
    .dark-mode-toggle {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f3f4f6 !important;
        border: none !important;
        padding: 0 !important;
    }
    
    header > div:last-child > div.w-8 i,
    header > div:last-child > button i,
    .dark-mode-toggle i {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        color: #4b5563 !important;
        flex-shrink: 0 !important;
    }
    
    /* Force toggle button icon size */
    button.dark-mode-toggle i[data-lucide="sun"],
    button.dark-mode-toggle i[data-lucide="moon"] {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Dark mode header icons */
    .dark header > div:last-child > div.w-8,
    .dark header > div:last-child > button,
    .dark .dark-mode-toggle {
        background: #27272a !important;
    }
    
    .dark header > div:last-child > div.w-8 i,
    .dark header > div:last-child > button i,
    .dark .dark-mode-toggle i {
        color: #a1a1aa !important;
    }
    
    /* Settings icon - accent color */
    header > div:last-child > div[title="Settings"] {
        background: color-mix(in srgb, var(--accent, #3b82f6) 15%, white) !important;
    }
    header > div:last-child > div[title="Settings"] i {
        color: var(--accent, #3b82f6) !important;
    }
    .dark header > div:last-child > div[title="Settings"] {
        background: color-mix(in srgb, var(--accent, #3b82f6) 20%, #18181b) !important;
    }
    .dark header > div:last-child > div[title="Settings"] i {
        color: var(--accent, #60a5fa) !important;
    }

    /* ========================================
       MOBILE NAVIGATION BAR - FLOATING PILL WITH ROUND CIRCLES
       ======================================== */
    .mobile-bottom-nav {
        position: fixed !important;
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        bottom: 20px !important;
        transform: translateX(-50%) !important;
        height: 70px !important;
        width: auto !important;
        max-width: calc(100% - 32px) !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 35px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 99 !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
        padding: 8px 16px !important;
        gap: 8px !important;
    }
    
    .dark .mobile-bottom-nav {
        background: #18181b !important;
        border: 1px solid #3f3f46 !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    }

    .mobile-nav-item {
        width: 52px !important;
        height: 52px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        color: #64748b !important;
        text-decoration: none !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        position: relative !important;
        border-radius: 50% !important;
        transition: all 0.2s ease !important;
        background: #f3f4f6 !important;
        flex-shrink: 0 !important;
    }
    
    .dark .mobile-nav-item {
        background: #27272a !important;
        color: #71717a !important;
    }

    .mobile-nav-item i {
        width: 20px !important;
        height: 20px !important;
        stroke-width: 1.8px !important;
        transition: all 0.2s ease !important;
        color: inherit !important;
    }

    .mobile-nav-item span {
        display: none !important; /* Hide labels for round circles */
    }

    /* Active state - accent color background */
    .mobile-nav-item.active {
        color: #ffffff !important;
        background: var(--accent, #2563eb) !important;
        box-shadow: 0 4px 12px color-mix(in srgb, var(--accent, #2563eb) 40%, transparent) !important;
    }

    .mobile-nav-item.active i {
        stroke-width: 2.2px !important;
        color: #ffffff !important;
    }
    
    .dark .mobile-nav-item.active {
        background: var(--accent, #3b82f6) !important;
    }
    
    .dark .mobile-nav-item.active i {
        color: #ffffff !important;
    }

    .mobile-nav-item:active {
        transform: scale(0.92) !important;
    }

    /* ========================================
       MAIN CONTENT AREA
       ======================================== */
    main {
        flex: 1 !important;
        margin-top: 56px !important; /* Header height */
        padding: 16px !important;
        padding-bottom: 120px !important; /* Space for floating nav */
        overflow-x: hidden !important;
        overflow-y: auto !important;
        min-height: calc(100vh - 56px) !important;
        background: #f8fafc !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .dark main {
        background: #09090b !important;
    }

    /* Remove any conflicting padding */
    main.p-6 {
        padding: 16px !important;
        padding-bottom: 120px !important;
    }

    /* ========================================
       FOOTER - Show above floating nav
       ======================================== */
    footer {
        display: flex !important;
        position: relative !important;
        width: 100% !important;
        background: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
        padding: 12px 16px !important;
        padding-bottom: 100px !important; /* Space for floating nav */
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        font-size: 10px !important;
        color: #64748b !important;
    }
    
    .dark footer {
        background: #09090b !important;
        border-top: 1px solid #27272a !important;
        color: #71717a !important;
    }
    
    footer > div {
        text-align: center !important;
    }

    footer > div {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    footer span,
    footer div {
        font-size: 11px !important;
        color: #94a3b8 !important;
    }

    /* ========================================
       PAGE HEADERS (Title + Action Button)
       ======================================== */
    main > div > div.flex.justify-between.items-center.mb-4,
    .flex.justify-between.items-center.mb-4 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    main > div > div.flex.justify-between.items-center.mb-4 > h2,
    .flex.justify-between.items-center.mb-4 > h2 {
        font-size: 20px !important;
        margin-bottom: 4px !important;
    }

    main > div > div.flex.justify-between.items-center.mb-4 > button,
    .flex.justify-between.items-center.mb-4 > button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Flex row containers on mobile */
    .flex.flex-col.sm\\:flex-row {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* ========================================
       CARDS / GLASS PANELS
       ======================================== */
    .glass-panel {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    /* ========================================
       GRID LAYOUTS
       ======================================== */
    .grid {
        display: grid !important;
        gap: 12px !important;
    }

    .grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid-cols-3,
    .grid-cols-4,
    .md\\:grid-cols-3,
    .md\\:grid-cols-4,
    .lg\\:grid-cols-3,
    .lg\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .lg\\:col-span-2 {
        grid-column: span 1 !important;
    }

    /* Single column for certain grids */
    .grid.grid-cols-1.md\\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* ========================================
       FORM INPUTS
       ======================================== */
    input,
    select,
    textarea,
    .compact-input {
        width: 100% !important;
        min-height: 44px !important;
        padding: 12px 14px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        border: 1px solid #d1d5db !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        color: #1f2937 !important;
        margin-bottom: 8px !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    /* Search input with icon - fix overlap */
    .relative input[type="text"],
    .relative .compact-input {
        padding-left: 42px !important;
    }

    .relative i[data-lucide="search"],
    .relative .search-icon {
        left: 14px !important;
        z-index: 10 !important;
        pointer-events: none !important;
    }

    textarea {
        min-height: 100px !important;
        height: auto !important;
        resize: vertical !important;
    }

    input:focus,
    select:focus,
    textarea:focus,
    .compact-input:focus {
        border-color: #2563eb !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
        outline: none !important;
    }

    label {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
        margin-bottom: 6px !important;
        display: block !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
    }

    /* Checkbox inputs */
    input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        cursor: pointer !important;
        -webkit-appearance: checkbox !important;
        appearance: checkbox !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Ensure checkbox labels are clickable */
    label:has(input[type="checkbox"]) {
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Date inputs */
    input[type="date"],
    input[type="month"] {
        min-height: 44px !important;
    }

    /* ========================================
       BUTTONS
       ======================================== */
    button,
    .btn {
        min-height: 44px !important;
        padding: 10px 16px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: transform 0.1s, background-color 0.2s !important;
    }

    button:active {
        transform: scale(0.97) !important;
    }

    /* Primary buttons */
    .bg-black,
    .bg-blue-600,
    button.bg-black,
    button.bg-blue-600 {
        background: #2563eb !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25) !important;
    }

    .bg-black:active,
    .bg-blue-600:active {
        background: #1d4ed8 !important;
    }

    /* Secondary buttons */
    button.bg-white,
    button.bg-gray-100 {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #475569 !important;
    }

    /* Small action buttons */
    button.p-1,
    button.text-blue-600,
    button.text-gray-400 {
        min-height: 36px !important;
        min-width: 36px !important;
        padding: 6px !important;
    }

    /* ========================================
       TABLES - Hidden on mobile for list views
       ======================================== */
    .table-container,
    .overflow-x-auto {
        border-radius: 12px !important;
        border: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        margin-bottom: 12px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    table {
        width: 100% !important;
        font-size: 13px !important;
        border-collapse: collapse !important;
    }

    .dense-table {
        min-width: 500px !important;
    }

    th {
        background: #f8fafc !important;
        color: #64748b !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        font-size: 10px !important;
        padding: 10px 12px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        white-space: nowrap !important;
    }

    td {
        padding: 10px 12px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        color: #374151 !important;
        vertical-align: middle !important;
    }

    tr:last-child td {
        border-bottom: none !important;
    }

    /* Hide desktop table, show mobile cards */
    .desktop-table {
        display: none !important;
    }

    .mobile-card-list {
        display: block !important;
    }

    /* ========================================
       MOBILE CARD LIST STYLES
       ======================================== */
    .mobile-card-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .mobile-list-card {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    }

    .mobile-card-main {
        display: flex !important;
        align-items: center !important;
        padding: 14px 16px !important;
        gap: 12px !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .mobile-card-main:active {
        background: #f8fafc !important;
    }

    .mobile-card-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .mobile-card-icon i {
        width: 20px !important;
        height: 20px !important;
        stroke-width: 1.8px !important;
    }

    .mobile-card-icon.blue {
        background: #eff6ff !important;
        color: #2563eb !important;
    }

    .mobile-card-icon.green {
        background: #f0fdf4 !important;
        color: #16a34a !important;
    }

    .mobile-card-icon.red {
        background: #fef2f2 !important;
        color: #dc2626 !important;
    }

    .mobile-card-icon.yellow {
        background: #fefce8 !important;
        color: #ca8a04 !important;
    }

    .mobile-card-icon.gray {
        background: #f3f4f6 !important;
        color: #6b7280 !important;
    }

    .mobile-card-icon.amber {
        background: #fffbeb !important;
        color: #d97706 !important;
    }

    .mobile-card-icon.purple {
        background: #faf5ff !important;
        color: #9333ea !important;
    }

    .mobile-card-content {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .mobile-card-title {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #111827 !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .mobile-card-subtitle {
        font-size: 12px !important;
        color: #6b7280 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .mobile-card-amount {
        text-align: right !important;
        flex-shrink: 0 !important;
    }

    .mobile-card-amount .amount {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #111827 !important;
        font-family: 'SF Mono', 'Monaco', monospace !important;
    }

    .mobile-card-amount .amount.green {
        color: #16a34a !important;
    }

    .mobile-card-amount .amount.red {
        color: #dc2626 !important;
    }

    .mobile-card-amount .status {
        font-size: 10px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        display: inline-block !important;
        margin-top: 4px !important;
    }

    .mobile-card-amount .status.paid {
        background: #dcfce7 !important;
        color: #166534 !important;
    }

    .mobile-card-amount .status.pending {
        background: #fef3c7 !important;
        color: #92400e !important;
    }

    .mobile-card-amount .status.partial {
        background: #fef9c3 !important;
        color: #854d0e !important;
    }

    .mobile-card-amount .status.draft {
        background: #f3f4f6 !important;
        color: #6b7280 !important;
    }

    .mobile-card-expand-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 8px !important;
        background: #f3f4f6 !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        transition: transform 0.2s ease !important;
    }

    .mobile-card-expand-btn i {
        width: 18px !important;
        height: 18px !important;
        color: #6b7280 !important;
        transition: transform 0.2s ease !important;
    }

    .mobile-card-expand-btn.expanded i {
        transform: rotate(180deg) !important;
    }

    .mobile-card-details {
        display: none !important;
        background: #f8fafc !important;
        border-top: 1px solid #e2e8f0 !important;
        padding: 14px 16px !important;
    }

    .mobile-card-details.show {
        display: block !important;
    }

    .mobile-card-detail-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    .mobile-card-detail-row:last-child {
        border-bottom: none !important;
    }

    .mobile-card-detail-label {
        font-size: 12px !important;
        color: #6b7280 !important;
        font-weight: 500 !important;
    }

    .mobile-card-detail-value {
        font-size: 13px !important;
        color: #111827 !important;
        font-weight: 500 !important;
        text-align: right !important;
    }

    .mobile-card-actions {
        display: flex !important;
        gap: 8px !important;
        margin-top: 12px !important;
        padding-top: 12px !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    .mobile-card-actions button {
        flex: 1 !important;
        min-height: 40px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .mobile-card-actions button i {
        width: 16px !important;
        height: 16px !important;
    }

    .mobile-card-actions .btn-primary {
        background: #2563eb !important;
        color: #ffffff !important;
        border: none !important;
    }

    .mobile-card-actions .btn-secondary {
        background: #ffffff !important;
        color: #374151 !important;
        border: 1px solid #d1d5db !important;
    }

    .mobile-card-actions .btn-danger {
        background: #fef2f2 !important;
        color: #dc2626 !important;
        border: 1px solid #fecaca !important;
    }

    /* Empty state for mobile cards */
    .mobile-card-empty {
        text-align: center !important;
        padding: 40px 20px !important;
        color: #9ca3af !important;
    }

    .mobile-card-empty i {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 12px !important;
        color: #d1d5db !important;
    }

    .mobile-card-empty p {
        font-size: 14px !important;
    }

    /* ========================================
       MOBILE MORE MENU (Bottom Sheet)
       ======================================== */
    .mobile-more-menu {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 200 !important;
        display: none !important;
        align-items: flex-end !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    .mobile-more-menu.show {
        display: flex !important;
    }

    .mobile-more-content {
        background: #ffffff !important;
        border-radius: 20px 20px 0 0 !important;
        width: 100% !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        animation: slideUp 0.3s ease-out !important;
        padding-bottom: env(safe-area-inset-bottom, 20px) !important;
    }

    @keyframes slideUp {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .mobile-more-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 16px 20px !important;
        border-bottom: 1px solid #e5e7eb !important;
        position: sticky !important;
        top: 0 !important;
        background: #ffffff !important;
    }

    .mobile-more-header h3 {
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #111827 !important;
        margin: 0 !important;
    }

    .mobile-more-close {
        width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        border-radius: 50% !important;
        background: #f3f4f6 !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        padding: 0 !important;
    }

    .mobile-more-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
        padding: 16px 20px !important;
    }

    .mobile-more-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 16px 8px !important;
        border-radius: 12px !important;
        background: #f9fafb !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        min-height: auto !important;
    }

    .mobile-more-item:active {
        transform: scale(0.95) !important;
        background: #f3f4f6 !important;
    }

    .mobile-more-item.active {
        background: #eff6ff !important;
    }

    .mobile-more-item i {
        width: 26px !important;
        height: 26px !important;
        color: #6b7280 !important;
        stroke-width: 1.8px !important;
    }

    .mobile-more-item.active i {
        color: #2563eb !important;
        stroke-width: 2.2px !important;
    }

    .mobile-more-item span {
        font-size: 11px !important;
        font-weight: 500 !important;
        color: #374151 !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }

    /* ========================================
       KPI CARDS
       ======================================== */
    .kpi-compact {
        padding: 12px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .kpi-compact > div:first-child {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .kpi-compact p,
    .kpi-compact > div:first-child > p {
        font-size: 10px !important;
        color: #6b7280 !important;
        margin-bottom: 2px !important;
        text-transform: uppercase !important;
    }

    .kpi-compact h4,
    .kpi-compact > div:first-child > h4 {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #111827 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .kpi-compact > div:last-child {
        flex-shrink: 0 !important;
    }

    /* ========================================
       SETTINGS PAGE
       ======================================== */
    .glass-panel.flex.min-h-\[500px\] {
        flex-direction: column !important;
        min-height: auto !important;
    }

    .glass-panel .w-48 {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        padding: 12px !important;
        gap: 8px !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .glass-panel .w-48 button {
        width: auto !important;
        flex-shrink: 0 !important;
        border-radius: 20px !important;
        text-align: center !important;
        padding: 8px 16px !important;
        min-height: 36px !important;
    }

    .glass-panel .flex-1.p-8 {
        padding: 16px !important;
    }

    /* ========================================
       CHARTS
       ======================================== */
    canvas {
        max-height: 200px !important;
        width: 100% !important;
    }

    .glass-panel.h-\[300px\],
    .h-\[300px\] {
        height: auto !important;
        min-height: 250px !important;
    }

    /* ========================================
       MODALS
       ======================================== */
    #modal-overlay {
        padding: 0 !important;
        align-items: flex-end !important;
        z-index: 9999 !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
    }

    #modal-content {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        position: relative !important;
        z-index: 10000 !important;
    }

    #modal-content > div {
        padding: 16px !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Modal header */
    #modal-content h2 {
        font-size: 16px !important;
    }

    /* Modal textarea */
    #modal-content textarea {
        font-size: 14px !important;
        min-height: 150px !important;
    }

    /* Modal form grids */
    #modal-content .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    #modal-content .grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* ========================================
       INVOICE/ESTIMATE VIEW
       ======================================== */
    .max-w-2xl,
    .max-w-3xl,
    .max-w-4xl,
    .max-w-5xl {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Action buttons row */
    .flex.gap-2.flex-wrap {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .flex.gap-2.flex-wrap > button,
    .flex.gap-2.flex-wrap > a {
        flex: 1 1 auto !important;
        min-width: 100px !important;
    }

    /* ========================================
       INVOICE/ESTIMATE EDITOR - MOBILE
       ======================================== */
    
    /* Doc Editor container */
    .doc-editor {
        padding: 0 !important;
    }

    /* Doc Editor header */
    .doc-editor > .flex.flex-col.sm\\:flex-row {
        gap: 12px !important;
    }

    .doc-editor > .flex.flex-col.sm\\:flex-row h2 {
        text-align: center !important;
        font-size: 16px !important;
    }

    .doc-editor > .flex.flex-col.sm\\:flex-row .flex.gap-2 {
        width: 100% !important;
    }

    .doc-editor > .flex.flex-col.sm\\:flex-row .flex.gap-2 button {
        flex: 1 !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
    }

    /* Editor panel */
    .doc-editor .glass-panel {
        border-radius: 12px !important;
    }

    /* Editor content padding */
    .doc-editor .flex-1.overflow-y-auto {
        padding: 12px !important;
    }

    /* Company header in editor */
    .doc-editor .flex.flex-col.sm\\:flex-row.justify-between.items-start {
        gap: 12px !important;
        padding-bottom: 12px !important;
        margin-bottom: 12px !important;
    }

    .doc-editor .flex.flex-col.sm\\:flex-row.justify-between.items-start h1 {
        font-size: 16px !important;
    }

    /* Invoice number input */
    #doc-number {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }

    /* Bill To / Date section */
    .doc-editor .grid.grid-cols-1.md\\:grid-cols-3 {
        gap: 12px !important;
        padding: 12px !important;
        margin-bottom: 12px !important;
    }

    /* Client select and date inputs */
    #doc-client,
    #doc-date,
    #doc-due {
        min-height: 44px !important;
        font-size: 14px !important;
    }

    /* Currency selector */
    #doc-currency {
        min-height: 44px !important;
    }

    /* Items table container */
    .doc-editor .overflow-x-auto.-mx-4.px-4 {
        margin-left: -12px !important;
        margin-right: -12px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Items table */
    .doc-editor table.dense-table {
        min-width: 480px !important;
    }

    .doc-editor table.dense-table th {
        padding: 10px 8px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    .doc-editor table.dense-table td {
        padding: 8px 6px !important;
    }

    /* Item inputs */
    #doc-items-body input {
        min-height: 40px !important;
        font-size: 14px !important;
        padding: 8px !important;
    }

    #doc-items-body .item-desc {
        min-width: 140px !important;
    }

    #doc-items-body .item-qty {
        width: 50px !important;
    }

    #doc-items-body .item-price {
        width: 70px !important;
    }

    /* Product suggestions dropdown */
    #doc-items-body [id^="suggestions-"] {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        max-height: 50vh !important;
        z-index: 1000 !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
    }

    #doc-items-body [id^="suggestions-"] > div {
        padding: 12px !important;
    }

    /* Delete item button */
    #doc-items-body button {
        padding: 8px !important;
    }

    /* Add line item button */
    .doc-editor button[onclick="App.addInvoiceItem()"] {
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 14px !important;
    }

    /* Totals section */
    .doc-editor .w-full.sm\\:w-80 {
        padding: 12px !important;
    }

    /* Discount and Tax inputs */
    #doc-discount-type,
    #doc-discount-value,
    #doc-tax-rate {
        min-height: 40px !important;
        font-size: 14px !important;
    }

    #doc-discount-type {
        width: 60px !important;
    }

    #doc-discount-value {
        width: 80px !important;
    }

    #doc-tax-rate {
        width: 60px !important;
    }

    /* Total display */
    .doc-editor .text-base.sm\\:text-lg.font-bold {
        font-size: 18px !important;
    }

    /* Notes textarea */
    #doc-notes {
        min-height: 100px !important;
        font-size: 14px !important;
    }

    /* Terms checkboxes */
    .doc-editor .mt-4.flex.flex-col.gap-3 label {
        padding: 14px !important;
    }

    .doc-editor .mt-4.flex.flex-col.gap-3 label input {
        width: 22px !important;
        height: 22px !important;
    }

    .doc-editor .mt-4.flex.flex-col.gap-3 label span {
        font-size: 14px !important;
    }

    /* ========================================
       INVOICE/ESTIMATE VIEWER - MOBILE
       ======================================== */
    
    /* Viewer header buttons */
    .invoice-view .flex.gap-2.flex-wrap {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .invoice-view .flex.gap-2.flex-wrap > button,
    .invoice-view .flex.gap-2.flex-wrap > a {
        min-width: auto !important;
        font-size: 11px !important;
        padding: 8px 10px !important;
        justify-content: center !important;
    }

    .invoice-view .flex.gap-2.flex-wrap > button span,
    .invoice-view .flex.gap-2.flex-wrap > a span {
        display: none !important;
    }

    /* Print area / Invoice PDF View */
    #print-node {
        padding: 12px !important;
    }

    /* Document header in viewer - KEEP side by side layout */
    #print-node .flex.justify-between.border-b {
        flex-direction: row !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    /* Company details - left side */
    #print-node .flex.justify-between.border-b > .flex.items-start.gap-3 {
        flex: 1 !important;
        min-width: 0 !important;
    }

    #print-node .flex.justify-between.border-b > .flex.items-start.gap-3 img {
        width: 32px !important;
        height: 32px !important;
    }

    #print-node .flex.justify-between.border-b > .flex.items-start.gap-3 h1 {
        font-size: 12px !important;
    }

    #print-node .flex.justify-between.border-b > .flex.items-start.gap-3 [class*="text-[11px]"] {
        font-size: 9px !important;
    }

    /* Invoice heading - right side */
    #print-node .flex.justify-between.border-b > div:last-child {
        text-align: right !important;
        flex-shrink: 0 !important;
    }

    #print-node .flex.justify-between.border-b > div:last-child h2 {
        font-size: 12px !important;
    }

    #print-node .flex.justify-between.border-b > div:last-child .text-xl {
        font-size: 14px !important;
    }

    /* Billed To section - KEEP side by side */
    #print-node .grid.grid-cols-2.gap-8 {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    #print-node .grid.grid-cols-2.gap-8 > div:first-child {
        text-align: left !important;
    }

    #print-node .grid.grid-cols-2.gap-8 > div:last-child {
        text-align: right !important;
    }

    #print-node .grid.grid-cols-2.gap-8 .text-sm {
        font-size: 11px !important;
    }

    #print-node .grid.grid-cols-2.gap-8 .text-xs {
        font-size: 9px !important;
    }

    /* Items table in viewer */
    #print-node table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #print-node table thead,
    #print-node table tbody {
        display: table !important;
        width: 100% !important;
        min-width: 350px !important;
    }

    #print-node table th,
    #print-node table td {
        font-size: 10px !important;
        padding: 6px 4px !important;
    }

    /* Totals in viewer */
    #print-node .flex.justify-end > table {
        width: 60% !important;
    }

    #print-node .flex.justify-end > table td {
        font-size: 10px !important;
    }

    /* Payment info section - ALWAYS side by side */
    #payment-info-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    #payment-info-grid > div {
        padding: 8px !important;
        min-width: 0 !important;
    }

    #payment-info-grid h5 {
        font-size: 10px !important;
        margin-bottom: 6px !important;
    }

    #payment-info-grid .text-sm {
        font-size: 9px !important;
    }

    #payment-info-grid .space-y-2 > div {
        flex-direction: column !important;
        gap: 2px !important;
    }

    #payment-info-grid .font-mono {
        font-size: 8px !important;
        word-break: break-all !important;
    }

    /* UPI QR code smaller on mobile */
    #payment-info-grid .w-20.h-20 {
        width: 40px !important;
        height: 40px !important;
    }

    /* UPI section layout */
    #payment-info-grid .flex.items-start.gap-4 {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Payment receipt view */
    #payment-receipt {
        padding: 16px !important;
    }

    #payment-receipt .grid.grid-cols-2.gap-8 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    #payment-receipt .grid.grid-cols-2.gap-8 > div:last-child {
        text-align: left !important;
    }

    #payment-receipt .grid.grid-cols-2.gap-8 > div:last-child .flex.justify-between {
        justify-content: flex-start !important;
        gap: 12px !important;
    }

    /* Create Payment form */
    .max-w-2xl .glass-panel.p-6 {
        padding: 16px !important;
    }

    .max-w-2xl .glass-panel.p-6 h2 {
        font-size: 16px !important;
        margin-bottom: 16px !important;
    }

    /* ========================================
       REPORTS PAGE
       ======================================== */
    .grid.grid-cols-1.md\\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Reports header - keep calendar and CSV button on same line */
    .flex.justify-between.items-center.gap-3.flex-wrap {
        flex-wrap: nowrap !important;
    }

    .flex.justify-between.items-center.gap-3.flex-wrap > .flex.gap-2.items-center {
        flex-shrink: 0 !important;
    }

    .flex.justify-between.items-center.gap-3.flex-wrap > .flex.gap-2.items-center input[type="month"] {
        width: auto !important;
        min-width: 120px !important;
        max-width: 140px !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
    }

    /* ========================================
       TOAST NOTIFICATIONS
       ======================================== */
    #toast {
        left: 16px !important;
        right: 16px !important;
        bottom: 80px !important;
        max-width: none !important;
    }

    /* ========================================
       UTILITY CLASSES
       ======================================== */
    .hidden-mobile {
        display: none !important;
    }

    .w-80 {
        width: 100% !important;
    }

    .space-y-6 > * + * {
        margin-top: 16px !important;
    }

    .space-y-4 > * + * {
        margin-top: 12px !important;
    }

    /* Fix flex containers */
    .flex.flex-1.flex-col.h-full {
        height: auto !important;
        min-height: calc(100vh - 116px) !important;
    }

    /* Overflow handling */
    .overflow-hidden {
        overflow: visible !important;
    }

    .overflow-y-auto {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ========================================
       LOGIN PAGE (Fullscreen)
       ======================================== */
    #app-container.fullscreen {
        width: 100% !important;
        height: 100vh !important;
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 16px !important;
    }

    #app-container.fullscreen #app {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Login form container */
    #app-container.fullscreen .bg-white.p-8 {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        padding: 24px !important;
    }

    /* ========================================
       SAFE AREA INSETS (for notched devices)
       ======================================== */
    @supports (padding-top: env(safe-area-inset-top)) {
        header {
            padding-top: env(safe-area-inset-top) !important;
            height: calc(56px + env(safe-area-inset-top)) !important;
        }

        .mobile-bottom-nav {
            bottom: calc(20px + env(safe-area-inset-bottom)) !important;
            top: auto !important;
        }

        main {
            margin-top: calc(56px + env(safe-area-inset-top)) !important;
        }

        footer {
            padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        }
    }

}

/* ========================================
   PRINT STYLES - Hide mobile nav
   ======================================== */
@media print {
    .mobile-bottom-nav,
    .mobile-more-menu {
        display: none !important;
    }
    
    /* QR Code - Larger size for better scanning in PDF */
    .qr-code-container {
        width: 160px !important;
        height: 160px !important;
        min-width: 160px !important;
        min-height: 160px !important;
        padding: 8px !important;
        border: 2px solid #d1d5db !important;
        border-radius: 8px !important;
        background: #ffffff !important;
    }
    
    .qr-code-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}

/* ========================================
   QR CODE STYLES - Better visibility
   ======================================== */
.qr-code-container {
    width: 160px;
    height: 160px;
    min-width: 160px;
    min-height: 160px;
    padding: 8px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-code-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================
   DARK MODE STYLES - Professional Dark Theme
   Complete UI contrast fix for all elements
   Using Zinc color palette for true dark mode
   ============================================ */

/* ========== BASE DARK MODE ========== */

/* Dark mode body and backgrounds */
.dark body {
    background-color: #09090b !important;
    color: #fafafa !important;
}

/* Dark mode container - DESKTOP */
.dark #app-container {
    background: #09090b !important;
    border-color: #27272a !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

/* Dark mode main content area - CRITICAL FIX */
.dark main {
    background: #09090b !important;
}

/* Dark mode sidebar */
.dark .glass-sidebar {
    background: #09090b !important;
    border-color: #27272a !important;
}

/* Dark mode header */
.dark header {
    background: #18181b !important;
    border-color: #27272a !important;
}

/* Dark mode footer */
.dark footer {
    background: #18181b !important;
    border-color: #27272a !important;
}

.dark footer span,
.dark footer div {
    color: #71717a !important;
}

/* Dark mode glass panels */
.dark .glass-panel {
    background: #18181b !important;
    border-color: #27272a !important;
}

/* ========== TEXT COLORS ========== */

.dark .text-gray-900,
.dark .text-gray-800 {
    color: #fafafa !important;
}

.dark .text-gray-700 {
    color: #e4e4e7 !important;
}

.dark .text-gray-600 {
    color: #a1a1aa !important;
}

.dark .text-gray-500 {
    color: #71717a !important;
}

.dark .text-gray-400 {
    color: #a1a1aa !important;
}

.dark .text-gray-300 {
    color: #71717a !important;
}

/* Dark mode heading colors */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: #fafafa !important;
}

.dark .font-heading {
    color: #fafafa !important;
}

/* ========== BACKGROUNDS ========== */

.dark .bg-white {
    background-color: #18181b !important;
}

.dark .bg-gray-50 {
    background-color: #1f1f23 !important;
}

.dark .bg-gray-100 {
    background-color: #27272a !important;
}

.dark .bg-gray-200 {
    background-color: #3f3f46 !important;
}

/* ========== BORDERS & DIVIDERS ========== */

.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300 {
    border-color: #3f3f46 !important;
}

.dark hr {
    border-color: #3f3f46 !important;
}

.dark .divide-gray-100 > * + *,
.dark .divide-gray-200 > * + * {
    border-color: #3f3f46 !important;
}

.dark .border-b {
    border-color: #3f3f46 !important;
}

.dark .border-t {
    border-color: #3f3f46 !important;
}

/* ========== FORM INPUTS ========== */

.dark .compact-input,
.dark input,
.dark select,
.dark textarea {
    background-color: #27272a !important;
    border-color: #3f3f46 !important;
    color: #fafafa !important;
}

.dark .compact-input:focus,
.dark input:focus,
.dark select:focus,
.dark textarea:focus {
    background-color: #18181b !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

.dark .compact-input::placeholder,
.dark input::placeholder,
.dark textarea::placeholder {
    color: #71717a !important;
}

.dark select option {
    background-color: #27272a !important;
    color: #fafafa !important;
}

.dark label {
    color: #a1a1aa !important;
}

.dark input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* ========== TABLES ========== */

.dark table {
    background: #18181b !important;
}

.dark th {
    background: #1f1f23 !important;
    color: #a1a1aa !important;
    border-color: #3f3f46 !important;
}

.dark td {
    color: #e4e4e7 !important;
    border-color: #27272a !important;
}

.dark .dense-table th {
    background: #1f1f23 !important;
    color: #a1a1aa !important;
    border-color: #3f3f46 !important;
}

.dark .dense-table td {
    color: #e4e4e7 !important;
    border-color: #27272a !important;
}

.dark .dense-table tr:hover td {
    background: #27272a !important;
}

.dark tr:hover td {
    background: #27272a !important;
}

/* ========== HOVER STATES - CRITICAL FIX ========== */

.dark .hover\:bg-gray-50:hover {
    background-color: #27272a !important;
}

.dark .hover\:bg-gray-100:hover {
    background-color: #3f3f46 !important;
}

.dark .hover\:bg-gray-200:hover {
    background-color: #3f3f46 !important;
}

.dark .hover\:bg-white:hover {
    background-color: #27272a !important;
}

.dark .hover\:border-gray-100:hover {
    border-color: #52525b !important;
}

.dark .bg-gray-100:hover {
    background-color: #3f3f46 !important;
}

/* ========== BUTTONS ========== */

.dark button.bg-white,
.dark button.bg-gray-100,
.dark .btn-secondary {
    background: #27272a !important;
    border-color: #3f3f46 !important;
    color: #e4e4e7 !important;
}

.dark button.bg-white:hover,
.dark button.bg-gray-100:hover,
.dark .btn-secondary:hover {
    background: #3f3f46 !important;
}

.dark .action-btn {
    background: #18181b !important;
    border-color: #27272a !important;
}

.dark .action-btn:hover {
    background: #27272a !important;
}

/* ========== MODALS ========== */

.dark #modal-content {
    background: #18181b !important;
    color: #fafafa !important;
    border: 1px solid #3f3f46 !important;
}

.dark #modal-overlay {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* ========== TOAST ========== */

.dark #toast {
    background: #27272a !important;
    color: #fafafa !important;
    border: 1px solid #3f3f46 !important;
}

/* ========== MOBILE CARDS - COMPREHENSIVE FIX ========== */

.dark .mobile-list-card {
    background: #18181b !important;
    border-color: #3f3f46 !important;
}

.dark .mobile-card-main {
    background: #18181b !important;
}

.dark .mobile-card-main:active {
    background: #27272a !important;
}

.dark .mobile-card-title {
    color: #fafafa !important;
}

.dark .mobile-card-subtitle {
    color: #a1a1aa !important;
}

.dark .mobile-card-amount .amount {
    color: #fafafa !important;
}

.dark .mobile-card-expand-btn {
    background: #27272a !important;
    border-color: #3f3f46 !important;
}

.dark .mobile-card-expand-btn i {
    color: #a1a1aa !important;
}

.dark .mobile-card-details {
    background: #1f1f23 !important;
    border-color: #3f3f46 !important;
}

.dark .mobile-card-detail-row {
    border-color: #27272a !important;
}

.dark .mobile-card-detail-label {
    color: #71717a !important;
}

.dark .mobile-card-detail-value {
    color: #e4e4e7 !important;
}

/* Mobile card action buttons - CRITICAL FIX */
.dark .mobile-card-actions {
    border-color: #3f3f46 !important;
}

.dark .mobile-card-actions .btn-primary {
    background: var(--accent, #2563eb) !important;
    color: #ffffff !important;
}

.mobile-card-actions .btn-primary {
    background: var(--accent, #2563eb) !important;
}

.dark .mobile-card-actions .btn-secondary {
    background: #27272a !important;
    color: #e4e4e7 !important;
    border-color: #3f3f46 !important;
}

.dark .mobile-card-actions .btn-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Mobile card icon backgrounds in dark mode */
.dark .mobile-card-icon.blue {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}

.dark .mobile-card-icon.green {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
}

.dark .mobile-card-icon.red {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

.dark .mobile-card-icon.yellow {
    background: rgba(234, 179, 8, 0.15) !important;
    color: #facc15 !important;
}

.dark .mobile-card-icon.gray {
    background: rgba(113, 113, 122, 0.15) !important;
    color: #a1a1aa !important;
}

.dark .mobile-card-icon.amber {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
}

.dark .mobile-card-icon.purple {
    background: rgba(168, 85, 247, 0.15) !important;
    color: #c084fc !important;
}

/* ========== MOBILE NAVIGATION ========== */

/* Dark mode nav styles moved to mobile media query */

/* ========== MOBILE NAV BORDER SHINE ANIMATION ========== */
@keyframes borderShine {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Border shine animation removed - using filled circles for mobile nav now */

/* ========== MOBILE MORE MENU ========== */

.dark .mobile-more-menu {
    background: rgba(0, 0, 0, 0.8) !important;
}

.dark .mobile-more-content {
    background: #18181b !important;
    border-color: #3f3f46 !important;
}

.dark .mobile-more-header {
    background: #18181b !important;
    border-color: #3f3f46 !important;
}

.dark .mobile-more-header h3 {
    color: #fafafa !important;
}

.dark .mobile-more-close {
    background: #27272a !important;
}

.dark .mobile-more-close i {
    color: #a1a1aa !important;
}

.dark .mobile-more-item {
    background: #1f1f23 !important;
    color: #e4e4e7 !important;
}

.dark .mobile-more-item:active {
    background: #27272a !important;
}

.dark .mobile-more-item.active {
    background: color-mix(in srgb, var(--accent, #3b82f6) 15%, transparent) !important;
}

.dark .mobile-more-item i {
    color: #a1a1aa !important;
}

.dark .mobile-more-item.active i {
    color: var(--accent, #3b82f6) !important;
}

.mobile-more-item.active {
    background: color-mix(in srgb, var(--accent, #3b82f6) 10%, white) !important;
}

.mobile-more-item.active i {
    color: var(--accent, #3b82f6) !important;
}

.mobile-more-item.active span {
    color: var(--accent, #3b82f6) !important;
    font-weight: 600 !important;
}

.dark .mobile-more-item span {
    color: #e4e4e7 !important;
}

/* Logout item in mobile more menu */
.mobile-more-item.logout-item {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

.mobile-more-item.logout-item i {
    color: #ef4444 !important;
}

.mobile-more-item.logout-item span {
    color: #ef4444 !important;
}

.mobile-more-item.logout-item:active {
    background: rgba(239, 68, 68, 0.2) !important;
}

.dark .mobile-more-item.logout-item {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.dark .mobile-more-item.logout-item i {
    color: #f87171 !important;
}

.dark .mobile-more-item.logout-item span {
    color: #f87171 !important;
}

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

.dark ::-webkit-scrollbar-track {
    background: #18181b !important;
}

.dark ::-webkit-scrollbar-thumb {
    background: #3f3f46 !important;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #52525b !important;
}

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

.dark .kpi-compact {
    background: #18181b !important;
    border-color: #3f3f46 !important;
}

.dark .kpi-compact p {
    color: #a1a1aa !important;
}

.dark .kpi-compact h4 {
    color: #ffffff !important;
}

/* KPI card values - ensure visibility */
.dark .kpi-compact .text-gray-900,
.dark .kpi-compact .text-gray-800,
.dark .kpi-compact .font-bold {
    color: #ffffff !important;
}

.dark .kpi-compact .text-gray-400,
.dark .kpi-compact .text-gray-500 {
    color: #a1a1aa !important;
}

/* KPI icon containers */
.dark .kpi-compact .bg-gray-50 {
    background: #27272a !important;
}

.dark .kpi-compact .bg-opacity-10 {
    background: rgba(59, 130, 246, 0.15) !important;
}

/* ========== STATUS BADGES ========== */

.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.15) !important; }
.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; }
.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; }
.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.15) !important; }
.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.15) !important; }
.dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.15) !important; }
.dark .bg-gray-50 { background-color: #1f1f23 !important; }

.dark .text-green-600 { color: #4ade80 !important; }
.dark .text-green-700 { color: #4ade80 !important; }
.dark .text-green-800 { color: #4ade80 !important; }
.dark .text-red-600 { color: #f87171 !important; }
.dark .text-red-700 { color: #f87171 !important; }
.dark .text-blue-600 { color: #60a5fa !important; }
.dark .text-blue-700 { color: #60a5fa !important; }
.dark .text-yellow-600 { color: #facc15 !important; }
.dark .text-yellow-700 { color: #facc15 !important; }
.dark .text-amber-600 { color: #fbbf24 !important; }
.dark .text-purple-600 { color: #c084fc !important; }

/* ========== PAYMENT METHOD CARDS ========== */

.dark .payment-method-option > div {
    background: #27272a !important;
    border-color: #3f3f46 !important;
}

.dark .payment-method-option > div:hover {
    border-color: #52525b !important;
    background: #3f3f46 !important;
}

.dark .payment-method-option .text-gray-700 {
    color: #e4e4e7 !important;
}

.dark .payment-method-option input:checked + div {
    background: rgba(34, 197, 94, 0.2) !important;
}

.dark .payment-method-option input[value="upi"]:checked + div {
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: #22c55e !important;
}

.dark .payment-method-option input[value="bank_transfer"]:checked + div {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: #3b82f6 !important;
}

.dark .payment-method-option input[value="cheque"]:checked + div {
    background: rgba(168, 85, 247, 0.2) !important;
    border-color: #a855f7 !important;
}

.dark .payment-method-option input[value="cash"]:checked + div {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: #f59e0b !important;
}

/* ========== CHARTS ========== */

.dark canvas {
    filter: brightness(0.95) contrast(1.05);
}

/* ========== SIDEBAR LINKS ========== */

.dark .sidebar-link {
    color: #71717a !important;
}

.dark .sidebar-link:hover {
    color: #a1a1aa !important;
    background: #27272a !important;
}

.dark .sidebar-link.active {
    background: #27272a !important;
}

.dark .sidebar-link.active i {
    color: #3b82f6 !important;
}

/* ========== LINKS ========== */

.dark a {
    color: #60a5fa !important;
}

.dark a:hover {
    color: #93c5fd !important;
}

/* ========== LOGIN SCREEN ========== */

.dark #app-container.fullscreen {
    background: #09090b !important;
}

.dark #login-form {
    background: #18181b !important;
}

/* ========== INVOICE/DOCUMENT VIEW ========== */

.dark #print-node {
    background: #18181b !important;
    color: #fafafa !important;
}

.dark #payment-receipt {
    background: #18181b !important;
}

/* ========== OVERLAY ========== */

.dark .mobile-overlay.show {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* ========== ADDITIONAL ELEMENTS ========== */

/* Table container */
.dark .table-container,
.dark .overflow-x-auto {
    background: #18181b !important;
    border-color: #3f3f46 !important;
}

/* Empty states */
.dark .mobile-card-empty {
    color: #71717a !important;
}

.dark .mobile-card-empty i {
    color: #52525b !important;
}

/* ========== LOGIN FORM MOBILE FIXES ========== */
@media (max-width: 768px) {
    #login-form .relative i[data-lucide] {
        left: 12px !important;
        width: 16px !important;
        height: 16px !important;
    }
    
    #login-form input[type="email"],
    #login-form input[type="password"] {
        padding-left: 40px !important;
        font-size: 16px !important;
    }
}

/* ========== MOBILE DARK MODE ADJUSTMENTS ========== */
@media (max-width: 768px) {
    .dark body {
        background-color: #09090b !important;
    }
    
    .dark #app-container {
        background: #09090b !important;
    }
    
    .dark main {
        background: #09090b !important;
    }
    
    .dark header {
        background: #18181b !important;
        border-color: #3f3f46 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }
    
    .dark .mobile-bottom-nav {
        background: #18181b !important;
        border-color: #3f3f46 !important;
        box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2) !important;
    }
    
    .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6, .dark .font-heading {
        color: #fafafa !important;
    }
    
    .dark .mobile-card-icon {
        opacity: 0.95;
    }
    
    /* Header icons - all same style */
    .dark header button[title="Toggle Dark Mode"],
    .dark header div[title="Clear Cache"] {
        background: #27272a !important;
        border: none !important;
    }
    
    .dark header button[title="Toggle Dark Mode"] i,
    .dark header div[title="Clear Cache"] i {
        color: #a1a1aa !important;
    }
    
    /* Glass panel in mobile */
    .dark .glass-panel {
        background: #18181b !important;
        border-color: #3f3f46 !important;
    }
    
    /* Footer in mobile */
    .dark footer {
        background: #18181b !important;
        border-color: #3f3f46 !important;
    }
}