/* ============================================================
   KENYA NATIONAL DEBT COUNTER
   APPLICATION STYLESHEET
   ============================================================

   Table of Contents

   1. Utility Classes
   2. Animations
   3. Layout Components
   4. Dashboard Components
   5. AI Assistant Components
   6. Accessibility
   7. Responsive Design
   8. Print Styles
   9. Modal Components

   ============================================================ */

/* ============================================================
   1. UTILITY CLASSES
   ============================================================ */

/* Ensures numerical counters align correctly */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Responsive counter value sizing (merged: clamp from the recovered
   inline block, truncation handling, plus original letter-spacing) */
.counter-value {
    font-size: clamp(1.5rem, 4vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Gradient backgrounds for counter cards */
.bg-royal-momentum {
    background: linear-gradient(160deg, #1A237E 0%, #0D1554 100%);
}
.bg-sovereign-depth {
    background: linear-gradient(160deg, #3A68D0 0%, #1E4BAA 100%);
}
.bg-fiscal-alert {
    background: linear-gradient(160deg, #BFDFFF 0%, #93C8FF 100%);
}

/* Sidebar custom scrollbar */
.sidebar-scroll {
    scrollbar-width: thin;
    scrollbar-color: #C6C5D4 #F0EDED;
}
.sidebar-scroll::-webkit-scrollbar {
    width: 4px;
}
.sidebar-scroll::-webkit-scrollbar-track {
    background: #F0EDED;
    border-radius: 4px;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
    background: #C6C5D4;
    border-radius: 4px;
}
.dark .sidebar-scroll {
    scrollbar-color: #4A4A5A #2A2A2A;
}
.dark .sidebar-scroll::-webkit-scrollbar-track {
    background: #2A2A2A;
}
.dark .sidebar-scroll::-webkit-scrollbar-thumb {
    background: #4A4A5A;
}

/* Chat message bubbles */
.chat-message-user {
    background: linear-gradient(135deg, #1A237E 0%, #3A68D0 100%);
    color: white;
    border-radius: 1rem;
    border-bottom-right-radius: 0.25rem;
}
.chat-message-assistant {
    background: #F6F3F2;
    color: #1C1B1B;
    border-radius: 1rem;
    border-bottom-left-radius: 0.25rem;
}
.dark .chat-message-assistant {
    background: #2A2A2A;
    color: #E5E2E1;
}

/* Smooth transitions for theme changes */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* ============================================================
   2. ANIMATIONS
   ============================================================ */

/* Live badge subtle pulse animation */
@keyframes pulse-subtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.live-badge {
    animation: pulse-subtle 2s ease-in-out infinite;
}

/* Loading dots animation */
.loading-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}
.loading-dots span {
    width: 8px;
    height: 8px;
    background-color: #1A237E;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}
.dark .loading-dots span {
    background-color: #00A652;
}
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Number counter entry animation */
@keyframes count-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.count-up {
    animation: count-up 0.5s ease-out;
}

/* ============================================================
   3. LAYOUT COMPONENTS
   ============================================================ */

/* Desktop sidebar */
.desktop-sidebar {
    width: 280px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.desktop-sidebar.hidden-sidebar {
    display: none;
}

/* Main content */
.main-content {
    flex: 1;
    min-width: 0;
    width: 100%;
}

/* Three-column counters layout */
.counters-three-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

/* Mobile drawer: off-canvas by default, slides in with .open */
.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: min(280px, 85vw);
    height: 100%;
    height: 100dvh;
    z-index: 1000;
    background: #F6F3F2;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow: hidden;
    padding: 0;
}
.dark .mobile-drawer {
    background: #1A1A1A;
}
.mobile-drawer.open {
    transform: translateX(0);
}

/* Overlay behind the drawer */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Collapsible submenus inside the drawer */
.mobile-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 1.5rem;
}
.mobile-submenu.open {
    max-height: 200px;
}

/* ============================================================
   4. DASHBOARD COMPONENTS
   ============================================================ */

/* Chart container */
.chart-container {
    width: 100%;
}
canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 450px;
}

/* ============================================================
   5. AI ASSISTANT COMPONENTS
   ============================================================ */

/* Red flag cards */
.flag-card {
    transition: all 0.2s ease;
    cursor: pointer;
}
.flag-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.flag-severity-high {
    border-left: 4px solid #DC2626;
}
.flag-severity-medium {
    border-left: 4px solid #F59E0B;
}
.flag-severity-low {
    border-left: 4px solid #10B981;
}

/* USSD call-to-action button */
.ussd-btn {
    background: linear-gradient(135deg, #00A652 0%, #007236 100%);
}

/* ============================================================
   6. ACCESSIBILITY
   ============================================================ */

.high-contrast {
    filter: contrast(1.5) brightness(1.1);
}
/* Note: fixed from the original "`.high-contrast body`" descendant
   selector, which could never match since the class is applied
   directly to <body> rather than to an ancestor of it. */
body.high-contrast {
    background: black !important;
    color: white !important;
}

.large-text {
    font-size: 1.2rem !important;
}
.large-text p, .large-text span, .large-text div, .large-text button {
    font-size: 1.1rem !important;
}

.screen-reader-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Focus styles for accessibility */
*:focus-visible {
    outline: 3px solid #00A652;
    outline-offset: 2px;
}

/* ============================================================
   7. RESPONSIVE DESIGN
   ============================================================ */

@media (max-width: 768px) {
    .counter-card { padding: 1.5rem; }
    .counter-value { font-size: 1.75rem; }
    .counters-three-column {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .desktop-sidebar {
        display: none !important;
    }
    .main-content {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 0;
    }
    .counter-value {
        font-size: clamp(1.2rem, 6vw, 3.5rem);
    }
    .flex-wrap button {
        font-size: 10px;
        padding: 4px 8px;
    }
}

/* ============================================================
   8. PRINT STYLES
   ============================================================ */

@media print {
    .sticky, .fixed, .mobile-bottom-nav, .top-navbar { display: none; }
    body { background: white; color: black; }
    .counter-card { break-inside: avoid; page-break-inside: avoid; }
}

/* ============================================================
   9. MODAL COMPONENTS
   ============================================================ */

#downloadModal, #errorModal {
    animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
#downloadModal .bg-white, #errorModal .bg-white {
    animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}