/* ==========================================================================
   MEPCO BILL CHECKER - STYLESHEET WITH SOLID FALLBACKS & FIXES
   ========================================================================== */

/* Root Colors */
:root {
    --navy-950: #070d19;
    --navy-900: #0f172a;
    --navy-850: #141e36;
    --navy-800: #1e293b;
    --navy-700: #334155;
    
    --cyan-500: #06b6d4;
    --cyan-400: #38bdf8;
    --cyan-300: #7dd3fc;
}

/* Explicit SVG Sizing Fixes to prevent icon distortion */
svg {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
}

.w-4 { width: 1rem !important; }
.h-4 { height: 1rem !important; }
.w-5 { width: 1.25rem !important; }
.h-5 { height: 1.25rem !important; }
.w-6 { width: 1.5rem !important; }
.h-6 { height: 1.5rem !important; }

/* Force Hidden Utility */
.hidden, [hidden] {
    display: none !important;
}

/* Drawer Transitions & Overlays */
#mobile-drawer-backdrop {
    transition: opacity 0.3s ease-in-out;
}

#mobile-drawer-backdrop.active {
    opacity: 1 !important;
}

#mobile-drawer-content {
    transition: transform 0.3s ease-in-out;
}

#mobile-drawer-content.active {
    transform: translateX(0) !important;
}

/* Base Body Styles */
body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--navy-950);
    color: #f8fafc;
    margin: 0;
    padding: 0;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--navy-950);
}
::-webkit-scrollbar-thumb {
    background: var(--navy-800);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--navy-700);
}