/**
 * ReconcileIQ Tool - Professional Redesign
 * "Mission Control" Theme for Bank Reconciliation
 *
 * Design Philosophy:
 * - Clean, authoritative interface that builds trust
 * - High contrast for readability and accessibility
 * - Monospace numerals for financial precision
 * - Sharp geometry with purposeful spacing
 * - Blue as primary brand color (maintained)
 * - Subtle animations that feel professional, not playful
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
    /* Primary Blue - ReconcileIQ Brand */
    --riq-blue-50: #eff6ff;
    --riq-blue-100: #dbeafe;
    --riq-blue-200: #bfdbfe;
    --riq-blue-300: #93c5fd;
    --riq-blue-400: #60a5fa;
    --riq-blue-500: #3b82f6;
    --riq-blue-600: #2563eb;
    --riq-blue-700: #1d4ed8;
    --riq-blue-800: #1e40af;
    --riq-blue-900: #1e3a8a;

    /* Neutral Palette */
    --riq-gray-50: #f8fafc;
    --riq-gray-100: #f1f5f9;
    --riq-gray-200: #e2e8f0;
    --riq-gray-300: #cbd5e1;
    --riq-gray-400: #94a3b8;
    --riq-gray-500: #64748b;
    --riq-gray-600: #475569;
    --riq-gray-700: #334155;
    --riq-gray-800: #1e293b;
    --riq-gray-900: #0f172a;

    /* Status Colors */
    --riq-success: #059669;
    --riq-success-light: #d1fae5;
    --riq-warning: #d97706;
    --riq-warning-light: #fef3c7;
    --riq-error: #dc2626;
    --riq-error-light: #fee2e2;

    /* Typography */
    --riq-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --riq-font-mono: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', monospace;

    /* Spacing */
    --riq-space-1: 4px;
    --riq-space-2: 8px;
    --riq-space-3: 12px;
    --riq-space-4: 16px;
    --riq-space-5: 20px;
    --riq-space-6: 24px;
    --riq-space-8: 32px;
    --riq-space-10: 40px;
    --riq-space-12: 48px;

    /* Shadows */
    --riq-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --riq-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --riq-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
    --riq-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.16);

    /* Border Radius */
    --riq-radius-sm: 4px;
    --riq-radius-md: 6px;
    --riq-radius-lg: 8px;
    --riq-radius-xl: 12px;
}

/* ============================================
   BASE RESETS & BODY
   ============================================ */
body {
    font-family: var(--riq-font-sans) !important;
    background: var(--riq-gray-50) !important;
    color: var(--riq-gray-800) !important;
    padding-top: 64px !important; /* Reduced from 70px */
}

/* ============================================
   TOP BAR - REFINED & PROFESSIONAL
   ============================================ */
header.top-bar {
    height: 64px !important;
    background: linear-gradient(135deg, var(--riq-blue-600) 0%, var(--riq-blue-700) 100%) !important;
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.25) !important;
    padding: 0 var(--riq-space-6) !important;
}

header.top-bar::before {
    display: none !important; /* Remove the extra gradient overlay */
}

header.top-bar .brand {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

header.top-bar .brand a {
    color: white !important;
}

/* Navigation Links - More compact */
header.top-bar nav.top-nav {
    padding-left: 0 !important;
}

header.top-bar nav.top-nav a {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: var(--riq-radius-md) !important;
    transition: background 0.15s ease !important;
}

header.top-bar nav.top-nav a:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Buy Credits / Upgrade Buttons - Cleaner */
header.top-bar nav.top-nav a#buyCredits,
header.top-bar nav.top-nav a#upgradeButton {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    font-size: 0.8125rem !important;
    padding: 0.4rem 0.875rem !important;
}

header.top-bar nav.top-nav a#buyCredits:hover,
header.top-bar nav.top-nav a#upgradeButton:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ============================================
   SIDEBAR - HIDDEN BY DEFAULT, BURGER MENU
   ============================================ */
.sidebar {
    position: fixed !important;
    left: -280px !important;
    top: 64px !important;
    width: 280px !important;
    height: calc(100vh - 64px) !important;
    background: white !important;
    border-right: 1px solid var(--riq-gray-200) !important;
    z-index: 9998 !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: var(--riq-shadow-xl) !important;
    padding: var(--riq-space-6) !important;
}

.sidebar.active {
    left: 0 !important;
}

/* Sidebar Logo Section */
.sidebar .logo-section {
    padding-bottom: var(--riq-space-5) !important;
    margin-bottom: var(--riq-space-5) !important;
    border-bottom: 1px solid var(--riq-gray-200) !important;
}

.sidebar .logo-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--riq-gray-800) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* Navigation Items */
.sidebar .nav-list {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--riq-space-1) !important;
}

.sidebar .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: var(--riq-space-3) !important;
    padding: var(--riq-space-3) var(--riq-space-4) !important;
    border-radius: var(--riq-radius-md) !important;
    color: var(--riq-gray-600) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
}

.sidebar .nav-link:hover {
    background: var(--riq-blue-50) !important;
    color: var(--riq-blue-700) !important;
}

.sidebar .support-link {
    margin-top: var(--riq-space-6) !important;
    background: linear-gradient(135deg, var(--riq-blue-600) 0%, var(--riq-blue-700) 100%) !important;
    color: white !important;
    text-align: center !important;
    border-radius: var(--riq-radius-md) !important;
}

/* Sidebar Toggle Button - Always Visible */
.sidebar-toggle {
    display: flex !important;
    position: fixed !important;
    top: 76px !important;
    left: var(--riq-space-4) !important;
    width: 40px !important;
    height: 40px !important;
    background: white !important;
    border: 1px solid var(--riq-gray-200) !important;
    border-radius: var(--riq-radius-lg) !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10001 !important;
    box-shadow: var(--riq-shadow-md) !important;
    transition: all 0.15s ease !important;
}

.sidebar-toggle:hover {
    background: var(--riq-gray-50) !important;
    border-color: var(--riq-blue-300) !important;
    box-shadow: var(--riq-shadow-lg) !important;
}

.sidebar-toggle i {
    width: 20px !important;
    height: 20px !important;
    color: var(--riq-gray-600) !important;
}

/* Sidebar Overlay */
#sidebarOverlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 9997 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
}

#sidebarOverlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================
   MAIN CONTENT - FULL WIDTH
   ============================================ */
.main-content {
    margin-left: 0 !important;
    padding: var(--riq-space-8) !important;
    padding-left: calc(var(--riq-space-8) + 56px) !important; /* Account for sidebar toggle */
    background: linear-gradient(180deg, var(--riq-gray-50) 0%, white 100%) !important;
    min-height: calc(100vh - 64px) !important;
    border-radius: 0 !important;
}

.tool-container {
    max-width: 1000px !important;
    margin: 0 auto !important;
}

.container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* ============================================
   HEADER SECTION - CLEANER
   ============================================ */
.header {
    text-align: center !important;
    margin-bottom: var(--riq-space-8) !important;
    padding: 0 !important;
}

.header-image {
    max-width: 320px !important;
    margin-bottom: var(--riq-space-4) !important;
}

.header-title {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--riq-blue-800) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: var(--riq-space-2) !important;
}

.header-description {
    font-size: 1rem !important;
    color: var(--riq-gray-500) !important;
    font-weight: 400 !important;
}

/* Instructions Button - Command Style */
.guide-button {
    background: white !important;
    color: var(--riq-blue-700) !important;
    border: 1px solid var(--riq-blue-200) !important;
    padding: 0.625rem 1.25rem !important;
    border-radius: var(--riq-radius-md) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    transition: all 0.15s ease !important;
    margin-top: var(--riq-space-4) !important;
}

.guide-button:hover {
    background: var(--riq-blue-50) !important;
    border-color: var(--riq-blue-400) !important;
    color: var(--riq-blue-800) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--riq-shadow-sm) !important;
}

/* ============================================
   REFERRAL BANNER - SUBTLE
   ============================================ */
.main-content > .tool-container > .container > div[style*="background-color: #e6fffa"] {
    background: linear-gradient(135deg, var(--riq-success-light) 0%, #ecfdf5 100%) !important;
    border: 1px solid rgba(5, 150, 105, 0.2) !important;
    border-radius: var(--riq-radius-lg) !important;
    padding: var(--riq-space-3) var(--riq-space-4) !important;
    margin-bottom: var(--riq-space-6) !important;
}

.main-content > .tool-container > .container > div[style*="background-color: #e6fffa"] a {
    color: var(--riq-success) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

/* ============================================
   INPUT SECTION - MISSION CONTROL CARD
   ============================================ */
.input-section {
    background: white !important;
    border: 1px solid var(--riq-gray-200) !important;
    border-radius: var(--riq-radius-xl) !important;
    padding: var(--riq-space-8) !important;
    box-shadow: var(--riq-shadow-md) !important;
    position: relative !important;
}

/* Remove the hover transform - too playful */
.input-section:hover {
    transform: none !important;
    box-shadow: var(--riq-shadow-lg) !important;
}

/* View History Tab - Refined */
.view-history-tab {
    position: absolute !important;
    top: -1px !important;
    left: var(--riq-space-6) !important;
    background: var(--riq-gray-100) !important;
    border: 1px solid var(--riq-gray-200) !important;
    border-bottom: 1px solid white !important;
    border-radius: var(--riq-radius-md) var(--riq-radius-md) 0 0 !important;
    padding: var(--riq-space-2) var(--riq-space-4) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--riq-gray-600) !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.view-history-tab:hover {
    background: var(--riq-blue-50) !important;
    color: var(--riq-blue-700) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--riq-shadow-sm) !important;
}

/* ============================================
   CREDIT STATUS - INSTRUMENT PANEL STYLE
   ============================================ */
.credit-status {
    background: linear-gradient(135deg, var(--riq-gray-50) 0%, var(--riq-gray-100) 100%) !important;
    border: 1px solid var(--riq-gray-200) !important;
    border-radius: var(--riq-radius-lg) !important;
    padding: var(--riq-space-5) !important;
    margin-bottom: var(--riq-space-6) !important;
}

.credits-progress-container {
    position: relative !important;
    background: var(--riq-gray-200) !important;
    border-radius: var(--riq-radius-sm) !important;
    height: 8px !important;
    overflow: hidden !important;
    margin-bottom: var(--riq-space-4) !important;
}

.credits-progress-bar {
    background: linear-gradient(90deg, var(--riq-blue-500) 0%, var(--riq-blue-600) 100%) !important;
    height: 100% !important;
    border-radius: var(--riq-radius-sm) !important;
    transition: width 0.5s ease !important;
}

.credits-progress-info {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

#creditsProgressText {
    font-family: var(--riq-font-mono) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--riq-gray-500) !important;
    background: white !important;
    padding: 2px 8px !important;
    border-radius: var(--riq-radius-sm) !important;
    border: 1px solid var(--riq-gray-200) !important;
}

.credit-counts {
    display: flex !important;
    gap: var(--riq-space-6) !important;
    flex-wrap: wrap !important;
}

.credit-item {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--riq-space-1) !important;
}

.credit-label {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--riq-gray-500) !important;
}

.credit-value {
    font-family: var(--riq-font-mono) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--riq-gray-800) !important;
}

#monthlyCredits,
#creditsUsed,
#bonusCredits {
    font-family: var(--riq-font-mono) !important;
    font-weight: 700 !important;
    color: var(--riq-blue-700) !important;
}

/* ============================================
   FILE UPLOAD SECTION - CLEAN & PRECISE
   ============================================ */
.file-upload-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: var(--riq-space-6) !important;
}

.file-upload-section:hover {
    transform: none !important;
    box-shadow: none !important;
}

.file-upload-section::before {
    display: none !important;
}

/* PDF Toggle Link */
.pdf-toggle-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--riq-space-2) !important;
    padding: var(--riq-space-2) var(--riq-space-4) !important;
    background: var(--riq-blue-50) !important;
    border: 1px solid var(--riq-blue-200) !important;
    border-radius: var(--riq-radius-md) !important;
    color: var(--riq-blue-700) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    margin-bottom: var(--riq-space-4) !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
}

.pdf-toggle-link:hover {
    background: var(--riq-blue-100) !important;
    border-color: var(--riq-blue-300) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--riq-shadow-sm) !important;
}

/* File Label - Drop Zone */
.file-label {
    display: flex !important;
    align-items: center !important;
    padding: var(--riq-space-4) var(--riq-space-5) !important;
    background: white !important;
    border: 2px dashed var(--riq-gray-300) !important;
    border-radius: var(--riq-radius-lg) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.file-label:hover {
    border-color: var(--riq-blue-400) !important;
    background: var(--riq-blue-50) !important;
    transform: none !important;
    box-shadow: none !important;
}

.file-label.drag-over {
    border-color: var(--riq-blue-500) !important;
    background: var(--riq-blue-50) !important;
    transform: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.file-icon {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--riq-gray-100) !important;
    border-radius: var(--riq-radius-md) !important;
    margin-right: var(--riq-space-4) !important;
    color: var(--riq-gray-500) !important;
}

.file-icon i {
    width: 20px !important;
    height: 20px !important;
}

.file-text {
    flex: 1 !important;
    font-size: 0.875rem !important;
    color: var(--riq-gray-600) !important;
    font-weight: 500 !important;
}

.file-button {
    background: var(--riq-blue-600) !important;
    color: white !important;
    padding: var(--riq-space-2) var(--riq-space-4) !important;
    border-radius: var(--riq-radius-md) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: none !important;
    transition: background 0.15s ease !important;
}

.file-label:hover .file-button {
    background: var(--riq-blue-700) !important;
    transform: none !important;
    box-shadow: none !important;
}

.file-name {
    font-family: var(--riq-font-mono) !important;
    font-size: 0.8125rem !important;
    color: var(--riq-gray-500) !important;
    margin-top: var(--riq-space-2) !important;
    padding-left: calc(40px + var(--riq-space-4)) !important;
}

/* ============================================
   MODE SELECTOR - THREE-WAY TOGGLE
   ============================================ */
.mode-selector {
    display: flex !important;
    background: var(--riq-gray-100) !important;
    border: 1px solid var(--riq-gray-200) !important;
    border-radius: var(--riq-radius-lg) !important;
    padding: var(--riq-space-1) !important;
    margin: var(--riq-space-6) 0 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: none !important;
}

.mode-option {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--riq-space-2) !important;
    padding: var(--riq-space-3) var(--riq-space-4) !important;
    border-radius: var(--riq-radius-md) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    color: var(--riq-gray-500) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.mode-option:hover:not(.active) {
    background: rgba(255, 255, 255, 0.5) !important;
    color: var(--riq-gray-700) !important;
    transform: none !important;
    box-shadow: none !important;
}

.mode-option.active {
    background: white !important;
    color: var(--riq-gray-800) !important;
    font-weight: 600 !important;
    box-shadow: var(--riq-shadow-sm) !important;
    transform: none !important;
    border: 1px solid var(--riq-gray-200) !important;
}

.mode-indicator {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--riq-gray-300) !important;
    margin-right: 0 !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

/* Bank Mode Indicator (Blue when active) */
#bankModeOption.active .mode-indicator {
    background: var(--riq-blue-500) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
    animation: none !important;
}

/* Invoice Mode Indicator (Green when active) */
#invoiceModeOption.active .mode-indicator {
    background: var(--riq-success) !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2) !important;
    animation: none !important;
}

/* ============================================
   EXPLANATION BANNER - CLEANER
   ============================================ */
.explanation-banner {
    background: var(--riq-blue-50) !important;
    border: 1px solid var(--riq-blue-200) !important;
    border-radius: var(--riq-radius-lg) !important;
    padding: var(--riq-space-5) !important;
    margin: var(--riq-space-4) 0 var(--riq-space-6) 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    animation: none !important;
}

.banner-icon {
    background: var(--riq-blue-600) !important;
    border-radius: var(--riq-radius-md) !important;
    box-shadow: none !important;
}

.banner-content h4 {
    color: var(--riq-blue-800) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
}

.banner-content p {
    color: var(--riq-blue-700) !important;
    font-size: 0.8125rem !important;
}

.criteria-item {
    background: white !important;
    border: 1px solid var(--riq-blue-200) !important;
    border-left: 3px solid var(--riq-blue-500) !important;
    border-radius: var(--riq-radius-sm) !important;
    padding: var(--riq-space-2) var(--riq-space-3) !important;
    font-size: 0.8125rem !important;
    color: var(--riq-blue-800) !important;
}

/* ============================================
   RECONCILE BUTTON - PRIMARY ACTION
   ============================================ */
.reconcile-button {
    width: 100% !important;
    padding: var(--riq-space-4) !important;
    background: linear-gradient(135deg, var(--riq-blue-600) 0%, var(--riq-blue-700) 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--riq-radius-lg) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--riq-space-2) !important;
}

.reconcile-button:hover {
    background: linear-gradient(135deg, var(--riq-blue-700) 0%, var(--riq-blue-800) 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
}

.reconcile-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2) !important;
}

.reconcile-button i {
    width: 18px !important;
    height: 18px !important;
}

/* ============================================
   TAB NAVIGATION - GLASSMORPHIC PILL STYLE
   (Matches LedgerIQ and CodeIQ styling)
   ============================================ */
.tab-nav-container {
    display: flex !important;
    justify-content: center !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.tab-nav {
    display: inline-flex !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
    padding: 6px !important;
    gap: 4px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

.tab-nav button {
    background: transparent !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    transition: all 0.3s ease !important;
    border-radius: 9999px !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Hover effects with product themes */
.tab-nav button.reconcileiq-tab:hover {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #3b82f6 !important;
}

.tab-nav button.ledgeriq-tab:hover {
    background: rgba(132, 204, 22, 0.1) !important;
    color: #84cc16 !important;
}

.tab-nav button.codeiq-tab:hover {
    background: rgba(168, 85, 247, 0.1) !important;
    color: #a855f7 !important;
}

/* Active states with product colors */
.tab-nav button.reconcileiq-tab.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9)) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3) !important;
}

.tab-nav button.ledgeriq-tab.active {
    background: linear-gradient(135deg, rgba(132, 204, 22, 0.9), rgba(101, 163, 13, 0.9)) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(132, 204, 22, 0.3) !important;
}

.tab-nav button.codeiq-tab.active {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.9), rgba(139, 92, 246, 0.9)) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(168, 85, 247, 0.3) !important;
}

.tab-nav button.active:hover {
    transform: none !important;
}

/* ============================================
   MERCHANT PARSER BUTTON
   ============================================ */
.merchant-parser-btn {
    background: linear-gradient(135deg, var(--riq-success) 0%, #047857 100%) !important;
    border-radius: var(--riq-radius-md) !important;
    padding: var(--riq-space-2) var(--riq-space-4) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    box-shadow: var(--riq-shadow-sm) !important;
}

/* ============================================
   RESULTS AREA
   ============================================ */
#results {
    margin-top: var(--riq-space-8) !important;
}

.result-section {
    background: white !important;
    border: 1px solid var(--riq-gray-200) !important;
    border-radius: var(--riq-radius-xl) !important;
    padding: var(--riq-space-6) !important;
    box-shadow: var(--riq-shadow-sm) !important;
}

.result-section h2 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--riq-gray-800) !important;
    border-bottom: 1px solid var(--riq-gray-200) !important;
}

/* Table Styling */
table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

th {
    background: var(--riq-blue-600) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: var(--riq-space-3) var(--riq-space-4) !important;
}

td {
    padding: var(--riq-space-3) var(--riq-space-4) !important;
    font-size: 0.875rem !important;
    border-bottom: 1px solid var(--riq-gray-100) !important;
}

/* Monospace for amounts */
td:nth-child(2),
td:nth-child(3) {
    font-family: var(--riq-font-mono) !important;
}

tr:hover td {
    background: var(--riq-gray-50) !important;
}

/* ============================================
   SEARCH INPUT
   ============================================ */
#searchInput {
    border: 1px solid var(--riq-gray-300) !important;
    border-radius: var(--riq-radius-md) !important;
    padding: var(--riq-space-3) var(--riq-space-4) !important;
    font-size: 0.875rem !important;
    transition: all 0.15s ease !important;
}

#searchInput:focus {
    border-color: var(--riq-blue-500) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    outline: none !important;
}

/* ============================================
   MODALS - CLEANER
   ============================================ */
.modal-content {
    background: white !important;
    border: 1px solid var(--riq-gray-200) !important;
    border-radius: var(--riq-radius-xl) !important;
    box-shadow: var(--riq-shadow-xl) !important;
    padding: var(--riq-space-8) !important;
}

.modal-content h2 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--riq-gray-800) !important;
}

.close-btn {
    background: var(--riq-gray-100) !important;
    border: 1px solid var(--riq-gray-200) !important;
    border-radius: var(--riq-radius-md) !important;
    transition: all 0.15s ease !important;
}

.close-btn:hover {
    background: var(--riq-gray-200) !important;
}

/* ============================================
   PDF CONVERTER SECTION
   ============================================ */
.pdf-converter-section {
    background: var(--riq-blue-50) !important;
    border: 1px solid var(--riq-blue-200) !important;
    border-radius: var(--riq-radius-lg) !important;
}

.pdf-upload-area {
    background: white !important;
    border: 2px dashed var(--riq-gray-300) !important;
    border-radius: var(--riq-radius-lg) !important;
}

.pdf-upload-area:hover {
    border-color: var(--riq-blue-400) !important;
    background: var(--riq-blue-50) !important;
}

.pdf-btn {
    border-radius: var(--riq-radius-md) !important;
    font-weight: 600 !important;
}

.pdf-btn-primary {
    background: var(--riq-blue-600) !important;
}

.pdf-btn-primary:hover:not(:disabled) {
    background: var(--riq-blue-700) !important;
}

.pdf-btn-success {
    background: var(--riq-success) !important;
}

.pdf-stats {
    background: white !important;
    border: 1px solid var(--riq-gray-200) !important;
    border-radius: var(--riq-radius-lg) !important;
}

.pdf-stat-number {
    font-family: var(--riq-font-mono) !important;
    font-weight: 700 !important;
    color: var(--riq-blue-700) !important;
}

.pdf-stat-label {
    font-size: 0.6875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--riq-gray-500) !important;
}

/* ============================================
   PROGRESS BAR
   ============================================ */
#progressContainer > div:first-child {
    background: var(--riq-gray-200) !important;
    border-radius: var(--riq-radius-sm) !important;
}

#progressBar {
    background: linear-gradient(90deg, var(--riq-blue-500) 0%, var(--riq-blue-600) 100%) !important;
    border-radius: var(--riq-radius-sm) !important;
}

#progressText {
    font-family: var(--riq-font-mono) !important;
    font-size: 0.8125rem !important;
    color: var(--riq-gray-500) !important;
}

/* ============================================
   ERROR MESSAGES
   ============================================ */
.error,
#error {
    background: var(--riq-error-light) !important;
    border: 1px solid rgba(220, 38, 38, 0.2) !important;
    border-radius: var(--riq-radius-lg) !important;
    color: var(--riq-error) !important;
    font-weight: 500 !important;
}

/* ============================================
   TIER DISPLAY
   ============================================ */
.tier-display {
    margin: var(--riq-space-4) auto !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    body {
        padding-top: 56px !important;
    }

    header.top-bar {
        height: 56px !important;
    }

    .sidebar {
        top: 56px !important;
        height: calc(100vh - 56px) !important;
    }

    .sidebar-toggle {
        top: 68px !important;
    }

    .main-content {
        padding: var(--riq-space-4) !important;
        padding-left: var(--riq-space-4) !important;
        padding-top: calc(var(--riq-space-4) + 48px) !important;
    }

    .input-section {
        padding: var(--riq-space-5) !important;
    }

    .mode-option {
        padding: var(--riq-space-2) var(--riq-space-3) !important;
        font-size: 0.8125rem !important;
    }

    .credit-counts {
        flex-direction: column !important;
        gap: var(--riq-space-3) !important;
    }
}

/* ============================================
   ANIMATIONS - SUBTLE & PROFESSIONAL
   ============================================ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Remove excessive animations */
.input-section,
.file-label,
.reconcile-button,
.mode-option {
    animation: none !important;
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}