/**
 * Global Fixes for All Templates
 * - 1rem minimum font size everywhere (html base = 13px, so 1rem = 13px)
 * - Headers proportionally bigger
 * - Scroll support across all pages
 * - Table overflow handling
 */

/* ========== Base Font Size ========== */
/* 1rem = 13px. Nothing in the UI should be smaller than 1rem. */
html {
    font-size: 13px;
}

/* ========== Body & Scroll ========== */
body {
    overflow-x: hidden;
    font-size: 1rem;
}

body.has-auth main {
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* ========== Left-aligned page content ========== */
/* All authenticated page headers are left-aligned by default */
body.has-auth main h1,
body.has-auth main h2,
body.has-auth main h3,
body.has-auth main h4 {
    text-align: left !important;
}

/* Left-align direct wrapper containers (removes auto-centering) */
body.has-auth main > div:not(.ml-shell) {
    margin-left: 0 !important;
}

/* ML shell sidebar-aware margin */
body.has-auth.sidebar-minimized main > .ml-shell {
    margin-left: 48px !important;
}

/* Ensure flex/grid children don't overflow */
* {
    min-width: 0;
    box-sizing: border-box;
}

/* ========== Global Heading Scale ========== */
/* Nothing smaller than 1rem; headers are proportionally larger */
h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 1rem; }

/* ========== Global Text Elements — all 1rem minimum ========== */
p, li, td, th, span, div, a, label, input, select, textarea, button {
    font-size: 1rem;
}

/* Buttons — compact but readable */
button:not([class*="burger"]):not([class*="toggle"]):not([class*="notification"]),
input[type="button"],
input[type="submit"],
input[type="reset"] {
    font-size: 1rem !important;
    padding: 0.4rem 0.85rem !important;
    line-height: 1.4 !important;
}

/* Inputs and selects */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
select {
    font-size: 1rem !important;
    padding: 0.4rem 0.7rem !important;
}

/* Textarea — no resize, full width */
textarea {
    resize: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 1rem !important;
    padding: 0.4rem 0.7rem !important;
}

/* Labels */
label {
    font-size: 1rem;
}

/* ========== List Spacing ========== */
ul, ol {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 1.5rem;
}

ul li, ol li {
    margin: 0.25rem 0;
    font-size: 1rem;
}

h1 + ul, h1 + ol,
h2 + ul, h2 + ol,
h3 + ul, h3 + ol,
h4 + ul, h4 + ol {
    margin-top: 0.5rem;
}

/* ========== Table Scroll Support ========== */
table {
    border-collapse: collapse;
}

.table-responsive,
.table-wrapper,
.table-container,
.table-scroll,
.datasets-table,
.result-table,
.transactions-table,
[class*="table-wrap"],
[class*="-table"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.data-table,
table.data-table {
    min-width: 100%;
}

/* ========== AI Output Rendering Styles ========== */
.ai-output {
    line-height: 1.6;
    color: #374151;
    font-size: 1rem;
}

.ai-output .ai-paragraph {
    margin: 0.5rem 0;
    font-size: 1rem;
}

.ai-output .ai-paragraph:first-child { margin-top: 0; }
.ai-output .ai-paragraph:last-child  { margin-bottom: 0; }

.ai-output strong { font-weight: 600; color: #111827; }
.ai-output em     { font-style: italic; color: #6b7280; }

/* Inline code */
.ai-output .inline-code,
.ai-output code:not(pre code) {
    background: #f3f4f6;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    font-size: 1rem;
    color: #dc2626;
    font-weight: 500;
}

/* Code blocks */
.ai-output pre {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0.75rem 0;
    border-left: 4px solid #3b82f6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ai-output pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: 1rem;
    line-height: 1.5;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
}

/* AI output headers */
.ai-output .ai-h1, .ai-output h1 { font-size: 1.5rem; }
.ai-output .ai-h2, .ai-output h2 { font-size: 1.25rem; }
.ai-output .ai-h3, .ai-output h3 { font-size: 1.1rem; }
.ai-output .ai-h4, .ai-output h4 { font-size: 1rem; }

.ai-output .ai-h1,
.ai-output .ai-h2,
.ai-output .ai-h3,
.ai-output .ai-h4,
.ai-output h1,
.ai-output h2,
.ai-output h3,
.ai-output h4 {
    font-weight: 600;
    color: #111827;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.ai-output .ai-h1:first-child,
.ai-output .ai-h2:first-child,
.ai-output .ai-h3:first-child,
.ai-output .ai-h4:first-child {
    margin-top: 0;
}

.ai-output .ai-list,
.ai-output ul,
.ai-output ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.ai-output .ai-list li,
.ai-output ul li,
.ai-output ol li {
    margin: 0.25rem 0;
    line-height: 1.5;
    font-size: 1rem;
}

.ai-output ul + ul,
.ai-output ol + ol,
.ai-output ul + ol,
.ai-output ol + ul {
    margin-top: 0;
}

.ai-output blockquote {
    border-left: 4px solid #3b82f6;
    padding-left: 1rem;
    margin: 0.75rem 0;
    color: #6b7280;
    font-style: italic;
    font-size: 1rem;
}

.ai-output a {
    color: #3b82f6;
    text-decoration: underline;
    transition: color 0.2s;
    font-size: 1rem;
}

.ai-output a:hover { color: #2563eb; }

.ai-output br + br { display: none; }
.ai-output br + br + br { display: none; }

.ai-output pre + p,
.ai-output ul + p,
.ai-output ol + p,
.ai-output h1 + p,
.ai-output h2 + p,
.ai-output h3 + p,
.ai-output h4 + p,
.ai-output p + p {
    margin-top: 0.5rem;
}

/* ========== Archive Button & Modal ========== */
.archive-button {
    position: fixed;
    top: 84px;
    left: 20px;
    padding: 0.4rem 0.85rem !important;
    background: white;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem !important;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    z-index: 100;
    font-family: 'SF Pro Display', sans-serif;
}

.archive-button:hover {
    background: #f9fafb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.save-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.save-modal.active { display: flex; }

.save-modal-content {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.save-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.75rem;
}

.save-modal-input {
    width: 100%;
    padding: 0.4rem 0.75rem !important;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem !important;
    font-family: 'SF Pro Display', sans-serif;
    margin-bottom: 1rem;
}

.save-modal-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.save-modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.save-modal-button {
    padding: 0.4rem 1rem !important;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem !important;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'SF Pro Display', sans-serif;
}

.save-modal-button.primary  { background: #3b82f6; color: white; }
.save-modal-button.primary:hover  { background: #2563eb; }
.save-modal-button.secondary { background: #f3f4f6; color: #374151; }
.save-modal-button.secondary:hover { background: #e5e7eb; }

/* ========================================================================
   MOBILE-FIRST INDUSTRIAL RESPONSIVE SYSTEM
   Covers every template, workspace, and interactive component.
   Breakpoints: 480px (phones), 768px (tablets), 1024px (small desktop)
   ======================================================================== */

/* ── Touch device: always show action buttons (no hover required) ──────── */
@media (hover: none) and (pointer: coarse) {
    /* Notes / folder item actions — force visible on touch */
    .item-actions,
    .note-actions,
    .action-buttons,
    .card-actions,
    .hover-actions {
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
        transform: none !important;
    }

    /* Ensure all interactive elements have minimum 44px touch target */
    button,
    a,
    .tool-menu-item,
    .dropdown-item,
    .conversation-item,
    .nav-item,
    [role="button"] {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Remove hover-only transforms on touch */
    .feature-card:hover,
    .stat-card:hover,
    .agent-card:hover,
    .source-card:hover,
    .tool-card:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }
}

/* ── 1024px — small desktop / large tablet ─────────────────────────────── */
@media (max-width: 1024px) {
    /* Grids: reduce minimum card width so they wrap earlier */
    [class*="agents-grid"],
    [class*="cards-grid"],
    [class*="feature-cards"],
    [class*="sources-grid"],
    [class*="api-sources-grid"],
    [class*="content-grid"],
    [class*="tools-grid"],
    [class*="stat-cards"] {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    }

    /* Studio topbars — allow wrapping on medium screens */
    .as-topbar,
    .ml-topbar {
        flex-wrap: wrap;
        height: auto !important;
        min-height: 54px;
        padding: 0.5rem 1rem;
        gap: 0.5rem;
    }
}

/* ── 768px — tablets / most phones landscape ───────────────────────────── */
@media (max-width: 768px) {

    /* ── Typography scale-down ── */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.1rem; }

    /* ── Studio layout: no left sidebar on mobile — full width ── */
    body.has-auth main.quant-main,
    body.has-auth main.studio-main {
        padding: 0 0 56px 0 !important;
        overflow: hidden !important;
    }

    /* ── Card grids collapse to single column ── */
    [class*="agents-grid"],
    [class*="cards-grid"],
    [class*="feature-cards"],
    [class*="sources-grid"],
    [class*="api-sources-grid"],
    [class*="content-grid"],
    [class*="tools-grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Stat cards — 2 columns on tablets */
    [class*="stat-cards"],
    [class*="stats-grid"],
    .stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ── Chart containers ── */
    [class*="chart-container"],
    [class*="chart-wrap"],
    .plotly-chart,
    .chart-area {
        height: 280px !important;
        min-height: 200px !important;
    }

    /* ── Tables always scroll horizontally ── */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* ── Modals full-width on mobile ── */
    .save-modal-content,
    [class*="modal-content"],
    [class*="modal-box"] {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 1rem;
        padding: 1.25rem !important;
        border-radius: 12px;
    }

    /* ── Form controls stack vertically ── */
    .controls-grid,
    [class*="controls-grid"],
    [class*="filter-grid"],
    [class*="form-row"] {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    /* ── Action buttons always visible (no hover-only) ── */
    .item-actions,
    .note-actions,
    .card-actions,
    .hover-actions {
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
    }

    /* ── Touch targets ── */
    button:not([class*="burger"]):not([class*="toggle"]):not([class*="notification"]),
    input[type="button"],
    input[type="submit"] {
        min-height: 44px !important;
        padding: 0.6rem 1rem !important;
    }

    /* Small icon buttons */
    .icon-btn,
    .action-icon,
    [class*="-icon-btn"] {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ── Notification container full-width ── */
    .notification-container {
        left: 0.5rem !important;
        right: 0.5rem !important;
        max-width: none !important;
    }

    /* ── Archive button reposition ── */
    .archive-button {
        top: auto !important;
        bottom: calc(env(safe-area-inset-bottom) + 1rem);
        left: 50% !important;
        transform: translateX(-50%);
        z-index: 200;
    }

    /* ── Inputs always full-width on mobile ── */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ── Page headings with actions — stack vertically ── */
    .page-header,
    [class*="page-header"],
    [class*="section-header"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    /* ── Topbar for studio pages wrap gracefully ── */
    .as-topbar,
    .ml-topbar {
        flex-wrap: wrap;
        height: auto !important;
        min-height: 48px;
        padding: 0.5rem 0.75rem;
        gap: 0.4rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Studio topbar: ticker and quick buttons scroll horizontally */
    .as-topbar > *,
    .ml-topbar > * {
        flex-shrink: 0;
    }

    /* ── Quant studio sidebar hidden by default on mobile ── */
    .as-sidebar,
    .as-builder-panel {
        position: fixed !important;
        left: -100% !important;
        top: 0 !important;
        width: 85vw !important;
        max-width: 320px !important;
        height: 100% !important;
        z-index: 500 !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.2) !important;
    }

    .as-sidebar.mobile-open,
    .as-builder-panel.mobile-open {
        left: 0 !important;
    }

    /* ── Main chart area fills full width when sidebar hidden ── */
    .as-body,
    .as-main,
    .ml-body {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    /* ── AI chat sidebar hidden on mobile (was display:none) ── */
    .chat-sidebar {
        position: fixed !important;
        left: -100% !important;
        top: 0 !important;
        width: 85vw !important;
        max-width: 300px !important;
        height: 100% !important;
        z-index: 500 !important;
        transition: left 0.3s ease !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.15) !important;
    }

    .chat-sidebar.mobile-open {
        left: 0 !important;
    }

    /* ── ML sidebar collapse ── */
    .ml-sidebar {
        position: fixed !important;
        left: -100% !important;
        top: 47px !important;
        width: 260px !important;
        height: calc(100vh - 47px) !important;
        z-index: 400 !important;
        transition: left 0.3s ease !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.15) !important;
    }

    .ml-sidebar.mobile-open {
        left: 0 !important;
    }

    /* ── ML shell margin reset on mobile ── */
    .ml-shell {
        margin-left: 0 !important;
    }

    /* ── Flip/hero animations contained ── */
    .flip-wrapper,
    [class*="hero-card"],
    [class*="hero-plate"] {
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
    }

    /* ── Preview containers in studio pages ── */
    [class*="preview-container"],
    [class*="preview-chart"] {
        height: 180px !important;
        min-height: 140px !important;
    }

    /* ── Monaco editor containers — allow vertical scrolling ── */
    [class*="monaco"],
    [class*="editor-container"],
    .as-builder-editor {
        height: 200px !important;
        min-height: 150px !important;
        overflow: hidden !important;
    }

    /* ── Breadcrumbs truncate ── */
    [class*="breadcrumb"],
    .breadcrumb {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    /* ── Quick-link grids collapse ── */
    [class*="quick-links"],
    [class*="quick-grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ── Info/metric grids 2 columns on mobile ── */
    .info-grid,
    [class*="info-grid"],
    [class*="metric-grid"],
    [class*="metrics-grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ── Pomodoro timer responsive ── */
    [class*="timer-display"],
    .timer-number,
    .pomodoro-time {
        font-size: 3rem !important;
    }

    /* ── Productivity grid single column ── */
    [class*="productivity-grid"],
    [class*="task-grid"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── 480px — small phones ────────────────────────────────────────────────── */
@media (max-width: 480px) {

    /* Typography */
    h1 { font-size: 1.3rem; }
    h2 { font-size: 1.1rem; }

    /* Stat cards single column */
    [class*="stat-cards"],
    [class*="stats-grid"],
    .stat-grid {
        grid-template-columns: 1fr !important;
    }

    /* Quick links 2 col stays fine, info grids 1 col */
    .info-grid,
    [class*="info-grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Charts shorter on small phones */
    [class*="chart-container"],
    [class*="chart-wrap"],
    .plotly-chart {
        height: 220px !important;
        min-height: 160px !important;
    }

    /* Topbar logos/labels hide on tiny screens */
    .as-logo-text,
    .ml-logo-text,
    [class*="-logo"] span:not([class*="-dot"]) {
        display: none !important;
    }

    /* Studio topbar scrollable */
    .as-topbar,
    .ml-topbar {
        padding: 0.4rem 0.5rem;
        gap: 0.3rem;
    }

    /* Modals full-screen on tiny phones */
    .save-modal-content,
    [class*="modal-content"] {
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
    }

    /* Save modal actions full-width buttons */
    .save-modal-actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .save-modal-button {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── Safe area / notch support ────────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        body.has-auth main {
            /* 56px bottom nav + safe area */
            padding-bottom: calc(5rem + env(safe-area-inset-bottom)) !important;
        }

        /* Input areas at bottom of screen */
        .input-area,
        [class*="input-area"],
        [class*="chat-input"] {
            padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
        }

        /* Fixed bottom buttons — sit above the bottom nav */
        .archive-button,
        [class*="fab-button"],
        [class*="bottom-fixed"] {
            bottom: calc(56px + 1rem + env(safe-area-inset-bottom)) !important;
        }

        /* Bottom nav safe area */
        .mobile-bottom-nav {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* ── Landscape phone (short viewport) ─────────────────────────────────────── */
@media (max-height: 500px) and (max-width: 900px) {
    /* Chat/studio: compress topbars */
    .as-topbar,
    .ml-topbar,
    .chat-header {
        min-height: 40px !important;
        height: 40px !important;
        padding: 0 0.75rem !important;
        overflow-x: auto;
        flex-wrap: nowrap !important;
    }

    /* Reduce chart height in landscape to leave room for controls */
    [class*="chart-container"],
    [class*="chart-wrap"] {
        height: 180px !important;
    }

    /* Workspace banner hidden in landscape for more vertical space */
    .workspace-banner {
        display: none !important;
    }

    body.has-auth {
        padding-top: 47px !important;
    }
}

/* ── Scrollable studio topbars ────────────────────────────────────────────── */
/* Prevent topbar from wrapping when content overflows — just scroll */
.as-topbar-scroll,
.ml-topbar-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.as-topbar-scroll::-webkit-scrollbar,
.ml-topbar-scroll::-webkit-scrollbar {
    display: none;
}

/* ── Mobile sidebar toggle button (shown only on mobile) ─────────────────── */
.mobile-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--as-bg2, #f8f9fa);
    border: 1px solid var(--as-border, #e4e6ea);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .mobile-sidebar-toggle {
        display: flex !important;
    }
}

/* ── Mobile overlay for studio sidebars ──────────────────────────────────── */
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 490;
    cursor: pointer;
}

.mobile-overlay.active {
    display: block;
}

/* ── Prevent content overflow on any page ───────────────────────────────── */
@media (max-width: 768px) {
    img,
    video,
    canvas,
    svg {
        max-width: 100%;
        height: auto;
    }

    /* Prevent wide pre blocks from blowing out layout */
    pre {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: pre;
        word-wrap: normal;
    }

    /* Inline code doesn't break layout */
    code {
        word-break: break-all;
    }
}