/* Responsive Styles */
@media (min-width: 768px) {
    .content-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
}

@media (max-width: 992px) {
    .app-container {
        flex-direction: column;
    }
    .sidebar {
        position: fixed;
        top: 0;
        right: -280px; /* Hide sidebar off-screen */
        height: 100vh;
        z-index: 1100;
        transition: right 0.3s ease-in-out;
        box-shadow: 0 0 30px rgba(0,0,0,0.5);
    }
    .sidebar.mobile-open {
        right: 0;
    }
    .content-wrapper {
        width: 100%;
    }
    .main-content {
        padding: 1.5rem;
    }
    .main-top-header {
        position: sticky;
        top: 0;
        z-index: 100;
    }
     .hamburger-menu {
        display: block;
    }
    .mobile-menu-overlay.mobile-open {
        display: block;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-chart-card {
        grid-column: span 1;
    }

    /* Make charts scrollable on mobile */
    .dashboard-chart-container, .chart-wrapper {
        overflow-x: auto;
    }

    .chart-wrapper.line-chart {
        aspect-ratio: 2 / 1; /* Make chart taller on mobile for better readability */
    }

    /* Hide scrollbar but keep functionality */
    .dashboard-chart-container::-webkit-scrollbar, .chart-wrapper::-webkit-scrollbar {
        height: 6px;
    }
    .dashboard-chart-container::-webkit-scrollbar-track, .chart-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }
    .dashboard-chart-container::-webkit-scrollbar-thumb, .chart-wrapper::-webkit-scrollbar-thumb {
        background: var(--primary);
        border-radius: 3px;
    }

    .chart-wrapper svg {
        min-width: 600px; /* Ensure chart is readable */
    }

    .bar-chart-container {
        min-width: 600px;
    }
}

@media (max-width: 768px) {
    .main-top-header h2 {
        font-size: 1.2rem;
    }
    .chatbot-list {
        grid-template-columns: 1fr; /* Single column for bots on mobile */
    }
    .modal-content {
        width: 95%;
        padding: 1.5rem;
        max-height: 95vh;
    }
    .modal-tabs {
        padding-bottom: 0.5rem;
    }
    .modal-tab {
        padding: 0.75rem 1rem;
    }
    .modal-footer {
        flex-direction: column;
        gap: 0.5rem;
    }
    .modal-btn {
        width: 100%;
    }
    .settings-form-grid, .content-grid {
        grid-template-columns: 1fr;
    }
    .settings-form-grid .span-2 {
        grid-column: span 1;
    }
    .chat-archive-view {
        flex-direction: column-reverse;
        height: 75vh;
    }
    .sessions-list-column {
        width: 100%;
        height: 40%;
        border-right: none;
        border-top: 1px solid var(--primary);
    }
    .api-key-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .api-key-grid .form-group {
        margin-bottom: 0.5rem;
    }
    .api-key-grid .form-group:nth-child(2n) {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 1rem;
    }
    .login-box {
        padding: 2rem;
    }
    .dashboard-grid {
        gap: 1rem;
    }
    .dashboard-card {
        padding: 1rem;
    }
    .stat-value {
        font-size: 2rem;
    }
    .payment-info-box {
        padding: 1rem;
    }
    .card-number-container {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
    }
    .card-number-display {
        font-size: 1.2rem;
        letter-spacing: 2px;
        white-space: normal;
        line-height: 1.5;
    }
    .copy-card-number-btn {
        width: 100%;
        padding: 0.75rem;
        font-size: 1rem;
    }
}