/* ============================
   Veraius Responsive Design System
   Fluid Typography, Container Queries,
   Touch Targets, Safe Areas, Grid

   Breakpoints (mobile-first):
     xs:  0        (base)
     sm:  640px    small tablets, landscape phones
     md:  768px    tablets
     lg:  1024px   laptops
     xl:  1280px   desktops
     2xl: 1536px   large desktops
     3xl: 1920px   ultrawide
   ============================ */

/* ============================
   Fluid Typography
   ============================ */
html {
    font-size: clamp(16px, 0.875rem + 0.25vw, 16px);
}

/* Global overflow guard — prevent horizontal scroll regressions */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ============================
   Image Lazy Loading & Optimization
   ============================ */
img {
    max-width: 100%;
    height: auto;
    content-visibility: auto;
}

img[loading="eager"] {
    content-visibility: visible;
}

/* ============================
   Content Visibility for Off-screen
   ============================ */
.content-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
}

/* Page sections - skip rendering off-screen cards/panels.
   Do not include global shell classes such as .glass-panel here: topbars,
   overlays, and menus also use glass styling and must keep exact dimensions.

   `.data-table-wrapper` BU LISTEDEN CIKARILDI (2026-10-12). OLCULDU: tablo
   satirlari `stagger-item` giris animasyonu tasiyor ve sarmalayici ekran
   disindayken dogan satirlarin animasyonu Chromium'da HIC BASLAMIYORDU
   (`currentTime` 0'da kaliyor, opacity 0). Satis panosunda 11 kartin 7'sinde
   tablo bos gorunuyordu — veri DOM'da vardi (textContent 3.8k), ekranda yoktu.
   Sarmalayici zaten `.section-card` icinde ve o da ekran disi atlamayi
   yapiyor; ic ice ikinci katman kazanc getirmiyordu. */
.card,
.metric-card,
.chart-container,
.content-auto.glass-panel {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
}

/* GPU-accelerated transforms for animated elements.

   `.page-enter` BU LISTEDEN CIKARILDI (2026-09-18).

   OLCULDU: `will-change: transform` KALICI bir kapsama baglami yaratir ve
   icindeki `position: fixed` ogeyi goruntu alanina degil O KABA civiler.
   `.page-enter` kabugun (`WorkspaceShell`) kok kabinda duruyor, yani 625
   rotanin tamaminda. Dort kayit defteri ekraninda modal konumu olculdu:
   IKISINDE sihirbaz goruntu alaninin ALTINDA aciliyordu (y=1017 ve y=1153,
   viewport 950). DOM'da "gorunur" oldugu icin (display:flex, opacity:1) prob
   TEMIZ diyordu; kusuru yalniz EKRAN GORUNTUSU gosterdi.

   Asagidaki `.page-enter.animated { will-change: auto }` kurali niyeti
   dogru yaziyordu ama `animated` sinifini HICBIR YER EKLEMIYOR (tarandi:
   .js/.razor/.cs'te 0 sonuc) — yani temizleme dali hic calismiyordu.

   Bu, hemen asagidaki "Avoid aggressive containment on global layout
   containers" kuralinin ta kendisidir; `will-change` o listeye alinmamisti.

   Animasyon `.page-enter`'in kendi `animation` bildirimiyle CALISMAYA DEVAM
   EDER — `will-change` yalnizca bir ONCEDEN HABER VERME ipucudur, kisa bir
   giris animasyonu icin gerekli degildir. */
.animate-fade-in,
.animate-pulse-glow,
.animate-pulse-opacity {
    will-change: opacity, transform;
}

/* Avoid aggressive containment on global layout containers; it can break sticky/overlay behavior. */
.sidebar,
.app-content {
    contain: none;
}

/* ============================
   Touch Target Enforcement
   ============================ */
.touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* Enforce larger native targets primarily for touch devices */
@media (pointer: coarse) {
    button,
    a[role="button"],
    [role="tab"],
    input[type="checkbox"],
    input[type="radio"],
    select {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Smaller touch targets only on desktop with pointer device */
@media (pointer: fine) {
    .touch-target-desktop,
    .sidebar-nav-item,
    .cmd-result-item {
        min-height: 36px;
        min-width: 36px;
    }
}

/* ============================
   Safe Area Insets
   ============================ */
.safe-area-top { padding-top: env(safe-area-inset-top, 0); }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.safe-area-left { padding-left: env(safe-area-inset-left, 0); }
.safe-area-right { padding-right: env(safe-area-inset-right, 0); }
.safe-area-all {
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

/* ============================
   Responsive Grid System
   ============================ */
.grid { display: grid; gap: 1rem; }
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

/* Auto-fit responsive grid */
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-auto-md { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

/* Responsive columns */
@media (max-width: 767px) {
    .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 {
        grid-template-columns: 1fr;
    }
    .sm\:grid-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid-4, .grid-5, .grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }
    .md\:grid-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ============================
   Container Queries
   ============================ */
.container-query {
    container-type: inline-size;
}

@container (max-width: 400px) {
    .cq\:stack {
        flex-direction: column !important;
    }
    .cq\:full {
        width: 100% !important;
    }
    .cq\:hide {
        display: none !important;
    }
    .cq\:text-sm {
        font-size: 0.75rem !important;
    }
}

@container (min-width: 600px) {
    .cq\:row {
        flex-direction: row !important;
    }
    .cq\:show {
        display: flex !important;
    }
}

/* ============================
   Responsive Spacing
   ============================ */
.page-padding {
    padding: 1.5rem;
    min-width: 0;
    overflow-x: hidden;
}

/* Batch hardening for Components/Pages/* wrappers and content blocks */
.page-enter,
.content-auto,
.ws-shell,
.ws-grid,
.ws-main,
.resource-state,
.resource-state-fallback,
.data-table-wrap,
.data-table-scroll,
.table-responsive {
    min-width: 0;
}

.data-table-wrap,
.data-table-scroll,
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.page-padding > * {
    max-width: 100%;
}

/* DİKEY RİTİM. .page-padding çocuklarına hiç boşluk vermiyordu; her sayfa kendi
   margin'ini yönetiyor ve sonuç tutarsız oluyordu — ÖLÇÜLDÜ 2026-08-27,
   /data-intel/contracts kardeş aralıkları 0 - 24 - 16 - 12 px, yani ilk iki blok
   TAM YAPIŞIK. 7 sayfada aynı bulgu ("div.page-padding.page-enter 0-24px").
   Komşu seçici kullanıldı: yalnız ARDIŞIK kardeşler arasına boşluk koyar, ilk
   çocuğa üst boşluk eklemez (kabın kendi padding'i zaten var).
   Sayfanın KENDİ daha büyük boşluğu korunmalı: bu yüzden `margin-top` yerine
   `min-height`li bir dolgu değil, DÜŞÜK ÖZGÜLLÜKLÜ bir taban değer kullanılıyor.
   :where() özgüllüğü sıfırlar, dolayısıyla herhangi bir sayfa kuralı bunu ezer. */
.page-padding > * + * {
    margin-top: 1rem;
}

/* Aynı ritim boşluğu sayfa KAPSAYICILARINDA da vardı. 290 CSS kuralı, 113 farklı
   sınıf adı altında, birebir aynı kabuğu kopyalıyor:
       .X-container { max-width: var(--content-max-width, 2040px); margin: 0 auto; }
   Hiçbiri çocuklarına dikey boşluk vermiyor. ÖLÇÜLDÜ 2026-08-27:
       /models/governance   .model-container  ardışık aralıklar 24,0,0,0  <- üç blok YAPIŞIK
       /marketplace/analytics .mp-container   24,16,16,32,24              <- kendi boşluğu var
   Yani bazıları kendi boşluğunu yönetiyor, bazıları hiç vermiyor; sonuç tutarsız.

   :where() ile özgüllük SIFIR — kendi boşluğunu veren sayfa kuralı bunu ezer,
   hiç vermeyen 1rem taban alır. Sınıf adları tek tek listelenmedi: 113 adın
   107'si "-container", 6'sı "-screen"/"-shell" ile bitiyor (ÖLÇÜLDÜ).
   [class$="-shell"] KULLANILMADI: .ws-shell (kabuk kökü), .chat-shell ve
   .ops-shell grid/flex düzenleri ve margin-top bunları bozar. Kalıptaki tek
   -shell adı .home-shell; o açıkça yazıldı. */
[class$="-container"] > * + *,
[class$="-screen"] > * + *,
.home-shell > * + * {
    margin-top: 1rem;
}

/* KABUĞUN İÇİ de aynı ritmi almalı. Sayfalar WorkspaceShell'e göç edince kökleri
   .page-padding / .X-container olmaktan çıkıp .ws-main oldu ve YUKARIDAKİ İKİ
   KURALIN DA KAPSAMI DIŞINA düştüler — göçün sessiz yan etkisi.

   ÖLÇÜLDÜ 2026-09-02 (gerçek tarayıcı, oturum açık, 1440x900):
       /agents/versions     nav:0  div:16  div:0  div:0  div:0  div:0  footer:80
       /decisions/dashboard div:16 div:0   div:0  details:0 details:0
       /knowledge-base      div:0  div:0   div:0  button:12
   Yani bloklar YAPIŞIK; gezinti raporunda 35 sayfada "tutarsız dikey boşluk:
   main.ws-main 0-80px" olarak çıktı.

   :where() KULLANILMAZ — özgüllüğü sıfırlar ve bu dosyadan SONRA yüklenen
   stil sayfaları kuralı sessizce ezer (ÖLÇÜLDÜ 2026-08-27: kural CSSOM'da,
   hedefle eşleşiyor, son sırada, yine de margin-top 0px çözülüyordu).
   Özgüllük düşük tutulur (tek sınıf) ki sayfanın kendi boşluğu kazansın. */
.ws-main > * + * {
    margin-top: 1rem;
}

/* RITIM: `margin-top: 1rem` TEK BASINA yetmiyor cunku cocuklar kendi
   `margin-bottom`larini tasiyor ve ikisi toplaniyor.

   ÖLÇÜLDÜ 2026-09-14 /agents/configuration:
     cocuk marjlari : 0/0 · 8/8 · 16/16 · 16/32 · 16/0
     gercek bosluk  : 8, 8, 23, 31px

   DENENDI VE GERI ALINDI: `.ws-main > * { margin-bottom: 0 }` eklendi,
   HICBIR SEY DEGISMEDI. Sebep ozgulluk: suclu kurallar SCOPED CSS'te
   (`.agents-hub-nav[b-9vsvc4t6s1]` = 0,2,0) ve tek-sinif kuralimi (0,1,0)
   yeniyor. Ozgullugu kuresel olarak yukseltmek, gercekten kendi boslugunu
   isteyen bilesenleri de ezerdi — bu yuzden yapilmadi.

   Dogru cozum bilesen bazinda: her `.ws-main` cocugu kendi alt marjini
   BIRAKMALI, ritmi kap tasimali. Bu, dokunulan her bilesende tek tek
   uygulanacak bir temizliktir; toplu bir CSS kurali degil. */

@media (max-width: 767px) {
    .page-padding {
        padding: 1rem 0.75rem;
    }

    .ws-main,
    .data-table-wrap,
    .data-table-scroll,
    .table-responsive {
        overflow-x: auto;
    }

    .data-table {
        min-width: 32rem;
    }
}

@media (min-width: 1920px) {
    .page-padding {
        padding: 2rem 3rem;
    }
}

/* ============================
   Responsive Text Utilities
   ============================ */
@media (max-width: 767px) {
    .headline-lg { font-size: var(--font-size-3xl); }
    .headline-md { font-size: var(--font-size-2xl); }
    .display-lg { font-size: 2.5rem; }
    .display-md { font-size: 2rem; }
}

/* ============================
   Orientation Handling
   ============================ */
@media (orientation: landscape) and (max-height: 500px) {
    .landscape-compact {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .landscape-hide {
        display: none;
    }
}

/* Print, forced-colors, prefers-contrast: more → veraius-a11y-branches.css (v3-41) */

/* ============================
   Focus Visible (Accessibility)
   ============================ */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Remove focus ring for mouse clicks */
:focus:not(:focus-visible) {
    outline: none;
}

/* ============================
   Breakpoint Utility Classes
   Mobile-first show/hide utilities matching the sm/md/lg/xl scale
   ============================ */

/* Hide by default, show at breakpoint */
.sm\:show, .md\:show, .lg\:show, .xl\:show, .\32xl\:show { display: none; }

@media (min-width: 640px) {
    .sm\:hide { display: none !important; }
    .sm\:show { display: initial !important; }
    .sm\:flex { display: flex !important; }
    .sm\:block { display: block !important; }
}
@media (min-width: 768px) {
    .md\:hide { display: none !important; }
    .md\:show { display: initial !important; }
    .md\:flex { display: flex !important; }
    .md\:block { display: block !important; }
}
@media (min-width: 1024px) {
    .lg\:hide { display: none !important; }
    .lg\:show { display: initial !important; }
    .lg\:flex { display: flex !important; }
    .lg\:block { display: block !important; }
}
@media (min-width: 1280px) {
    .xl\:hide { display: none !important; }
    .xl\:show { display: initial !important; }
    .xl\:flex { display: flex !important; }
    .xl\:block { display: block !important; }
}
@media (min-width: 1536px) {
    .\32xl\:hide { display: none !important; }
    .\32xl\:show { display: initial !important; }
}

/* ============================
   Ultrawide Chat Layout Clamps
   Prevents chat messages/sidebar from stretching too wide on 2K+ screens
   while remaining fluid below.
   ============================ */
:root {
    /* Base tokens may be overridden by theme; provide safe fluid fallbacks */
    --chat-message-max-width: clamp(32rem, 60vw, 52rem);
    --chat-sidebar-width: clamp(16rem, 22vw, 22rem);
}

@media (max-width: 767px) {
    :root {
        --chat-message-max-width: 100%;
        --chat-sidebar-width: 100vw;
    }
}

/* ============================
   Enhanced .page-padding scale
   Handles phones → ultrawide gracefully.
   ============================ */
@media (min-width: 1280px) {
    .page-padding {
        padding: 2rem 2.5rem;
    }
}

@media (min-width: 1536px) {
    .page-padding {
        padding: 2.5rem 3rem;
    }
}

@media (min-width: 1920px) {
    .page-padding {
        padding: 3rem 4rem;
        max-width: 1800px;
        margin-inline: auto;
    }
}

/* ============================
   Responsive Flow Utilities
   Stack-on-mobile / horizontal-on-desktop without hand-rolled @media
   ============================ */
.flow-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .flow-stack-md { flex-direction: row; }
}

@media (min-width: 1024px) {
    .flow-stack-lg { flex-direction: row; }
}

/* Prevent text overflow on narrow screens */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-wrap-balance {
    text-wrap: balance;
}

/* ============================
   App Shell Chrome Guard
   These rules intentionally live in global CSS instead of isolated component
   CSS because stale dev-server/scoped-bundle states can leave shell elements
   without their b-* scope attributes. The chrome must remain usable anyway.
   ============================ */
.app-shell[data-chrome="full"] {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    padding-top: 0; /* header artik icerik kolonunda, fixed degil (2026-10-18) */
}

/* EMNİYET KURALI, YERLEŞİM KURALI DEĞİL.
   Bu blok scoped bundle bozulduğunda kabuğun kullanılabilir kalmasını sağlar:
   sabit konum, yükseklik, katman. Ama `display:flex !important` bileşenin KENDİ
   yerleşimini de eziyordu.

   ÖLÇÜLDÜ 2026-09-03, /home 1440px, canlı DOM:
       AppShellTopbar.razor.css  →  display: grid (1fr auto 1fr)   ← yazılmış
       veraius-responsive.css    →  display: flex !important       ← KAZANAN
   Kural koşulsuzdu (blok derinliği 0, media query dışında), dolayısıyla
   masaüstünde de uygulanıyordu ve bileşenin grid'i ÖLÜ KODDU. Slogan
   `grid-column: 2` ile ortalanmak üzere yazılmıştı ama flex akışına düşüyordu.

   Geri düşüş :where() ile ÖZGÜLLÜĞÜ SIFIR yazıldı: bileşenin kendi kuralı
   (.app-topbar[b-xxxxx], özgüllük 0-2-0) onu her zaman ezer, ama scope
   niteliği yoksa (bundle bozuk) hiçbir display kuralı kalmadığından bu devreye
   girer. Scope hash'ine BAĞLANMADI: hash her derlemede değişebilir.

   :where() burada DOĞRU araç — bölüm 5'teki dikey ritim kuralında yanlıştı,
   çünkü orada sayfa kuralının ezmesi İSTENMİYORDU. Burada tam tersi. */
:where(.app-topbar) {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-topbar {
    align-items: center;
    /* shadcn dashboard-01 SiteHeader (2026-10-18): inset kartin icinde, akista,
       h-12 (48px). Onceden tam genislik fixed 64px bardi. */
    position: relative !important;
    z-index: var(--z-topbar, 500);
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 var(--space-6, 1.5rem);
    background: var(--glass-bg);
    border-bottom: 1px solid var(--ghost-border);
    border-radius: 0 !important;
    box-shadow: var(--shadow-xs);
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
}

.topbar-left {
    flex: 1;
    min-width: 0;
    gap: var(--space-3, 0.75rem);
}

.topbar-right {
    gap: var(--space-2, 0.5rem);
}

.app-body {
    display: flex !important;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: var(--space-3, 0.75rem);
    gap: var(--space-3, 0.75rem);
    background-color: var(--surface-container-lowest);
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
}

.app-content {
    display: flex !important;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.app-content-surface {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--surface);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-xs);
    padding: var(--content-pad-y, 1.25rem) var(--content-pad-x, 2rem);
    width: 100%;
    max-width: var(--content-max-width, 2040px);
    margin-inline: auto;
}

/* Pages that floor themselves at viewport height fight the scrolling surface;
   re-floor to the surface so there's no second scrollbar. */
.app-content-surface > .app-error-boundary > *,
.app-content-surface > * {
    min-height: 0;
}

@media (min-width: 768px) {
    /* shadcn inset: sidebar kendi kartini tasimaz, zeminde durur (2026-10-18). */
    .app-body > .sidebar {
        border-radius: var(--card-radius);
        overflow: hidden;
        box-shadow: none;
        background-color: transparent;
    }
}

@media (max-width: 767px) {
    .app-topbar {
        padding: 0 var(--space-4, 1rem);
    }

    .app-body {
        padding: 0;
        gap: 0;
    }

    .app-content {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    .app-content-surface {
        border-radius: 0;
        border: none;
        box-shadow: none;
        /* Tighter edge-to-edge gutter on phones. */
        padding: var(--space-3, 0.75rem);
    }
}