/* ==========================================================================
   ATLAS V6 — Mobile & Tablet Experience Layer (Sprint 3.6.0)

   The desktop layout is the reference implementation and must not regress, so
   every rule here lives inside a max-width media query. Nothing in this file can
   apply at desktop widths — desktop safety is structural, not a matter of care.

   This is a redesign rather than a shrink: on a phone the dashboard becomes a
   single prioritised column, tables become cards, and the header action cluster
   becomes an off-canvas drawer. The same DOM serves all three form factors; no
   markup is duplicated per breakpoint.
   ========================================================================== */

/* Shared guards — apply from tablet down. */
@media (max-width: 1024px) {

    html, body { max-width: 100%; overflow-x: hidden; }

    .dashboard-container { padding: 0.85rem; }

    .widget-grid-container {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    /* Desktop column spans must not force a 12-column track on narrow screens. */
    .widget-grid-container > * {
        grid-column: 1 / -1 !important;
        min-width: 0;
    }

    /* Nothing may exceed the viewport. */
    .widget-card, .intel-card, .glass-header { max-width: 100%; min-width: 0; }

    /* Nested layout grids (the AI cockpit) collapse too, and their children must
       be allowed to shrink — a grid/flex item defaults to min-width:auto, which
       is what pushes content past the viewport edge. */
    .cockpit-grid-layout { grid-template-columns: 1fr !important; }
    .cockpit-grid-layout > *,
    .intel-card > *,
    .widget-card > * { min-width: 0; }

    /* Wide content scrolls inside its own card rather than the page. */
    .table-container, .opportunity-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Charts resize with their container instead of clipping. */
    canvas { max-width: 100% !important; height: auto !important; }
    .radar-chart-wrap { min-width: 0; }

    /* ---- Touch targets ---------------------------------------------------
       Applies from tablet down: both phones and tablets are touch-first. */
    input, select, textarea, .field-input {
        font-size: 16px;              /* prevents iOS zoom-on-focus */
        min-height: 44px;
    }
    .btn { min-height: 44px; }

    /* Every control meets the same 44px floor, including the row-level ones
       inside cards and tables. These previously sat at 40px as a density
       compromise; on a touch screen a mis-tap on a trade button costs more
       than the four pixels saved. */
    .action-btn,
    .btn-trade-trigger,
    .news-lang-btn,
    .btn-primary, .btn-secondary,
    .btn-secondary-action, .btn-danger-action,
    .tab-btn,
    .mobile-nav-toggle {
        min-height: 44px;
        padding-inline: 0.7rem;
    }
    .mobile-nav-toggle { min-width: 44px; }

    /* Modals stay inside the viewport. */
    .modal-content {
        width: min(560px, calc(100vw - 1.5rem));
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
    }
}

/* ==========================================================================
   MOBILE — phones
   ========================================================================== */
@media (max-width: 768px) {

    .dashboard-container { padding: 0.65rem 0.6rem 2rem; }

    /* ---- Header ---------------------------------------------------------
       Logo and hamburger stay on one row; the health strip scrolls
       horizontally inside itself so it never widens the page. */
    .glass-header {
        padding: 0.7rem 0.8rem;
        margin-bottom: 0.85rem;
        gap: 0.5rem;
        position: relative;
    }

    .glass-header .logo { flex: 1 1 auto; min-width: 0; }
    .glass-header .logo h1,
    .glass-header .logo .app-title { font-size: 1.05rem; }

    .system-health-strip {
        order: 3;
        flex: 1 0 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .system-health-strip::-webkit-scrollbar { display: none; }
    .system-health-strip > * { flex: 0 0 auto; }

    #market-clock-chip { flex: 0 0 auto; }

    /* ---- Navigation drawer ---------------------------------------------
       The existing action cluster is repositioned as an off-canvas panel.
       Same nodes, different presentation — no duplicated markup. */
    .mobile-nav-toggle { display: inline-flex !important; }

    .glass-header .actions {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(86vw, 340px);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.55rem;
        padding: 4.25rem 0.9rem 1.5rem;
        background: var(--bg-card, #0f172a);
        border-left: 1px solid var(--border-glass, rgba(255,255,255,0.1));
        box-shadow: -18px 0 40px rgba(0, 0, 0, 0.55);
        transform: translateX(100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 1400;
    }

    body.nav-open .glass-header .actions { transform: translateX(0); }

    .mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 23, 0.6);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
        z-index: 1300;
    }
    body.nav-open .mobile-nav-backdrop { opacity: 1; pointer-events: auto; }

    /* Drawer children become full-width touch targets. */
    .glass-header .actions > *,
    .glass-header .actions .dropdown-wrapper,
    .glass-header .actions .notification-wrapper { width: 100%; }

    .glass-header .actions .btn {
        width: 100%;
        justify-content: flex-start;
        min-height: 44px;
        font-size: 0.9rem !important;
        padding: 0.65rem 0.85rem !important;
        border-radius: 8px;
    }

    /* Dropdowns flow inline inside the drawer instead of floating off-screen. */
    .glass-header .actions .dropdown-menu {
        position: static !important;
        width: 100% !important;
        top: auto !important;
        right: auto !important;
        box-shadow: none !important;
        border: 1px solid var(--border-glass, rgba(255,255,255,0.1));
        margin-top: 0.35rem;
    }
    .glass-header .actions .dropdown-item { min-height: 42px; display: flex; align-items: center; }

    #notif-dropdown {
        position: static !important;
        width: 100% !important;
        max-height: 50dvh;
        overflow-y: auto;
    }

    /* ---- Mobile information hierarchy ----------------------------------
       Market status, portfolio, today's recommendation, positions, then the
       rest. Ordering only — no widget is hidden or duplicated. */
    .widget-grid-container { display: flex; flex-direction: column; }
    .bist-hero-countdown-card      { order: 1; }
    #widget-portfolio              { order: 2; }
    #decision-panel-container      { order: 3; }
    #widget-positions              { order: 4; }
    #opportunity-ranker-container  { order: 5; }
    #reasoning-component-container { order: 6; }
    #widget-risk                   { order: 7; }
    #widget-signals                { order: 8; }
    #widget-desk                   { order: 9; }
    .widget-grid-container > *     { order: 12; }

    /* ---- Cards ----------------------------------------------------------- */
    .widget-card, .intel-card {
        padding: 0.85rem !important;
        border-radius: 12px;
    }
    .widget-header, .intel-card-header {
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .widget-title, .intel-card-title { font-size: 0.95rem; }
    .widget-badge { font-size: 0.68rem; }

    /* Dense metric grids collapse to two columns rather than overflowing. */
    .price-target-grid,
    .position-sizing-box .sizing-row,
    .summary-grid,
    .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    .stat-box, .pos-metric { min-width: 0; }

    /* ---- Positions table -> cards ---------------------------------------
       Rows carry data-label attributes, so each row can present as a labelled
       card without a second markup path. */
    .mobile-card-table thead { display: none; }
    .mobile-card-table,
    .mobile-card-table tbody,
    .mobile-card-table tr,
    .mobile-card-table td { display: block; width: 100%; }

    .mobile-card-table tr {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--border-glass, rgba(255,255,255,0.1));
        border-radius: 10px;
        padding: 0.7rem 0.8rem;
        margin-bottom: 0.65rem;
    }

    .mobile-card-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        border: none;
        padding: 0.28rem 0;
        text-align: right;
        font-size: 0.85rem;
    }

    .mobile-card-table td::before {
        content: attr(data-label);
        color: var(--text-muted, #94a3b8);
        font-size: 0.74rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        text-align: left;
        flex: 0 0 auto;
    }

    /* Symbol row reads as the card title. */
    .mobile-card-table td[data-label="Hisse"] {
        border-bottom: 1px solid var(--border-glass, rgba(255,255,255,0.1));
        padding-bottom: 0.45rem;
        margin-bottom: 0.35rem;
    }
    .mobile-card-table td[data-label="Hisse"]::before { content: ""; }
    .mobile-card-table td[data-label="Hisse"] { justify-content: flex-start; }

    /* Action buttons wrap to their own full-width row. */
    .mobile-card-table td[data-label="İşlemler"] { flex-wrap: wrap; justify-content: stretch; }
    .mobile-card-table td[data-label="İşlemler"]::before { content: ""; flex: 0 0 100%; }
    .mobile-card-table td[data-label="İşlemler"] .btn { flex: 1 1 auto; min-height: 40px; }

    .mobile-card-table td.empty-msg { justify-content: center; text-align: center; }
    .mobile-card-table td.empty-msg::before { content: ""; }

    /* Any table not converted to cards scrolls inside its own card. */
    .data-table { min-width: 520px; }
    .mobile-card-table { min-width: 0 !important; }

    /* Telemetry strip wraps rather than clipping. */
    .telemetry-header-bar { flex-wrap: wrap; gap: 0.4rem 0.9rem; }
    .telemetry-item { flex: 0 0 auto; min-width: 0; }


    .order-form-grid,
    .form-row { grid-template-columns: 1fr !important; }

    /* ---- Modals / toasts ------------------------------------------------- */
    .modal-content {
        width: calc(100vw - 1.2rem);
        max-height: calc(100dvh - 1.5rem);
        padding: 1rem !important;
    }
    .toast-container { left: 0.6rem; right: 0.6rem; max-width: none; }

    /* ---- Footer ---------------------------------------------------------- */
    .app-footer-version { font-size: 0.72rem; line-height: 1.7; }
}

/* Small phones */
@media (max-width: 400px) {
    .price-target-grid,
    .summary-grid,
    .metrics-grid { grid-template-columns: 1fr !important; }
    .widget-title, .intel-card-title { font-size: 0.9rem; }
}

/* The hamburger exists only on mobile; desktop never renders it. */
.mobile-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 9px;
    border: 1px solid var(--border-glass, rgba(255,255,255,0.12));
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 1.15rem;
    cursor: pointer;
    flex: 0 0 auto;
}
.mobile-nav-backdrop { display: none; }
@media (max-width: 768px) { .mobile-nav-backdrop { display: block; } }

/* ---------------------------------------------------------------------------
   Autonomous Operating Center (Sprint 4.1)

   The panel is built for the desk. On a phone the operator still needs the
   same three answers — what is the engine doing, what does it hold, why did it
   decide that — so the journal reflows into stacked rows instead of a clipped
   single line, and every control meets the 44px touch floor. Structural only:
   nothing here changes on desktop.
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* !important overrides the compact desk sizing carried inline on each
       control; on a phone the touch floor wins over density. */
    #autonomous-center-container .btn,
    #autonomous-center-container .action-btn {
        min-height: 44px !important;
        flex: 1 1 auto;
    }

    /* Journal rows: one line per record does not fit 375px. Stack instead of
       letting the reason column overflow its container and get cut off. */
    #autonomous-center-container [data-ac-journal-row] {
        flex-wrap: wrap;
        row-gap: 0.2rem;
    }
    #autonomous-center-container [data-ac-journal-row] > div {
        min-width: 0;
    }
    #autonomous-center-container [data-ac-journal-row] > div:nth-child(4) {
        flex: 1 0 100%;
    }

    #autonomous-center-container .field-input {
        min-height: 44px;
        max-width: none !important;
        flex: 1 1 100%;
    }
}

/* ---------------------------------------------------------------------------
   Sprint 4.3 — overflow containment

   A handful of cards still pushed 14–46px past their container on a 375px
   screen: the content did not shrink, so it was silently cut off rather than
   wrapping. The page never scrolled sideways, which is exactly why this went
   unnoticed — the clipping happened inside the cards.

   Flex and grid children default to min-width:auto, so a long unbroken value
   (a price, a symbol, a ratio) refuses to shrink below its content width.
   Allowing them to shrink is what lets the existing wrap rules take effect.
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .widget-grid-container,
    .cockpit-grid-layout,
    .intel-card,
    .explain-ai-box,
    .factor-item-row,
    .bist-hero-countdown-card {
        min-width: 0;
        max-width: 100%;
    }

    .cockpit-grid-layout > *,
    .intel-card > *,
    .explain-ai-box > *,
    .factor-item-row > *,
    .widget-card > * {
        min-width: 0;
    }

    /* Rows of label/value pairs wrap instead of overflowing their card. */
    .factor-item-row,
    .explain-ai-box {
        flex-wrap: wrap;
    }

    /* Long unbroken figures break rather than extend the card. */
    .intel-card, .explain-ai-box, .factor-item-row {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 768px) {
    /* Stat chips: the label is the first thing cut when a card narrows, and a
       truncated "Yatırımdaki Tutar" is a number with no name. Let it wrap. */
    .stat-label, .stat-value, .pos-metric-label, .pos-metric-val {
        white-space: normal;
        overflow-wrap: anywhere;
        min-width: 0;
    }

    /* A checkbox is not a 44px control; its label is the touch target. */
    input[type="checkbox"], input[type="radio"] { min-height: 0; }
}