/**
 * AgentLeash Dashboard — Responsive + Dark Mode Overrides
 * Include after dark-mode.css on all dashboard pages.
 * Handles: sidebar collapse, content reflow, table scroll, form stacking.
 */

/* ============================================
   MOBILE: Sidebar + Main Layout
   ============================================ */
@media (max-width: 768px) {
    /* Hide sidebar on mobile */
    .sidebar {
        display: none !important;
    }

    /* Full-width main content */
    .main,
    .main-content,
    [style*="margin-left: 250px"],
    [style*="margin-left:250px"] {
        margin-left: 0 !important;
        padding: 16px !important;
    }

    /* Mobile header with menu hint */
    body::before {
        content: '☰ AgentLeash';
        display: block;
        position: fixed;
        top: 0; left: 0; right: 0;
        background: var(--bg-sidebar, #fafbfc);
        border-bottom: 1px solid var(--border, #e5e7eb);
        padding: 12px 16px;
        font-size: 16px;
        font-weight: 700;
        z-index: 200;
        font-family: 'Inter', sans-serif;
    }
    body {
        padding-top: 48px !important;
    }

    /* Stack grid layouts */
    .stats-row,
    [class*="stat-row"],
    [class*="stats-grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Table horizontal scroll */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stack form rows */
    .form-row,
    [class*="form-row"] {
        display: block !important;
    }
    .form-row > *,
    [class*="form-row"] > * {
        margin-bottom: 12px;
    }

    /* Cards full width */
    .token-grid,
    [class*="card-grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Shrink page titles */
    h1 { font-size: 20px !important; }
    h2 { font-size: 18px !important; }

    /* Step wizard stacking */
    .wizard-steps,
    .create-steps,
    [class*="step-indicator"] {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Modals full-width */
    .modal,
    [class*="modal-content"] {
        width: 95% !important;
        max-width: none !important;
        margin: 16px !important;
    }

    /* Tab bars scroll */
    .tabs,
    [class*="tab-bar"] {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* Action buttons stack */
    .actions-cell,
    .key-actions,
    [class*="action-buttons"] {
        flex-direction: column !important;
        gap: 4px !important;
    }

    /* Code blocks scroll */
    pre, code {
        max-width: 100%;
        overflow-x: auto;
        font-size: 12px !important;
    }
}

/* ============================================
   TABLET: Moderate adjustments (768-1024)
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        width: 200px !important;
    }
    .main,
    .main-content,
    [style*="margin-left: 250px"],
    [style*="margin-left:250px"] {
        margin-left: 200px !important;
    }

    .stats-row {
        grid-template-columns: repeat(3, 1fr) !important;
    }

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

/* ============================================
   DARK MODE: CSS variable overrides
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-body: #0b0d17;
        --bg-sidebar: #13141e;
        --bg-card: #181a2a;
        --bg-card-hover: #1e2035;
        --text-primary: #f1f3f9;
        --text-secondary: #8b8fa7;
        --text-muted: #555a72;
        --accent: #3b82f6;
        --accent-light: rgba(59, 130, 246, 0.1);
        --accent-secondary: #a78bfa;
        --border: #1e2035;
        --border-light: #242640;
        --success: #34d399;
        --success-bg: rgba(16, 185, 129, 0.1);
        --error: #f87171;
        --error-bg: rgba(239, 68, 68, 0.1);
        --warning: #fbbf24;
        --warning-bg: rgba(245, 158, 11, 0.1);
    }

    body {
        background: var(--bg-body) !important;
        color: var(--text-primary) !important;
    }

    /* Sidebar */
    .sidebar {
        background: var(--bg-sidebar) !important;
        border-color: var(--border) !important;
    }
    .sidebar-header {
        border-color: var(--border) !important;
    }

    /* Cards */
    .card,
    .stat-card,
    [class*="card"] {
        background: var(--bg-card) !important;
        border-color: var(--border) !important;
    }

    /* Inputs */
    input, select, textarea {
        background: var(--bg-body) !important;
        color: var(--text-primary) !important;
        border-color: var(--border) !important;
    }
    input:focus, select:focus, textarea:focus {
        border-color: var(--accent) !important;
    }
    input::placeholder, textarea::placeholder {
        color: var(--text-muted) !important;
    }

    /* Tables */
    th {
        color: var(--text-muted) !important;
        border-color: var(--border) !important;
    }
    td {
        border-color: var(--border-light) !important;
    }
    tr:hover td {
        background: var(--accent-light) !important;
    }

    /* Buttons */
    .btn-outline,
    [class*="btn-outline"] {
        border-color: var(--border) !important;
        color: var(--text-secondary) !important;
    }

    /* Badges */
    .badge {
        opacity: 0.9;
    }

    /* Nav items */
    .nav-item, .nav-link, a {
        color: var(--text-secondary);
    }
    .nav-item:hover, .nav-link:hover, a:hover {
        color: var(--text-primary);
    }
    .nav-item.active {
        background: var(--accent-light) !important;
        color: var(--accent) !important;
    }

    /* Charts / progress */
    .progress-bar-bg {
        background: var(--border) !important;
    }

    /* Code blocks */
    pre, code {
        background: #0f1221 !important;
    }

    /* Modals */
    .modal-overlay {
        background: rgba(0, 0, 0, 0.7) !important;
    }

    /* Mobile header bar */
    body::before {
        background: var(--bg-sidebar) !important;
        border-color: var(--border) !important;
        color: var(--text-primary) !important;
    }
}

/* ============================================
   PRINT: Clean output
   ============================================ */
@media print {
    .sidebar, nav, .filters, .actions-cell, button, .btn { display: none !important; }
    .main { margin-left: 0 !important; }
    body { background: white !important; color: black !important; }
}