/* ================================================================
   361 Platform - Base CSS (m.css)
   BuildAllCSS Source #1 - Minimal safe enhancements v3
   Loaded BEFORE meta.xml ElementStyles - lowest specificity layer
   NOTE: Do NOT add global resets (margin/padding/border on * or tags)
         ElementStyles already handle all element-specific styling
   ================================================================ */

/* ---- Barcode Fonts ---- */
@font-face { font-family: 'BarCode'; font-display: swap; src: url('/fonts/BarCode.ttf'); }
@font-face { font-family: 'Code39'; font-display: swap; src: url('/fonts/LibreBarcode39Text-Regular.ttf'); }
@font-face { font-family: 'Code128'; font-display: swap; src: url('/fonts/LibreBarcode128Text-Regular.ttf'); }
@font-face { font-family: 'EAN13'; font-display: swap; font-feature-settings: "calt" 1; src: url('/fonts/LibreBarcodeEAN13Text-Regular.ttf'); }

/* ---- CSS Custom Properties & System Hints ---- */
:root {
    --font-sans: 'HankenGrotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* Spacing Scale */
    /* ⛔ 2026-09-02 (backlog L17030) — rem DEGIL px. --text-* ile AYNI kok (2026-08-28
       kullanici karari, commit baf5b4a6f): olcek 16px kok varsayimiyla yazilmisti,
       platform koku `html{font-size:11px}` => bosluk olcegi %31 dar cozuluyordu.
       OLCULDU (kok 11px -> 16px tabani px):
         --space-1 0,25rem = 2,75px -> 4px   · --space-2 0,50rem = 5,50px -> 8px
         --space-3 0,75rem = 8,25px -> 12px  · --space-4 1rem    = 11px   -> 16px
       Tuketici: yalniz zz-itemview-kart.css (42 kullanim; dosyanin kendi yorumu
       zaten "8px kartlar arasi / 12px kart ici" diye px NIYETINI yaziyor).
       px oldugu icin kok punto degisse bile olcek KAYMAZ. */
    --space-1: 4px;      --space-2: 8px;      --space-3: 12px;
    --space-4: 16px;     --space-5: 20px;     --space-6: 24px;
    --space-8: 32px;     --space-10: 40px;    --space-12: 48px;

    /* Typography Scale */
    /* ⛔ 2026-08-28 — rem DEGIL px. Bu olcek 16px kok varsayimiyla yazilmisti;
       platformun koku `html{font-size:11px}` => TUM olcek %31 kucuk cozuluyordu:
         --text-xs 0,75rem = 8,25px · sm = 8,94 · base = 9,62 · lg = 11,00
       yani bir GOVDE olcusu (base) 9,6px'e dusuyor ve dordu de 12px okunabilirlik
       barinin ALTINDA kaliyordu. Olculdu: canli finans, 390px, 117 bulgu.
       KARAR (kullanici, 2026-08-28): platform YOGUNLUGUNA gore px'e sabitle —
       kartlar 12px barini gecer ama cevredeki 11px platform metnini EZMEZ.
       px oldugu icin kok punto degisse bile olcek KAYMAZ. */
    --text-xs: 12px;      --text-sm: 12px;      --text-base: 13px;
    --text-lg: 14px;      --text-xl: 16px;      --text-2xl: 18px;
    --text-3xl: 20px;

    /* Radii */
    --radius-sm: 4px;     --radius-md: 8px;     --radius-lg: 12px;
    --radius-xl: 16px;    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;

    accent-color: var(--primaryColor, #3b82f6);
    color-scheme: light dark;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---- Performance: content-visibility for off-screen content ---- */
.EntityTypeView > .ViewBody > *:not(:first-child),
.EntityTypeView .MiddleRight > *:not(:first-child),
.SingleItem .ItemBody > *:not(:first-child) {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
}

/* ---- Kanban WIP Limits ---- */
.KanbanWIPBadge {
    font-size: 10px; font-weight: 600; padding: 1px 6px;
    border-radius: 10px; background: rgba(0,0,0,0.06);
    color: rgba(0,0,0,0.4); margin-left: auto; white-space: nowrap;
}
.KanbanColumnNearWIP .KanbanWIPBadge { background: rgba(245,158,11,0.12); color: #d97706; }
.KanbanColumnOverWIP .KanbanColumnCount, .KanbanColumnOverWIP .KanbanWIPBadge { color: #dc2626; font-weight: 700; }
.KanbanColumnOverWIP { border-top-color: #dc2626 !important; }

/* ---- Gantt Critical Path ---- */
.GanttBar.GanttCriticalPath {
    border: 2px solid #dc2626 !important;
    box-shadow: 0 2px 8px rgba(220,38,38,0.3);
}
.GanttBar.GanttCriticalPath .GanttBarProgress { background: rgba(220,38,38,0.5); }

/* ---- Gantt Drag & Resize ---- */
.GanttBar {
    cursor: grab;
    transition: box-shadow 0.15s ease;
}
.GanttBar:active { cursor: grabbing; }
.GanttBar.GanttBarDragging {
    opacity: 0.7;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 100;
}
.GanttBar.GanttBarResizing {
    box-shadow: 0 0 0 2px #1976d2;
    z-index: 100;
}
.GanttResizeHandle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    z-index: 5;
    background: transparent;
}
.GanttResizeHandle:hover {
    background: rgba(255,255,255,0.4);
}
.GanttResizeHandleLeft {
    right: auto;
    left: 0;
}

/* ---- Screen Reader Only Utility ---- */
.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Focus Styles (Modern - keyboard only) ---- */
*:focus-visible {
    outline: 2px solid var(--focusColor, rgb(10, 110, 185));
    outline-offset: 1px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

.Nav:focus,
.Nav:focus-visible {
    outline: none;
}

/* ---- Scrollbar Styling (Webkit) ---- */
::-webkit-scrollbar {
    width: 10px;   /* C4 (2026-06-13): 6px was hard to grab as a drag handle; 10px is a comfortable pointer target */
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbarTrackColor, transparent);
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbarThumbColor, rgba(127,127,127,0.3));
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(127,127,127,0.5);
}

/* ---- Scrollbar Styling (Firefox) ---- */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbarThumbColor, rgba(127,127,127,0.3)) var(--scrollbarTrackColor, transparent);
}

/* ---- Text Selection ---- */
::selection {
    background: var(--selectionColor, rgba(0,158,247,0.2));
}

/* ---- Message Types (semantic colors) ---- */
.info, .error, .warning, .success {
    padding: 8px 12px;
    text-align: center;
    margin: 2px;
    border-radius: 4px;
}
.info    { background: rgba(0,158,247,0.1); color: var(--infoColor, #009ef7); border: 1px solid rgba(0,158,247,0.2); }
.error   { background: rgba(220,38,38,0.1); color: var(--errorColor, #dc2626); border: 1px solid rgba(220,38,38,0.25); }
.warning { background: rgba(255,152,0,0.1); color: var(--warningColor, #ff9800); border: 1px solid rgba(255,152,0,0.2); }
.success { background: rgba(70,215,76,0.1); color: var(--successColor, #46d74c); border: 1px solid rgba(70,215,76,0.2); }

/* ---- DatePicker Calendar Icon Clickable ---- */
span.DatePicker::after {
    pointer-events: auto !important;
    cursor: pointer;
}

/* ---- Toast Message Container ---- */
#messagediv {
    background-size: 40px 40px;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.05) 25%, transparent 25%,
                        transparent 50%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.05) 75%,
                        transparent 75%, transparent);
    width: 320px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    left: 0;
    right: 0;
    position: fixed;
    animation: animate-bg 5s linear infinite;
    bottom: 10px;
    z-index: var(--zToast, 9999);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ---- Animations ---- */
@keyframes animate-bg {
    from { background-position: 0 0; }
    to { background-position: -80px 0; }
}

@keyframes pulse {
    0%   { transform: scale(1.0); }
    25%  { transform: scale(1.2); }
    50%  { transform: scale(1.0); }
    75%  { transform: scale(0.8); }
    100% { transform: scale(1); }
}

.faa-pulse.animated,
.faa-pulse.animated-hover:hover {
    animation: pulse 2s linear infinite;
}

@keyframes blinker {
    50% { opacity: 0; }
}

/* ---- CSS Containment for Performance ---- */
.EntityTypeViewBody,
.ByFieldsRight {
    contain: layout style;
}

/* ---- Card Hover Effects ---- */
.CardItem {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.CardItem:hover {
    box-shadow: 0 2px 8px var(--shadowColor, rgba(0,0,0,0.1));
    transform: translateY(-1px);
}

/* ---- SingleItem Form Transitions ---- */
.SingleItem .Field {
    transition: background-color 0.2s ease;
}

.SingleItem .Choice {
    transition: background-color 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease, transform 0.1s ease;
}

.SingleItem .Choice:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.SingleItem .Choice:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ---- Selection Dropdown Transitions ---- */
.SelectionItem {
    transition: background-color 0.12s ease;
}

/* ---- ItemSelection Hover ---- */
.SingleItem .ItemSelection {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.SingleItem .ItemSelection:hover {
    border-color: var(--activeBorderColor, rgb(10,110,185));
    box-shadow: 0 0 0 2px rgba(10,110,185,0.08);
}

/* ---- FieldSet/Panel Visual Grouping ---- */
.SingleItem .FieldSetPanel {
    border-radius: var(--gap, 4px);
}

/* ---- SingleItem CSS Containment for Performance ---- */
.SingleItem {
    contain: layout style;
}

.SingleItem .FieldSetPanel {
    contain: layout style;
}

/* ---- ItemBottom Premium Separator ---- */
.SingleItem > .ItemBottom {
    border-top: 1px solid rgba(127,127,127,0.1);
    padding-top: 4px;
}

/* ---- Empty Field Display Mode Enhancement ---- */
.SingleItem .FieldIsEmpty.Mode_Display .FieldValue {
    border-bottom: 1px dashed rgba(127,127,127,0.15);
}

/* ---- FieldLabel Weight Override ---- */
/* Overrides domain CSSSelector: body .FieldLabel { font-weight: 300 !important } */
.SingleItem .Field .FieldLabel {
    font-weight: 500 !important;
    letter-spacing: 0.01em;
}
.SingleItem .Field.Mode_Edit:focus-within > .FieldLabel {
    font-weight: 600 !important;
}

/* ---- Smooth Input Focus Transition ---- */
.SingleItem .Field.Mode_Edit input,
.SingleItem .Field.Mode_Edit select,
.SingleItem .Field.Mode_Edit textarea {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ---- ManyFields Performance ---- */
.FieldSetPanel.ManyFields {
    contain: content;
}

/* ---- Reduced Motion (Accessibility) ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;  /* C4 (2026-06-13): smooth-scroll jumps were unguarded for vestibular users */
    }
}


/* ---- Print Styles ---- */
@media print {
    body { background: white; }
    .PageZone_LeftNavs, .PageZone_AppsButton { display: none; }
    .MainContent { margin: 0; padding: 0; }
}


/* cb 1787125463 */

/* cb 1787132146 */

/* cb 1787132343 */
/* ================================================================
   Premium UI Enhancements v4
   ================================================================ */

/* ---- Unified Input Focus Ring ---- */
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus,
input[type="url"]:focus, input[type="date"]:focus, input[type="time"]:focus,
textarea:focus, select:focus {
    border-color: var(--inputFocusBorderColor, rgb(10, 110, 185));
    box-shadow: 0 0 0 3px rgba(10, 110, 185, 0.12);
    outline: none;
}

/* ---- Button Press Effect ---- */
.Button:active {
    transform: scale(0.97);
}

/* ---- ItemView Hover ---- */
.ItemView {
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.ItemView:hover {
    background-color: var(--hoverBackColor, rgba(0,0,0,0.04));
}

/* ---- Smooth Scroll ---- */
html {
    scroll-behavior: smooth;
}

/* ---- Toast Slide-in Animation ---- */
#messagediv {
    animation: toastSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes toastSlideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ---- Responsive Typography ---- */
body.Mobile {
    font-size: var(--mobileTextSize, 14px);
}

/* ---- Touch Target Minimums (Mobile) ---- */
body.Mobile .Button,
body.Mobile .NavButton,
body.Mobile .MicroButton {
    min-height: 44px;
    min-width: 44px;
}
body.Mobile .PanelHeader {
    min-height: 48px;
}

/* ---- SingleItem Mobile Stack ---- */
body.Mobile .SingleItem > .ItemBody {
    flex-direction: column;
    border-radius: var(--radiusMd, 8px);
}
body.Mobile .SingleItem .Field {
    padding: var(--space3, 12px);
}

/* ---- Dark Theme Scrollbar ---- */
html.dark-theme ::-webkit-scrollbar-thumb,
html.auto-theme ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
}
html.dark-theme ::-webkit-scrollbar-thumb:hover,
html.auto-theme ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.35);
}

/* ---- Dark Theme Input Styling ---- */
html.dark-theme input,
html.dark-theme textarea,
html.dark-theme select,
html.auto-theme input,
html.auto-theme textarea,
html.auto-theme select {
    color: var(--textColor);
    border-color: var(--borderColor);
}

html.dark-theme,
html.auto-theme {
    color-scheme: dark;
}

/* ---- Skeleton Shimmer Keyframe (shared) ---- */
@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================================
   AKILLI VARSAYILANLAR — sunum kararını SEMANTİKTEN türet
   ============================================================================
   Kullanıcı direktifi (2026-08-18): "UI varsayılan seçimleri (size, alignment
   etc) farklı ihtiyaçlar için akıllı seçilebilir, akıllı mantıklı hale
   getirilse baya iş azalır."

   NEDEN BU DOSYA VAR
   ------------------
   Hiza bugün domain XML'inde ALAN ALAN yazılıyor. Ölçüldü (demo.360bir.com,
   canlı DOM, 2026-08-18):

       .FieldInteger   17/17  center      ← sayı ortalanmış (taranamaz)
       .FieldDate     139/139 center
       .FieldText     470     341 sol / 129 orta   ← AYNI TİP, İKİ FARKLI HİZA

   Yerel 361.xml'de tip dağılımı (62.030 alan):
       Number 5.863 · Integer 5.109 · Money 3.996  => 14.968 sayısal alan
       Date 5.985 · Bool 2.883
   Bu kararların her biri elle veriliyor. Tipten türetilince tek kural
   binlerce alanı aynı anda doğrular ve YENİ modüller onu bedavaya alır.

   MEKANİZMA ZATEN VAR — eksik olan TÜKETİCİYDİ
   --------------------------------------------
   Platform sınıfı zaten yayıyor:
       Framework/js/et.js:1913   tdi.className = "Field" + field.Type;
       Framework/js/et.js:2855   td.className  = "Field" + field.Type;
   => FieldNumber / FieldInteger / FieldMoney / FieldDate / FieldBool …
   Yani JS'e dokunmaya GEREK YOK; yalnız bu sınıfları kullanan CSS eksikti.

   ÖNCELİK SÖZLEŞMESİ (kritik — 7.12 ezilebilirlik kapısı)
   -------------------------------------------------------
   Bu dosya `NN-*` katmanında ERKEN yüklenir (15 → 20/30/50/70'ten önce) ve
   HİÇBİR kuralda `!important` KULLANMAZ. Sonuç:
     · mirasa KAZANIR      (doğrudan kural, miras edilen değeri ezer)
     · `.AlignCenter`/`.AlignRight`/`.AlignLeft`'e KAYBEDER (onlar !important)
     · domain CSSSelectors'a KAYBEDER (daha geç katman)
   Yani varsayılan bir DAYATMA değil, BAŞLANGIÇ NOKTASIDIR. Açık yazılmış her
   hiza kazanmaya devam eder ve çalışan hiçbir ekran bozulmaz.

   ⛔ KAPSAM BİLEREK DAR: yalnız TABLO HÜCRESİ (`td`). Sınıf iki yerden yayılıyor
   (liste `td` ve öğe görünümü `div`); `div` tarafı kart/form düzenidir ve orada
   sağa hizalama okunabilirliği BOZAR. Genişletmek istenirse ÖNCE ölç.
   ============================================================================ */

/* --- SAYISAL: sağa hizala -------------------------------------------------
   Gerekçe: sayılar basamak hizasıyla karşılaştırılır; sola/ortaya hizalı sayı
   sütununda büyüklük taranamaz. İstemcinin kendi tanımı (a.js:8010)
   NUMERIC_FIELD_TYPES = { Money, Number, Integer } — o listeye SADIK kalındı,
   paralel ikinci bir tip sınıflandırıcı YAZILMADI.
   Currency/Counter ayrıca eklendi: 361.xml'de 290 + 341 kullanım var ve ikisi
   de sayısal gösterilir. */
td.FieldNumber,
td.FieldInteger,
td.FieldMoney,
td.FieldCurrency,
td.FieldCounter {
    text-align: right;
    font-variant-numeric: tabular-nums;   /* basamaklar dikey hizalanır */
}

/* --- TARİH: KURAL YAZILMADI (bilerek) -------------------------------------
   İlk sürümde `td.FieldDate { text-align:right }` yazılmıştı ve ÖLÇÜLDÜ Kİ
   HİÇ UYGULANMIYOR. Kazanan kural servis edilen core.css'te bulundu:

       @439359  /* META : .Base.ItemStyles.SingleItem.Field.FieldDate * /
       td.FieldDate, td.FieldDateTime { text-align: center !important; }

   Bu, meta.xml'deki bir ElementStyle'dan ÜRETİLİYOR ve `!important` taşıyor —
   yani tarihlerin ortalanması BİLİNÇLİ BİR PLATFORM KARARIDIR, kaza değil.
   Ölü bir kural bırakmak yerine kaldırıldı: çalışan bir kararı CSS hilesiyle
   dövmek "çalışanı bozma" kuralının ihlalidir. Değişmesi isteniyorsa doğru yer
   meta.xml ElementStyle'dır (derleme + tüm kiracılar => ayrı karar).

   ⭐ BURADAN ÇIKAN MİMARİ BULGU: Meta CSS zaten bir "tip bazlı varsayılan"
   katmanıdır. Yani akıllı varsayılanların ASIL EVİ meta.xml ElementStyle'dır;
   bu CSS dosyası yalnız Meta'nın kural YAZMADIĞI tiplerde etkilidir
   (ölçüldü: FieldNumber'da Meta kuralı yok => varsayılanım uygulandı). */

/* --- BOOL: ortala ---------------------------------------------------------
   Gerekçe: tek işaret (✓/✗) — sütun içinde ortalanınca taranabilir. */
td.FieldBool {
    text-align: center;
}

/* --- METİN: sola hizala ---------------------------------------------------
   Gerekçe: ölçülen tutarsızlığın kaynağı (341 sol / 129 orta). Metin daima
   sola hizalanır; ortalanmış metin sütunu okuma hattını kırar.
   NOT: bu kural mirasa kazanır ama açık `.AlignCenter`'a kaybeder — yani
   bilerek ortalanmış bir metin hücresi ORTALANMIŞ KALIR. */
td.FieldText,
td.FieldTextArea,
td.FieldChoice {
    text-align: left;
}

/* --- DOKUNMA HEDEFİ TABANI (WCAG 2.2 AA · 2.5.8) --------------------------
   Gerekçe: her etkileşimli öğede 24x24 CSS px taban. Tek kural, tüm yüzey.
   `min-*` kullanılır ki daha büyük hedefler KÜÇÜLMESİN; satır-içi metin
   bağlantıları (WCAG'ın açık istisnası) KAPSAM DIŞI bırakılmıştır. */
button,
[role="button"],
input[type="checkbox"],
input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
}

/* zz-mobil-baslik-tasma.css yeniden derlemesi icin tetik (izleyici NN-*.css degisimini izler) */

/* tetik: zz-a11y-typography.css kontrast duzeltmesi icin yeniden derleme */

/* tetik: zz-mobil-baslik-tasma ozgulluk duzeltmesi */

/* tetik: ListFieldTitles ulasilamaz icerik duzeltmesi */

/* tetik: zz-masaustu-tasma.css */

/* tetik: MicroButton 24px */

/* tetik: ListFieldTitles ozgulluk */

/* tetik: 20-uxcx-v5 geri alimi */

/* tetik: masaustu D1 */

/* tetik: D1 span */

/* tetik: D1 span v2 */

/* tetik: yan ray kaydirma */

/* tetik: D11 yatay kaydirma */

/* tetik: UserTable geri alimi */

/* tetik: ListFooter */

/* tetik: liste kaplari her kadraj */

/* tetik: zz-rozet-nav-serit.css */

/* tetik: zz-from-361 yazim hatasi + rozet katmani */

/* tetik: no-op kurallar kaldirildi + rakip hover geri alindi */

/* tetik: yorum dengesi onarildi (Action_New kurali geri) */

/* tetik: AggregateEmpty bos rozet katmani */

/* tetik: AggregateEmpty bos rozet katmani */

/* --- GÖRÜNÜM SEÇİCİ: sıfır öğeliyse ÖLÜ KONTROL ---------------------------
   axe-core (130 modül) `aria-command-name` altında 34 düğüm bildirdi ve örnek
   hedef `<a role="button" class="EntityTypeLists Menu_Arrow_Down ItemCount_0">`
   çıktı. ÖLÇÜLDÜ (localhost, /mPropertyProperty):

     .EntityTypeLists.ItemCount_0   -> 1 adet, GÖRÜNÜR, 73×54 px
     metin ""  ·  aria-label yok  ·  title yok
     tıklandığında açılan menü      -> 0 menü / 0 öğe
     aynı ekranda yönetim düğmesi   -> 0

   Yani yer kaplayan, adsız ve HİÇBİR ŞEY YAPMAYAN bir kontrol. Ekran okuyucu
   onu "button" diye okuyor ve ne yaptığını söyleyemiyor.

   ⛔ Neden AD vermek değil GİZLEMEK: bu dosyanın kardeş kuralı (AddMicroButton,
   a-aggregate/atom.js) diyor ki *"ad türetilemiyorsa DOKUNULMAZ — uydurma bir ad
   adsızlıktan kötüdür"*. Sıfır öğeli bir seçiciye ad vermek, işe yaramayan bir
   kontrolü meşrulaştırır.
   ⛔ Neden "yol kapatmıyor": menü ÖLÇÜLDÜ ve boş; yönetim ayrı kontrolde.
   `ItemCount_N` (N>0) olanlar DOKUNULMAZ — onlar çalışıyor ("Aktifler").
   -------------------------------------------------------------------------- */
.EntityTypeLists.ItemCount_0 {
    display: none;
}

/* tetik: AggregateEmpty display:none -> visibility:hidden (rozet tavuk-yumurta) */
/* ═══════════════════════════════════════════════════════════════════════════
   16-eksik-tokenlar.css — ÇEKİRDEĞİN KULLANDIĞI AMA SAHİBİ OLMADIĞI TOKEN'LAR
                            + ÖLÇÜLMÜŞ WCAG 2.2 AA DÜZELTMELERİ
   ═══════════════════════════════════════════════════════════════════════════
   NEDEN VAR (2026-08-18, uçtan uca ekran denetimi — 1539 ekran):
     Servis edilen pakette **14 token yedeksiz `var(--x)` ile okunuyor ama
     hiçbir yerde tanımlı değil** ⇒ o **49 bildirim** CSS motorunca GEÇERSİZ
     sayılıyor ve HİÇ UYGULANMIYOR. Hata yok, konsol temiz, kural dosyada
     duruyor — ama ölü.

   EN AĞIR SONUÇ — `--white` (23 ölü bildirim):
     `.Content > .EntityTypeView > … > .PanelHeader { color: var(--white) }`
     Tasarım, modül renginin üstüne BEYAZ başlık istiyor. Token tanımsız olduğu
     için bildirim ölü kaldı ve başlık meta.xml'deki
     `--panelHeaderTextColor: #000080` (LACİVERT) değerini devraldı. Zemin ise
     modülün kendi rengi (`Entity/@Color`, ör. Kartvizitler `#4B0082` MOR).
     ⇒ **1.24:1** kontrast (AA eşiği büyük metin 3:1) — başlık okunmuyor.
     Beyaz/mor = **12.95:1**.

   DEĞERLER UYDURULMADI: `--tab*` ve `--bs-*` değerleri domain XML'inde
     (`OUTPUT/361.xml` CSSSelector) zaten yazılıydı; çekirdeğe terfi eden
     kurallar (`zz-from-361.css`) tanımları geride bıraktığı için ölü kaldılar.
     Burada kural ile tanım aynı katmana getiriliyor.

   ⛔ KAPSAM DIŞI BIRAKILANLAR — bilerek: `--TopbackColor`, `--PageZone_LRNavs`.
     Kapının ilk sürümü bunları da "ölü" saymıştı; ölçüldü ki kullanımları
     `zz-mobile-drawer.css` içindeki AÇIKLAMA YORUMLARININ içinde. Tanımlansalardı
     masaüstü rayına `max-width:104px` gelecek ve ÇALIŞAN düzen bozulacaktı.
     Kapı artık yorumları ayıklıyor (sınav 11/11).

   KURAL: çekirdek katman, sahibi olmadığı bir token'a YEDEKSİZ bağımlı olamaz.
   KAPI : node scripts/ui/ui-kapilari.js   ·   0 TAMAM · 1 BULGU · 2 ÖLÇÜLEMEDİ
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── temel renkler ─────────────────────────────────────────────────── */
    --white: #ffffff;
    --black: #000000;

    /* ── AA-güvenli birincil ton (aynı H/S, L 0.48 → 0.38) ──────────────
       Beyaz metin `#009ef7` üstünde 2.90:1 ölçüldü (AA 4.5 ister).
       `#007cc2` ile 4.50:1 — marka tonu korunur, okunabilirlik sağlanır. */
    --primaryAA: #007cc2;

    /* ── Bootstrap kalıntısı: FORM DOĞRULAMA geri bildirimi ölüydü ──────
       `.InvalidField .Choices a { background: rgba(var(--bs-danger-rgb),.1) }`
       hiç uygulanmıyordu ⇒ geçersiz alan kullanıcıya HİÇ gösterilmiyordu. */
    --bs-danger-rgb: 241, 65, 108;
    --bs-green: #198754;

    /* ── sekme görünümü (domain'den terfi eden kurallar bunları arıyor) ── */
    --tabbg: transparent;
    --tabborder: solid 1px rgba(127, 127, 127, 0);
    --tabfontcolor: inherit;
    --tabfontweight: 500;
    --tabselectedbg: transparent;
    /* 2026-08-19 · WCAG 1.4.3: #039BE5 secili sekme metni, #f5f7fa zeminde
       2.86:1 olculdu (esik 4.5) — axe-core, 130 modul. Bu deger bir TASARIM
       KARARI DEGIL, bu katmanin eksik-token DOLGUSUYDU (yorumda yaziyor:
       "domain-den terfi eden kurallar bunlari ariyor"); dolayisiyla AA seviyesine
       cekmek marka kimligine dokunmaz. Kullanici karariyla AYNI ilke uygulandi
       (dugme paleti): TONU KORU, paletin kendi koyu adimina cek.
       Material Light Blue 900 => #01579B / #f5f7fa = 6.89:1.
       Secili sekme, tabani (opaklik .62 ile ~#5e5e5e) karsisinda hala VURGU
       rengi olarak okunur. */
    --tabselectedfontcolor: #01579B;
    --tabspanopacity: 1;

    /* ── select alanının aşağı oku (ikon fontundan) ──────────────────────
       Ölüyken `content:` geçersizdi ⇒ açılır alanlarda ok HİÇ çizilmiyordu. */
    --ChevronDown: var(--icon-Chevron-Down, "\e91d");

    /* ── DAVRANIŞI DEĞİŞTİRMEYEN tanımlar ────────────────────────────────
       Bu ikisinin TASARLANMIŞ değeri bilinmiyor; bugünkü (ölü) davranışı
       birebir koruyan değer veriliyor. Böylece "ölü bildirim" sınıfı kapanır
       ama görsel HİÇBİR ŞEY değişmez. Gerçek değer belirlenince burada
       güncellenir — kural artık tek yerde. */
    --neoShadow: none;
    --bg: var(--backColor, #e8ebf8);
}

/* ═══════════════════════════════════════════════════════════════════════════
   WCAG 2.2 AA — HEPSİ CANLI DOM'DA HESAPLANDI (gözle değil)
   Eşik: normal metin 4.5:1 · büyük metin (≥24px | ≥18.66px+700) 3:1
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⛔⛔ ÖLÜ SEÇİCİ — `--white` tanımlandıktan SONRA ölçülünce ortaya çıktı.
   `layout.css` beyaz başlığı şu zincirle veriyor:
       … > .PanelHeader > .TopCenter > .EntityTypeViewTitle > .EntityTypeViewTitleBody
   Ama 2026-06-30 "TitleLeft" yeniden tasarımından beri başlık **`.TopLeft`**
   içinde çiziliyor (ölçüldü: `div.EntityTypeViewTitleBody < div.EntityTypeViewTitle
   < div.TopLeft < div.Top.PanelHeader`). ⇒ Kural **0 element eşliyor**; token
   tanımlansa bile başlık beyaz olmuyor ve `.EntityTypeViewTitle`'ın devraldığı
   `--panelHeaderTextColor` (#000080 LACİVERT) kazanmaya devam ediyordu.
   Çare: zinciri Top-zone'dan BAĞIMSIZ yaz (torun seçici). Kapsam yine yalnız
   modül renkli içerik başlığı — iç panellerin açık zeminli başlıkları etkilenmez. */
/* ⭐ GENELLEME (2026-08-20) — asagidaki liste yalniz BILINEN torunlari sayiyordu ve
   listeye alinmamis her yeni yuzey ayni kusuru yeniden uretiyordu (olculdu:
   /SurveyManagement/mSurveys, `span.ButtonText` "Varsayilan" sari baslikta 1.67:1).
   Cozum listeyi uzatmak degil: rengi KABA ver, DEVRALMA calissin. Kendi zemini olan
   dugmeler zaten kendi `color`'ini yaziyor (`zz-from-361.css:213` -> #ffffff), yani
   onlar ETKILENMEZ. */
.Content > .EntityTypeView > .EntityTypeViewBody > .Center > .PanelHeader {
    color: var(--contentHeaderForeground, inherit);
}

.Content > .EntityTypeView > .EntityTypeViewBody > .Center > .PanelHeader .EntityTypeViewTitle,
.Content > .EntityTypeView > .EntityTypeViewBody > .Center > .PanelHeader .EntityTypeViewTitleBody,
.Content > .EntityTypeView > .EntityTypeViewBody > .Center > .PanelHeader .EntityTypeViewTitleIcon,
.Content > .EntityTypeView > .EntityTypeViewBody > .Center > .PanelHeader .EntityTypeLists,
.Content > .EntityTypeView > .EntityTypeViewBody > .Center > .PanelHeader .ToggleMenu {
    /* ⭐ AKILLI VARSAYILAN: ön plan ZEMİNDEN türetilir (m.js `$BaslikPaleti`).
       Sabit beyaz, AÇIK renkli modüllerde 2.43:1 veriyordu (AA 3:1 ister).
       Yedek `--white`: JS henüz koşmadıysa bugünkü davranış korunur. */
    color: var(--contentHeaderForeground, var(--white));
}

/* Zaman tüneli kartı — #868e96 / beyaz 3.32:1  →  #5f6672 = 5.78:1 */
.TimelineCardField .TimelineFieldLabel,
.TimelineCardFooter .TimelineCardDate {
    color: #5f6672;
}

/* Zaman tüneli sayacı — #6c757d / #f8f9fa 4.45:1  →  #5a6169 = 5.95:1 */
.TimelineHeader .TimelineCount {
    color: #5a6169;
}

/* İkonlu buton başlığı — #7e8299 / beyaz 3.79:1  →  #5e6278 = 6.01:1 */
.Button.HasImage > .ButtonTitle,
.LoginForm .UserImage,
.LoginForm div.UserPassword > a.PasswordIcon {
    color: #5e6278;
}

/* ⛔⛔ 2026-08-20 — YUKARIDAKİ KURAL ZEMİNİ BEYAZ VARSAYIYOR (yorumu da öyle diyor:
   "#5e6278 = 6.01:1" — BEYAZ üzerinde). Renkli butonda zemin beyaz DEĞİLDİR ve aynı
   renk okunmaz hale gelir. ÖLÇÜLDÜ (/SurveyManagement, "Kopyala" düğmesi):
     buton zemini `btn-secondary` = #6c757d · butonun KENDİ color'ı = beyaz (4.7:1 ✓)
     ama `.ButtonTitle` onu #5e6278'e eziyor  ⇒  1.28:1  (ekran görüntüsüyle
     doğrulandı: metin gri düğmede okunmuyor).
   Bu, kayıtlı dersin bir örneği daha: SABİT ÖN PLAN, DEĞİŞKEN ZEMİNDE HER ZAMAN
   YANLIŞTIR. Çare rengi yeniden seçmek değil — renkli düğme ön planını ZATEN doğru
   biliyor, başlık onu MİRAS ALMALI.
   Kapsam bilerek dar: yalnız `.btn` (kendi paletini taşıyan düğmeler). Paletsiz
   ikonlu düğmeler yukarıdaki koyu rengi korur (beyaz zeminde doğru olan odur).
   ÖLÇÜM: /SurveyManagement düşen 7 → 5 (en kötü 1.28 → 3.13); kalan 5 vaka YEREL
   FİKSTÜR SAPMASIDIR — canlıda `Style[@Name="btn"]` paleti zaten koyulaştırılmış
   (#007bff→#0069d9, #28a745→#1e7e34, #17a2b8→#117a8b; canlıda eski renk 0 geçiş).
   Diğer 4 ekranda gerileme YOK (0 → 0). */
.Button.HasImage.btn > .ButtonTitle {
    color: inherit;
}

/* Parametre etiketi — #78909c / #f0f1f6 2.97:1  →  #546670 = 5.30:1 */
:root {
    --labelcolor: #546670;
}

/* Birincil zemin üstünde beyaz metin — 2.90:1 → 4.50:1
   (yalnız beyaz METİN taşıyan iki yüzey; marka rengi başka yerde değişmez) */
.TopLeft .Actions a,
.EntityTypeLists a.Selected .Aggregate {
    background-color: var(--primaryAA) !important;
}

/* ⛔ YAZIM HATASI KUSURU — `zz-from-361.css:414`
   `.EntityTypeLists a:hover { backgraund-color: #8eff8e; }`
   Özellik adı yanlış yazıldığı için görünüm değiştiricinin ÜZERİNE GELME
   geri bildirimi HİÇ çalışmıyordu. Doğru ad + palete uyumlu ton: */
.EntityTypeLists a:hover {
    background-color: rgba(0, 158, 247, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   YAN RAY GRUPLARI — eşik aşılınca (m.js `$_NavView.Preview`) çizilir
   ═══════════════════════════════════════════════════════════════════════════
   Ray 104px geniştir; modül ana sayfasının grup başlığı stili burada çok yer
   yer. Kompakt, sessiz bir ayıraç: küçük büyük-harf başlık + ince çizgi.
   ⛔ Yalnız `.NavGrouped` altında geçerli ⇒ eşik altındaki (bugün sorunsuz)
      raylar HİÇ ETKİLENMEZ. */
.NavView.NavGrouped .NavGroupTitle {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    opacity: 0.75;
    padding: 6px 4px 2px;
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
    border-top: 1px solid var(--borderColor, rgba(127, 127, 127, 0.2));
    margin-top: 4px;
}

/* İlk grubun üstünde çizgi olmaz (ray başlığıyla çakışır). */
.NavView.NavGrouped > .NavGroup:first-child > .NavGroupTitle,
.NavView.NavGrouped > .NavGroupBody_Free:first-child + .NavGroup > .NavGroupTitle {
    border-top: 0;
    margin-top: 0;
}

.NavView.NavGrouped .NavGroupBody {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   YAN RAY ETİKETİ — KELİME ORTASINDAN KIRILMASIN
   ═══════════════════════════════════════════════════════════════════════════
   ÖLÇÜLDÜ (2026-08-18, ekran görüntüsüyle yakalandı — hiçbir kapı görmedi):
   ray etiketleri `overflow-wrap: anywhere` ile çiziliyor ve 86px genişlikte
   kelimeyi ORTADAN kırıyor: "Onay Bekleyenler" → "BEKLEYENLE / R",
   "Zimmetlerim" → "ZİMMETLERİ / M". Okunabilir ama cilasız; "premium" ölçütünü
   düşüren tam bu sınıf.
   BİLGİ KAYBI YOK — ölçüldü: 15/15 etikette ebeveyn `tooltip` TAM METNİ taşıyor.
   Bu yüzden 2 satıra sığmayanı üç nokta ile kısaltmak GÜVENLİDİR.
   ⛔ KAPSAM YALNIZ RAY: `overflow-wrap:anywhere` başka yüzeylerde (uzun e-posta,
      URL, kod) DOĞRU davranıştır — oralara dokunulmaz. */
#PageZone_LeftNavs .NavTitle,
#PageZone_RightNavs .NavTitle,
#PageZone_LeftNavs .NavTitle > span,
#PageZone_RightNavs .NavTitle > span {
    overflow-wrap: break-word;   /* yalnız TEK kelime sığmıyorsa kır */
    word-break: normal;
    hyphens: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ⭐ DOKUNMA HEDEFİ — ALAN DEĞERLERİ, YALNIZ MOBİLDE (2026-08-19, KULLANICI KARARI)
   Süpürmede `KUCUK_DOKUNMA` 1018 bulgu. Kimlik ölçüldü: hepsi FORM/IZGARA ALANI
   DEĞERİdir (`FieldDate` 105 · `FieldInteger` 36 · `FieldChoice` 22 ·
   `FieldPerson` · `FieldOrganization` · `FieldWorkingPeriod` · `FieldText`),
   yükseklik **16-17px**; WCAG 2.2 AA (2.5.8) 24×24 ister.
   ⛔ "Satır-içi" muafiyeti GEÇERSİZ: ölçüldü, 356 hedefin 0'ı cümle içinde.

   ⛔⛔ ÖNCE GÖRÜNMEZ VURUŞ ALANI DENENDİ ve ÖLÇÜLEREK ETKİSİZ ÇIKTI:
   `::after` ile 24px'e büyütme, hücre (`td.FieldCounter`) kırptığı için
   `elementFromPoint` ±10px'te hedefi DEĞİL hücreyi döndürdü. Yani kutuyu
   büyütmeden hedef büyümüyor — kural geri alındı, ölü kural bırakılmadı.

   ⇒ Kullanıcı kararı (2026-08-19): **yalnız mobilde** kutu 24px'e çıkar.
   Kapsam ≤768px BİLEREK: masaüstü/tablet veri yoğunluğu AYNEN korunur (fare
   hassas; bu sınıfın şiddeti orada 1). Bedel kabul edildi: mobilde ekrana sığan
   satır sayısı ~%33 azalır.
   ⚠️ Tıklama çalma riski ÖLÇÜLDÜ: ardışık hedefler arası en az dikey boşluk
   21px; 16 → 24px büyüme üste+alta 4'er px ekler ⇒ güvenli. */
@media (max-width: 768px) {
    /* ⚠️ `body` çapası BİLEREK: ilk sürümde `min-height`/`display` TUTTU ama
       `min-width` başka bir kural tarafından 0'a çekildi (ölçüldü: computed
       min-width 0px, kutu 22x24). Beraberliği tip seçicisi bozar. */
    body [class*="Field"] > a {
        display: inline-block;
        min-height: 24px;
        min-width: 24px;
        line-height: 24px;
        vertical-align: middle;
    }
}

/* 2026-08-19 · çekirdek yeniden derleme tetikleyicisi:
   zz-view-calendar.css kontrast düzeltmesi (axe 41→30). Yeni/degisen zz-*
   dosyasi TEK BASINA cekirdegi yeniden derletmez — bir NN-* dosyasinda
   ICERIK degisikligi gerekir. */

/* kontrast: 0.65 ailesi de .72 seviyesine hizalandi (140901) */

/* kontrast: sekme basligi opakligi (153303) */


/* sabotaj tetigi 165123 */

/* geri koyma tetigi 165134 */








/* ============================================================================
   17-content-ritmi.css — CONTENT NEFES VE OKUMA RİTMİ (platform katmanı)
   ----------------------------------------------------------------------------
   NEDEN BURADA (kullanıcı kararı D1, 2026-08-25):
     "Genel özellikleri modüle özel değiştirme; sistemin default CSS'i ile
      yaparsan Consistency sağlarız."
   Bir modüle yazılan nefes kuralı yalnız o modülü düzeltir ve platformu daha da
   tutarsız yapar. ÖLÇÜLDÜ (kontrol grubu, aynı domain):
       TaxAdvisoryHome  panel arası 0 / 1 / 12px  (tutarsız)
       Turquality*      panel arası 0px           (hiç yok)
   ⇒ Kural modül CSS'inden ALINDI ve buraya, herkesin aldığı katmana taşındı.

   ÖLÇEK (12px em tabanı — platformun kendi ritmi):
     Content dış kenar 12px · PANEL ARASI 16px · panel içi 10-12px · kart arası 7px
   GESTALT: gruplar arası boşluk > grup içi boşluk (16 > 7). Bu oran bozulursa
   kullanıcı iki ayrı paneli tek liste sanar.

   ⛔ DOKUNULMAYANLAR (bilerek):
     - Zemini/başlık şeridi olan bileşenlere DIŞARIDAN dolgu verilmez
       (ölçüldü: `.Panel > .EntityTypeView{padding-top}` PanelHeader'ın mor
        bandının üstünde beyaz şerit bıraktı — kullanıcı ekranda gördü).
     - Header/KPI panelleri (`Panel_h`, `Panel_hl`, `Panel_kpis`) flex:0'dır,
       yükseklik bütçesine tabi değildir.
     - Satır içi `Style` (özgüllük 1000) burayı zaten yener; bu katman yalnız
       KURAL YAZILMAMIŞ yüzeylere ritim verir.
   ============================================================================ */

/* --- 1. Panel arası: gruplar arası en büyük boşluk ------------------------- */
.Content > .Panel {
  margin-bottom: 16px;
}
.Content > .Panel:last-child {
  margin-bottom: 0;
}

/* Başlık şeridinden sonra bölüm geçişi biraz daha geniş */
.Content > .Panel_h,
.Content > .Panel.ContentHeader {
  margin-bottom: 20px;
}

/* --- 2. Panel içi nefes: başlık ve gövde kabuğa yapışmasın ----------------- */
/* Panelin KENDİSİNE verilir — içindeki görünüme değil (ölçüldü: ETV'ye verilen
   dolgu panelin dolgusunu doldurmaz ve başlık şeridini bozar). */
.Content > .Panel {
  padding: 10px 12px;
}

/* --- 4. Kanban kabı kenarlardan nefes alsın -------------------------------- */
.KanbanContainer {
  padding: 6px 4px;
}

/* Mobile spacing only. Worklist height comes from responsive layout/content,
 * never an arbitrary per-view minimum-height budget. */
@media (max-width: 767px) {
  .Content > .Panel {
    padding: 8px 10px;
    margin-bottom: 14px;
  }
}

/* ============================================================================
   KANONİK CONTENT MİMARİSİ & DASHBOARD RİTMİ (2026-09-04)
   ----------------------------------------------------------------------------
   Kural: Modül veya Content'e özel CSS'lerden kurtulmak için evrensel
   dashboard bileşenleri platform katmanında tanımlanır.
   ============================================================================ */

/* --- 5. ContentHeader: Başlık şeridi ve dikey akış (Tier 1 Sözleşmesi - flex: 0 0 auto HARD RULE) ------ */
.Content .Panel.ContentHeader,
.Content .FieldSet.ContentHeader,
.Content .ContentHeader,
.Content > .ContentHeader,
.Content > .Panel_h,
.Content > .FieldSet_h,
.Content.DashboardFlow > .Panel.ContentHeader,
.Content.DashboardFlow > .Panel_h,
.Content.DashboardFlow > .FieldSet_h,
.Content.DashboardFlow > .ContentHeader,
.Content.DashboardFlow .ContentHeader {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  /* 2026-09-14 — CAPRAZ EKSEN: `flex:0 0 auto` + `height:auto` yalniz ANA ekseni korur. Ebeveyn
     `.DirectionVer` (layout.css: flex-direction:row; align-items:stretch) oldugunda capraz eksen
     YUKSEKLIKTIR ve header kardesinin boyuna cekilir. Olculdu (satis #UserRolesHome, 1440):
     header 660px, tek cocugu 112px, ebeveyn row 661px. `width:100% !important` sabit oldugu icin
     column ebeveynde (mobil) `flex-start` genisligi DARALTMAZ — iki kirilimda da guvenli.
     Kapi: scripts/tools/contentheader-flex-gate.mjs auditHeaderAlignSelf. */
  align-self: flex-start !important;
  height: auto !important;
  min-height: auto !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* --- 6. QuickActionsBar: Hızlı Aksiyon Araç Çubuğu (Tier 2 Sözleşmesi) -------- */
.Content .QuickActionsBar {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  margin-top: 14px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
.Content .QuickActionsBar .URLForBots {
  display: none !important;
}
.Content .BtnQuickAction {
  display: inline-flex !important;
  align-items: center !important;
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
}
.Content .BtnPrimary {
  background: #2563eb !important;
  border: 1px solid #1d4ed8 !important;
  box-shadow: 0 1px 3px rgba(37,99,235,0.2) !important;
}
.Content .BtnPrimary:hover {
  background: #1d4ed8 !important;
  border-color: #1e40af !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(37,99,235,0.3) !important;
}
.Content .BtnPrimary .ButtonTitle,
.Content .BtnPrimary span {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.Content .BtnOutline {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
}
.Content .BtnOutline:hover {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.55) !important;
  transform: translateY(-1px) !important;
}
.Content .BtnOutline .ButtonTitle,
.Content .BtnOutline span {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* --- 7. Panel_hdrkpi / Panel_kpis / ContentHeader KPI: Sınırsız & Esnek KPI Izgarası ------------- */
.Content .Panel_hdrkpi,
.Content .ContentHeader .Panel_kpis,
.Content .Panel_kpis,
.Panel.Panel_kpis,
.Content .ContentHeader > .Panel:has(> .AggregateView),
.Content .ContentHeader > .DirectionFloat,
.Content .ContentHeader .Panel[name="kpis"],
.Content .ContentHeader .DirectionFloat:has(> .AggregateView) {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin-top: 14px !important;
  box-sizing: border-box !important;
}
/* 3'lu TABAN ama SABIT DEGIL: kart sigmayinca satir sarar ve flex-grow ile
   kalan kartlar satiri DOLDURUR -> son satirda bos hucre kalmaz. */
.Content .Panel_hdrkpi > *,
.Content .ContentHeader .Panel_kpis > *,
.Content .ContentHeader > .Panel:has(> .AggregateView) > *,
.Content .ContentHeader > .DirectionFloat > *,
.Content .ContentHeader .DirectionFloat:has(> .AggregateView) > * {
  flex: 0 1 148px !important;
  width: 148px !important;
  min-width: 120px !important;
  max-width: 152px !important;
  box-sizing: border-box !important;
}
/* SISTEM GENELI AGGREGATEVIEW 152PX TAVANI (HARD RULE)
   Kullanici emri 2026-09-06: Sistem genelinde Tum Modullerde hicbir AggregateView 152px'i gecemez.
   ContentHeader altındaki kartlar min-width: 120px ile shrink-to-fit flex daralmalarına karşı korunur. */
.AggregateView,
.AggregateView.Aggregate,
.Content .Panel_hdrkpi > .AggregateView,
.Content .Panel_hdrkpi > .AggregateView.Aggregate,
.Content .ContentHeader .Panel_kpis > .AggregateView,
.Content .ContentHeader .Panel_kpis > .AggregateView.Aggregate,
.Content .ContentHeader .AggregateView,
.Content .ContentHeader .AggregateView.Aggregate {
  width: 148px !important;
  min-width: 120px !important;
  max-width: 152px !important;
  max-height: 150px !important;
  box-sizing: border-box !important;
}

/* --- 7b. DORT KARTLIK SERIT: 3'lu taban 3+1 SARAR (olculdu 2026-09-05) -------
   Ustteki `/3` tabani panellerin YALNIZ %11'i icin dogrudur. Canli dagilim
   (satis, 2126 panel): 1 kart 473 . 2 kart 954 . 3 kart 238 . **4 kart 265** .
   5-6 kart 168 . 7-8 kart 28.
   4 kartta sarma MATEMATIKSEL olarak kacinilmazdir; ustelik `max-width:300px`
   bir ust kuraldaki "flex-grow satiri DOLDURUR" vaadini GECERSIZ kilar: son
   satirdaki tek kart 300px'de durur, sag-dayali hizada SOLDA olu bosluk kalir
   ve ContentHeader'in yuksekligi 2 katina cikar.
   OLCULDU (1600x950, mCustomer360Account): kap 969px . kart 300/300/300/300 .
   satir 2 . son satirda 669px OLU BOSLUK.
   (-) Kap payini buyutmek COZMEZ - ilk hipotezdi, olcumle curudu: taban %33,33
       oldugu icin satira DAIMA 3 kart girer, kap ne kadar genis olursa olsun.
   CARE: kart sayisini SECICIDEN OKU (nth-last-child) ve tabani ondan TURET.
   Ozgulluk (0,5,0) > ustteki (0,3,0) ⇒ yalniz bu baglamda kazanir.
   KAPSAM BILEREK DAR:
     . 2 kart (en buyuk kova, 954): /2 ile /3 AYNI sonucu verir cunku tavan 300px
       kirpiyor ⇒ dokunmak ETKISIZ olurdu, yazilmadi.
     . 3 . 5 . 6 kart: 3 / 3+2 / 3+3 zaten dengeli.
     . 7-8 kart (28 panel): OLCULMEDI ⇒ dokunulmadi.
   MOBIL KORUNUR: <=768px'teki 2'li kural degismesin diye blok `min-width:769px`
   ile sinirli (mobilde 4'lu serit 233px'e sigmaz). */
/* IKI KIRILIM — tek bir taban YETMEZ, olcumle kanitlandi:
     genis kadrajda 4'lu istiyoruz  ⇒ min-width 190px yuzunden kap >= 4*190+36 = 796px olmali
     orta kadrajda (kap 628-705) 4*190+36 > kap ⇒ 3 kart girer, 4.'su TEK BASINA sarar
        ve tavan 300px yuzunden satiri dolduramaz ⇒ 328-405px OLU BOSLUK (olculdu).
   Iki kisit CELISIR: 1600@895 icin min <= 214 gerekirken 1200@705'te 2+2 icin min > 227.
   ⇒ Cozum tabani KIRILIMA baglamak; mobildeki (<=768px) 2'li kuralla da TUTARLI:
        dar 2 sutun · orta 2 sutun (simetrik, olu bosluk yok) · genis 4 sutun.
   ESIK 1520px OLCULDU, tahmin DEGIL: kap = kadraj - sabit pay (sol ray + baslik).
   Olculen pay 595-705px; 4'lu icin kap >= 4*190+36 = 796 gerekir ⇒ en DAR ekranda
   kadraj >= 1501. 1400 esigi denendi ve YETMEDI: kap 761px'te 3+1 sardi VE etiket
   KIRPILDI ("SATIS TEKLIFLERI NET TUT...", 201px kart) — kirpma SIFIR TOLERANSTIR. */
@media (min-width: 769px) and (max-width: 1519px) {
  .Content .Panel_hdrkpi > *:first-child:nth-last-child(4),
  .Content .Panel_hdrkpi > *:first-child:nth-last-child(4) ~ *,
  .Content .ContentHeader .Panel_kpis > *:first-child:nth-last-child(4),
  .Content .ContentHeader .Panel_kpis > *:first-child:nth-last-child(4) ~ * {
    flex-basis: calc((100% - 12px) / 2) !important;
  }
}
@media (min-width: 1520px) {
  .Content .Panel_hdrkpi > *:first-child:nth-last-child(4),
  .Content .Panel_hdrkpi > *:first-child:nth-last-child(4) ~ *,
  .Content .ContentHeader .Panel_kpis > *:first-child:nth-last-child(4),
  .Content .ContentHeader .Panel_kpis > *:first-child:nth-last-child(4) ~ * {
    flex-basis: calc((100% - 36px) / 4) !important;
  }
}

.Content .Panel_hdrkpi .Aggregate,
.Content .ContentHeader .Panel_kpis .Aggregate,
.Content .Panel_kpis .Aggregate {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  text-align: left !important;
  position: relative !important;
  width: auto !important;
  padding: 0.65em 0.8em !important;
  min-height: 7em !important;
  box-sizing: border-box !important;
}
.Content .Panel_hdrkpi .AggregateLabel,
.Content .ContentHeader .Panel_kpis .AggregateLabel,
.Content .Panel_kpis .AggregateLabel {
  order: 1 !important;
  width: 100% !important;
  text-align: left !important;
  justify-content: flex-start !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25em !important;
  min-height: 2.5em !important;
  max-height: 2.5em !important;
  flex: 0 0 2.5em !important;
  margin: 0 0 0.35em 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
.Content .Panel_hdrkpi .Aggregate.AggregateLink > .AggregateLabel,
.Content .ContentHeader .Panel_kpis .Aggregate.AggregateLink > .AggregateLabel,
.Content .Panel_kpis .Aggregate.AggregateLink > .AggregateLabel {
  padding-right: 14px !important;
}
.Content .Panel_hdrkpi .AggregateValue,
.Content .Panel_hdrkpi .AggregateNumber,
.Content .ContentHeader .Panel_kpis .AggregateValue,
.Content .ContentHeader .Panel_kpis .AggregateNumber,
.Content .Panel_kpis .AggregateValue,
.Content .Panel_kpis .AggregateNumber {
  order: 2 !important;
  width: 100% !important;
  text-align: right !important;
  justify-content: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  font-size: clamp(17.5px, 1.55em, 23px) !important;
  font-weight: 800 !important;
  line-height: 1.2em !important;
  min-height: 1.4em !important;
  margin: auto 0 2px 0 !important;
  box-sizing: border-box !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.Content .Panel_hdrkpi .Aggregate.AggType_Money > .AggregateValue,
.Content .ContentHeader .Panel_kpis .Aggregate.AggType_Money > .AggregateValue,
.Content .Panel_kpis .Aggregate.AggType_Money > .AggregateValue,
.Content .Panel_kpis .Aggregate > .AggregateValue.AggValLong,
.Content .Panel_kpis .Aggregate > .AggregateValue[suffix*='₺'],
.Content .Panel_kpis .Aggregate > .AggregateValue[suffix*='TL'] {
  font-size: clamp(15px, 1.38em, 18px) !important;
  letter-spacing: -0.03em;
}

.Content .Panel_hdrkpi .Aggregate > .AggregateValue.AggValXLong,
.Content .ContentHeader .Panel_kpis .Aggregate > .AggregateValue.AggValXLong,
.Content .Panel_kpis .Aggregate > .AggregateValue.AggValXLong {
  font-size: clamp(14px, 1.25em, 16.5px) !important;
  letter-spacing: -0.035em;
}

/* Para Alan Tipleri — Koyu Para Yeşili (#047857) (kullanıcı kuralı 2026-09-07) */
.Content .Panel_hdrkpi .Aggregate.AggType_Money > .AggregateValue,
.Content .ContentHeader .Panel_kpis .Aggregate.AggType_Money > .AggregateValue,
.Content .Panel_kpis .Aggregate.AggType_Money > .AggregateValue,
.Content .Panel_kpis .Aggregate > .AggregateValue[suffix*='₺'],
.Content .Panel_kpis .Aggregate > .AggregateValue[suffix*='TL'],
.Content .Panel_kpis .Aggregate > .AggregateValue[suffix*='$'],
.Content .Panel_kpis .Aggregate > .AggregateValue[suffix*='€'] {
  color: #047857 !important;
}

/* --- 8. ActionQueue_View: Müdahale Bekleyen Süreç Havuzları (Tier 4) ---------- */
.Content .ActionQueue_View.View_List {
  width: 100% !important;
  min-height: 300px !important;
  height: auto !important;
  margin-bottom: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}
.Content .ActionQueue_View.View_List .EntityTypeViewBody,
.Content .ActionQueue_View.View_List .Center.Panel {
  min-height: 300px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.Content .ActionQueue_View.View_List .Middle {
  min-height: 200px !important;
  height: auto !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
}

/* --- 9. Panel_charts / Panel_tier4: Çoklu Sütun Analitik Paneller ------------ */
.Content .Panel_charts,
.Content .Panel_tier4,
.Content .Panel_columns {
  width: 100% !important;
  min-height: 320px !important;
  gap: 16px !important;
  display: flex !important;
  flex-direction: row !important;
  margin-bottom: 20px !important;
}
.Content .Panel_charts > .EntityTypeView,
.Content .Panel_tier4 > .EntityTypeView,
.Content .Panel_columns > .EntityTypeView {
  min-height: 320px !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* --- 10. EntityTypeView Başlık ve Liste Seçici Hizası ------------------------ */
.Content .EntityTypeView .Top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
}
.Content .EntityTypeView .Top .TopLeft {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.Content .EntityTypeView .Top .EntityTypeViewTitleBody {
  font-size: 13px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.Content .EntityTypeView .Top .TopRight {
  flex: 0 0 auto !important;
  position: static !important;
}
.Content .EntityTypeView .Top .EntityTypeLists {
  font-size: 12px !important;
}

/* --- 11. Dashboard EntityTypeView Middle Esneme Güvencesi -------------------- */
.Content.DashboardFlow .EntityTypeViewBody,
.Content.DashboardFlow .EntityTypeViewBody > .Center,
.Content.DashboardFlow .EntityTypeViewBody > .Center > .Middle,
.Content.DashboardFlow .EntityTypeView .Middle {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: 240px !important;
  flex: 1 0 auto !important;
  overflow: visible !important;
}
.Content.DashboardFlow .EntityTypeView .MiddleCenter {
  min-height: 200px !important;
  height: auto !important;
}

/* --- 12. Mobil Ritim ve Duyarlı Düzen (max-width: 768px) --------------------- */
@media (max-width: 768px) {
  /* Mobilde de hiçbir AggregateView 152px'i aşamaz (kullanıcı emri 2026-09-06). */
  .Content .Panel_hdrkpi > .AggregateView.Aggregate,
  .Content .ContentHeader .Panel_kpis > .AggregateView.Aggregate {
    max-width: min(100%, 152px) !important;
  }
  .Content .Panel_hdrkpi,
  .Content .ContentHeader .Panel_kpis {
    gap: 8px !important;
  }
  .Content .Panel_hdrkpi > *,
  .Content .ContentHeader .Panel_kpis > * {
    flex: 1 1 calc((100% - 8px) / 2) !important;
    min-width: 140px !important;
    max-width: 152px !important;
  }
  .Content .Panel_charts,
  .Content .Panel_tier4,
  .Content .Panel_columns {
    flex-direction: column !important;
    height: auto !important;
  }
  .Content .Panel_charts > .EntityTypeView,
  .Content .Panel_tier4 > .EntityTypeView,
  .Content .Panel_columns > .EntityTypeView {
    min-height: 280px !important;
    flex: 1 0 auto !important;
  }
  .Content .QuickActionsBar {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .Content .QuickActionsBar > * {
    width: 100% !important;
  }
  .Content .QuickActionsBar .Button.BtnQuickAction,
  .Content .QuickActionsBar .Text.BtnQuickAction {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* --- 7c. UC KARTLIK SERIT: DAR KAPTA 2+1 SARIYOR, 261px OLU BOSLUK (2026-09-06) ----
   Madde 7b (`f96536006`) "3 kart zaten dengeli" demisti — o hukum GENIS kap icindi.
   Dar kapta 3x190+24 = 594 > kap ⇒ 2 kart girer, 3.'su TEK BASINA sarar ve
   `max-width:300px` yuzunden satiri dolduramaz.

   ⛔ KADRAJ TABANLI MEDIA QUERY BURADA YANLIS ARACTIR — kap genisligi kadrajla
      MONOTON DEGIL (localhost, #OrgPersonsHome, kadraj -> kap):
        1600->895  1200->628  1100->561(BOZUK)  1024->644  900->561(BOZUK)
      1024 SAGLAM ama 1100 BOZUK (sol ray <=1024'te kapaniyor ve genislik aciliyor).
      `max-width:1300px` gibi bir esik 1024'u de gereksizce vururdu.
      ⇒ Kosul KABIN KENDISINE baglandi: `@container (max-width: 593px)` = 3x190+24-1.

   ⛔ "TAVANI KALDIR" (max-width:none) DENENDI ve REDDEDILDI: yukaridaki 7. maddenin
      KENDI olcumu `none`'un yanlis oldugunu yaziyor ("kart ~409px'e sisiyordu") ve
      canli deney bunu DOGRULADI — 2560px kadrajda kart 300 -> **498px**. Tavan
      OLCULMUS bir karardir; geri alinmaz. Bu yuzden tavan YALNIZ dar kapta kalkar.

   CANLI IKI YONLU DENEY (localhost, 6 kadraj; enjekte -> GERI AL -> tabana dondu):
     kadraj   TABAN                    CARE C
     2560     300,300,300  olu 635     BIREBIR AYNI
     1600     285,285,285  olu  40     BIREBIR AYNI
     1200     196,196,196  olu  40     BIREBIR AYNI
     1100     267,267,300  olu 261     267,267,545  olu  16
     1024     201,201,201  olu  40     BIREBIR AYNI
      900     267,267,300  olu 261     267,267,545  olu  16
   Kirpik metin: TUM kadrajlarda 0 -> 0. Ek SATIR yok (2 satir kaliyor).
   Genis kadrajda hicbir sey degismedigi icin gerileme yuzeyi YOKTUR.               */
.Content .Panel_hdrkpi,
.Content .ContentHeader .Panel_kpis {
  container-type: inline-size;
}
@container (max-width: 593px) {
  .Content .Panel_hdrkpi > *:first-child:nth-last-child(3),
  .Content .Panel_hdrkpi > *:first-child:nth-last-child(3) ~ *,
  .Content .ContentHeader .Panel_kpis > *:first-child:nth-last-child(3),
  .Content .ContentHeader .Panel_kpis > *:first-child:nth-last-child(3) ~ * {
    max-width: 152px !important;
    flex-grow: 1 !important;
  }
}

/* ============================================================================
   CONTENTHEADER YERLEŞİM YASASI (2026-09-10, kullanıcı kararı — ultimate)
   ----------------------------------------------------------------------------
   Desktop / Tablet (>= 768px):
     • 2 panelli ContentHeader (Panel_hl + Panel_kpis) VE <= 4 KPI:
       YAN YANA — sol Title-Desc flex:1 (min-width: 240px), sağ KPI paneli flex:3.
     • > 4 KPI (5+) VEYA tek panelli başlıklar:
       ALT ALTA — tam genişlikte dikey istifleme (Tier-1 column).
   Mobil (< 768px):
     • Daima ALT ALTA (DirectionMobile="All" ve responsive column kuralı).
   Panel tabanlı (Panel_h) VE FieldSet tabanlı (FieldSet_h) başlıklar kapsanır.
   ============================================================================ */

/* 1. Taban Koruma: ContentHeader ve Panel_hl yüksekliği asla 0px'e çökemez, ASLA dikey esneyemez (flex: 0 0 auto) */
.Content .Panel.ContentHeader,
.Content .FieldSet.ContentHeader,
.Content .ContentHeader,
.Content > .ContentHeader,
.Content > .Panel_h,
.Content > .FieldSet_h,
.Content.DashboardFlow > .Panel.ContentHeader,
.Content.DashboardFlow > .Panel_h,
.Content.DashboardFlow > .FieldSet_h,
.Content.DashboardFlow > .ContentHeader,
.Content.DashboardFlow .ContentHeader {
  height: auto !important;
  min-height: auto !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.Content .ContentHeader > .Panel_hl,
.Content .ContentHeader .Panel_hl,
.Content .ContentHeader > .FieldSet_hl,
.Content .ContentHeader .FieldSet_hl,
.Content.DashboardFlow .ContentHeader .Panel_hl,
#Panel_hl {
  height: auto !important;
  min-height: auto !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.Content .ContentHeader .DirectionVer {
  height: auto !important;
  min-height: auto !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
}

.Content .ContentHeader .Panel_hl > *,
.Content .ContentHeader .ContentHeaderTitle,
.Content .ContentHeader .ContentHeaderDescription {
  height: auto !important;
  min-height: auto !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.Content .ContentHeader .Panel_hl .Text,
.Content .ContentHeader .Panel_hl .Text span,
.Content .ContentHeader .FieldSet_hl .Text,
.Content .ContentHeader .FieldSet_hl .Text span,
#Panel_hl .Text,
#Panel_hl .Text span {
  color: var(--textColor, #1e293b) !important;
}

@media (min-width: 768px) {
  /* 2. Desktop/Tablet: 2 Panelli Başlıklar (DirectionVer veya doğrudan Panel_kpis içerenler) */
  .Content .ContentHeader .DirectionVer,
  .Content.DashboardFlow .ContentHeader .DirectionVer,
  .Content.DashboardFlow .Panel.ContentHeader > .DirectionVer,
  .Content.DashboardFlow .Panel_h.DirectionVerBody > .DirectionVer,
  .Content.DashboardFlow .ContentHeader:has(> .Panel_kpis),
  .Content .ContentHeader:has(> .Panel_kpis),
  .Content .ContentHeader.ContentSide,
  .Content .Panel.ContentHeader.DirectionVertical {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Sol Panel (Title-Desc): flex 1 (min 240px) */
  .Content .ContentHeader .DirectionVer > :first-child:not(.Panel_kpis),
  .Content .ContentHeader .DirectionVer > .Panel_hl,
  .Content.DashboardFlow .ContentHeader .DirectionVer > :first-child:not(.Panel_kpis),
  .Content.DashboardFlow .ContentHeader .DirectionVer > .Panel_hl,
  .Content.DashboardFlow .ContentHeader > .Panel_hl,
  .Content .ContentHeader > .Panel_hl,
  .Content.DashboardFlow .ContentHeader:has(> .Panel_kpis) > .Panel_hl,
  .Content .ContentHeader:has(> .Panel_kpis) > .Panel_hl,
  .Content .ContentHeader:has(> .Panel_kpis) > :first-child,
  .Content .ContentHeader.ContentSide > :first-child,
  .Content .Panel.ContentHeader.DirectionVertical > :first-child {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 1 240px !important;
    min-width: 240px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
  }

  /* Sağ Panel (KPIs / Actions): flex 3 */
  .Content .ContentHeader .DirectionVer > :last-child,
  .Content .ContentHeader .DirectionVer > .Panel_kpis,
  .Content.DashboardFlow .ContentHeader .DirectionVer > :last-child,
  .Content.DashboardFlow .ContentHeader .DirectionVer > .Panel_kpis,
  .Content.DashboardFlow .ContentHeader > .Panel_kpis,
  .Content .ContentHeader > .Panel_kpis,
  .Content.DashboardFlow .ContentHeader:has(> .Panel_kpis) > .Panel_kpis,
  .Content .ContentHeader:has(> .Panel_kpis) > .Panel_kpis,
  .Content .ContentHeader:has(> .Panel_kpis) > :last-child,
  .Content .ContentHeader.ContentSide > :last-child,
  .Content .Panel.ContentHeader.DirectionVertical > :last-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 3 1 auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin-top: 0 !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }

  .Content .ContentHeader .DirectionVer > .Panel_kpis > .AggregateView,
  .Content.DashboardFlow .ContentHeader .DirectionVer > .Panel_kpis > .AggregateView,
  .Content.DashboardFlow .ContentHeader > .Panel_kpis > .AggregateView,
  .Content .ContentHeader > .Panel_kpis > .AggregateView {
    flex: 0 0 148px !important;
    width: 148px !important;
    max-width: 152px !important;
    height: 96px !important;
    margin: 0 !important;
  }

  /* 3. İstisna: KPI sayısı 4'ten fazla (5+) ise ALT ALTA dikey istifleme (Title üstte sol hizalı, KPIs altta, boşluksuz) */
  .Content .ContentHeader:has(.AggregateView:nth-of-type(5)),
  .Content .ContentHeader:has(.AggregateView:nth-of-type(5)) .DirectionVer,
  .Content .ContentHeader .DirectionVer:has(.AggregateView:nth-of-type(5)),
  .Content.DashboardFlow .ContentHeader:has(.AggregateView:nth-of-type(5)),
  .Content.DashboardFlow .ContentHeader:has(.AggregateView:nth-of-type(5)) .DirectionVer,
  .Content.DashboardFlow .ContentHeader .DirectionVer:has(.AggregateView:nth-of-type(5)),
  .Content .ContentHeader:has(> .Panel_kpis > :nth-child(5)),
  .Content .ContentHeader:has(> .Panel_kpis > :nth-child(5)) .DirectionVer,
  .Content .ContentHeader .DirectionVer:has(> .Panel_kpis > :nth-child(5)),
  .Content.DashboardFlow .ContentHeader:has(> .Panel_kpis > :nth-child(5)),
  .Content.DashboardFlow .ContentHeader:has(> .Panel_kpis > :nth-child(5)) .DirectionVer,
  .Content.DashboardFlow .ContentHeader .DirectionVer:has(> .Panel_kpis > :nth-child(5)) {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 14px !important;
  }

  .Content .ContentHeader:has(.AggregateView:nth-of-type(5)) > .Panel_hl,
  .Content .ContentHeader:has(.AggregateView:nth-of-type(5)) .DirectionVer > .Panel_hl,
  .Content .ContentHeader .DirectionVer:has(.AggregateView:nth-of-type(5)) > .Panel_hl,
  .Content.DashboardFlow .ContentHeader:has(.AggregateView:nth-of-type(5)) > .Panel_hl,
  .Content.DashboardFlow .ContentHeader:has(.AggregateView:nth-of-type(5)) .DirectionVer > .Panel_hl,
  .Content.DashboardFlow .ContentHeader .DirectionVer:has(.AggregateView:nth-of-type(5)) > .Panel_hl,
  .Content .ContentHeader:has(> .Panel_kpis > :nth-child(5)) > .Panel_hl,
  .Content .ContentHeader:has(> .Panel_kpis > :nth-child(5)) .DirectionVer > .Panel_hl,
  .Content .ContentHeader .DirectionVer:has(> .Panel_kpis > :nth-child(5)) > .Panel_hl,
  .Content.DashboardFlow .ContentHeader:has(> .Panel_kpis > :nth-child(5)) > .Panel_hl,
  .Content.DashboardFlow .ContentHeader:has(> .Panel_kpis > :nth-child(5)) .DirectionVer > .Panel_hl,
  .Content.DashboardFlow .ContentHeader .DirectionVer:has(> .Panel_kpis > :nth-child(5)) > .Panel_hl,
  /* Başlık paneli her kiracıda `hl` adını taşımaz (satis/OrganizationsHome: Name="t" → .Panel_t).
     Bu satırlar yoksa panel yukarıdaki `flex: 1 1 240px` kuralını alır; column düzeninde 240px
     YÜKSEKLİĞE döner ve başlık ile KPI arasında boş bant açılır (ölçüldü 2026-09-14: 384px → 218px). */
  .Content .ContentHeader:has(.AggregateView:nth-of-type(5)) .DirectionVer > :first-child:not(.Panel_kpis),
  .Content .ContentHeader .DirectionVer:has(.AggregateView:nth-of-type(5)) > :first-child:not(.Panel_kpis),
  .Content.DashboardFlow .ContentHeader:has(.AggregateView:nth-of-type(5)) .DirectionVer > :first-child:not(.Panel_kpis),
  .Content.DashboardFlow .ContentHeader .DirectionVer:has(.AggregateView:nth-of-type(5)) > :first-child:not(.Panel_kpis),
  .Content .ContentHeader:has(> .Panel_kpis > :nth-child(5)) > :first-child:not(.Panel_kpis),
  .Content .ContentHeader .DirectionVer:has(> .Panel_kpis > :nth-child(5)) > :first-child:not(.Panel_kpis) {
    width: 100% !important;
    flex: 0 0 auto !important;
    align-items: flex-start !important;
    height: auto !important;
  }

  .Content .ContentHeader:has(.AggregateView:nth-of-type(5)) > .Panel_kpis,
  .Content .ContentHeader:has(.AggregateView:nth-of-type(5)) .DirectionVer > .Panel_kpis,
  .Content .ContentHeader .DirectionVer:has(.AggregateView:nth-of-type(5)) > .Panel_kpis,
  .Content.DashboardFlow .ContentHeader:has(.AggregateView:nth-of-type(5)) > .Panel_kpis,
  .Content.DashboardFlow .ContentHeader:has(.AggregateView:nth-of-type(5)) .DirectionVer > .Panel_kpis,
  .Content.DashboardFlow .ContentHeader .DirectionVer:has(.AggregateView:nth-of-type(5)) > .Panel_kpis,
  .Content .ContentHeader:has(> .Panel_kpis > :nth-child(5)) > .Panel_kpis,
  .Content .ContentHeader:has(> .Panel_kpis > :nth-child(5)) .DirectionVer > .Panel_kpis,
  .Content .ContentHeader .DirectionVer:has(> .Panel_kpis > :nth-child(5)) > .Panel_kpis,
  .Content.DashboardFlow .ContentHeader:has(> .Panel_kpis > :nth-child(5)) > .Panel_kpis,
  .Content.DashboardFlow .ContentHeader:has(> .Panel_kpis > :nth-child(5)) .DirectionVer > .Panel_kpis,
  .Content.DashboardFlow .ContentHeader .DirectionVer:has(> .Panel_kpis > :nth-child(5)) > .Panel_kpis {
    width: 100% !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    height: auto !important;
  }
}

/* 4. Mobil (< 768px): Daima ALT ALTA */
@media (max-width: 767px) {
  .Content .Panel.ContentHeader,
  .Content .FieldSet.ContentHeader,
  .Content .ContentHeader {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    height: auto !important;
  }
  .Content .ContentHeader .DirectionVer {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    gap: 12px !important;
  }
  .Content .ContentHeader .DirectionVer > *,
  .Content .ContentHeader > * {
    width: 100% !important;
    flex: 0 0 auto !important;
    height: auto !important;
  }
}



/* ================================================================
   UX/CX Enhancements v5
   ================================================================ */

/* ---- Loading Overlay on View ---- */
.ViewLoading .ViewBody,
.ViewLoading .ListBody,
.ViewLoading .ItemsContainer {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* ---- Empty State ---- */
.EmptyState {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    min-height: 200px;
}
.EmptyStateIcon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.25;
}
.EmptyStateTitle {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--textColor);
}
.EmptyStateMessage {
    font-size: 13px;
    color: rgba(var(--textRGB, 48, 48, 48), 0.62);  /* C3 (2026-06-13): was rgba(48,48,48,.5) — ~2.5:1 fail + dark-blind. Adaptive var + AA alpha. */
    max-width: 320px;
    line-height: 1.5;
}
.EmptyStateAction {
    margin-top: var(--space6, 24px);
}
.EmptyStateActionButton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    /* 2026-08-18 A11Y (kullanıcı onaylı: "aynı ton ailesinde koyulaştır").
       ÖLÇÜLDÜ: beyaz metin #3b82f6 üzerinde 3,67:1 — WCAG 2.1 AA eşiği 4,5.
       #2563eb (blue-600) ≈5,2:1 · aynı mavi ailesi, kimlik korunur.

       ⛔ İLK DENEME GERİ ALINDI: yalnız `background` değiştirilmişti ve axe
       11 → 42'ye ÇIKTI (puan 74 → 64). Geri alım değerleri birebir geri getirdi,
       yani sıçrama bu değişiklikten geliyordu. Ders: bir rengi değiştirirken
       AYNI KURALIN TÜREVLERİ de o rengi taşır ve tek başına bırakılırsa çelişir.
       Bu sürümde üçü BİRLİKTE ele alınıyor:
         · background          #3b82f6 -> #2563eb
         · box-shadow rgba     (59,130,246) -> (37,99,235)   aynı renk
         · :hover brightness   KALDIRILDI — koyulaştırılan zemini tekrar
           AÇIYORDU ve kontrastı eşiğin altına geri düşürüyordu. Yerine
           aynı ailede bir ton daha koyu zemin (#1d4ed8) kullanılıyor;
           hover geri bildirimi korunur, kontrast DÜŞMEZ. */
    background: var(--primaryColor, #2563eb);
    /* 2026-09-02 (backlog "WCAG AA kontrast: birincil dugme 3,67:1"): on plan ZEMINDEN
       turetilir — m.js motoru (`$BaslikPaleti`) `--primaryColor`dan `--primaryOnPlan`
       uretir (beyaz/koyu, kontrasti yuksek olan). Zemin ve on plan AYNI token zincirine
       bagli: token TANIMLIYSA ikisi de motordan gelir (tutarli); TANIMSIZSA (olculdu:
       meta.xml'de `primaryColor` YOK) geri dusus #2563eb + beyaz = 5,2:1 AA. Yalniz on
       plani baglayip zemini baska geri dususte birakmak GERILEME uretirdi (koyu metin
       #2563eb uzerinde 3,2:1). */
    color: var(--primaryOnPlan, #fff);
    border: none;
    border-radius: var(--radiusMd, 8px);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}
.EmptyStateActionButton:hover {
    background: var(--primaryColorDark, #1d4ed8);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
}
.EmptyStateActionButton:active {
    transform: scale(0.97);
}

/* ---- Error Card ---- */
.ErrorCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    border-radius: var(--radiusLg, 12px);
    background: rgba(235, 49, 49, 0.04);
    border: 1px solid rgba(235, 49, 49, 0.12);
    margin: 8px;
}
.ErrorCardIcon {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.6;
}
.ErrorCardMessage {
    font-size: 14px;
    color: var(--errorColor, #eb3131);
    margin-bottom: 16px;
    text-align: center;
    line-height: 1.4;
}
.ErrorCardRetry {
    cursor: pointer;
    padding: 8px 24px;
    border-radius: var(--radiusMd, 8px);
    background: var(--errorColor, #eb3131);
    color: white;
    font-weight: 500;
    font-size: 13px;
    transition: opacity 0.2s;
}
.ErrorCardRetry:hover {
    opacity: 0.85;
}

/* ---- Save Feedback ---- */
.Field.Saving {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.Field.Saved .FieldValue {
    animation: saveFlash 1.5s ease;
}
@keyframes saveFlash {
    0% { background: rgba(70, 215, 76, 0.15); }
    100% { background: transparent; }
}
@keyframes aggregateValueFlash {
    0%   { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.75); border-radius: 3px; }
    60%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.2); border-radius: 3px; }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.AggregateValueChanged {
    animation: aggregateValueFlash 1.2s ease-out;
}

/* ---- Field Focus Highlight ---- */
.Field.FieldFocused {
    background: rgba(10, 110, 185, 0.03);
    border-radius: var(--radiusSm, 4px);
    transition: background 0.15s ease;
}

/* ---- Row Selection Animation ---- */
.ItemView.Selecting {
    background: rgba(10, 110, 185, 0.06);
    transition: background 0.2s ease;
}

/* ---- Keyboard Focus for List Rows ---- */
.ItemView.KbFocused {
    outline: 2px solid var(--focusColor, rgb(10, 110, 185));
    outline-offset: -2px;
    z-index: 10;
}

/* ---- Bottom Sheet (Mobile) ---- */
.BottomSheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--backColor);
    border-radius: var(--radiusXl, 16px) var(--radiusXl, 16px) 0 0;
    box-shadow: var(--shadowXl, 0 -4px 20px rgba(0,0,0,0.15));
    z-index: var(--zModal, 1000);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.BottomSheet.BottomSheet-Open {
    transform: translateY(0);
}
.BottomSheetHandle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(127, 127, 127, 0.3);
    margin: 12px auto 8px;
}

/* ---- Pull to Refresh ---- */
.PullToRefresh::before {
    content: "↻";
    display: block;
    text-align: center;
    padding: 16px;
    font-size: 24px;
    animation: ptrSpin 1s linear infinite;
}
@keyframes ptrSpin {
    to { transform: rotate(360deg); }
}

/* ---- Breadcrumb ---- */
.Breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    font-size: 12px;
    color: rgba(var(--textRGB, 48, 48, 48), 0.6);  /* C3 (2026-06-13): adaptive + AA (was rgba(48,48,48,.45)) */
    flex-wrap: wrap;
}
.BreadcrumbItem {
    cursor: pointer;
    transition: color 0.15s;
}
.BreadcrumbItem:hover {
    color: var(--primaryColor, #3b82f6);
}
.BreadcrumbSep {
    opacity: 0.3;
    user-select: none;
}

/* Breadcrumb on mobile — always visible, compact */
body.Mobile .Breadcrumb {
    padding: 4px 12px;
    font-size: 11px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--backColor, #fff);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 5;
}
body.Mobile .Breadcrumb::-webkit-scrollbar {
    display: none;
}

/* ---- Inline Field Validation ---- */
/* Gated on .FieldTouched: the red inline-validation border appears only after
   the user has focused and left the field (blur → m.js adds .FieldTouched),
   never on a pristine, never-touched new-record form. Save-attempt errors use
   the separate .FieldError class. */
.Field.Required.FieldIsEmpty.Mode_Edit.FieldTouched .FieldValue input:not(:focus):not(:placeholder-shown),
.Field.Required.FieldIsEmpty.Mode_Edit.FieldTouched .FieldValue textarea:not(:focus):not(:placeholder-shown),
.Field.Required.FieldIsEmpty.Mode_Edit.FieldTouched .FieldValue select:not(:focus) {
    border-color: var(--errorColor, #dc2626);
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.15);
}
.Field.Required.FieldIsEmpty.Mode_Edit.FieldTouched .FieldValue input:not(:focus):not(:placeholder-shown)::placeholder,
.Field.Required.FieldIsEmpty.Mode_Edit.FieldTouched .FieldValue textarea:not(:focus):not(:placeholder-shown)::placeholder {
    color: var(--errorColor, #dc2626);
    opacity: 0.6;
}

/* ---- Card / Panel Polish ---- */
.ItemView,
.SingleItem .FieldSetPanel {
    border-radius: var(--radius-lg, 12px);
    background: var(--backColor, #fff);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: box-shadow var(--transition-fast, 0.15s ease);
}

.SingleItem .FieldSetPanel .FieldSetPanel {
    border-radius: 0;
    background: 0;
    box-shadow: 0 0 0 ;
    border: 0;
    transition: none;
}

.ItemView:hover {
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.07));
}
.Panel {
    border-radius: var(--radius-md, 8px);
}
.PanelHeader {
    border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
}
.TabPanel {
    border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
}
.TabHeader {
    border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
}

/* ---- Recent Items ---- */
.RecentItems {
    padding: 8px 0;
}
.RecentItemsTitle {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(var(--textRGB, 48, 48, 48), 0.4);
    padding: 4px 16px;
    letter-spacing: 0.5px;
}
.RecentItem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.1s;
    font-size: 13px;
}
.RecentItem:hover {
    background: rgba(var(--textRGB, 48, 48, 48), 0.04);
}
.RecentItemET {
    font-size: 11px;
    opacity: 0.45;
}

/* ---- Swipe Back Indicator ---- */
.SwipeBackIndicator {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60px;
    background: var(--primaryColor, #3b82f6);
    border-radius: 0 4px 4px 0;
    opacity: 0;
    transition: opacity 0.2s, width 0.2s;
    z-index: 9999;
}
.SwipeBackIndicator.Active {
    opacity: 0.6;
    width: 20px;
}

/* ---- View Transition Fade ---- */
.Opacity100 {
    animation: contentFadeIn 0.25s ease-out;
}
@keyframes contentFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Drag and Drop Feedback ---- */
.Dragging {
    opacity: 0.4;
    transform: scale(0.98);
}
.DropTarget {
    outline: 2px dashed var(--focusColor, rgb(10, 110, 185));
    outline-offset: 2px;
    background: rgba(10, 110, 185, 0.04);
}

/* ---- Focus Visible (WCAG 2.4.7) — strengthened ---- */
:focus-visible {
    outline: 2px solid #1ec46d !important;
    outline-offset: 2px !important;
    border-radius: 3px;
}
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #1ec46d !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(30, 196, 109, 0.2) !important;
}

/* ---- Loading Skeleton ---- */
.loading-skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
    min-height: 20px;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.ListBody:empty::before,
.ItemsContainer:empty::before {
    content: '';
    display: block;
    min-height: 60px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
    margin: 8px 0;
}

/* ---- Mobile Responsive Sidebar ---- */
@media (max-width: 768px) {
    .NavSideBar,
    .complementary[aria-label="Yan menü"],
    .complementary[role="complementary"] {
        position: fixed !important;
        left: -100%;
        top: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        z-index: 10000;
        transition: left 0.25s ease;
        overflow-y: auto;
        box-shadow: 2px 0 12px rgba(0,0,0,0.15);
    }
    .NavSideBar.mobile-open,
    .complementary[aria-label="Yan menü"].mobile-open,
    .complementary[role="complementary"].mobile-open {
        left: 0;
    }
    .ListBody, .Grid, .ItemsContainer {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ETWMenu .FilterPanel {
        flex-direction: column !important;
        width: 100% !important;
    }
    .ETWMenu .FilterPanel > * {
        width: 100% !important;
        margin-bottom: 8px;
    }
    button, select, input[type="text"], input[type="email"], input[type="tel"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* WCAG 2.1 AA High Contrast Shell Enhancements (4.5:1 ratio) */
a[href="#PageZone_m"], .SkipLink { color: #0f172a !important; background: #ffffff !important; font-weight: 700; border: 1px solid #0f172a; }
.UserToolButton-badge { background: #0f172a !important; color: #ffffff !important; font-weight: 700; }
.ETCount { color: #475569 !important; font-weight: 600; }
.StatusBar, #StatusBar { color: #334155 !important; font-weight: 500; }
.LoginFooter, .LoginCopyright { color: #475569 !important; font-weight: 500; }

/* Bulk Action Dock Layout & Non-Overlapping Padding */
.BulkActionBar {
    animation: bulkBarSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bulkBarSlideUp {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@media (min-width: 1024px) {
    .BulkActionBar {
        bottom: 28px;
        padding: 10px 24px;
        gap: 16px;
    }
}

/* ListAll Viewport Max Height & Internal Scroll Guard */
.ListAll {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

.EntityTypeView.View_List .ListAll,
.EntityTypeView.View_Tree .ListAll,
.EntityTypeView.View_Tree2 .ListAll {
    height: 100% !important;
    max-height: 100% !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
}

.ListLeft, .ListMiddle {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
}

.ListMiddle .ListBody {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.ListLeft .ListBody {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: hidden !important;
    overflow-x: auto !important;
}

/* Explicit Override: Prevent any Mobile/SupportsTouch 420px height clamping */
.Mobile .EntityTypeView.View_List:not(.MicroView) .ListAll,
.Mobile .EntityTypeView.View_Tree:not(.MicroView) .ListAll,
.Mobile .EntityTypeView.View_Tree2:not(.MicroView) .ListAll,
.SupportsTouch .EntityTypeView.View_List:not(.MicroView) .ListAll,
.SupportsTouch .EntityTypeView.View_Tree:not(.MicroView) .ListAll,
.SupportsTouch .EntityTypeView.View_Tree2:not(.MicroView) .ListAll {
    height: 100% !important;
    min-height: 280px !important;
    max-height: 100% !important;
    flex: 1 1 auto !important;
}

.Mobile .EntityTypeView.View_List:not(.MicroView) .ListBody,
.SupportsTouch .EntityTypeView.View_List:not(.MicroView) .ListBody,
body.Mobile .EntityTypeView.View_List .ListBody {
    min-height: 240px !important;
}

/* 2026-09-14 — mobil 280px taban YALNIZ dolu liste/agacta (90b755a0e'nin amaci: mobil LISTE cokmesi).
   OLCULDU: genis secici (0,4,1) views.css sozlesmesine (0,5,0) listede KAYBEDIYOR (PersonDasboard mobil govde 53px,
   4 ic ice scroll), sozlesme disindaki DisableOverflow ItemView'lerde KAZANIP icerigi 0 olan 280px bos blok basiyordu
   (MyPage mobil x4). Genis secici artik sifirlar; taban kazanan ozgullukle yalniz dolu List/Tree/Tree2'de.
   A/B: PersonDasboard 246->526px + ic ice scroll 0, MyPage mobil 4->0 bosluk. */
body.Mobile .EntityTypeViewBody > .Center > .Middle {
    min-height: 0 !important;
}
body.Mobile .EntityTypeView:is(.View_List, .View_Tree, .View_Tree2):not(.MicroView):not(.NoItems):not(.DisableOverflow) > .EntityTypeViewBody > .Center > .Middle {
    min-height: 280px !important;
}

/* 2026-09-14 — MOBIL TAKVIM COKUYOR, ICERIGI ALTTAKI GORUNUMUN USTUNE BINIYORDU.
   OLCULDU (satis SessionsHome, 390x844): Panel_right icinde satir ici `flex:1 1 0%; height:auto` tasiyan
   View_Calendar ETV 46px'e cokuyor; mutlak .ETWBody yuksekligi 0, scrollHeight 344 ⇒ takvim arac cubugu ve
   gunu 592px asagidaki infografigin USTUNE ciziliyordu (masaustunde ETV 610px, sorun yok).
   A/B: govde akis icinde ⇒ ETV 664px, tasma 616 -> 0, CalendarBody 451px; `min-height:420px` alternatifi
   yetmedi (tasma 196px); kural kaldirilinca taban geri geliyor. Kart gorunumu deseni (views.css:1416). */
body.Mobile .Content .EntityTypeView.View_Calendar:not(.DisableOverflow) > .EntityTypeViewBody > .Center > .Middle {
    height: auto !important;
}
body.Mobile .Content .EntityTypeView.View_Calendar:not(.DisableOverflow) > .EntityTypeViewBody > .Center > .Middle > .ETWBody {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
}

/* Durum serididi (StatesBar) — 2026-08-19 DUZELTILDI.
   OLCULDU: bu blok ("Item 41") yatay HAP tasarimi varsayiyordu, ama Meta CSS ayni
   siniflara bir ADIM-RAYI cizer (her durum bir sutun; `div:before/:after` = baglanti
   cizgisi; `a:before` = nokta). Iki tasarim ayni anda canliydi ve birbirini bozuyordu:
     · `content:"→" !important` Meta'nin `content:""` baglanti cizgisini EZIYOR ->
       ok, cizginin yerine `top:0`da asili kaliyor, etiketten kopuk. ("oklar bozuk")
     · hap dolgusu + gecis dugmesi olan/olmayan sutunlar -> YUKSEKLIK FARKI 36px,
       etiket merkezleri 18px kacik. ("heightler bozuk")
     · CurrentState `color:#fff` seffaf zeminde GORUNMEZ metin uretiyordu.
   Karar: ADIM-RAYI korunur (platform semasinin tasarimi), bu blok ona HIZALANIR. */
.StatesBar {
    display: flex !important;
    align-items: stretch !important;   /* sutunlar esit yukseklik */
    /* Meta `justify-content:center` diyor; TASAN icerikte ortalama, tasmayi IKI YANA
       dagitir ve sol yari KAYDIRILAMAZ (scrollLeft 0'in solu erisilemez). Olculdu
       (390px): ilk sutun -23..63, etiketin 30px'i ULASILAMAZ. `> div{flex:1}` oldugu
       icin sigan durumda flex-start ile ortalama arasinda fark YOKTUR. */
    justify-content: flex-start !important;
    gap: 0 !important;                 /* ray kesintisiz olsun (8px bosluk rayi kesiyordu) */
    padding: 16px 14px 10px !important;/* ustteki nokta (top:-7px) kirpilmasin */
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    margin-bottom: 14px !important;
    overflow-x: auto !important;
}

.StatesBar > div {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;  /* etiketler ayni yerden baslar */
    gap: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    position: relative !important;
}

/* Meta `.StatesBar a{flex:1}` diyor; sutun (column) yonunde bu, ETIKETI DIKEYDE
   buyutur -> gecis dugmesi OLMAYAN sutunlarda etiket asagi kayiyordu (14px fark).
   Etiket kendi yuksekligi kadar yer alir, gecis dugmesi ALTA sabitlenir. */
.StatesBar > div > a {
    flex: 0 0 auto !important;
    /* OLCULDU: mevcut durumun halkasi (Meta `.CurrentState a:after` top:-12px/25px)
       raya ortelenir, yani alt kenari `a.top+13`e iner; etiket ise `a.top+8`de
       basliyordu -> halka etiketi 5px ORTUYORDU. Ust dolgu TUM durumlarda esit
       artirilir; boylece hem ortusme biter hem etiket hizasi (0px) korunur. */
    padding-top: 14px !important;
}
.StatesBar > div > .Transition {
    margin-top: auto !important;
}

/* Hap zeminleri rayi bozuyordu; vurgu artik RENK + KALINLIK + nokta ile veriliyor.
   Renkler #f8fafc zemininde WCAG AA: #475569 7.5:1 · #1d4ed8 6.3:1 · #64748b 4.6:1
   (onceki NextState rengi #94a3b8 = 2.6:1 idi, AA'yi gecmiyordu). */
.StatesBar > div.PrevState,
.StatesBar > div.CurrentState,
.StatesBar > div.NextState {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.StatesBar > div.PrevState { color: #475569 !important; }
.StatesBar > div.CurrentState { color: #1d4ed8 !important; }
.StatesBar > div.NextState { color: #64748b !important; }

/* Mevcut durumun etiketi digerleriyle AYNI hizada dursun.
   Meta `.StatesBar .CurrentState a{padding:16px 4px !important;height:100%}` diyor;
   burada (0,3,1) ozgullukle hizalaniyor. */
.StatesBar > div.CurrentState > a {
    height: auto !important;
    padding: 14px 8px 2px !important;
}

/* `::after` Meta'da baglanti cizgisinin SAG YARISIDIR — ok karakteri oraya YAZILMAZ. */
.StatesBar > div:not(:last-child)::after {
    content: "" !important;
    margin-left: 0 !important;
}



/* Sekme govdesindeki BOS DURUM GORUNMUYORDU — 2026-08-19 (olculdu: /mCRM "Satis Hunisi").
   `.NoRecordsFound` MUTLAK konumludur (position:absolute), yani yuksekliğe KATKI VERMEZ;
   sekme govdesinin `min-height:100%` degeri ise yuksekligi tanimsiz bir ebeveynde cozulemez.
   Sonuc: panel yalnizca akistaki tek ogesi ("Hepsi" acilir listesi) kadar, 37px kaliyor ve
   "Satis Asamalari Yok" metni panelin 21px DISINDA, bir sonraki panelin altinda kayboluyordu
   — kullanici bos bir serit goruyordu. Kural yalnizca BOS sekmelerde (.NoItems) devreye girer;
   dolu gorunumlerin yuksekligi degismez. Ozgulluk (0,3,1) > Meta'nin (0,2,1) kurali. */
.TabBody > div.Selected.NoItems {
    min-height: 5em !important;
}/* ================================================================
   ItemHeader & ItemFooter UX Fixes
   ================================================================ */

/* Section tabs stay pinned to the top of the scrolling form body instead of
   floating away mid-scroll (KİŞİSEL/AİLE/İLETİŞİM/SAĞLIK etc.). Horizontal tab
   bars only — vertical (TabVer) tab rails are excluded. `Canvas` adapts to
   light/dark so content doesn't bleed through the pinned bar. */
.SingleItem:not(.NoStickyTabs) .TabPanel:not(.TabPanel_TabVer) > .TabHeader {
    position: sticky;
    top: 0;
    z-index: 6;
    /* Use the app's own surface token (theme-managed light/dark), NOT the OS
       `Canvas` system colour — Canvas followed the user's OS dark mode and
       rendered the bar black. var keeps it consistent with the form surface. */
    background: var(--singleItemBackColor, #f0f1f6);
}

/* Live completeness meter — floats as a non-intrusive overlay pill just ABOVE
   the Save cluster (the footer is too cramped to host it inline). Amber while
   required fields remain; hidden once complete so it never crowds "Kaydet
   Kapat". Click jumps to the first empty required field (wired in atom.js). */
.RequiredMeter {
    position: absolute;       /* anchors to .SingleItem; bottom set in atom.js */
    right: 16px;
    bottom: 72px;             /* fallback; JS overrides from real footer height */
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8em;
    font-weight: 600;
    color: #b26a00;
    background: #fff8e6;
    border: 1px solid rgba(255, 193, 7, 0.7);
    border-radius: 999px;
    padding: 4px 12px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    transition: background 0.15s ease, transform 0.12s ease;
}
.RequiredMeter::before {
    content: "\26A0";   /* ⚠ */
    font-size: 0.9em;
    opacity: 0.85;
}
.RequiredMeter:hover { background: #fff2cc; transform: translateY(-1px); }
/* Complete → no indicator needed; keep the footer clean. */
.RequiredMeter.RequiredMeterDone { display: none; }
.RequiredMeter:empty { display: none; }

/* UXPEAK #4 — Goal Gradient completion bar inside the meter chip */
.RequiredMeterBar {
    position: absolute;
    left: 0; bottom: 0;
    height: 4px;
    width: 0%;
    background: linear-gradient(90deg, #34a853, #4285f4);
    border-bottom-left-radius: 999px;
    border-bottom-right-radius: 999px;
    transition: width 0.3s ease;
}
.RequiredMeterText { position: relative; z-index: 1; }

/* Placement variants (RequiredMeterPosition per Object/Domain). AboveFooter is
   the default and uses the base rule + JS-computed bottom. */
.RequiredMeter.RequiredMeterPos_TopRight {
    top: 8px;
    bottom: auto;
    right: 16px;
}
.RequiredMeter.RequiredMeterPos_FooterInline {
    position: static;
    bottom: auto;
    right: auto;
    box-shadow: none;
    margin-left: 8px;
}

/* ⛔ 2026-08-27 — MOBİLDE ÖRTÜŞME. Varsayılan (AboveFooter) çip `position:absolute` ve
   `bottom` JS'ten hesaplanıyor; dar kadrajda form alanının ÜSTÜNE biniyordu.
   ÖLÇÜLDÜ (finance, Pixel7 emülasyonu, TaxFilingRun formu): "5 zorunlu alan kaldı" bandı
   y=685/h=14 konumundaydı ve `elementsFromPoint` bandın MERKEZİNDE `FieldLabel` döndürdü
   — yani çip bir form etiketini örtüyordu.
   POLİTİKA (361-ui): yüzer/sabit yüzeyin istenmeyen kesişimi 0 px2 olmalı.
   ÇARE: dar kadrajda çip AKIŞA alınır — yer kaplar, hiçbir şeyi örtmez. Geniş kadrajda
   davranış DEĞİŞMEZ (orada örtüşme ölçülmedi ve yüzer çip yerden tasarruf ediyor).
   ⚠️ `static` DEĞİL `relative`: içindeki `.RequiredMeterBar` absolute'tur; ebeveyn
   positioned olmazsa bar en yakın konumlanmış ataya (SingleItem) göre yerleşir ve
   ilerleme çubuğu bozulurdu. Bu, "bir şeyi düzeltirken çalışanı bozma" sınıfıdır. */
@media (max-width: 768px) {
    .RequiredMeter.RequiredMeterPos_AboveFooter {
        position: relative;
        bottom: auto;
        right: auto;
        display: flex;
        width: fit-content;
        max-width: calc(100% - 24px);
        margin: 8px 12px 4px auto;
        box-shadow: none;
    }
}

/* #3 Searchable combobox for large native selects (ValueFieldType enums). */
.SiCombo { position: relative; flex: 1; min-width: 0; }
.SiComboInput {
    width: 100%;
    box-sizing: border-box;
    border: var(--inputBorder);
    border-radius: var(--inputRadius, 6px);
    padding: var(--inputPadding);
}
.SiComboList {
    display: none;
    position: absolute;
    z-index: 50;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 2px;
    max-height: 260px;
    overflow: auto;
    background: var(--singleItemBackColor, #f0f1f6);
    border: 1px solid rgba(127, 127, 127, 0.3);
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}
.SiCombo.SiComboOpen .SiComboList { display: block; }
.SiComboOpt {
    display: block;
    padding: 7px 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--labelColor, #3d5986);
}
.SiComboOpt:hover { background: rgba(10, 110, 185, 0.10); }
.SiComboOptSel { font-weight: 600; background: rgba(10, 110, 185, 0.06); }
.SiComboMore { padding: 6px 12px; font-size: 0.8em; opacity: 0.6; }

/* #13 Drag-and-drop file/image drop-zone highlight. */
.Field.Mode_Edit .FieldValue.SiDragOver,
.Field.Mode_Edit .SiDragOver {
    outline: 2px dashed var(--activeBorderColor, #0a6eb9);
    outline-offset: -2px;
    background: rgba(10, 110, 185, 0.06);
    border-radius: var(--inputRadius, 6px);
}

/* ItemHeader: PreviewButton always visible (not hover-only) */
.ItemHeader > .Right .ItemPreviewButton {
    opacity: 0.4;
    transition: opacity 0.2s ease;
}
.ItemHeader:hover > .Right .ItemPreviewButton {
    opacity: 1;
}

/* ItemHeader: mobile back button */
.ItemHeader .MobileBackBtn {
    display: none;
}
body.Mobile .ItemHeader .MobileBackBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    cursor: pointer;
    font-size: 20px;
    opacity: 0.6;
    transition: opacity 0.15s;
    border: none;
    background: transparent;
}
body.Mobile .ItemHeader .MobileBackBtn:hover,
body.Mobile .ItemHeader .MobileBackBtn:active {
    opacity: 1;
}

/* ItemHeader: animation on mount */
.ItemHeader {
    animation: headerSlideIn 0.25s ease-out;
}
@keyframes headerSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ItemFooter: ByUserDate always visible at reduced opacity */
.ByUserDate {
    opacity: 0.4 !important;
    position: static !important;
    transition: opacity 0.2s ease;
}
.ItemFooter:hover .ByUserDate {
    opacity: 0.7 !important;
}
.ItemFooter:hover .ByUserDate:hover {
    opacity: 1.0 !important;
}

/* ItemFooter: larger submit buttons with visual feedback */
.ItemSubmit {
    opacity: 1 !important;
}
.ItemSubmit a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 6em !important;
    max-width: 8em !important;
    opacity: 1 !important;
    border-radius: var(--radiusSm, 4px) !important;
    transition: all 0.15s ease;
    min-height: 44px;
}
.ItemSubmit a:active {
    transform: scale(0.95);
}
/* SaveButton (Kaydet — save & stay): a clear SECONDARY action beside the green
   primary "Kaydet Kapat" (OkButton). Was near-invisible — transparent bg, 10.8px
   text, mislabeled with the view title (B1). Now readable, outlined, distinct. */
.ItemSubmit > a.SaveButton {
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 1em;
    font-weight: 600;
    color: var(--activeBorderColor, #0a6eb9);
    background: color-mix(in srgb, var(--activeBorderColor, #0a6eb9) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--activeBorderColor, #0a6eb9) 42%, transparent);
}
.ItemSubmit > a.SaveButton:hover {
    opacity: 1 !important;
    background: color-mix(in srgb, var(--activeBorderColor, #0a6eb9) 18%, transparent);
    box-shadow: 0 2px 8px rgba(10, 110, 185, 0.28);
}
/* OkButton (Kaydet Kapat — primary submit action with checkmark icon) */
.ItemSubmit > a.OkButton {
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 1em;
    font-weight: 600;
    color: #fff !important;
    background-color: #00a74e !important;
    border: 1px solid #00a74e !important;
}
.ItemSubmit > a.OkButton:hover {
    opacity: 1 !important;
    background-color: #009646 !important;
    box-shadow: 0 2px 8px rgba(0, 167, 78, 0.35);
}
.ItemSubmit > a.CancelButton {
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 1em;
    font-weight: 500;
}
.ItemSubmit > a.CancelButton:hover {
    opacity: 1 !important;
    box-shadow: 0 2px 8px rgba(167, 0, 78, 0.2);
}

/* SaveAndNewButton (Kaydet & Yeni — save then reset to a blank form). A tinted
   accent action for rapid sequential entry, visually between the secondary Save
   and the green primary "Kaydet Kapat". */
.ItemSubmit > a.SaveAndNewButton {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 1em;
    font-weight: 600;
    color: #fff;
    background: var(--activeBorderColor, #0a6eb9);
    border: 1px solid var(--activeBorderColor, #0a6eb9);
}
.ItemSubmit > a.SaveAndNewButton:hover {
    opacity: 1 !important;
    filter: brightness(1.06);
    box-shadow: 0 2px 10px rgba(10, 110, 185, 0.35);
}

/* When a form footer occupies the bottom-right, lift the transient bottom-right
   #INFOMessages toasts (e.g. "Kaydedilemedi") so they don't land on the save
   cluster (B5). Scoped via :has() to ONLY when a SingleItem footer is present —
   the global bottom:1em position is untouched for every other screen. */
body:has(.SingleItem > .ItemFooter) .INFOMessages { bottom: 5.5em; }
body.Mobile:has(.SingleItem) .INFOMessages { bottom: 7em; }

/* New form header: the HeaderForm renders key fields (Öğrenci No, Sınıf…) which
   are empty on a brand-new record, so the dotted label-leaders read as broken
   placeholders (B9). In New mode, drop the leader and dim the empty header field
   so it reads as a clean "new record" state rather than a wall of dots. */
.SingleItemNew .ItemHeader .Field.FieldIsEmpty .FieldLabel:after { opacity: 0; }
.SingleItemNew .ItemHeader .Field.FieldIsEmpty { opacity: 0.5; }

/* ItemBottom: mobile sticky with safe area */
body.Mobile .ItemBottom {
    position: sticky;
    bottom: 0;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
    background: var(--backColor);
    border-top: 1px solid rgba(127, 127, 127, 0.15);
}
body.Mobile .ItemBottom > .Left,
body.Mobile .ItemBottom > .Right {
    min-height: 48px;
}

/* ItemFooter: animation on mount */
.ItemFooter {
    animation: footerSlideIn 0.2s ease-out;
}
@keyframes footerSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* SingleItem: open animation */
.SingleItem {
    animation: singleItemOpen 0.3s ease-out;
}
@keyframes singleItemOpen {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
body.Mobile .SingleItem {
    animation-name: singleItemOpenMobile;
}
@keyframes singleItemOpenMobile {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
#SchemaStaleBanner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #37474f;
    color: #fff;
    font-size: 13px;
}
#SchemaStaleBanner span { flex: 1; }
#SchemaStaleBannerReload {
    padding: 4px 14px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 3px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    cursor: pointer;
    font-size: 12px;
}
#SchemaStaleBannerReload:hover { background: rgba(255,255,255,0.3); }
#SchemaStaleBannerClose {
    border: none;
    background: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
}
#SchemaStaleBannerClose:hover { color: #fff; }
.ETWNewItemsBadge {
    display: block;
    width: 100%;
    padding: 5px 12px;
    background: #e8f5e9;
    border: none;
    border-bottom: 1px solid #a5d6a7;
    color: #2e7d32;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    position: sticky;
    top: 0;
    z-index: 200;
}
.ETWNewItemsBadge:hover { background: #c8e6c9; }
.ItemStaleBanner {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #fff8e1;
    border-bottom: 1px solid #ffe082;
    font-size: 13px;
    color: #5d4037;
}
.ItemStaleBanner span { flex: 1; }
.ItemStaleBannerBtn {
    padding: 3px 10px;
    border: 1px solid #ffe082;
    border-radius: 3px;
    background: #fff3cd;
    color: #5d4037;
    cursor: pointer;
    font-size: 12px;
}
.ItemStaleBannerBtn:hover { background: #ffe082; }
.ItemStaleBannerClose {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
    color: #9e9e9e;
    line-height: 1;
    padding: 0 2px;
}
.ItemStaleBannerClose:hover { color: #333; }

/* EditLock (S2): pessimistic edit-lock warning banner — record opened
   read-only because another user is editing it (m-editlock.js). */
.EditLockBanner {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #fdecea;
    border-bottom: 1px solid #f5c6cb;
    font-size: 13px;
    color: #842029;
}
.EditLockBannerIcon { flex: none; }
.EditLockBannerText { flex: 1; }
.EditLockBannerRetry {
    padding: 3px 10px;
    border: 1px solid #f5c6cb;
    border-radius: 3px;
    background: #fff;
    color: #842029;
    cursor: pointer;
    font-size: 12px;
}
.EditLockBannerRetry:hover { background: #f8d7da; }

/* Doküman kasası (m-vault.js): kasa kaydında durum + check-out / check-in bandı.
   Durum rengi bir olaydır: serbest = nötr, kilit sende = mavi, başkasında = amber, süresi dolmuş/hata = kırmızı. */
.VaultBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 13px;
    line-height: 1.4;
    box-sizing: border-box;
    max-width: 100%;
}
.VaultBar.is-mine { border-color: #93c5fd; background: #eff6ff; }
.VaultBar.is-other { border-color: #fcd34d; background: #fffbeb; }
.VaultBar.is-expired, .VaultBar.is-error { border-color: #fca5a5; background: #fef2f2; }
.VaultChip {
    flex: none;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: #e2e8f0;
    color: #334155;
}
.VaultBar.is-mine .VaultChip { background: #dbeafe; color: #1d4ed8; }
.VaultBar.is-other .VaultChip { background: #fef3c7; color: #92400e; }
.VaultBar.is-expired .VaultChip, .VaultBar.is-error .VaultChip { background: #fee2e2; color: #b91c1c; }
.VaultBarText { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.VaultBarText b { font-weight: 700; }
.VaultBarSub { display: block; color: #475569; font-size: 12px; }
.VaultBarActions { display: flex; flex-wrap: wrap; gap: 8px; }
.VaultBtn {
    white-space: nowrap;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.VaultBtn:hover { background: #f1f5f9; }
.VaultBtn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.VaultBtn.is-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.VaultBtn.is-primary:hover { background: #1d4ed8; }
.VaultBtn[disabled] { opacity: .55; cursor: default; }
.VaultPanel {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    min-width: 0;
}
.VaultPanel label { font-size: 12px; font-weight: 600; color: #475569; }
.VaultPanel input[type=file], .VaultPanel textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    font: inherit;
}
.VaultMsg { color: #b91c1c; font-weight: 600; }
.VaultRevList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.VaultRevList li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid #f1f5f9; }
.VaultRevNo { font-weight: 800; min-width: 44px; }
.VaultRevMeta { color: #475569; font-size: 12px; }
@media (max-width: 640px) {
    .VaultBar { padding: 10px; }
    .VaultBarActions { width: 100%; }
    .VaultBtn { min-height: 42px; flex: 1 1 45%; }
}

.LazyNavLoading {
    padding: 2rem;
    text-align: center;
    color: #888;
    font-size: 14px;
}

.ContentViewLoading {
    min-height: 1em;
}

/* O1 (2026-08-07): lazy content hydrate beklerken gri skeleton shimmer.
   Yalniz m.js ContentViewLoading ekliyken gorunur; hydrate bitince class
   kaldirilir ve icerik render edilir. CSS-only, JS degisikligi yok. */
.ContentViewLoading::before {
    content: "";
    display: block;
    height: 120px;
    margin: 8px 0;
    border-radius: 8px;
    background: linear-gradient(90deg,
        rgba(var(--shadowRGB, 0, 0, 0), 0.05) 25%,
        rgba(var(--shadowRGB, 0, 0, 0), 0.12) 50%,
        rgba(var(--shadowRGB, 0, 0, 0), 0.05) 75%);
    background-size: 200% 100%;
    animation: ContentViewShimmer 1.2s ease-in-out infinite;
}

@keyframes ContentViewShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- New Item FAB (Floating Action Button) ---- */
.NewItemFAB {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primaryColor, #0a6eb9);
    color: var(--primaryOnPlan, #fff);   /* 2026-09-02: on plan zeminden (m.js motoru); token yoksa beyaz/#0a6eb9 = 6,1:1 */
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.15s ease;
    padding: 0;
}
/* 2026-08-29 — FAB VARSAYILAN + DESKTOP HOVER-REVEAL (kullanıcı kararı):
   New butonu default olarak FAB'tır; Desktop'ta EntityTypeView hover'ında belirir.
   Mobil/Tablet'te hover olmadığından FAB her zaman görünür kalır (kural yalnız .Desktop).
   Klavye kullanıcıları için focus-visible'da da görünür olur (erişilebilirlik). */
.Desktop .EntityTypeView > .NewItemFAB {
    opacity: 0;
    pointer-events: none;
}
.Desktop .EntityTypeView:hover > .NewItemFAB,
.Desktop .EntityTypeView > .NewItemFAB:focus-visible {
    opacity: 1;
    pointer-events: auto;
}
/* KAYIT YOK → TEK BUTON: NoItems durumunda NoRecordsFound boş-durum bileşeninin
   kendi "+ Yeni" butonu tek CTA'dır; FAB ikinci buton etmemek için tamamen gizlenir.
   (NoItems class'ı kayıt sayısı 0'a düşünce etwdiv'e eklenir; kayıt gelince kalkar —
   FAB DOM'da kalır, bu kural görünümü anında açar/kapar.) */
.NoItems .NewItemFAB {
    display: none !important;
}
/* C4 (2026-06-13): was outline:none (suppressed keyboard focus). Restore a ring for keyboard users. */
.NewItemFAB:focus-visible {
    outline: 2px solid var(--focusColor, rgb(10, 110, 185));
    outline-offset: 3px;
}
.NewItemFAB:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.NewItemFAB:active {
    transform: scale(0.95);
}
body.Mobile .NewItemFAB {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    font-size: 20px;
}
.NewItemFAB i {
    line-height: 1;
}

/* ---- Confirm Modal Overlay ---- */
.ConfirmBox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--zModal, 1000);
    animation: fadeIn 0.15s ease;
    /* A5 (2026-06-13): backdrop blur removed — the rgba(0,0,0,.35) scrim already reads as
       modal; blur over a large list/dashboard DOM caused measured ~13s first-frame stalls
       (designer-modal lesson). */
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.ConfirmWindow {
    background: var(--backColor, #fff);
    color: var(--textColor, #303030);
    border-radius: var(--radiusLg, 12px);
    box-shadow: var(--shadowXl, 0 20px 60px rgba(0, 0, 0, 0.2));
    padding: 24px;
    min-width: 320px;
    max-width: 440px;
    width: 90%;
    animation: confirmSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes confirmSlideIn {
    from { transform: translateY(16px) scale(0.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.ConfirmTitle {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.5;
}
.ConfirmButtons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.ConfirmCancel,
.ConfirmOk {
    padding: 8px 20px;
    border-radius: var(--radiusMd, 8px);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.15s ease, transform 0.1s ease;
}
.ConfirmCancel {
    background: rgba(127, 127, 127, 0.1);
    color: var(--textColor, #303030);
}
.ConfirmCancel:hover {
    background: rgba(127, 127, 127, 0.2);
}
.ConfirmOk {
    /* 2026-09-02 (backlog "WCAG AA kontrast: birincil dugme 3,67:1"): beyaz metin
       #3b82f6 uzerinde 3,67:1 idi. Zemin geri dususu ayni ton ailesinde #2563eb
       (5,2:1, .EmptyStateActionButton ile AYNI zincir); on plan m.js motorundan
       (`--primaryOnPlan`, `--primaryColor` tanimliysa) — zemin ve on plan AYNI kaynak.
       Hover: brightness(1.1) koyulastirilan zemini geri ACIYORDU (olculmus sinif,
       20-uxcx-v5.css) — yerine ayni ailede bir ton koyu zemin. */
    background: var(--primaryColor, #2563eb);
    color: var(--primaryOnPlan, #fff);
}
.ConfirmOk:hover {
    background: var(--primaryColor, #1d4ed8);
}
.ConfirmCancel:active,
.ConfirmOk:active {
    transform: scale(0.97);
}

/* ================================================================
   ItemFooter — Left, Center, Right Action Button & Icon Contract
   ----------------------------------------------------------------
   • Center: STRICTLY TEXT ONLY — NO IMAGES / ICONS (display: none).
   • Left: Utility buttons (Edit, New, Del, Copy, Docs, Relations)
     MUST show images/icons at uniform 16x16 scale.
   • Right: Submit & preview buttons (Kaydet, Kaydet Kapat, Kapat, Önizleme)
     MUST show images/icons at uniform 16x16 scale.
   ================================================================ */

/* Left & Right & ItemSubmit: Uniform 16x16 action icon scale */
.ItemFooter .Left   a .ImageSpan[class*="icon-"]:not(.icon-Empty),
.ItemFooter .Left   a > span:first-child:not(.ButtonText),
.ItemFooter .Right  a .ImageSpan[class*="icon-"]:not(.icon-Empty),
.ItemFooter .Right  a > span:first-child:not(.ButtonText),
.ItemSubmit         a .ImageSpan[class*="icon-"]:not(.icon-Empty),
.ItemSubmit         a > span:first-child:not(.ButtonText) {
    font-size: 16px !important;
    line-height: 1 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    vertical-align: middle !important;
    box-sizing: content-box !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 1. ItemFooter .Left — Images MUST BE VISIBLE */
.ItemFooter .Left a .ImageSpan,
.ItemFooter .Left a img,
.ItemFooter .Left a svg,
.ItemFooter .Left a .ImageClass,
.ItemFooter .Left a [class*="icon-"],
.ItemFooter .Left a > span:first-child:not(.ButtonText),
.ItemFooter .Left .ItemActions a .ImageSpan,
.ItemFooter .Left .ItemActions a img,
.ItemFooter .Left .ItemActions a svg,
.ItemFooter .Left .ItemActions a .ImageClass,
.ItemFooter .Left .ItemActions a [class*="icon-"],
.SingleItem .ItemActions a.Action_Documents .ImageSpan,
.SingleItem .ItemActions a.Action_Relations .ImageSpan {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.ItemFooter .Left a > .ImageSpan[class*="icon-"]:not(.icon-Empty) + .ButtonText,
.ItemFooter .Left a > span:first-child:not(.ButtonText) + .ButtonText {
    margin-left: 6px !important;
}

/* 2. ItemFooter .Right — Images MUST BE VISIBLE (Overrides old itemstyles.css:840 hiding OkButton icon) */
.ItemFooter .Right a .ImageSpan,
.ItemFooter .Right a img,
.ItemFooter .Right a svg,
.ItemFooter .Right a .ImageClass,
.ItemFooter .Right a [class*="icon-"],
.ItemFooter .Right a > span:first-child:not(.ButtonText),
.ItemFooter .Right .ItemSubmit a .ImageSpan,
.ItemFooter .Right .ItemSubmit a img,
.ItemFooter .Right .ItemSubmit a svg,
.ItemFooter .Right .ItemSubmit a .ImageClass,
.ItemFooter .Right .ItemSubmit a [class*="icon-"],
.ItemFooter .Right .ItemSubmit a > span:first-child:not(.ButtonText),
.ItemFooter .Right .ItemPreviewButton .ImageSpan,
.ItemFooter .Right .ItemPreviewButton img,
.ItemFooter .Right .ItemPreviewButton svg,
.ItemSubmit a .ImageSpan,
.ItemSubmit a img,
.ItemSubmit a svg,
.ItemSubmit a .ImageClass,
.ItemSubmit a [class*="icon-"],
.ItemSubmit a > span:first-child:not(.ButtonText),
.ItemSubmit .OkButton > span:first-child,
.ItemSubmit .CancelButton > span:first-child,
.ItemSubmit .SaveButton > span:first-child,
.ItemSubmit .SaveAndNewButton > span:first-child {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.ItemSubmit a > span:first-child:not(.ButtonText) + .ButtonText,
.ItemSubmit a > .ImageSpan + .ButtonText {
    margin-left: 6px !important;
}
.ItemSubmit a > .ButtonText,
.ItemSubmit .SaveButton > .ButtonText,
.ItemSubmit .CancelButton > .ButtonText,
.ItemSubmit .OkButton > .ButtonText {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 3. ItemFooter .Center — Images MUST NOT BE VISIBLE (Strictly text-only buttons) */
.ItemFooter .Center a > .ImageSpan,
.ItemFooter .Center a > img,
.ItemFooter .Center a > svg,
.ItemFooter .Center a > .ImageClass,
.ItemFooter .Center a > [class*="icon-"],
.ItemFooter .Center a > span[class*="icon-"],
.ItemFooter .Center a > span:first-child:not(.ButtonText),
.ItemFooter .Center .ItemActions a > .ImageSpan,
.ItemFooter .Center .ItemActions a > img,
.ItemFooter .Center .ItemActions a > svg,
.ItemFooter .Center .ItemActions a > .ImageClass,
.ItemFooter .Center .ItemActions a > [class*="icon-"],
.ItemFooter .Center .ItemActions a > span[class*="icon-"],
.ItemFooter .Center .ItemActions a > span:first-child:not(.ButtonText),
.ItemFooter .Center button > .ImageSpan,
.ItemFooter .Center button > img,
.ItemFooter .Center button > svg,
.ItemFooter .Center button > .ImageClass,
.ItemFooter .Center button > [class*="icon-"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Reset margin-left on Center button labels since images are removed */
.ItemFooter .Center a > .ButtonText,
.ItemFooter .Center .ItemActions a > .ButtonText {
    margin-left: 0 !important;
}
/* ---------------------------------------------------------------------------
   SingleItem Aksiyon Merkezi (2026-09-14) — FormsTrack carousel'inin yerine.
   Sol-alt "Tüm İşlemler" başlatıcısı + ortada hızlı erişim çubuğu + gruplu panel.
   Plan: .claude/plans/2026-09-14-singleitem-aksiyon-baslatici.md
   --------------------------------------------------------------------------- */
.ItemFooter,
.SingleItem > .ItemFooter {
    height: auto !important;
    min-height: 52px !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    gap: 12px !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

body:not(.Mobile) .ItemFooter > .Left,
body:not(.Mobile) .ItemFooter > .Right {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 !important;
}

body:not(.Mobile) .ItemFooter > .Center {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 40px !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* 1. Başlatıcı düğmesi — nötr (birincil vurgu Kaydet Kapat'ta kalır) */
.ItemActionLauncherHost {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
.ItemFooter .ItemActionLauncher,
.ItemBottom .ItemActionLauncher {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 12px 0 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.ItemFooter .ItemActionLauncher:hover,
.ItemBottom .ItemActionLauncher:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}
.ItemFooter .ItemActionLauncher:focus-visible,
.ItemBottom .ItemActionLauncher:focus-visible {
    outline: 2px solid var(--primaryColor, #0284c7) !important;
    outline-offset: 2px !important;
}
.ItemFooter .ItemActionLauncher.MenuOpen,
.ItemBottom .ItemActionLauncher.MenuOpen {
    border-color: var(--primaryColor, #0284c7) !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}
.ItemActionLauncher .IAL_Icon {
    display: inline-flex !important;
    color: var(--primaryColor, #0284c7) !important;
}
.ItemActionLauncher .IAL_Count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    border-radius: 10px !important;
    background: #e2e8f0 !important;
    color: #334155 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
}
.ItemActionLauncher .IAL_Chevron {
    font-size: 10px !important;
    color: #64748b !important;
    transition: transform 0.2s ease !important;
}
.ItemActionLauncher.MenuOpen .IAL_Chevron {
    transform: rotate(180deg) !important;
}

/* 2. Hızlı erişim çubuğu — sığmayan çip kırpılmaz, gizlenir (+N) */
.ItemFooter .ItemQuickBar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 6px !important;
    overflow: hidden !important;
    padding: 2px 2px 2px 12px !important;
    margin: 0 !important;
    border-left: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
}
.ItemFooter .Center .ItemQuickBar a.IAQ_Hidden {
    display: none !important;
}
.ItemFooter .Center .ItemQuickBar a.IAQ_Temp {
    border-style: dashed !important;
}
.ItemFooter .Center .ItemQuickBar a.IAQ_More {
    border-style: dashed !important;
    color: #475569 !important;
    font-weight: 700 !important;
    min-width: 44px !important;
}
/* Sistem aksiyonları ikon çipi — Center'ın "ikon yok" kuralını (744-763) BİLEREK ezer */
.ItemFooter .Center .ItemQuickBar a.IAQ_Icon {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
}
.ItemFooter .Center .ItemQuickBar a.IAQ_Icon > *:not(.Aggregate) {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    color: inherit !important;
    /* itemstyles.css .ImageSpan position:absolute veriyor — çipin DIŞINA taşıyor, üç ikon üst üste
       biniyordu (ölçüldü: üç span aynı rect 273,896; çipler boş). İkon çipin içinde akar. */
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: none !important;
}
.ItemFooter .Center .ItemQuickBar a.IAQ_Icon svg,
.ItemFooter .Center .ItemQuickBar a.IAQ_Icon img {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}
.ItemFooter .Center .ItemQuickBar .IAQ_Sep {
    flex: 0 0 1px;
    width: 1px;
    height: 24px;
    margin: 0 4px;
    background: #e2e8f0;
}

/* SADE DÜĞME (kullanıcı kararı 2026-09-14): başlatıcı + hızlı erişim düğmeleri sağdaki Kaydet/Kapat
   gibi — kenarlık/zemin/köşe YOK, aralarında boşluk YOK (basılabilir alan en geniş), yalnız sağda ince
   ayraç çizgisi; tam çubuk yüksekliği (48px). Seçili olan: birincil renk + altta 2px çizgi. */
.ItemFooter .Center .ItemQuickBar {
    gap: 0 !important;
    padding: 0 !important;
    border-left: 0 !important;
    align-self: stretch !important;
    align-items: stretch !important;
    min-height: 48px !important;
}
.ItemFooter .Center .ItemQuickBar .IAQ_Sep {
    display: none !important;              /* düğmeler zaten sağ çizgiyle ayrılır */
}
.ItemFooter .Center .ItemQuickBar a.IAQ_Chip,
.ItemFooter .Center .ItemQuickBar a.IAQ_More {
    height: auto !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border: 0 !important;
    border-right: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #4f4f52 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
.ItemFooter .Center .ItemQuickBar a.IAQ_Chip.IAQ_Icon {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    padding: 0 !important;
}
.ItemFooter .Center .ItemQuickBar a.IAQ_Chip:hover,
.ItemFooter .Center .ItemQuickBar a.IAQ_More:hover {
    background: rgba(15, 23, 42, 0.05) !important;
    color: #0f172a !important;
}
.ItemFooter .Center .ItemQuickBar a.IAQ_Chip.SelectedAction {
    background: transparent !important;
    color: var(--primaryColor, #0284c7) !important;
    font-weight: 700 !important;
    box-shadow: inset 0 -2px 0 var(--primaryColor, #0284c7) !important;
}
.ItemFooter .Center .ItemQuickBar a.IAQ_More {
    border-style: solid !important;
    min-width: 48px !important;
    color: #475569 !important;
    font-weight: 700 !important;
}
.ItemFooter .ItemActionLauncher {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px 0 10px !important;
    border: 0 !important;
    border-right: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.ItemFooter .ItemActionLauncher:hover {
    background: rgba(15, 23, 42, 0.05) !important;
}
.ItemFooter .ItemActionLauncher.MenuOpen {
    border-color: #e2e8f0 !important;
    box-shadow: inset 0 -2px 0 var(--primaryColor, #0284c7) !important;
}
.ItemFooter .Center .ItemQuickBar a:focus-visible {
    outline: 2px solid var(--primaryColor, #0284c7) !important;
    outline-offset: 2px !important;
}

/* KAYIT EYLEMLERİ (ItemSubmit) — SADE DÜĞME DİLİ (kullanıcı kararı 2026-09-15)
   Ölçüldü (satis PersonTag + başlık formlu Profession, 1600x950): aynı Kaydet/Kapat/Kaydet Kapat kümesi
   başlıkta VE alt çubukta çiziliyordu; başlıkta zz-from-361 Kaydet'i çerçeveli kutu, alt çubukta itemstyles
   `visibility:hidden` — iki farklı görünüm. Alt düğmeler 65x48 ikon-üstte, "Kaydet Kapat" 86px'e sığmayıp
   2 satır; "Değiştiren" tarihi (absolute top:0) üç düğmenin üstüne 5px biniyordu.
   Karar: kayıt eylemleri yalnız alt çubukta (atom.js HeaderSubmit=None). Kaydet/Kapat hızlı erişim
   çubuğunun sade dilinde — zeminsiz, gri, 48px, ince ayraç; hover'da Kaydet birincil mavi, Kapat kırmızı.
   Kaydet Kapat tek birincil eylem: yeşil dolgu, tek satır. Tarih bilgisi sağda iki satırlık grup.
   A/B (TG enjeksiyonu): tarih çakışması 3→0, çubuk dışı taşma 0, mobil değerler birebir aynı.
   Mobil (ItemBottom) BİLEREK kapsam dışı — dde77ab4f/febfbded6 390px ayarı korunur. */
body:not(.Mobile) .SingleItem :is(.ItemFooter, .ItemHeader) .ItemSubmit {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    align-self: stretch !important;
    gap: 0 !important;
    height: auto !important;
    opacity: 1 !important;
}
body:not(.Mobile) .SingleItem :is(.ItemFooter, .ItemHeader) .ItemSubmit > a {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 48px !important;
    min-height: 48px !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-left: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #4f4f52 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
}
body:not(.Mobile) .SingleItem :is(.ItemFooter, .ItemHeader) .ItemSubmit > a > .ButtonText {
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}
body:not(.Mobile) .SingleItem :is(.ItemFooter, .ItemHeader) .ItemSubmit > a:not(.OkButton) > span:first-child:not(.ButtonText) {
    color: inherit !important;
}
body:not(.Mobile) .SingleItem :is(.ItemFooter, .ItemHeader) .ItemSubmit > a:is(.SaveButton, .SaveAndNewButton):hover {
    background: rgba(2, 132, 199, 0.08) !important;
    color: var(--primaryColor, #0284c7) !important;
}
body:not(.Mobile) .SingleItem :is(.ItemFooter, .ItemHeader) .ItemSubmit > a.CancelButton:hover {
    background: rgba(190, 18, 60, 0.07) !important;
    color: #be123c !important;
}
body:not(.Mobile) .SingleItem :is(.ItemFooter, .ItemHeader) .ItemSubmit > a:focus-visible {
    outline: 2px solid var(--primaryColor, #0284c7) !important;
    outline-offset: -2px !important;
}
body:not(.Mobile) .SingleItem :is(.ItemFooter, .ItemHeader) .ItemSubmit > a.OkButton {
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 0 0 10px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #00a74e !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
body:not(.Mobile) .SingleItem :is(.ItemFooter, .ItemHeader) .ItemSubmit > a.OkButton:hover {
    background: #009646 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 167, 78, 0.35) !important;
}
/* Önizleme: Kaydet/Kapat ile AYNI sade düğme — ikon + metin, 48px (kullanıcı isteği 2026-09-15:
   46px ikon-only kare ikonu üste kaymış, komşularından küçük görünüyordu) */
body:not(.Mobile) .SingleItem .ItemFooter > .Right > .ItemPreviewButton {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-left: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #4f4f52 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}
body:not(.Mobile) .SingleItem .ItemFooter > .Right > .ItemPreviewButton > :is(.ImageSpan, img, svg, span:first-child:not(.ButtonText)) {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    color: inherit !important;
}
body:not(.Mobile) .SingleItem .ItemFooter > .Right > .ItemPreviewButton > .ButtonText {
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}
body:not(.Mobile) .SingleItem .ItemFooter > .Right > .ItemPreviewButton:hover {
    background: rgba(2, 132, 199, 0.08) !important;
    color: var(--primaryColor, #0284c7) !important;
}
body:not(.Mobile) .SingleItem .ItemFooter > .Right > .ItemPreviewButton:focus-visible {
    outline: 2px solid var(--primaryColor, #0284c7) !important;
    outline-offset: -2px !important;
}

/* Alt çubuk ve blokları TEK satır (kullanıcı isteği 2026-09-15). Şerit çubuğun içindeyken verilen flex-wrap,
   çok hızlı erişim düğmeli kayıtta (Cari: +12) Left/Center/Right'ı üç satıra bölüyordu. Sığmayan çip +N'e düşer. */
body:not(.Mobile) .SingleItem > .ItemFooter,
body:not(.Mobile) .SingleItem > .ItemFooter > :is(.Left, .Center, .Right) {
    flex-wrap: nowrap !important;
}
/* Kaydet ve Önizleme yalnız ikon (kullanıcı isteği 2026-09-15): metin gizli, ad title/aria-label'da
   (SaveButton atom.js SaveButton'da, ItemPreviewButton atom.js ItemPreviewButton'da). Kare 46x48 — hızlı erişim
   ikon düğmeleriyle aynı ölçü. Kapat ve Kaydet Kapat metinli kalır. */
body:not(.Mobile) .SingleItem .ItemFooter .ItemSubmit > a.SaveButton > .ButtonText,
body:not(.Mobile) .SingleItem .ItemFooter > .Right > .ItemPreviewButton > .ButtonText {
    display: none !important;
}
body:not(.Mobile) .SingleItem .ItemFooter .ItemSubmit > a.SaveButton,
body:not(.Mobile) .SingleItem .ItemFooter > .Right > .ItemPreviewButton {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    padding: 0 !important;
    gap: 0 !important;
}

/* Kayıt bilgisi şeridi (ItemMetaStrip): alt çubuğun HEMEN ÜSTÜNDE ince, sola yaslı bant (kullanıcı isteği
   2026-09-15 — "ortası değil"; sağda RequiredMeter yüzer ve şeridin üstüne çıkar). atom.js şeridi ItemFooter'ın
   önüne KARDEŞ olarak koyar; .SingleItem flex sütunu olduğu için akışta çubuğun üstünde durur. */
body:not(.Mobile) .SingleItem > .ItemMetaStrip {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    /* itemstyles.css .ItemFooter{position:relative; top:-8px} çubuğu 8px yukarı kaydırıyor; şerit de aynı
       kaymayı almazsa çubuk şeridin alt 8px'ine biner (ölçüldü Cari: şerit 864-888, çubuk 880-941). */
    position: relative !important;
    top: -8px !important;
    /* Oluşturan solda, Değiştiren sağda; zemin saydam, şerit hafif soluk — hover'da netleşir (kullanıcı isteği 2026-09-15) */
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    height: 24px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    opacity: 0.75 !important;
    transition: opacity 0.15s ease !important;
    font-size: 11px !important;
    line-height: 1 !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}
body:not(.Mobile) .SingleItem > .ItemMetaStrip > .ByUserDate {
    position: static !important;
    top: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
    font-size: inherit !important;
}
body:not(.Mobile) .SingleItem > .ItemMetaStrip:hover {
    opacity: 1 !important;
}
body:not(.Mobile) .SingleItem > .ItemMetaStrip > .ByUserDate > span {
    display: inline-flex !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
}
/* sıra: etiket · tarih · kullanıcı (DOM: etiket, kullanıcı, tarih) */
body:not(.Mobile) .SingleItem > .ItemMetaStrip > .ByUserDate > span:nth-child(1) {
    order: 1 !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
}
body:not(.Mobile) .SingleItem > .ItemMetaStrip > .ByUserDate > span:nth-child(3) {
    order: 2 !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
}
body:not(.Mobile) .SingleItem > .ItemMetaStrip > .ByUserDate > span:nth-child(2) {
    order: 3 !important;
    gap: 2px !important;
    color: #64748b !important;
}
/* Kullanıcı çözülmediyse (iki iç span boş) kullanıcı parçası ve sahipsiz ":" çizilmez */
body:not(.Mobile) .SingleItem > .ItemMetaStrip > .ByUserDate > span:nth-child(2):not(:has(> span:not(:empty))) {
    display: none !important;
}
body:not(.Mobile) .SingleItem > .ItemMetaStrip > .ByUserDate > span:nth-child(2) > span:first-child:empty::after {
    content: none !important;
}
/* HeaderSubmit="Hover": başlıktaki küme yalnız başlık hover/odakta görünür */
.ItemHeader.HeaderSubmitHover > .Right .ItemSubmit {
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
}
.ItemHeader.HeaderSubmitHover:is(:hover, :focus-within) > .Right .ItemSubmit {
    opacity: 1 !important;
}

/* Mobil: itemstyles.css .ItemFooter{position:relative;top:-8px} çubuğu ItemBottom'un altına sokuyor, "Oluşturan /
   Değiştiren" satırı okunmuyordu (ölçüldü satis PersonTag iPhone 13: ItemBottom 496-565, ItemFooter 557-609, tarih
   558-568). A/B enjeksiyon: ItemFooter 565-617, tarih 566-576 tam görünür, SingleItem yüksekliği ve masaüstü değişmedi. */
body.Mobile .SingleItem > .ItemFooter {
    top: 0 !important;
}

/* Legacy SingleItemFormsView="List": düz, yatay kaydırılan düğme şeridi */
.ItemFooter > .Center .ItemActions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    height: auto !important;
    min-height: 40px !important;
    padding: 2px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

/* Çipler (hızlı erişim + legacy liste) */
.ItemFooter .Center a,
.ItemFooter .Center .ItemActions a {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    min-width: auto !important;
    max-width: 240px !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
    margin: 0 !important;
}
.ItemFooter .Center a:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}
.ItemFooter .Center a.SelectedAction,
.ItemFooter .Center .ItemActions a.SelectedAction {
    background-color: rgba(2, 132, 199, 0.12) !important;
    border-color: var(--primaryColor, #0284c7) !important;
    color: var(--primaryColor, #0284c7) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    position: static !important;
}
.ItemFooter .Center a.SelectedAction .ButtonText,
.ItemFooter .Center .ItemActions a.SelectedAction .ButtonText {
    color: var(--primaryColor, #0284c7) !important;
    font-weight: 700 !important;
}
.ItemFooter .Center a .Aggregate {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
    background: #e2e8f0 !important;
    color: #475569 !important;
    margin-left: 6px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    border: none !important;
}
.ItemFooter .Center a.SelectedAction .Aggregate {
    background: var(--primaryColor, #0284c7) !important;
    color: #ffffff !important;
}
.ItemFooter .Center a > .ButtonText {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
    font-size: inherit !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Gruplu aksiyon paneli (masaüstü: başlatıcının üstünde; ≤640px: alt çekmece) */
.ItemActionPanel {
    position: fixed;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.28), 0 6px 12px -6px rgba(15, 23, 42, 0.16);
    overflow: hidden;
    box-sizing: border-box;
    font-family: inherit;
    white-space: normal;
}
.ItemActionPanel .IAP_Head {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 6px 6px 14px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}
.ItemActionPanel .IAP_Title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}
.ItemActionPanel .IAP_Close {
    margin-left: auto;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #475569;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.ItemActionPanel .IAP_Close:hover { background: #e2e8f0; }
.ItemActionPanel .IAP_SearchWrap {
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
}
.ItemActionPanel .IAP_Search {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-sizing: border-box;
    outline: none;
}
.ItemActionPanel .IAP_Search:focus {
    border-color: var(--primaryColor, #0284c7);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}
.ItemActionPanel .IAP_List {
    overflow-y: auto;
    padding: 6px 6px 8px;
    overscroll-behavior: contain;
}
.ItemActionPanel .IAP_Section + .IAP_Section {
    border-top: 1px solid #e2e8f0;
    margin-top: 6px;
    padding-top: 6px;
}
.ItemActionPanel .IAP_Row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 4px 0 10px;
    border-radius: 6px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    outline: none;
}
.ItemActionPanel .IAP_Row:hover,
.ItemActionPanel .IAP_Row:focus {
    background: #f1f5f9;
    color: #0f172a;
}
.ItemActionPanel .IAP_Row:focus-visible {
    box-shadow: inset 0 0 0 2px var(--primaryColor, #0284c7);
}
.ItemActionPanel .IAP_Row.Active {
    background: rgba(2, 132, 199, 0.10);
    color: var(--primaryColor, #0284c7);
    font-weight: 600;
}
.ItemActionPanel .IAP_RowText {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ItemActionPanel .IAP_Current { font-weight: 800; }
/* Sayaç tutucusu: görünmez ama DOM'a bağlı ve kesişir (tembel sorgu + kayıt bağı için ŞART) */
.IAH_AggHolder {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    overflow: visible;
    opacity: 0;
    pointer-events: none;
}
/* Her sayaç AYNI noktada kendi 1x1 kutusunda: alt alta dizilince yalnız ilki tutucunun görünen
   alanına düşüyor, diğerleri kırpılıp IntersectionObserver'da "görünmez" kalıyor ve tembel sorgu HİÇ
   koşmuyordu (ölçüldü Organization: Kişiler 11 geldi, İş Yerleri/Şubeler/Sözleşmeler/Açık Rıza "-"). */
.IAH_AggHolder > div {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* Sıfır sayaç soluk — nav rozetiyle aynı dil (nav.css .Nav .Aggregate.AggregateZero) */
.ItemFooter .Center a .Aggregate.IAH_AggMirror.AggregateZero,
.ItemActionPanel .IAP_Agg .Aggregate.IAH_AggMirror.AggregateZero {
    opacity: 0.5 !important;
}
.ItemFooter .Center a .Aggregate.IAH_AggEmpty,
.ItemActionPanel .IAP_Agg .Aggregate.IAH_AggEmpty,
.IAH_AggMirror.IAH_AggEmpty {
    display: none !important;
}
.ItemActionPanel .IAP_Agg .Aggregate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #e2e8f0;
    color: #475569;
    font-size: 10.5px;
    font-weight: 700;
    box-sizing: border-box;
}
.ItemActionPanel .IAP_Pin {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.ItemActionPanel .IAP_Pin:hover { background: #e2e8f0; color: #b45309; }
.ItemActionPanel .IAP_Pin.On { color: #d97706; }
.ItemActionPanel .IAP_Row.Danger { color: #b91c1c; }
.ItemActionPanel .IAP_Row.Danger:hover,
.ItemActionPanel .IAP_Row.Danger:focus { background: #fef2f2; color: #991b1b; }
.ItemActionPanel .IAP_Empty {
    padding: 14px;
    font-size: 12.5px;
    color: #64748b;
    text-align: center;
}
.IAP_Scrim {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.38);
}
.ItemActionPanel.IAP_Sheet {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: auto !important;
    max-height: 78vh !important;
    border-radius: 14px 14px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.ItemActionPanel.IAP_Sheet .IAP_Row { min-height: 44px; font-size: 14px; }
.ItemActionPanel.IAP_Sheet .IAP_Pin,
.ItemActionPanel.IAP_Sheet .IAP_Close { width: 44px; height: 44px; }

/* Mobil alt çubuk: başlatıcı aktif formu gösterir, çubuk yüksekliğini doldurur */
body.Mobile .ItemBottom .ItemActionLauncherHost { align-self: stretch; }
body.Mobile .ItemBottom .ItemActionLauncher {
    height: 48px !important;
    min-height: 48px !important;
    max-width: 60vw !important;
    border-radius: 0 !important;
    border-width: 0 1px 0 0 !important;
}
body.Mobile .ItemBottom .ItemActionLauncher .IAL_Text {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
}
/* 2026-09-14 olculdu (makina #PLMCosting/.../CST001, 390x844): alt cubuk 378 px'e sigmiyordu — sag ItemSubmit
   3x84=252 px x=162'den basliyor, "Kaydet Kapat" 24 px ekran DISINDA kirpiliyordu; baslatici 60vw sabit tavani
   sol kutudan tasiyordu (ok simgesi x=176, kutu sonu 158). Care: sag blok sabit, sol blok kalan alani ESNEYEREK
   alir ve kuculebilir; baslatici kabina sigar, metin zaten ellipsis. Hicbir dugme dusurulmez. */
body.Mobile .ItemBottom > .Right {
    flex: 0 0 auto !important;
}
body.Mobile .ItemBottom > .Left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
body.Mobile .ItemBottom .ItemActionLauncherHost {
    min-width: 0 !important;
    max-width: 100% !important;
}
body.Mobile .ItemBottom .ItemActionLauncher {
    max-width: 100% !important;
    min-width: 0 !important;
}
/* Ikinci olcum: sag blok sabitlenince .ItemSubmit a { min-width:6em } uc dugmeyi ~88 px'e kilitledi, baslaticiya
   95 px kaldi ve IAL_Text sozcuk basina ALT ALTA sarildi ("P.. U.. M..", 17 px, okunmaz). Mobil alt cubukta gonder
   dugmeleri 68 px (ikon + iki satir etiket sigar), baslatici metni TEK SATIR + ellipsis -> baslaticiya ~160 px. */
body.Mobile .ItemBottom .ItemSubmit > a {
    min-width: 0 !important;
    width: 68px !important;
    max-width: 68px !important;
    flex: 0 0 68px !important;
}
body.Mobile .ItemBottom .ItemActionLauncher .IAL_Text {
    white-space: nowrap !important;
}

/* Named actions with no real icon emit an empty placeholder glyph that
   still reserves ~13px of advance width, shoving labels off-centre.
   Collapse it so text-only actions read as clean, centred labels. */
.ItemFooter .ImageSpan.icon-Empty,
.ItemActions .ImageSpan.icon-Empty {
    display: none !important;
}

/* Record-context actions (Documents / Relations) stay as icon buttons per the
   2026-07-02 UI decision, but now have a stable 36px hit area and a subtle
   record-context accent so users can recognise them as "this record" tools. */
.SingleItem .ItemActions a.Action_Documents,
.SingleItem .ItemActions a.Action_Relations {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    /* TO DO 06.07.2026 (yeni slayt "Aksiyon düğmeleri çok yer kaplıyor"): 66px bu iki
       buton yüzünden TÜM ItemActions barını yükseltiyordu; kullanıcının istediği 44px
       (dokunma hedefi için yeterli) ile bar kompaktlaşır. */
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    flex: 0 0 50px !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
}
.SingleItem .ItemActions a.Action_Documents:hover,
.SingleItem .ItemActions a.Action_Relations:hover,
.SingleItem .ItemActions a.Action_Documents.SelectedAction,
.SingleItem .ItemActions a.Action_Relations.SelectedAction {
    background: rgba(var(--primaryColorRGB, 59, 130, 246), 0.10) !important;
    color: var(--primaryColor, #3b82f6) !important;
}
.SingleItem .ItemActions a.Action_Documents::after,
.SingleItem .ItemActions a.Action_Relations::after {
    content: "";
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primaryColor, #3b82f6);
    opacity: 0.68;
    pointer-events: none;
}

/* ----------------------------------------------------------------
   Contact-shortcut links (call / SMS / mail) — #20
   ----------------------------------------------------------------
   These sit next to a phone/e-mail field value (header banner, field
   values, list cells). They used raw OS emoji (📞 💬 📧) that rendered
   at OS-dependent sizes/colours and clashed with the crisp 361 icon
   font everywhere else. Now they emit `.ImageSpan.icon-{Call,Chat,
   Envelop}` — style them at one uniform size with a muted accent that
   lifts to the primary colour on hover. */
.LinkTo { text-decoration: none; }
.LinkTo > .ImageSpan[class*="icon-"] {
    font-size: 15px;
    line-height: 1;
    color: var(--mutedTextColor, #6b7280);
    opacity: 0.85;
    transition: color 0.12s ease, opacity 0.12s ease;
}
.LinkTo:hover > .ImageSpan[class*="icon-"],
.LinkTo:focus-visible > .ImageSpan[class*="icon-"] {
    color: var(--primaryColor, #3b82f6);
    opacity: 1;
}

/* ----------------------------------------------------------------
   Mobile SingleItem footer reflow (#18)
   ----------------------------------------------------------------
   On phones the footer kept its 3-zone nowrap row, so Left (edit/new/del/copy)
   + Right (Save/Cancel) ate the width and the Center secondary actions were
   crushed to ~18px → overlapping, unreadable text. Wrap the bar: Left + Right
   share the top row (Save/Cancel right-aligned, primary), and the Center
   secondary actions drop to their own full-width, horizontally-scrollable strip
   where each keeps its natural width. */
body.Mobile .SingleItem .ItemFooter {
    flex-wrap: wrap !important;
    gap: 6px;
    padding: 8px;
    align-items: center;
}
body.Mobile .SingleItem .ItemFooter > .Left {
    order: 1;
    flex: 0 0 auto;
}
body.Mobile .SingleItem .ItemFooter > .Right {
    order: 2;
    flex: 1 1 auto;
    justify-content: flex-end;
}
body.Mobile .SingleItem .ItemFooter > .Center {
    order: 3;
    flex: 1 0 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    gap: 6px;
    padding-bottom: 2px;
    scrollbar-width: thin;
}
body.Mobile .SingleItem .ItemFooter > .Center a {
    flex: 0 0 auto;          /* keep natural width — never squish the labels */
    white-space: nowrap;
}
/* Side-by-side field groups (DirectionVer / DirectionFloat = horizontal rows)
   overflow a phone viewport (e.g. a 4-up group ran 483px wide on a 390px
   screen). Stack them to a single full-width column on mobile. */
body.Mobile .SingleItem .DirectionVer,
body.Mobile .SingleItem .FieldSet.DirectionVer,
body.Mobile .SingleItem .FieldSet.DirectionFloat {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    /* 2026-09-14 (TG A/B olculdu, satis SalesTargetMonthly Detail mobil): layout.css `.DirectionFloat { justify-content:center }`
       sutun yonunde KALIYORDU -> sabit yukseklikli (253px, overflow:auto) sekme govdesinde tasan icerik IKI YONE ortalandi,
       ust kismi kaydirilamayan negatif tasmaya dustu: infografik top -221px, ilk alan (Temsilci) -77px, scrollTop=0 degistirmiyordu.
       flex-start enjeksiyonu: infografik = kap ustu, scrollHeight 727 -> 1201 (474px icerik erisilir oldu). */
    justify-content: flex-start !important;
}
body.Mobile .SingleItem .DirectionVer > .Field,
body.Mobile .SingleItem .FieldSet.DirectionVer > .Field,
body.Mobile .SingleItem .FieldSet.DirectionFloat > .Field {
    width: 100% !important;
    flex: 1 1 auto !important;
    max-width: 100% !important;
}

/* ----------------------------------------------------------------
   Pixel-uniform edit controls (#21)
   ----------------------------------------------------------------
   Lookup widgets (.ItemSelection) rendered ~2px shorter (31px) than text
   inputs/selects (33px), so a lookup placed beside a text box did not line
   up. Pin the lookup to the same 33px box height. FieldCoordinate is
   excluded — its lat/long micro-inputs intentionally use a compact split
   control, not the standard field height. */
.SingleItem .Field.Mode_Edit:not(.FieldCoordinate) .ItemSelection {
    min-height: 33px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}


/* ── B1: per-record "Documents" (Drive-backed /Drive/<ET>/<ID>/) ───────────
   2026-07-02: inline collapsible bölüm KALDIRILDI (form içinde yer kaplayıp UI'ı bozuyordu);
   artık ItemActions sonundaki "Belgeler" butonuyla açılan TAM-ALAN aksiyon görünümü. */
.ItemDocs.full { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 480px; height: 100%; border: 1px solid var(--Line, #e2e8f0); border-radius: 10px; overflow: hidden; background: var(--backColor, #fff); margin: 8px 0; }
.ItemCenter_Documents { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ItemDocsFrame { width: 100%; height: 100%; border: 0; display: block; flex: 1 1 auto; }

/* ----------------------------------------------------------------
   Dark mode for form widgets that ship hardcoded light colours (4.2).
   The amber RequiredMeter pill and the SiCombo dropdown otherwise glared
   on a dark surface. Mirrors the platform mechanism: html.dark-theme
   (explicit) + html.auto-theme under OS prefers-color-scheme: dark.
   (SaveButton / SaveAndNewButton already use color-mix tokens → adapt.)
   ---------------------------------------------------------------- */
html.dark-theme .RequiredMeter { color: #ffcf70; background: #3a2f14; border-color: rgba(255, 193, 7, 0.45); }
html.dark-theme .RequiredMeter:hover { background: #4a3c1a; }
html.dark-theme .SiComboList { background: #2a2e38; border-color: rgba(255, 255, 255, 0.14); }
html.dark-theme .SiComboOpt { color: #cbd5e1; }
html.dark-theme .SiComboOpt:hover { background: rgba(120, 170, 255, 0.14); }
@media (prefers-color-scheme: dark) {
    html.auto-theme .RequiredMeter { color: #ffcf70; background: #3a2f14; border-color: rgba(255, 193, 7, 0.45); }
    html.auto-theme .RequiredMeter:hover { background: #4a3c1a; }
    html.auto-theme .SiComboList { background: #2a2e38; border-color: rgba(255, 255, 255, 0.14); }
    html.auto-theme .SiComboOpt { color: #cbd5e1; }
    html.auto-theme .SiComboOpt:hover { background: rgba(120, 170, 255, 0.14); }
}

/* ========================================================================
   Field-type Display polish (Edit mode has dedicated editors already).
   These make Color / code / URL fields read correctly when shown read-only.
   ======================================================================== */

/* Color field — swatch + hex, instead of a blank row. */
.FieldValue.ColorFieldValue { display: inline-flex; align-items: center; gap: 8px; }
.ColorSwatch {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    flex: 0 0 auto;
    background: var(--swatch-color, transparent);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12);
}
.ColorFieldValue .InputSpan a { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* Code field (XML/SVG/CSS/JSON/JS) — readable, escaped, scrollable source. */
pre.CodeDisplay {
    margin: 0;
    max-height: 320px;
    overflow: auto;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--codeBackColor, #f6f8fa);
    border: 1px solid var(--borderColor, rgba(0, 0, 0, 0.1));
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;
    font-size: 0.85em;
    line-height: 1.5;
    white-space: pre;
    tab-size: 2;
    color: var(--foreColor, #24292f);
}

/* URL field — now a real link; give it the affordance of one. */
.FieldValue a.ExternalLink { color: var(--activeBorderColor, #0a6eb9); text-decoration: none; cursor: pointer; word-break: break-all; }
.FieldValue a.ExternalLink:hover { text-decoration: underline; }

/* FieldFile (Dosya) display (#8/#9, 2026-07-03) — dosya adi + sag indirme butonu.
   Dosya adi target=_blank link degil; tiklayinca programatik indirir (iOS standalone fix). */
.InputSpan.FieldFileValue { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.InputSpan.FieldFileValue .FieldFileName {
    color: var(--activeBorderColor, #0a6eb9);
    cursor: pointer;
    text-decoration: none;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
}
.InputSpan.FieldFileValue .FieldFileName:hover { text-decoration: underline; }
.FieldFileDownload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--activeBorderColor, #0a6eb9);
    opacity: 0.8;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}
.FieldFileDownload:hover { opacity: 1; background: var(--hoverBackColor, rgba(10, 110, 185, 0.1)); }
.FieldFileDownload:focus-visible { outline: 2px solid var(--activeBorderColor, #0a6eb9); outline-offset: 1px; }
.FieldFileDownload svg { width: 18px; height: 18px; display: block; }

html.dark-theme pre.CodeDisplay { background: #1e222a; border-color: rgba(255, 255, 255, 0.12); color: #d6dae2; }
@media (prefers-color-scheme: dark) {
    html.auto-theme pre.CodeDisplay { background: #1e222a; border-color: rgba(255, 255, 255, 0.12); color: #d6dae2; }
}

/* MOBIL-TEKIL-TEK-KAYDIRMA (2026-09-15, TG A/B olculdu: makina 5 SingleItem ekrani, iPhone 13).
   Kusur: .ItemBody > .Fields satir ici <style> ile position:absolute; baslik karti mobilde 147-242 px,
   govde 126-221 px'lik IC kaydirmaya hapsoluyordu (CAD Model3DView: 175/1428) — alanlar ve 3D goruntuleyicinin
   ust seridi/rihtimi bu pencerenin disinda kaliyordu.
   A/B: (1) govde auto + ActiveContent overflow -> ActiveContent icerik kadar uzadi (1812/1812), kaydirma ataya
   kacti, yapiskan cubuk tutunamadi. (2) + min-height:0/max-height:100% -> ayni (ust kap yuksekligi kesin degil).
   (3) ActiveContent MainContent icinde MUTLAK + inset:0 -> 5/5: tek kaydirici (sayfa 558/1812), govde tam boy,
   eylem cubugu acilista ve sonda gorunur, alt bilgiye erisilir, yatay tasma 0; masaustu olculeri DEGISMEDI.
   misc.css `.SupportsTouch .MainContent > .SingleItem { position:relative }` yalniz bu kirilimda gecersiz kilinir. */
@media (max-width: 767px) {
    body.Mobile .MainContent > .ActiveContent.SingleItem {
        position: absolute !important;
        top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    body.Mobile .SingleItem > .ItemHeader,
    body.Mobile .SingleItem > .ItemStates,
    body.Mobile .SingleItem > .ItemSubForm,
    body.Mobile .SingleItem > .ItemFooter { flex-shrink: 0 !important; }
    body.Mobile .SingleItem > .ItemBody { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
    body.Mobile .SingleItem > .ItemBody > .Fields { position: relative !important; top: auto !important; bottom: auto !important; height: auto !important; overflow: visible !important; }
    body.Mobile .SingleItem > .ItemBottom { position: sticky !important; bottom: 0 !important; flex-shrink: 0 !important; z-index: 20; }
}

/* 2026-09-15 — telefonda kayit formu TEK KOLON (kullanici karari "<=640px'te yuzde genislik %100").
   Kusur (TG olculdu, makina PLMComponent Yeni formu iPhone 13): XML satir ici `width:48%/31%` core `.Field{width:100%}`i
   eziyor; 390px kadrajda alan 180px, %-genislikli 24 alanin 22'si ekranin yarisinda TEK BASINA (yan yana satir 1).
   A/B (.claude/scripts/mobil-form-genislik-sonda.cjs ENJEKTE_CSS): yarim kalan 22 -> 1, alan 180 -> 374px,
   SingleItemHeader alanlari DEGISMEDI (43/43/120/120), masaustu olculeri birebir, yatay tasma 0.
   Kapsam: yalniz % genislik tasiyan form alanlari; baslik bandi (L-C-R) ve kartlar haric. */
@media (max-width: 640px) {
    .SingleItem .FieldSet .Field[style*="%"]:not(.SingleItemHeader .Field) { width: 100% !important; }
}
/* ETWMenu FilterBy panel: keep field, values, and compare controls readable.
   Runtime menu CSS can squeeze these into one horizontal row; this scoped rule
   restores a top-to-bottom filter editor while pinning row actions to edges. */
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ActionPanel_FilterBy .ByFieldsRight {
    display: flex;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ActionPanel_FilterBy .ByFieldsRight > .ByFieldsRightItem {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    position: relative !important;
    padding: 0 34px !important;
    min-height: 34px !important;
    white-space: normal !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ActionPanel_FilterBy .ByFieldsRight > .ByFieldsRightItem > .ItemSelection,
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ActionPanel_FilterBy .ByFieldsRight > .ByFieldsRightItem > .ItemSelectionChoice,
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ActionPanel_FilterBy .GroupFieldFunction,
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ActionPanel_FilterBy .GroupFieldFunction > input,
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ActionPanel_FilterBy .GroupFieldFunction > select,
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ActionPanel_FilterBy .GroupFieldFunction > .ItemSelectionChoice {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ActionPanel_FilterBy .GroupFieldFunction {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 7px !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ActionPanel_FilterBy .ByFieldsRight > .ByFieldsRightItem > .MicroButton {
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    opacity: 1 !important;
    transform: none !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ActionPanel_FilterBy .ByFieldsRight > .ByFieldsRightItem > .MicroButton.AddSub {
    left: 0 !important;
    right: auto !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ActionPanel_FilterBy .ByFieldsRight > .ByFieldsRightItem > .MicroButton:not(.AddSub) {
    left: auto !important;
    right: 0 !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ActionPanel_FilterBy .ByFieldsRight > .ByFieldsRightAdd {
    width: 100% !important;
    padding: 0 !important;
}

/* ETWMenu PageBy / GroupBy / OrderBy rows: row action buttons must sit on
   fixed edges, with direction toggles vertically centered on the right. */
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWBys > .ActionPanel:not(.ActionPanel_FilterBy) .ByFieldsRight > .ByFieldsRightItem {
    position: relative !important;
    padding-left: 34px !important;
    padding-right: 34px !important;
    min-height: 34px !important;
    align-items: center !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWBys > .ActionPanel:not(.ActionPanel_FilterBy) .ByFieldsRight > .ByFieldsRightItem > .MicroButton {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    opacity: 1 !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWBys > .ActionPanel .ByFieldsRight > .ByFieldsRightItem > .ToggleButton.OrderByToggle {
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ActionPanelHeader .ActionPanelSummary {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-left: 8px !important;
    margin-right: 6px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    color: #64748b !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
        text-align: right;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWEmptyHint,
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWActionHint,
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ViewSettingsInlineStatus {
    display: block !important;
    margin: 4px 0 8px !important;
    padding: 0 !important;
    border: 0 dashed #dbe3ee !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1em !important;
    text-align: left !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWActionHint {
    border-style: solid !important;
    background: transparent !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWClearByFields {
    width: 100% !important;
    margin: 8px 0 2px !important;
    padding: 8px 10px !important;
    text-align: center !important;
    color: #64748b !important;
    border-color: #e2e8f0 !important;
    background: #fff !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWClearByFields:hover {
    color: #dc2626 !important;
    border-color: rgba(239,68,68,.25) !important;
    background: rgba(239,68,68,.06) !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ActionPanelHeader,
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ActionPanelButton,
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ActionPanelHeader span,
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWActionHint,
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWEmptyHint {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

/* ====== AddSelect2 dropdowns (grouped field pickers) — sticky search + group titles ======
   Applies to ALL .SelectionsMenu_AddSelect (not just ETWFieldPicker) so every grouped picker
   behaves the same. The search (.ItemSearcher) is a FIXED header; the list (.ItemSelector) is
   the ONLY scroll container — `min-height:0` makes it actually scroll INSIDE the flex column
   instead of letting the whole menu scroll. Group titles then stick to top:0 of that scroll
   body, i.e. naturally BELOW the search — so the sticky group header and the search can never
   collide (the old `top:43px` guessed the search height and overlapped it whenever the menu,
   not the list, scrolled). */
.SelectionsMenu_AddSelect {
    max-height: 80vh !important;
}
.SelectionsMenu_AddSelect > .ItemSearcher {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 3 !important;
    background: #fff !important;
    padding: 8px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
.SelectionsMenu_AddSelect > .ItemSelector {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

.SelectionsMenu_AddSelect .SelectionGroupTitle {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    padding: 6px 10px !important;
    background: #f1f5f9 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
}

.SelectionsMenu_AddSelect .SelectionItem {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 34px !important;
}
.SelectionsMenu_AddSelect .SelectionItem > span:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* SelectionItemMeta — pushed to the RIGHT edge, right-aligned */
.SelectionsMenu_AddSelect .SelectionItemMeta {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    max-width: 45% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: right !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    background: #eef2f7 !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

.SelectionsMenu_AddSelect .SelectionMoreHint {
    padding: 10px !important;
    color: #64748b !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    font-size: 11px !important;
    text-align: center !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewPresetRow {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewPresetName {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 34px !important;
    padding: 7px 9px !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 8px !important;
    background: #fff !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewPresetSave {
    width: 100% !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewPresetList {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 10px !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewPresetGroupTitle {
    margin-top: 6px !important;
    padding: 3px 1px !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewPresetItem {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    min-height: 36px !important;
    padding: 5px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #fff !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewPresetItem.ETWViewPresetDefault {
    border-color: #93c5fd !important;
    background: #f8fbff !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewPresetMain {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewPresetApply {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    cursor: pointer !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewPresetSource {
    margin-top: 2px !important;
    color: #64748b !important;
    font-size: 11px !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewPresetBadge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 16px !important;
    margin-left: 6px !important;
    padding: 1px 6px !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 999px !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewPresetActions {
    flex: 0 0 108px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    min-width: 92px !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewPresetActions button {
    min-height: 26px !important;
    max-width: 100% !important;
    padding: 4px 7px !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #334155 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    cursor: pointer !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewPresetDefaultButton {
    border-color: #bfdbfe !important;
    color: #1d4ed8 !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewPresetDefault .ETWViewPresetDefaultButton {
    background: #eff6ff !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewPresetShare {
    border-color: #bbf7d0 !important;
    color: #15803d !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewPresetDelete {
    flex: 0 0 26px !important;
    width: 26px !important;
    padding: 0 !important;
    border-color: #fecaca !important;
    color: #dc2626 !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewPresetDefaultStatus {
    padding: 7px 9px !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 8px !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewPresetEmpty {
    padding: 9px !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 8px !important;
    color: #64748b !important;
    background: #f8fafc !important;
    font-size: 12px !important;
}

.EntityTypeLists.ETLViewManager {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-width: 280px !important;
    max-width: min(520px, 92vw) !important;
    padding: 8px !important;
}

.EntityTypeLists.ETLViewManager .ETLViewSaveBar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    align-items: center !important;
}

.EntityTypeLists.ETLViewManager .ETLViewPresetName {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 32px !important;
    padding: 6px 8px !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 8px !important;
    background: #fff !important;
}

.EntityTypeLists.ETLViewManager .ETLViewPresetSave {
    min-height: 32px !important;
    white-space: nowrap !important;
}

.EntityTypeLists.ETLViewManager .ETLViewPresetList {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    max-height: min(520px, 62vh) !important;
    overflow: auto !important;
}

.EntityTypeLists.ETLViewManager .ETWViewPresetItem {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 6px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #fff !important;
}

.EntityTypeLists.ETLViewManager .ETWViewPresetMain {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.EntityTypeLists.ETLViewManager .ETWViewPresetApply {
    width: 100% !important;
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.EntityTypeLists.ETLViewManager .ETWViewPresetActions {
    flex: 0 0 112px !important;
    display: flex !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.EntityTypeLists.ETLViewManager .ETWViewPresetActions button {
    min-height: 24px !important;
    padding: 3px 6px !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #334155 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu {
    /* constrained side-panel width (was min(560px,100vw-24px) which let it grow to ~half the
       content area). 340px is a comfortable filter-panel width; shrinks on narrow screens. */
    width: min(340px, calc(100vw - 24px)) !important;
    max-width: 340px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.SelectionsMenu_EntityTypeList,
.EntityTypeList.SelectionsMenu,
.SelectionsMenu_AddSelect.EntityTypeList {
    width: min(520px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 1px solid #c9d5e2 !important;
    border-radius: 8px !important;
    box-shadow: 0 18px 54px rgba(15, 23, 42, 0.22) !important;
}

.SelectionsMenu_EntityTypeList .List_Bottom,
.EntityTypeList.SelectionsMenu .List_Bottom,
.SelectionsMenu_AddSelect.EntityTypeList .List_Bottom {
    display: flex !important;          /* all list-management verbs share ONE footer row */
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px !important;
    border-top: 1px solid #e6ecf3 !important;
    background: #f8fafc !important;
}

/* premium list-management footer — [Düzenle] [Yeni Ekle] [Yeni Liste] [Kaydet], four equal cells.
   Düzenle + Yeni Ekle are secondary (white); Yeni Liste is a blue-outline accent companion
   (save-as-new); Kaydet is the primary filled action, pinned FAR RIGHT (user directive). */
.List_Bottom .List_EditEntityTypeLists,
.List_Bottom .List_AddEntityTypeList,
.List_Bottom .List_SaveEntityTypeList,
.List_Bottom .List_SaveNew {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid #cdd9e6 !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f1f6fb 100%) !important;
    color: #1f4a6e !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .05s ease !important;
}
.List_Bottom .List_EditEntityTypeLists:hover,
.List_Bottom .List_AddEntityTypeList:hover {
    background: linear-gradient(180deg, #f4f9fd 0%, #e8f2fb 100%) !important;
    border-color: #93c0e3 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}
/* primary: Kaydet (filled), pinned right by source order */
.List_Bottom .List_SaveEntityTypeList {
    border-color: #2f6f9e !important;
    background: linear-gradient(180deg, #3c8cc4 0%, #2f6f9e 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12) !important;
}
.List_Bottom .List_SaveEntityTypeList:hover {
    background: linear-gradient(180deg, #4296cd 0%, #356f99 100%) !important;
    border-color: #2a6390 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16) !important;
}
/* accent: Yeni Liste (save-as-new) — blue-outline companion to the filled Kaydet */
.List_Bottom .List_SaveNew {
    border-color: #2f6f9e !important;
    background: linear-gradient(180deg, #ffffff 0%, #eef6fc 100%) !important;
    color: #1f4a6e !important;
}
.List_Bottom .List_SaveNew:hover {
    background: linear-gradient(180deg, #eaf4fc 0%, #dcecf9 100%) !important;
    border-color: #2a6390 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important;
}
.List_Bottom .List_EditEntityTypeLists:active,
.List_Bottom .List_AddEntityTypeList:active,
.List_Bottom .List_SaveEntityTypeList:active,
.List_Bottom .List_SaveNew:active { transform: translateY(1px) !important; }
.List_Bottom .List_EditEntityTypeLists > .ImageSpan,
.List_Bottom .List_AddEntityTypeList > .ImageSpan,
.List_Bottom .List_SaveEntityTypeList > .ImageSpan,
.List_Bottom .List_SaveNew > .ImageSpan {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 15px !important;
    height: 15px !important;
    font-size: 14px !important;
}

.EntityTypeLists.ETLDisplayMode {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 320px !important;
    max-width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    border: 1px solid #d9e2ec !important;
    border-radius: 8px !important;
    background: #fbfcfe !important;
}

.EntityTypeLists.ETLDisplayMode .ETLDisplayList {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    max-height: min(430px, 54vh) !important;
    padding-right: 2px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.EntityTypeLists.ETLDisplayMode .ETLDisplayButton {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    border: 1px solid #e6ecf3 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-align: left !important;
    cursor: pointer !important;
    position: relative !important;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .05s ease !important;
}

.EntityTypeLists.ETLDisplayMode .ETLDisplayButton > .ButtonText {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
}

.EntityTypeLists.ETLDisplayMode .ETLDisplayButton:hover {
    background: #f6f9fc !important;
    border-color: #cdd9e6 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}

.EntityTypeLists.ETLDisplayMode .ETLDisplayButton:active { transform: translateY(1px) !important; }

.EntityTypeLists.ETLDisplayMode .ETLDisplayButton:focus-visible {
    outline: 2px solid #3c85bd !important;
    outline-offset: 1px !important;
}

.EntityTypeLists.ETLDisplayMode .ETLDisplayButton.Selected {
    border-color: #93c0e3 !important;
    background: linear-gradient(180deg, #f7fbff 0%, #ecf5fc 100%) !important;
    box-shadow: inset 3px 0 0 #2f6f9e !important;
    padding-left: 14px !important;
    font-weight: 700 !important;
    color: #0f2942 !important;
}

/* clean check on the current list (no "Varsayılan" badge anymore) */
.EntityTypeLists.ETLDisplayMode .ETLDisplayButton.Selected::after {
    content: "" !important;
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    background: #2f6f9e !important;
    -webkit-mask: no-repeat center / 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") !important;
    mask: no-repeat center / 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") !important;
    background: #2f6f9e !important;
}

.EntityTypeLists.ETLDisplayMode .ETLDisplaySource {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 9px !important;
    border-radius: 999px !important;
    background: #eef2f7 !important;
    color: #5b6b7c !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
}

/* shared lists get a distinct, calm accent so they read apart from personal */
.EntityTypeLists.ETLDisplayMode .ETLDisplaySourceShared {
    background: #eaf2ec !important;
    color: #2f6b48 !important;
}

.EntityTypeLists.ETLDisplayMode .ETLEditOpenButton {
    width: 100% !important;
    min-height: 38px !important;
    border: 1px solid #aebfd1 !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #fff 0%, #f3f7fb 100%) !important;
    color: #203047 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

.ETLEditOverlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 28px !important;
    background: rgba(15, 23, 42, 0.34) !important;
}

/* Picker dropdowns (AddSelect2 / SelectionsMenu / DatePicker) opened from INSIDE the ETL editor
   are appended to <body>, so without this they render behind the near-max-z overlay. While the
   editor is open (body.ETLEditorOpen) lift them just above the overlay so the option list shows. */
body.ETLEditorOpen .SelectionsMenu,
body.ETLEditorOpen .SelectionsMenu_AddSelect,
body.ETLEditorOpen .DatePicker,
body.ETLEditorOpen .SelectionsMenu_DatePicker {
    z-index: 2147483600 !important;
}

.ETLEditDialog {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: min(1080px, 94vw) !important;
    height: min(760px, 88vh) !important;
    min-height: 420px !important;
    border: 1px solid #d4deea !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.30), 0 2px 8px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden !important;
}

.ETLEditHeader {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 56px !important;
    padding: 0 16px !important;
    border-bottom: 1px solid #e7edf3 !important;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f8fc 100%) !important;
}

.ETLEditTitle {
    color: #16263a !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}

.ETLEditClose {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    border: 1px solid #d9e2ec !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: background .12s ease, border-color .12s ease, color .12s ease !important;
}
.ETLEditClose:hover { background: #fdecec !important; border-color: #f0c4c4 !important; color: #b23b3b !important; }
.ETLEditClose > .ImageSpan { width: 16px !important; height: 16px !important; font-size: 15px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }

.ETLEditBody {
    display: grid !important;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.ETLEditSidebar {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-right: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
}

.ETLEditToolbar {
    display: flex !important;
    gap: 6px !important;
    padding: 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* Unified button system — every button is a 36px-tall flex row so icon + text
   buttons line up perfectly on one baseline (no more 41px-vs-32px raggedness). */
.ETLEditToolbarButton,
.ETLEditActionButton,
.ETLEditSaveButton,
.ETLEditDeleteButton,
.ETLEditIconButton,
.ETLEditDeleteIconButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 36px !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border: 1px solid #cdd9e6 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #203047 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .05s ease !important;
}
.ETLEditToolbarButton:hover,
.ETLEditActionButton:hover,
.ETLEditSaveButton:hover,
.ETLEditDeleteButton:hover {
    background: #f6f9fc !important;
    border-color: #b6c6d8 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07) !important;
}
.ETLEditToolbarButton:active,
.ETLEditActionButton:active,
.ETLEditSaveButton:active,
.ETLEditDeleteButton:active,
.ETLEditIconButton:active { transform: translateY(1px) !important; }

/* icon glyph inside any editor button — fixed optical size, vertically centred */
.ETLEditToolbarButton > .ImageSpan,
.ETLEditActionButton > .ImageSpan,
.ETLEditSaveButton > .ImageSpan,
.ETLEditDeleteButton > .ImageSpan,
.ETLEditIconButton > .ImageSpan,
.ETLEditDeleteIconButton > .ImageSpan {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
}
.ETLEditToolbarButton > .ButtonText,
.ETLEditActionButton > .ButtonText,
.ETLEditSaveButton > .ButtonText,
.ETLEditDeleteButton > .ButtonText { line-height: 1 !important; }

/* square icon-only buttons (▲ ▼ row reorder, ✕ delete) */
.ETLEditIconButton,
.ETLEditDeleteIconButton {
    width: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
}

/* primary action (Uygula) reads as the main affordance */
.ETLEditActions > .ETLEditActionButton:first-of-type {
    border-color: #2f6f9e !important;
    background: linear-gradient(180deg, #3c8cc4 0%, #2f6f9e 100%) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12) !important;
}
.ETLEditActions > .ETLEditActionButton:first-of-type:hover {
    background: linear-gradient(180deg, #4296cd 0%, #356f99 100%) !important;
    border-color: #2a6390 !important;
}

.ETLEditSaveButton {
    border-color: #5aa17c !important;
    background: linear-gradient(180deg, #f4faf6 0%, #ecf6f0 100%) !important;
    color: #1f6038 !important;
}
.ETLEditSaveButton:hover { background: #e8f4ee !important; border-color: #4d9270 !important; }

.ETLEditDeleteButton,
.ETLEditDeleteIconButton {
    border-color: #ecbcbc !important;
    color: #b23b3b !important;
}
.ETLEditDeleteButton:hover,
.ETLEditDeleteIconButton:hover { background: #fdf4f4 !important; border-color: #e0a3a3 !important; }

.ETLEditList {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    min-height: 0 !important;
    padding: 12px !important;
    overflow: auto !important;
}

.ETLEditListItem {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 9px 11px 9px 30px !important;   /* left room for the drag grip */
    border: 1px solid #e3eaf2 !important;
    border-radius: 10px !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, opacity .12s ease !important;
}
.ETLEditListItem:hover { background: #f6f9fc !important; border-color: #cfdbe8 !important; }

.ETLEditListItem.Selected,
.ETLEditListItem.Default {
    border-color: #9cc6e6 !important;
    background: linear-gradient(180deg, #f7fbff 0%, #eef6fc 100%) !important;
    box-shadow: inset 3px 0 0 #2f6f9e !important;
}

/* drag-to-reorder grip + states (Q3) */
.ETLEditDragHandle {
    position: absolute !important;
    left: 9px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 14px !important;
    text-align: center !important;
    color: #b3c1d1 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    letter-spacing: -2px !important;
    cursor: grab !important;
    user-select: none !important;
}
.ETLEditListItem:hover .ETLEditDragHandle { color: #7d93a8 !important; }
.ETLEditDragHandle:active { cursor: grabbing !important; }
.ETLEditListItem.Dragging { opacity: .45 !important; }
.ETLEditListItem.DragOver {
    border-color: #2f6f9e !important;
    box-shadow: 0 -3px 0 -1px #2f6f9e !important;
}

.ETLEditListName {
    color: #16263a !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
}

.ETLEditListMeta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.ETLEditListMeta,
.ETLEditFormStatus,
.ETLEditEmpty,
.ETLEditLoading {
    color: #6b7a8a !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
}

/* default marker in the editor catalog — calm brand tint, not a loud green badge */
.ETLEditBadge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 1px 7px !important;
    border-radius: 999px !important;
    background: #e8f0f7 !important;
    color: #2f6f9e !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
}

.ETLEditForm {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 16px 18px 18px !important;
    overflow: auto !important;
}

.ETLEditFormTitle {
    color: #16263a !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    overflow-wrap: anywhere !important;
    margin-bottom: -8px !important;
}

.ETLEditActions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid #eef2f7 !important;
}

.ETLEditFooter {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-top: 14px !important;
    margin-top: 2px !important;
    border-top: 1px solid #eef2f7 !important;
}
.ETLEditFooter .ETLEditSaveButton { min-width: 130px !important; height: 38px !important; }

.ETLEditGrid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
    gap: 12px 14px !important;
}

.ETLEditControl {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.ETLEditControlWide {
    grid-column: span 3 !important;
}

.ETLEditLabel {
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.ETLEditForm .ETLEditInput,
.ETLEditForm select.ETLEditInput,
.ETLEditInput,
.ETLEditTextArea {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
}
.ETLEditInput:focus,
.ETLEditTextArea:focus {
    border-color: #6aa6d6 !important;
    outline: 2px solid #3c85bd !important;
    outline-offset: 1px;
    box-shadow: 0 0 0 3px rgba(60, 133, 189, 0.16) !important;
}
.ETLEditInput:disabled,
.ETLEditTextArea:disabled { background: #f4f7fa !important; color: #64748b !important; }

.ETLEditTextArea {
    height: auto !important;
    min-height: 84px !important;
    padding: 8px 10px !important;
    resize: vertical !important;
}

.ETLEditFieldsPanel {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-top: 10px !important;
    border-top: 1px solid #e2e8f0 !important;
}

.ETLEditSectionTitle {
    color: #203047 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.ETLEditFieldRows {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.ETLEditFieldRow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px 34px 34px !important;
    gap: 6px !important;
    align-items: center !important;
}

/* compact 34px icon buttons INSIDE the list-fields rows (tighter than the 36px
   action buttons, but scoped here so the action-row ▲▼ keep the unified 36px) */
.ETLEditFieldRow > .ETLEditIconButton,
.ETLEditFieldRow > .ETLEditDeleteIconButton {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 8px !important;
}

@media (max-width: 760px) {
    .ETLEditOverlay {
        align-items: stretch !important;
        padding: 10px !important;
    }

    .ETLEditDialog {
        width: 100% !important;
        height: 100% !important;
    }

    .ETLEditBody {
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(140px, 34vh) minmax(0, 1fr) !important;
    }

    .ETLEditSidebar {
        border-right: 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    .ETLEditGrid {
        grid-template-columns: 1fr !important;
    }

    .ETLEditControlWide {
        grid-column: span 1 !important;
    }
}

/* ===== EntityTypeList editor — meta-driven sections + no-SQL filter builder (2026-06-29) ===== */
.ETLEditSection {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
}
.ETLEditSectionHeader {
    color: #203047 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
.ETLEditSection > .ETLEditGrid { background: transparent !important; }

/* searchable field / view-type pickers reuse AddSelect2 (.ItemSelection) */
.ETLEditFieldControl { min-width: 0 !important; }
.ETLEditForm .ETLEditFieldSelect.ItemSelection,
.ETLEditForm .ETLEditViewTypeSelect.ItemSelection {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 26px 0 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
}
.ETLEditForm .ETLEditFieldSelect.ItemSelection > span,
.ETLEditForm .ETLEditViewTypeSelect.ItemSelection > span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.ETLEditForm .ItemSelection.Disabled { opacity: .55 !important; pointer-events: none !important; }
/* direction select sits inline-right of the field picker, same 36px height */
.ETLEditDirSelect { margin-top: 6px !important; }

/* no-SQL filter builder embedded in the editor (mirrors the ETWMenu FilterBy layout) */
.ETLFilterControl { gap: 6px !important; }
.ETLFilterHint { color: #64748b !important; font-size: 11px !important; font-weight: 500 !important; }
.ETLFilterReadonly {
    padding: 8px 10px !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    font-size: 12px !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
}
.ETLFilterHost {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    padding: 10px !important;
}
.ETLFilterPanel .ByFieldsRight {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
}
.ETLFilterPanel .ByFieldsRight > .ByFieldsRightItem {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    position: relative !important;
    padding: 0 34px !important;
    min-height: 34px !important;
    white-space: normal !important;
}
.ETLFilterPanel .GroupFieldFunction {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 7px !important;
}
.ETLFilterPanel .ByFieldsRight > .ByFieldsRightItem > .ItemSelection,
.ETLFilterPanel .ItemSelectionChoice,
.ETLFilterPanel .GroupFieldFunction > input,
.ETLFilterPanel .GroupFieldFunction > select,
.ETLFilterPanel .GroupFieldFunction .ItemSelection {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 32px !important;
    border-radius: 9px !important;
}
.ETLFilterPanel .ByFieldsRight > .ByFieldsRightItem > .MicroButton {
    position: absolute !important;
    top: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    margin: 0 !important;
    border: 1px solid #dde6ef !important;
    border-radius: 8px !important;
    background: #fff !important;
}
.ETLFilterPanel .ByFieldsRight > .ByFieldsRightItem > .MicroButton.AddSub { left: 0 !important; right: auto !important; }
.ETLFilterPanel .ByFieldsRight > .ByFieldsRightItem > .MicroButton:not(.AddSub) { left: auto !important; right: 0 !important; }

/* inviting "add filter" affordance — a clear dashed add zone */
.ETLFilterPanel .ByFieldsRightAdd { width: 100% !important; padding: 0 !important; }
.ETLFilterPanel .ByFieldsRightAdd > .AddGroupField {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border: 1px dashed #b9cbdd !important;
    border-radius: 9px !important;
    background: #f7fafd !important;
    color: #2f6f9e !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background .12s ease, border-color .12s ease !important;
}
.ETLFilterPanel .ByFieldsRightAdd > .AddGroupField:hover { background: #eef5fb !important; border-color: #8fb6d6 !important; }
.ETLFilterPanel .ETWEmptyHint {
    color: #64748b !important;
    font-size: 11.5px !important;
    margin: 0 0 8px !important;
    text-align: center !important;
}
.ETLFilterPanel .ETWClearByFields { align-self: flex-start !important; margin-top: 2px !important; }

.ETWPanelSection {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid #e2e8f0 !important;
}

.ETWPanelSection:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

.ETWPanelSectionTitle {
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

.ActionPanel_Operations .ETWOperationFiles .ItemSelection {
    width: calc(100% - 3em) !important;
    margin: 0 1.5em !important;
}

.EntityTypeView.View_Matrix .PivotHost,
.EntityTypeView.View_PivotTable .PivotHost {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    overflow: hidden !important;
}

.EntityTypeView.View_Matrix .PivotTable,
.EntityTypeView.View_PivotTable .PivotTable {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: stretch !important;
}

.EntityTypeView.View_Matrix .PivotTable td.PivotCenter,
.EntityTypeView.View_PivotTable .PivotTable td.PivotCenter {
    width: 100% !important;
    min-width: 0 !important;
}

.EntityTypeView.View_Matrix .PivotTable div.PivotCenter,
.EntityTypeView.View_PivotTable .PivotTable div.PivotCenter {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWDiagnosticsBody {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 8px 0 !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWDiagnosticsRow {
    display: grid !important;
    grid-template-columns: minmax(84px, 42%) minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 5px 7px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWDiagnosticsKey {
    color: #64748b !important;
    font-weight: 800 !important;
    overflow-wrap: anywhere !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWDiagnosticsValue {
    color: #0f172a !important;
    overflow-wrap: anywhere !important;
}

/* Non-sticky (2026-06-29): the independent "Görünüm Özellikleri" panel has its own fixed header,
   so this inline status must scroll WITH the content. As sticky+transparent it sat on top of the
   scrolling rows (visual glitch). */
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ViewSettingsInlineStatus {
    position: static !important;
    z-index: auto !important;
    box-shadow: none !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ViewSettingsSectionTitle {
    margin: 12px 0 6px !important;
    padding: 6px 0 4px !important;
    color: #334155 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

.EntityTypeView .PanelHeader,
.EntityTypeView .PanelHeader .TopRight,
.EntityTypeView .PanelHeader .ViewActions {
    position: relative !important;
    z-index: 10002 !important;
}

body:has(.SidePanel.SidePanel-open) .EntityTypeView:has(.ETWMenu) {
    position: relative !important;
    z-index: 10002 !important;
}


/* ViewSettingsReadiness — chart readiness indicator INSIDE the ETWMenu settings (moved here from
   60-chart.css; it styles the menu, not the chart view). Faz 5B.1 reorg. */
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ViewSettingsReadiness {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
    padding: 8px !important;
    border: 1px solid #dbeafe !important;
    border-radius: 8px !important;
    background: #eff6ff !important;
    text-align: left !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ViewSettingsReadiness_needs-config {
    border-color: #fed7aa !important;
    background: #fff7ed !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ViewSettingsReadinessScore {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    color: #1d4ed8 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    box-shadow: inset 0 0 0 1px rgba(148,163,184,.24) !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ViewSettingsReadinessTitle {
    color: #0f172a !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
}

.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ViewSettingsReadinessMessage {
    margin-top: 2px !important;
    color: #64748b !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
}

/* ── ETWMenuTop "View" toolbar (2026-06-29) ──────────────────────────────────────────────
   Headerless, always-open row: [ view-type switcher ][ ⚙ settings toggle ]. The collapsible
   ActionPanelHeader is gone (DrawActionPanel called with null text); this lays out the body as a
   flex toolbar so the switcher fills the row and the gear sits flush on the right. */
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuTop .ETWViewToolbarPanel {
    padding: 0 !important;
    margin: 0 !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuTop .ETWViewToolbarPanel > .ActionPanelBody {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-top: 0 !important;
    text-align: left !important;
    overflow: visible !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuTop .ETWViewToolbarPanel .CurrentViewType.Menu_Arrow_Down {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuTop .ViewSettingsToggle {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #475569 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
    cursor: pointer !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuTop .ViewSettingsToggle:hover {
    border-color: #93c5fd !important;
    background: #f8fbff !important;
    color: #1d4ed8 !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuTop .ViewSettingsToggle.Active {
    border-color: #3c85bd !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    box-shadow: inset 0 0 0 1px rgba(60, 133, 189, .35) !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuTop .ViewSettingsToggle svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
}

/* ── Independent "Görünüm Özellikleri" panel inside ETWMenuBody (2026-06-29) ──────────────
   NOT an ActionPanel and NOT in the by-field accordion — a distinct surface toggled by the ⚙
   button above. Hidden by default; renders DrawViewSettingsInline content (which keeps its own
   ViewSettings* styling already defined in this file). */
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewSettingsPanel {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 0 10px !important;
    border: 1px solid #c7d7ea !important;
    border-radius: 10px !important;
    background: #fbfdff !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08) !important;
    overflow: hidden !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewSettingsPanel.HiddenPanel {
    display: none !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewSettingsHeader {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 9px 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: linear-gradient(180deg, #f4f9ff 0%, #eaf2fb 100%) !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewSettingsTitle {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: #1e3a5f !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;
    text-transform: uppercase !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewSettingsClose {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: #475569 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    cursor: pointer !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewSettingsClose:hover {
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
    background: #fef2f2 !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewSettingsBody {
    padding: 10px 12px 12px !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody .ETWViewSettingsBody .ViewSettingsInlineStatus {
    margin-top: 0 !important;
}

/* When the settings panel is ACTIVE it TAKES OVER the whole ETWMenuBody (2026-06-29 user request):
   ETWBys is hidden, the panel fills the full height edge-to-edge, and only its own body scrolls. */
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody.ETWViewSettingsActive {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody.ETWViewSettingsActive > .ETWBys {
    display: none !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody.ETWViewSettingsActive > .ETWViewSettingsPanel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-width: 0 0 0 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody.ETWViewSettingsActive > .ETWViewSettingsPanel .ETWViewSettingsHeader {
    flex: 0 0 auto !important;
}
.EntityTypeView.ETWMenu_Open > .ETWMenu .ETWMenuBody.ETWViewSettingsActive > .ETWViewSettingsPanel .ETWViewSettingsBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ── In-page Preview overlay (2026-06-29) ────────────────────────────────────────────────
   Replaces the old window.open() popup: a full-page in-app modal that hosts the RDLC PDF for
   report views and a live DOM/canvas snapshot for visual views. Works everywhere (no popup
   blocker) and is verifiable. */
.ETWPreviewOverlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483600 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    padding: 24px !important;
    background: rgba(15, 23, 42, 0.55) !important;
}
.ETWPreviewDialog {
    display: flex !important;
    flex-direction: column !important;
    width: min(1100px, 100%) !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: auto !important;
    border: 1px solid #c9d5e2 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.4) !important;
    overflow: hidden !important;
}
.ETWPreviewHeader {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%) !important;
}
.ETWPreviewTitleWrap { display: flex !important; flex-direction: column !important; min-width: 0 !important; margin-right: auto !important; }
.ETWPreviewTitle { color: #0f172a !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.1 !important; }
.ETWPreviewViewLabel { color: #64748b !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .3px !important; margin-top: 2px !important; }
.ETWPreviewActions { display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important; }
.ETWPreviewBtn {
    min-height: 32px !important; padding: 6px 12px !important;
    border: 1px solid #cbd5e1 !important; border-radius: 8px !important;
    background: #fff !important; color: #334155 !important;
    font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; cursor: pointer !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
.ETWPreviewBtn:hover { border-color: #93c5fd !important; background: #f8fbff !important; color: #1d4ed8 !important; }
.ETWPreviewZoomBtn { min-width: 32px !important; padding: 6px 0 !important; font-size: 16px !important; }
.ETWPreviewZoomLabel { min-width: 42px !important; text-align: center !important; color: #475569 !important; font-size: 12px !important; font-weight: 700 !important; }
.ETWPreviewExport { border-color: #bcdcf5 !important; color: #0b63a6 !important; background: #f3f9ff !important; }
.ETWPreviewClose {
    width: 34px !important; height: 34px !important; min-width: 34px !important; padding: 0 !important; margin-left: 4px !important;
    border: 1px solid #cbd5e1 !important; border-radius: 8px !important; background: #fff !important;
    color: #475569 !important; font-size: 18px !important; line-height: 1 !important; cursor: pointer !important;
}
.ETWPreviewClose:hover { border-color: #fca5a5 !important; color: #dc2626 !important; background: #fef2f2 !important; }
.ETWPreviewBody {
    flex: 1 1 auto !important; min-height: 0 !important;
    overflow: auto !important; background: #eef2f7 !important;
    -webkit-overflow-scrolling: touch !important;
}
.ETWPreviewStage { display: flex !important; justify-content: center !important; min-height: 100% !important; padding: 18px !important; box-sizing: border-box !important; }
.ETWPreviewFrame { width: 100% !important; height: 78vh !important; border: 0 !important; background: #fff !important; box-shadow: 0 8px 30px rgba(15, 23, 42, .18) !important; border-radius: 6px !important; }
.ETWPreviewStageVisual { align-items: flex-start !important; }
.ETWPreviewPage { width: 100% !important; max-width: 980px !important; padding: 20px !important; background: #fff !important; box-shadow: 0 8px 30px rgba(15, 23, 42, .18) !important; border-radius: 6px !important; box-sizing: border-box !important; }
.ETWPreviewClone { pointer-events: none !important; }

@media (max-width: 760px) {
    .ETWPreviewOverlay { padding: 0 !important; }
    .ETWPreviewDialog { width: 100% !important; height: 100% !important; max-height: 100% !important; border-radius: 0 !important; }
    .ETWPreviewFrame { height: 70vh !important; }
}


/* ⭐ ULAŞILAMAZ YATAY İÇERİK — SARMA (2026-08-18, ÖLÇÜLDÜ)
   `div.ByFieldsRight` `white-space: nowrap` taşıyor; kap dar olduğunda
   `button.ETWClearByFields` kadrajın DIŞINA çıkıyor ve hiçbir ata yatay
   kaydırmadığı için **hiç ulaşılamıyor** (ölçüldü: 14 vaka, taşma 27-330px;
   en kötüsü mobilde 330px). Sev-5: içerik var, kullanıcı erişemiyor.

   Çare kaydırma kabı DEĞİL sarmadır: `overflow-x:auto` bu satırdaki açılır
   menüleri kırpardı (overflow-y de auto'ya döner). Sarma koşulludur —
   içerik sığıyorsa görsel etkisi YOKTUR, sığmıyorsa alt satıra iner. */
/* ⚠️ KAPSAM GENİŞLETİLDİ (2026-08-19, ÖLÇÜLDÜ) — ilk sürüm `.ETWBys` ve
   `.ActionPanel` ile daraltılmıştı ve pivot BAŞLIĞINDAKİ örneği kaçırdı:
   `div.ByFieldsRight.ValueField` içinde `td.PivotRight` (overflow:hidden),
   ölçüldü `sw=195 > cw=146` ⇒ buton x=1046 (kadraj 1024) ⇒ 48px ULAŞILAMAZ.
   Sarma KOŞULLUDUR: içerik sığıyorsa görsel etkisi YOKTUR, bu yüzden kapsam
   kadraj/kap ailesinden BAĞIMSIZ yazılıyor (kayıtlı ders: kapsamı daraltan her
   şey gerekçesiyle yazılır; gerekçe yoksa geniş yazılır). */
.ByFieldsRight {
    white-space: normal;
    flex-wrap: wrap;
}

/* ⭐ BY-FIELD ÇİPİ KABINDAN GENİŞ KALIYORDU (2026-08-19, ÖLÇÜLDÜ)
   Sarma uygulandıktan SONRA kalan artık: `div.ByFieldsRightItem` 84px,
   kabı 75px ⇒ 9px ULAŞILAMAZ. Esnek öğe varsayılan `min-width:auto` ile
   içerik genişliğinin altına inemez; `min-width:0` bunu serbest bırakır.
   `overflow-wrap` uzun tek kelimeyi de kırar. İkisi de KOŞULLU: sığan çipte
   görsel etki yoktur. */
.ByFieldsRight > .ByFieldsRightItem {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 2026-09-14 — INFOGRAFIK GORUNUMUNDE MENU ALTTA ACILIYORDU, DIGER GORUNUMLERDE YANDA (kullanici bildirimi).
   Olculdu (satis #SessionManagement / SessionsHome, DashboardFlow DEGIL, 1600x950):
     View_Calendar  : .EntityTypeView flex-direction:row    ⇒ govde 497-1109 · menu 1109-1449 (SAGDA)
     View_Infographic: .EntityTypeView flex-direction:column ⇒ govde 141-1449 · menu ALTTA (1502-1603)
   Kok: 80-genui-infografik.css:933 `.EntityTypeView.View_Infographic{flex-direction:column !important}`
   (tam boy dolgu icin) sayfadan bagimsiz uygulaniyor; taban views.css:1308 `row` menuyu yana koyar.
   Care: menu ACIKKEN infografik de `row` olur, govde kalan genisligi doldurur; menu kapaliyken tam
   boy/genislik sozlesmesi DEGISMEZ. DashboardFlow sayfalarinda TUM gorunumler column
   (zz-dashboard-flow.css:825) — orada menu hepsinde altta ve tutarli ⇒ kapsam disi.
   Mobil duzeltme (390x844 olculdu): menu `flex:0 0 auto` + govde `min-width:0` ile menu 340px'te
   kaldi, infografik govdesi 16px'e ezildi. Takvimde menu daraliyor (flex-shrink:1 ⇒ govde 156 · menu 200).
   ⇒ menu daralabilir, govde en az kabin yarisini korur (masaustunde etkisiz: govde 968 > %50). */
.EntityTypeView.ETWMenu_Open:is(.View_Infographic, .View_Infographics, [class*="Infographic"]):not(.Content.DashboardFlow *) {
    flex-direction: row !important;
}
.EntityTypeView.ETWMenu_Open:is(.View_Infographic, .View_Infographics, [class*="Infographic"]):not(.Content.DashboardFlow *) > .EntityTypeViewBody {
    width: auto !important;
    min-width: 50% !important;
    flex: 1 1 0% !important;
}
.EntityTypeView.ETWMenu_Open:is(.View_Infographic, .View_Infographics, [class*="Infographic"]):not(.Content.DashboardFlow *) > .ETWMenu {
    flex: 0 1 auto !important;
    min-width: 0 !important;
}
/* ============================================================================
   Chart View — premium CX stylesheet (2026-06-30, chart-first float layout)
   Scope: .EntityTypeView .ViewBody_Chart only.

   Design: the chart IS the surface (max data ink, zero top chrome band). The old
   ChartControlTop band is gone (bad CX); the only persistent controls — the
   chart-type picker and the settings gear — FLOAT as a small, glassy cluster at
   the bottom-left, over the chart, fading to full opacity on hover. Everything
   else (export, data-table, reset, image) lives in the ECharts toolbox top-right;
   deep configuration lives in the docked "Görünüm Özellikleri" panel.
   ========================================================================== */

/* ---- Host: single-area grid, chart fills it; establishes the float anchor ---- */
.EntityTypeView .ViewBody_Chart.ChartPremiumHost {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    position: relative !important;
    inline-size: 100% !important;
    block-size: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 260px !important;
    flex: 1 1 100% !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: #f8fafc !important;
    contain: layout paint !important;
    container-type: inline-size !important;
    overflow: hidden !important;
}

/* ---- Chart body (the figure) fills the whole host ------------------------- */
.EntityTypeView .ViewBody_Chart.ChartPremiumHost > .ChartBody {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    inline-size: 100% !important;
    block-size: 100% !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: min(220px, 100%) !important; /* 2026-09-14: sabit 220px dar kapta (152px ETV) grafigi kartindan +122px tasiriyordu; govde mutlak/belirli oldugundan kabina sigar (A/B: AccountingAnalytics 6->2, mSalesActivityHome 1->0, mSalesSubscriptionHome mobil 5->2) */
    align-self: stretch !important;
    justify-self: stretch !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.EntityTypeView .ViewBody_Chart.ChartPremiumHost > .ChartBody > div,
.EntityTypeView .ViewBody_Chart.ChartPremiumHost > .ChartBody svg,
.EntityTypeView .ViewBody_Chart.ChartPremiumHost > .ChartBody canvas {
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Host padding + inner card border/radius are removed UNCONDITIONALLY (above):
   the box-in-box framing was redundant and broke alignment with the panel header's
   grid/flex columns, so the chart always fills its area flush to the edges. */

/* ---- Floating control cluster (type-picker + gear), bottom-left over chart -- */
/* Helper-on-hover (2026-06-30 user CX): helpers are NOT shown normally — the chart
   stays uncluttered, and the control cluster fades in only while the view is hovered
   or one of its controls has focus. Touch devices (no hover) keep them visible. */
.EntityTypeView .ViewBody_Chart.ChartPremiumHost > .ChartFloatControls {
    position: absolute !important;
    left: 8px !important;
    bottom: 8px !important;
    z-index: 6 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(203, 213, 225, .7) !important;
    background: rgba(255, 255, 255, .82) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.1) !important;
    backdrop-filter: blur(8px) saturate(1.1) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .10) !important;
    opacity: 0 !important;
    transform: translateY(6px) !important;
    pointer-events: none !important;
    transition: opacity .18s ease, transform .18s ease, box-shadow .15s ease !important;
}

.EntityTypeView .ViewBody_Chart.ChartPremiumHost:hover > .ChartFloatControls,
.EntityTypeView .ViewBody_Chart.ChartPremiumHost:focus-within > .ChartFloatControls {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .16) !important;
}

/* Touch / no-hover devices: there is no hover to reveal on, so keep helpers visible. */
@media (hover: none) {
    .EntityTypeView .ViewBody_Chart.ChartPremiumHost > .ChartFloatControls {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
}

/* Type picker */
.EntityTypeView .ViewBody_Chart.ChartPremiumHost .ChartFloatControls .ChartTypePicker {
    flex: 0 0 auto !important;
    min-width: 132px !important;
}

.EntityTypeView .ViewBody_Chart.ChartPremiumHost .ChartFloatControls .ChartTypePicker .ViewType.ItemSelection {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    min-height: 30px !important;
    width: 100% !important;
    padding: 0 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .04) !important;
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    box-sizing: border-box !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}

.EntityTypeView .ViewBody_Chart.ChartPremiumHost .ChartFloatControls .ChartTypePicker .ViewType.ItemSelection:hover {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .16) !important;
}

/* Settings gear (micro-button → docked View Properties panel) */
.EntityTypeView .ViewBody_Chart.ChartPremiumHost .ChartFloatControls .ChartSettingsButton {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 7px !important;
    color: #334155 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .04) !important;
    transition: color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .12s ease !important;
}

.EntityTypeView .ViewBody_Chart.ChartPremiumHost .ChartFloatControls .ChartSettingsButton:hover {
    color: #0369a1 !important;
    border-color: #7dd3fc !important;
    background: #f0f9ff !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .14) !important;
    transform: translateY(-1px) !important;
}

.EntityTypeView .ViewBody_Chart.ChartPremiumHost .ChartFloatControls .ChartSettingsButton.Active {
    color: #0369a1 !important;
    border-color: #38bdf8 !important;
    background: #e0f2fe !important;
}

/* ---- Empty state (centered over the chart body) -------------------------- */
.EntityTypeView .ViewBody_Chart.ChartPremiumHost .ChartEmptyState {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #64748b !important;
    text-align: center !important;
}

.EntityTypeView .ViewBody_Chart.ChartPremiumHost .ChartEmptyTitle {
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 850 !important;
}

.EntityTypeView .ViewBody_Chart.ChartPremiumHost .ChartEmptyText {
    max-width: 320px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

/* ---- Responsive: shrink the float cluster on tight chart containers ------- */
@container (max-width: 620px) {
    .EntityTypeView .ViewBody_Chart.ChartPremiumHost > .ChartFloatControls {
        left: 6px !important;
        bottom: 6px !important;
    }
    .EntityTypeView .ViewBody_Chart.ChartPremiumHost .ChartFloatControls .ChartTypePicker {
        min-width: 108px !important;
    }
}

@media (max-width: 720px) {
    .EntityTypeView .ViewBody_Chart.ChartPremiumHost {
        padding: 6px !important;
    }
    .EntityTypeView .ViewBody_Chart.ChartPremiumHost > .ChartBody {
        min-height: min(220px, 100%) !important; /* 2026-09-14: sabit 220px dar kapta (152px ETV) grafigi kartindan +122px tasiriyordu; govde mutlak/belirli oldugundan kabina sigar (A/B: AccountingAnalytics 6->2, mSalesActivityHome 1->0, mSalesSubscriptionHome mobil 5->2) */
    }
}

/* Split-pane / dashboard wrapping: let a horizontal panel row wrap before the
   chart is crushed. */
@media (max-width: 1100px) {
    .DirectionVer:has(.View_Chart.EntityTypeView) {
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }
    .DirectionVer:has(.View_Chart.EntityTypeView) > .Panel,
    .DirectionVer:has(.View_Chart.EntityTypeView) .View_Chart.EntityTypeView {
        flex: 1 1 280px !important;
        min-width: 280px !important;
        max-width: 100% !important;
    }
}

/* T6-5 Chart icgoru cipleri (ShowChartInsights="True", varsayilan kapali) — satir sarar, metin 12px, grafigi ortmez (D86) */
.ChartInsights { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 6px 10px 2px; min-width: 0; flex: 0 0 auto; }
.ChartInsight { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12px; line-height: 1.4; color: var(--text-secondary, #475569); background: var(--bg-tertiary, #f1f5f9); border-radius: 999px; padding: 2px 10px; overflow-wrap: anywhere; min-width: 0; }
.ChartInsight b { font-weight: 600; color: var(--text-primary, #0f172a); }
.ChartInsight_good b { color: #047857; }
/* ============================================================================
   List base styles — MIGRATED from the meta-marker file css/core/list.css
   (2026-06-30). These were the meta.xml List ElementStyles 301-308/349 whose
   CSS lived ONLY in list.css (no baked CSSText in meta.xml). Moved here so the
   List has ONE stylesheet at ONE cascade tier (pre-Meta) instead of two. Mobile/
   TabletCSSText variants are reproduced with the SAME @media breakpoints the
   platform used (Meta.xslt). The premium CX overrides follow BELOW and still win
   (later in file + higher specificity/!important). list.css is now deleted.
   ============================================================================ */

/* List ElementStyle CssKey=301 */
.ListTable {
    table-layout: fixed;
    width: 100%;
}

.ListTable td {
    padding: var(--listPadding);
    border-left: var(--border1);
    white-space: nowrap;
    text-overflow: clip;
    text-align: left;
    font-size: 100%;
    position: relative;
}

.ListTable td a {
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
    display: inline-block;
}

.SelectFields {
    max-height : 20em;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.SelectFields > div {
    padding: 3px 6px;
    cursor: pointer;
    border-bottom: 1px solid rgba(192, 192, 192, 0.39);
}

.OverFieldColumn {
    box-shadow: 5px 0 0 rgba(255,0,0,0.5) inset !important;
    opacity: 0.7;
}

/* List ElementStyle CssKey=302 */
.ListAll
{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100% !important;
}

.ListCompact .ListTable td {
    padding: 2px 4px;
    font-size: 90%;
}

.ListCompact .ListBody td::before {
    line-height: 1.3em;
}

.ListCompact .ListHeader td {
    padding-top: 1px;
    padding-bottom: 1px;
}

.ListCompact .ListHeader td a {
    height: calc(var(--listHeaderHeight) * 0.8);
    font-size: 88%;
}

/* List CssKey=302 Mobile */
@media only screen and (max-width: 767px) {
    .ListAll {
        font-size: 85%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ListAll .ListTable {
        min-width: 100%;
        scroll-snap-type: x mandatory;
    }

    .ListAll table {
        box-shadow: 0 0 1px rgba(127,127,127,0.5);
        border-collapse: separate;
    }

    .ListAll .ListBody td, .ListAll .ListHeader td {
        white-space: nowrap;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ListAll .ListBody td:first-child, .ListAll .ListHeader td:first-child {
        position: sticky;
        left: 0;
        background-color: var(--backColor, #fff);
        z-index: 1;
    }
}

/* List CssKey=302 Tablet */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .ListAll {
        font-size: 90%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ListAll .ListBody td, .ListAll .ListHeader td {
        white-space: nowrap;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* List ElementStyle CssKey=303 */
.ListBody {
    flex: 1;
    scroll-width: thin;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
}.ListBody tbody > tr {
    border-top: solid 1px rgba(127,127,127,0.1);
}

.ListBody tbody > tr:last-child {
    border-bottom: solid 1px rgba(127,127,127,0.1);
}

.ListBody tbody > tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 70%);
    border-top: solid 1px rgba(127,127,127,0.1);
}

.ListBody tbody > tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

.ListBody tbody > tr:hover {
    background-color: rgba(0, 120, 212, 0.07) !important;
    transition: background-color 0.15s ease;
}

.ListBody tbody > tr.Clickable {
    cursor: pointer;
}

.ListBody > .ListTable {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

.DisableOverflow .ListBody {
    position: static;
    height: auto;
    overflow-y: hidden;

}

.DisableOverflow .ListBody > .ListTable {
position: relative;
}

.ListBody td::before
{
    content: "\007C";
    line-height: 1.75em;
    width: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
    display: inline-block;
}

.ListBody tfoot tr,
.ListBody tbody > tr.SummaryRow {
    border-top: 2px solid rgba(0,0,0,0.1);
    font-weight: 600;
    background-color: rgba(248,249,250,0.95) !important;
}

.ListBody::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.ListBody::-webkit-scrollbar-track {
    background: transparent;
}

.ListBody::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.15);
    border-radius: 3px;
}

.ListBody::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,0.3);
}

/* ÇUBUK YALNIZ ORTA GÖVDEDE (2026-08-24, headed Chrome ile ölçüldü).
   zz-masaustu-tasma.css §7 erişilebilirlik için .ListHeader/.ListFooter'a
   `overflow-x:auto` verir (DOĞRU — içerik kaydırılabilir KALMALI); ama klasik
   kaydırıcı çizen ortamda bu, header + gövde + footer'da ÜÇ yatay çubuğun alt
   alta görünmesi ve orta gövde satırlarının sol panele göre ~10px kayması
   demekti (çubuk şeridi yükseklik tüketiyor). Kaydırma YETENEĞİ durur (JS
   senkron + programatik scrollLeft `overflow:auto`da çalışır), yalnız ÇUBUK
   gizlenir; görünür çubuklar tek yerde: .ListMiddle > .ListBody.
   Aşağıdaki eski `visibility:hidden` blokları çubuğu KALDIRMAZ (şerit yer
   tutmaya devam eder) — bu blok `display:none` ile kaldırır. */
.ListHeader,
.ListFooter,
.ListLeft .ListBody {
    scrollbar-width: none;              /* Firefox */
}
.ListHeader::-webkit-scrollbar,
.ListFooter::-webkit-scrollbar,
.ListLeft .ListBody::-webkit-scrollbar {
    display: none;                      /* Chrome/Edge/Safari */
    width: 0;
    height: 0;
}

.FieldValueZero {
    color: rgba(0,0,0,0.2);
}

/* List CssKey=303 Mobile */
@media only screen and (max-width: 767px) {
    .ListBody td {
        padding: 10px 6px !important;
    }

    .ListBody > .ListTable {
        position: relative;
    }
}

/* List CssKey=303 Tablet */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .ListBody td {
        padding: 8px 6px !important;
    }
}

/* List ElementStyle CssKey=304 */
.ListLeft
{
display: flex;
flex-direction: column;
position: absolute;
    top: 0;
    bottom: 0;

}

.ListLeft .ListBody {
    overflow-y: hidden;
    overflow-x: auto;
}

.ListLeft .ListBody::-webkit-scrollbar,
.ListLeft .ListBody::-moz-scrollbar {
    visibility: hidden;
    width: 0;
}

.ListLeft .ListBody::scrollbar {
    visibility: hidden;
    width: 0;
}

.ListLeft .ListBody::-webkit-scrollbar-thumb,
.ListLeft .ListBody::-moz-scrollbar-thumb {
    width: 0;
}

.ListLeft .ListBody::-webkit-scrollbar-thumb,
.ListLeft .ListBody::scrollbar-thumb {
    background-color: transparent !important;
}

.ListLeft .GroupByTitle
{
    padding-left: 16px;
    background-image: url(/images/down_16.png);
    background-repeat: no-repeat;
    background-position: 3px;
    background-size: 12px 12px;
}

.ListLeft .GroupByTitle.EmptyGroupByTitle
{
    background-image: none;
}

.ListLeft tr.ClosedGroup .GroupByTitle {
    background-image: url(/images/right_16.png);
    background-repeat: no-repeat;
    background-size: 12px 12px;
}

.ListLeft td
{
    overflow: hidden;
}

.DisableOverflow .ListLeft {
    display: none !important;
}

/* List ElementStyle CssKey=305 */
.ListMiddle
{
    z-index: 0;
    flex: 1;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.ListMiddle .ListBody {
    overflow: auto;
}

.ListMiddle .FirstCol
{
    width: 0 !important;
    display: none;
}

.DisableOverflow .ListMiddle {
    position: static;
    -webkit-overflow-scrolling: touch;
    height: auto;
}

.ListMiddle > .ListHeader::-webkit-scrollbar-thumb {
    background-color: transparent;
    box-shadow: 0 0 0;
}

.ListMiddle > .ListHeader {
    overflow-y: auto;
}

/* List ElementStyle CssKey=306 */
.ListFooter td::before {
    content: "\007C";
    opacity: 0;
}

.ListFooter::-webkit-scrollbar,
.ListFooter::-moz-scrollbar {
    visibility: hidden;
}

.ListFooter {
    min-width: 100%;
    z-index: 100;
    overflow: hidden;
    overflow-y: hidden;
}

.ListFooter a
{
    font-weight: bold;
}

    .DisableOverflow .ListFooter {
    position: static;
    height: auto;
    overflow-y: hidden;
    }

.ListFooter::-webkit-scrollbar, .ListFooter::scrollbar {
    background-color: transparent !important;
}

.ListFooter::-webkit-scrollbar-thumb, .ListFooter::scrollbar-thumb {
    background-color: transparent !important;
}

.ListFooter::-webkit-scrollbar-track, .ListFooter::scrollbar-track {
    background-color: transparent !important;
}

/* List ElementStyle CssKey=307 */
.ListHeader {
    overflow: hidden;
    z-index: 100;
    border-bottom: 2px solid rgba(0,0,0,0.08);
    background-color: rgba(248,249,250,0.95);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.ListFieldTitles
{
    border-top: var(--border1);
}

.ListHeader::-webkit-scrollbar,
.ListHeader::-moz-scrollbar {
    visibility: hidden;
}

.ListHeader td {
    overflow: hidden;
    padding: var(--listPadding);
    padding-top: 1px;
    padding-bottom: 1px;
}

.ListHeader .FirstCol a {
    text-align: center;
    display: block;
    font-size: 100% !important;
    font-size: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ListHeader td a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: var(--listHeaderHeight);
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;

    font-size: 100%;

    opacity: 1.0;
}.ListHeader td .OrderBy
    {
    position: absolute;
    right:  4px;
    top:    0;
    bottom:  0;
    padding: 0;
    font-size: 1.25rem;
    }

    .ListHeader td .OrderBy img
    {
    width: 12px;
    height: 12px;
    }

.ListHeader td a {
    color: var(--labelColor, #3d5986);
    text-transform: none;
    letter-spacing: 0.01em;
}

.ListFilters {
    padding: 4px 8px;
    gap: 4px;
    background-color: rgba(248,249,250,0.5);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.ListFilters select,
.ListFilters input {
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.1);
    padding: 4px 8px;
    font-size: 11px;
    transition: border-color 0.15s ease;
}

.ListFilters select:focus,
.ListFilters input:focus {
    border-color: var(--primaryColor, #2563eb);
    outline: 2px solid var(--focusColor, #2563eb);
    outline-offset: 1px;
}

/* List ElementStyle CssKey=308 */
.ListFieldTitles td {
    color: #1f5bb9;
    cursor: pointer;
    position: relative;
    z-index: 1;
    color: var(--labelColor);
}

.ListFieldTitles .EmptyToggle
{
    visibility: hidden;
}

/* Column-header tooltip for titles truncated by their column width.
   Rendered as a body-level element (#ListColTooltip, see AttachListColTooltip in
   et.js) anchored just below the header cell — the old `:hover:before` pseudo
   rendered at viewport-center and looked broken at the top, so it was removed.
   JS sets left/top + --ttArrow; these are the visual styles. */
.ListColTooltip {
    position: fixed;
    z-index: 100000;
    max-width: 320px;
    padding: 7px 11px;
    border-radius: 8px;
    color: #fff;
    background: rgba(17,24,39,0.97);
    box-shadow: 0 8px 24px rgba(2,6,23,0.32);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.005em;
    white-space: normal;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}
.ListColTooltip.show { opacity: 1; transform: translateY(0); }
.ListColTooltip:before {
    content: "";
    position: absolute;
    left: var(--ttArrow, 16px);
    width: 0; height: 0;
    border: 6px solid transparent;
}
.ListColTooltip.below:before { top: -12px; border-bottom-color: rgba(17,24,39,0.97); }
.ListColTooltip.above:before { bottom: -12px; border-top-color: rgba(17,24,39,0.97); }

/* List ElementStyle CssKey=349 */
.ListSkeletonWrapper {display:flex;flex-direction:column;width:100%;padding:0;box-sizing:border-box;}.ListSkeletonHeader,.ListSkeletonRow{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid #f0f0f0;}.Theme_Dark .ListSkeletonHeader,.Theme_Dark .ListSkeletonRow{border-bottom-color:#333;}.ListSkeletonHeader{padding-bottom:10px;border-bottom:2px solid #e8e8e8;}.Theme_Dark .ListSkeletonHeader{border-bottom-color:#444;}.ListSkeletonCell{height:14px;min-width:32px;flex:1;border-radius:3px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s infinite;}.Theme_Dark .ListSkeletonCell{background:linear-gradient(90deg,#383838 25%,#444 50%,#383838 75%);background-size:200% 100%;}.ListSkeletonFirstCol{flex:0 0 32px;width:32px;height:14px;border-radius:3px;}.ListSkeletonHeader .ListSkeletonCell{height:12px;}@media print{.ListSkeletonWrapper{display:none;}}


/* List ViewBody premium CX pass (2026-06-27)
   Scoped to EntityTypeView list tables; avoids global table/button resets. */
.EntityTypeView.View_List .ListAll,
.EntityTypeView.View_Tree .ListAll,
.EntityTypeView.View_Tree2 .ListAll {
    position: relative !important;
    background: rgba(255,255,255,.72) !important;
    border-top: 1px solid rgba(15,23,42,.08) !important;
    overflow: hidden !important;
    contain: layout paint !important;
}

.EntityTypeView.View_List .ListAll::before,
.EntityTypeView.View_Tree .ListAll::before,
.EntityTypeView.View_Tree2 .ListAll::before,
.EntityTypeView.View_List .ListAll::after,
.EntityTypeView.View_Tree .ListAll::after,
.EntityTypeView.View_Tree2 .ListAll::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 18px !important;
    z-index: 5 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity .16s ease !important;
}

.EntityTypeView.View_List .ListAll::before,
.EntityTypeView.View_Tree .ListAll::before,
.EntityTypeView.View_Tree2 .ListAll::before {
    left: 0 !important;
    background: linear-gradient(90deg, rgba(15,23,42,.12), rgba(15,23,42,0)) !important;
}

.EntityTypeView.View_List .ListAll::after,
.EntityTypeView.View_Tree .ListAll::after,
.EntityTypeView.View_Tree2 .ListAll::after {
    right: 0 !important;
    background: linear-gradient(270deg, rgba(15,23,42,.12), rgba(15,23,42,0)) !important;
}

.EntityTypeView.View_List .ListAll.ListScrolledX::before,
.EntityTypeView.View_Tree .ListAll.ListScrolledX::before,
.EntityTypeView.View_Tree2 .ListAll.ListScrolledX::before,
.EntityTypeView.View_List .ListAll.ListCanScrollRight::after,
.EntityTypeView.View_Tree .ListAll.ListCanScrollRight::after,
.EntityTypeView.View_Tree2 .ListAll.ListCanScrollRight::after {
    opacity: 1 !important;
}

.EntityTypeView.View_List .ListHeader,
.EntityTypeView.View_Tree .ListHeader,
.EntityTypeView.View_Tree2 .ListHeader {
    background: #f8fafc !important;
    border-bottom: 1px solid rgba(15,23,42,.10) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.75) inset !important;
}

.EntityTypeView.View_List .ListFooter,
.EntityTypeView.View_Tree .ListFooter,
.EntityTypeView.View_Tree2 .ListFooter {
    background: #f8fafc !important;
    border-top: 1px solid rgba(15,23,42,.10) !important;
    box-shadow: 0 -1px 0 rgba(255,255,255,.75) inset !important;
}

.EntityTypeView.View_List .ListTable,
.EntityTypeView.View_Tree .ListTable,
.EntityTypeView.View_Tree2 .ListTable {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: fixed !important;
}

.EntityTypeView.View_List .ListHeader td,
.EntityTypeView.View_Tree .ListHeader td,
.EntityTypeView.View_Tree2 .ListHeader td,
.EntityTypeView.View_List .ListFooter td,
.EntityTypeView.View_Tree .ListFooter td,
.EntityTypeView.View_Tree2 .ListFooter td {
    color: #334155 !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border-right: 1px solid rgba(15,23,42,.07) !important;
    background: transparent !important;
    /* 2026-08-19: 19 sutunlu listede sutun basina 40px "krom" (td dolgu + baglanti
       dolgu + siralama rezervi) kaliyordu ve 54px sutunda etikete 14px yer birakiyordu
       -> basliklar ortadan kesiliyordu ("Gonderen Kurum" -> "Go Ku"). Dolgu daraltildi. */
    padding-left: 3px !important;
    padding-right: 3px !important;
}

.EntityTypeView.View_List .ListHeader td > a:first-child,
.EntityTypeView.View_Tree .ListHeader td > a:first-child,
.EntityTypeView.View_Tree2 .ListHeader td > a:first-child {
    display: flex !important;
    align-items: center !important;
    min-height: 32px !important;
    padding: 0 21px 0 4px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    /* 2026-06-27: was overflow-wrap:anywhere -> shredded headers char-by-char
       ("Kodu"->"Kod/u", "ağ"->"a/ğ", "İç Hat"->"İç/H/at") because the 22px right
       reserve (sort arrow) leaves only a few px for the label in narrow columns.
       overflow-wrap:normal = NEVER break inside a word: multi-word titles wrap only
       at spaces ("Diğer Telefon" -> 2 clean lines); an over-narrow single word clips
       gracefully and the full title stays available on the existing td[title] hover. */
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* 2026-06-27: clamp a squeezed header label to max 2 lines instead of spilling to
   3-4 cramped lines. Combined with overflow-wrap:normal above, words are never split. */
.EntityTypeView.View_List .ListHeader td > a:first-child > span,
.EntityTypeView.View_Tree .ListHeader td > a:first-child > span,
.EntityTypeView.View_Tree2 .ListHeader td > a:first-child > span {
    /* 2026-08-19 OLCULDU: ust kural `a{display:flex}` oldugu icin bu span bir FLEX
       OGESIDIR ve bloklasir (computed display=flow-root) -> `-webkit-box` hic uygulanmaz,
       yani buradaki 2-satir clamp'i YILLARDIR OLU idi. Uygulanan tek etkisi
       `overflow:hidden` olmustu: flex ogesinin `min-width:auto` taban degerini SIFIRA
       cekiyor, boylece etiket en uzun kelimesinin altina sikisip ortadan kesiliyordu.
       overflow:visible ile min-content tabani geri gelir; baslik gerektiginde 3. satira
       buyur (34 -> 43px) ve metin kesilmez. Tam baslik yine td[title] ile de erisilebilir. */
    display: block !important;
    -webkit-line-clamp: none !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* 2026-08-19: siralama mikro-butonu 24x24 (WCAG 2.5.8) ve `right:4px` idi -> sagdan 28px
   kapliyor, yani 22px'lik rezervi 6px asip etiketin uzerine biniyordu. Butonu 1px'e
   cekmek 24x24 hedefi bozmadan rezervi gercege hizalar. */
.EntityTypeView.View_List .ListHeader td > a.OrderBy,
.EntityTypeView.View_Tree .ListHeader td > a.OrderBy,
.EntityTypeView.View_Tree2 .ListHeader td > a.OrderBy {
    right: 1px !important;
}

.EntityTypeView.View_List .ListBody,
.EntityTypeView.View_Tree .ListBody,
.EntityTypeView.View_Tree2 .ListBody {
    background: #fff !important;
    scrollbar-gutter: stable;
}

/* ⛔ DONDURULMUS SOL PANELDE `scrollbar-gutter: stable` KENDI KAYDIRMASINI YARATIR (2026-08-20).
   Yukaridaki kural TUM `.ListBody`'lere gutter veriyor. Ama sol panelin gövdesi
   `overflow-y: hidden`'dir (dikey kaydirma JS ile ORTA panelden senkronlanir) — yani
   orada asla bir dikey cubuk CIKAMAZ ve ayrilan 10px BOSA gider. Daha kotusu: o 10px
   `clientWidth`'ten dusulur, icerik artik sigmaz ve `overflow-x: auto` devreye girer.
   OLCULDU (/ClubList, 1600x950):
     .ListLeft .ListBody  ov=auto/hidden  clientWidth=196  offsetWidth=206  scrollWidth=206
     => yatay tasma 10px — TAM OLARAK gutter kadar. Kaydirma icerikten degil PAYANDADAN doguyor.
   Orta panelde gutter DOGRUDUR (orada dikey cubuk gercekten cikar ve duzeni sabit tutar),
   bu yuzden kapsam yalniz sol panel. Ozgulluk: rakip (0,3,0), bu (0,4,0) => `!important` yok. */
.EntityTypeView.View_List .ListLeft .ListBody,
.EntityTypeView.View_Tree .ListLeft .ListBody,
.EntityTypeView.View_Tree2 .ListLeft .ListBody {
    scrollbar-gutter: auto;
}

.EntityTypeView.View_List .ListBody .ListTable td::before,
.EntityTypeView.View_Tree .ListBody .ListTable td::before,
.EntityTypeView.View_Tree2 .ListBody .ListTable td::before {
    content: none !important;
    display: none !important;
}

.EntityTypeView.View_List .ListBody tbody > tr,
.EntityTypeView.View_Tree .ListBody tbody > tr,
.EntityTypeView.View_Tree2 .ListBody tbody > tr {
    background: #fff !important;
    transition: background-color .12s ease, box-shadow .12s ease !important;
}

.EntityTypeView.View_List .ListBody tbody > tr:nth-child(even),
.EntityTypeView.View_Tree .ListBody tbody > tr:nth-child(even),
.EntityTypeView.View_Tree2 .ListBody tbody > tr:nth-child(even) {
    background: #f8fafc !important;
}

.EntityTypeView.View_List .ListBody tbody > tr:hover,
.EntityTypeView.View_List .ListBody tbody > tr.onhover,
.EntityTypeView.View_Tree .ListBody tbody > tr:hover,
.EntityTypeView.View_Tree .ListBody tbody > tr.onhover,
.EntityTypeView.View_Tree2 .ListBody tbody > tr:hover,
.EntityTypeView.View_Tree2 .ListBody tbody > tr.onhover {
    background: #eef6ff !important;
}

.EntityTypeView.View_List .ListBody tbody > tr.SelectedItem,
.EntityTypeView.View_List .ListBody tbody > tr[aria-selected="true"],
.EntityTypeView.View_Tree .ListBody tbody > tr.SelectedItem,
.EntityTypeView.View_Tree .ListBody tbody > tr[aria-selected="true"],
.EntityTypeView.View_Tree2 .ListBody tbody > tr.SelectedItem,
.EntityTypeView.View_Tree2 .ListBody tbody > tr[aria-selected="true"] {
    background: rgba(var(--primaryRGB, 0,120,212), .14) !important;
    box-shadow: inset 3px 0 0 rgba(var(--primaryRGB, 0,120,212), .72), inset 0 -1px 0 rgba(var(--primaryRGB, 0,120,212), .18) !important;
    outline: 0 !important;
}

.EntityTypeView.View_List .ListBody tbody > tr.KbFocused,
.EntityTypeView.View_Tree .ListBody tbody > tr.KbFocused,
.EntityTypeView.View_Tree2 .ListBody tbody > tr.KbFocused {
    outline: 2px solid var(--focusColor, rgb(10,110,185)) !important;
    outline-offset: -2px !important;
    position: relative !important;
    z-index: 2 !important;
}

.EntityTypeView.View_List .ListBody td,
.EntityTypeView.View_Tree .ListBody td,
.EntityTypeView.View_Tree2 .ListBody td {
    min-height: 34px !important;
    padding: 7px 9px !important;
    border-right: 1px solid rgba(15,23,42,.06) !important;
    border-bottom: 1px solid rgba(15,23,42,.06) !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.EntityTypeView.View_List .ListBody td > a,
.EntityTypeView.View_Tree .ListBody td > a,
.EntityTypeView.View_Tree2 .ListBody td > a {
    color: inherit !important;
    min-width: 0 !important;
    /* 2026-06-27: break-word (not anywhere) so normal words stay whole; only an
       over-long single token (email/URL) breaks. Full value still on td[title] hover. */
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

.EntityTypeView.View_List .ListBody td.FieldNumber,
.EntityTypeView.View_List .ListBody td.FieldInteger,
.EntityTypeView.View_List .ListBody td.FieldMoney,
.EntityTypeView.View_Tree .ListBody td.FieldNumber,
.EntityTypeView.View_Tree .ListBody td.FieldInteger,
.EntityTypeView.View_Tree .ListBody td.FieldMoney,
.EntityTypeView.View_Tree2 .ListBody td.FieldNumber,
.EntityTypeView.View_Tree2 .ListBody td.FieldInteger,
.EntityTypeView.View_Tree2 .ListBody td.FieldMoney {
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
}

/* 2026-06-27 B6 — numeric scanning cues. The JS already tags numeric cells with
   FieldValueNegative / FieldValueZero but nothing styled them. Negative = red so
   deficits/refunds pop at a glance; zero = muted so empty/zero rows recede. Scoped
   to List/Tree body numeric cells only; subtle, no layout impact. */
.EntityTypeView.View_List .ListBody td.FieldValueNegative,
.EntityTypeView.View_Tree .ListBody td.FieldValueNegative,
.EntityTypeView.View_Tree2 .ListBody td.FieldValueNegative {
    color: #c2334d !important;
}
.EntityTypeView.View_List .ListBody td.FieldValueNegative > a,
.EntityTypeView.View_Tree .ListBody td.FieldValueNegative > a,
.EntityTypeView.View_Tree2 .ListBody td.FieldValueNegative > a {
    color: #c2334d !important;
}
/* 2026-08-06 WCAG AA — ölçüldü (onebox, #MarketingLead, 138 metin öğesi): sıfır hücreleri
   kontrast 1.54 ile AA eşiğinin (4.5) çok altındaydı ve sayfadaki 16 ihlalin 12'siydi.
   İKİ katman birden düşürüyordu: buradaki #94a3b8 VE fields.css:532'deki opacity:0.5
   (yalnız rengi düzeltmek 1.97'de bırakıyordu — ölçüldü). Bu blok liste gövdesindeki
   sayısal hücrelere ÖZEL olduğu için opacity burada 1'e çekiliyor; pivot/genel alan
   bağlamları dokunulmadan kalıyor.
   Niyet korunuyor ("zero rows recede"): #64748b hâlâ soluk gri, ama okunabilir —
   beyaz üzerinde 4.76, slate-50 (#f8fafc) üzerinde 4.56. */
.EntityTypeView.View_List .ListBody td.FieldValueZero,
.EntityTypeView.View_Tree .ListBody td.FieldValueZero,
.EntityTypeView.View_Tree2 .ListBody td.FieldValueZero {
    color: #64748b !important;
    opacity: 1 !important;
}
.EntityTypeView.View_List .ListBody td.FieldValueZero > a,
.EntityTypeView.View_Tree .ListBody td.FieldValueZero > a,
.EntityTypeView.View_Tree2 .ListBody td.FieldValueZero > a {
    color: #64748b !important;
}

/* 2026-06-27 B3 fix — Compact Mode was a no-op. The view-settings "Kompakt Mod" toggle
   adds .ListCompact to the ViewBody, but the meta.xml rule (.ListCompact .ListTable td,
   no !important) loses to the premium base rule above (3-class + !important). Re-assert
   compact density with matching specificity + !important so the toggle actually compacts
   rows/headers. Scoped to List/Tree only; default (no .ListCompact) unchanged. */
.EntityTypeView.View_List .ListCompact .ListBody td,
.EntityTypeView.View_Tree .ListCompact .ListBody td,
.EntityTypeView.View_Tree2 .ListCompact .ListBody td {
    min-height: 0 !important;
    padding: 2px 8px !important;
    line-height: 1.2 !important;
}
.EntityTypeView.View_List .ListCompact .ListHeader td > a:first-child,
.EntityTypeView.View_Tree .ListCompact .ListHeader td > a:first-child,
.EntityTypeView.View_Tree2 .ListCompact .ListHeader td > a:first-child {
    min-height: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.EntityTypeView.View_List .ListBody tbody > tr[class*="GroupByRow"] > td,
.EntityTypeView.View_Tree .ListBody tbody > tr[class*="GroupByRow"] > td,
.EntityTypeView.View_Tree2 .ListBody tbody > tr[class*="GroupByRow"] > td,
.EntityTypeView.View_List .ListBody td.GroupByTitle,
.EntityTypeView.View_Tree .ListBody td.GroupByTitle,
.EntityTypeView.View_Tree2 .ListBody td.GroupByTitle {
    min-height: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    line-height: 1.25 !important;
}

.EntityTypeView .ListBody td.GroupByTitle:not(.EmptyGroupByTitle) {
    overflow: visible !important;
    text-overflow: clip !important;
}

.EntityTypeView.View_List .ListBody td.FirstCol,
.EntityTypeView.View_Tree .ListBody td.FirstCol,
.EntityTypeView.View_Tree2 .ListBody td.FirstCol,
.EntityTypeView.View_List .ListHeader td.FirstCol,
.EntityTypeView.View_Tree .ListHeader td.FirstCol,
.EntityTypeView.View_Tree2 .ListHeader td.FirstCol {
    text-align: center !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.EntityTypeView.View_List .FirstCol .ToggleButton,
.EntityTypeView.View_Tree .FirstCol .ToggleButton,
.EntityTypeView.View_Tree2 .FirstCol .ToggleButton {
    opacity: .48 !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border-radius: 6px !important;
}

.EntityTypeView.View_List tr:hover .FirstCol .ToggleButton,
.EntityTypeView.View_List .SelectedItem .FirstCol .ToggleButton,
.EntityTypeView.View_List .FirstCol .ToggleButton.Value_True,
.EntityTypeView.View_Tree tr:hover .FirstCol .ToggleButton,
.EntityTypeView.View_Tree .SelectedItem .FirstCol .ToggleButton,
.EntityTypeView.View_Tree .FirstCol .ToggleButton.Value_True,
.EntityTypeView.View_Tree2 tr:hover .FirstCol .ToggleButton,
.EntityTypeView.View_Tree2 .SelectedItem .FirstCol .ToggleButton,
.EntityTypeView.View_Tree2 .FirstCol .ToggleButton.Value_True {
    opacity: 1 !important;
}

.EntityTypeView.View_List .NoRecordsFound.ListEmptyState,
.EntityTypeView.View_Tree .NoRecordsFound.ListEmptyState,
.EntityTypeView.View_Tree2 .NoRecordsFound.ListEmptyState {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 140px !important;
    padding: 20px 16px !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
    text-align: center !important;
    overflow: visible !important;
}

.EntityTypeView.NoItems .Middle,
.EntityTypeView.NoItems .MiddleCenter,
.EntityTypeView.NoItems .ViewBody {
    height: auto !important;
    min-height: 140px !important;
    overflow: visible !important;
}

/* 2026-09-14 — BOS GORUNUM (NoItems) SOZLESMESI. Yukaridaki 140px kurali (0,3,0) mutlak-govde sozlesmesine
   (views.css 0,5,0 · DashboardFlow 0,7,0) KAYBEDIYORDU. OLCULDU: B2BHome bos liste 87px kutudan +101px tasti ve
   ikonu grafik basliginin ustune bindi; mSalesTargetHome mobil 48px'e coktu (+187px); ProjectInternetContent'te
   856px kartin tepesinde tek satir kaldi; DF 420px rezervasyonu bos listeye 600+px ayiriyordu.
   Sozlesme: ETV min-height:auto (ASLA 0 — satir ici `flex:0 1 0%` tasiyan ETV 1330x166 -> 1330x2 eriyordu),
   govde akis icinde (display'ine DOKUNULMAZ — display:flex OneByOne ItemView'de iki bos-durum metnini ust uste
   bindirdi), bos-durum .Middle icinde dikey ortali. Iki :not() ozgullugu DF 12. blogunu (0,7,0) yenmek icindir (0,8,0).
   A/B: B2BHome 1->0, mPriceListHome 3->0, mSalesTargetHome mobil 3->0, PersonDasboard mobil 1->0; kareyle dogrulandi.
   KAPSAM (2026-09-14 sonra taramasi): yalniz platform bos-durum ogesi (.NoRecordsFound) TASIYAN gorunumler. OLCULDU:
   bos GRAFIK kendi "Veri yok" govdesini cizer; sozlesme ona uygulaninca govde 661 -> 220px'e inip gri bantlar arasinda
   yuzen beyaz serit oldu (ProductBannerContent). ViewType listesi yazilmaz — bos-durumu kendi cizen tur kendiliginden disarida. */
.Content .EntityTypeView.NoItems:not(.HasItems):not(.EtvDolu):has(> .EntityTypeViewBody > .Center > .Middle > .ETWBody > .NoRecordsFound) {
    min-height: auto !important;
}
.Content .EntityTypeView.NoItems:not(.HasItems):not(.EtvDolu):has(> .EntityTypeViewBody > .Center > .Middle > .ETWBody > .NoRecordsFound) > .EntityTypeViewBody > .Center > .Middle {
    min-height: 0 !important;
    height: auto !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
/* 2026-09-14 — MOBIL LISTE ONAY KUTUSU SUTUNU. JS ListLeft + col.FirstCol + hucrelere satir ici `width:24px` basiyor;
   dokunmatik onay kutusu 28-34px istiyor. OLCULDU (PersonDasboard/BusinessHome_Copy mobil): govde 30>24, baslik 34>24 kirpik.
   36px'te govde kirpmasi kapandi, baslikta 3px kaldi (40px'te 43>40, dolgu 0 ile 41>36 — baslik hucresi genislikle buyuyor;
   3 denemede kapanmadi, rapora yazildi).
   KAPSAM (2026-09-15, envanter taramasi): yalniz View_List. OLCULDU: View_Tree'de ListLeft onay kutusu degil HIYERARSI (ad)
   sutunudur; genis secici BudgetMetric mobil agac sutununu 214px icerikle 36px'e eziyordu. */
body.Mobile .EntityTypeView.View_List .ListLeft,
body.Mobile .EntityTypeView.View_List .ListLeft col.FirstCol,
body.Mobile .EntityTypeView.View_List .ListLeft .FirstCol {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
}

.Content .EntityTypeView.NoItems:not(.HasItems):not(.EtvDolu):has(> .EntityTypeViewBody > .Center > .Middle > .ETWBody > .NoRecordsFound) > .EntityTypeViewBody > .Center > .Middle > .ETWBody {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
}

.EntityTypeView.View_List .NoRecordsFound.ListEmptyState::before,
.EntityTypeView.View_Tree .NoRecordsFound.ListEmptyState::before,
.EntityTypeView.View_Tree2 .NoRecordsFound.ListEmptyState::before {
    content: var(--icon-Inbox) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    background: rgba(var(--primaryRGB, 0,120,212), .10) !important;
    color: var(--primaryColor, #0a6eb9) !important;
    font-family: "361" !important;
    font-size: 22px !important;
    opacity: 1 !important;
}

.EntityTypeView.View_List .ListSkeletonWrapper,
.EntityTypeView.View_Tree .ListSkeletonWrapper,
.EntityTypeView.View_Tree2 .ListSkeletonWrapper {
    padding: 10px !important;
    background: #fff !important;
}

/* Reveal safety (2026-07-02): a loading shimmer must NEVER paint over rows that
   are already rendered. If a redraw stacks a ListSkeletonWrapper as a later sibling
   of the real ListAll, hide the shimmer so the live data stays fully visible. This
   is a CSS backstop for the JS guard in DrawListSkeleton (no-stack + self-heal). */
.EntityTypeView .ListAll ~ .ListSkeletonWrapper,
.ViewBody .ListAll ~ .ListSkeletonWrapper {
    display: none !important;
}

.SupportsTouch .EntityTypeView.View_List .FirstCol .ToggleButton,
.SupportsTouch .EntityTypeView.View_Tree .FirstCol .ToggleButton,
.SupportsTouch .EntityTypeView.View_Tree2 .FirstCol .ToggleButton {
    opacity: 1 !important;
}

.Mobile .EntityTypeView.View_List:not(.MicroView) .ListAll,
.Mobile .EntityTypeView.View_Tree:not(.MicroView) .ListAll,
.Mobile .EntityTypeView.View_Tree2:not(.MicroView) .ListAll,
.SupportsTouch .EntityTypeView.View_List:not(.MicroView) .ListAll,
.SupportsTouch .EntityTypeView.View_Tree:not(.MicroView) .ListAll,
.SupportsTouch .EntityTypeView.View_Tree2:not(.MicroView) .ListAll {
    min-height: 280px !important;
    height: 100% !important;
    max-height: 100% !important;
    flex: 1 1 auto !important;
}

.Mobile .EntityTypeView.View_List:not(.MicroView) .ListMiddle,
.Mobile .EntityTypeView.View_Tree:not(.MicroView) .ListMiddle,
.Mobile .EntityTypeView.View_Tree2:not(.MicroView) .ListMiddle,
.SupportsTouch .EntityTypeView.View_List:not(.MicroView) .ListMiddle,
.SupportsTouch .EntityTypeView.View_Tree:not(.MicroView) .ListMiddle,
.SupportsTouch .EntityTypeView.View_Tree2:not(.MicroView) .ListMiddle {
    min-height: 280px !important;
}

.Mobile .EntityTypeView.View_List:not(.MicroView) .ListBody,
.Mobile .EntityTypeView.View_Tree:not(.MicroView) .ListBody,
.Mobile .EntityTypeView.View_Tree2:not(.MicroView) .ListBody,
.SupportsTouch .EntityTypeView.View_List:not(.MicroView) .ListBody,
.SupportsTouch .EntityTypeView.View_Tree:not(.MicroView) .ListBody,
.SupportsTouch .EntityTypeView.View_Tree2:not(.MicroView) .ListBody {
    min-height: 220px !important;
}

/* Column controls on list headers — moved here from 40-calendar.css (these are list/table column
   styles, not calendar). Faz 5B.1 reorg. */
/* ColumnRemover yerleşimi (kesin): sağ-üst köşe — etiketle (orta) ve OrderBy
   okuyla (sağ-alt) çakışmasın. meta Column stilini kaynak-bağımsız ezer. */
.ListHeader td .ColumnRemover,
td:hover > .ColumnRemover,
.ColumnRemover {
    top: 2px !important;
    bottom: auto !important;
    right: 6px !important;
    left: auto !important;
}

/* ListHeaderTooltip başlıklarında OrderBy tüm sağ şeridi kaplayıp (top:0;bottom:0)
   ColumnRemover ile üst üste biniyordu — sıralama oku tıklanamıyordu.
   Dikey bölüşüm: remover üst 14px, OrderBy kalan alt bölge. */
td.ListHeaderTooltip .ColumnRemover {
    height: 14px !important;
    max-height: 14px !important;
    overflow: hidden;
}
td.ListHeaderTooltip .OrderBy {
    top: 18px !important;
    bottom: 0 !important;
}

/* ============================================================================
   2026-06-30 — List ViewType premium pass (Phase 1: C1 helper discoverability +
   header alignment). Scoped to List/Tree/Tree2 column headers only. FE-only.
   ============================================================================ */

/* --- C2/header alignment fix ---------------------------------------------------
   The header label was rendered CENTERED while data cells are left-aligned. Root:
   70-list.css sets the header <a> to display:flex+align-items:center but does NOT
   set flex-direction; the later Meta-layer list.css sets flex-direction:column +
   justify-content:center, so the column-flex + align-items:center centered the
   label horizontally. Force a ROW flex, left-aligned, so headers line up with the
   left-aligned data underneath (premium column alignment, no data change). */
.EntityTypeView.View_List  .ListHeader td > a:first-child,
.EntityTypeView.View_Tree   .ListHeader td > a:first-child,
.EntityTypeView.View_Tree2  .ListHeader td > a:first-child {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    height: auto !important;
    gap: 4px !important;
}
/* keep the FirstCol (checkbox/select-all) header centered */
.EntityTypeView.View_List  .ListHeader td.FirstCol > a,
.EntityTypeView.View_Tree   .ListHeader td.FirstCol > a,
.EntityTypeView.View_Tree2  .ListHeader td.FirstCol > a {
    justify-content: center !important;
}
/* numeric columns: right-align the header label to sit over right-leaning numbers
   (data right-align handled below in C6) */
.EntityTypeView.View_List  .ListHeader td.FieldNumber  > a:first-child,
.EntityTypeView.View_List  .ListHeader td.FieldInteger > a:first-child,
.EntityTypeView.View_List  .ListHeader td.FieldMoney   > a:first-child,
.EntityTypeView.View_Tree   .ListHeader td.FieldNumber  > a:first-child,
.EntityTypeView.View_Tree   .ListHeader td.FieldInteger > a:first-child,
.EntityTypeView.View_Tree   .ListHeader td.FieldMoney   > a:first-child,
.EntityTypeView.View_Tree2  .ListHeader td.FieldNumber  > a:first-child,
.EntityTypeView.View_Tree2  .ListHeader td.FieldInteger > a:first-child,
.EntityTypeView.View_Tree2  .ListHeader td.FieldMoney   > a:first-child {
    justify-content: flex-end !important;
    text-align: right !important;
    padding-right: 8px !important;
}

/* --- C1: column helpers discoverable at rest (user-reported bug) ---------------
   "Display Helpers onhover, does not Display Normally." The header td is .ShowOnHover
   and the INACTIVE sort arrow (updownarrow) is nested .ShowOnHover, so layout.css
   ".ShowOnHover .ShowOnHover{display:none}" hides it until the td is hovered -> users
   can't tell a column is sortable. Show it faint at rest, strengthen on hover/focus.
   The ACTIVE sort arrow has NO .ShowOnHover (et.js:1536) so it already stays fully
   visible -> current sort STATE remains obvious. */
.EntityTypeView.View_List  .ListFieldTitles td .MicroButton.OrderBy.ShowOnHover,
.EntityTypeView.View_Tree   .ListFieldTitles td .MicroButton.OrderBy.ShowOnHover,
.EntityTypeView.View_Tree2  .ListFieldTitles td .MicroButton.OrderBy.ShowOnHover {
    display: inline-flex !important;
    opacity: .30 !important;
    transition: opacity .14s ease, background .12s ease, color .12s ease !important;
}
.EntityTypeView.View_List  .ListFieldTitles td:hover        .MicroButton.OrderBy.ShowOnHover,
.EntityTypeView.View_List  .ListFieldTitles td:focus-within .MicroButton.OrderBy.ShowOnHover,
.EntityTypeView.View_Tree   .ListFieldTitles td:hover        .MicroButton.OrderBy.ShowOnHover,
.EntityTypeView.View_Tree   .ListFieldTitles td:focus-within .MicroButton.OrderBy.ShowOnHover,
.EntityTypeView.View_Tree2  .ListFieldTitles td:hover        .MicroButton.OrderBy.ShowOnHover,
.EntityTypeView.View_Tree2  .ListFieldTitles td:focus-within .MicroButton.OrderBy.ShowOnHover {
    opacity: .92 !important;
}
/* the ACTIVE sort arrow (no .ShowOnHover) gets a clear accent so the sorted column
   reads at a glance (Gestalt: figure-ground) */
.EntityTypeView.View_List  .ListFieldTitles td .MicroButton.OrderBy:not(.ShowOnHover),
.EntityTypeView.View_Tree   .ListFieldTitles td .MicroButton.OrderBy:not(.ShowOnHover),
.EntityTypeView.View_Tree2  .ListFieldTitles td .MicroButton.OrderBy:not(.ShowOnHover) {
    opacity: 1 !important;
    color: var(--primaryColor, #4f46e5) !important;
}

/* resizer grip: HOVER-ONLY (user 2026-06-30: it should appear on hover, not always-on).
   The hidden->td:hover reveal already comes from menu.css/layout.css; we only refine the
   hover colour. (Sort-arrow discoverability — the real C1 fix — is unaffected.) */
.EntityTypeView.View_List  .ListFieldTitles td .ColumnResizer,
.EntityTypeView.View_Tree   .ListFieldTitles td .ColumnResizer,
.EntityTypeView.View_Tree2  .ListFieldTitles td .ColumnResizer {
    transition: background .12s ease !important;
}
.EntityTypeView.View_List  .ListFieldTitles td:hover .ColumnResizer,
.EntityTypeView.View_Tree   .ListFieldTitles td:hover .ColumnResizer,
.EntityTypeView.View_Tree2  .ListFieldTitles td:hover .ColumnResizer {
    background: rgba(148,163,184,.45) !important;
}
.EntityTypeView.View_List  .ListFieldTitles td .ColumnResizer:hover,
.EntityTypeView.View_Tree   .ListFieldTitles td .ColumnResizer:hover,
.EntityTypeView.View_Tree2  .ListFieldTitles td .ColumnResizer:hover {
    background: var(--primaryColor, #8b5cf6) !important;
}
/* keyboard discoverability: reveal add/remove-column micro-buttons on focus too
   (kept hover/focus-only to avoid cluttering every header — Gestalt figure-ground) */
.EntityTypeView.View_List  .ListFieldTitles td:focus-within .MicroButton.ColumnAdder.ShowOnHover,
.EntityTypeView.View_List  .ListFieldTitles td:focus-within .MicroButton.ColumnRemover.ShowOnHover,
.EntityTypeView.View_Tree   .ListFieldTitles td:focus-within .MicroButton.ColumnAdder.ShowOnHover,
.EntityTypeView.View_Tree   .ListFieldTitles td:focus-within .MicroButton.ColumnRemover.ShowOnHover,
.EntityTypeView.View_Tree2  .ListFieldTitles td:focus-within .MicroButton.ColumnAdder.ShowOnHover,
.EntityTypeView.View_Tree2  .ListFieldTitles td:focus-within .MicroButton.ColumnRemover.ShowOnHover {
    display: inline-flex !important;
}

/* --- D2: list state summary chips (record count + active sort/filter context) in the
   footer Left. Self-documenting state, zero grid-layout impact. --- */
/* footer row: keep Left | Center | Right side by side (flex row), and keep the Left's
   count + state-summary on ONE line so the footer never grows in height (user 2026-06-30:
   the summary was wrapping to a 2nd line and stretching the view). */
.EntityTypeView.View_List  .Bottom > .Left,
.EntityTypeView.View_Tree   .Bottom > .Left,
.EntityTypeView.View_Tree2  .Bottom > .Left {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.EntityTypeView.View_List  .ListStateSummary,
.EntityTypeView.View_Tree   .ListStateSummary,
.EntityTypeView.View_Tree2  .ListStateSummary {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    margin-left: 10px !important;
    padding-left: 10px !important;
    border-left: 1px solid rgba(15,23,42,.12) !important;
}
.EntityTypeView.View_List  .ListStateChip,
.EntityTypeView.View_Tree   .ListStateChip,
.EntityTypeView.View_Tree2  .ListStateChip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 20px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
.EntityTypeView.View_List  .ListStateChip.ListStateSort,
.EntityTypeView.View_Tree   .ListStateChip.ListStateSort,
.EntityTypeView.View_Tree2  .ListStateChip.ListStateSort {
    background: rgba(var(--primaryRGB, 79,70,229), .10) !important;
    color: var(--primaryColor, #4f46e5) !important;
}
.EntityTypeView.View_List  .ListStateChip.ListStateFilter,
.EntityTypeView.View_Tree   .ListStateChip.ListStateFilter,
.EntityTypeView.View_Tree2  .ListStateChip.ListStateFilter {
    background: rgba(245,158,11,.14) !important;
    color: #b45309 !important;
}
.EntityTypeView.View_List  .ListStateChipIcon,
.EntityTypeView.View_Tree   .ListStateChipIcon,
.EntityTypeView.View_Tree2  .ListStateChipIcon {
    font-size: 10px !important;
    opacity: .9 !important;
}
/* T17: footer chips must stay on ONE line and never truncate mid-word ("1 Filtre"
   → "1 Filt", "Not Tarihi" wrapping to two lines). They are few and small, so pin
   their width (no flex-shrink) and force single-line inner text. The footer's
   one-line guarantee (.Bottom > .Left overflow:hidden) is preserved — chips overflow
   gracefully at the edge instead of clipping mid-word. */
.EntityTypeView.View_List  .ListStateChip,
.EntityTypeView.View_Tree   .ListStateChip,
.EntityTypeView.View_Tree2  .ListStateChip {
    flex: 0 0 auto !important;
    overflow: visible !important;
}
.EntityTypeView.View_List  .ListStateChip > span,
.EntityTypeView.View_Tree   .ListStateChip > span,
.EntityTypeView.View_Tree2  .ListStateChip > span {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* --- C6: numeric data right-aligned (matches the right-aligned numeric headers
   above) so digits line up by place value for at-a-glance scanning. Scoped to
   List/Tree numeric body cells only; tabular-nums already set above. */
.EntityTypeView.View_List  .ListBody td.FieldNumber,
.EntityTypeView.View_List  .ListBody td.FieldInteger,
.EntityTypeView.View_List  .ListBody td.FieldMoney,
.EntityTypeView.View_Tree   .ListBody td.FieldNumber,
.EntityTypeView.View_Tree   .ListBody td.FieldInteger,
.EntityTypeView.View_Tree   .ListBody td.FieldMoney,
.EntityTypeView.View_Tree2  .ListBody td.FieldNumber,
.EntityTypeView.View_Tree2  .ListBody td.FieldInteger,
.EntityTypeView.View_Tree2  .ListBody td.FieldMoney {
    text-align: right !important;
}
.EntityTypeView.View_List  .ListBody td.FieldNumber  > a,
.EntityTypeView.View_List  .ListBody td.FieldInteger > a,
.EntityTypeView.View_List  .ListBody td.FieldMoney   > a,
.EntityTypeView.View_Tree   .ListBody td.FieldNumber  > a,
.EntityTypeView.View_Tree   .ListBody td.FieldInteger > a,
.EntityTypeView.View_Tree   .ListBody td.FieldMoney   > a,
.EntityTypeView.View_Tree2  .ListBody td.FieldNumber  > a,
.EntityTypeView.View_Tree2  .ListBody td.FieldInteger > a,
.EntityTypeView.View_Tree2  .ListBody td.FieldMoney   > a {
    text-align: right !important;
    width: 100% !important;
}
/* numeric footer totals right-align to match */
.EntityTypeView.View_List  .ListFooter td.FieldNumber,
.EntityTypeView.View_List  .ListFooter td.FieldInteger,
.EntityTypeView.View_List  .ListFooter td.FieldMoney,
.EntityTypeView.View_Tree   .ListFooter td.FieldNumber,
.EntityTypeView.View_Tree   .ListFooter td.FieldInteger,
.EntityTypeView.View_Tree   .ListFooter td.FieldMoney,
.EntityTypeView.View_Tree2  .ListFooter td.FieldNumber,
.EntityTypeView.View_Tree2  .ListFooter td.FieldInteger,
.EntityTypeView.View_Tree2  .ListFooter td.FieldMoney {
    text-align: right !important;
}

/* ── D1: Row actions — discoverable kebab (⋮) trigger in the FirstCol ──────────
   Right-click on the row opens the same menu (power users); this visible kebab,
   revealed on row hover, gives everyone a discoverable affordance. Floated just
   past the 24px FirstCol so it never collides with the selection checkbox. */
.EntityTypeView.View_List  .ListBody td.FirstCol,
.EntityTypeView.View_Tree   .ListBody td.FirstCol,
.EntityTypeView.View_Tree2  .ListBody td.FirstCol {
    position: relative !important;
}
.EntityTypeView.View_List  .RowActionsKebab,
.EntityTypeView.View_Tree   .RowActionsKebab,
.EntityTypeView.View_Tree2  .RowActionsKebab {
    display: none;
    position: absolute;
    right: -17px;
    top: 50%;
    transform: translateY(-50%) scale(0.9);
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid rgba(15,23,42,0.10);
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    color: #475569;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15,23,42,0.18);
    cursor: pointer;
    z-index: 6;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease, background .12s ease, box-shadow .12s ease, transform .12s ease;
}
.Theme_Dark .EntityTypeView.View_List  .RowActionsKebab,
.Theme_Dark .EntityTypeView.View_Tree   .RowActionsKebab,
.Theme_Dark .EntityTypeView.View_Tree2  .RowActionsKebab {
    background: rgba(30,41,59,0.96);
    color: #94a3b8;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.EntityTypeView.View_List  tr.onhover .RowActionsKebab,
.EntityTypeView.View_Tree   tr.onhover .RowActionsKebab,
.EntityTypeView.View_Tree2  tr.onhover .RowActionsKebab,
.EntityTypeView.View_List  .ListBody tr:hover .RowActionsKebab,
.EntityTypeView.View_Tree   .ListBody tr:hover .RowActionsKebab,
.EntityTypeView.View_Tree2  .ListBody tr:hover .RowActionsKebab {
    display: flex;
    opacity: 1;
    transform: translateY(-50%) scale(1);
}
.EntityTypeView.View_List  .RowActionsKebab:hover,
.EntityTypeView.View_Tree   .RowActionsKebab:hover,
.EntityTypeView.View_Tree2  .RowActionsKebab:hover {
    color: var(--primaryColor, #8b5cf6);
    background: #fff;
    box-shadow: 0 2px 8px rgba(15,23,42,0.24);
    transform: translateY(-50%) scale(1.08);
}

/* ── Bulk-selection action bar → floating pill anchored ABOVE the footer ────────
   User decision (2026-06-30): move MultiActions off the crowded top, float it as a
   centered dark "command bar" pill just above the footer (footer stays visible).
   JS (DrawActions) sets --maBottom = live footer height + gap so the pill clears
   the footer whether it shows the item count or totals. Scoped to List/Tree/Tree2;
   3-class selector outranks the views.css CssKey=239 base so no !important war. */
.EntityTypeView.View_List  .Center,
.EntityTypeView.View_Tree   .Center,
.EntityTypeView.View_Tree2  .Center {
    position: relative !important;
}
.EntityTypeView.View_List  .MultiActions:not(.Hidden),
.EntityTypeView.View_Tree   .MultiActions:not(.Hidden),
.EntityTypeView.View_Tree2  .MultiActions:not(.Hidden) {
    position: absolute !important;
    left: 50% !important;
    bottom: var(--maBottom, 52px) !important;
    transform: translateX(-50%) !important;
    z-index: 60 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    max-width: calc(100% - 32px) !important;
    height: auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-align: left !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    background: rgba(17,24,39,0.97) !important;
    box-shadow: 0 10px 30px rgba(2,6,23,0.30), 0 2px 6px rgba(2,6,23,0.20) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    animation: MultiActionsSlideUp 0.18s cubic-bezier(.16,.84,.44,1) !important;
}
@keyframes MultiActionsSlideUp {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.EntityTypeView.View_List  .MultiActions a,
.EntityTypeView.View_Tree   .MultiActions a,
.EntityTypeView.View_Tree2  .MultiActions a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    background: rgba(255,255,255,0.06) !important;
    color: #f1f5f9 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .12s ease, border-color .12s ease !important;
}
.EntityTypeView.View_List  .MultiActions a:hover,
.EntityTypeView.View_Tree   .MultiActions a:hover,
.EntityTypeView.View_Tree2  .MultiActions a:hover {
    opacity: 1 !important;
    background: rgba(255,255,255,0.16) !important;
    border-color: rgba(255,255,255,0.30) !important;
}
.EntityTypeView.View_List  .MultiActions span,
.EntityTypeView.View_Tree   .MultiActions span,
.EntityTypeView.View_Tree2  .MultiActions span {
    padding: 0 !important;
}
.EntityTypeView.View_List  .MultiActions .SelectionCounter,
.EntityTypeView.View_Tree   .MultiActions .SelectionCounter,
.EntityTypeView.View_Tree2  .MultiActions .SelectionCounter {
    color: #fff !important;
    background: rgba(255,255,255,0.16) !important;
    border: 1px solid rgba(255,255,255,0.24) !important;
    border-radius: 999px !important;
    padding: 2px 10px !important;
    margin: 0 2px 0 2px !important;
    font-weight: 700 !important;
}
.EntityTypeView.View_List  .MultiActions img,
.EntityTypeView.View_Tree   .MultiActions img,
.EntityTypeView.View_Tree2  .MultiActions img {
    display: inline-block !important;
    height: 14px !important;
    opacity: 0.9 !important;
    filter: invert(1) brightness(1.7) !important;
}

/* ── D5b: per-column quick filter ─────────────────────────────────────────────
   Rows failing an active column filter are hidden across every frozen pane. */
.EntityTypeView.View_List  .ListBody tr.QuickFiltered,
.EntityTypeView.View_Tree   .ListBody tr.QuickFiltered,
.EntityTypeView.View_Tree2  .ListBody tr.QuickFiltered {
    display: none !important;
}
/* filter popover anchored under the column header (body-level, like the column menu) */
.ColumnFilterPopover {
    position: fixed;
    z-index: 100000;
    background: #fff;
    border: 1px solid rgba(15,23,42,0.12);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.22);
    padding: 7px;
    animation: ColumnFilterPopIn 0.12s ease-out;
}
@keyframes ColumnFilterPopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ColumnFilterInput {
    width: 220px;
    max-width: 60vw;
    height: 30px;
    box-sizing: border-box;
    border: 1px solid rgba(15,23,42,0.18);
    border-radius: 7px;
    padding: 0 10px;
    font-size: 13px;
    color: #0f172a;
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.ColumnFilterInput:focus {
    border-color: var(--primaryColor, #8b5cf6);
    box-shadow: 0 0 0 3px rgba(var(--primaryRGB, 139,92,246), 0.15);
}
.Theme_Dark .ColumnFilterPopover { background: #1e293b; border-color: rgba(255,255,255,0.12); }
.Theme_Dark .ColumnFilterInput { background: #0f172a; color: #e2e8f0; border-color: rgba(255,255,255,0.18); }

/* ── T14a: grouped-list first column colour block — surface the value ─────────
   Grouped lists paint the first column with the field's Choice/State colour but
   leave it text-less (a context-free swatch). Show the value with a legibility
   shadow that stays readable on any hue; the tooltip carries the full value. */
.EntityTypeView td.GroupColorCell {
    position: relative;
}
.EntityTypeView td.GroupColorCell .GroupColorCellText {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,0.85), 0 1px 1px rgba(0,0,0,0.7);
    vertical-align: middle;
}

/* ── T14c: footer aggregate label — a small grey glyph (Σ / Ø / # / ↑ / ↓) marks
   which function produced the sum; the cell tooltip names the column + function
   so the footer number is no longer a bare, context-free value. */
/* 2026-08-06 WCAG AA — ölçüldü: Σ/Ø/# glifleri 10px + #94a3b8 + opacity .85 ile
   efektif kontrast 2.10 (eşik 4.5). Renk koyulaştırıldı ve opacity kaldırıldı:
   #64748b → 4.76. Hâlâ ikincil görünür (10px, gri), yalnız okunabilir. */
.EntityTypeView .ListFooter .FooterAggLabel {
    margin-right: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    opacity: 1;
}
.Theme_Dark .EntityTypeView .ListFooter .FooterAggLabel {
    color: #64748b;
}

/* ── T15: list-header filter/parameter selects — a value-less select collapsed to
   ~40px with a blank face. Give it a readable min-width so the "Tümü" placeholder
   (set in EnhanceFilterSelects) and any option is legible. */
.EntityTypeView select.FilterSelectWide {
    min-width: 140px;
    max-width: 100%;
}

/* ── 2026-07-07: shown by the DrawView guard when a view's EntityType is specified but
   cannot be resolved (broken/renamed ET or unresolved $PET link). Surfaces the config
   error inline instead of the view silently looping / freezing on "Yükleniyor". */
.ViewConfigError {
    padding: 12px 16px;
    margin: 8px;
    border-radius: 8px;
    background: var(--danger-bg, rgba(220, 38, 38, .08));
    color: var(--danger, #b91c1c);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

/* ── 2026-08-06 — TEK KAYIT AÇMA HATASI (kullanıcı kararı: "kısa uyarı + tekrar dene").
   Liste hatası `.ViewConfigError` kutusunu görünümün İÇİNE çizer; tek kayıt açarken
   doldurulacak bir kap YOKTUR (kullanıcı bir aksiyona bastı, ekran olduğu gibi duruyor).
   Bu yüzden aynı görsel dil, ekranın üstünde YÜZEN küçük bir bant olarak kullanılır.
   ⛔ Tarayıcı Notification API'si KULLANILMADI: izin verilmemişse sessizce hiçbir şey
   yapar — yani kapatmaya çalıştığımız sessiz-hata sınıfının ta kendisi olurdu. */
.ViewConfigError.ItemOpenError {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(560px, calc(100vw - 32px));
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    border: 1px solid var(--danger, #b91c1c);
    background: var(--danger-bg, rgba(220, 38, 38, .08));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.ViewConfigError.ItemOpenError .ListLoadErrorText { flex: 1; }

/* Kapatma düğmesi dokunma hedefi: WCAG AA 24px alt sınırı (bu depoda ölçülmüş kusur sınıfı). */
.ViewConfigError.ItemOpenError .ItemOpenErrorClose {
    min-width: 24px;
    min-height: 24px;
    font-size: 18px;
    line-height: 1;
    padding: 0 6px;
}

@media (max-width: 767px) {
    .ViewConfigError.ItemOpenError {
        left: 8px;
        right: 8px;
        transform: none;
        max-width: none;
    }
}

.ListBody td[role="gridcell"]:empty::before {
    content: "—";
    color: #bbb;
    font-size: 0.85em;
}

/* ⛔⛔ 2026-08-10 — LİSTE ARAÇ ŞERİDİNDE BAŞLIK, "YENİ" BUTONUNUN ÜSTÜNE TAŞIYORDU (mobil).
   ÖLÇÜLDÜ (localhost/Maya, #mOrgPersonLists, 375px):
     .TopLeft               x0   w96
     .Actions ("Yeni")      x44  w52
     .EntityTypeViewTitle   x6   w32   ← metin "Kişi Listeleri" ~90px
   Başlığın hesaplanan stili: flex:0 1 auto · min-width:0 · overflow:VISIBLE · white-space:NORMAL
   ⇒ flex onu 32px'e SIKIŞTIRIYOR, ama taşan metin kırpılmadığı için x44'ten başlayan butonun
   ÜSTÜNDEN geçiyor. İkisi de okunmuyor. Yani kusur "yanlış konum" değil, KIRPILMAYAN TAŞMA.

   İKİ KATMANLI ÇARE (ikisi de ölçüme dayanıyor):
   1) TAŞMAYI KES — her genişlikte geçerli. Metin artık butonun üstüne binemez; sığmazsa "…"
      ile biter. Bu tek başına ÇAKIŞMAYI bitirir ama dar ekranda başlık okunmaz hâle gelirdi,
      bu yüzden (2) şart.
   2) MOBİLDE BAŞLIĞA KENDİ SATIRINI VER — şerit sarmalanır, başlık tam genişlik alır ve
      OKUNUR kalır. Yalnız <768px'te; masaüstünde yerleşim DEĞİŞMEZ (orada çakışma yok). */
.EntityTypeViewTitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .TopLeft { flex-wrap: wrap; }
    .TopLeft .EntityTypeViewTitle {
        flex: 1 1 100%;
        min-width: 0;
        order: -1;          /* başlık ÜSTTE, aksiyonlar altında */
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PARA BIRIMI (.Suffix) LISTEDE SAYIDAN KOPUYORDU — 2026-08-20
   ═══════════════════════════════════════════════════════════════════════════
   Ekran goruntusunde gorüldu, sonra DOM'dan olculdu (/ClubList "Butce" sutunu):
     <a><span class=WholePart>12.000</span><span class=DecimalPart>00</span>
        <span class=Suffix>₺</span></a>
     .WholePart  left=1402.1  top=483.5
     .Suffix     left=1160.5  top=495.9      <- 240px SOLDA, 12px ASAGIDA
   Kaynak `itemstyles.css` (@meta CssKey=213) `td .Suffix`:
     float:right + position:absolute + left:0 + top:2em
   `position:absolute` float'i GECERSIZ kilar; `left:0` sembolu hucrenin SOL kenarina
   civiler; `top:2em` onu ~16px asagi iterek satir ayracinin uzerine bindirir.
   (Ayni kuralda `width` ve `font-size` IKISER kez yazilmis — biri digerini eziyor.)
   Grup basligi satiri ayni degeri `34.000,00 ₺` diye TEK SATIR dogru cizer; yani
   dogru davranis zaten uründe var, kiran sey bu kural.
   ⛔ KAPSAM BILEREK DAR: `td .Suffix` platformdaki HER tabloyu etkiler; burada yalniz
   liste/agac govdesi hedeflenir. Ozgulluk (0,3,2) — rakip (0,1,1). */
/* KAPSAM: yalniz `.ListBody` yazmak YETMEDI — ALT TOPLAM satiri `.ListFooter`
   icindedir ve orada sembol hâlâ `absolute` kaliyordu (olculdu: 6 `.Suffix`'in
   5'i duzeldi, `div.ListFooter` icindeki 6.'si left=1167.8 top=910.7'de asili
   kaldi). Bu yuzden hedef `.ListTable` — govde, alt toplam ve baslik tablosunun
   UCU de ayni listeye aittir. */
.EntityTypeView.View_List .ListTable td .Suffix,
.EntityTypeView.View_Tree .ListTable td .Suffix,
.EntityTypeView.View_Tree2 .ListTable td .Suffix {
    position: static;
    float: none;
    top: auto;
    left: auto;
    display: inline !important;
    width: auto;
    height: auto;
    font-size: 0.85em;
    padding-left: 2px;
    vertical-align: baseline;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RENKLI HUCREDE SATIR AYRACI GORUNMUYORDU — 2026-08-20
   ═══════════════════════════════════════════════════════════════════════════
   Ekran goruntusunde gorüldu (/SalesCustomersHome "Saglik Durumu"): iki satirin
   yesil hucresi TEK BLOK gibi birlesiyor, diger sutunlarda ayrac gorunuyor.
   OLCULDU: ayrac VAR ve dogru yerde —
     td.bg = rgb(40,167,69)   border-bottom = 1px solid rgba(15,23,42,0.06)
     yukseklikler 39/39, ust-alt 329.3 -> 368.3 -> 407.3 (bitisik, dogru)
   Yani kusur yapida degil RENKTE: %6 opaklikta KOYU bir cizgi, doygun yesil
   uzerinde algilanamaz. Yine bugunun sinifi: DEGISKEN ZEMINDE SABIT DEGER.
   CARE — algilama gerektirmeyen ikinci katman: %25 BEYAZ ic-golge.
     beyaz/acik hucrede : beyaz uzerine beyaz => GORUNMEZ (bugunku gorunum aynen korunur)
     renkli/koyu hucrede: kontrast olusur => ayrac GORUNUR
   Tek kural iki durumu da dogru cozer; hicbir sinif/oznitelik tespiti gerekmez.
   `inset` golge kutu boyutunu DEGISTIRMEZ => hiza ve yukseklik senkronu etkilenmez. */
.EntityTypeView.View_List .ListBody td,
.EntityTypeView.View_Tree .ListBody td,
.EntityTypeView.View_Tree2 .ListBody td {
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.25);
}


/* ═══════════════════════════════════════════════════════════════════════════
   ICGORU BALONU ALT TOPLAM SATIRINI ORTUYORDU — 2026-08-20
   ═══════════════════════════════════════════════════════════════════════════
   Ekran goruntusunde gorüldu, sonra olculdu (/SalesCustomersHome):
     div.InsightDock  position:absolute  z-index:6  bottom:10px  218x38  (871..909)
     .ListMiddle .ListFooter                                     1061x33 (886..919)
     ORTULEN FOOTER HUCRELERI: ["Σ0","Σ0"]   <- hesaplanan TOPLAMLAR gizleniyor
   Kabin alt kenari footer'in alt kenariyla ayni (919); `bottom:10px` balonu tam
   footer'in uzerine oturtuyor. Footer 33px oldugu icin temizlemek 33+gap gerekir.
   ⛔ KOSULLU: yalniz footer'i OLAN listede yukari alinir — footer yoksa bugunku
   yerlesim aynen korunur (`:has()` desteklenmeyen tarayicida da oyle olur, yani
   geri dusus GUVENLI). Bilgi veren bir katman, HESAPLANAN DEGERI ortemez. */
.EntityTypeView.View_List:has(.ListFooter) .InsightDock,
.EntityTypeView.View_Tree:has(.ListFooter) .InsightDock,
.EntityTypeView.View_Tree2:has(.ListFooter) .InsightDock {
    bottom: 46px;
}


/* ICGORU BALONUNUN ORTMESI — MEKANIZMA ZATEN VARDI, DEGERI YANLISTI (2026-08-20)
   ⚠️ Bu notun ONCEKI hali "dogru cozum balonu AKISA almak" diyordu — YANLISTI.
   `zz-assistant.css` (2026-08-10) tam o kolu OLCUP ELEMIS: `position:static` mobilde
   `ActiveContent` icinde 101px'lik IKINCI KAYDIRICI doguruyor. Yani dock akista
   OLMAMALI; dogru care kaydirilan govdeye onun kadar YER AYIRMAKTIR ve o mekanizma
   (`.InsightDockHost .ListBody { padding-bottom }`) ZATEN kuruluydu.
   Gercek bulgu onun DEGERININ yanlis olmasiydi: masaustu dali 28px veriyordu, oysa
   olculen dock 38px + `bottom:10px` = 48px gerekiyor. Duzeltme `zz-assistant.css`
   icinde yapildi (28 -> 48); burada tekrar edilmiyor.
   ⚠️ KALAN — VE SAHIBI PLATFORM DEGIL: cok kisa panelde dolgu yetmez cunku gorunur
   alanin kendisi dock kadardir. SIKISMANIN KAYNAGI OLCULDU (/mOvertimeRequests, 1600x950,
   zincir yukaridan asagi):
     div.Panel.OBJECT            728px   <- sayfa paneli, yer BOL
     div.View_List (bu gorunum)  241px   <- 728'in cogunu USTTEKI takvim paneli aliyor
     div.Middle                  108px   <- baslik + "Durum" filtresi dusulunce
     div.ListBody                 62px   <- ~1.5 satir
   Yani daralma platform CSS'inden DEGIL, o ekranin PANEL PAYLASIMINDAN geliyor
   (domain XML yerlesim karari). Platform tarafinda `.ListBody`'ye min-height vermek
   cazip gorunuyor ama OLCULMEDEN yapilamaz: dar yerlesimlerde tasma uretir.
   ⇒ Bu ekranin duzeltmesi domain XML'de panel oranlarindadir; burada birakiliyor.
   DERS: "yapamadim" yazmadan once AYNI KUSURUN daha once cozulup cozulmedigini ARA —
   depo bu kolu bir kez olcup elemisti, ben ayni kolu bastan denedim. */


/* ═══════════════════════════════════════════════════════════════════════════
   LISTEDE ONDALIK AYRAC SPAN'I HIC URETILMIYOR — 2026-08-25
   ───────────────────────────────────────────────────────────────────────────
   OLCULDU: sayiyi iki farkli kod yolu ciziyor ve span yapilari FARKLI:
     · a.js:2150 ReFormatNumber (form/detay) : WholePart + DecimalSeperator + DecimalPart
     · et.js:6961                    (LISTE) : WholePart + DecimalPart        ← ayrac YOK
   Ayrac olmayinca, fields.css:505'teki .DecimalPart{font-size:70%;vertical-align:top}
   kurali ondaligi UST SIMGE gibi gosteriyor ve sayi okunmuyor:
     79,2  -> ekranda "79" + kucuk-yukarida "2"      (yani 79-ustsimge-2)
     2,87  -> "2" + kucuk-yukarida "87"
     820.000,00 -> "820.000" + kucuk-yukarida "00"
   finance/FinansRadari ekran turunda 21 kusurun TAMAMI liste yuzeyindeydi.

   BITISIK-KARDES secici KENDI AYRIMINI YAPAR: form yolunda araya DecimalSeperator
   girdigi icin orada ESLESMEZ => cift virgul riski YOK. Ust simge stiline
   DOKUNULMUYOR (kurusu kucuk gostermek bilincli bir muhasebe kalibi); yalniz
   kayip olan ayrac geri getiriliyor.

   KALICI COZUM et.js'te (backlog K-FE skor 9: liste yolu ayni uc-span yapisini
   uretmeli). Bu kural o duzeltme gelene kadar gorsel kusuru kapatir; geldiginde
   zararsizdir (ayrac span'i varsa bu secici eslesmez).
   ═══════════════════════════════════════════════════════════════════════════ */
.ListBody .WholePart + .DecimalPart::before { content: ","; }


/* ═══════════════════════════════════════════════════════════════════════
   ONDALIK AYRAC — KALICI COZUM GELDI (2026-08-26), GECICI COZUM ARTIK OLU
   ═══════════════════════════════════════════════════════════════════════
   Yukaridaki `.ListBody .WholePart + .DecimalPart::before { content:"," }`
   kurali BITISIK-KARDES seciciydi ve kendi notu soyle diyordu:
     "KALICI COZUM et.js'te ... geldiginde zararsizdir (ayrac span'i varsa
      bu secici eslesmez)."
   Kalici cozum BUGUN yazildi (et.js liste yolu artik WholePart +
   DecimalSeperator + DecimalPart uretiyor, a.js emsaliyle AYNI).
   ⇒ Bitisik-kardes secici artik ESLESMIYOR: cift virgul riski YOK.

   ⛔ AMA TEK BASINA YETMEZDI — VE BU OLCULDU:
     fields.css:494  .DecimalSeperator { opacity: 0 }
   Yani et.js'in urettigi ayrac GORUNMEZ olacakti ve ayni anda gecici cozum de
   devre disi kalacakti => kusur AYNEN geri gelirdi. Yukaridaki not bu kurali
   hesaba katmamis.
   ⇒ Ayrac YALNIZ LISTE baglaminda gorunur yapilir. `.DecimalSeperator`in
     global tanimina DOKUNULMUYOR: form/detay yolunda gizli kalmasi BILINCLI
     bir karardir (a.js zaten ayni span'i orada da uretiyor ve orada kusur
     BILDIRILMEDI) — global degistirmek olcmedigim bir yuzeyi bozardi.
   Ust simge stiline de dokunulmuyor: kurusu kucuk gostermek bilincli muhasebe
   kalibi; kayip olan yalnizca AYRACTI. */
.ListBody .DecimalSeperator {
    opacity: 1;
    font-size: inherit;
    vertical-align: middle;
    margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SAYI KURUŞ KAYMASI + 2 SATIRA DÜŞME — 2026-08-29 (satis.360bir.com ölçüldü)
   ───────────────────────────────────────────────────────────────────────────
   OLCUM: sayı hücresi <a> içinde WholePart + DecimalSeperator + DecimalPart
   yanyana durur; .DecimalPart'ın fields.css'teki `vertical-align: top` +
   `padding: 3px 1px` + `font-size: 70%` bileşimi kurusu SATIR ÜSTÜNE çeker
   (y: 198.3 vs 202.3) ve 2. satırda hizasız gösterir. Liste hücresi TEK
   satır sözleşmesindedir (`td{overflow:hidden; white-space:nowrap}`) — bu
   bağlamda kuruş, tampon ve üstsimge etkisi olmayıp TABAN HİZASINDA durmalı.
   Kapsam bilerek DARDIR: yalnız .ListBody sayısal hücreleri; form/detay
   (a.js yolu) dokunulmadan kalır. */
.EntityTypeView.View_List .ListBody td.FieldNumber span.DecimalPart,
.EntityTypeView.View_List .ListBody td.FieldInteger span.DecimalPart,
.EntityTypeView.View_List .ListBody td.FieldMoney span.DecimalPart,
.EntityTypeView.View_Tree .ListBody td.FieldNumber span.DecimalPart,
.EntityTypeView.View_Tree .ListBody td.FieldInteger span.DecimalPart,
.EntityTypeView.View_Tree .ListBody td.FieldMoney span.DecimalPart,
.EntityTypeView.View_Tree2 .ListBody td.FieldNumber span.DecimalPart,
.EntityTypeView.View_Tree2 .ListBody td.FieldInteger span.DecimalPart,
.EntityTypeView.View_Tree2 .ListBody td.FieldMoney span.DecimalPart {
    font-size: inherit;
    vertical-align: baseline;
    padding: 0 0 0 0.5px;
}
/* sayı hücresi ASLA 2 satır olamaz: kırılma noktası span'ler ARASINDA olduğu
   için td nowrap yine de kırıyor; çözüm a'yı da nowrap + inline yapmaktır. */
.EntityTypeView.View_List .ListBody td.FieldNumber > a,
.EntityTypeView.View_List .ListBody td.FieldInteger > a,
.EntityTypeView.View_List .ListBody td.FieldMoney > a,
.EntityTypeView.View_Tree .ListBody td.FieldNumber > a,
.EntityTypeView.View_Tree .ListBody td.FieldInteger > a,
.EntityTypeView.View_Tree .ListBody td.FieldMoney > a,
.EntityTypeView.View_Tree2 .ListBody td.FieldNumber > a,
.EntityTypeView.View_Tree2 .ListBody td.FieldInteger > a,
.EntityTypeView.View_Tree2 .ListBody td.FieldMoney > a {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}
/* ============================================================
   SKOR#1 Kayıt Geçmişi (Record History timeline)
   Kullanan: js/et-history.js (ShowItemHistory paneli)
   Yeni, çakışmasız sınıf ailesi — Meta/ElementStyles ile kesişmez.
   ============================================================ */

#ItemHistoryOverlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 99998;
}

#ItemHistoryPanel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 520px;
    max-width: 96vw;
    background: var(--BackgroundColor, #fff);
    color: var(--Color, #1e293b);
    box-shadow: -12px 0 32px rgba(15, 23, 42, 0.18);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    animation: ItemHistorySlideIn 0.18s ease-out;
}

@keyframes ItemHistorySlideIn {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.ItemHistoryHead {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 18px 12px 18px;
    border-bottom: 1px solid var(--borderColor, #e2e8f0);
    flex: none;
}

.ItemHistoryTitles { flex: 1; min-width: 0; }

.ItemHistoryTitle {
    font-size: 16px;
    font-weight: 700;
}

.ItemHistorySub {
    font-size: 12.5px;
    opacity: 0.65;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ItemHistoryClose {
    flex: none;
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 6px;
    color: inherit;
    opacity: 0.6;
}
.ItemHistoryClose:hover { opacity: 1; background: rgba(148, 163, 184, 0.15); }

.ItemHistoryBody {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px 24px 18px;
}

.ItemHistoryGuide {
    font-size: 12.5px;
    line-height: 1.45;
    color: #475569;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 8px;
    padding: 9px 10px;
    margin: 0 0 12px;
}

.ItemHistoryEmpty {
    font-size: 13px;
    opacity: 0.7;
    padding: 12px 4px;
    line-height: 1.5;
}

/* --- zaman çizelgesi düğümü --- */
.ItemHistoryVersion {
    display: flex;
    gap: 12px;
    position: relative;
    padding-bottom: 18px;
}
.ItemHistoryVersion::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: var(--borderColor, #e2e8f0);
}
.ItemHistoryVersion:last-child::before { display: none; }

.ItemHistoryDot {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 4px;
    background: #94a3b8;
    z-index: 1;
}
.ItemHistoryDotInsert { background: #10b981; }
.ItemHistoryDotUpdate { background: #3b82f6; }
.ItemHistoryDotDelete { background: #ef4444; }

.ItemHistoryCard {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--borderColor, #e2e8f0);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--PanelColor, #f8fafc);
}
.ItemHistoryLatest .ItemHistoryCard {
    border-color: var(--ColorPrimary, #3b82f6);
}

.ItemHistoryMeta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    margin-bottom: 6px;
}
.ItemHistoryAction {
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    background: rgba(148, 163, 184, 0.18);
}
.ItemHistoryActionInsert { color: #047857; background: rgba(16, 185, 129, 0.12); }
.ItemHistoryActionUpdate { color: #1d4ed8; background: rgba(59, 130, 246, 0.12); }
.ItemHistoryActionDelete { color: #b91c1c; background: rgba(239, 68, 68, 0.12); }
.ItemHistoryUser { font-weight: 600; opacity: 0.8; }
.ItemHistoryDate { opacity: 0.55; margin-left: auto; }

.ItemHistoryTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.ItemHistoryTable td {
    padding: 4px 6px 4px 0;
    vertical-align: top;
    word-break: break-word;
}
.ItemHistoryField { font-weight: 600; width: 28%; opacity: 0.85; }
.ItemHistoryOld { color: #b91c1c; text-decoration: line-through; opacity: 0.75; width: 30%; }
.ItemHistoryArrow { opacity: 0.4; width: 18px; text-align: center; }
.ItemHistoryNew { color: #047857; font-weight: 600; }

.ItemHistoryFoot {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}
.ItemHistoryRestore {
    border: 1px solid var(--borderColor, #cbd5e1);
    background: var(--BackgroundColor, #fff);
    color: inherit;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
}
.ItemHistoryRestore:hover { border-color: var(--ColorPrimary, #3b82f6); color: var(--ColorPrimary, #2563eb); }
.ItemHistoryRestore:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 640px) {
    #ItemHistoryPanel { width: 100vw; max-width: 100vw; }
}
/* ============================================================
   GEN-UI ortak stilleri (SKOR#3 trend, SKOR#4 drilldown breadcrumb,
   SKOR#8 RCA paneli, SKOR#9 outlier rozeti, SKOR#7 Ask paneli)
   ============================================================ */

/* ── SKOR#3: Aggregate trend rozeti ▲▼▬ ── */
.AggregateTrend {
    display: inline-block;
    margin-left: 6px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    vertical-align: middle;
    white-space: nowrap;
}
.AggregateTrendUp   { color: #047857; background: rgba(16, 185, 129, 0.12); }
.AggregateTrendDown { color: #b91c1c; background: rgba(239, 68, 68, 0.12); }
.AggregateTrendFlat { color: #475569; background: rgba(148, 163, 184, 0.16); }

/* ── SKOR#4: Drilldown breadcrumb şeridi ── */
.DrillBreadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 10px;
    font-size: 12.5px;
}
.DrillBreadcrumb .DrillCrumb {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.10);
    color: var(--ColorPrimary, #1d4ed8);
    cursor: pointer;
    font-weight: 600;
}
.DrillBreadcrumb .DrillCrumb:hover { background: rgba(59, 130, 246, 0.18); }
.DrillBreadcrumb .DrillCrumbClose { opacity: 0.6; font-weight: 700; }
.DrillBreadcrumb .DrillCrumb:hover .DrillCrumbClose { opacity: 1; }

/* ── SKOR#9: Aykırı değer rozeti ── */
.OutlierCell {
    position: relative;
}
.OutlierCell::after {
    content: "!";
    display: inline-block;
    margin-left: 5px;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    vertical-align: middle;
}
.OutlierCellHigh::after { background: #ef4444; }

/* ── SKOR#7/#8: Ask / RCA panelleri (ItemHistory paneliyle aynı dil) ──
   G2 panelleri (Pulse/Forecast/Similar/Dedup) sabit id yerine .GenUiSidePanel
   SINIF'ıyla oluşuyor; aynı yerleşim ikisine de uygulansın diye class'ı da kapsa. */
#GenUiSidePanel, .GenUiSidePanel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 560px;
    max-width: 96vw;
    background: var(--BackgroundColor, #fff);
    color: var(--Color, #1e293b);
    box-shadow: -12px 0 32px rgba(15, 23, 42, 0.18);
    z-index: 99999;
    display: flex;
    flex-direction: column;
}
#GenUiSidePanelOverlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 99998;
}

/* ── YARDIMCI YÜZEY DAVETİ — TEK LEHÇE (2026-08-13, kullanıcı emri) ──────────────────
   Panel artık KENDİLİĞİNDEN açılmıyor. Yerine sağ kenarda sessiz bir DAVET
   durur; kullanıcı tıklarsa panel açılır. Tasarım kısıtları:
     · ekranı İŞGAL ETMEZ — tek satır, dikey ortada, sağ kenara yapışık;
     · odağı ÇALMAZ — kendisi açılmaz, animasyonu yumuşak ve TEK seferlik;
     · kaçınılabilir — kendi `×` düğmesi var, Esc ile de kapanır;
     · içeriğin üstünde ama panelin ALTINDA (z-index 99997 < panel 99999). */
.GenUiInvite {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99997;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 10px 14px;
    border: 1px solid var(--borderColor, #e2e8f0);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    background: var(--BackgroundColor, #fff);
    color: var(--Color, #1e293b);
    box-shadow: -6px 0 18px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    max-width: 46vw;
    animation: GenUiInviteIn 320ms ease-out both;
}
/* ⛔⛔ 2026-08-13 — DAVET, MODÜL YAN RAYINI ÖRTMEZ (kullanıcı: "sağ menü görünmüyor").
   Yukarıdaki sözleşme "ekranı İŞGAL ETMEZ / kaçınılabilir" diyor; `right:0` bunu tek
   başına sağlamıyordu çünkü modül yan rayı (`PageZone_RightNavs`) da sağ kenarda durur.
   ÖLÇÜLDÜ (finans/TaxAdvisory, 1600px): davet @1486→1559 · sağ ray 1496→1600
   ⇒ davet, rayın bir nav öğesini (etiketiyle birlikte) ÖRTÜYORDU. Başka bir kontrolü
   gizleyen bir "davet", davet değil ENGELDİR.
   Kural YALNIZ ray GERÇEKTEN nav taşıyorsa uygulanır (`:has(… .Nav)`) — boş bir
   PageZone yüzünden davet gereksiz yere içeri kaymasın. `:has()` desteklenmeyen bir
   motorda kural sessizce düşer ve eski davranış korunur (güvenli bozulma). */
body:has(.PageZone_RightNavs .Nav) .GenUiInvite {
    right: 112px;
}

.GenUiInvite:hover,
.GenUiInvite:focus-visible {
    box-shadow: -8px 0 22px rgba(15, 23, 42, 0.18);
    outline: none;
}
.GenUiInvite:focus-visible {
    outline: 2px solid var(--PrimaryColor, #6366f1);
    outline-offset: 2px;
}
.GenUiInviteIcon {
    color: var(--PrimaryColor, #6366f1);
    font-size: 14px;
}
.GenUiInviteText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.GenUiInviteClose {
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 4px;
    color: var(--MutedColor, #64748b);
    font-size: 16px;
    font-weight: 400;
}
.GenUiInviteClose:hover {
    background: var(--HoverColor, rgba(15, 23, 42, 0.06));
    color: var(--Color, #1e293b);
}
@keyframes GenUiInviteIn {
    from { opacity: 0; transform: translate(12px, -50%); }
    to   { opacity: 1; transform: translate(0, -50%); }
}
/* Hareketi azaltma tercihine SAYGI — davet yine görünür, ama kaymaz. */
@media (prefers-reduced-motion: reduce) {
    .GenUiInvite { animation: none; }
}
/* Dar ekranda indikatör de çıkmaz (panel zaten 100vw kaplıyor — mobilde
   otomatik açma 2026-08-04'te kapatılmıştı, davet de gösterilmez). */
@media (max-width: 640px) {
    .GenUiInvite { display: none; }
}
.GenUiPanelHead {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--borderColor, #e2e8f0);
    font-weight: 700;
    flex: none;
}
.GenUiPanelHead .GenUiPanelClose {
    margin-left: auto;
    width: 28px !important;
    max-width: 28px;
    height: 28px;
    min-width: 28px;
    flex: 0 0 28px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.72;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.GenUiPanelHead .GenUiPanelClose:hover { opacity: 1; background: rgba(148, 163, 184, 0.14); border-color: rgba(148, 163, 184, 0.32); }
.GenUiPanelBody { flex: 1; overflow-y: auto; padding: 14px 16px; }
.GenUiPanelBody .GenUiRow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 4px;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.25);
    font-size: 13px;
}
.GenUiPanelBody .GenUiActionRow {
    cursor: pointer;
    border-radius: 6px;
    padding-left: 8px;
    padding-right: 8px;
}
.GenUiPanelBody .GenUiActionRow:hover,
.GenUiPanelBody .GenUiActionRow:focus-visible {
    background: rgba(59, 130, 246, 0.08);
    outline: none;
}
.GenUiPanelBody .GenUiRow .GenUiLbl { flex: 1; min-width: 0; }
.GenUiPanelBody .GenUiRow .GenUiVal { margin-left: auto; white-space: nowrap; }
.GenUiRowAction {
    margin-left: 6px;
    white-space: nowrap;
    width: auto !important;
    flex: 0 0 auto;
}
.GenUiBar {
    height: 8px;
    border-radius: 4px;
    background: var(--ColorPrimary, #3b82f6);
    min-width: 2px;
}
.GenUiBarNeg { background: #ef4444; }
.GenUiMuted { opacity: 0.6; font-size: 12px; }
.GenUiInput {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--borderColor, #cbd5e1);
    border-radius: 8px;
    font-size: 13.5px;
    background: var(--BackgroundColor, #fff);
    color: inherit;
}
.GenUiBtn {
    border: 1px solid var(--borderColor, #cbd5e1);
    background: var(--BackgroundColor, #fff);
    color: inherit;
    font-size: 12.5px;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
}
.GenUiBtn:hover { border-color: var(--ColorPrimary, #3b82f6); color: var(--ColorPrimary, #2563eb); }
.GenUiBtnPrimary {
    background: var(--ColorPrimary, #2563eb);
    border-color: var(--ColorPrimary, #2563eb);
    color: #fff;
}
.GenUiBtnPrimary:hover { color: #fff; opacity: 0.92; }

@media (max-width: 640px) {
    #GenUiSidePanel, .GenUiSidePanel { width: 100vw; max-width: 100vw; }
}

/* GENUI Dalga-D panelleri (insights/dedup) — 2 Tem 2026 */
.GenUiSection { margin: 10px 0; padding: 8px 10px; background: var(--panelBack, #fff); border: 1px solid rgba(0,0,0,.07); border-radius: 8px; }
.GenUiSectionTitle { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.GenUiKpi { font-size: 14px; font-weight: 600; }
.GenUiWarn { color: #b45309; background: #fef3c7; border-radius: 6px; padding: 4px 8px; font-size: 12px; margin: 4px 0; }
.GenUiMuted { opacity: .7; font-size: 12px; }
.GenUiGuide {
    font-size: 12.5px;
    line-height: 1.45;
    color: #475569;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 8px;
    padding: 9px 10px;
    margin: 0 0 10px;
}
.GenUiGuide strong { color: #1e40af; }
.GenUiLbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.GenUiVal { font-variant-numeric: tabular-nums; font-size: 12px; margin-left: 6px; }
.GenUiLink { cursor: default; }
.GenUiBarForecast { opacity: .55; background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,255,255,.5) 4px 8px); }

/* ── C20/#31 EMBED: the main app booted inside an AI-Hub iframe just to render
   a dashboard. GenUIEmbedRender paints into a fullscreen opaque overlay that
   covers the (still-booted-but-unused) home shell, and we lock body scroll so
   only the dashboard is interactive. Fills the iframe viewport (inset:0). ── */
.GenUIEmbedOverlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    background: var(--backColor, var(--BackgroundColor, #fff));
    overflow: auto;
}
html.GenUIEmbedActive body { overflow: hidden; }

/* ── Personal HOME dashboard: native workspace surface, never a global overlay. ── */
.GenUiHomeWorkspace {
    position: relative;
    box-sizing: border-box;
    width: calc(100% - 24px);
    min-height: 360px;
    max-height: calc(100vh - 132px);
    max-height: calc(100dvh - 132px);
    margin: 12px;
    background: var(--backColor, var(--BackgroundColor, #fff));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--borderColor, rgba(15,23,42,.10));
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(15,23,42,.08);
}
.GenUiHomeBar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--borderColor, rgba(0,0,0,.1));
    background: var(--panelBack, var(--BackgroundColor, #f8fafc));
}
.GenUiHomeTitleWrap { display: flex; flex-direction: column; min-width: 0; }
.GenUiHomeKicker { font-size: 10px; line-height: 1.2; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .58; }
.GenUiHomeTitle { font-weight: 700; font-size: 15px; }
.GenUiHomeSpacer { flex: 1; }
.GenUiHomeBtn {
    border: 1px solid var(--borderColor, #cbd5e1);
    background: transparent; color: inherit;
    font-size: 12.5px; padding: 5px 12px; border-radius: 8px; cursor: pointer;
}
.GenUiHomeBtn:hover { border-color: var(--ColorPrimary, #3b82f6); color: var(--ColorPrimary, #2563eb); }
.GenUiHomeClose {
    width: 32px; height: 32px; min-width: 32px;
    border: 0; background: transparent; color: inherit;
    font-size: 24px; line-height: 1; cursor: pointer; border-radius: 8px; opacity: .7;
}
.GenUiHomeClose:hover { opacity: 1; background: rgba(148,163,184,.16); }
.GenUiHomeBody { flex: 1; min-height: 0; overflow: auto; padding: 10px; }
@media (max-width: 760px) {
    .GenUiHomeWorkspace { width: calc(100% - 16px); margin: 8px; max-height: none; min-height: 320px; }
    .GenUiHomeBar { align-items: flex-start; flex-wrap: wrap; padding: 10px 12px; }
    .GenUiHomeSpacer { display: none; }
    .GenUiHomeTitleWrap { flex: 1 0 calc(100% - 44px); }
    .GenUiHomeBtn { padding: 5px 9px; }
}

.GenUiToast {
    position: fixed;
    left: 50%; bottom: 28px;
    transform: translateX(-50%) translateY(12px);
    background: #1e293b; color: #fff;
    padding: 11px 18px; border-radius: 10px;
    font-size: 13.5px; max-width: 90vw; text-align: center;
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    opacity: 0; z-index: 2147483600;
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.GenUiToast.GenUiToastShow { opacity: 1; transform: translateX(-50%) translateY(0); }

/* #31 Adım4: pin bar on the in-chat dashboard card (main SPA) */
.AiChat-genui-bar { display: flex; justify-content: flex-end; padding: 2px 2px 6px; }
.AiChat-genui-pin {
    border: 1px solid var(--borderColor, #cbd5e1);
    background: transparent; color: inherit;
    font-size: 12px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
}
.AiChat-genui-pin:hover { border-color: var(--ColorPrimary, #3b82f6); color: var(--ColorPrimary, #2563eb); }
.AiChat-genui-rd { display: block; }

/* #31 HITL: entity_delete impact summary in the approval card */
.AiChat-impact { margin: 8px 0; font-size: 13px; line-height: 1.5; }
.AiChat-impact-head { margin-bottom: 4px; }
.AiChat-impact-warn { color: #b45309; background: #fef3c7; border-radius: 6px; padding: 5px 9px; margin: 4px 0; }
.AiChat-impact-ok { color: #047857; }
.AiChat-impact-list { margin: 4px 0 0; padding-left: 20px; }
.AiChat-impact-list li { margin: 1px 0; }

/* #4/#9: "Panolarım" picker (main app) */
.GenUiPickerOverlay { position: fixed; inset: 0; z-index: 2147482500; background: rgba(15,23,42,.4); display: flex; align-items: center; justify-content: center; }
.GenUiPickerBox { width: 460px; max-width: 94vw; max-height: 80vh; display: flex; flex-direction: column; background: var(--BackgroundColor, #fff); color: var(--Color, #1e293b); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden; }
.GenUiPickerHead { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-weight: 700; border-bottom: 1px solid var(--borderColor, #e2e8f0); }
.GenUiPickerList { overflow: auto; padding: 6px; }
.GenUiPickerRow { display: flex; align-items: center; gap: 6px; padding: 3px; }
.GenUiPickerName { flex: 1; text-align: left; border: 0; background: transparent; color: inherit; font-size: 14px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.GenUiPickerName:hover { background: rgba(59,130,246,.10); }
.GenUiPickerDel { border: 0; background: transparent; cursor: pointer; font-size: 15px; opacity: .6; padding: 6px 10px; border-radius: 8px; }
.GenUiPickerDel:hover { opacity: 1; background: rgba(239,68,68,.12); }

/* #31 Form-fill: field-suggestion review table (main app chat) */
.AiChat-fieldsuggest { margin: 4px 0; }
.AiChat-fieldsuggest-title { font-weight: 600; margin-bottom: 6px; }
.AiChat-fieldsuggest-note { font-size: 12px; opacity: .75; margin-top: 6px; }

/* #11 GenUI print/PDF — isolate the dashboard overlay so only it prints */
@media print {
  body.GenuiPrinting * { visibility: hidden !important; }
  body.GenuiPrinting #__GenUiHomeWorkspace, body.GenuiPrinting #__GenUiHomeWorkspace * { visibility: visible !important; }
  body.GenuiPrinting #__GenUiHomeWorkspace { position: absolute !important; inset: 0 auto auto 0 !important; width: 100% !important; height: auto !important; max-height: none !important; margin: 0 !important; overflow: visible !important; box-shadow: none !important; border: 0 !important; }
  body.GenuiPrinting .GenUiHomeBar .GenUiHomeBtn, body.GenuiPrinting .GenUiHomeClose { display: none !important; }
}

/* N4 parameterized dashboard — the param-prompt form shown before a templated dashboard renders */
.GenUiParamForm { max-width: 420px; margin: 24px auto; padding: 20px 22px; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; background: var(--card, #fff); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.GenUiParamTitle { font-weight: 600; font-size: 15px; margin-bottom: 14px; }
.GenUiParamRow { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.GenUiParamLabel { font-size: 12px; opacity: .8; }
.GenUiParamInput { padding: 8px 10px; border: 1px solid var(--border, #cbd5e1); border-radius: 8px; font-size: 14px; }
.GenUiParamBtn { margin-top: 6px; padding: 9px 18px; border: 0; border-radius: 8px; background: var(--primary, #4f46e5); color: #fff; font-weight: 600; cursor: pointer; }
.GenUiParamBtn:hover { filter: brightness(1.05); }
/* 77-pdf-viewer.css — TÜM sayfaları gösteren PDF görüntüleyici — 2026-08-20
 *
 * Eşlik eden JS: Framework/js/field-pdf.js (lazy) · Framework/js/file-share.js
 *
 * ⛔ İÇ İÇE (nested) CSS KULLANMA. PDF.js'in kendi `pdf_viewer.css`'i 377 satır
 *    iç içe kural içerir ve CSS nesting Safari 17.2+ ister. Bu dosyanın var olma
 *    sebeplerinden biri budur: metin katmanı kuralları burada DÜZ yazılmıştır.
 *    Nesting uygulanmazsa metin katmanı span'leri `color:transparent` ALMAZ ve
 *    kanvasın üstüne SİYAH yazı olarak taşar — yani belge okunamaz hâle gelir.
 *    (Bu kural iOS'ta ölçülebilir bir gerileme yaratır; "daha temiz" diye iç içe
 *    yazmak burada ürünü bozar.)
 */

/* ══ Kap ══════════════════════════════════════════════════════════════════ */
.PdfViewer {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 320px;
    height: 70vh;
    /* iOS'ta adres çubuğu 100vh'yi yanıltır; dvh destekleniyorsa o kazanır. */
    height: 70dvh;
    max-height: 900px;
    border: 1px solid var(--borderColor, #d7dbe0);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: var(--backColor, #fff);
    position: relative;
    contain: layout paint;
}

/* ══ Araç çubuğu ══════════════════════════════════════════════════════════ */
.PdfToolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    padding: 6px 8px;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    border-bottom: 1px solid var(--borderColor, #d7dbe0);
    background: var(--backColor, #f7f8fa);
    min-height: 44px;                    /* dokunma hedefi tabanı */
}

.PdfSpacer { flex: 1 1 auto; min-width: 0; }

.PdfBtn {
    /* ⛔ ÖLÇÜLDÜ (2026-08-20): core.css'te
       `button, input, textarea, select, … { flex: 1 1 0% }` element kuralı var.
       `.PdfBtn` daha özgül OLMASINA rağmen `flex` BİLDİRMEDİĞİ sürece o kural
       kazanır ve her düğme boş alanı paylaşır: 1440px'te düğme genişliği 143px
       ölçüldü, ikonlar birbirinden ~100px koptu ve araç grupları (yakınlık)
       dağıldı. Yeni bir düğme sınıfı eklerken bu satırı YAZMAYI UNUTMA. */
    flex: 0 0 auto;
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* iOS dokunma hedefi tabanı 44px'tir; 32px'lik ikonlu düğme "ıskalanan tık"
       üretir. Görsel kutu 32px, dokunma alanı ::after ile 44px'e genişletilir. */
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--textColor, #2b3138);
    cursor: pointer;
    position: relative;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    font: inherit;
    line-height: 1;
}
.PdfBtn::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
}
.PdfBtn:hover { background: rgba(var(--textRGB, 43, 49, 56), .08); }
.PdfBtn:active { background: rgba(var(--textRGB, 43, 49, 56), .16); }
.PdfBtn:focus-visible {
    outline: 2px solid var(--focusColor, var(--primaryColor, #2f6fed));
    outline-offset: 1px;
}
.PdfBtnPrimary {
    background: var(--primaryColor, #2f6fed);
    color: var(--primaryOnPlan, #fff);   /* 2026-09-02: on plan zeminden (m.js motoru); token yoksa beyaz/#2f6fed */
    padding: 0 12px;
}
.PdfBtnPrimary:hover { filter: brightness(1.08); background: var(--primaryColor, #2f6fed); }
.PdfBtn svg { flex: 0 0 auto; pointer-events: none; }

.PdfPageBox { display: inline-flex; align-items: center; gap: 4px; }
.PdfPageInput {
    flex: 0 0 auto;                      /* aynı core.css `input` kuralı (bkz. .PdfBtn) */
    -webkit-appearance: none;
    appearance: none;
    width: 3.5em;
    min-width: 44px;
    height: 32px;
    padding: 0 6px;
    text-align: center;
    border: 1px solid var(--borderColor, #d7dbe0);
    border-radius: 6px;
    background: var(--backColor, #fff);
    color: var(--textColor, #2b3138);
    /* ⛔ 16px ALTINA DÜŞÜRME: iOS Safari <16px yazı taşıyan bir alana odaklanınca
       sayfayı ZORLA yakınlaştırır ve kullanıcı görüntüleyiciden çıkar. */
    font-size: 16px;
}
.PdfPageTotal { font-size: 13px; opacity: .75; white-space: nowrap; }
.PdfZoomLabel {
    font-size: 12px;
    min-width: 44px;
    text-align: center;
    opacity: .8;
    font-variant-numeric: tabular-nums;
}

/* ══ Gövde (kaydırılan yüzey) ═════════════════════════════════════════════ */
.PdfBody {
    flex: 1 1 auto;
    min-height: 0;                       /* flex öğesinde kaydırma için ŞART */
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;   /* eski iOS momentum kaydırma */
    overscroll-behavior: contain;        /* lastik-bant sayfayı kaydırmasın */
    background: var(--PdfCanvasBg, #eceef1);
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
    text-align: center;
    outline: none;
    /* iOS'ta çift-tık yakınlaştırmasını kapatmadan pinch-zoom'u AÇIK bırakır. */
    touch-action: pan-x pan-y pinch-zoom;
}
.PdfBody:focus-visible { box-shadow: inset 0 0 0 2px var(--focusColor, #2f6fed); }

.PdfStatus { padding: 32px 16px; font-size: 14px; opacity: .7; }

/* ══ Sayfa ════════════════════════════════════════════════════════════════ */
.PdfPage {
    position: relative;
    /* ⛔ 2026-09-03 (TO DO S12) — ONCE `inline-block` IDI: satir-ici oge olarak AKIYORDU,
       yani kap yeterince genisken sayfalar YAN YANA diziliyor ve gövde YATAY kaydiriyordu.
       Musteri bildirimi birebir buydu: "cok sayfali pdf'lerin sayfalari yan yana gosterilmis,
       en altta cikan yatay scroll her cozunurlukte gorunmuyor, fare ile kullanimi zor".
       `block` ile sayfalar ALT ALTA dizilir; `margin: 0 auto` ortalamayi korur ve fare
       tekerlegi dogal olarak sayfadan sayfaya iner. Yakinlastirmada yatay kaydirma HALA
       mumkundur (gövdedeki overflow-x korunuyor) — kaybedilen yetenek YOK. */
    display: block;
    width: fit-content;
    margin: 0 auto 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 4px 12px rgba(0, 0, 0, .07);
    /* Henüz çizilmemiş sayfa BOŞ BEYAZ değil, "yükleniyor" hissi versin. */
    background-image: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
    overflow: hidden;
}
.PdfPage canvas {
    display: block;
    max-width: 100%;
    /* Kanvas henüz çizilmediyse 0×0'dır; kutu yer tutucu boyutunu korur. */
}
.PdfPageLabel {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 1px 6px;
    font-size: 11px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}
.PdfBody:hover .PdfPageLabel { opacity: 1; }
.PdfPageReady { background-image: none; }

/* ══ Metin katmanı (DÜZ — iç içe DEĞİL; bkz. dosya başlığı) ═══════════════ */
.PdfTextLayer {
    position: absolute;
    inset: 0;
    text-align: initial;
    overflow: hidden;
    overflow: clip;                      /* destekleyen tarayıcı bunu alır */
    opacity: 1;
    line-height: 1;
    letter-spacing: normal;
    word-spacing: normal;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    forced-color-adjust: none;
    transform-origin: 0 0;
    caret-color: CanvasText;
    z-index: 0;
    --min-font-size: 1;
    --total-scale-factor: 1;             /* JS her çizimde günceller */
    --scale-round-x: 1px;
    --scale-round-y: 1px;
    --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
    --min-font-size-inv: calc(1 / var(--min-font-size));
}
/* ⛔ Bu kural UYGULANMAZSA metin kanvasın üstüne siyah yazı olarak basılır. */
.PdfTextLayer span,
.PdfTextLayer br {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
    -webkit-user-select: text;
    user-select: text;
}
.PdfTextLayer > :not(.markedContent),
.PdfTextLayer .markedContent span:not(.markedContent) {
    z-index: 1;
    --font-height: 0;
    font-size: calc(var(--text-scale-factor) * var(--font-height));
    --scale-x: 1;
    --rotate: 0deg;
    transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}
.PdfTextLayer .markedContent { display: contents; }
.PdfTextLayer span[role="img"] { -webkit-user-select: none; user-select: none; cursor: default; }
.PdfTextLayer .endOfContent {
    display: block;
    position: absolute;
    inset: 100% 0 0;
    z-index: 0;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}
.PdfTextLayer.selecting .endOfContent { top: 0; }
.PdfTextLayer ::selection { background: rgba(47, 111, 237, .28); }

/* ══ Geri düşüş (PDF.js yüklenemedi / belge açılamadı) ════════════════════ */
.PdfFallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    text-align: center;
}
.PdfFallbackTitle { font-size: 15px; font-weight: 600; color: var(--textColor, #2b3138); }
.PdfFallbackText { font-size: 13px; opacity: .75; max-width: 42ch; line-height: 1.5; }
.PdfFallbackActions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.PdfFallbackActions .PdfBtn { height: 40px; padding: 0 16px; border-color: var(--borderColor, #d7dbe0); }

.PdfHost { display: block; width: 100%; }
/* Geri düşüş iframe'i — YALNIZ iOS DIŞINDA basılır (bkz. file-share.js:_pdfFallback) */
.PdfFallbackFrame {
    display: block;
    width: 100%;
    height: 60vh;
    height: 60dvh;
    min-height: 320px;
    border: 1px solid var(--borderColor, #d7dbe0);
    border-radius: var(--radius-md, 8px);
    margin-top: 8px;
    background: #fff;
}

/* ⛔ 2026-09-06 (TO DO S12) — "Tam ekran" katmani (.PdfExpanded / body.PdfExpandedOpen)
   KULLANICI KARARIYLA kaldirildi; dugmesi de `field-pdf.js`'ten cikti. Kural burada
   BIRAKILMADI cunku tuketicisi kalmadi (olu kural = bakim yuku). Geri istenirse
   JS'teki `toggleExpand` ile BIRLIKTE geri gelir. */

/* ══ Mobil ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .PdfViewer { height: 60vh; height: 60dvh; min-height: 280px; }
    .PdfToolbar { gap: 2px; padding: 4px 6px; }
    /* Dar ekranda zoom yüzdesi ve sayfa toplamı ikincil bilgidir; düğmeler
       ULAŞILABİLİR kalsın diye ONLAR gizlenir — hiçbir EYLEM gizlenmez. */
    .PdfZoomLabel { display: none; }
}

/* ══ Koyu tema ════════════════════════════════════════════════════════════ */
.dark-theme .PdfViewer { background: var(--backColor, #1b1f24); }
.dark-theme .PdfBody { --PdfCanvasBg: #14171b; }
.dark-theme .PdfToolbar { background: var(--backColor, #22272d); }
.dark-theme .PdfBtn { color: var(--textColor, #e6e9ec); }
.dark-theme .PdfPage { box-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 4px 14px rgba(0, 0, 0, .4); }

/* ══ Hareket azaltma / yazdırma ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .PdfPageLabel { transition: none; }
}
@media print {
    .PdfToolbar { display: none; }
    .PdfViewer { height: auto; max-height: none; border: 0; }
    .PdfBody { overflow: visible; height: auto; background: #fff; }
    .PdfPage { box-shadow: none; page-break-after: always; margin: 0; }
}

/* ══ Kayit alani icindeki gorunturleyici ══════════════════════════════════ */
/* field-edit.js `_mountPdfPreview` ve field-media.js PDF dali bu kabi acar. */
.PdfFieldHost { display: block; width: 100%; margin: 6px 0; }
.PdfFieldHost .PdfViewer { height: 62vh; height: 62dvh; min-height: 300px; }
.PreviewField .PdfFieldHost .PdfViewer { height: 78vh; height: 78dvh; }
@media (max-width: 640px) {
    .PdfFieldHost .PdfViewer,
    .PreviewField .PdfFieldHost .PdfViewer { height: 58vh; height: 58dvh; min-height: 260px; }
}

/* ══ Dosya alani teslim dugmeleri ═════════════════════════════════════════ */
/* Paylas kipinde ikincil INDIRME dugmesi (361-ui §1: erisim yolu kapanmaz).
   Daha soluk ama TAM dokunma hedefiyle durur — "ikincil" gorsel bir siradir,
   dokunulabilirlik indirimi DEGILDIR. */
.FieldFileDownloadAlt { opacity: .55; }
.FieldFileDownloadAlt:hover,
.FieldFileDownloadAlt:focus-visible { opacity: 1; }
.FieldFileShare,
.FieldFileDownloadAlt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    cursor: pointer;
    touch-action: manipulation;
    position: relative;
}
.FieldFileShare::after,
.FieldFileDownloadAlt::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 44px; height: 44px;          /* iOS dokunma hedefi tabani */
    transform: translate(-50%, -50%);
}
/* 78-pdf-signature.css — PDF imza görünürlüğü — 2026-08-20
 *
 * Eşlik eden JS: Framework/js/field-pdf-signature.js
 *
 * ⛔ İÇ İÇE (nested) CSS KULLANMA — CSS nesting Safari 17.2 ister ve bu depoda
 *    ölçülmüş bir gerileme sınıfıdır (bkz. 77-pdf-viewer.css başlığı).
 * ⛔ `.PdfSigAct` bir <button>'dır: core.css'teki `button {flex:1 1 0%}` element
 *    kuralı sızar ve düğmeyi şişirir. `flex` BİLDİRİLMEK ZORUNDA (77'de ölçüldü:
 *    143px → 44px).
 */

/* ══ Bant ═════════════════════════════════════════════════════════════════ */
.PdfSigBand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    border-bottom: 1px solid var(--borderColor, #d7dbe0);
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}
.PdfSigBand[role="button"] { cursor: pointer; }
.PdfSigBand[role="button"]:focus-visible {
    outline: 2px solid var(--focusColor, var(--primaryColor, #2f6fed));
    outline-offset: -2px;
}

.PdfSigOk       { background: #e8f5ee; color: #14663c; }
.PdfSigBad      { background: #fdecec; color: #9b1c1c; }
.PdfSigUnk      { background: #f2f4f6; color: #4b5563; }
.PdfSigUnsigned { background: #f7f8fa; color: #4b5563; font-weight: 500; }
.PdfSigLoading  { background: #f2f4f6; color: #6b7280; font-weight: 400; }

/* ══ Bant içi eylemler ════════════════════════════════════════════════════ */
.PdfSigActions { margin-left: auto; display: inline-flex; gap: 6px; flex: 0 0 auto; }
.PdfSigAct {
    flex: 0 0 auto;                      /* ⛔ core.css button{flex:1 1 0%} sizintisi */
    -webkit-appearance: none;
    appearance: none;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    position: relative;
}
/* iOS dokunma hedefi tabanı 44px — görsel kutu küçük kalır, alan büyür. */
.PdfSigAct::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 100%; height: 44px;
    min-width: 44px;
    transform: translate(-50%, -50%);
}
.PdfSigAct:hover { background: rgba(0, 0, 0, .06); }
.PdfSigActPrimary { background: var(--primaryColor, #2f6fed); color: var(--primaryOnPlan, #fff); border-color: transparent; }   /* 2026-09-02: on plan zeminden (m.js motoru) */
.PdfSigActPrimary:hover { filter: brightness(1.08); background: var(--primaryColor, #2f6fed); }

/* ══ Detay paneli ═════════════════════════════════════════════════════════ */
.PdfSigPanel {
    flex: 0 0 auto;
    max-height: 42vh;
    max-height: 42dvh;                   /* iOS adres çubuğu */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px;
    background: var(--backColor, #fff);
    border-bottom: 1px solid var(--borderColor, #d7dbe0);
    font-size: 13px;
}
.PdfSigRow {
    padding: 8px 0;
    border-bottom: 1px dashed var(--borderColor, #e3e6ea);
}
.PdfSigRow:last-of-type { border-bottom: 0; }
.PdfSigWho  { font-weight: 600; color: var(--textColor, #2b3138); }
.PdfSigMeta { font-size: 12px; opacity: .85; margin-top: 2px; }
.PdfSigCert { font-size: 11px; opacity: .7; margin-top: 2px; word-break: break-all; }
.PdfSigMuted { font-style: italic; opacity: .6; }
.PdfSigLtv  { color: #14663c; font-weight: 600; }
.PdfSigVerifiedAt { margin-top: 8px; font-size: 11px; opacity: .6; }

/* ══ Sayfa üstü imza kutusu ═══════════════════════════════════════════════ */
/* ⛔ pointer-events:none — PadesEmbedder'ın bastığı görsel imza katmanını
   ÖRTMEZ, yalnız kenarlık çizer. */
.PdfSigBox {
    position: absolute;
    border: 2px solid #14663c;
    border-radius: 3px;
    background: transparent;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset;
}
.PdfSigBoxEmpty { border-style: dashed; border-color: #9ca3af; }

/* ══ Mobil ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .PdfSigBand { font-size: 12px; gap: 6px; flex-wrap: wrap; }
    .PdfSigActions { margin-left: 0; width: 100%; }
    .PdfSigPanel { max-height: 50vh; max-height: 50dvh; }
}

/* ══ Koyu tema ════════════════════════════════════════════════════════════ */
.dark-theme .PdfSigOk       { background: #10301f; color: #6ee7a8; }
.dark-theme .PdfSigBad      { background: #3a1414; color: #fca5a5; }
.dark-theme .PdfSigUnk      { background: #22272d; color: #cbd5e1; }
.dark-theme .PdfSigUnsigned { background: #1b1f24; color: #cbd5e1; }
.dark-theme .PdfSigLoading  { background: #22272d; color: #9ca3af; }
.dark-theme .PdfSigPanel    { background: var(--backColor, #1b1f24); }
.dark-theme .PdfSigAct:hover { background: rgba(255, 255, 255, .08); }

@media print {
    .PdfSigActions { display: none; }
    .PdfSigBand { border: 1px solid #999; }
    .PdfSigBox { border-color: #333; }
}

/* ══ İmza kapsam uyarısı ═══════════════════════════════════════════════════
   ⛔ SABİT RENK YAZILMAZ. ÖLÇÜLDÜ (2026-08-20): `--backColor` koyu temada
   `#1a1d23`'e döner ve sabit koyu kırmızı orada 1.82:1 eder (AA 4.5 ister).
   `.PdfSigMeta` ayrıca `opacity:.85` taşır — efektif renk zemine karışır,
   yani hesap kompozit ÜZERİNDEN yapılır. Seçilen değerler (opacity dahil):
     açık tema  #a1160f üzerinde beyaz  → 6.08:1
     koyu tema  #ff9b93 üzerinde #1a1d23 → 6.37:1
   Uyarı ayrıca "⚠" + kalınlıkla taşınır: renk TEK sinyal değildir. */
.PdfSigRow { --pdfsig-warn: #a1160f; }
@media (prefers-color-scheme: dark) {
    .PdfSigRow { --pdfsig-warn: #ff9b93; }
}
.PdfSigWarn { color: var(--pdfsig-warn); font-weight: 600; }
/* ============================================================================
   79-ai-gorunurluk.css — AI GÖRÜNÜRLÜK KATMANI (W1)
   AI Varlık düğmesi nabzı (#35) + AI SidePanel'i (#9) + kanıt rozetleri.

   KURALLAR (bu depoda ölçülmüş):
   · Sabit renk YOK — hepsi token. Sabit renk koyu temada ya görünmez ya parlar.
   · Punto PX ile yazılır: bu platformda html{font-size:11px}, yani 1rem = 11px
     ve 12px erişilebilirlik eşiğinin ALTINA düşer.
   · Dokunma hedefi >= 44px.
   · Kaydırılabilir şeritte `justify-content:center` YASAK — taşmayı iki yana
     dağıtır ve sol yarı ULAŞILAMAZ olur.
   · Animasyon `prefers-reduced-motion` altında KENDİLİĞİNDEN kapanır; JS ile
     ayrıca kapatmayız (kullanıcının sistem tercihi TEK yerde okunmalı).
   ============================================================================ */

/* ── #35 NABIZ — AI bir iş koşarken düğme kısa bir halo atar ───────────────── */
.UserToolButton.AiPresencePulse {
    position: relative;
}
.UserToolButton.AiPresencePulse::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    pointer-events: none;                 /* halo tıklamayı YUTMAZ */
    border: 2px solid var(--primaryAA, #007cc2);
    opacity: 0;
    animation: AiPresenceHalo 1.3s ease-out 2;
}
@keyframes AiPresenceHalo {
    0%   { transform: scale(.72); opacity: .55; }
    70%  { transform: scale(1.18); opacity: 0; }
    100% { transform: scale(1.18); opacity: 0; }
}
/* Hareket azaltma: halo yerine SESSİZ ama görünür bir kenarlık. Bilgiyi
   kaldırmıyoruz — yalnız hareketi kaldırıyoruz. */
@media (prefers-reduced-motion: reduce) {
    .UserToolButton.AiPresencePulse::after {
        animation: none;
        opacity: .85;
        transform: none;
    }
}

/* ── PANEL KABUĞU ─────────────────────────────────────────────────────────── */
.AiP {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;                        /* flex çocuğun kaydırabilmesi için ŞART */
    color: var(--textColor);
}

.AiP_Tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
    padding: 6px 8px 0;
    border-bottom: 1px solid var(--borderColor, #d7dbe0);
    overflow-x: auto;                     /* dar panelde sekmeler ULAŞILABİLİR kalır */
    scrollbar-width: none;                /* çubuk gizlenir, yetenek DURUR */
}
.AiP_Tabs::-webkit-scrollbar { display: none; }

.AiP_Tab {
    flex: 0 0 auto;
    min-height: 44px;                     /* dokunma hedefi */
    padding: 0 14px;
    border: 0;
    background: transparent;
    /* #45v2 — SECILI OLMAYAN SEKME. `--labelColor` bu zeminde 3.01:1 veriyordu
       (olculdu 2026-09-07, canli satis, iki temada da). Sonuk kalir ama OKUNUR
       olur; secili/secili-degil ayrimi ZATEN uc kanalda: renk (--primaryAA),
       alt kenarlik ve font-weight. Yani bilgi KAYBOLMUYOR. */
    color: var(--textColor);
    opacity: .86;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.AiP_Tab:hover { color: var(--textColor); opacity: 1; }
.AiP_Tab_Sel {
    opacity: 1;                           /* secili sekme SONUMLENMEZ */
    color: var(--primaryAA, #007cc2);
    border-bottom-color: var(--primaryAA, #007cc2);
    font-weight: 600;
}
.AiP_Tab:focus-visible { outline: 2px solid var(--primaryAA, #007cc2); outline-offset: -2px; }

/* ⛔ KOYU TEMADA SECILI SEKME — OLCULDU 2026-09-07 (canli satis, koyu panel):
     --primaryAA  3.01 ⛔   |   --labelColor 6.44 ✅   |   --textColor 10.29 ✅
   `--primaryAA` ACIK temada GECIYOR (karnede bulgu yok), yalniz koyu temada
   kaliyor => override SADECE koyu temaya yazilir, acik tema DEGISMEZ.
   Alt kenarlik da ayni renge alinir: vurgu tek parca okunmali.
   (Ayni kural `zz-copilot.css`'te de vardi ama o dosya CANLIDA BAYAT ve kural
    hic servis edilmiyordu; sahiplik AI gorunurluk katmanina TASINDI.) */
html.dark-theme .AiP_Tab_Sel {
    color: var(--labelColor, #8ab4f8);
    border-bottom-color: var(--labelColor, #8ab4f8);
}

.AiP_Body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 12px 16px;
}

.AiP_SectionTitle {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--textColor);                          /* #45v2: --labelColor 3.01:1 idi (olculdu 2026-09-07, canli) */
    opacity: .86;
    margin: 10px 2px 6px;
}

/* ── SATIR (AiActionLog kaydı) ────────────────────────────────────────────── */
.AiP_List { display: flex; flex-direction: column; gap: 6px; }

.AiP_Row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--borderColor, #d7dbe0);
    border-radius: 8px;
    /* #45 — `var(--backColor)` KOYU TEMADA DONMUYOR (olculdu: rgb(240,241,246)
       her iki temada da) ⇒ acik zemin + acik metin = 1.02:1, metin GORUNMEZ.
       Notr yari saydam tint her tabanda DOGRU YONDE calisir ve tema tanimi
       gerektirmez. */
    background: rgba(127, 127, 127, .08);
}
.AiP_RowMain { flex: 1 1 auto; min-width: 0; }   /* min-width:0 → uzun başlık kabı ŞİŞİRMEZ */

/* AH-041 — AJAN AVATARI. Ton ajan ADINDAN türetilir (aynı ajan hep aynı renk);
   ön plan JS'te parlaklığa göre SEÇİLİR — burada sabit renk YOK, yoksa açık tonda
   okunmaz olurdu. `flex:0 0 auto` → uzun başlık avatarı EZMEZ. */
.AiP_Avatar {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; letter-spacing: .2px;
    user-select: none;
}
/* Kullanılan araçlar — satırın ÜÇÜNCÜ katı; kırpmak yerine SARAR (bilgi saklanmaz). */
/* #45 — CIFT SONUMLEME KALDIRILDI: burada hem acik `--labelColor` hem `.8`
   opaklik vardi ve olcum **2.81:1** verdi (11px). Kayitli ders: opaklikla
   sonumlenen metinde AA bazen MATEMATIKSEL olarak ulasilamaz — once sonumleme
   sayisini azalt, sonra olc. */
.AiP_RowTools {
    font-size: 12px;                  /* 11px -> 12px: erisilebilirlik esigi */
    color: var(--textColor);
    opacity: .8;
    margin-top: 3px;
    overflow-wrap: anywhere;
}
.AiP_RowTitle {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;                      /* kırpmak yerine SAR */
}
.AiP_RowMeta {
    font-size: 12px;
    color: var(--textColor);                       /* #45 — 2.81:1 idi */
    opacity: .82;
    margin-top: 2px;
    overflow-wrap: anywhere;
}
.AiP_RowSide {
    /* Artik UC oge tasiyabilir (is turu cipi · saat · kosullu kanit rozeti).
       `flex:0 1 auto` + `max-width` ana sutunu SIFIRA indirmesini engeller;
       uzun/bilinmeyen bir is turu geldiginde cip SARAR — kirpilmaz, ellipsis
       KOYULMAZ (kayitli kural: care font kucultmek ya da ellipsis DEGIL). */
    /* `0 0 auto`: cip TAM genisligini alir (bolunmemesi icin ON KOSUL).
       Ana sutun `flex:1 1 auto` + `min-width:0` oldugu icin kalani alir ve
       baslik SARAR — yani daralma bilgi KAYBETTIRMEZ. */
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
/* #45 — zaman damgasi 2.81:1 veriyordu; ikincil kalir ama OKUNUR olur. */
.AiP_Time { font-size: 12px; color: var(--textColor); opacity: .82; }

/* ── KANIT ROZETİ — İddia / Doğrulandı / Kanıtsız ─────────────────────────── */
/* Renk TEK BAŞINA anlam taşımaz (renk körlüğü): etiket metni de yazılır. */
.AiP_Evidence {
    font-size: 12px;                  /* 11px -> 12px: erisilebilirlik esigi */
    font-weight: 600;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}
/* #45 — METIN OKUNUR, SINYAL KENARLIKTA. Olculdu: `_claim` metni **1.72:1**
   veriyordu (11px, IKI temada da) cunku `--warningColor` bir SINYAL rengidir,
   metin rengi DEGIL. Bu kuralin kendi yorumu zaten "renk tek basina anlam
   tasimaz, etiket metni de yazilir" diyor ⇒ anlami METIN tasiyor. Metni okunur
   token'a aliyoruz; semantik renk KENARLIK ve ZEMINDE kaliyor, yani sinyal
   KAYBOLMUYOR. Sabit hex yazilmaz — tema donunce renk de doner. */
.AiP_Evidence_ok {
    color: var(--textColor);
    border-color: var(--successColor, #0f7b3f);
    background: rgba(15, 123, 63, .10);
}
.AiP_Evidence_claim {
    color: var(--textColor);
    border-color: var(--warningColor, #8a5a00);
    background: rgba(138, 90, 0, .10);
}
/* ⛔ `.AiP_Evidence_none` KALDIRILDI (2026-09-07). Rozet artik yalniz AYIRT
   EDICI iki durumda cizilir; "Kanitsiz" kovasi 116/116 kayitta cikiyordu, yani
   SIFIR bilgi tasiyip tam sutun harciyor ve dogru calisan otomasyonu suclu
   gosteriyordu. Kaldirilan bilgi silinmedi: `.AiP_Ozet` satirinda OLCULMUS
   toplam olarak verilir. Olu CSS birakilmaz (bakim yuku). */

/* ── CANLI AKIŞ (SSE ai:activity) ─────────────────────────────────────────── */
.AiP_Live { display: flex; flex-direction: column; gap: 4px; }
.AiP_LiveRow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12px;
    background: rgba(0, 124, 194, .06);
}
.AiP_LiveMine { box-shadow: inset 2px 0 0 var(--primaryAA, #007cc2); }
.AiP_LiveDot {
    flex: 0 0 auto;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--labelColor, var(--textColor));
}
.AiP_Live_running .AiP_LiveDot { background: var(--primaryAA, #007cc2); animation: AiPBlink 1.1s ease-in-out infinite; }
.AiP_Live_completed .AiP_LiveDot { background: var(--successColor, #0f7b3f); }
.AiP_Live_failed .AiP_LiveDot { background: #b42318; }
@keyframes AiPBlink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
    .AiP_Live_running .AiP_LiveDot { animation: none; }
}
.AiP_LiveName { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.AiP_LiveState { flex: 0 0 auto; color: var(--textColor); opacity: .84; }
.AiP_LiveErr {
    flex: 1 1 100%;
    color: #b42318;
    font-size: 12px;
    overflow-wrap: anywhere;
}

/* ── BOŞ DURUM — üç ayrı sınıf, üç ayrı cümle ─────────────────────────────── */
.AiP_Empty { padding: 26px 16px; text-align: center; }
.AiP_EmptyTitle { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
/* #45 — bos durum metni 3.32:1 olculdu (12px, mobil). Sonumleme korunur,
   okunur seviyeye cekilir; renk token'a baglanir (tema ile doner). */
.AiP_EmptyText {
    font-size: 12px;
    line-height: 1.5;
    /* ⛔ ONCEKI YAMAM YALNIZ YORUM EKLEDI (islevsel degisiklik YOK) ve bulgu yine de
       kayboldu ⇒ olcum KARARSIZDI (Onaylar sekmesinin icerigi kosuya gore degisiyor).
       Kararsiz bir bulguyu "duzeldi" saymak sahte yesildir; kural KOSULDAN BAGIMSIZ
       saglamlastirilir: `--labelColor` acik temada 6.27 verse de tintli bir kart
       uzerinde 3.32'ye dusuyordu. `--textColor` + olculu sonumleme her zeminde gecer. */
    color: var(--textColor);
    opacity: .84;
    max-width: 34em;
    margin: 0 auto;
}
.AiP_Empty_hata .AiP_EmptyTitle { color: #b42318; }

.AiP_Loading { display: flex; justify-content: center; padding: 34px 0; }

/* ── SOHBET SEKMESİ ───────────────────────────────────────────────────────── */
.AiP_ChatBox { display: flex; flex-direction: column; gap: 10px; padding: 14px 4px; }
.AiP_ChatHint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--textColor);                          /* #45v2: --labelColor 3.01:1 idi (olculdu 2026-09-07, canli) */
    opacity: .86;
}
.AiP_Btn {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid var(--borderColor, #d7dbe0);
    background: rgba(127, 127, 127, .08);   /* #45 — `--backColor` koyu temada donmuyor */
    color: var(--textColor);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.AiP_Btn:hover { border-color: var(--primaryAA, #007cc2); }
.AiP_Btn:focus-visible { outline: 2px solid var(--primaryAA, #007cc2); outline-offset: 2px; }
.AiP_BtnPrimary {
    background: var(--primaryAA, #007cc2);
    border-color: var(--primaryAA, #007cc2);
    color: #fff;                          /* birincil düğmenin kendi paleti */
}

/* ── #36 BILDIRIM PANELINDE AI KARTI ──────────────────────────────────────── */
/* AI kaynakli bildirim gorsel olarak ayirt edilir. Renk TEK BASINA anlam
   tasimaz (renk korlugu): kartta ayrica "AI" kaynak cipi ve "AI kanıtı"
   metni durur — isaret + metin birlikte. */
.NP_Card_AI {
    border-left: 3px solid var(--primaryAA, #007cc2);
}
.NP_Card_AI .NP_CardSource {
    color: var(--primaryAA, #007cc2);
    border-color: var(--primaryAA, #007cc2);
}
.NP_AiEvidence {
    display: inline-flex;
    align-items: center;
    min-height: 44px;                 /* dokunma hedefi */
    padding: 0 10px;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primaryAA, #007cc2);
    cursor: pointer;
    border-radius: 6px;
    -webkit-user-select: none;
    user-select: none;
}
.NP_AiEvidence::before {
    content: "";
    width: 12px; height: 12px;
    margin-right: 6px;
    flex: 0 0 auto;
    background: currentColor;
    /* uc kollu yildiz — ✦ isareti EMOJI DEGIL maske (ikonografi kurali: SVG/maske) */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.2 6.4L21 11l-6.8 2.6L12 20l-2.2-6.4L3 11l6.8-2.6z'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.2 6.4L21 11l-6.8 2.6L12 20l-2.2-6.4L3 11l6.8-2.6z'/></svg>") center/contain no-repeat;
}
.NP_AiEvidence:hover { background: rgba(0, 124, 194, .10); }
.NP_AiEvidence:focus-visible { outline: 2px solid var(--primaryAA, #007cc2); outline-offset: 2px; }

/* ── SidePanel BAGLAMI — kalibi bozma, KATIL ────────────────────────────────
   Olculdu (canli, 2026-09-05): `.SidePanel .NP_Card{border-left:0}` (0,2,0)
   benim `.NP_Card_AI` (0,1,0) kuralimi YENIYOR; o baglamda sol serit
   `::before` ile cizilir. Bu yuzden AI isareti de AYNI mekanizmayla verilir
   — border dayatmak SidePanel icinde sessizce etkisiz kalirdi. */
.SidePanel .NP_Card_AI::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primaryAA, #007cc2);
}
/* Okunmus AI karti da AI olarak kalir — kaynak isareti okunma durumundan
   BAGIMSIZDIR (okunmamis seridi `:not(.read)` ile ayrica cizilir). */
.SidePanel .NP_Card_AI.read::before { opacity: .55; }

/* ── W2 #6 — ALAN PROVENANS ROZETI (AI bu alani yazdi) ─────────────────────
   Tokenlar CANLIDA OLCULEREK secildi: --primaryAA / --borderColor / --textColor
   TANIMLI; --primaryColor / --primaryColorRGB / --dangerColor TANIMSIZDIR ve
   kullanilmaz (hayalet token sessizce yedege duser, yedeksiz kural OLUR).
   --border1 bir SHORTHAND'dir (solid 1px ...), renk olarak KULLANILMAZ. */
.AiProvBadge {
    display: inline-block;
    margin-left: 5px;
    font-size: 11px;
    line-height: 1;
    color: var(--primaryAA, #007cc2);
    cursor: pointer;
    opacity: .78;
    vertical-align: middle;
    /* dokunma hedefi: gorsel 11px ama etkin alan 24px (mobil erisilebilirlik) */
    padding: 6px;
    margin-top: -6px;
    margin-bottom: -6px;
}
.AiProvBadge:hover,
.AiProvBadge:focus-visible { opacity: 1; outline: none; }
.AiProvBadge:focus-visible { text-decoration: underline; }

.AiProvPop {
    position: fixed;
    z-index: 1000002;              /* kaplama merdiveni: panel(1000000) < ayar < popover */
    min-width: 240px;
    max-width: 380px;
    padding: 10px 12px;
    border-radius: 8px;
    /* #45 — ayni sinif: opak acik zemin koyu temada metni yutuyordu.
       Balon KAPALI bir yuzey oldugu icin panel zeminini devralip uzerine
       hafif bir tint koyar. */
    background: var(--singleItemBackColor, transparent);
    backdrop-filter: none;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .16);
    border: 1px solid var(--borderColor, #d7dbe0);
    font-size: 12px;
    color: var(--textColor, #303030);
}
.AiProvPopHead {
    font-weight: 600;
    color: var(--primaryAA, #007cc2);
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--borderColor, #d7dbe0);
}
.AiProvPopRow { display: flex; gap: 8px; padding: 2px 0; }
.AiProvPopRow > b {
    flex: 0 0 62px;
    font-weight: 500;
    opacity: .62;
}
.AiProvPopRow > span {
    flex: 1 1 auto;
    min-width: 0;                  /* esnek ogeyi min-content altina indirir; yoksa tasar */
    word-break: break-word;
}
.AiProvPopWhy > span { font-style: italic; }

/* ── W2 #14 — KAYDIN AI ZAMAN CIZELGESI ────────────────────────────────── */
.AiProvPopMore {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid var(--borderColor, #d7dbe0);
    color: var(--primaryAA, #007cc2);
    cursor: pointer;
    font-weight: 500;
}
.AiProvPopMore:hover { text-decoration: underline; }

.AiP_RecordMode { padding: 4px 0; }
.AiP_TlHead {
    font-weight: 600;
    color: var(--textColor);                          /* #45v2: --labelColor 3.01:1 idi (olculdu 2026-09-07, canli) */
    opacity: .9;
    padding: 6px 12px 8px;
}
.AiP_TlWarn {
    margin: 0 12px 8px;
    padding: 6px 8px;
    border-radius: 6px;
    /* #45 — zemin notr tint; metin `--warningColor` (#ff9800) OLCULDU: acik
       zeminde 1.91:1 ⇒ METIN olarak AA DEGIL. Uyari SINYALI kenarlikta kalir,
       metin okunur token'a alinir (rozetlerde uygulanan ayni karar). */
    background: rgba(127, 127, 127, .08);
    border-left: 3px solid var(--warningColor, #ff9800);
    color: var(--textColor);
    font-size: 11px;
}
/* Alan yazmasi satiri: eylem satirindan AYIRT EDILEBILIR olmali — yoksa
   kullanici "AI kaydi guncelledi" ile "AI su alani yazdi" ayrimini kaybeder. */
.AiP_RowField { border-left: 2px solid var(--primaryAA, #007cc2); }
.AiP_TlVerb { opacity: .6; font-weight: 400; }
.AiP_TlOld { opacity: .55; text-decoration: line-through; }
.AiP_TlNew { color: var(--textColor, #303030); font-weight: 500; }
.AiP_TlWhy {
    margin-top: 3px;
    font-size: 11px;
    font-style: italic;
    opacity: .72;
    /* uzun gerekce satiri kirpilmaz, SARAR — bilgi gizlemek yasak */
    word-break: break-word;
}

/* ── W2 #53 — LISTE/KART HUCRESINDE AI IZI ──────────────────────────────── */
.AiListMark {
    display: inline-block;
    margin-right: 5px;
    font-size: 10px;
    line-height: 1;
    color: var(--primaryAA, #007cc2);
    opacity: .72;
    vertical-align: middle;
}
.AiListMark:hover { opacity: 1; }

/* ── W2 #43 — ALAN DUZEYI GERI ALMA ─────────────────────────────────────────
   Uc durum GORSEL OLARAK ayrilir: normal / onay bekliyor / sonuc.
   Onay durumu UYARI rengindedir cunku bir sonraki tik VERIYI DEGISTIRIR. */
.AiProvPopUndo {
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--borderColor, #d7dbe0);
    background: rgba(127, 127, 127, .08);          /* #45 — koyu temada opak acik zemin */
    color: var(--textColor, #303030);
    cursor: pointer;
    text-align: center;
    font-weight: 500;
    /* dokunma hedefi: 44px (mobil erisilebilirlik) */
    min-height: 32px;
    line-height: 20px;
}
.AiProvPopUndo:hover { border-color: var(--primaryAA, #007cc2); }
.AiProvPopUndoConfirm {
    border-color: var(--warningColor, #ff9800);
    color: var(--warningColor, #ff9800);
    font-weight: 600;
}
.AiProvPopUndoDone {
    border-color: var(--successColor, #46d74c);
    color: var(--successColor, #46d74c);
    cursor: default;
}
.AiProvPopUndoFail {
    border-color: #b42318;
    color: #b42318;
    cursor: default;
}

/* ══════════════════════════════════════════════════════════════════════════
   v2 (2026-09-07) — SATIR ANATOMISI: kod jetonu · is turu cipi · durust ozet

   OLCULDU (canli sales): panelin gordugu 116 kaydin 116'si ayni kanit rozetini
   ("Kanitsiz") gosteriyordu => %100 tekrar eden bir gosterge BILGI TASIMAZ.
   Gercek ayrisan sinyal `ActionKind`'di (skorlama 55 · siniflandirma 40 ·
   oneri 8 · radar 8 · hesaplama 2 · nobet 2) ve meta satirinda DUZ METINDI.
   ⇒ Sinyal cipe cikarildi, rozet kosullu hale geldi, toplam ozete tasindi.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── DURUST OZET — rozetten kaldirilan bilgi BURADA yasar (silinmedi) ────── */
.AiP_Ozet {
    display: flex;
    flex-wrap: wrap;                      /* dar panelde SARAR: kaydirma/kirpma YOK */
    align-items: baseline;
    gap: 2px 6px;
    margin: 0 2px 8px;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(127, 127, 127, .08); /* notr tint: her iki temada dogru yonde */
    border-left: 3px solid var(--primaryAA, #007cc2);
    font-size: 12px;
    line-height: 1.45;
    color: var(--textColor);
}
.AiP_Ozet b { font-weight: 700; }
.AiP_Ozet i { font-style: normal; opacity: .45; }   /* ayrac: sesi kisik */

/* ── AKIS KODU JETONU ([SLS-E1]) ─────────────────────────────────────────────
   Izlenebilirlik tasir (destek bu kodla arar) ama basligin agirligini calmaz.
   Tam baslik `title=` ipucunda durur => bilgi TASINIR, silinmez. */
.AiP_Kod {
    display: inline-block;
    margin-right: 6px;
    padding: 0 5px;
    border-radius: 4px;
    border: 1px solid var(--borderColor, #d7dbe0);
    background: rgba(127, 127, 127, .10);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    opacity: .72;
    white-space: nowrap;
}

/* ── IS TURU CIPI — her satirda duran, GERCEKTEN ayrisan sinyal ─────────────
   Renk TEK BASINA anlam tasimaz (renk korlugu): etiket metni HER ZAMAN yazilir.
   Metin okunur token'da, sinyal kenarlik+zeminde (bu dosyada olculmus desen). */
.AiP_Tur {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    padding: 2px 8px;
    border-radius: 999px;
    text-align: right;
    /* ⛔ KELIME ORTASINDAN BOLUNME YASAK — kare gosterdi: `overflow-wrap:anywhere`
       + dar sag sutun "Sınıflandırma"yi "Sınıfland|ırma" diye boluyordu. Karne
       bunu GOREMEZ (metin kirpilmiyor, sariyor). Care YER ACMAK: cip bolunmez,
       sag sutun icerigi kadar yer alir, baslik kalan yerde SARAR. */
    white-space: nowrap;
    color: var(--textColor);
    border: 1px solid rgba(var(--aiTurRGB, 127, 127, 127), .34);
    background: rgba(var(--aiTurRGB, 127, 127, 127), .10);
}
.AiP_Tur_skor   { --aiTurRGB: 0, 124, 194; }
.AiP_Tur_sinif  { --aiTurRGB: 124, 58, 237; }
.AiP_Tur_oneri  { --aiTurRGB: 180, 120, 0; }
.AiP_Tur_radar  { --aiTurRGB: 13, 148, 136; }
.AiP_Tur_hesap  { --aiTurRGB: 67, 56, 202; }
.AiP_Tur_nobet  { --aiTurRGB: 15, 123, 63; }
.AiP_Tur_ozet   { --aiTurRGB: 100, 116, 139; }
.AiP_Tur_tahmin { --aiTurRGB: 190, 24, 93; }
.AiP_Tur_yazma  { --aiTurRGB: 0, 124, 194; }
.AiP_Tur_onay   { --aiTurRGB: 15, 123, 63; }
/* `_diger` BILEREK renksizdir: bilinmeyen turu renklendirmek uydurma bir anlam
   yukler. Etiket yine de GORUNUR — bilinmeyeni gizlemek bilgiyi yok eder. */

/* ── AVATAR: ajan adi yoksa da SOL SUTUN DOLU kalir (satir hizasi korunur) ── */
.AiP_AvatarBos {
    background: rgba(127, 127, 127, .14);
    position: relative;
}
.AiP_AvatarBos::before {
    content: "";
    position: absolute;
    inset: 6px;
    background: var(--labelColor, var(--textColor));
    opacity: .55;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.2 6.4L21 11l-6.8 2.6L12 20l-2.2-6.4L3 11l6.8-2.6z'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.2 6.4L21 11l-6.8 2.6L12 20l-2.2-6.4L3 11l6.8-2.6z'/></svg>") center/contain no-repeat;
}

/* ── KAYIT AI ZAMAN CIZELGESI ───────────────────────────────────────────────
   ⛔ Bu uc sinif JS'te URETILIYOR ama CSS karsiligi HIC YOKTU (2026-09-07,
      sinif-kesisim kapisi buldu): zaman cizelgesi STILSIZ doguyordu —
      `.AiP_RowTime` bir flex cocugu olarak olcusuz kaliyor ve satiri kiriyordu. */
.AiP_Timeline {
    display: flex;
    flex-direction: column;
    gap: 6px;                             /* .AiP_List ile AYNI ritim */
    padding: 2px 0 8px;
}
.AiP_RowSub {
    font-size: 12px;
    line-height: 1.4;
    margin-top: 3px;
    overflow-wrap: anywhere;              /* uzun deger SARAR, kirpilmaz */
}
.AiP_RowTime {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-left: 8px;
    font-size: 12px;
    color: var(--textColor);
    opacity: .82;
    white-space: nowrap;
}

/* ── DAR KADRAJ (mobil 390px) — sikisiklik SIFIR tolerans ─────────────────── */
@media (max-width: 480px) {
    .AiP_Kod { margin-right: 5px; }
}
/* ══════════════════════════════════════════════════════════════════════════
   80-genui-infografik.css — GENUI GORSEL DILI (TEK KAYNAK)        2026-09-08
   `Framework/js/genui-render.js` motorunun CSS karsiligi. Bu dosya CEKIRDEK
   katmanindadir (/core.css) — yani hem PLATFORM (<Infographic> elementi,
   ViewType) hem AI HUB (/ai) hem AiChat ayni gorsel dili kullanir.
   ⛔ AI Hub'a KOPYA BIRAKILMADI: govde ai-hub.css'ten buraya TASINDI.
   ══════════════════════════════════════════════════════════════════════════ */
/* Motor kabi + kart izgarasi: platformda ai-hub.css yuklenmedigi icin burada
   da tanimli. Degerler ai-hub.css ile BIREBIR aynidir (catisma uretmez). */
.rich-content-block { margin: 12px 0 4px; border-radius: var(--radius-md, 10px); overflow: hidden; }

/* ==========================================================================
   ARTIFACT KABI + CHROME + TAM EKRAN                            2026-09-09
   Kullanici emri: "chat ekranindaki artifactlar (chart, kart, infographics vs)
   arka plani background verilecek", "artifact kavramini da ekleyip yeni pencere
   istenirse tam ekran gorulebilir olmali", "artifactlar side panel olarak
   sagdan erisilebilsin".

   ZEMIN: acik temada BEYAZ (kullanicinin daha once olculmus talebi: "chartlarin
   background'lari beyaz yaparsan daha okunur"). Koyu temada token'a duser -
   her ton IKI temada AYRI tanimli, gerileme yok.
   ========================================================================== */
.rich-content-block {
    background: var(--bg-elevated, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 16px rgba(15, 23, 42, .05);
}
:root:not([data-theme="dark"]) body:not(.Theme_Dark) .rich-content-block { background: #ffffff; }
[data-theme="dark"] .rich-content-block, .Theme_Dark .rich-content-block { box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.Theme_Dark .rich-content-block { background: var(--bg-elevated, #1e293b); border-color: var(--border, #334155); }
.Theme_Dark .rc-art-head { background: var(--bg-tertiary, #0f172a); border-color: var(--border, #334155); }
.Theme_Dark .rc-art-ad { color: var(--text-primary, #f8fafc); }
.Theme_Dark .rc-art-tip { background: var(--bg-secondary, #334155); border-color: var(--border, #475569); color: var(--text-secondary, #cbd5e1); }

/* Artifact basligi. Kap `overflow:hidden` tasidigi icin ust koseler kendiliginden
   yuvarlanir; ayrica radius YAZILMAZ (iki kaynak = iki lehce). */
/* Artifact basligi: Ultra-kompakt, sade ve tek satır mikro-şerit (28px) */
.rc-art-head {
    display: flex; align-items: center; gap: 8px;
    padding: 3px 10px; min-height: 28px;
    background: var(--bg-tertiary, #f8fafc);
    border-bottom: 1px solid var(--border, #f1f5f9);
    font-size: 12px;
    box-sizing: border-box;
}
.rc-art-ikon { color: var(--accent-text, var(--accent, #2563eb)); font-size: 12px; flex: 0 0 auto; line-height: 1; }
.rc-art-ad {
    font-weight: 650; color: var(--text-primary, #0f172a);
    font-size: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 38ch; min-width: 0;
}
.rc-art-tip {
    flex: 0 0 auto; font-size: 12px; font-weight: 600;
    color: var(--text-secondary, #475569);
    background: var(--bg-secondary, #eef2f7);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 999px; padding: 0 6px;
    line-height: 1.4;
}
.rc-art-ara { flex: 1 1 auto; min-width: 6px; }

/* Aksiyon Düğmeleri Grubu */
.rc-art-actions {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
}

/* Desktop'ta On-Hover Görünürlük (Dinlenme Anında Sıfır Gürültü) */
@media (hover: hover) and (min-width: 641px) {
    .rich-content-block .rc-art-actions {
        opacity: 0;
        pointer-events: none;
        transition: opacity .15s ease, transform .15s ease;
        transform: translateY(-1px);
    }
    .rich-content-block:hover .rc-art-actions,
    .rc-art-head:focus-within .rc-art-actions,
    .rc-art-actions.is-active,
    .rc-art-actions:has(.rc-art-menu-wrap.is-open) {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
}
@media (hover: none), (max-width: 640px) {
    .rich-content-block .rc-art-actions {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* Dokunma ve İkon Düğmesi: 22px x 22px mikro-hedef */
.rc-art-btn {
    flex: 0 0 auto; width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 4px;
    background: transparent; color: var(--text-tertiary, #64748b);
    cursor: pointer; font-size: 12px; line-height: 1;
    padding: 0;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.rc-art-btn:hover {
    background: var(--bg-hover, #e2e8f0);
    color: var(--accent-text, var(--accent, #2563eb));
    border-color: var(--border, #cbd5e1);
}
.rc-art-btn:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 1px; }

/* Dropdown İşlem Menüsü */
.rc-art-menu-wrap {
    position: relative;
    display: inline-flex;
}
.rc-art-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1000;
    min-width: 170px;
    padding: 4px;
    background: var(--bg-elevated, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 7px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04);
    display: none;
    flex-direction: column;
    gap: 1px;
}
.rc-art-menu-wrap.is-open .rc-art-menu {
    display: flex;
    animation: rcMenuPop .12s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes rcMenuPop {
    from { opacity: 0; transform: translateY(-3px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.rc-art-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    background: transparent;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
    box-sizing: border-box;
}
.rc-art-menu-item:hover,
.rc-art-menu-item:focus-visible {
    background: var(--bg-hover, #f1f5f9);
    color: var(--accent, #2563eb);
    outline: none;
}
.rc-art-menu-item i {
    font-size: 12px;
    width: 14px;
    text-align: center;
    color: var(--text-secondary, #64748b);
}
.rc-art-menu-item:hover i {
    color: var(--accent, #2563eb);
}
.rc-art-menu-sep {
    height: 1px;
    background: var(--border, #f1f5f9);
    margin: 2px 0;
}
[data-theme="dark"] .rc-art-menu,
.Theme_Dark .rc-art-menu {
    background: var(--bg-tertiary, #1e293b);
    border-color: var(--border, #334155);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .rc-art-menu-item,
.Theme_Dark .rc-art-menu-item {
    color: var(--text-primary, #f1f5f9);
}
[data-theme="dark"] .rc-art-menu-item:hover,
.Theme_Dark .rc-art-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .rc-art-menu-sep,
.Theme_Dark .rc-art-menu-sep {
    background: var(--border, #334155);
}

/* Chrome tam genislikte durmali: `.rc-ig` kendi dolgusunu tasiyor (16px 18px),
   o dolgu bloga kalirsa baslik seridi iceriden baslar. Dolgu COCUKLARA devredilir
   - boylece `.rc-ig > * + *` bosluk kurali BOZULMAZ (cocuk yapisi degismedi). */
.rc-ig[data-art] { padding: 0; }
.rc-ig[data-art] > *:not(.rc-art-head) { padding-left: 18px; padding-right: 18px; }
.rc-ig[data-art] > *:last-child { padding-bottom: 16px; }
.rich-content-block[data-art]:not(.rc-ig) > *:not(.rc-art-head) { padding: 12px; }
.rich-content-block[data-art] .rc-datatable,
.rich-content-block[data-art] .rc-statcards { padding: 0; }

/* ==========================================================================
   TAM EKRAN. Blok KLONLANMAZ, TASINIR (klon ECharts instance'ini tasimaz ve
   grafik olu bir kopya olur) - JS tarafinda yer tutucu konumu korur.
   z-index OLCULDU 2026-09-09: AI Hub'da en yuksek 100000; overlay onun bir
   ustune konur, cekirdegin 2147483600 toast katmani USTTE kalir (bilincli).
   ========================================================================== */
.rc-art-overlay {
    position: fixed; inset: 0; z-index: 100001;
    display: flex; align-items: center; justify-content: center;
    padding: 28px;
    background: rgba(15, 23, 42, .58);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.rc-art-ov-kap { width: min(1240px, 96vw); max-height: 92vh; overflow: auto; }
.rc-art--full { margin: 0; max-height: 92vh; }
/* Grafik tam ekranda gercekten buyusun - yoksa 320px kutusunda kalir ve
   "tam ekran calismiyor" gibi gorunur (JS ayrica echarts.resize cagirir). */
.rc-art--full .rc-chart, .rc-art--full .rc-ig-chart { min-height: 60vh; }
.rc-art--full .rc-table-wrap { max-height: 66vh; }
body.rc-art-kilit { overflow: hidden; }
.rc-art-yer { display: none; }

/* Dar ekran: chrome sarar, tip rozeti dusurulur, mobilde gereksiz panel/pencere gizlenir. */
@media (max-width: 640px) {
    .rc-art-tip { display: none; }
    .rc-art-btn[data-art-eylem="panel"],
    .rc-art-btn[data-art-eylem="pencere"],
    .rc-art-btn[data-art-eylem="svg"] { display: none; }
    .rc-art-ad { flex: 1 1 auto; min-width: 120px; max-width: 100%; overflow: visible; white-space: normal; line-height: 1.25; font-size: 12px; }
    .rc-art-ara { flex: 0 0 auto; }
    .rc-art-overlay { padding: 10px; }
    .rc-art-ov-kap { width: 100%; max-height: 96vh; }
}

.rc-statcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.rc-statcard { padding: 16px; background: var(--bg-elevated, #fff); border: 1px solid var(--border, #e2e8f0);
               border-radius: var(--radius-sm, 8px); }
.rc-statcard-icon { font-size: 20px; margin-bottom: 8px; }
.rc-statcard-value { font-size: 24px; font-weight: 700; color: var(--text-primary, #0f172a); margin-bottom: 4px; }
.rc-statcard-label { font-size: 12px; color: var(--text-tertiary, #64748b); margin-bottom: 6px; }
.rc-loading { padding: 18px; text-align: center; color: var(--text-tertiary, #64748b); font-size: 13px; }
.rc-error { padding: 12px; color: #dc2626; font-size: 13px; }

/* ══════════════════════════════════════════════════════════════════════════
   GENUI ZENGIN ICERIK — INFOGRAFIK + ZENGINLESTIRILMIS KART  (2026-09-08)
   Kullanici emri: chart zemini ACIK temada BEYAZ + "sadece Chart degil daha
   bircok tip uretilebilmeli: charts, cards, infographics vs".
   Bu katman temel CSS'ten SONRA yuklenir.
   Koyu temada gerileme yok: her ton degiskeni iki temada AYRI tanimli.
   ══════════════════════════════════════════════════════════════════════════ */
.rc-tone--good   { --rc-t: #16a34a; --rc-tbg: #dcfce7; }
.rc-tone--bad    { --rc-t: #dc2626; --rc-tbg: #fee2e2; }
.rc-tone--warn   { --rc-t: #d97706; --rc-tbg: #fef3c7; }
.rc-tone--info   { --rc-t: #2563eb; --rc-tbg: #dbeafe; }
.rc-tone--neutral{ --rc-t: #64748b; --rc-tbg: #f1f5f9; }
[data-theme="dark"] .rc-tone--good   { --rc-t: #4ade80; --rc-tbg: rgba(74,222,128,.14); }
[data-theme="dark"] .rc-tone--bad    { --rc-t: #f87171; --rc-tbg: rgba(248,113,113,.14); }
[data-theme="dark"] .rc-tone--warn   { --rc-t: #fbbf24; --rc-tbg: rgba(251,191,36,.14); }
[data-theme="dark"] .rc-tone--info   { --rc-t: #60a5fa; --rc-tbg: rgba(96,165,250,.14); }
[data-theme="dark"] .rc-tone--neutral{ --rc-t: #94a3b8; --rc-tbg: rgba(148,163,184,.14); }
.rc-tonebg--good   { background: #16a34a; }
.rc-tonebg--bad    { background: #dc2626; }
.rc-tonebg--warn   { background: #d97706; }
.rc-tonebg--info   { background: #2563eb; }
.rc-tonebg--neutral{ background: #94a3b8; }

/* Grafik zemini: ACIK temada BEYAZ (kullanici emri) */
.rc-chart--light { background: #ffffff; border: 1px solid var(--border); padding: 6px; }

/* Zenginlestirilmis stat karti */
.rc-statcard { position: relative; text-align: left; }
.rc-statcard-value { line-height: 1.15; }
.rc-statcard-sub  { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
.rc-statcard-desc { font-size: 12px; color: var(--text-secondary); margin-top: 6px; line-height: 1.45;
                    padding-top: 6px; border-top: 1px dashed var(--border); }
.rc-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700;
            padding: 2px 7px; border-radius: 999px; background: var(--rc-tbg, #f1f5f9); color: var(--rc-t, #64748b); }
.rc-trend-lbl { font-weight: 500; opacity: .8; }
.rc-prog { margin-top: 8px; }
.rc-prog-bar { height: 6px; border-radius: 999px; background: var(--bg-tertiary, #eef2f7); overflow: hidden; }
.rc-prog-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--rc-t, #2563eb); transition: width .4s ease; }
.rc-prog-lbl { font-size: 12px; color: var(--text-tertiary); margin-top: 3px; }
.rc-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }

/* Infografik kabi */
.rc-ig { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
         padding: 16px 18px; }
:root:not([data-theme="dark"]) .rc-ig { background: #ffffff; }
.rc-ig > * + * { margin-top: 14px; }
.rc-ig-title { font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; }
.rc-ig-sub   { font-size: 12.5px; color: var(--text-tertiary); margin-top: -8px; }
.rc-ig-h     { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.rc-ig-text  { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.rc-ig-divider { height: 1px; background: var(--border); margin: 4px 0; }
.rc-ig-foot  { font-size: 12px; color: var(--text-tertiary); border-top: 1px solid var(--border); padding-top: 8px; }
.rc-ig-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rc-ig-chart { min-height: 240px; }

/* bars / ranking */
/* ⛔ B-58 (2026-09-14 ekranda olculdu): her satir AYRI grid oldugu icin deger sutunu (auto) satirdan
   satira degisiyor, iz genisligi ve BASLANGIC x'i kayiyordu — cubuk boylari ortak tabanda kiyaslanamiyordu
   (Cleveland-McGill: ortak olcekte konum). Kolonlar kapsayicida TEK kez tanimlanir, satirlar subgrid. */
.rc-ig-bars { display: grid; grid-template-columns: fit-content(38%) minmax(0, 1fr) max-content; column-gap: 10px; align-items: center; }
.rc-ig-bars > .rc-ig-h { grid-column: 1 / -1; }
/* ⛔ .rc-ig-rich SATIR flex kabidir (flex-direction:row) — bar/asama blogu `flex:0 1 auto` ile ICERIK genisligine
   kucülüyordu (2026-09-14 olculdu, makina #mPLMAreaProjects "Proje Asamasina Gore Ar-Ge Butcesi", 1352 px kap):
   canli CSS'te blok 420 px (%31, iz 232 px); subgrid'li bu dosyayla 151 px (%11, iz 18 px — minmax(0,1fr) sutunu
   icerik genisliginde ~0). Bu kuralla %100 (iz 1201 px), 390 px'te %100. */
.rc-ig-rich > .rc-ig-bars, .rc-ig-rich > .rc-ig-stages { flex: 1 1 auto; min-width: 0; }
.rc-ig-barrow { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 5px 0; }
/* TG sondasi (2026-09-14, canli satis FinanceHome/PPHome): uzun hesap/plan adlari 244px'te "..." ile KIRPILIYORDU
   (10 satirin 10'u) — kirpma sifir tolerans: etiket SARAR, satir yuksekligi icerige gore buyur. */
.rc-ig-barlbl { font-size: 12.5px; color: var(--text-primary); font-weight: 600;
                overflow: visible; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; min-width: 0; }
/* ⛔ KAREDE OLCULEN KUSUR (2026-09-09): satir etiketi SAGA yasliydi (miras) ve
   sira rozeti etiketin ICINDE oldugu icin numaralar SUTUN OLUSTURMUYORDU —
   olculdu x = 737/677/673/650/653/653 (Gestalt hizalama ihlali). Siralamali
   (rank'li) blok bir LEADERBOARD'dur ve sola yaslanir; rank YOKKEN klasik
   yatay-cubuk normu (etiket cubuga bitisik) BOZULMAZ ⇒ kural KOSULLUDUR. */
.rc-ig-barlbl.rc-ig-lbl-rankli { text-align: left; }
.rc-ig-rank { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
              border-radius: 5px; background: var(--bg-tertiary, #eef2f7); color: var(--text-tertiary);
              font-size: 12px; font-weight: 700; margin-right: 6px; flex: 0 0 auto; }
.rc-ig-bartrack { height: 14px; border-radius: 4px; background: var(--bg-tertiary, #eef2f7); overflow: hidden; min-width: 0; }
.rc-ig-bartrack > span { display: block; height: 100%; border-radius: 4px; transition: width .45s ease; }
.rc-ig-barval { font-size: 12.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.rc-ig-barval em { font-style: normal; font-weight: 500; color: var(--text-tertiary); font-size: 12px; }
.rc-ig-barnote { grid-column: 1 / -1; font-size: 12px; color: var(--text-tertiary); margin: -2px 0 4px 24px; }

/* list */
.rc-ig-li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.rc-ig-li:last-child { border-bottom: 0; }
.rc-ig-li .rc-ig-rank { color: #fff; margin: 2px 0 0; }
.rc-ig-litxt { flex: 1 1 auto; min-width: 0; }
.rc-ig-litxt b { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.rc-ig-litxt span { display: block; font-size: 12px; color: var(--text-tertiary); margin-top: 2px; line-height: 1.45; }
.rc-ig-lival { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }

/* steps / flow */
.rc-ig-stepwrap { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.rc-ig-step { flex: 1 1 0; min-width: 118px; background: var(--rc-tbg, #f1f5f9); border-radius: var(--radius-sm);
              padding: 10px 11px; position: relative; }
.rc-ig-stepno { position: absolute; top: 7px; right: 8px; width: 17px; height: 17px; border-radius: 50%;
                background: var(--rc-t, #64748b); color: #fff; font-size: 12px; font-weight: 700;
                display: flex; align-items: center; justify-content: center; }
.rc-ig-stepval { font-size: 17px; font-weight: 700; color: var(--rc-t, #0f172a); line-height: 1.1; }
.rc-ig-steptitle { font-size: 12px; font-weight: 600; color: var(--text-primary); margin-top: 3px; }
.rc-ig-stepdesc { font-size: 12px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }
.rc-ig-steparrow { display: flex; align-items: center; color: var(--text-tertiary); font-size: 12px; flex: 0 0 auto; }

/* timeline */
.rc-ig-tlrow { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.rc-ig-tlrow:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0;
                                        width: 2px; background: var(--border); }
.rc-ig-tldot { width: 12px; height: 12px; border-radius: 50%; margin-top: 3px; flex: 0 0 auto; z-index: 1; }
.rc-ig-tldate { font-size: 12px; font-weight: 700; color: var(--text-tertiary); }
.rc-ig-tltitle { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-top: 1px; }
.rc-ig-tldesc { font-size: 12px; color: var(--text-secondary); margin-top: 3px; line-height: 1.5; }

/* callout / insight (ONGORU kutusu) */
.rc-ig-callout { display: flex; gap: 12px; padding: 13px 15px; border-radius: var(--radius-sm);
                 background: var(--rc-tbg, #f1f5f9); border-left: 4px solid var(--rc-t, #64748b); }
.rc-ig-calicon { color: var(--rc-t, #64748b); font-size: 17px; flex: 0 0 auto; margin-top: 1px; }
.rc-ig-calbody { min-width: 0; flex: 1 1 auto; }
.rc-ig-caltitle { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.rc-ig-caltext { font-size: 13px; color: var(--text-secondary); margin-top: 4px; line-height: 1.55; }
.rc-ig-calwhy { font-size: 12.5px; color: var(--text-secondary); margin-top: 7px; line-height: 1.5; }
.rc-ig-calwhy b { color: var(--rc-t, #64748b); }
.rc-ig-calact { font-size: 12.5px; font-weight: 600; color: var(--rc-t, #64748b); margin-top: 7px;
                display: flex; align-items: center; gap: 6px; }
.rc-ig-calev { font-size: 12px; color: var(--text-tertiary); margin-top: 6px; font-style: italic; }

/* compare (once / sonra) */
.rc-ig-cmpwrap { display: flex; align-items: center; gap: 14px; }
.rc-ig-cmpside { flex: 1 1 0; text-align: center; background: var(--bg-tertiary, #f8fafc);
                 border-radius: var(--radius-sm); padding: 12px 10px; }
.rc-ig-cmplbl { font-size: 12px; color: var(--text-tertiary); font-weight: 600; }
.rc-ig-cmpval { font-size: 21px; font-weight: 700; color: var(--text-primary); margin-top: 4px; line-height: 1.15; }
.rc-ig-cmpval.rc-tone--good, .rc-ig-cmpval.rc-tone--bad,
.rc-ig-cmpval.rc-tone--warn, .rc-ig-cmpval.rc-tone--info { color: var(--rc-t); }
.rc-ig-cmparrow { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px;
                  color: var(--rc-t, #64748b); font-weight: 700; }
.rc-ig-cmparrow span { font-size: 12px; }
.rc-ig-cmpnote { font-size: 12px; color: var(--text-tertiary); margin-top: 8px; }

/* progress (hedef / gerceklesen) */
.rc-ig-prog + .rc-ig-prog { margin-top: 11px; }
.rc-ig-progtop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
                 font-size: 12.5px; color: var(--text-secondary); margin-bottom: 5px; }
.rc-ig-progtop b { color: var(--text-primary); white-space: nowrap; }
.rc-ig-progpct { font-size: 12px; font-weight: 700; color: var(--rc-t, #64748b); margin-top: 3px; text-align: right; }

/* hero (tek buyuk sayi) */
.rc-ig-hero { text-align: center; padding: 18px 14px; border-radius: var(--radius-sm); background: var(--rc-tbg, #f1f5f9); }
.rc-ig-hero > i { font-size: 20px; color: var(--rc-t, #64748b); }
.rc-ig-heroval { font-size: 34px; font-weight: 800; color: var(--rc-t, #0f172a); line-height: 1.05; letter-spacing: -.02em; }
.rc-ig-herolbl { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-top: 5px; }
.rc-ig-herodesc { font-size: 12px; color: var(--text-secondary); margin-top: 6px; line-height: 1.5; }

/* Duyarli: mobil ve dar sohbet balonu (kural: HER UI responsive) */
@media (max-width: 900px) {
  .rc-ig-split { grid-template-columns: 1fr; }
  .rc-ig-barrow { grid-template-columns: minmax(90px, 1.4fr) 2fr auto; }
}
@media (max-width: 560px) {
  .rc-ig { padding: 13px 12px; }
  .rc-ig-barrow { grid-template-columns: 1fr auto; }
  .rc-ig-bartrack { grid-column: 1 / -1; }
  .rc-ig-cmpwrap { flex-direction: column; }
  .rc-ig-cmparrow { transform: rotate(90deg); }
  .rc-ig-heroval { font-size: 27px; }
  .rc-ig-stepwrap { flex-direction: column; }
  .rc-ig-steparrow { transform: rotate(90deg); justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ETKILESIM KATMANI — sekil degisimi . siralama . ilk-N . drill-down .
   capraz suzme . CSV                                          (2026-09-08)
   ⛔ Etkilesim GORUNUR olmali: imlec + hover + ODAK HALKASI. Gorunmeyen
      etkilesim, etkilesim degildir.
   ⛔ Dokunma hedefi: masaustu >=28px, mobil >=44px (WCAG + depo kurali).
   ══════════════════════════════════════════════════════════════════════════ */
.rc-gi-blok {
    position: relative;
    width: 100%;
}
.rc-gi-blok + .rc-gi-blok { margin-top: 14px; }

/* Hızlı Aksiyonlar: Absolute On-Hover Butonları (Tam Ekran, Table, Copy) — Alt Sağ Yerleşim, Başlık Yok */
.rc-gi-float-actions {
    position: absolute;
    bottom: 8px;
    right: 8px;
    top: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transform: translateY(2px);
    transition: opacity .18s cubic-bezier(.16, 1, .3, 1), transform .18s cubic-bezier(.16, 1, .3, 1);
}
.rc-gi-blok:hover .rc-gi-float-actions,
.InfographicViewHost:hover .rc-gi-float-actions,
.EntityTypeView:hover .rc-gi-float-actions,
.rich-content-block:hover .rc-gi-float-actions,
.rc-gi-float-actions:hover,
.rc-gi-float-actions:focus-within {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
@media (hover: none), (max-width: 767px) {
    .rc-gi-float-actions {
        opacity: 0.9 !important;
        pointer-events: auto !important;
        transform: none !important;
    }
}
.rc-gi-float-actions .rc-gi-icon-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(203, 213, 225, 0.85);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
    border-radius: 6px;
    color: var(--text-secondary, #475569);
    cursor: pointer;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.rc-gi-float-actions .rc-gi-icon-btn:hover {
    background: #ffffff;
    color: var(--accent, #2563eb);
    border-color: var(--accent, #2563eb);
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.2);
}
.rc-gi-float-actions .rc-gi-icon-btn.rc-gi-on {
    background: var(--accent, #2563eb);
    color: #ffffff;
    border-color: var(--accent, #2563eb);
}
[data-theme="dark"] .rc-gi-float-actions .rc-gi-icon-btn,
.Theme_Dark .rc-gi-float-actions .rc-gi-icon-btn {
    background: rgba(30, 41, 59, 0.88);
    border-color: rgba(51, 65, 85, 0.85);
    color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .rc-gi-float-actions .rc-gi-icon-btn:hover,
.Theme_Dark .rc-gi-float-actions .rc-gi-icon-btn:hover {
    background: #1e293b;
    color: #60a5fa;
    border-color: #60a5fa;
}

/* In-flow araç çubuğu tamamen kaldırıldı */
.rc-gi-tools { display: none !important; }

.rc-gi-select-wrap { position: relative; display: inline-flex; align-items: center; max-width: 240px; }
.rc-gi-select-icon { position: absolute; left: 8px; font-size: 12px; color: var(--accent, #2563eb); pointer-events: none; z-index: 2; }
.rc-gi-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    height: 26px; padding: 0 22px 0 25px;
    font: 600 12px/24px inherit; color: var(--text-primary, #0f172a);
    background: var(--bg-elevated, #fff); border: 1px solid var(--border, #cbd5e1);
    border-radius: 6px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 7px center; background-size: 8px 5px;
    max-width: 230px; text-overflow: ellipsis; white-space: nowrap;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.rc-gi-select:hover { border-color: var(--accent, #2563eb); background-color: var(--bg-hover, #f8fafc); }
.rc-gi-select:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 1px; }
.rc-gi-select optgroup { font-weight: 700; color: var(--text-secondary, #475569); background: var(--bg-secondary, #f1f5f9); }
.rc-gi-select option { font-weight: 500; color: var(--text-primary, #0f172a); background: var(--bg-elevated, #fff); padding: 4px 8px; }

/* Kompakt Dışa Aktarma Menüsü */
.rc-gi-export-wrap { max-width: 96px; }
.rc-gi-export-select {
    width: 96px; max-width: 96px;
    padding-left: 21px; padding-right: 16px;
    font-size: 12px;
}
.rc-gi-export-wrap .rc-gi-select-icon { left: 6px; font-size: 12px; }

/* İkon-yalnızca süper kompakt aksiyon butonları */
.rc-gi-chip.rc-gi-icon-btn {
    width: 26px; height: 26px; min-width: 26px; min-height: 26px;
    padding: 0; justify-content: center; align-items: center;
    border-radius: 6px; flex: 0 0 26px;
}
.rc-gi-chip.rc-gi-icon-btn i { font-size: 12px; margin: 0; }

[data-theme="dark"] .rc-gi-select,
.Theme_Dark .rc-gi-select { background-color: var(--bg-tertiary, #1e293b); color: var(--text-primary, #f1f5f9); border-color: var(--border, #334155); }
[data-theme="dark"] .rc-gi-select optgroup,
.Theme_Dark .rc-gi-select optgroup { background: #0f172a; color: #94a3b8; }
[data-theme="dark"] .rc-gi-select option,
.Theme_Dark .rc-gi-select option { background: #1e293b; color: #f1f5f9; }
.rc-gi-morph { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px;
               background: var(--bg-tertiary, #f1f5f9); }
/* ⛔ OLCULEN KOK (2026-09-09): cipler <button> oldugu icin PLATFORM kuralini
   devraliyor -> `button, input, textarea, select, .ItemSelection > span, .Choice,
   .Choices > a { flex-grow:1; flex-shrink:1; flex-basis:0% }` (core.css).
   Sonuc: 379px'lik `.rc-gi-tools` kabinda "Azalan"/"CSV" 115px'e GERILIYOR
   (icerik ~60px) ve serit sahte-genis gorunuyor. Ozgulluk .rc-gi-chip (0,1,0)
   > button (0,0,1) ⇒ siradan BAGIMSIZ kazanir, !important GEREKMEZ. */
.rc-gi-chip { flex: 0 0 auto;
              display: inline-flex; align-items: center; gap: 4px; min-height: 26px;
              padding: 2px 7px; border: 1px solid var(--border, #e2e8f0);
              border-radius: 6px; background: var(--bg-elevated, #fff);
              color: var(--text-secondary, #475569); font: 600 12px/1.2 inherit;
              cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.rc-gi-morph .rc-gi-chip { border-color: transparent; background: transparent; }
.rc-gi-chip:hover { background: var(--bg-hover, #eef2f7); color: var(--text-primary, #0f172a); }
.rc-gi-chip:focus-visible,
.rc-gi-tik:focus-visible { outline: 2px solid var(--rc-t, #2563eb); outline-offset: 2px; }
.rc-gi-chip.rc-gi-on { background: #2563eb; border-color: #2563eb; color: #fff; }
:root:not([data-theme="dark"]) .rc-gi-chip.rc-gi-on { background: #1d4ed8; border-color: #1d4ed8; }
.rc-gi-chip i { font-size: 12px; }

/* Tiklanabilir oge — satir/kart */
.rc-gi-tik { cursor: pointer; border-radius: 6px;
             transition: background .15s, transform .12s; }
.rc-gi-tik:hover { background: var(--bg-hover, #f1f5f9); }
.rc-ig-barrow.rc-gi-tik:hover { transform: translateX(2px); }
.rc-statcard.rc-gi-tik:hover { transform: translateY(-2px);
                               box-shadow: 0 4px 14px rgba(15,23,42,.09); }
/* Tiklanabilirligi SESSIZ birakma: kucuk bir isaret koy */
/* ⛔ TG olcumu (2026-09-15, makina #mPLMAreaProjects, iPhone 13): sayfa ikonlari "Font Awesome 5 Free" ile
   cizilir; yalniz FA6 adi yazilinca yuz yuklenmez, \f105 sans-serif'e duser ve her deger satirinin yaninda
   BOS KARE (tofu) gorunur. \f105 (angle-right, 900) FA5 ve FA6'da ayni kod noktasi — iki aile de yazilir. */
.rc-gi-tik::after { content: "\f105"; font: 900 12px/1 "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
                    color: var(--text-tertiary, #94a3b8); opacity: 0; margin-left: 6px;
                    transition: opacity .15s; }
.rc-gi-tik:hover::after, .rc-gi-tik:focus-visible::after { opacity: .85; }
.rc-gi-chip[data-gi="pptx"]:hover i { color: #ea580c; }

/* ── OTOMATİK VERİ HİKAYECİLİĞİ & AKILLI İÇGÖRÜ ÇİPLERİ (Auto-Storytelling) ── */
.rc-gi-story {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    margin: 4px 0 10px; padding: 6px 10px;
    border-radius: 8px; background: var(--bg-tertiary, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    /* 2026-09-14: 11.5px -> 12px (depo tabani 12px; olculdu satis #mOrgsHome 'Lider:/Ortalama:/Yogunlasma:').
       Kap flex-wrap oldugu icin buyuyen cip alt satira sarar — kirpma/ortusme uretmez. */
    font-size: 12px; line-height: 1.4;
}
.rc-gi-story-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--text-primary, #1e293b); }
.rc-gi-story-chip i { font-size: 12px; }
.rc-gi-story-peak i { color: #16a34a; }
.rc-gi-story-avg i { color: #2563eb; }
.rc-gi-story-pareto i { color: #9333ea; }
.rc-gi-story-sub { color: var(--text-secondary, #64748b); font-weight: normal; }

[data-theme="dark"] .rc-gi-story { background: rgba(30, 41, 59, .6); border-color: rgba(51, 65, 85, .8); }
[data-theme="dark"] .rc-gi-story-chip { color: #f1f5f9; }
[data-theme="dark"] .rc-gi-story-sub { color: #94a3b8; }
[data-theme="dark"] .rc-gi-story-peak i { color: #4ade80; }
[data-theme="dark"] .rc-gi-story-avg i { color: #60a5fa; }
[data-theme="dark"] .rc-gi-story-pareto i { color: #c084fc; }
.rc-gi-story-target i { color: #0284c7; }
[data-theme="dark"] .rc-gi-story-target i { color: #38bdf8; }

/* Story .rc-art-head içindeyken: sıfır border, şeffaf arkaplan, kompakt tek satır flex */
.rc-art-head .rc-gi-story {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
    margin: 0 !important; padding: 0 !important;
    background: transparent !important; border: none !important;
    box-shadow: none !important; font-size: 12px; line-height: 1.2;   /* 2026-09-14: 11px -> 12px taban */
    flex: 0 1 auto; min-width: 0;
}
.rc-art-head .rc-art-ad + .rc-gi-story {
    border-left: 1px solid var(--border, #e2e8f0) !important;
    padding-left: 8px !important; margin-left: 2px !important;
}
.rc-art-head .rc-gi-story-chip {
    display: inline-flex; align-items: center; gap: 4px;
    white-space: nowrap; font-size: 12px; line-height: 1.2;
}
.Theme_Dark .rc-art-head .rc-art-ad + .rc-gi-story,
[data-theme="dark"] .rc-art-head .rc-art-ad + .rc-gi-story {
    border-left-color: var(--border, #334155) !important;
}
.Theme_Dark .rc-art-head .rc-gi-story,
[data-theme="dark"] .rc-art-head .rc-gi-story {
    background: transparent !important; border: none !important;
    box-shadow: none !important;
}

/* ── İNTERAKTİF "WHAT-IF" SENARYO SİMÜLASYONU (Scenario Mode) ── */
.rc-gi-scenario {
    display: flex; flex-direction: column; gap: 6px;
    margin: 6px 0 10px; padding: 8px 12px;
    border-radius: 8px; background: var(--bg-tertiary, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    font-size: 12px;
}
.rc-gi-scenario-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.rc-gi-scenario-title {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-primary, #1e293b); font-weight: 600;
}
.rc-gi-scenario-title i { color: #d97706; }
.rc-gi-scenario-delta {
    font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 999px;
    transition: all .2s ease;
}
.rc-delta-pos { background: #dcfce7; color: #15803d; }
.rc-delta-neg { background: #fee2e2; color: #b91c1c; }
.rc-delta-zero { background: #f1f5f9; color: #64748b; }
.rc-gi-scenario-slider-row {
    display: flex; align-items: center; gap: 10px; width: 100%;
}
.rc-gi-slider {
    flex: 1 1 auto; height: 6px; border-radius: 3px;
    accent-color: #d97706; cursor: pointer;
}
.rc-gi-slider-bound {
    font-size: 12px; color: var(--text-tertiary, #94a3b8); font-weight: 500; min-width: 32px;
}
.rc-gi-scenario-reset {
    font-size: 12px; padding: 2px 8px; height: 22px; line-height: 18px;
}
[data-theme="dark"] .rc-gi-scenario { background: rgba(30, 41, 59, .7); border-color: rgba(51, 65, 85, .8); }
[data-theme="dark"] .rc-gi-scenario-title { color: #f1f5f9; }
[data-theme="dark"] .rc-delta-pos { background: rgba(74,222,128,.16); color: #86efac; }
[data-theme="dark"] .rc-delta-neg { background: rgba(248,113,113,.16); color: #fca5a5; }
[data-theme="dark"] .rc-delta-zero { background: rgba(148,163,184,.16); color: #cbd5e1; }

/* ── HEDEF VS. GERÇEKLEŞEN SAPMA KATMANI (Variance & Target Lines) ── */
.rc-ig-bartrack { position: relative; overflow: visible; }
.rc-ig-bar-target {
    position: absolute; top: -3px; bottom: -3px; width: 2px;
    background: #0f172a; z-index: 2; border-radius: 1px;
    box-shadow: 0 0 0 1px #ffffff;
}
[data-theme="dark"] .rc-ig-bar-target { background: #f8fafc; box-shadow: 0 0 0 1px #1e293b; }
.rc-ig-variance {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 12px; font-weight: 600; padding: 1px 6px;
    border-radius: 999px; margin-left: 6px;
    vertical-align: middle;
}
.rc-var-pos { background: #dcfce7; color: #15803d; }
.rc-var-neg { background: #fee2e2; color: #b91c1c; }
[data-theme="dark"] .rc-var-pos { background: rgba(74,222,128,.16); color: #86efac; }
[data-theme="dark"] .rc-var-neg { background: rgba(248,113,113,.16); color: #fca5a5; }

/* Aktif suzgec seridi — kullanici neyin suzuldugunu GORMELI ve kaldirabilmeli */
.rc-gi-aktif { display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
               padding: 7px 10px; border-radius: 8px;
               background: var(--rc-tbg, #dbeafe); }
.rc-gi-aktif-lbl { font: 700 12px/1 inherit; text-transform: uppercase;
                   letter-spacing: .04em; color: var(--text-tertiary, #64748b); }

@media (max-width: 560px) {
  /* Dokunma hedefi: mobilde 44px (kural — kirilima bagli esik) */
  .rc-gi-chip { min-height: 44px; padding: 6px 13px; font-size: 12.5px; }
  .rc-gi-tools { gap: 8px; }
  .rc-gi-tik::after { opacity: .5; }   /* mobilde hover yok -> isaret kalici */
}
@media (prefers-reduced-motion: reduce) {
  .rc-gi-chip, .rc-gi-tik, .rc-gi-tik::after { transition: none; }
  .rc-ig-barrow.rc-gi-tik:hover, .rc-statcard.rc-gi-tik:hover { transform: none; }
}

/* ── PLATFORM SARMALAYICISI: <Infographic> elementi (Panel/FieldSet/PageZone) ──
   AI Hub'da kap `.rich-content-block`; platformda `$_Infographic` bu kabi cizer.
   Gorsel dil AYNIDIR — yalniz dis kap farklidir.
   OLCULMUS TUZAKLAR:
   . flex kapta `min-width:auto` ogeyi icerik genisliginin altina INDIRMEZ -> tasma
   . yuzde yukseklik, ebeveyni `height:auto` ise COZULMEZ -> 0/12px cokme
   => yukseklik ICERIKTEN gelir, `min-width:0` zorunludur.                        */
.InfographicView { width: 100%; min-width: 0; box-sizing: border-box; }
/* 2026-09-14 plan #50 (TG olculdu, satis SalesTargetMonthly Detail): layout.css `.DirectionFloat > div { width:auto !important }`
   kayit formundaki <Infographic Style="width:98%"> sarmalayicisini EZIYORDU -> infografik icerik kadar daraldi (FieldSet 1182px,
   infografik 404px). Platform geneli kural degismez; yalniz infografik tasiyan Float cocugu tam satir alir. */
.DirectionFloat > div:has(> .InfographicView) { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
.InfographicTitle { font-size: 14px; font-weight: 700; color: var(--text-primary, #0f172a);
                    margin: 0 0 8px; letter-spacing: -.01em; }
.InfographicBody { min-width: 0; }
/* Panel icinde ikinci bir kart cercevesi cizme (kart-icinde-kart yasagi):
   Panel zaten bir kaptir, .rc-ig kendi cercevesini burada birakir. */
.Panel > .InfographicView > .InfographicBody > .rc-ig,
.FieldSet .InfographicView > .InfographicBody > .rc-ig { border: 0; padding: 0; background: transparent; }

/* ── KATMAN-2 kabi: 361-infographics SVG'si (148 tip) ──────────────────────
   Motor SEFFAF zemin uretir (~%95) — host icerigin ustune oturur. SVG
   duyarli olsun diye genislik %100, yukseklik ICERIKTEN gelir.              */
.rc-ig-rich { width: 100%; min-width: 0; }
.rc-ig-rich > svg { width: 100%; height: auto; display: block; }

/* ── AA MUREKKEBI: metin rengi vurgu renginden AYRIDIR (2026-09-08 olculdu) ──
   Vurgu (--rc-t) dolgu/kenarlik/ikon icindir — 3:1 grafik esigi yeterlidir.
   METIN --rc-tink kullanir: hem kendi tonlu zemininde hem beyaz kartta >=4.5.
   Olculen eski degerler: good 3.00 · bad 3.95 · warn 2.86 · info 4.24 · neutral 4.34 */
.rc-tone--good   { --rc-tink: #15803d; }
.rc-tone--bad    { --rc-tink: #b91c1c; }
.rc-tone--warn   { --rc-tink: #92400e; }
.rc-tone--info   { --rc-tink: #1d4ed8; }
.rc-tone--neutral{ --rc-tink: #475569; }
[data-theme="dark"] .rc-tone--good   { --rc-tink: #86efac; }
[data-theme="dark"] .rc-tone--bad    { --rc-tink: #fca5a5; }
[data-theme="dark"] .rc-tone--warn   { --rc-tink: #fcd34d; }
[data-theme="dark"] .rc-tone--info   { --rc-tink: #93c5fd; }
[data-theme="dark"] .rc-tone--neutral{ --rc-tink: #cbd5e1; }
/* METIN tasiyan her yuzey murekkebe gecer (vurgu yuzeyleri --rc-t'de KALIR) */
.rc-trend            { color: var(--rc-tink, #475569); }
.rc-ig-calwhy b      { color: var(--rc-tink, #475569); }
.rc-ig-calact        { color: var(--rc-tink, #475569); }
.rc-ig-stepval       { color: var(--rc-tink, #0f172a); }
.rc-ig-heroval       { color: var(--rc-tink, #0f172a); }
.rc-ig-progpct       { color: var(--rc-tink, #475569); }
.rc-ig-cmparrow      { color: var(--rc-tink, #475569); }
.rc-gi-chip.rc-gi-on { color: #fff; }
.rc-ig-cmpval.rc-tone--good, .rc-ig-cmpval.rc-tone--bad,
.rc-ig-cmpval.rc-tone--warn, .rc-ig-cmpval.rc-tone--info { color: var(--rc-tink); }

/* ── ViewType="Infographic" YUKSEKLIGI: CSS ILE COZULMEZ, XML'DEN GELIR ──────
   ⛔ DENENDI VE GERI ALINDI (2026-09-09) — burada CSS kurali YAZMAYIN.
   Belirti: infografik ciziliyor (6 bar, govde 282px) ama ETV kabi 56px'te
   kaliyor ve icerik disari tasiyor; `overflow:visible` oldugu icin "kirpik=0"
   yuklemi kusuru GORMEZ.
   Iki tur CSS denendi (`flex:0 1 auto` + sinif tekrariyla (0,5,0) ozgulluk);
   zincirin flex'i DUZELDI ama yukseklik DEGISMEDI. Kok tek olcumde cikti:
       .ETWBody  position: ABSOLUTE   ⇒ ebeveynin yuksekligine KATKI VERMEZ
       kontrol grubu `<Infographic>` elementi  position: static  ⇒ 686px DOGRU
   Yani bu platformun BILINCLI mimarisi: ETV kabi somut yukseklik alir, govde
   onu mutlak konumla doldurur ve KENDI icinde kaydirir. Zinciri "icerikten
   buyut" diye zorlamak mimariye karsi savasmaktir.
   ⇒ DOGRU KANAL XML'dir (platform normu, 43 emsal olculdu):
        <EntityTypeView Type="Infographic" ... Style="min-height:26em" />
      (em tabani bu depoda 12px ⇒ 26em = 312px). Content genelinde uygulanacaksa
      `Content/@CSSText`. Ayrinti: skill `361-content` (ETV min-height kurali). */

/* ── Sayfa Onizleme ve Baski (@media print) ────────────────────────────── */
@media print {
    .rc-gi-tools, .rc-gi-chip, .rc-art-btn, .rc-art-headbtn, .table-csv-btn { display: none !important; }
    .rich-content-block { box-shadow: none !important; border: 1px solid #cbd5e1 !important; break-inside: avoid; page-break-inside: avoid; }
    .rc-art-head { background: transparent !important; border-bottom: 1px solid #e2e8f0 !important; }
    .rc-art-overlay { position: static !important; background: none !important; padding: 0 !important; }
}

/* ── İnfografik Dışa Aktarma Butonları & Mikro Etkileşimler ───────────── */
.rc-gi-chip[data-gi="svg"],
.rc-gi-chip[data-gi="png"],
.rc-gi-chip[data-gi="copy-img"] {
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border, #cbd5e1);
    color: var(--text-secondary, #475569);
    transition: all 0.15s ease-in-out;
}
.rc-gi-chip[data-gi="svg"]:hover,
.rc-gi-chip[data-gi="png"]:hover,
.rc-gi-chip[data-gi="copy-img"]:hover {
    background: var(--bg-hover, #f8fafc);
    color: var(--primary, #0284c7);
    border-color: var(--primary, #0284c7);
}
.rc-art-btn[data-art-eylem="copy-img"],
.rc-art-btn[data-art-eylem="png"],
.rc-art-btn[data-art-eylem="svg"] {
    color: var(--text-secondary, #64748b);
    transition: color 0.15s ease, background 0.15s ease;
}
.rc-art-btn[data-art-eylem="copy-img"]:hover,
.rc-art-btn[data-art-eylem="png"]:hover,
.rc-art-btn[data-art-eylem="svg"]:hover {
    color: var(--primary, #0284c7);
    background: var(--bg-hover, #f1f5f9);
}
.Theme_Dark .rc-gi-chip[data-gi="svg"],
.Theme_Dark .rc-gi-chip[data-gi="png"],
.Theme_Dark .rc-gi-chip[data-gi="copy-img"] {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border, #334155);
    color: var(--text-secondary, #94a3b8);
}
.Theme_Dark .rc-gi-chip[data-gi="svg"]:hover,
.Theme_Dark .rc-gi-chip[data-gi="png"]:hover,
.Theme_Dark .rc-gi-chip[data-gi="copy-img"]:hover {
    background: var(--bg-tertiary, #334155);
    color: var(--primary-light, #38bdf8);
    border-color: var(--primary-light, #38bdf8);
}

/* ── Kurumsal Güvenlik Filigranı (Security Watermark) ────────────────────── */
.rc-gi-watermark {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
    opacity: 0.75;
    padding: 6px 10px;
    user-select: none;
    letter-spacing: 0.3px;
    margin-top: 8px;
    border-top: 1px dashed var(--border, #e2e8f0);
}
.rc-gi-watermark i { color: var(--primary, #0284c7); font-size: 12px; }
.Theme_Dark .rc-gi-watermark {
    color: #64748b;
    border-top-color: #334155;
}
.Theme_Dark .rc-gi-watermark i { color: #38bdf8; }

/* ── Erişilebilir Veri Tablosu (WCAG AAA Tabular View) ───────────────────── */
.rc-gi-acc-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 10px 0;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border, #e2e8f0);
    background: var(--bg-primary, #ffffff);
}
.rc-gi-acc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: left;
}
.rc-gi-acc-table th, .rc-gi-acc-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border, #e2e8f0);
}
.rc-gi-acc-table thead th {
    background: var(--bg-tertiary, #f8fafc);
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}
.rc-gi-acc-table tfoot th, .rc-gi-acc-table tfoot td {
    background: var(--bg-tertiary, #f8fafc);
    border-top: 2px solid var(--border, #cbd5e1);
    border-bottom: none;
    font-weight: 700;
}
.Theme_Dark .rc-gi-acc-wrap {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border, #334155);
}
.Theme_Dark .rc-gi-acc-table th, .Theme_Dark .rc-gi-acc-table td {
    border-bottom-color: #334155;
}
.Theme_Dark .rc-gi-acc-table thead th, .Theme_Dark .rc-gi-acc-table tfoot th, .Theme_Dark .rc-gi-acc-table tfoot td {
    background: var(--bg-tertiary, #0f172a);
    color: #f1f5f9;
}

/* ── Zaman Makinesi (Timelapse Playback & Period Badge) ─────────────────── */
.rc-gi-period-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    background: rgba(2, 132, 199, 0.1);
    color: var(--primary, #0284c7);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    animation: rcPulse 1.8s infinite;
}
.Theme_Dark .rc-gi-period-badge {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}
@keyframes rcPulse {
    0% { opacity: 0.9; }
    50% { opacity: 1; }
    100% { opacity: 0.9; }
}

/* ══════════════════════════════════════════════════════════════════════════
   INFOGRAPHICS & GENUI FULL-HEIGHT / FULL-WIDTH MIMARISI (2026-09-11)
   Bir Infographic bulunduğu HTML elementini (kart, hücre, panel, ETV)
   width ve height olarak TAM KAPLAMALIDIR, asla dikeyde veya yatayda
   boşluk/void bırakmamalıdır!
   ══════════════════════════════════════════════════════════════════════════ */
.EntityTypeView.View_Infographic,
.EntityTypeView.View_Infographics,
.EntityTypeView[class*="Infographic"] {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.EntityTypeView.View_Infographic > .EntityTypeViewBody,
.EntityTypeView.View_Infographics > .EntityTypeViewBody,
.EntityTypeView[class*="Infographic"] > .EntityTypeViewBody,
.EntityTypeView.View_Infographic .Center,
.EntityTypeView.View_Infographics .Center,
.EntityTypeView[class*="Infographic"] .Center,
.EntityTypeView.View_Infographic .Middle,
.EntityTypeView.View_Infographics .Middle,
.EntityTypeView[class*="Infographic"] .Middle,
.EntityTypeView.View_Infographic .MiddleCenter,
.EntityTypeView.View_Infographics .MiddleCenter,
.EntityTypeView[class*="Infographic"] .MiddleCenter,
.EntityTypeView.View_Infographic .ETWBody,
.EntityTypeView.View_Infographics .ETWBody,
.EntityTypeView[class*="Infographic"] .ETWBody,
.EntityTypeView.View_Infographic .ViewBody,
.EntityTypeView.View_Infographics .ViewBody,
.EntityTypeView[class*="Infographic"] .ViewBody,
.EntityTypeView.View_Infographic .InfographicViewHost,
.EntityTypeView.View_Infographics .InfographicViewHost,
.EntityTypeView[class*="Infographic"] .InfographicViewHost,
.EntityTypeView.View_Infographic .InfographicViewBody,
.EntityTypeView.View_Infographics .InfographicViewBody,
.EntityTypeView[class*="Infographic"] .InfographicViewBody {
    position: relative !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* InfographicViewHost ve InfographicViewBody içindeki bloklar tam yayılmalı */
.InfographicViewHost .rich-content-block.rc-ig,
.InfographicViewBody .rich-content-block.rc-ig,
.EntityTypeView .rich-content-block.rc-ig {
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 2px 4px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.InfographicViewHost .rc-gi-govde,
.InfographicViewBody .rc-gi-govde,
.EntityTypeView .rc-gi-govde,
.rc-gi-govde,
.InfographicViewHost .rc-gi-blok,
.InfographicViewBody .rc-gi-blok,
.EntityTypeView .rc-gi-blok,
.rc-gi-blok {
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
}

.rc-gi-story {
    flex: 0 0 auto !important;
    margin: 0 0 4px 0 !important;
    padding: 2px 6px !important;
}

.rc-ig-rich {
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.rc-ig-rich svg,
.rc-gi-blok svg:not(.svg-inline--fa),
.rc-ig svg:not(.svg-inline--fa) {
    width: 100% !important;
    height: 100% !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: block !important;
}

/* Infographics, Chart, Matrix ve Analitik Görünümlerde New Action (FAB) ve Arama Çubuğu Kesinlikle Gizlenir */
.View_Infographic .NewItemFAB,
.View_Infographics .NewItemFAB,
.EntityTypeView[class*="Infographic"] .NewItemFAB,
.InfographicViewHost ~ .NewItemFAB,
.EntityTypeView.View_Chart .NewItemFAB,
.EntityTypeView.View_Matrix .NewItemFAB,
.EntityTypeView.View_Dashboard .NewItemFAB,
.EntityTypeView.View_Metrics .NewItemFAB {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.View_Infographic .ETSearchPlace,
.View_Infographics .ETSearchPlace,
.EntityTypeView[class*="Infographic"] .ETSearchPlace,
.EntityTypeView.View_Chart .ETSearchPlace,
.EntityTypeView.View_Matrix .ETSearchPlace,
.EntityTypeView.View_Dashboard .ETSearchPlace,
.EntityTypeView.View_Metrics .ETSearchPlace {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.View_Infographic .Actions > .Action_New,
.View_Infographics .Actions > .Action_New,
.EntityTypeView[class*="Infographic"] .Actions > .Action_New {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   İNTERAKTİF İNFOGRAFİK: MİKRO-ETKİLEŞİM, HOVER CARD & DRİLL-DOWN (2026-09-11)
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. SVG Parça İçi Etkileşim ve Cursor Affordance */
.rc-ig-part,
.rc-ig-rich svg [data-part^="item-"],
.rc-gi-blok svg [data-part^="item-"] {
    cursor: pointer !important;
    transition: opacity .18s cubic-bezier(.16, 1, .3, 1),
                filter .18s cubic-bezier(.16, 1, .3, 1),
                transform .18s cubic-bezier(.16, 1, .3, 1) !important;
    transform-origin: center center;
}

/* 2. Gestalt Figure-Ground İzolasyonu (Hover Anında Odaklanma & Kararma) */
.rc-ig-has-hover [data-part^="item-"]:not(.rc-ig-part-hover) {
    opacity: 0.35 !important;
    filter: grayscale(15%) !important;
}

.rc-ig-part-hover,
.rc-ig-rich svg [data-part^="item-"].rc-ig-part-hover,
.rc-gi-blok svg [data-part^="item-"].rc-ig-part-hover {
    opacity: 1 !important;
    filter: drop-shadow(0 4px 14px rgba(37, 99, 235, 0.4)) brightness(1.06) !important;
}

.rc-ig-part-hover > rect,
.rc-ig-part-hover > path,
.rc-ig-part-hover > circle,
.rc-ig-part-hover > polygon {
    stroke: #ffffff !important;
    stroke-width: 2.5px !important;
    stroke-linejoin: round !important;
}

/* 3. Aktif / Seçili Dilim (Pinned / Cross-Filtered State) */
.rc-ig-part.is-active,
[data-part^="item-"].is-active {
    opacity: 1 !important;
    filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.6)) !important;
}
.rc-ig-part.is-active > rect,
.rc-ig-part.is-active > path,
.rc-ig-part.is-active > circle,
[data-part^="item-"].is-active > rect,
[data-part^="item-"].is-active > path {
    stroke: var(--primary, #2563eb) !important;
    stroke-width: 3.5px !important;
}

/* 4. Ultra-Hassas Cam (Glassmorphic) Hover Card */
.rc-ig-tooltip {
    position: fixed;
    z-index: 100002;
    pointer-events: none;
    background: rgba(15, 23, 42, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    color: #f8fafc;
    padding: 8px 12px;
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.35), 0 4px 10px -2px rgba(0, 0, 0, 0.2);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    min-width: 170px;
    max-width: 280px;
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.96);
    transition: opacity .12s ease, transform .12s cubic-bezier(.16, 1, .3, 1);
    white-space: normal;
    box-sizing: border-box;
}

:root:not([data-theme="dark"]) body:not(.Theme_Dark) .rc-ig-tooltip {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(0, 0, 0, 0.12);
    color: #0f172a;
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.18), 0 4px 10px -2px rgba(15, 23, 42, 0.08);
}

.rc-ig-tooltip.is-visible {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
    pointer-events: auto;
}

/* Görünmez Hover Köprüsü: Tooltip ile tetikleyici parça arasındaki boşluğu kapatır */
.rc-ig-tooltip.is-visible::after {
    content: '';
    position: absolute;
    left: -12px;
    right: -12px;
    bottom: -22px;
    height: 24px;
    background: transparent;
    pointer-events: auto;
}
.rc-ig-tooltip.is-visible.is-flip-below::after {
    bottom: auto;
    top: -22px;
    height: 24px;
}
.rc-ig-tooltip.is-touch-docked::after {
    display: none !important;
}

.rc-ig-tt-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-weight: 700;
    font-size: 12.5px;
    color: inherit;
}
.rc-ig-tt-icon {
    font-size: 12px;
    color: #38bdf8;
}
:root:not([data-theme="dark"]) body:not(.Theme_Dark) .rc-ig-tt-icon {
    color: #2563eb;
}

.rc-ig-tt-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 3px;
}
.rc-ig-tt-val {
    font-size: 13.5px;
    font-weight: 800;
    color: inherit;
}
.rc-ig-tt-share {
    font-size: 12px;
    font-weight: 600;
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
    border-radius: 4px;
    padding: 1px 5px;
}
:root:not([data-theme="dark"]) body:not(.Theme_Dark) .rc-ig-tt-share {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

.rc-ig-tt-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
:root:not([data-theme="dark"]) body:not(.Theme_Dark) .rc-ig-tt-meta {
    color: #64748b;
    border-top-color: rgba(0, 0, 0, 0.08);
}

.rc-ig-tt-hint {
    font-size: 12px;
    color: #60a5fa;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}
:root:not([data-theme="dark"]) body:not(.Theme_Dark) .rc-ig-tt-hint {
    color: #2563eb;
}

/* 5. İnfografik İçi Hiyerarşik Breadcrumb Şeridi (In-Place Drill-Down Nav) */
.rc-ig-drill-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--bg-tertiary, #f8fafc);
    border-bottom: 1px solid var(--border, #f1f5f9);
    font-size: 12px;
    box-sizing: border-box;
    flex: 0 0 auto;
}
.rc-ig-drill-crumb {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 6px;
    transition: background .15s, color .15s;
}
.rc-ig-drill-crumb:hover {
    background: var(--bg-secondary, #e2e8f0);
    color: var(--primary, #2563eb);
}
.rc-ig-drill-crumb.is-current {
    color: var(--text-primary, #0f172a);
    font-weight: 700;
    cursor: default;
    background: transparent;
}
.rc-ig-drill-sep {
    color: var(--text-tertiary, #94a3b8);
    font-size: 12px;
}
.rc-ig-drill-back {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--primary, #2563eb);
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 9999px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
}
.rc-ig-drill-back:hover {
    background: rgba(37, 99, 235, 0.15);
}

/* 6. Dokunmatik Ekranlar, Mobil, Fold ve Tablet Ergonomisi (Touch & Mobile Architecture) */
.rc-genui-root,
.InfographicViewHost {
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
}

.rc-ig-part {
    touch-action: manipulation;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Tooltip Kapatma Butonu (Touch & Mobile) */
.rc-ig-tt-close {
    margin-left: auto;
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 13px;
    line-height: 1;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    transition: color .15s, background .15s;
}
.rc-ig-tt-close:hover,
.rc-ig-tt-close:active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}
:root:not([data-theme="dark"]) body:not(.Theme_Dark) .rc-ig-tt-close {
    color: #64748b;
}
:root:not([data-theme="dark"]) body:not(.Theme_Dark) .rc-ig-tt-close:hover,
:root:not([data-theme="dark"]) body:not(.Theme_Dark) .rc-ig-tt-close:active {
    color: #0f172a;
    background: rgba(0, 0, 0, 0.08);
}

/* Tooltip Dokunmatik Aksiyon Çipleri */
.rc-ig-tt-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
:root:not([data-theme="dark"]) body:not(.Theme_Dark) .rc-ig-tt-actions {
    border-top-color: rgba(0, 0, 0, 0.08);
}
.rc-ig-tt-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    cursor: pointer;
    min-height: 36px;
    transition: all .15s ease;
    user-select: none;
}
.rc-ig-tt-btn:hover {
    filter: brightness(1.18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.rc-ig-tt-btn:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 1px;
}
.rc-ig-tt-btn:active {
    transform: scale(0.97);
}
.rc-ig-tt-btn-filter {
    background: #2563eb !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}
.rc-ig-tt-btn-filter:hover {
    background: #1d4ed8 !important;
    border-color: #60a5fa !important;
}
.rc-ig-tt-btn-drill {
    background: #059669 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}
.rc-ig-tt-btn-drill:hover {
    background: #047857 !important;
    border-color: #34d399 !important;
}
.rc-ig-tt-btn-drawer {
    background: #475569 !important;
    border-color: #64748b !important;
    color: #ffffff !important;
}
.rc-ig-tt-btn-drawer:hover {
    background: #334155 !important;
    border-color: #94a3b8 !important;
}
:root:not([data-theme="dark"]) body:not(.Theme_Dark) .rc-ig-tt-btn {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}
:root:not([data-theme="dark"]) body:not(.Theme_Dark) .rc-ig-tt-btn-filter {
    background: #2563eb !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}
:root:not([data-theme="dark"]) body:not(.Theme_Dark) .rc-ig-tt-btn-drill {
    background: #059669 !important;
    border-color: #047857 !important;
    color: #ffffff !important;
}
:root:not([data-theme="dark"]) body:not(.Theme_Dark) .rc-ig-tt-btn-drawer {
    background: #475569 !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

/* Mobil ve Katlanabilir Ekranlarda Alt Çekmece (Bottom Sheet Docking) */
@media (max-width: 640px), (hover: none) and (max-width: 768px) {
    .rc-ig-tooltip.is-touch-docked {
        position: fixed !important;
        bottom: 14px !important;
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        transform: translateY(0) scale(1) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
        width: auto !important;
        pointer-events: auto !important;
        padding: 10px 14px !important;
        border-radius: 12px !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
    }
    .rc-ig-drill-nav {
        padding: 8px 12px !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }
    .rc-ig-drill-crumb {
        min-height: 38px !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        border-radius: 6px !important;
    }
    .rc-ig-drill-back {
        min-height: 38px !important;
        padding: 6px 14px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
    }
}

/* Tablet ve Katlanabilir Açık Ekranlarda (768px - 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
    .rc-ig-tooltip {
        pointer-events: auto !important;
        min-width: 200px !important;
        max-width: 320px !important;
    }
    .rc-ig-drill-crumb,
    .rc-ig-drill-back {
        min-height: 36px !important;
    }
}

/* Ekran Boyutuna Göre Yükseklik Ölçeklemesi (Responsive Container Scaling) */
@media (max-width: 768px) {
    .EntityTypeView[ViewType="Infographic"],
    .InfographicViewHost {
        min-height: 26em !important;
    }
}
@media (max-width: 480px) {
    .EntityTypeView[ViewType="Infographic"],
    .InfographicViewHost {
        min-height: 22em !important;
    }
}





/* ══════════════════════════════════════════════════════════════════════════
   2026-09-14 DOGRULUK KATMANI STILLERI (plans/2026-09-14-infografik-derin-denetim-ve-strateji.md)
   ══════════════════════════════════════════════════════════════════════════ */
/* Asama blogu: genislik DEGERE orantili, oran "onceki asamaya gore", sonuc durumlari ayri */
.rc-ig-stages { display: grid; grid-template-columns: fit-content(34%) minmax(0, 1fr) max-content; column-gap: 12px; row-gap: 2px; align-items: center; }
.rc-ig-stages > .rc-ig-h, .rc-ig-stage-ratio, .rc-ig-stage-outcome { grid-column: 1 / -1; }
.rc-ig-stage { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 4px 0; }
.rc-ig-stage-lbl { font-size: 13px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rc-ig-stage-track { height: 18px; border-radius: 5px; background: var(--bg-tertiary, #eef2f7); overflow: hidden; min-width: 0; }
.rc-ig-stage-bar { display: block; height: 100%; border-radius: 5px; background: var(--accent, #2563eb); transition: width .45s ease; }
.rc-ig-stage-val { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; text-align: right; }
.rc-ig-stage-ratio { font-size: 12px; font-weight: 600; padding: 0 0 0 4px; color: var(--text-tertiary, #64748b); }
.rc-ig-stage-ratio span { font-weight: 500; }
.rc-ig-stage-ratio.rc-stage-down { color: #b45309; }
.rc-ig-stage-ratio.rc-stage-up { color: #047857; }
.rc-ig-stage-outcome { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border, #e2e8f0); }
.rc-ig-stage-outcome-lbl { font-size: 12px; font-weight: 600; color: var(--text-tertiary, #64748b); margin-right: 4px; }
.rc-ig-stage-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; background: var(--bg-tertiary, #eef2f7); color: var(--text-primary); }
.rc-ig-stage-chip b { font-weight: 700; }
.rc-ig-stage-chip.is-undefined { background: #fef3c7; color: #92400e; }
/* ⭐ Deger kodlayan huni (2026-09-15, satis karnesi M2): bant genisligi degere orantili, ortali; asama sirasi korunur */
.rc-ig-funnel { display: grid; grid-template-columns: fit-content(30%) minmax(0, 1fr) max-content; column-gap: 12px; row-gap: 2px; align-items: center; }
.rc-ig-funnel > .rc-ig-h, .rc-ig-funnel > .rc-ig-stage-ratio, .rc-ig-funnel > .rc-ig-stage-outcome { grid-column: 1 / -1; }
.rc-ig-funnel > .rc-ig-stage-ratio { text-align: center; }
.rc-ig-funnel-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 3px 0; }
.rc-ig-funnel-lbl { font-size: 13px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; line-height: 1.3; min-width: 0; }
.rc-ig-funnel-track { display: flex; justify-content: center; height: 30px; min-width: 0;
                      width: 100%; max-width: 760px; justify-self: center; }   /* TG karesi (2026-09-15, 1600px): iz 1155px'e yayilip esit degerde huni tam genislik cubuktan ayirt edilmiyordu */
.rc-ig-funnel-band { display: block; height: 100%; border-radius: 4px; background: var(--accent, #2563eb); transition: width .45s ease; }
.rc-ig-funnel-val { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; text-align: right; }
.rc-ig-rich > .rc-ig-funnel, .rc-ig-rich > .rc-ig-share, .rc-ig-rich > .rc-ig-dots, .rc-ig-rich > .rc-ig-spark { flex: 1 1 auto; min-width: 0; }
/* ⛔ TG canli karesi (2026-09-15, satis #SessionDashboard iPhone 13): (1) .rc-gi-float-actions (abs bottom:8px, 28px dugme)
   son lejant satirinin yuzdesini ORTUYORDU — blok sonuna dugme kumesi kadar yer (8+28+4); (2) .rc-gi-tik::after isareti
   4 sutunlu izgarada 5. hucreye dusup HER satirin altina ayri satir aciyordu — isaret satir icinde mutlak;
   (3) kalem adi ust kaptan text-align:center miras aliyordu. */
.rc-ig-funnel, .rc-ig-share { padding-bottom: 40px; }
/* 2026-09-15 (backlog 20260914T175034Z, TG olculdu makina #mPLMAreaProjects): ayni ortusme cubuk tipinde de VAR —
   yuzen dugmeler son satir degerini ("₺180.000") 1600 ve 390'da ortuyordu. Yer yalniz dugme kumesi olan blokta ayrilir. */
.rc-gi-blok:has(.rc-gi-float-actions) .rc-ig-bars,
.rich-content-block:has(.rc-gi-float-actions) .rc-ig-bars { padding-bottom: 40px; }
.rc-ig-funnel-row.rc-gi-tik, .rc-ig-share-row.rc-gi-tik { position: relative; padding-right: 16px; }
.rc-ig-funnel-row.rc-gi-tik::after, .rc-ig-share-row.rc-gi-tik::after { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); margin-left: 0; }
.rc-ig-funnel-lbl, .rc-ig-share-lbl, .rc-ig-share-row { text-align: left; }
/* ⭐ Pay seridi (M3): mobilde parca-butun tipinin okunur esdegeri — %100 yigili bant + yuzdeli lejant, dokunma satiri 32px */
/* T1-5 matris satirlari — cok boyutlu tiplerin mobil okunur karsiligi: metin 12px+, lejant ve ad sarar, yatay tasma yok (D83) */
.rc-ig-mx { display: grid; gap: 10px; min-width: 0; }
.rc-ig-mx-lejant { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.rc-ig-mx-lj { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary, #475569); overflow-wrap: anywhere; min-width: 0; }
.rc-ig-mx-lj > i { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; }
.rc-ig-mx-row { display: grid; gap: 4px; min-width: 0; }
.rc-ig-mx-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; min-width: 0; }
.rc-ig-mx-lbl { font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; min-width: 0; line-height: 1.3; }
.rc-ig-mx-bas > b { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-primary); }
.rc-ig-mx-bar { display: flex; height: 14px; border-radius: 4px; overflow: hidden; background: var(--bg-tertiary, #eef2f7); }
.rc-ig-mx-bar > span { display: block; height: 100%; min-width: 0; }
.rc-ig-mx-olcu { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 4px 12px; font-size: 12px; min-width: 0; }
.rc-ig-mx-olcu > span { display: flex; justify-content: space-between; gap: 6px; min-width: 0; }
.rc-ig-mx-olcu em { font-style: normal; color: var(--text-secondary, #475569); overflow-wrap: anywhere; min-width: 0; }
.rc-ig-mx-olcu b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-ig-share { display: grid; gap: 10px; }
.rc-ig-share-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--bg-tertiary, #eef2f7); }
.rc-ig-share-seg { display: block; height: 100%; min-width: 0; }
.rc-ig-share-legend { display: grid; gap: 2px; }
.rc-ig-share-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) max-content max-content; column-gap: 8px; align-items: center; min-height: 32px; font-size: 13px; }
.rc-ig-share-row > i { display: block; width: 12px; height: 12px; border-radius: 3px; }
.rc-ig-share-lbl { color: var(--text-primary); font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; min-width: 0; }
.rc-ig-share-row > b { font-weight: 700; color: var(--text-primary); }
.rc-ig-share-row > em { font-style: normal; font-size: 12px; color: var(--text-tertiary, #64748b); white-space: nowrap; }
.rc-ig-share-c0 { background: #2563eb; } .rc-ig-share-c1 { background: #0d9488; } .rc-ig-share-c2 { background: #d97706; } .rc-ig-share-c3 { background: #7c3aed; }
.rc-ig-share-c4 { background: #db2777; } .rc-ig-share-c5 { background: #0891b2; } .rc-ig-share-c6 { background: #65a30d; } .rc-ig-share-c7 { background: #64748b; }
/* ⭐ Nokta satirlari + egilim seridi (2026-09-15, kullanici kurali "infografikte cubuk grafik = infografik kullanmamak"):
   mobil (<=640) dusus artik cubuk uretmez — siralama/sapma/hedef/profil nokta satiri, zaman egilim seridi. Metin 12px+, satir 32px. */
.rc-ig-dots { display: grid; grid-template-columns: fit-content(38%) minmax(0, 1fr) max-content; column-gap: 10px; align-items: center; padding-bottom: 40px; }
.rc-ig-dots > .rc-ig-h { grid-column: 1 / -1; }
.rc-ig-dot-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; min-height: 32px; padding: 2px 0; }
.rc-ig-dot-row.rc-gi-tik { position: relative; padding-right: 16px; }
.rc-ig-dot-row.rc-gi-tik::after { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); margin-left: 0; }
.rc-ig-dot-lbl { font-size: 13px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; line-height: 1.3; min-width: 0; text-align: left; }
.rc-ig-dot-val { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.rc-ig-dot-val em { font-style: normal; font-weight: 600; font-size: 12px; color: var(--text-tertiary, #64748b); margin-left: 4px; }
.rc-ig-dot-track { position: relative; height: 22px; min-width: 0; margin-inline: 7px; }
.rc-ig-dot-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: var(--bg-tertiary, #e2e8f0); border-radius: 1px; }
.rc-ig-dots--signed .rc-ig-dot-track::after { content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 2px; transform: translateX(-50%); background: var(--text-tertiary, #94a3b8); }
.rc-ig-dot-stem { position: absolute; top: 50%; height: 2px; transform: translateY(-50%); border-radius: 1px; opacity: .55; }
.rc-ig-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--bg-primary, #fff); }
.rc-ig-dot-target { position: absolute; top: 1px; bottom: 1px; width: 3px; transform: translateX(-50%); border-radius: 2px; background: var(--text-primary, #0f172a); }
.rc-ig-dot--info { background: var(--accent, #2563eb); } .rc-ig-dot--good { background: #15803d; } .rc-ig-dot--bad { background: #b91c1c; } .rc-ig-dot--warn { background: #b45309; }
.rc-ig-spark { display: grid; gap: 6px; padding-bottom: 40px; }
.rc-ig-spark-son { display: flex; align-items: baseline; gap: 8px; }
.rc-ig-spark-son b { font-size: 20px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rc-ig-spark-son span { font-size: 12px; color: var(--text-tertiary, #64748b); }
.rc-ig-spark-svg { display: block; width: 100%; height: 96px; overflow: visible; }
.rc-ig-spark-line { fill: none; stroke: var(--accent, #2563eb); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.rc-ig-spark-area { fill: var(--accent, #2563eb); opacity: .12; stroke: none; }
.rc-ig-spark-eksen, .rc-ig-spark-uc { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-tertiary, #64748b); }
.rc-ig-spark-uc b { color: var(--text-primary); font-weight: 700; }
.rc-ig-spark-donemler { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-ig-spark-donem { font-size: 12px; min-height: 32px; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; border-radius: 6px; background: var(--bg-tertiary, #eef2f7); color: var(--text-primary); }
.rc-ig-spark-donem b { font-weight: 700; }
/* Gorunur arac satiri (Tumu / sirala / bicim) — dokunmatikte hover YOK, bu yuzden hep gorunur */
.rc-gi-toolrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.rc-gi-toolrow .rc-gi-chip { min-height: 32px; font-size: 12px; }
.rc-gi-more { font-weight: 700; }
/* Durust dusus / gizli kalem notu ve simulasyon rozeti */
.rc-gi-uyari { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.4; color: var(--text-tertiary, #64748b); margin: 0 0 8px; }
.rc-gi-uyari i { margin-top: 2px; }
.rc-gi-sim-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #92400e; background: #fef3c7; border-radius: 6px; padding: 4px 8px; margin: 0 0 8px; }
.rc-gi-story-chip.rc-gi-story-empty { opacity: .85; }
@media (max-width: 640px) {
  .rc-ig-bars, .rc-ig-stages { grid-template-columns: fit-content(42%) minmax(0, 1fr) max-content; column-gap: 8px; }
}

/* TG karesi (2026-09-14): zengin bicim uygulanamadiginda not + siralı cubuk YAN YANA sikisiyordu
   (.rc-ig-rich satir flex + overflow:hidden). Fallback dikey akar, icerik kirpilmaz. */
.rc-ig-rich.rc-ig-fallback {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
}
.rc-ig-rich.rc-ig-fallback > .rc-ig-bars { width: 100%; }
/* Kap okunurluk kapisi (2026-09-15, backlog 20260915T201500Z): dar kapta SVG yerine Katman-1 okunur blok (genui-render _igOkunurluk).
   .rc-ig-rich satir flex + height:100% + overflow:hidden blogu kirpmasin — fallback gibi dikey akar. */
.rc-ig-rich.rc-ig-okunur {
    flex-direction: column !important;
    justify-content: center !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 12px !important;   /* B-v2 karesi: kalem adi ve pay seridi kart kenarina 5px yapisiyordu (.rc-ig-rich padding:0) */
}
/* blok esnemez: grid blok (pay seridi/nokta satiri) esneyen yukseklikte satirlari yayip seridi lejanttan ~170px ayiriyordu (B karesi) */
.rc-ig-rich.rc-ig-okunur > * { width: 100%; flex: 0 0 auto !important; }
/* #63 (2026-09-14): anlati "yanlis mi?" isareti — icgorulerin sonunda sessiz, dokunulabilir (>=32px) cip */
.rc-gi-story .rc-gi-story-flag { margin-left: auto; min-height: 32px; font-size: 12px; font-weight: 500;
    color: var(--text-tertiary, #64748b); background: transparent; border: 1px dashed var(--border-subtle, #cbd5e1); }
.rc-gi-story .rc-gi-story-flag:hover:not(:disabled) { color: var(--text-primary, #0f172a); border-style: solid; }
.rc-gi-story .rc-gi-story-flag:disabled { color: #047857; border-color: transparent; cursor: default; }
/* 2026-09-15 kullanici: icgoru cipleri + hizli aksiyonlar TEK satir — aksiyonlar "Yanlis mi?" yaninda, sag uca dayali.
   Satir icine alininca mutlak konum ve gorsel altindaki 40px dugme payi gereksizdir (yalniz aksiyonu satirda olan blokta). */
.rc-gi-story-end { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.rc-gi-story .rc-gi-story-end .rc-gi-story-flag { margin-left: 0; }
.rc-gi-story .rc-gi-float-actions { position: static; transform: none; z-index: auto; }
.rc-gi-blok:has(> .rc-gi-story .rc-gi-float-actions) :is(.rc-ig-funnel, .rc-ig-share, .rc-ig-dots, .rc-ig-spark, .rc-ig-bars) { padding-bottom: 0; }
/* 2. tur (kullanici: bicim secici ayri satirda kalmis): gorunur araclar (bicim / sirala / Tumu / Oynat) ayni satirin SOLUNDA;
   icgoru yoksa arac satiri aksiyonlari sagina alir — her iki durumda yuzen mutlak dugme ve 40px pay yok. */
.rc-gi-story-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 0 0 auto; }
.rc-gi-story-tools .rc-gi-chip { min-height: 32px; font-size: 12px; }
.rc-gi-story-tools + .rc-gi-story-chip { padding-left: 10px; border-left: 1px solid var(--border, #e2e8f0); }
@media (max-width: 640px) { .rc-gi-story-tools + .rc-gi-story-chip { padding-left: 0; border-left: 0; } }
/* 2026-09-15 TG karesi (iPhone 13, dalga 2 gorsel sonda): uzun cip ("En büyük düşüş: Kontrol Ediliyor → E-Posta Gönderiliyor") inline-flex oldugu
   icin metni SARAMIYOR, sag kenarda kirpiliyordu; artifact basliginda ayrica nowrap. Dar kadrajda cip duz metin gibi akar (ikon + metin satira sarar). */
@media (max-width: 640px) {
  .rc-gi-story .rc-gi-story-chip, .rc-art-head .rc-gi-story .rc-gi-story-chip { display: inline; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
  .rc-gi-story .rc-gi-story-chip i { margin-right: 4px; }
}   /* dar ekranda satir sarar: ayirici satir basinda bosta kalir (TG iPhone 13 karesi) */
.rc-gi-toolrow .rc-gi-float-actions { position: static; transform: none; z-index: auto; }
.rc-gi-blok:has(> .rc-gi-toolrow .rc-gi-float-actions) :is(.rc-ig-funnel, .rc-ig-share, .rc-ig-dots, .rc-ig-spark, .rc-ig-bars) { padding-bottom: 0; }
/* T3-1 cok serili matris lejanti (IG seri adini basmayan tiplerde) — renk + ad, sarar, 12px */
.rc-ig-lejant { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; padding: 6px 4px 2px; }
.rc-ig-lejant-oge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary, #475569); overflow-wrap: anywhere; }
.rc-ig-lejant-oge i { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; }
/* T2-1 gercek huni: her asama SVG yamuk (ust = bu asama, alt = sonraki asama), siluet kesintisiz daralir; en buyuk kayip kirmizi */
.rc-ig-funnel-row { padding: 0; }
.rc-ig-funnel-track { height: 34px; }
.rc-ig-funnel-svg { display: block; width: 100%; height: 100%; overflow: visible; }
polygon.rc-ig-funnel-band { fill: var(--accent, #2563eb); stroke: none; }
.rc-ig-stage-ratio.rc-stage-sizinti { color: #b91c1c; }
[data-theme="dark"] .rc-ig-stage-ratio.rc-stage-sizinti, .Theme_Dark .rc-ig-stage-ratio.rc-stage-sizinti { color: #f87171; }
/* T2-2 durum akisi: dugum = durum (kayit + pay + olcek), ok = sira, "→" = ileri gecis hedefleri; mobilde dikey */
.rc-ig-flow { display: grid; gap: 12px; padding-bottom: 40px; }
.rc-gi-blok:has(> .rc-gi-story .rc-gi-float-actions) .rc-ig-flow, .rc-gi-blok:has(> .rc-gi-toolrow .rc-gi-float-actions) .rc-ig-flow { padding-bottom: 0; }
.rc-ig-flow-main, .rc-ig-flow-outcomes { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.rc-ig-flow-outcomes { padding-top: 10px; border-top: 1px solid var(--border, #e2e8f0); }
.rc-ig-flow-cap { flex: 1 1 100%; font-size: 12px; font-weight: 600; color: var(--text-tertiary, #64748b); }
.rc-ig-flow-node { flex: 1 1 150px; min-width: 0; max-width: 260px; display: grid; gap: 4px; align-content: start; padding: 10px 12px; border-radius: 8px;
    border: 1px solid var(--border, #e2e8f0); background: var(--bg-primary, #fff); }
.rc-ig-flow-node.is-empty { border-style: dashed; }
.rc-ig-flow-node.is-empty .rc-ig-flow-val b { color: var(--text-tertiary, #64748b); }
.rc-ig-flow-node.is-outcome { border-left: 3px solid #0f766e; }
.rc-ig-flow-node.rc-gi-tik { position: relative; cursor: pointer; }
.rc-ig-flow-title { font-size: 13px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; line-height: 1.3; }
.rc-ig-flow-val { display: flex; align-items: baseline; gap: 6px; }
.rc-ig-flow-val b { font-size: 18px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rc-ig-flow-val span { font-size: 12px; color: var(--text-tertiary, #64748b); }
.rc-ig-flow-scale { height: 6px; border-radius: 3px; background: var(--bg-tertiary, #eef2f7); overflow: hidden; }
.rc-ig-flow-scale i { display: block; height: 100%; background: var(--accent, #2563eb); border-radius: 3px; }
.rc-ig-flow-next { font-size: 12px; color: var(--text-tertiary, #64748b); overflow-wrap: anywhere; }
.rc-ig-flow-arrow { align-self: center; flex: 0 0 auto; width: 10px; height: 10px; margin: 0 2px; border-top: 2px solid var(--text-tertiary, #94a3b8); border-right: 2px solid var(--text-tertiary, #94a3b8); transform: rotate(45deg); }
[data-theme="dark"] .rc-ig-flow-node, .Theme_Dark .rc-ig-flow-node { background: rgba(30, 41, 59, .5); border-color: rgba(51, 65, 85, .9); }
@media (max-width: 640px) {
  .rc-ig-flow-main { flex-direction: column; }
  .rc-ig-flow-node { max-width: none; flex-basis: auto; }
  .rc-ig-flow-arrow { transform: rotate(135deg); margin: 2px 0; }
}
/* folder-viewtype.css — Design tokens for Folder/ItemView components
 * Loaded by Domain.vb after m.css. Provides CSS custom properties
 * that theme CSS files (361pro, biz, commerce, erp, home, lms) reference.
 * Specificity: lowest — themes override via their own rules.
 */

:root {
  /* Folder layout */
  --folder-padding: 0.5em;
  --folder-radius: 0.4em;
  --folder-gap: 4px;

  /* Folder colors */
  --folder-bg: white;
  --folder-color-muted: gray;

  /* ItemView shared */
  --itemview-shadow: 0 0 0;
  --itemview-border: solid 0 rgba(127,127,127,0.1);
}

				:root {
				--activeBorderColor:rgb(10, 110, 185);
--backColor:#e8ebf8;
--backColor2:#f8faff;
--backColor3:#ffffff;
--BgColor1:248, 250, 255;
--border1:solid 1px rgba(127,127,127,0.1);
--border2:solid 1px rgba(127,127,127,0.2);
--border3:solid 1px rgba(127,127,127,0.3);
--borderColor:rgba(127,127,127,0.2);
--buttonBackColor:slategray;
--buttonBackColorHover:black;
--buttonBoxShadow:0 0 1px gray;
--buttonBoxShadowHover:1px 1px 5px gray;
--buttonTextColor:white;
--cellSize:clamp(48px,20vw,64px);
--choiceSelectedColor:rgb(0, 127, 255);
--choiceSelectedFalseColor:#d24f6b;
--color1:#009ef7;
--color1-00:#00335a;
--color1-10:#004978;
--color1-20:#005e97;
--color1-30:#0073b7;
--color1-40:#0088d7;
--color1-50:#009ef7;
--color1-60:#5ec2fa;
--color1-70:#8cd2fb;
--color1-80:#b7e2fc;
--color1-90:#ddf1fd;
--color2:lightgray;
--color2-00:#272d32;
--color2-10:#3a454b;
--color2-20:#4d5c64;
--color2-30:#61747e;
--color2-40:#788c96;
--color2-50:#90a4ae;
--color2-60:#a7b6be;
--color2-70:#bec8ce;
--color2-80:#d4dde2;
--color2-90:#eaeff1;
--color3:#008000;
--color3-00:#002600;
--color3-10:#003800;
--color3-20:#004a00;
--color3-30:#005c00;
--color3-40:#006e00;
--color3-50:#008000;
--color3-60:#66c066;
--color3-70:#8cd08c;
--color3-80:#b3e0b3;
--color3-90:#d9f0d9;
--color4:#FF4433;
--color4-00:#500000;
--color4-10:#700000;
--color4-20:#930400;
--color4-30:#b71504;
--color4-40:#db2a1a;
--color4-50:#ff4433;
--color4-60:#ff8373;
--color4-70:#ffc3bc;
--color4-80:#ffd8d3;
--color4-90:#ffece9;
--color5:#800080;
--color5-00:#260026;
--color5-10:#380038;
--color5-20:#4a004a;
--color5-30:#5c005c;
--color5-40:#6e006e;
--color5-50:#800080;
--color5-60:#cc66cc;
--color5-70:#d98cd9;
--color5-80:#e6b3e6;
--color5-90:#f2d9f2;
--contentHeaderBackground:linear-gradient(135deg, #3498db 0%, #2980b9 100%);;
--contentms:350ms;
--disabledColor:#999;
--errorColor:#eb3131;
--fieldLabelPadding:6px 12px;
--fieldLabelWidth:8em;
--fieldPadding:8px 8px;
--fieldValueFontSize:1.2em;
--fieldValuePadding:8px;
--fieldValuePadding:8px;
--focusColor:rgb(10, 110, 185);
--fontSize:12px;
--fontWeight:400;
--footerBackColor:#181c32;
--footerTextColor:white;
--gap:8px;
--gap2:16px 32px;
--headerBackColor:inherit;
--headerTextColor:inherit;
--hoverBackColor:rgba(0,0,0,0.04);
--hoverImage1:linear-gradient(to bottom, rgba(254,252,234,0.3) 0%,rgba(241,218,54,0.3) 100%);;
--hoverImage2:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
--hoverImage3:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
--iconBackColor:white;
--iconColor:#303060;
--iconRadius:35%;
--iconShadow:1px 1px 3px lightgray;
--infoColor:#009ef7;
--inputBackColor:white;
--inputBorder:solid 1px rgba(127,127,127,0.2);
--inputFocusBorderColor:rgb(10, 110, 185);
--inputPadding:8px 12px;
--inputRadius:8px;
--inputTextColor:white;
--itemBack:white;
--itemMargin:0 auto;
--labelColor:#3d5986;
--lineHeight:1.2em;
--linkColor:#1f5bb9;
--listHeaderHeight:3em;
--listPadding:8px 4px;
--logoColor:#dd042b;
--menuBackColor:#303030;
--menuIconColor:white;
--menuSelectedBackColor:#f0f4f8;
--menuTextColor:white;
--mobileTextSize:14px;
--monoFont:;
--multiItemBackColor:#f8faff;
--numWidth:10em;
--panelHeaderBackColor:rgba(0,0,0,0.02);
--panelHeaderTextColor:#000080;
--primaryButtonBackColor:#7ABC13;
--primaryButtonTextColor:white;
--ProcedureDQ:#eb3131;
--ProcedureIQ:#46d74c;
--radiusFull:9999px;
--radiusLg:12px;
--radiusMd:8px;
--radiusSm:4px;
--radiusXl:16px;
--ReadOnlyColor:96, 96, 96;
--scrollbarThumbColor:rgba(127,127,127,0.3);
--scrollbarTrackColor:transparent;
--selectionColor:rgba(0,158,247,0.2);
--selectorSize:clamp(7em,7em,10em);
--shadow1:0 0 1px silver;
--shadowColor:rgba(0,0,0,0.1);
--shadowLg:0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
--shadowMd:0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
--shadowRGB:0, 0, 0;
--shadowSm:0 1px 2px rgba(0,0,0,0.05);
--shadowXl:0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
--singleItemBackColor:#ffffff;
--space1:4px;
--space2:8px;
--space3:12px;
--space4:16px;
--space6:24px;
--space8:32px;
--subItemsWidth:320px;
--successColor:#46d74c;
--surfaceColor:#ffffff;
--textColor:#303030;
--textRGB:48, 48, 48;
--textSize:12px;
--transitionBase:250ms ease;
--transitionFast:150ms ease;
--transitionSlow:350ms ease;
--transitionSpring:350ms cubic-bezier(0.34, 1.56, 0.64, 1);
--warningColor:#ff9800;
--winHeight:100vh;
--winWidth:100vw;
--zDropdown:100;
--zModal:1000;
--zToast:9999;
--icon-361Atom:"\e9e0";
--icon-Account-Group:"\ea00";
--icon-Accounting:"\e900";
--icon-Add:"\e901";
--icon-AlarmCircle:"\e9d9";
--icon-Anchor:"\e902";
--icon-Apps:"\e9dd";
--icon-Arrow-Down:"\e903";
--icon-Arrow-Down-Long:"\e904";
--icon-Arrow-Left:"\e905";
--icon-Arrow-Right:"\e906";
--icon-Arrows:"\e907";
--icon-Arrow-Up:"\e908";
--icon-Arrow-Up-Down-Long:"\e909";
--icon-Arrow-Up-Long:"\e90a";
--icon-Article:"\ea6d";
--icon-Asset:"\ea52";
--icon-Attach:"\e90b";
--icon-Auditor:"\ea4d";
--icon-Award:"\ea60";
--icon-Bank:"\ea19";
--icon-Bank-Transfer:"\ea4a";
--icon-Bar-Chart:"\e90c";
--icon-BarCode:"\e90d";
--icon-Behavior:"\ea5f";
--icon-Bell:"\e90e";
--icon-Bitcoin:"\e90f";
--icon-Brain:"\ea1a";
--icon-Broadcast:"\ea1b";
--icon-Bug:"\e910";
--icon-Building:"\e911";
--icon-Business:"\e912";
--icon-Business-Card:"\e913";
--icon-Business-Contact:"\e914";
--icon-Calculator:"\ea1c";
--icon-Calendar:"\e915";
--icon-Calendar-Edit:"\e9ec";
--icon-Calendar-Month:"\e9fd";
--icon-Call:"\e916";
--icon-Calling:"\e917";
--icon-Call-List:"\ea51";
--icon-Camera:"\e918";
--icon-Cancel:"\e919";
--icon-Card:"\e9e7";
--icon-Certificate:"\ea3b";
--icon-Chart:"\e91a";
--icon-Chart-Line:"\ea55";
--icon-Chart-Panel:"\e9f7";
--icon-Chart-Report:"\ea06";
--icon-Chart-Scatter:"\ea05";
--icon-Chat:"\e91b";
--icon-Check:"\e91c";
--icon-Check-Double:"\ea4f";
--icon-Chevron-Down:"\e91d";
--icon-Chevron-Left:"\e91e";
--icon-Chevron-Right:"\e91f";
--icon-Chevron-Up:"\e920";
--icon-Circle:"\e921";
--icon-Circle-Check:"\e922";
--icon-Circle-Dot:"\e923";
--icon-Circle-Down:"\e924";
--icon-Circle-Left:"\e925";
--icon-Circle-Pause:"\e926";
--icon-Circle-Play:"\e927";
--icon-Circle-Right:"\e928";
--icon-Circle-Solid:"\e929";
--icon-Circle-Stop:"\e92a";
--icon-Circle-Times:"\e92b";
--icon-Circle-Up:"\e92c";
--icon-Circle-User:"\e92d";
--icon-City:"\e92e";
--icon-Clipboard:"\ea10";
--icon-Clipboard-Check:"\ea18";
--icon-Clone:"\e92f";
--icon-Close:"\e930";
--icon-Code:"\ea54";
--icon-Cog:"\e931";
--icon-Coins:"\ea1d";
--icon-Color-Picker:"\e932";
--icon-Comments:"\e933";
--icon-Community:"\ea04";
--icon-Compass:"\e934";
--icon-Components:"\ea42";
--icon-Container:"\ea2b";
--icon-Contract:"\ea68";
--icon-Copy:"\e935";
--icon-CPU:"\ea1e";
--icon-Credit-Card:"\e936";
--icon-Cube:"\e937";
--icon-Cubes:"\e938";
--icon-Daily:"\ea46";
--icon-Dashboard:"\e9e8";
--icon-Database:"\e939";
--icon-Date-Picker:"\e93a";
--icon-Delete:"\e93b";
--icon-Desktop:"\e93c";
--icon-Device:"\ea66";
--icon-Dispatch:"\ea57";
--icon-Doc-Edit:"\ea3a";
--icon-Doc-List:"\ea39";
--icon-Dot:"\e93d";
--icon-Edit:"\e93e";
--icon-Edit-Settings:"\e9f9";
--icon-E-Mail:"\e93f";
--icon-Energy:"\ea58";
--icon-Envelop:"\e940";
--icon-Eraser:"\e941";
--icon-Exchange:"\e942";
--icon-Exclamation:"\e9d6";
--icon-Export:"\e943";
--icon-External-Link:"\e944";
--icon-Eye:"\e945";
--icon-EyeSlash:"\e946";
--icon-Factory:"\ea1f";
--icon-FavoriteCircle:"\e9da";
--icon-Field:"\e947";
--icon-File:"\e948";
--icon-File-Add:"\e949";
--icon-File-Bar:"\e94a";
--icon-File-Code:"\e94b";
--icon-File-DOC:"\e94c";
--icon-File-Download:"\e94d";
--icon-File-GIF:"\e94e";
--icon-File-Image:"\e94f";
--icon-File-Info:"\e950";
--icon-File-Money:"\ea01";
--icon-File-Music:"\e951";
--icon-File-PDF:"\e952";
--icon-File-Pie:"\e953";
--icon-File-PNG:"\e954";
--icon-File-PPT:"\e955";
--icon-File-Remove:"\e956";
--icon-File-Search:"\e957";
--icon-File-Settings:"\e958";
--icon-File-Shield:"\e959";
--icon-File-Shred:"\e95a";
--icon-File-Text:"\e95b";
--icon-File-TIFF:"\e95c";
--icon-File-Transfer:"\e95d";
--icon-File-Unknown:"\e95e";
--icon-File-Upload:"\e95f";
--icon-File-User:"\e960";
--icon-File-Warning:"\e961";
--icon-File-XLS:"\e962";
--icon-File-XML:"\e963";
--icon-Filter:"\e964";
--icon-Filter-Cog:"\e9eb";
--icon-Finance:"\e965";
--icon-Fingerprint:"\ea20";
--icon-Flow:"\ea0a";
--icon-Folder:"\e966";
--icon-Folder-Minus:"\e967";
--icon-Folder-Open:"\e968";
--icon-Folder-Plus:"\e969";
--icon-Folders:"\e96a";
--icon-Form:"\ea6e";
--icon-Full-Screen:"\e96b";
--icon-Gallery:"\e9e9";
--icon-Gantt:"\e96c";
--icon-Gauge:"\ea13";
--icon-Gear:"\e96d";
--icon-Gears:"\e9ee";
--icon-Globe:"\e96e";
--icon-Grid:"\e9de";
--icon-Grid-O:"\e9df";
--icon-Hamburger:"\e96f";
--icon-HandPointer:"\e970";
--icon-Handshake:"\ea21";
--icon-Hangup:"\e971";
--icon-Headset:"\ea22";
--icon-Heart:"\ea33";
--icon-Home:"\e972";
--icon-ID-Badge:"\ea23";
--icon-Image:"\e973";
--icon-Import:"\e974";
--icon-Inbox:"\ea0d";
--icon-Incident:"\ea49";
--icon-Initiative:"\ea59";
--icon-Internet:"\e975";
--icon-Inventory-Move:"\ea3c";
--icon-Inventory-Slip:"\ea12";
--icon-Invoice:"\e976";
--icon-Item:"\e977";
--icon-Items:"\e978";
--icon-Kanban:"\e9e5";
--icon-Key:"\e979";
--icon-Laptop:"\e97a";
--icon-Layout-Horizontal:"\e9f3";
--icon-Layout-Vertical:"\e9f2";
--icon-Leaf:"\ea70";
--icon-Lightning:"\ea24";
--icon-List:"\e97b";
--icon-List-Settings:"\ea08";
--icon-Lock:"\ea0e";
--icon-Management:"\ea4c";
--icon-Map:"\e97c";
--icon-Medal:"\ea53";
--icon-Medical:"\ea5a";
--icon-Megaphone:"\ea25";
--icon-Mentorship:"\ea41";
--icon-Menu:"\e97d";
--icon-Merge:"\e97e";
--icon-Metrics:"\e97f";
--icon-Mic:"\e980";
--icon-Mobile:"\e981";
--icon-Money:"\e982";
--icon-Money-Bag:"\e983";
--icon-Money-Building:"\e984";
--icon-Money-Calculator:"\e985";
--icon-Money-Check:"\e986";
--icon-Money-Delete:"\e987";
--icon-Money-Gift:"\e988";
--icon-Money-Hand:"\e989";
--icon-Money-In:"\e98a";
--icon-Money-Out:"\e98b";
--icon-Money-Receipt:"\e98c";
--icon-Money-Settings:"\e98d";
--icon-Money-Slash:"\e98e";
--icon-Money-User:"\e98f";
--icon-Money-Users:"\e990";
--icon-Money-Withdrawal:"\e991";
--icon-More:"\ea69";
--icon-Move-Down:"\ea37";
--icon-Move-Up:"\ea36";
--icon-Mute:"\e992";
--icon-New:"\e993";
--icon-News:"\ea50";
--icon-Nodes:"\ea14";
--icon-Note:"\e9db";
--icon-OCR:"\e994";
--icon-Org-Building:"\ea0b";
--icon-Org-Chart:"\ea2d";
--icon-Package:"\ea16";
--icon-Page:"\e995";
--icon-Page-Add:"\e996";
--icon-Page-Clear:"\e997";
--icon-Page-Copy:"\e998";
--icon-Page-Delete:"\e999";
--icon-Page-Edit:"\e99a";
--icon-Page-Remove:"\e99b";
--icon-Page-Search:"\e99c";
--icon-Panel-Add:"\ea0f";
--icon-PaperClip:"\e99d";
--icon-Paste:"\e99e";
--icon-PauseCircle:"\e9d8";
--icon-Pencil:"\e99f";
--icon-Percent:"\ea27";
--icon-Picking-List:"\ea6a";
--icon-Pie-Chart:"\e9a0";
--icon-Pin-User:"\e9fa";
--icon-Pivot:"\e9a1";
--icon-PlayCircle:"\e9d7";
--icon-Plus:"\e9a2";
--icon-Plus-Circle:"\e9f5";
--icon-Policy:"\ea5d";
--icon-POS:"\ea56";
--icon-Prerequisite:"\ea5c";
--icon-Price-List:"\ea07";
--icon-Print:"\e9a3";
--icon-PrintPreview:"\e9a4";
--icon-Production:"\ea63";
--icon-Production-Halt:"\ea44";
--icon-Project:"\e9a5";
--icon-Quality-Seal:"\ea2a";
--icon-Question:"\ea34";
--icon-Queue:"\ea43";
--icon-Quick-Input:"\e9a6";
--icon-Receipt:"\e9a7";
--icon-Receipt-Check:"\e9f8";
--icon-Recipe:"\ea35";
--icon-Redo:"\e9a8";
--icon-Refresh:"\e9a9";
--icon-Repeat:"\ea38";
--icon-Replace:"\e9aa";
--icon-Report:"\e9ab";
--icon-Risk-Matrix:"\e9ed";
--icon-Robot:"\ea28";
--icon-Route:"\ea26";
--icon-Safe:"\e9ac";
--icon-Save:"\e9ad";
--icon-Scale:"\e9ae";
--icon-Scan:"\ea29";
--icon-Search:"\e9af";
--icon-Security:"\e9b0";
--icon-Send:"\ea6c";
--icon-Server:"\e9b1";
--icon-Service-Bell:"\e9b2";
--icon-Severance:"\ea15";
--icon-Share:"\e9dc";
--icon-Shield-Check:"\ea3f";
--icon-Ship:"\e9b3";
--icon-Shipment:"\ea62";
--icon-Shop:"\e9b4";
--icon-Shop-Hours:"\ea3d";
--icon-Shopping-Bag:"\e9b5";
--icon-Shopping-Cart:"\e9b6";
--icon-SiteMap:"\e9b7";
--icon-Skills:"\ea40";
--icon-Spreadsheet:"\e9ea";
--icon-Square:"\e9b8";
--icon-Square-Check:"\e9b9";
--icon-Square-Clock:"\e9e3";
--icon-Square-Close:"\e9ba";
--icon-Square-Favorite:"\e9e4";
--icon-Square-Minus:"\e9bb";
--icon-Square-Pause:"\e9e2";
--icon-Square-Play:"\e9e1";
--icon-Square-Plus:"\e9bc";
--icon-Stack:"\e9fb";
--icon-Stages:"\ea3e";
--icon-Stakeholder:"\ea5b";
--icon-Star:"\e9bd";
--icon-Star-Solid:"\e9be";
--icon-Strategy:"\ea67";
--icon-Supplier:"\ea61";
--icon-System:"\e9bf";
--icon-Tab:"\e9c0";
--icon-Table:"\e9f6";
--icon-Tablet:"\e9c1";
--icon-Tag:"\ea11";
--icon-Task:"\e9c2";
--icon-Task-List:"\e9fe";
--icon-Tasks:"\e9c3";
--icon-Tax-Office:"\ea65";
--icon-Team-Settings:"\ea64";
--icon-Text:"\e9c4";
--icon-Text-Select:"\ea0c";
--icon-Thumbs-Down:"\e9c5";
--icon-Thumbs-Up:"\e9c6";
--icon-Ticket:"\ea2c";
--icon-Timeline:"\e9e6";
--icon-Times:"\e9c7";
--icon-Trash:"\e9c8";
--icon-TreeList:"\e9c9";
--icon-Trend-Down:"\ea2e";
--icon-Trend-Up:"\ea2f";
--icon-Trial-Balance:"\ea6b";
--icon-Triangle-Down:"\e9ca";
--icon-Triangle-Left:"\e9cb";
--icon-Triangle-Right:"\e9cc";
--icon-Triangle-Up:"\e9cd";
--icon-Truck:"\ea03";
--icon-Umbrella:"\ea30";
--icon-Undo:"\e9ce";
--icon-Unlock:"\e9f0";
--icon-Usage:"\ea4b";
--icon-User:"\e9cf";
--icon-User-Block:"\e9ef";
--icon-User-Call:"\ea02";
--icon-User-Chat:"\ea5e";
--icon-User-Focus:"\e9ff";
--icon-User-Key:"\ea6f";
--icon-User-Minus:"\e9f1";
--icon-User-Plus:"\ea4e";
--icon-Users:"\e9d0";
--icon-User-Search:"\ea09";
--icon-UserSlash:"\e9d1";
--icon-Vertical:"\e9d2";
--icon-Video:"\e9d3";
--icon-ViewTypes:"\EA67";
--icon-Wallet:"\e9d4";
--icon-Warehouse:"\ea17";
--icon-Warning-Triangle:"\e9fc";
--icon-Waybill:"\ea45";
--icon-Weekly:"\ea47";
--icon-WhatsApp:"\ea31";
--icon-Window-Minimize:"\e9d5";
--icon-Workstation:"\e9f4";
--icon-Wrench:"\ea32";
--icon-Yearly:"\ea48";

				}

				.icon-361Atom::before{ content : var(--icon-361Atom);}
.icon-Account-Group::before{ content : var(--icon-Account-Group);}
.icon-Accounting::before{ content : var(--icon-Accounting);}
.icon-Add::before{ content : var(--icon-Add);}
.icon-AlarmCircle::before{ content : var(--icon-AlarmCircle);}
.icon-Anchor::before{ content : var(--icon-Anchor);}
.icon-Apps::before{ content : var(--icon-Apps);}
.icon-Arrow-Down::before{ content : var(--icon-Arrow-Down);}
.icon-Arrow-Down-Long::before{ content : var(--icon-Arrow-Down-Long);}
.icon-Arrow-Left::before{ content : var(--icon-Arrow-Left);}
.icon-Arrow-Right::before{ content : var(--icon-Arrow-Right);}
.icon-Arrows::before{ content : var(--icon-Arrows);}
.icon-Arrow-Up::before{ content : var(--icon-Arrow-Up);}
.icon-Arrow-Up-Down-Long::before{ content : var(--icon-Arrow-Up-Down-Long);}
.icon-Arrow-Up-Long::before{ content : var(--icon-Arrow-Up-Long);}
.icon-Article::before{ content : var(--icon-Article);}
.icon-Asset::before{ content : var(--icon-Asset);}
.icon-Attach::before{ content : var(--icon-Attach);}
.icon-Auditor::before{ content : var(--icon-Auditor);}
.icon-Award::before{ content : var(--icon-Award);}
.icon-Bank::before{ content : var(--icon-Bank);}
.icon-Bank-Transfer::before{ content : var(--icon-Bank-Transfer);}
.icon-Bar-Chart::before{ content : var(--icon-Bar-Chart);}
.icon-BarCode::before{ content : var(--icon-BarCode);}
.icon-Behavior::before{ content : var(--icon-Behavior);}
.icon-Bell::before{ content : var(--icon-Bell);}
.icon-Bitcoin::before{ content : var(--icon-Bitcoin);}
.icon-Brain::before{ content : var(--icon-Brain);}
.icon-Broadcast::before{ content : var(--icon-Broadcast);}
.icon-Bug::before{ content : var(--icon-Bug);}
.icon-Building::before{ content : var(--icon-Building);}
.icon-Business::before{ content : var(--icon-Business);}
.icon-Business-Card::before{ content : var(--icon-Business-Card);}
.icon-Business-Contact::before{ content : var(--icon-Business-Contact);}
.icon-Calculator::before{ content : var(--icon-Calculator);}
.icon-Calendar::before{ content : var(--icon-Calendar);}
.icon-Calendar-Edit::before{ content : var(--icon-Calendar-Edit);}
.icon-Calendar-Month::before{ content : var(--icon-Calendar-Month);}
.icon-Call::before{ content : var(--icon-Call);}
.icon-Calling::before{ content : var(--icon-Calling);}
.icon-Call-List::before{ content : var(--icon-Call-List);}
.icon-Camera::before{ content : var(--icon-Camera);}
.icon-Cancel::before{ content : var(--icon-Cancel);}
.icon-Card::before{ content : var(--icon-Card);}
.icon-Certificate::before{ content : var(--icon-Certificate);}
.icon-Chart::before{ content : var(--icon-Chart);}
.icon-Chart-Line::before{ content : var(--icon-Chart-Line);}
.icon-Chart-Panel::before{ content : var(--icon-Chart-Panel);}
.icon-Chart-Report::before{ content : var(--icon-Chart-Report);}
.icon-Chart-Scatter::before{ content : var(--icon-Chart-Scatter);}
.icon-Chat::before{ content : var(--icon-Chat);}
.icon-Check::before{ content : var(--icon-Check);}
.icon-Check-Double::before{ content : var(--icon-Check-Double);}
.icon-Chevron-Down::before{ content : var(--icon-Chevron-Down);}
.icon-Chevron-Left::before{ content : var(--icon-Chevron-Left);}
.icon-Chevron-Right::before{ content : var(--icon-Chevron-Right);}
.icon-Chevron-Up::before{ content : var(--icon-Chevron-Up);}
.icon-Circle::before{ content : var(--icon-Circle);}
.icon-Circle-Check::before{ content : var(--icon-Circle-Check);}
.icon-Circle-Dot::before{ content : var(--icon-Circle-Dot);}
.icon-Circle-Down::before{ content : var(--icon-Circle-Down);}
.icon-Circle-Left::before{ content : var(--icon-Circle-Left);}
.icon-Circle-Pause::before{ content : var(--icon-Circle-Pause);}
.icon-Circle-Play::before{ content : var(--icon-Circle-Play);}
.icon-Circle-Right::before{ content : var(--icon-Circle-Right);}
.icon-Circle-Solid::before{ content : var(--icon-Circle-Solid);}
.icon-Circle-Stop::before{ content : var(--icon-Circle-Stop);}
.icon-Circle-Times::before{ content : var(--icon-Circle-Times);}
.icon-Circle-Up::before{ content : var(--icon-Circle-Up);}
.icon-Circle-User::before{ content : var(--icon-Circle-User);}
.icon-City::before{ content : var(--icon-City);}
.icon-Clipboard::before{ content : var(--icon-Clipboard);}
.icon-Clipboard-Check::before{ content : var(--icon-Clipboard-Check);}
.icon-Clone::before{ content : var(--icon-Clone);}
.icon-Close::before{ content : var(--icon-Close);}
.icon-Code::before{ content : var(--icon-Code);}
.icon-Cog::before{ content : var(--icon-Cog);}
.icon-Coins::before{ content : var(--icon-Coins);}
.icon-Color-Picker::before{ content : var(--icon-Color-Picker);}
.icon-Comments::before{ content : var(--icon-Comments);}
.icon-Community::before{ content : var(--icon-Community);}
.icon-Compass::before{ content : var(--icon-Compass);}
.icon-Components::before{ content : var(--icon-Components);}
.icon-Container::before{ content : var(--icon-Container);}
.icon-Contract::before{ content : var(--icon-Contract);}
.icon-Copy::before{ content : var(--icon-Copy);}
.icon-CPU::before{ content : var(--icon-CPU);}
.icon-Credit-Card::before{ content : var(--icon-Credit-Card);}
.icon-Cube::before{ content : var(--icon-Cube);}
.icon-Cubes::before{ content : var(--icon-Cubes);}
.icon-Daily::before{ content : var(--icon-Daily);}
.icon-Dashboard::before{ content : var(--icon-Dashboard);}
.icon-Database::before{ content : var(--icon-Database);}
.icon-Date-Picker::before{ content : var(--icon-Date-Picker);}
.icon-Delete::before{ content : var(--icon-Delete);}
.icon-Desktop::before{ content : var(--icon-Desktop);}
.icon-Device::before{ content : var(--icon-Device);}
.icon-Dispatch::before{ content : var(--icon-Dispatch);}
.icon-Doc-Edit::before{ content : var(--icon-Doc-Edit);}
.icon-Doc-List::before{ content : var(--icon-Doc-List);}
.icon-Dot::before{ content : var(--icon-Dot);}
.icon-Edit::before{ content : var(--icon-Edit);}
.icon-Edit-Settings::before{ content : var(--icon-Edit-Settings);}
.icon-E-Mail::before{ content : var(--icon-E-Mail);}
.icon-Energy::before{ content : var(--icon-Energy);}
.icon-Envelop::before{ content : var(--icon-Envelop);}
.icon-Eraser::before{ content : var(--icon-Eraser);}
.icon-Exchange::before{ content : var(--icon-Exchange);}
.icon-Exclamation::before{ content : var(--icon-Exclamation);}
.icon-Export::before{ content : var(--icon-Export);}
.icon-External-Link::before{ content : var(--icon-External-Link);}
.icon-Eye::before{ content : var(--icon-Eye);}
.icon-EyeSlash::before{ content : var(--icon-EyeSlash);}
.icon-Factory::before{ content : var(--icon-Factory);}
.icon-FavoriteCircle::before{ content : var(--icon-FavoriteCircle);}
.icon-Field::before{ content : var(--icon-Field);}
.icon-File::before{ content : var(--icon-File);}
.icon-File-Add::before{ content : var(--icon-File-Add);}
.icon-File-Bar::before{ content : var(--icon-File-Bar);}
.icon-File-Code::before{ content : var(--icon-File-Code);}
.icon-File-DOC::before{ content : var(--icon-File-DOC);}
.icon-File-Download::before{ content : var(--icon-File-Download);}
.icon-File-GIF::before{ content : var(--icon-File-GIF);}
.icon-File-Image::before{ content : var(--icon-File-Image);}
.icon-File-Info::before{ content : var(--icon-File-Info);}
.icon-File-Money::before{ content : var(--icon-File-Money);}
.icon-File-Music::before{ content : var(--icon-File-Music);}
.icon-File-PDF::before{ content : var(--icon-File-PDF);}
.icon-File-Pie::before{ content : var(--icon-File-Pie);}
.icon-File-PNG::before{ content : var(--icon-File-PNG);}
.icon-File-PPT::before{ content : var(--icon-File-PPT);}
.icon-File-Remove::before{ content : var(--icon-File-Remove);}
.icon-File-Search::before{ content : var(--icon-File-Search);}
.icon-File-Settings::before{ content : var(--icon-File-Settings);}
.icon-File-Shield::before{ content : var(--icon-File-Shield);}
.icon-File-Shred::before{ content : var(--icon-File-Shred);}
.icon-File-Text::before{ content : var(--icon-File-Text);}
.icon-File-TIFF::before{ content : var(--icon-File-TIFF);}
.icon-File-Transfer::before{ content : var(--icon-File-Transfer);}
.icon-File-Unknown::before{ content : var(--icon-File-Unknown);}
.icon-File-Upload::before{ content : var(--icon-File-Upload);}
.icon-File-User::before{ content : var(--icon-File-User);}
.icon-File-Warning::before{ content : var(--icon-File-Warning);}
.icon-File-XLS::before{ content : var(--icon-File-XLS);}
.icon-File-XML::before{ content : var(--icon-File-XML);}
.icon-Filter::before{ content : var(--icon-Filter);}
.icon-Filter-Cog::before{ content : var(--icon-Filter-Cog);}
.icon-Finance::before{ content : var(--icon-Finance);}
.icon-Fingerprint::before{ content : var(--icon-Fingerprint);}
.icon-Flow::before{ content : var(--icon-Flow);}
.icon-Folder::before{ content : var(--icon-Folder);}
.icon-Folder-Minus::before{ content : var(--icon-Folder-Minus);}
.icon-Folder-Open::before{ content : var(--icon-Folder-Open);}
.icon-Folder-Plus::before{ content : var(--icon-Folder-Plus);}
.icon-Folders::before{ content : var(--icon-Folders);}
.icon-Form::before{ content : var(--icon-Form);}
.icon-Full-Screen::before{ content : var(--icon-Full-Screen);}
.icon-Gallery::before{ content : var(--icon-Gallery);}
.icon-Gantt::before{ content : var(--icon-Gantt);}
.icon-Gauge::before{ content : var(--icon-Gauge);}
.icon-Gear::before{ content : var(--icon-Gear);}
.icon-Gears::before{ content : var(--icon-Gears);}
.icon-Globe::before{ content : var(--icon-Globe);}
.icon-Grid::before{ content : var(--icon-Grid);}
.icon-Grid-O::before{ content : var(--icon-Grid-O);}
.icon-Hamburger::before{ content : var(--icon-Hamburger);}
.icon-HandPointer::before{ content : var(--icon-HandPointer);}
.icon-Handshake::before{ content : var(--icon-Handshake);}
.icon-Hangup::before{ content : var(--icon-Hangup);}
.icon-Headset::before{ content : var(--icon-Headset);}
.icon-Heart::before{ content : var(--icon-Heart);}
.icon-Home::before{ content : var(--icon-Home);}
.icon-ID-Badge::before{ content : var(--icon-ID-Badge);}
.icon-Image::before{ content : var(--icon-Image);}
.icon-Import::before{ content : var(--icon-Import);}
.icon-Inbox::before{ content : var(--icon-Inbox);}
.icon-Incident::before{ content : var(--icon-Incident);}
.icon-Initiative::before{ content : var(--icon-Initiative);}
.icon-Internet::before{ content : var(--icon-Internet);}
.icon-Inventory-Move::before{ content : var(--icon-Inventory-Move);}
.icon-Inventory-Slip::before{ content : var(--icon-Inventory-Slip);}
.icon-Invoice::before{ content : var(--icon-Invoice);}
.icon-Item::before{ content : var(--icon-Item);}
.icon-Items::before{ content : var(--icon-Items);}
.icon-Kanban::before{ content : var(--icon-Kanban);}
.icon-Key::before{ content : var(--icon-Key);}
.icon-Laptop::before{ content : var(--icon-Laptop);}
.icon-Layout-Horizontal::before{ content : var(--icon-Layout-Horizontal);}
.icon-Layout-Vertical::before{ content : var(--icon-Layout-Vertical);}
.icon-Leaf::before{ content : var(--icon-Leaf);}
.icon-Lightning::before{ content : var(--icon-Lightning);}
.icon-List::before{ content : var(--icon-List);}
.icon-List-Settings::before{ content : var(--icon-List-Settings);}
.icon-Lock::before{ content : var(--icon-Lock);}
.icon-Management::before{ content : var(--icon-Management);}
.icon-Map::before{ content : var(--icon-Map);}
.icon-Medal::before{ content : var(--icon-Medal);}
.icon-Medical::before{ content : var(--icon-Medical);}
.icon-Megaphone::before{ content : var(--icon-Megaphone);}
.icon-Mentorship::before{ content : var(--icon-Mentorship);}
.icon-Menu::before{ content : var(--icon-Menu);}
.icon-Merge::before{ content : var(--icon-Merge);}
.icon-Metrics::before{ content : var(--icon-Metrics);}
.icon-Mic::before{ content : var(--icon-Mic);}
.icon-Mobile::before{ content : var(--icon-Mobile);}
.icon-Money::before{ content : var(--icon-Money);}
.icon-Money-Bag::before{ content : var(--icon-Money-Bag);}
.icon-Money-Building::before{ content : var(--icon-Money-Building);}
.icon-Money-Calculator::before{ content : var(--icon-Money-Calculator);}
.icon-Money-Check::before{ content : var(--icon-Money-Check);}
.icon-Money-Delete::before{ content : var(--icon-Money-Delete);}
.icon-Money-Gift::before{ content : var(--icon-Money-Gift);}
.icon-Money-Hand::before{ content : var(--icon-Money-Hand);}
.icon-Money-In::before{ content : var(--icon-Money-In);}
.icon-Money-Out::before{ content : var(--icon-Money-Out);}
.icon-Money-Receipt::before{ content : var(--icon-Money-Receipt);}
.icon-Money-Settings::before{ content : var(--icon-Money-Settings);}
.icon-Money-Slash::before{ content : var(--icon-Money-Slash);}
.icon-Money-User::before{ content : var(--icon-Money-User);}
.icon-Money-Users::before{ content : var(--icon-Money-Users);}
.icon-Money-Withdrawal::before{ content : var(--icon-Money-Withdrawal);}
.icon-More::before{ content : var(--icon-More);}
.icon-Move-Down::before{ content : var(--icon-Move-Down);}
.icon-Move-Up::before{ content : var(--icon-Move-Up);}
.icon-Mute::before{ content : var(--icon-Mute);}
.icon-New::before{ content : var(--icon-New);}
.icon-News::before{ content : var(--icon-News);}
.icon-Nodes::before{ content : var(--icon-Nodes);}
.icon-Note::before{ content : var(--icon-Note);}
.icon-OCR::before{ content : var(--icon-OCR);}
.icon-Org-Building::before{ content : var(--icon-Org-Building);}
.icon-Org-Chart::before{ content : var(--icon-Org-Chart);}
.icon-Package::before{ content : var(--icon-Package);}
.icon-Page::before{ content : var(--icon-Page);}
.icon-Page-Add::before{ content : var(--icon-Page-Add);}
.icon-Page-Clear::before{ content : var(--icon-Page-Clear);}
.icon-Page-Copy::before{ content : var(--icon-Page-Copy);}
.icon-Page-Delete::before{ content : var(--icon-Page-Delete);}
.icon-Page-Edit::before{ content : var(--icon-Page-Edit);}
.icon-Page-Remove::before{ content : var(--icon-Page-Remove);}
.icon-Page-Search::before{ content : var(--icon-Page-Search);}
.icon-Panel-Add::before{ content : var(--icon-Panel-Add);}
.icon-PaperClip::before{ content : var(--icon-PaperClip);}
.icon-Paste::before{ content : var(--icon-Paste);}
.icon-PauseCircle::before{ content : var(--icon-PauseCircle);}
.icon-Pencil::before{ content : var(--icon-Pencil);}
.icon-Percent::before{ content : var(--icon-Percent);}
.icon-Picking-List::before{ content : var(--icon-Picking-List);}
.icon-Pie-Chart::before{ content : var(--icon-Pie-Chart);}
.icon-Pin-User::before{ content : var(--icon-Pin-User);}
.icon-Pivot::before{ content : var(--icon-Pivot);}
.icon-PlayCircle::before{ content : var(--icon-PlayCircle);}
.icon-Plus::before{ content : var(--icon-Plus);}
.icon-Plus-Circle::before{ content : var(--icon-Plus-Circle);}
.icon-Policy::before{ content : var(--icon-Policy);}
.icon-POS::before{ content : var(--icon-POS);}
.icon-Prerequisite::before{ content : var(--icon-Prerequisite);}
.icon-Price-List::before{ content : var(--icon-Price-List);}
.icon-Print::before{ content : var(--icon-Print);}
.icon-PrintPreview::before{ content : var(--icon-PrintPreview);}
.icon-Production::before{ content : var(--icon-Production);}
.icon-Production-Halt::before{ content : var(--icon-Production-Halt);}
.icon-Project::before{ content : var(--icon-Project);}
.icon-Quality-Seal::before{ content : var(--icon-Quality-Seal);}
.icon-Question::before{ content : var(--icon-Question);}
.icon-Queue::before{ content : var(--icon-Queue);}
.icon-Quick-Input::before{ content : var(--icon-Quick-Input);}
.icon-Receipt::before{ content : var(--icon-Receipt);}
.icon-Receipt-Check::before{ content : var(--icon-Receipt-Check);}
.icon-Recipe::before{ content : var(--icon-Recipe);}
.icon-Redo::before{ content : var(--icon-Redo);}
.icon-Refresh::before{ content : var(--icon-Refresh);}
.icon-Repeat::before{ content : var(--icon-Repeat);}
.icon-Replace::before{ content : var(--icon-Replace);}
.icon-Report::before{ content : var(--icon-Report);}
.icon-Risk-Matrix::before{ content : var(--icon-Risk-Matrix);}
.icon-Robot::before{ content : var(--icon-Robot);}
.icon-Route::before{ content : var(--icon-Route);}
.icon-Safe::before{ content : var(--icon-Safe);}
.icon-Save::before{ content : var(--icon-Save);}
.icon-Scale::before{ content : var(--icon-Scale);}
.icon-Scan::before{ content : var(--icon-Scan);}
.icon-Search::before{ content : var(--icon-Search);}
.icon-Security::before{ content : var(--icon-Security);}
.icon-Send::before{ content : var(--icon-Send);}
.icon-Server::before{ content : var(--icon-Server);}
.icon-Service-Bell::before{ content : var(--icon-Service-Bell);}
.icon-Severance::before{ content : var(--icon-Severance);}
.icon-Share::before{ content : var(--icon-Share);}
.icon-Shield-Check::before{ content : var(--icon-Shield-Check);}
.icon-Ship::before{ content : var(--icon-Ship);}
.icon-Shipment::before{ content : var(--icon-Shipment);}
.icon-Shop::before{ content : var(--icon-Shop);}
.icon-Shop-Hours::before{ content : var(--icon-Shop-Hours);}
.icon-Shopping-Bag::before{ content : var(--icon-Shopping-Bag);}
.icon-Shopping-Cart::before{ content : var(--icon-Shopping-Cart);}
.icon-SiteMap::before{ content : var(--icon-SiteMap);}
.icon-Skills::before{ content : var(--icon-Skills);}
.icon-Spreadsheet::before{ content : var(--icon-Spreadsheet);}
.icon-Square::before{ content : var(--icon-Square);}
.icon-Square-Check::before{ content : var(--icon-Square-Check);}
.icon-Square-Clock::before{ content : var(--icon-Square-Clock);}
.icon-Square-Close::before{ content : var(--icon-Square-Close);}
.icon-Square-Favorite::before{ content : var(--icon-Square-Favorite);}
.icon-Square-Minus::before{ content : var(--icon-Square-Minus);}
.icon-Square-Pause::before{ content : var(--icon-Square-Pause);}
.icon-Square-Play::before{ content : var(--icon-Square-Play);}
.icon-Square-Plus::before{ content : var(--icon-Square-Plus);}
.icon-Stack::before{ content : var(--icon-Stack);}
.icon-Stages::before{ content : var(--icon-Stages);}
.icon-Stakeholder::before{ content : var(--icon-Stakeholder);}
.icon-Star::before{ content : var(--icon-Star);}
.icon-Star-Solid::before{ content : var(--icon-Star-Solid);}
.icon-Strategy::before{ content : var(--icon-Strategy);}
.icon-Supplier::before{ content : var(--icon-Supplier);}
.icon-System::before{ content : var(--icon-System);}
.icon-Tab::before{ content : var(--icon-Tab);}
.icon-Table::before{ content : var(--icon-Table);}
.icon-Tablet::before{ content : var(--icon-Tablet);}
.icon-Tag::before{ content : var(--icon-Tag);}
.icon-Task::before{ content : var(--icon-Task);}
.icon-Task-List::before{ content : var(--icon-Task-List);}
.icon-Tasks::before{ content : var(--icon-Tasks);}
.icon-Tax-Office::before{ content : var(--icon-Tax-Office);}
.icon-Team-Settings::before{ content : var(--icon-Team-Settings);}
.icon-Text::before{ content : var(--icon-Text);}
.icon-Text-Select::before{ content : var(--icon-Text-Select);}
.icon-Thumbs-Down::before{ content : var(--icon-Thumbs-Down);}
.icon-Thumbs-Up::before{ content : var(--icon-Thumbs-Up);}
.icon-Ticket::before{ content : var(--icon-Ticket);}
.icon-Timeline::before{ content : var(--icon-Timeline);}
.icon-Times::before{ content : var(--icon-Times);}
.icon-Trash::before{ content : var(--icon-Trash);}
.icon-TreeList::before{ content : var(--icon-TreeList);}
.icon-Trend-Down::before{ content : var(--icon-Trend-Down);}
.icon-Trend-Up::before{ content : var(--icon-Trend-Up);}
.icon-Trial-Balance::before{ content : var(--icon-Trial-Balance);}
.icon-Triangle-Down::before{ content : var(--icon-Triangle-Down);}
.icon-Triangle-Left::before{ content : var(--icon-Triangle-Left);}
.icon-Triangle-Right::before{ content : var(--icon-Triangle-Right);}
.icon-Triangle-Up::before{ content : var(--icon-Triangle-Up);}
.icon-Truck::before{ content : var(--icon-Truck);}
.icon-Umbrella::before{ content : var(--icon-Umbrella);}
.icon-Undo::before{ content : var(--icon-Undo);}
.icon-Unlock::before{ content : var(--icon-Unlock);}
.icon-Usage::before{ content : var(--icon-Usage);}
.icon-User::before{ content : var(--icon-User);}
.icon-User-Block::before{ content : var(--icon-User-Block);}
.icon-User-Call::before{ content : var(--icon-User-Call);}
.icon-User-Chat::before{ content : var(--icon-User-Chat);}
.icon-User-Focus::before{ content : var(--icon-User-Focus);}
.icon-User-Key::before{ content : var(--icon-User-Key);}
.icon-User-Minus::before{ content : var(--icon-User-Minus);}
.icon-User-Plus::before{ content : var(--icon-User-Plus);}
.icon-Users::before{ content : var(--icon-Users);}
.icon-User-Search::before{ content : var(--icon-User-Search);}
.icon-UserSlash::before{ content : var(--icon-UserSlash);}
.icon-Vertical::before{ content : var(--icon-Vertical);}
.icon-Video::before{ content : var(--icon-Video);}
.icon-ViewTypes::before{ content : var(--icon-ViewTypes);}
.icon-Wallet::before{ content : var(--icon-Wallet);}
.icon-Warehouse::before{ content : var(--icon-Warehouse);}
.icon-Warning-Triangle::before{ content : var(--icon-Warning-Triangle);}
.icon-Waybill::before{ content : var(--icon-Waybill);}
.icon-Weekly::before{ content : var(--icon-Weekly);}
.icon-WhatsApp::before{ content : var(--icon-WhatsApp);}
.icon-Window-Minimize::before{ content : var(--icon-Window-Minimize);}
.icon-Workstation::before{ content : var(--icon-Workstation);}
.icon-Wrench::before{ content : var(--icon-Wrench);}
.icon-Yearly::before{ content : var(--icon-Yearly);}


/* META  : .Base.Root */
* {
    box-sizing: border-box;

    scrollbar-width: thin;
}

body {
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    font-size: 11px;
    margin: 0 auto;
    scrollbar-width: thin;
    letter-spacing: normal;
    background-color: var(--backColor);
}

body, html, div#__User__,.Page,.PageZones {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

html {
    box-sizing: border-box;
    font-size: 11px;
    background-color: var(--backColor);
}

@media (prefers-color-scheme: dark) {
    html.auto-theme {
        --backColor: #1a1d23;
        --backColor2: #22262e;
        --backColor3: #2a2e38;
        --textColor: #e0e0e0;
        --multiItemBackColor: #22262e;
        --singleItemBackColor: #2a2e38;
        --menuBackColor: #14161a;
        --menuSelectedBackColor: #2a2e38;
        --labelColor: #8ab4f8;
        --border1: solid 1px rgba(255,255,255,0.08);
        --border2: solid 1px rgba(255,255,255,0.12);
        --border3: solid 1px rgba(255,255,255,0.18);
        --inputBorder: solid 1px rgba(255,255,255,0.15);
        --borderColor: rgba(255,255,255,0.12);
        --shadow1: 0 0 1px rgba(255,255,255,0.1);
        --shadowColor: rgba(0,0,0,0.4);
        --iconBackColor: #2a2e38;
        --iconColor: #b0b8d0;
        --iconShadow: 1px 1px 3px rgba(0,0,0,0.5);
        --footerBackColor: #14161a;
        --headerBackColor: #1a1d23;
        --footerTextColor: #e0e0e0;
        --headerTextColor: #e0e0e0;
        --inputBackColor: #2a2e38;
        --inputTextColor: #e0e0e0;
        --panelHeaderTextColor: #8ab4f8;
        --panelHeaderBackColor: rgba(255,255,255,0.04);
        --hoverBackColor: rgba(255,255,255,0.06);
        --selectionColor: rgba(59,130,246,0.3);
        --scrollbarThumbColor: rgba(255,255,255,0.2);
        --scrollbarTrackColor: rgba(255,255,255,0.03);
        --itemBack: #262a35;
        --surfaceColor: #262a35;
        --BgColor1: 30, 33, 41;
        --ReadOnlyColor: 180, 180, 200;
        --textRGB: 200, 205, 220;
        --shadowRGB: 0, 0, 0;
        --buttonBackColor: #404558;
        --buttonBackColorHover: #505570;
        --buttonTextColor: #e0e0e0;
        --buttonBoxShadow: 0 0 1px rgba(255,255,255,0.1);
        --buttonBoxShadowHover: 0 0 4px rgba(255,255,255,0.15);
        --primaryButtonBackColor: #5a9e0e;
        --disabledColor: #666;
        --linkColor: #5b9cef;
        --focusColor: rgb(80,140,220);
        --activeBorderColor: rgb(80,140,220);
        --inputFocusBorderColor: rgb(80,140,220);
        --contentHeaderBackground: linear-gradient(135deg, rgba(30,35,50,0.95), rgba(25,30,45,0.95));
        --color1: #3b8df0;
        --color2: #555;
        --color4: #e05545;
    }
}

html.dark-theme {
    --backColor: #1a1d23;
    --backColor2: #22262e;
    --backColor3: #2a2e38;
    --textColor: #e0e0e0;
    --multiItemBackColor: #22262e;
    --singleItemBackColor: #2a2e38;
    --menuBackColor: #14161a;
    --menuSelectedBackColor: #2a2e38;
    --labelColor: #8ab4f8;
    --border1: solid 1px rgba(255,255,255,0.08);
    --border2: solid 1px rgba(255,255,255,0.12);
    --border3: solid 1px rgba(255,255,255,0.18);
    --inputBorder: solid 1px rgba(255,255,255,0.15);
    --borderColor: rgba(255,255,255,0.12);
    --shadow1: 0 0 1px rgba(255,255,255,0.1);
    --shadowColor: rgba(0,0,0,0.4);
    --iconBackColor: #2a2e38;
    --iconColor: #b0b8d0;
    --iconShadow: 1px 1px 3px rgba(0,0,0,0.5);
    --footerBackColor: #14161a;
    --headerBackColor: #1a1d23;
    --footerTextColor: #e0e0e0;
    --headerTextColor: #e0e0e0;
    --inputBackColor: #2a2e38;
    --inputTextColor: #e0e0e0;
    --panelHeaderTextColor: #8ab4f8;
    --panelHeaderBackColor: rgba(255,255,255,0.04);
    --hoverBackColor: rgba(255,255,255,0.06);
    --selectionColor: rgba(59,130,246,0.3);
    --scrollbarThumbColor: rgba(255,255,255,0.2);
    --scrollbarTrackColor: rgba(255,255,255,0.03);
    --itemBack: #262a35;
    --surfaceColor: #262a35;
    --BgColor1: 30, 33, 41;
    --ReadOnlyColor: 180, 180, 200;
    --textRGB: 200, 205, 220;
    --shadowRGB: 0, 0, 0;
    --buttonBackColor: #404558;
    --buttonBackColorHover: #505570;
    --buttonTextColor: #e0e0e0;
    --buttonBoxShadow: 0 0 1px rgba(255,255,255,0.1);
    --buttonBoxShadowHover: 0 0 4px rgba(255,255,255,0.15);
    --primaryButtonBackColor: #5a9e0e;
    --disabledColor: #666;
    --linkColor: #5b9cef;
    --focusColor: rgb(80,140,220);
    --activeBorderColor: rgb(80,140,220);
    --inputFocusBorderColor: rgb(80,140,220);
    --contentHeaderBackground: linear-gradient(135deg, rgba(30,35,50,0.95), rgba(25,30,45,0.95));
    --color1: #3b8df0;
    --color2: #555;
    --color4: #e05545;
}


/* META  : .Base.Root.ResetElements */
body#User {
    padding: 0;
    height: 100%;
    top: 0;
    bottom: 0;
}

#__User__ {
    display: block;
    height: 100%;
    width: 100%;
}

b {
    font-weight: bold;
}

table {
    font-size: inherit;
}

strong {
    font-weight: bold;
}

option
{
    font-weight: 300 !important;
    padding: 0.75em !important;
}

img {
    display: inline-block;
    min-height: 100%;
    vertical-align: middle;
    object-fit: contain;

}

p {
    max-width: 100%;
    white-space: normal;
    page-break-inside: avoid;
}

span {
    max-width: 100%;
    white-space: normal;
}

a {
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    font-variant: normal;
    color: inherit;
}

label {
    vertical-align: middle;
}

a:-webkit-any-link, a:any-link {
    font-variant: normal;
    text-decoration: none;
    color: inherit;
}

.Panel:only-child,
.PageZone:only-child,
.DirectionVer:only-child,
.FieldSet:only-child
{
    flex-grow: 1;
    min-width: 100%;
    min-height: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: flex-start !important;
}

/* 2026-09-01 — `DirectionFlexRow` HİÇ UYGULANMIYORDU (ölçüldü: canlı finance,
   `.FieldSet.DirectionFlexRow` taşıyan 47 düğümün 47'sinde computed
   `flex-direction: column`). Sebep saf ÖZGÜLLÜK: yukarıdaki `.FieldSet:only-child`
   (0,2,0) `column` yazıyor, `.DirectionFlexRow` (0,1,0) `row` diyor — ve ItemView
   kartında FieldSet tipik olarak TEK ÇOCUKTUR. XML "FlexRow" der, tarayıcı column çizer.
   ETKİ ÖLÇÜLDÜ: ActiveWarningsCards 6 kart için 3.007 px; satır düzeni zorlanınca
   1.984 px (-34%) — her alan ayrı satıra düşüyordu.
   ÇARE bu dosyanın KENDİ emsalini izliyor: `.ETWMenu_Open/_Closed` için zaten aynı
   şey yapılmış. Ek olarak `:only-child` OLMAYAN durumlar için SINIF TEKRARI
   (`.DirectionFlexRow.DirectionFlexRow` = 0,3,0) — sıradan bağımsız kazanır,
   `!important` gerektirmez (bu depoda ölçülmüş teknik).
   ⛔ `flex-wrap` DEĞİŞTİRİLMEDİ: `.DirectionFlexRow` `nowrap !important` diyor ve
   maddenin istediği yalnız YÖN idi. Sarma ayrı bir karardır. */
.FieldSet:only-child.ETWMenu_Open,
.FieldSet:only-child.ETWMenu_Closed,
.FieldSet:only-child.DirectionFlexRow
{
    flex-direction: row !important;
}

.FieldSet.DirectionFlexRow.DirectionFlexRow
{
    flex-direction: row;
}

/* 2026-09-04 — `DirectionFloat` and Grid containers on `.Panel:only-child`:
   Prevent `.Panel:only-child` (0,2,0) from crushing horizontal multi-column
   cards into `flex-direction: column`. Maintain row layout and grid display. */
.Panel:only-child.DirectionFloat
{
    flex-direction: row !important;
    flex-wrap: wrap !important;
}

.Panel:only-child.DashboardGrid,
.Panel:only-child.GridAutoFit,
.Panel:only-child.CardGrid,
.Panel:only-child.DashboardGrid_kpis
{
    display: grid !important;
}

.Panel:only-child > *,
.PageZone:only-child > *,
.DirectionVer:only-child > *,
.FieldSet:only-child > *
{
    height: auto !important;
}

a {
    cursor: pointer;
}

table {
    table-layout: fixed;
    border-spacing: 0;
}
.AlignCenter > .DirectionVer{
    justify-content: center!important;
}
.AlignRight > .DirectionVer{
    justify-content: flex-end !important;
}
.AlignLeft > .DirectionVer{
justify-content: flex-start !important;
}


/* META  : .Base.Root.Fonts */
@font-face {
    font-family: "Varta";
    src: url("/fonts/Varta-VariableFont_wght.ttf") format("truetype-variations");
    font-weight: 1 999;
    font-display: swap;
}

@font-face {
    font-family: "Comme";
    src: url("/fonts/Comme-VariableFont_wght.ttf") format("truetype-variations");
    font-weight: 1 999;
    font-display: swap;
}

@font-face {
    font-family: "HankenGrotesk";
    src: url("/fonts/HankenGrotesk-VariableFont_wght.ttf") format("truetype-variations");
    font-weight: 1 999;
    font-display: swap;
}

html {
    font-family: "HankenGrotesk","Comme","Varta", sans-serif, "segoe ui", Arial;
}

body, button, input, textarea, select, .ItemSelection, .Choice {
    font-family: inherit;
}


/* META  : .Base.Root.361Font */
@font-face {
font-family: '361';
src: url('/fonts/361.ttf?v=2026062903') format('truetype');   /* bump ?v= whenever 361.ttf is regenerated so browsers refetch */
font-weight: normal;
font-style: normal;
font-display: block;
}

[class^="icon-"]::before, [class*=" icon-"]::before {

font-family: '361';
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
    margin: auto;
    height: 100% !important;
    display: inline-flex;
    justify-content: center;
    flex-direction: column;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


/* META  : .Base.Root.FontAwesome */
.fa:before,.fas:before,.far:before
{
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    margin: auto;
    height: 100% !important;
    display: flex;
    justify-content: center;
    flex-direction: column;

}


/* META  : .Base.Root.Hover */
.ItemView.Clickable:hover, .FolderItem.Clickable:hover {
    cursor: pointer;
}

.SelectFields > div:hover
{
    background-color: rgba(255,222,100,0.5);
}

.ItemView.Clickable:hover,
.SelectionHover {
    outline: solid 2px coral;
    border-radius: 0 !important;
    z-index: 1 !important;
    position: relative;
}


/* META  : .Base.Root.ScrollBars */
::-webkit-scrollbar-track, ::scrollbar-track {
    background-color: transparent;
    border-radius: 1em;
}

::-webkit-scrollbar-corner, ::scrollbar-corner {
    background: transparent;
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 1em;
    background-color: rgba(127,127,127,0);
}

::-webkit-scrollbar-thumb {
    background-color: rgba(127,127,127,0.5);
    z-index: 1000;
    position: absolute;
    padding: 2px;
    border-radius: 1em;
    box-shadow: 0 0 1em rgba(33, 32, 32, 0.25) inset;
}


/* META  : .Base.Root.Colors */
.Blue, .blue {
    color: #085cb2;
}

.Red,.red {
    color: red;
}

.Green,.green {
    color: green;
}

.Silver, .silver {
    color: silver;
}

html {

    color: #676a6c;
}

body {
    color: #303030;
}

button,
input,
textarea,
select,
.ItemSelection,
.Choice
{
    background-color: rgba(255, 255, 255, 0.9);
}

input:active,
input:focus
{
    background-color: white !important;
}

input[type=checkbox] {
    background: transparent;
}

input[type=text]:enabled {
    background: #ffffff;
}

input[type=text]:disabled {
    background: #dddddd;
}


/* META  : .Base.Root.Arrows */
.updownarrow {
    transform: rotate(90deg);
    padding: 3px;
}

.uparrow
{
    padding: 3px;
}

.downarrow
{
    padding: 3px;
}

.uparrow::after {
    content: var(--icon-Arrow-Up-Long);
    font-family: "361";
}

.downarrow::after {
    content: var(--icon-Arrow-Down-Long);
    font-family: "361";
}

.updownarrow::after
{
    content: var(--icon-Arrow-Up-Down-Long);
    font-family: "361";
}


/* META  : .Base.Root.Classes */
.Hidden {
    display: none !important;
}.Disabled {
    pointer-events: none !important;
    opacity: 0.5 !important;
}

.templatevar {
    display: inline-block;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 1px solid #90caf9;
    border-radius: 4px;
    padding: 2px 6px;
    margin: 0 2px;
    font-family: Consolas, monospace;
    font-size: 0.9em;
    color: #1565c0;
    cursor: default;
    user-select: none;
}

.templatevar:hover {
    background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
}

.template-vars-popup {
    position: fixed !important;
    z-index: 999999 !important;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-height: 300px;
    overflow-y: auto;
    min-width: 250px;
}

.template-vars-header {
    font-weight: bold;
    padding: 8px 12px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    color: #424242;
    position: sticky;
    top: 0;
    z-index: 1;
}

.template-vars-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.template-vars-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.template-vars-item:hover {
    background: #e3f2fd;
}

.template-vars-item .var-title {
    flex: 1;
}

.template-vars-item .var-code {
    color: #1565c0;
    font-family: monospace;
    font-size: 0.85em;
}

.se-template-vars .var-title {
    flex: 1;
}

.se-template-vars .var-code {
    font-family: Consolas, monospace;
    font-size: 0.85em;
    color: #757575;
    margin-left: 8px;
}

.AtomView
{
    color: red;
    font-weight: bold;
}

.ImageSpan {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.SizeAuto {
flex: 1;
}

.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.shadow {
    opacity: 0.5;
    -webkit-filter: drop-shadow( -5px -5px 5px #000 );
    filter: drop-shadow( -5px -5px 5px #000 );
}

.RemoveDefaultStyle {
-webkit-appearance: none;
-moz-appearance:    none;
appearance:         none;
}

.Table {
    display: table;
    width: 100%;
}

.Table > div {
    display: table-cell;
}

.ClickToURL
{
    cursor: pointer;
}

.URLOnClick {
    cursor: pointer;
}

.ClickToField {
    cursor: pointer;
}

.Visible {
    visibility: visible !important;
}

.Opacity50 {
    opacity: 0.5 !important;
}

.Opacity25 {
    opacity: 0.25 !important;
}

.Opacity75 {
    opacity: 0.75 !important;
}

.Opacity100 {
    opacity: 1.0 !important;
}

.HREF {
    cursor: pointer;
}


/* META  : .Base.Root.Classes.font- */
.Field.font-size-20 a {
    font-size: 2em !important;
}

.Field.font-size-15 a {
    font-size: 1.5em !important;
}

.Field.font-size-09 a {
    font-size: 0.9em !important;
}

.Field.font-size-08 a {
    font-size: 0.8em !important;
}

.Field.font-size-075 a {
    font-size: 0.75em !important;
}

.Field.font-size-07 a {
    font-size: 0.7em !important;
}

.Field.font-size-06 a {
    font-size: 0.6em !important;
}

.Field.font-size-05 a {
    font-size: 0.5em !important;
}

.Field.font-weight-100 a {
    font-weight: 100 !important;
}

.Field.font-weight-200 a {
    font-weight: 200 !important;
}

.Field.font-weight-300  a {
    font-weight: 300 !important;
}

.Field.font-weight-400 a  {
    font-weight: 400 !important;
}

.Field.font-weight-500  a {
    font-weight: 500 !important;
}

.Field.font-weight-600  a {
    font-weight: 600 !important;
}

.Field.font-weight-700 a {
    font-weight: 700 !important;
}

.Field.font-weight-800  a {
    font-weight: 800 !important;
}

.Field.font-weight-900  a {
    font-weight: 900 !important;
}


/* META  : .Base.Root.Classes.input- */
.padding-bottom-0 {
    padding-bottom: 0 !important;
}

.padding-top-0 {
    padding-top: 0 !important;
}

.padding-bottom-0 .InputSpan > a {
    padding-bottom: 0 !important;
}

.padding-top-0 .InputSpan > a {
    padding-top: 0 !important;
}

.padding-0 {
    padding: 0 !important;
    --inputPadding: 0;
}

.padding-1 {
    padding: 1px !important;
    --inputPadding: 1px;
}

.padding-2 {
    padding: 2px !important;
    --inputPadding: 2px;
}

.padding-3 {
    padding: 3px !important;
    --inputPadding: 3px;
}

.padding-4 {
    padding: 4px !important;
    --inputPadding: 4px;

}


/* META  : .Base.Root.Classes.absolute */
.absolute-bottom {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
}

.absolute-top {
    position: absolute !important;
    top: 0;
    bottom: auto;
}


/* META  : .Base.Root.Page */
.PageTop .RootNav .Selected {
    background-color: var(--backColor);
    color: var(--textColor);
}
.pageshadowborder1{
    box-shadow: rgb(231 230 230 / 38%) 0px 0px 10px 0px;
    border: 1px solid rgb(241, 241, 241);
}


/* META  : .Base.Root.Mobile */
body.Mobile .DisableOnMobile {
    display: none;
}

body.Mobile .EntitySelector {
    max-width: 100%;
    min-width: 0;
}

body.Mobile .EntitySelector .SelectionsMenu {
    width: 100vw;
    left: 0 !important;
    max-width: 100vw;
}

body.Mobile .EntitySelector .Solutions .Button {
    min-width: 70px;
    font-size: 12px;
}

body.Mobile .ListTable td {
    min-height: 44px;
}


/* META  : .Base.Root.Debug */
.Domain_Debug
{
    outline: solid 8px orange;
}


/* META  : .Base.Root.Box */
:root{
    --BoxBackColor: rgba(250,250,250,0.8);
    --BoxBorderStyle:1px solid;
    --BoxBorderColor:rgb(66 72 113 / 14%);
    --BoxBorder:var(--BoxBorderStyle , 0 solid) var(--BoxBorderColor, transparent);
    --BoxShadowStyle:0px 0px 5px;
    --BoxShadowColor:rgb(102 110 157 / 20%);
    --BoxShadow: var(--BoxShadowStyle , 0 0 0 0) var(--BoxShadowColor, transparent);
    --BoxBorderRadius:8px;
    --BoxOverflow:hidden;
    --BoxPadding:0 8px;
}
.Nav {
    --BoxBackColorOpacity:0%;
    --BoxBackColor:transparent !important;
}

.Box {
flex: initial;
}

.Panel:only-child, .PageZone:only-child, .DirectionVer:only-child, .FieldSet:only-child
{
    min-height: 100% !important;
}

.Box {
    background: var(--BoxBackColor) !important;
    border: var(--BoxBorder, 0) !important;
    box-shadow: var(--BoxShadow , unset);
    border-radius: var(--BoxBorderRadius, 0);
    box-sizing: border-box;
    padding: 1em;

}

.Box:last-child {
    margin-bottom: 0 !important;
}.Box.FieldSetPanel {
    padding: 1em;
}

.Box.PanelHasHeader  {
    padding: 0;
}

.Box.PanelHasHeader > .PanelBody {
    padding: 1em;
}

.Box .FieldSet.EntityTypeView.ViewBody_Folder {
    padding: unset !important;
    padding-left: 2em !important;
    margin-bottom: 0 !important;
}
ViewBody_Folder

.TabBody > .Box, .TabBody > .EntityTypeView
{
    margin-bottom: 0 !important;
}
.Box .Box,.Box .EntityTypeView
{
    background-color: transparent;
    border: 0 !important;
    box-shadow: 0 0 0 !important;
    border-radius:  0 !important;

}

.Box .Box
{
    padding: var(--BoxPadding , 0);
}

.TabHeader {
    padding-left: var(--gap) !important;
    padding-right: var(--gap) !important;
}

.Box:empty {
    display: none;
}

img[src*="___drivetest.png"],
img[src=""], img:not([src]) {
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1) !important;
    min-height: 0 !important;
}
img[src*="___drivetest.png"]::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='50%25' fill='%23cbd5e1'/%3E%3Ctext x='50%25' y='55%25' text-anchor='middle' fill='%2364748b' font-size='16' font-family='Arial'%3E%3C/text%3E%3C/svg%3E") center/cover no-repeat;
}


/* META  : .Base.Guide */
.GuideOverlay{position:fixed;top:0;right:0;bottom:0;width:420px;background:linear-gradient(180deg,rgba(255,255,255,0.97) 0%,rgba(248,250,252,0.98) 100%);-webkit-backdrop-filter: blur(12px);backdrop-filter:blur(12px);box-shadow:-8px 0 40px rgba(0,0,0,0.08),-1px 0 0 rgba(0,0,0,0.05);z-index:10001;display:none;transform:translateX(100%);transition:transform 350ms cubic-bezier(0.16,1,0.3,1);flex-direction:column;overflow:hidden;border-left:1px solid rgba(0,0,0,0.06);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.GuideOverlay.GuideOpen{display:flex;transform:translateX(0)}
.GuideHeader{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;background:linear-gradient(135deg,var(--primaryColor,#3b82f6) 0%,#7c3aed 100%);color:#fff;flex-shrink:0}
.GuideHeader h3{margin:0;font-size:17px;font-weight:700;color:#fff;letter-spacing:-0.01em}
.GuideHeaderSub{font-size:11px;opacity:0.75;margin-top:3px}
.GuideClose{background:rgba(255,255,255,0.2);border:none;color:#fff;font-size:18px;cursor:pointer;padding:6px 12px;border-radius:8px;transition:background 200ms;flex:none;width:auto;line-height:1}
.GuideClose:hover{background:rgba(255,255,255,0.35)}
.GuideTabs{display:flex;gap:4px;padding:12px 16px 8px;flex-shrink:0;background:rgba(248,250,252,0.8)}
.GuideTab{flex:1;padding:8px 10px;border:none;background:transparent;font-size:11px;font-weight:600;cursor:pointer;border-radius:8px;transition:all 200ms;color:rgba(0,0,0,0.4);text-transform:uppercase;letter-spacing:0.04em}
.GuideTab:hover{background:rgba(0,0,0,0.04);color:rgba(0,0,0,0.7)}
.GuideTab.active{background:var(--primaryColor,#3b82f6);color:#fff;box-shadow:0 2px 8px rgba(59,130,246,0.3)}
.GuideBody{flex:1;overflow-y:auto;padding:20px;scroll-behavior:smooth}
.GuideBody::-webkit-scrollbar{width:5px}
.GuideBody::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:3px}
.GuideEmpty{text-align:center;padding:40px 20px;opacity:0.4}
.GuideEmpty i{font-size:48px;margin-bottom:16px;display:block}
.GuideTrigger{background:none;border:none;font-size:20px;cursor:pointer;padding:6px 10px;border-radius:8px;opacity:0.7;transition:all 200ms;flex:none;width:auto}
.GuideTrigger:hover{opacity:1;color:var(--primaryColor,#3b82f6)}
.GuideProgress{padding:12px 20px;border-top:1px solid rgba(0,0,0,0.06);flex-shrink:0}
.GuideProgressBar{height:5px;background:rgba(0,0,0,0.06);border-radius:3px;overflow:hidden}
.GuideProgressFill{height:100%;background:linear-gradient(90deg,var(--primaryColor,#3b82f6),#7c3aed);border-radius:3px;transition:width 400ms ease}
.GuideProgressText{font-size:11px;opacity:0.5;margin-top:6px;text-align:center}
body.GuideActive #MainContent{margin-right:420px;transition:margin-right 350ms cubic-bezier(0.16,1,0.3,1)}
.GuideStep{margin-bottom:4px}
.GuideStepTitle{font-size:14px;font-weight:600;color:#334155;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.GuideStepTitle i{color:var(--primaryColor,#3b82f6);font-size:15px}
.GuideField{margin-bottom:4px}
.GuideFieldLabel{font-weight:600;color:#475569;margin-right:6px;font-size:13px}
.GuideFieldValue{color:#64748b;font-size:13px}
.guide-hero{text-align:center;padding:28px 20px;background:linear-gradient(135deg,rgba(59,130,246,0.06) 0%,rgba(124,58,237,0.06) 100%);border-radius:16px;margin-bottom:20px}
.guide-hero-icon{font-size:40px;color:var(--primaryColor,#3b82f6);margin-bottom:12px;display:block}
.guide-hero-title{font-size:18px;font-weight:700;margin:0 0 6px;color:#1e293b}
.guide-hero-subtitle{font-size:13px;color:#64748b;line-height:1.6;margin:0}
.guide-section{margin-bottom:20px}
.guide-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:rgba(0,0,0,0.3);margin:0 0 12px;padding:0 4px}
.guide-nav-grid{display:flex;flex-direction:column;gap:8px}
.guide-nav-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;cursor:pointer;background:#fff;border:1px solid rgba(0,0,0,0.06);box-shadow:0 1px 3px rgba(0,0,0,0.04);transition:all 200ms;text-decoration:none;color:inherit}
.guide-nav-card:hover{border-color:var(--primaryColor,#3b82f6);box-shadow:0 4px 12px rgba(59,130,246,0.12);transform:translateY(-1px)}
.guide-nav-card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.guide-nav-card-icon.blue{background:rgba(59,130,246,0.1);color:#3b82f6}
.guide-nav-card-icon.green{background:rgba(16,185,129,0.1);color:#10b981}
.guide-nav-card-icon.amber{background:rgba(245,158,11,0.1);color:#f59e0b}
.guide-nav-card-icon.purple{background:rgba(124,58,237,0.1);color:#7c3aed}
.guide-nav-card-icon.red{background:rgba(239,68,68,0.1);color:#ef4444}
.guide-nav-card-icon.teal{background:rgba(20,184,166,0.1);color:#14b8a6}
.guide-nav-card-icon.rose{background:rgba(244,63,94,0.1);color:#f43f5e}
.guide-nav-card-icon.slate{background:rgba(100,116,139,0.1);color:#64748b}
.guide-nav-card-body{flex:1;min-width:0}
.guide-nav-card-title{font-size:14px;font-weight:600;color:#1e293b;margin:0 0 2px}
.guide-nav-card-desc{font-size:12px;color:#94a3b8;margin:0;line-height:1.4}
.guide-nav-card-arrow{color:#cbd5e1;font-size:14px;flex-shrink:0;transition:transform 200ms}
.guide-nav-card:hover .guide-nav-card-arrow{transform:translateX(2px);color:var(--primaryColor,#3b82f6)}
.guide-callout{padding:14px 16px;border-radius:10px;margin-bottom:12px;display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.6}
.guide-callout-icon{font-size:16px;flex-shrink:0;margin-top:1px}
.guide-callout.info{background:rgba(59,130,246,0.06);border-left:3px solid #3b82f6}
.guide-callout.info .guide-callout-icon{color:#3b82f6}
.guide-callout.tip{background:rgba(16,185,129,0.06);border-left:3px solid #10b981}
.guide-callout.tip .guide-callout-icon{color:#10b981}
.guide-callout.warning{background:rgba(245,158,11,0.06);border-left:3px solid #f59e0b}
.guide-callout.warning .guide-callout-icon{color:#f59e0b}
.guide-workflow{padding:16px 0;margin-bottom:16px}
.guide-workflow svg{width:100%;height:auto;display:block}
.guide-status-legend{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.guide-status-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600}
.guide-status-badge .dot{width:7px;height:7px;border-radius:50%}
.guide-status-badge.draft{background:#f1f5f9;color:#64748b}
.guide-status-badge.draft .dot{background:#94a3b8}
.guide-status-badge.calculated{background:#dbeafe;color:#2563eb}
.guide-status-badge.calculated .dot{background:#3b82f6}
.guide-status-badge.approved{background:#dcfce7;color:#16a34a}
.guide-status-badge.approved .dot{background:#22c55e}
.guide-status-badge.paid{background:#fef3c7;color:#d97706}
.guide-status-badge.paid .dot{background:#f59e0b}
.guide-status-badge.closed{background:#fce7f3;color:#db2777}
.guide-status-badge.closed .dot{background:#ec4899}
.guide-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.guide-stat-card{text-align:center;padding:14px 8px;border-radius:10px;background:linear-gradient(135deg,rgba(59,130,246,0.05) 0%,rgba(124,58,237,0.05) 100%)}
.guide-stat-value{font-size:22px;font-weight:800;color:var(--primaryColor,#3b82f6)}
.guide-stat-label{font-size:11px;color:#94a3b8;margin-top:2px}
.guide-divider{height:1px;background:rgba(0,0,0,0.06);margin:16px 0}
.guide-text{font-size:13px;color:#475569;line-height:1.7;margin-bottom:12px}
.guide-text strong{color:#1e293b}
.guide-breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,0.06)}
.guide-back-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;background:rgba(0,0,0,0.04);border:none;font-size:13px;font-weight:500;color:#64748b;cursor:pointer;transition:all 200ms;flex:none;width:auto;line-height:1.4}
.guide-back-btn:hover{background:rgba(59,130,246,0.1);color:#3b82f6}
.guide-back-btn i{font-size:12px}
.guide-breadcrumb-title{font-size:13px;font-weight:600;color:#334155}
.guide-faq{margin-bottom:16px}
.guide-faq-item{border:1px solid rgba(0,0,0,0.06);border-radius:10px;margin-bottom:6px;overflow:hidden;transition:border-color 200ms}
.guide-faq-item[open]{border-color:rgba(59,130,246,0.2)}
.guide-faq-item summary{padding:14px 16px;cursor:pointer;font-size:14px;font-weight:600;color:#334155;list-style:none;display:flex;align-items:center;gap:10px;transition:background 200ms}
.guide-faq-item summary::-webkit-details-marker{display:none}
.guide-faq-item summary::before{content:var(--icon-Chevron-Right);font-family:"361";font-size:10px;color:#94a3b8;transition:transform 200ms;flex-shrink:0}
.guide-faq-item[open] summary::before{transform:rotate(90deg)}
.guide-faq-item summary:hover{background:rgba(0,0,0,0.02)}
.guide-faq-item .guide-faq-answer{padding:0 16px 14px;font-size:13px;color:#64748b;line-height:1.7}
.guide-steps{margin-bottom:16px}
.guide-step-item{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,0.04)}
.guide-step-item:last-child{border-bottom:none}
.guide-step-num{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--primaryColor,#3b82f6),#7c3aed);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.guide-step-content{flex:1;min-width:0}
.guide-step-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}
.guide-step-desc{font-size:13px;color:#64748b;line-height:1.6}
.guide-kbd{display:inline-flex;align-items:center;padding:2px 7px;border-radius:5px;background:rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.1);font-family:monospace;font-size:11px;font-weight:600;color:#334155;line-height:1.4;box-shadow:0 1px 0 rgba(0,0,0,0.08)}
.guide-shortcut-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(0,0,0,0.04)}
.guide-shortcut-row:last-child{border-bottom:none}
.guide-shortcut-label{font-size:13px;color:#475569}
.guide-shortcut-keys{display:flex;gap:4px}
.guide-tabs{margin-bottom:16px}
.guide-tabs-header{display:flex;gap:0;border-bottom:2px solid rgba(0,0,0,0.06);margin-bottom:12px}
.guide-tabs-btn{padding:8px 16px;border:none;background:transparent;font-size:13px;font-weight:600;color:#94a3b8;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all 200ms;flex:none;width:auto}
.guide-tabs-btn:hover{color:#64748b}
.guide-tabs-btn.active{color:var(--primaryColor,#3b82f6);border-bottom-color:var(--primaryColor,#3b82f6)}
.guide-tabs-panel{display:none}
.guide-tabs-panel.active{display:block}
@keyframes guidePulse{0%{box-shadow:0 0 0 0 rgba(59,130,246,0.5)}70%{box-shadow:0 0 0 12px rgba(59,130,246,0)}100%{box-shadow:0 0 0 0 rgba(59,130,246,0)}}
.guide-highlight-pulse{animation:guidePulse 0.8s ease-out 3;outline:2px solid var(--primaryColor,#3b82f6);outline-offset:2px;border-radius:4px}
.GuideBody [data-guide-highlight]{color:var(--primaryColor,#3b82f6);cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.GuideBody [data-guide-highlight]:hover{text-decoration-style:solid}
.guide-collapsible{border:1px solid rgba(0,0,0,0.06);border-radius:10px;margin-bottom:8px;overflow:hidden}
.guide-collapsible summary{padding:12px 16px;cursor:pointer;font-size:13px;font-weight:600;color:#475569;list-style:none;display:flex;align-items:center;gap:8px}
.guide-collapsible summary::-webkit-details-marker{display:none}
.guide-collapsible summary::after{content:var(--icon-Chevron-Down);font-family:"361";margin-left:auto;color:#94a3b8;transition:transform 200ms}
.guide-collapsible[open] summary::after{transform:rotate(180deg)}
.guide-collapsible .guide-collapsible-body{padding:0 16px 12px;font-size:13px;color:#64748b;line-height:1.6}


/* META  : .Base.GuideButton */
.GuideButton{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:12px;border-radius:50%;position:relative;transition:all 0.25s ease;border:1px solid rgba(24,159,223,0.69);background:#fff;color:var(--primaryColor,#3b82f6);box-shadow:rgba(3,116,247,0.58) 0 0 8px 0;width:48px;height:48px;margin:2px}
.GuideButton .GuideButtonIcon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.GuideButton .GuideButtonIcon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.GuideButton .GuideButtonTitle{display:none}
.GuideButton .GuideButtonBadge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 4px;line-height:1}
.GuideButton.guide-has .GuideButtonBadge{display:inline-flex}
.GuideButton.guide-has:hover{box-shadow:rgba(3,116,247,0.8) 0 0 12px 0}
.GuideButton.guide-none{opacity:0.4;box-shadow:none;border-color:silver}
.GuideButton.guide-none:hover{opacity:0.7}


/* META  : .Base.EntityAiBtn */
.EntityAiBtn{cursor:pointer;padding:6px 8px;border-radius:8px;color:var(--secondaryColor,#6366f1);font-size:14px;display:flex;align-items:center;justify-content:center;transition:background .2s;margin-right:4px}
.EntityAiBtn:hover{background:rgba(99,102,241,0.1)}


/* META  : .Base.Layout.HeaderTitle */
.PanelHeader > .PanelHeaderTitle {
    font-size: 110%;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1em;
    padding: 8px;
}

.Top > .TopLeft
.EntityTypeViewTitle {
    font-weight: 400;
}

.EntityTypeViewTitleBody {
    font-size: 120%;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px;
    line-height: 1em;
}

.TabButton {
    font-weight: 400;
    letter-spacing: 0.5px;
}


/* META  : .Base.Layout.Panel */
.Panel {
    position: relative;
}

.Panel
{
    vertical-align: top;
    position: relative;
}

.Content > .Panel:only-child {
    height: 100%;
    box-sizing: border-box;
}

.Panel > .Panel:only-child {
    height: 100%;
    box-sizing: border-box;
}

.PanelImage {
    position: absolute;
    left: 40%;
    right: 40%;
    top: 22%;
    z-index: 1000;
}

.ContentTitle {
    text-align: center;
    font-size: 18px;
    display: block;

}



/* META  : .Base.Layout.Panel.Text */
.Text {
    padding: 3px 9px;
    display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}


/* META  : .Base.Layout.Panel.ShowOnHover */
.ShowOnHover .ShowOnHover {
    display: none;
}

.ShowOnHover:hover .ShowOnHover
{
    display: inherit;
    z-index: 1000;
}


/* META  : .Base.Layout.Panel.Search */
#SearchResults
{
    max-height: 50%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    color: var(--textColor);
}

.SearchResults > .Title, .Peers > .Title
{
    padding: 5px;
    text-align: center;
}

.Peers, .SearchResults
{
    margin: 2px;
}

.EntityTypeResults {
    max-height: 30em;
    overflow: auto;
    height: calc(100% - 3em);
}

#SearchZone
{
    padding: 0;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    margin: 0;
    max-width: 360px;
}

    #SearchZone > .DeleteButton {
    position: absolute;
    top: 3px;
    right: 7px;
    z-index: 100;
    height: 1em;
    font-size: 1.5em;
    }

.ResultItem {
    text-align: left;
}

.SearchResultEntityType .EntityTypeTitle {
    padding: 5px;
    font-weight: bold;
    text-align: left;
}

.SearchZoneTitle {

    font-size: 1.5em;
    font-weight: 600;
    padding: 0.5em;
    text-align: center;
}

.SearchTitle {
    text-align: center;
    display: none;
}

.SearchBody {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 3px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.SearchBody a {
    display: block;
    padding: 5px;
}

.SearchResultEntityType
{
    order: 9999999;
    padding: 1px 1em 1em 1.5em;
    box-sizing: border-box;
}

.Search {
    display: flex;

    justify-content: flex-end !important;
    align-items: center !important;
}

.Searching {
    color: #800000;
    font-size: 2em;
}

.Searching .fas {
    color: darkorange;
}

.Searching div {
    animation: blinker 1s linear infinite;
    display: block;
    text-align: center;
}

.Searching .fas {
    font-size: 64px !important;
    height: 64px;
    display: block;
    text-align: center;
}

.Page_Default3 .PageZone_mr .SearchZone {
    position: absolute !important;
    top: 4em !important;
    bottom: 0 !important;
    height: auto !important;
}

.SearchBody a:hover {
    background-color: #787878;
    color: white;
}

.ItemSelector .Searching {
    color: red;
}

.Page_Default3 .PageZone_mr .SearchZone {
    background-color: transparent !important;
    box-shadow: 0 0 0 !important;
    border: 0;
    color: silver;
}

#Search
{
    margin: 3px;
    border: none;
    text-align: center;
}

.ItemSelector .Searching {
    padding: 0.5em;
    animation: blinker 1s linear infinite;
    text-transform: uppercase;
}


/* META  : .Base.Layout.Panel.SearchInput */
#SearchInput {
    width: 2em;
    border: solid 1px rgba(127,127,127,0.2);
}

#SearchInput:hover,
#SearchInput.NotEmpty {
    width: 10em;
}

.Mobile #SearchInput:hover, .Mobile #SearchInput.NotEmpty {
    width: 8em;
}

#SearchInput.NotEmpty {
    background-position: right center;
}

#SearchInput
{
    margin: 2px;
    padding: 0.25em 1em;
    transition: all 150ms;
    font-size: 1.25em;
}

div.SearchInput {
    position: relative;
    font-size: 100%;
    padding: 0;
}

.SearchInput:after {
    content: var(--icon-Search);
    font-family: "361";
    font-weight: 900;
    position: absolute;
    right: 1em;
    z-index: 100;
    pointer-events: none;
    top: 0;
    display: flex;
    align-items: center;
    height: 3em;
    bottom: auto;
}

#SearchInput::placeholder {
    color: #656565;
}

#SearchInput:hover,
#SearchInput.NotEmpty {
    background-color: white;
    color: #666666;
    font-weight: bold;
}

#SearchInput:active::placeholder, #SearchInput:focus::placeholder {
    color: #656565;
}

#SearchInput:active {
    width: 10em;
}

#SearchInput {
    border-radius: 2em;
    color: #222222;
    background-color: transparent;
    border: solid 1px rgba(127,127,127,0.2);
}


/* META  : .Base.Layout.Panel.TogglePanel */
.ToggleHeader:before {
    font-family: "361" !important;
    content: var(--icon-Chevron-Down);
    position: absolute;
    left: 0.5em;
    font-size: 1.25em;
    padding: 0;
    font-weight: 700;
    opacity: 0.75;
transition: transform 350ms ease-out;
    top: 50%;
    transform: translateY(-50%) rotateZ(0deg);
}.ToggleHeader > div
{
    padding: 9px 2.5em;
    font-weight: 500;
    text-transform: uppercase;
}

.TogglePanel.Toggle_Closed > .ToggleHeader:before,
.Toggle_Closed > .EntityTypeViewBody > .Center > .ToggleHeader:before
{
    transform: translateY(-50%) rotateZ(-90deg);
}

.SearchBody .TogglePanel > .ToggleHeader:after {
right: auto;
left: -1em;
}

.TogglePanel.Toggle_Closed > .ToggleBody
{
    display: none !important;
}

.TogglePanel > .ToggleHeader {
    position: relative;
    cursor: pointer;
}

.EmptyToggle:before
{
    content: "\007C";
    font-size: 1px;
}

.TogglePanel.EntityTypeView.Toggle_Closed .Middle,
.TogglePanel.EntityTypeView.Toggle_Closed .Parameters,
.TogglePanel.EntityTypeView.Toggle_Closed .ActionPanel,
.TogglePanel.EntityTypeView.Toggle_Closed .Bottom {
    display: none !important;
}

.TogglePanel.EntityTypeView.Toggle_Closed .ToggleHeader .TopRight *,
.TogglePanel.EntityTypeView.Toggle_Closed .ToggleHeader .TopLeft * {
    opacity: 0.0;
}

.TogglePanel.EntityTypeView .ToggleHeader .TopRight *,
.TogglePanel.EntityTypeView .ToggleHeader .TopRight * {
    opacity: 1.0;
    transition: all 350ms;
}


/* META  : .Base.Layout.Panel.AutoHide */
.DirectionVertical > .AutoHideOn
{
    width: 40px !important;
}

.AutoHideOn .RootNav .NavTitle {
    display: none;
}

.AutoHideOn .RootNav .Nav {
    padding: 0;
}

.AutoHideOn .RootNav .Nav img {
    display: inline-block;
}

.AutoHideOn .RootNav .Nav .NavImage {
    margin: 0.5em;
    height: auto;
}.AutoHideOn .AutoHideTopLeftHandle, .AutoHideOn .AutoHideTopRightHandle, .AutoHideOn .AutoHideBottomRightHandle, .AutoHideOn .AutoHideBottomLeftHandle {
    opacity: 1.0 !important;
}


/* META  : .Base.Layout.Panel.BiziconStart */
.PageTop .TopLeft .BiziconStart {
    vertical-align: middle !important;
    text-align: left !important;
}

.BiziconStart {
    vertical-align: middle;
    text-align: left;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.BiziconStart .ApplicationName {
    max-width: 20em;
    margin: 0 auto;
    padding: 0.5em;
}

.LoginPage .BiziconStart .ApplicationName {
    max-width: 20em;
    font-size: 2em;
    margin: 0 auto;
    margin-top: 0.5em;
}

.BiziconStart .ApplicationName {
    display: none;
}

#ModuleImage
{
    display: block;
    padding: 5px;
    box-sizing: border-box;
}

#ModuleTitle
{
    display: inline-block;
    text-align: center;
    padding: 8px;
    margin: 0;
    font-size: 150%;
    margin-bottom: 0.5rem;
}


/* META  : .Base.Layout.Panel.AutoRight */
.AutoRight {
    width: 24px !important;
}

.AutoRight:hover {
    width: unset !important;
}

.AutoRight .Search > * {
    display: none;
}

.AutoRight:hover .Search > * {
    display: inherit;
}

.AutoRight .Search::after
{
    content: var(--icon-Search);
    font-family: "361";
    display: block;
    text-align: center;
    font-size: 16px;
}

.AutoRight:hover .Search::after
{
    content: "";
}


/* META  : .Base.Layout.Panel.AutoHide */
.AutoHideOn .NavTitle, .AutoHideOn #ModuleTitle {
    text-indent: -9000px;
}

.AutoHideTopLeftHandle, .AutoHideTopRightHandle, .AutoHideBottomRightHandle, .AutoHideBottomLeftHandle {
    position: absolute;
    float: left;
    z-index: 1000;
    font-size: 20px !important;
    padding: 3px;
    width: 24px;
    height: 24px;

    display: inline-block;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.AutoHideTopLeftHandle
{
    left:0;
    right: auto;
    top:0;
    bottom: auto;
}

    .AutoHideTopLeftHandle:before {
    content: var(--icon-Chevron-Left);
    font-family: "361";
}

.AutoHideTopRightHandle
{
    left: auto;
    right: 0;
    top:0;
    bottom: auto;
}

    .AutoHideTopRightHandle:before {
    content: var(--icon-Chevron-Right);
    font-family: "361";
}

.AutoHideBottomRightHandle
{
    left: auto;
    right:0;
    top: auto;
    bottom:0;
}

    .AutoHideBottomRightHandle:before {
    content: var(--icon-Chevron-Right);
    font-family: "361";
    }
.AutoHideBottomLeftHandle
{
    left:0;
    right: auto;
    top: auto;
    bottom:8px;
}

.AutoHideBottomLeftHandle:before {
    content: var(--icon-Chevron-Left);
    font-family: "361";
}

.AutoHideOn .StartLogo img
{
    width: 40px !important;
    height: auto !important;
}

.AutoHideOn {
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    z-index: 1000;
    position: relative;
}

.AutoHideOff {
    width: auto;
    height: auto;
    opacity: 1.0;
    position: relative;
}

.AutoHideOn > *
{
    z-index: 0;
    padding: 0 !important;
}

.AutoHideOn .AutoHideTopLeftHandle, .AutoHideOn .AutoHideTopRightHandle, .AutoHideOn .AutoHideBottomRightHandle, .AutoHideOn .AutoHideBottomLeftHandle {
    display: inline-block !important;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    z-index: 1000;
    position: absolute;
    padding: 1px 3px !important;
}


/* META  : .Base.Layout.Panel.DirectionFloat */
.DirectionFloat {
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: center !important;
    align-content: flex-start;
    gap: 4px;
}

.DirectionFloat > div
{
    width: auto !important;
    flex: unset;
    margin: 0;
}

.DirectionFloat.PanelHasHeader
{
    flex-direction: column !important;
}

.DirectionFloat.PanelHasHeader > .PanelHeader
{
    width: 100% !important;
}


/* META  : .Base.Layout.Panel.PanelHeader */
.Panel > .PanelHeader {
    vertical-align: middle;
    width: 100%;
    min-height: 3em;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-grow: 0;
    position: relative;
    border-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.Panel > .PanelHeader::after,
.SingleItem > .ItemHeader::after
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--contentHeaderBackground);
    color: white;
    opacity: 0.1;
    pointer-events: none;
    border-radius: inherit;
}

.ActionPanel::after
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--contentHeaderBackground);
    color: white;
    opacity: 0.05;
    pointer-events: none;
    border-radius: inherit;
}

.SingleItem > .ItemHeader::after
{
    opacity: 0.2;
}

.ItemView .Panel > .PanelHeader::after,
.PanelBody .Panel > .PanelHeader::after
{
    content :"";
    display: none;
}

.PanelHasHeader .PanelHeader {
    min-height: 3em;
}

.PanelHasHeader .PanelHasHeader .PanelHeader,
.SingleItem .PanelHasHeader .PanelHeader
{
    min-height: 3em;
    padding: 4px 8px;
}

.PanelHeader > .PanelHeaderTitle {
    display: block;
    vertical-align: middle;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: calc(1.5rem + 8px);
    flex: 1;
    color: var(--panelHeaderTextColor);
}

/* 2026-08-29: ETSearchPlace bu gruptan çıkarıldı — arama her zaman görünür (karar A).
   ViewActions/Actions hover-reveal davranışı aynen korunur. */
.Desktop .PanelHasHeader .ViewActions,
.Desktop .PanelHasHeader .EntityTypeLists.ItemCount_0,
.Desktop .PanelHasHeader .Actions
{
    opacity: 0.0;
}

.Desktop .PanelHasHeader:hover  .ViewActions,
.Desktop .PanelHasHeader .EntityTypeLists.ItemCount_0
{
    opacity: 0.5;
}
.PanelHasHeader:hover  .Actions
{
    opacity: 1;
}

.PanelHasHeader
{
    position: relative;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    gap: 0 !important;
    border-radius: var(--gap);
}

.PanelHasHeader > .PanelHeader {
    border-radius: var(--gap) var(--gap) 0 0 ;
}

.PanelHasHeader > .PanelBody {
    flex: 1;
    height: auto;
    width: 100%;
min-width: 100%;
}

.PanelHeader {
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
}

.PanelHeader > .TopLeft > .Actions
{
    display: flex !important;
    display: -webkit-flex !important;
    flex-direction: row !important;
    width: auto;
    height: 100%;
}

.PanelHeader > .TopLeft {
    opacity: 0.75;
    position: absolute !important;
    left: 0;
    top: 0;
    bottom: 0;
}

.PanelHeader > .TopRight {
    position: absolute !important;
    right: 0;
    top: 0;
    bottom: 0;
}

.PanelHeader:hover > .TopLeft, .PanelHeader:hover > .TopRight {
    opacity: 1;
}



/* META  : .Base.Layout.Panel.PanelBody */
.PanelBody
{
    vertical-align: top;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    flex: 1;
}

.PanelBody > * {
    height: auto;
}

    .PanelBody > *:only-child {
    min-height: 100%;
    }

.EntityTypeView > .PanelBody
{
    min-height: 200px;
    border: 1px solid silver;
}

.Panel.PanelBodyHidden  > .PanelBody
{
    display: none;
}



/* META  : .Base.Layout.Panel.DirectionAll */
.DirectionAll {
    flex-direction: column !important;
}

.AlignLeft > .DirectionAll
{
    flex-direction: column !important;
}

.DirectionAll > div
{
    height: auto;
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}

.DirectionAll > .PanelBody > *
{
    display: block !important;
}

.DirectionAll > .TabBody > *
{
    display: block !important;
}


/* META  : .Base.Layout.Panel.MainContent */
.MainContent > .Content
{
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.MainContent .TabBody > .Selected.PanelHasHeader {
    padding: 0 !important;
}

.MainContent {
    width: 100% !important;
    box-sizing: border-box;
    position: relative;
    min-height: 70vh;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.Content {
    width: 100%;
}

.Mobile .MainContent {
    height: auto !important;
}#MainContent > .Panel,#MainContent > .Fields
{
    height: 100%;
}

.MainContent {
    position: relative;
}

    .MainContent > * {
    position: absolute;
    left: 0;
    right: 0;

    -webkit-overflow-scrolling: touch;

    background-color: transparent;
    width: 100%;
    z-index: 88;
    opacity: 0;
    }

.MainContent > .SingleItem {
left: 100%;
    width: 100%;
    opacity: 1;
}

.Mobile  .MainContent > .SingleItem {

    left: 0;
    opacity: 1;
    }

    .MainContent > .LeftContent {

    width: 100%;
    left: -100%;
    right: 100%;
    box-shadow: 0 0 5px gray;
    visibility: visible;
    opacity: 0 !important;
    }

.MainContent > .Content {
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
}

    .MainContent > .RightContent {

    opacity: 1;
    visibility: visible;
    }

    .MainContent > .RightContent.Content,
    .MainContent > .RightContent.NavigationContent {
    left: 0;
    right: 0;
    opacity: 0;
    display: none;
    }

    .MainContent > .LeftContent.SingleItem,
    .MainContent > .LeftContent.Content,
    .MainContent > .LeftContent.NavigationContent {
    left: 0;
    right: 0;
    opacity: 0;
    display: none;
    }

.MainContent > .ActiveContent {
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    opacity: 1;
    flex: 1;
    visibility: visible;
}

/* Content owns the scrollport; its root layout fills the client area but can
 * grow beyond it. Intrinsic sizing must not be replaced by per-module heights.
 * Do not apply this to modal/record roots or cached inactive Content nodes. */
.MainContent > .Content.ActiveContent > .Panel:only-child {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 0 auto !important;
    align-self: stretch;
}


/* META  : .Base.Layout.Panel.DirectionAccordion */
.DirectionAccordion
{
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0 !important;
}

.DirectionAccordion > div {
    display: flex;
    flex-direction: column;
    flex: 0;
    border: var(--border1);
}

.DirectionAccordion > div > div.PanelHeader
{
    position: relative;
}

.DirectionAccordion > div > div.PanelHeader > .PanelHeaderTitle
{
    justify-content: flex-start;
    padding: 0.25em 1em 0.25em 1em;
}

.DirectionAccordion > div > div.PanelHeader::after
{
    content: var(--icon-Chevron-Down);
    font-family: "361";
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    bottom: 0;
    height: 100%;
    align-content: center;
    flex-direction: column;
    text-align: right;
    padding-right: 0.5em;
}

.DirectionAccordion > div.AccordionSelected > div.PanelHeader::after
{
    content: var(--icon-Chevron-Up);
}

.DirectionAccordion > div > .PanelBody
{
    display: none !important;
}

.DirectionAccordion > div.AccordionSelected
{
    flex: 1;
}

.DirectionAccordion > div.AccordionSelected > .PanelBody
{
    display: flex !important;
    flex: 1;
    flex-direction: column;
    overflow: auto;
    position: absolute;
    top: 3em;
    bottom: 0;
    gap: 0;
}

.DirectionAccordion > div.AccordionSelected > .PanelBody > *
{
    width: 100%;
    align-content: flex-start;
}

.DirectionAccordion > div.AccordionSelected > .PanelBody > *:only-child
{
    height: 100%;
}


/* META  : .Base.Layout.Panel.DirectionTab */
.DirectionTab {

    position: relative;
}


/* META  : .Base.Layout.Panel.DirectionTabVer */
.DirectionTabVer {

    position: relative;
}


/* META  : .Base.Layout.Panel.DirectionVer */
.DirectionVertical,
.DirectionVer {
    display: flex !important;
    display: -webkit-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100%;
    height: 100%;
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: collapse;
    border-spacing: 0 0;
    border-collapse: separate;
    align-items: stretch;
    justify-content: space-evenly;
    gap: var(--gap);
}

.DirectionVer > div {
    flex: 1;
}

.DirectionVerBody {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
}

.DirectionVer > *:only-child {
    width: 100% !important;
}

.Parameters .DirectionVertical,
.Parameters .DirectionVer {
align-items: stretch;
gap: 3px !important;
}

.SingleItem .DirectionVertical,
.SingleItem .DirectionVer {
    gap: var(--gap);
}

.ItemView .DirectionVertical,
.ItemView .DirectionVer {
    gap: 0;
}

.DirectionVertical > *:only-child
{
    width: 100%;
}

.DirectionVertical > .DirectionVertical {
    display: flex !important;
    display: -webkit-flex !important;
}

.DirectionVertical > *, .DirectionVer > * {
    position: relative;
    flex: 1;
}

.PageZone > .DirectionVer > *,
.PageZone > .DirectionVertical > * {
    align-self: stretch;
    align-items: flex-start;
    justify-content: center;
}

.DirectionVer > div::only-child
{
    width: 100% !important;
}

div > .DirectionVer:only-child
{
    width: 100%;
    flex: 1;
}


/* META  : .Base.Layout.Panel.DirectionFlexRow */
.DirectionFlexRow {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap !important;
    width: 100%;
    height: 100%;
    table-layout: fixed;
    white-space: nowrap !important;
    border-spacing: 0;
    border-collapse: collapse;
    border-spacing: 0 0;
    border-collapse: separate;
    align-items: flex-start;
    justify-content: space-evenly;
    gap: var(--gap);
}

.SingleItem .DirectionFlexRow {
    gap: var(--gap);
}

.ItemView .DirectionFlexRow {
    gap: 3px;
}

.DirectionFlexRow > *:only-child
{
    width: 100%;
}

.DirectionFlexRow > * {
    width: 100%;
    position: relative;
}

.PageZone > .DirectionFlexRow > * {
    align-self: stretch;
    align-items: flex-start;
    justify-content: center;
}

.DirectionFlexRow > div::only-child
{
    width: 100% !important;
}

div > .DirectionFlexRow:only-child
{
    width: 100%;
}


/* META  : .Base.Layout.Panel.DirectionFlexCol */
.DirectionFlexCol {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap !important;
    width: 100%;
    height: 100%;
    table-layout: fixed;
    white-space: nowrap !important;
    border-spacing: 0;
    border-collapse: collapse;
    border-spacing: 0 0;
    border-collapse: separate;
    align-items: flex-start;
    gap: var(--gap);
}

.SingleItem .DirectionFlexCol {
    gap: var(--gap);
}

.ItemView .DirectionFlexCol {
    gap: 3px;
}

.DirectionFlexCol > *:only-child
{
    width: 100%;
}

.DirectionFlexCol > * {
    width: 100%;
    position: relative;
}

.PageZone > .DirectionFlexCol > * {
    align-self: stretch;
    align-items: flex-start;
    justify-content: center;
}

.DirectionFlexCol > div::only-child
{
    width: 100% !important;
}

div > .DirectionFlexCol:only-child
{
    width: 100%;
}


/* META  : .Base.Layout.Panel.DirectionTable */
.DirectionTable {
    display: table !important;
    width: 100%;
    height: 100%;
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: collapse;
    border-spacing: 0 0;
    border-collapse: separate;
}

.DirectionTable > *:only-child
{
    width: 100%;
}

.DirectionTable > * {
    position: relative;
    display: table-cell;
}


/* META  : .Base.Layout.Panel.MaxWidth */
.Max1024 {
    max-width: 1024px !important;
    min-width: initial !important;
    margin: 0 auto !important;
    position: relative;
    width: 100%;
}

.Max1280 {
    max-width: 1280px !important;
    min-width: initial !important;
    width: 100%;
    margin: 0 auto !important;
}

.Max1200 {
    width: 100%;
    max-width: 1200px !important;
    min-width: initial !important;
    margin: 0 auto !important;
}
.Max1400 {
    width: 100%;
    max-width: 1400px !important;
    min-width: initial !important;
    margin: 0 auto !important;
}
.Max1600 {
    width: 100%;
    max-width: 1600px !important;
    min-width: initial !important;
    margin: 0 auto !important;
}

.Max800 {
    width: 100%;
    max-width: 800px !important;
    min-width: initial !important;
    margin: 0 auto !important;
}

.Max320 {
    width: 100%;
    max-width: 320px !important;
    min-width: initial !important;
    margin: 0 auto !important;
}

.Max240 {
    width: 100%;
    max-width: 240px !important;
    min-width: initial !important;
    margin: 0 auto !important;
}

.Max180 {
    width: 100%;
    max-width: 180px !important;
    min-width: initial !important;
    margin: 0 auto !important;
}

.MaxM {
    width: 100%;
    max-width: 320px;
    max-width: clamp(320px,100% , 348px) !important;
    min-width: 320px;
    min-width:  clamp(320px,100% , 348px) !important;
    min-width: 332px;
    margin: 0 auto !important;
}

.ItemView.MaxM {
    margin: 8px !important;
}

.MaxM2 {
    width: 100%;
    max-width: 166px;
    max-width: clamp(160px,50% , 172px) !important;
    min-width: initial !important;
    margin: 0 auto !important;
}

.MaxM3 {
    width: 100%;
    max-width: 114px;
    max-width: clamp(110px, 33% , 118px) !important;
    min-width: initial !important;
    margin: 0 auto !important;
}

.Max360 {
    width: 100%;
    max-width: 360px !important;
    min-width: initial !important;
    margin: 0 auto !important;
}

.Max400 {
    width: 100%;
    max-width: 400px !important;
    margin: 0 auto !important;
}

.Max480 {
    width: 100%;
    max-width: 480px !important;
    min-width: initial !important;
    margin: 0 auto !important;
}

.Max640 {
    width: 100%;
    max-width: 640px !important;
    min-width: initial !important;
    margin: 0 auto !important;
}

.Max600 {
    width: 100%;
    max-width: 600px !important;
    min-width: initial !important;
    margin: 0 auto !important;
}


/* META  : .Base.Layout.Panel.PageZone */
.PageZone
{
    height: auto;
    box-sizing: border-box;
    position: relative;
    max-width: 100%;
}

.HamburgerBtn {
    display: none;
}

/* 2026-08-29 (kullanici): MyPage sol/sag raylarinda gruplu nav govdesinin 8px
   padding'i dar rayda gorseli bozuyordu — rail icinde padding 0. Genel
   .NavGroupBody kurali (nav.css) diger baglamlarda aynen korunur.
   NOT: bu kural BASE bolumdedir — MobileCSSText bolumune konursa mobil
   @media'ya sarilir ve masaustunde etkisiz kalir (olculdu). */
#PageZone_LeftNavs .NavView.NavGrouped .NavGroupBody,
#PageZone_RightNavs .NavView.NavGrouped .NavGroupBody {
    padding: 0;
}

/* 2026-09-11 (kullanici): MyPage sol ve sag ray NavView'larinda NavTitle fontu %20 kucultuldu (12px -> 9.6px) */
body.BODYPage_MyPage #PageZone_LeftNavs .NavTitle,
body.BODYPage_MyPage #PageZone_RightNavs .NavTitle,
body.BODYPage_MyPage #PageZone_LeftNavs .NavTitle > span,
body.BODYPage_MyPage #PageZone_RightNavs .NavTitle > span,
.BODYPage_MyPage #PageZone_LeftNavs .NavTitle,
.BODYPage_MyPage #PageZone_RightNavs .NavTitle,
.BODYPage_MyPage #PageZone_LeftNavs .NavTitle > span,
.BODYPage_MyPage #PageZone_RightNavs .NavTitle > span,
.Page_MyPage #PageZone_LeftNavs .NavTitle,
.Page_MyPage #PageZone_RightNavs .NavTitle,
.Page_MyPage #PageZone_LeftNavs .NavTitle > span,
.Page_MyPage #PageZone_RightNavs .NavTitle > span,
#Content_MyPage #Panel_left .NavTitle,
#Content_MyPage #Panel_right .NavTitle,
#Content_MyPage #Panel_left .NavTitle > span,
#Content_MyPage #Panel_right .NavTitle > span,
.Content_MyPage .Panel_left .NavTitle,
.Content_MyPage .Panel_right .NavTitle,
.Content_MyPage .Panel_left .NavTitle > span,
.Content_MyPage .Panel_right .NavTitle > span {
    font-size: 9.6px !important;
}

/* 2026-09-11 (kullanici): MyPage sol ve sag ray NavView'larinda NavGroupTitle fontu %20 kucultuldu (12px -> 9.6px) */
body.BODYPage_MyPage #PageZone_LeftNavs .NavGroupTitle,
body.BODYPage_MyPage #PageZone_RightNavs .NavGroupTitle,
.BODYPage_MyPage #PageZone_LeftNavs .NavGroupTitle,
.BODYPage_MyPage #PageZone_RightNavs .NavGroupTitle,
.Page_MyPage #PageZone_LeftNavs .NavGroupTitle,
.Page_MyPage #PageZone_RightNavs .NavGroupTitle,
#Content_MyPage #Panel_left .NavGroupTitle,
#Content_MyPage #Panel_right .NavGroupTitle,
.Content_MyPage .Panel_left .NavGroupTitle,
.Content_MyPage .Panel_right .NavGroupTitle,
body.BODYPage_MyPage .NavView .NavGroupTitle,
.BODYPage_MyPage .NavView .NavGroupTitle,
.Page_MyPage .NavView .NavGroupTitle,
.Content_MyPage .NavView .NavGroupTitle,
body.BODYPage_MyPage .NavGroupTitle,
.BODYPage_MyPage .NavGroupTitle,
.Page_MyPage .NavGroupTitle,
.Content_MyPage .NavGroupTitle,
#PageZone_LeftNavs .NavView.NavGrouped .NavGroupTitle,
#PageZone_RightNavs .NavView.NavGrouped .NavGroupTitle,
#PageZone_LeftNavs .NavGroupTitle,
#PageZone_RightNavs .NavGroupTitle {
    font-size: 9.6px !important;
}


/* META  : .Base.Layout.Panel.TabPanel */
.OneTab > .PanelHeader {
    display: none;
}

.Relative.TabPanel {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    }

    .Relative.TabPanel > * {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    }

.TabPanel.AnyTabSelected
{
    height: 100%;
}

.TabPanel {
    height: auto;
    position: relative;
    gap: 0 !important;
}.TabPanel.TabPanel_TabBottom
{
    flex-direction: column-reverse !important;
}

.TabPanel.AnyTabSelected > .TabBody {
    display: inherit;
    flex: 1;
}

.Mobile .TabPanel_TabButton > .TabHeader
{
    display: flex !important;
    flex-direction: column;
}

.Mobile .TabPanel_TabButton.AnyTabSelected > .TabHeader {
    flex-direction: row;
}

.TabPanel {
display: flex;
height: 100%;
flex-direction: column;
}

.TabPanel > .TabBody
{
flex: 1;
width: 100%;
max-width: 100%;
}

    .SingleItem > .ItemBody > .Fields > div.TabPanel:only-of-type {
    padding: 0 0;
    }

.TabPanel_Tab > .TabBody > .EntityTypeView.Selected > .EntityTypeViewBody > .Center > .PanelHeader .EntityTypeViewTitleBody {
    color: transparent !important;
    display: none;
}


/* META  : .Base.Layout.Panel.TabPanel.TabPanel_TabVer */
.TabPanel.TabPanel_TabVer
{
    flex-direction: row;
}

.TabPanel.TabPanel_TabVer > .TabHeader
{
    flex-direction: column;
}

.TabPanel.TabPanel_TabVer > .TabBody
{
    flex: auto;
}


/* META  : .Base.Layout.Panel.Report */
.Report {
    display: block;
    height: 100%;
    position: relative;
}

.Report > .ReportBody
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 100%;
    box-shadow: 0 0 0 silver;
    border: 0;
    outline: 0;
}

.Report .ReportIFrame
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    box-shadow: 0 0 0 !important;
    border: 0 !important;
    outline: 0 !important;
    z-index: 19;
}

.ReportMessage {
    text-align: center;
    padding: 10%;
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    font-size: 200%;
}

.ReportMessage {
    color: red;
}

.ReportExport {
    text-align: right;
    position: absolute;
    top: 8px;
    right: 0;
    display: flex;
}

.ReportExport .MicroButton {
    font-size: 200%;
    padding: 5px;
}

.ReportExport a
{
    font-size: 160%;

}

.ReportParameters
{
    padding: 0;
    text-align: center;
    vertical-align: top;
    position: relative;
}

.ReportParameter {
    display: inline-block;
    vertical-align: top;
    margin: 1px 5px;
    position: relative;
}

.ReportParameterLabel {
    display: block;
    text-align: left;
    padding: 1px 5px;
}

.ReportParameter .ItemSelection {
    min-width: 4em;
    font-weight: bold;
    white-space: normal;
    padding: var(--inputPadding);
    border: var(--inputBorder);
}

.ReportParameter .DataType_Integer {
    width: 8em;
    text-align: right;
}

.ReportParameter .DataType_DateTime {
    width: 8em;
    text-align: center;
    margin: auto;
}

.ReportParameter  .DataType_DateTime::after {
    content: var(--icon-Date-Picker);
    font-family: "361";
    float: right;
    display: inline-block;
    position: absolute;
    right: 4px;
}

.ReportParameter .DataType_Boolean {
    width: 1.5em;
    text-align: center;
}

.ReportParameter .DataType_Float {
    width: 8em;
    text-align: right;
}

.ReportParameter input {
    max-width: 100%;
    font-weight: bold;
}

.ReportParameter input[type='number'] {
    width: 8em;
    text-align: right;
}


/* META  : .Base.Layout.Panel.StartLogo */
.Page_DefaultLeft .StartLogo img
{
    max-height: 48px;
}.StartLogo {
    cursor: pointer;
}

.StartLogo span
{
    display: block;
}

.StartLogo img {
    max-width: 100%;
    max-height: 64px;
    min-height: 40px;
    padding: 4px;
}

.PagePrintPreview .StartLogo {
    position: absolute;
    left: 0;
    right: auto;
    top: 0;
    bottom: auto;
    white-space: normal;
}


/* META  : .Base.Layout.Panel.Middle */
.Middle {
display: flex;
    flex-direction: column;
    flex: 1;
overflow: auto;
position: relative;
}

.MiddleCenter {
flex: 1;
}.MiddleLeft .SubRows .SubRows {
    padding-left: 24px;
}


/* META  : .Base.Layout.Panel.Top */
.Top
{
    width: 100%;
    max-width: 100%;
    position: relative;
}

.TopLeft {
    vertical-align: middle;
    text-align: left;
}

.TopRight {
    vertical-align: middle;
    text-align: right;
}

.TopCenter {
    vertical-align: middle;
    max-width: 100%;
    padding-left: 50px;
    padding-right: 50px;
}

.PageTop .TopLeft {
    vertical-align: middle !important;
    text-align: left !important;
    padding: 1px 0.5em;
    align-items: center !important;

}

.PageTop .TopCenter {
    vertical-align: middle !important;
    text-align: center !important;
}

.PageTop .TopRight {
    vertical-align: middle !important;
    text-align: right !important;
    padding: 1px 0.5em;

}

.Top {
    display: flex;
    flex-direction: row;
}

.Top > .TopLeft {
    display: flex;
    text-align: left;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.Top > .TopCenter
{
    flex: 1;
    white-space: nowrap;
    height: 100%;
    display: flex;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.Top > .TopRight
{
    width: auto;
    position: relative;
    display: flex;
    text-align: left;
    padding: 0;
    align-items: center;
    justify-content: center;
}


/* META  : .Base.Layout.Panel.Center */
.CenterBody
{
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
border: 0px solid rgba(0,0,0,0.1);
}

.CenterBody > .Top
{
    height: 40px;
    position: absolute;
    top: 0;
    z-index: 10;
    box-sizing: border-box;
    padding: 0;
}.Center > .Bottom {
    opacity: 0.75;
    padding: 1px 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: space-between;
    align-items: center;
}

.Center > .Bottom:hover {
    opacity: 1.0;
}


/* META  : .Base.Layout.Panel.Header */
.Header {
    white-space: nowrap;
    width: 100%;
}

.Header > .Left,.Header > .Right, .Header > .Center
{
    display: inline-block;
    width: 33%;

    vertical-align: bottom;
}

.Header > .Left > * {
    display: inline-block;
}

.Header > .Center > * {
    display: inline-block;
}


/* META  : .Base.Layout.Panel.Bottom */
.Bottom {
    white-space: nowrap;
    text-align: center;
}

.Bottom .Left,.Bottom .Right
{
    width: 15%;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    min-width: 6em;
}

.Bottom .Center {
    width: 70%;
    display: inline-block;
    vertical-align: middle;
}

.View_Chart .EntityTypeViewBody .Center .Bottom,
.View_Calendar .EntityTypeViewBody .Center .Bottom,
.View_Metrics .EntityTypeViewBody .Center .Bottom,
.View_Merge .EntityTypeViewBody .Center .Bottom,
.View_Gantt .EntityTypeViewBody .Center .Bottom,
.View_Matrix .EntityTypeViewBody .Center .Bottom {
    display: none !important;
}

.NoItems .ItemCount {
    display: none;
}


/* META  : .Base.Layout.Panel.Image */
.Image2 {
display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.Image2 > span {
    padding: 0.5em;
    font-size: 125%;
}

.Image2 > svg {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    height: 100%;
}.ImageDimensions {
    position: absolute;
    right: 0;
    top: 0;
    padding: 1px !important;
    opacity: 0.5;
    font-size: 75% !important;
    display: none;
}


/* META  : .Base.Layout.Panel.GlobalFilters */
.GlobalFilter .ItemSelection > span:hover {
    content: "x";
}

.GlobalFilters_Horizontal {
    white-space: nowrap;
    line-height: 3em;
}

.GlobalFilters_Horizontal > * {
    display: inline-block !important;
    vertical-align: top;
    line-height: 2em;
}

.GlobalFilters_Horizontal > .GlobalFiltersTitle {
    display: inline-block !important;
    vertical-align: top;
    line-height: 2.75em;
    padding: 0 1em;
}

.GlobalFiltersTitle {
    display: inline-block;
}

.GlobalFilter:hover, .LocalFilter:hover {
    opacity: 1.0;
    box-shadow: 1px 1px 4px #222222;
}

.LocalFilterTitle {
    padding: 4px 10px 4px 4px;
    min-width: 100px;
}

.LocalFilterTitle {
    color: brown;
    font-weight: bold;
}

.FieldTypesSelect::before {
    content: "+";
}

.FieldTypesSelect:after {
    content: "" !important;
}

.GlobalFiltersTitle:before {
    content: var(--icon-Plus);
    font-family: "361";
}

.GlobalFieldTypes:hover .MicroButton {
    display: unset;
}

.LocalFilterLabel {
    padding: 4px;
}

.GlobalFilters_Vertical > div {
    display: block;
}

.GlobalFilters_Vertical > div {
    color: #d7d7d7;
}#MainContent .GlobalFilters .ETFilter, .GlobalFiltersBody {
    border: solid 0 silver;
    vertical-align: top;
}

#MainContent .GlobalFilters .GlobalFieldTypes {
    display: none !important;
}

.GlobalFilter select::selection {
    background-color: transparent !important;
    outline: 0;
}

.GlobalFilter select:active {
    background-color: transparent !important;
    outline: 0;
}

.GlobalFilter select:focus {
    background-color: transparent !important;
    outline: 0;
    box-shadow: 0 0 0 !important;
}

.GlobalFilter select option {
    background-color: white;
    color: #222222;
}

.GlobalFilters_Vertical .GlobalFilterLabel {
    color: silver !important;
}

.GlobalFilters_Vertical .ETFilterTitle {
    color: white;
}


/* META  : .Base.Layout.Panel.GlobalFilters.GlobalFilters_DeleteButton */
.GlobalFilter .DeleteButton {
    position: absolute;
    left: 3px;
    top: 2px;
    border-radius: 50%;
    padding: 1px;
    right: auto;
    display: none;
}

.GlobalFilter:hover .DeleteButton {
    display: inline-block;
}

.LocalFilter:hover .DeleteButton {
    display: inline-block;
}

.LocalFilter .DeleteButton {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
}


/* META  : .Base.Layout.Panel.GlobalFilters.GlobalFilters_GlobalFilter */
.GlobalFilters_Horizontal .GlobalFilter > *,.GlobalFilters_Horizontal .GlobalFilter > * {
    display: inline-block !important;
    white-space: nowrap !important;
    padding: 0.25em 0.5em !important;
}

.GlobalFilter > * {
    display: inline-block;
    padding: 5px;
}

#MainContent .GlobalFilters .GlobalFilter > div {
    white-space: normal !important;
}

.OneGlobalFilter .GlobalFilter {
    background-color: transparent !important;
    border-radius: 0;
    box-shadow: 0 0 0;
}


/* META  : .Base.Layout.Panel.GlobalFilters.GlobalFilters_GlobalFilters */
.GlobalFilters {
    white-space: nowrap;
    display: block;
    text-align: center;
    width: 100%;
    padding: 1px;
}

#MainContent .GlobalFilters {
    display: flex !important;
    position: relative;
    margin: 0 !important;
    min-height: unset;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#MainContent .GlobalFilters * {
    box-shadow: 0 0 0 !important;
    color: #656565;
    width: auto !important;
    height: auto !important;
    min-height: unset;
    text-align: center;
}


/* META  : .Base.Layout.Panel.GlobalFilters.GlobalFilters_ItemSelection */
.GlobalFilters .ItemSelection > span {
    border: 0;
    padding: 1px 0.5em;
    margin: 1px;
}

.GlobalFilters_Vertical .ItemSelection {
    display: block;
    text-align: center;
}

.GlobalFilters .ItemSelection {
    text-align: center;
    padding-right: 1em;
}

#MainContent .GlobalFilters .ItemSelection {
    border: var(--border2);
}

.GlobalFilters .ItemSelection {
    color: #222222;
    background-color: transparent;
    box-shadow: 0 0 0;
    border: 0;
}


/* META  : .Base.Layout.Panel.GlobalFilters.GlobalFilters_LocalFilter */
.GlobalFilters_Horizontal .LocalFilter {
    display: inline-block !important;
    white-space: nowrap !important;
    padding: 0.25em !important;
    vertical-align: top;
}

.LocalFilter {
    padding: 0;
    text-align: center;
    white-space: nowrap;
    display: inline-block;
    position: relative;
    padding-left: 6px;
    cursor: pointer;
    margin: 0 4px;
}

.GlobalFilters_Vertical .GlobalFilter, .GlobalFilters_Vertical .LocalFilter   {
    display: block;
    text-align: left;
    padding: 0;
}

.GlobalFilters_Vertical .GlobalFilter > *, .GlobalFilters_Vertical .LocalFilter > * {
    max-width: 100%;
    border: 0;
    white-space: pre-line;
}

#MainContent .GlobalFilters .LocalFilter > div {
    white-space: normal !important;
}

.GlobalFilters_Horizontal .LocalFilter {
    box-shadow: 0 0 0 !important;
    background-color: transparent !important;
}

.LocalFilter {
    opacity: 0.75;
}

.GlobalFilters_Vertical .GlobalFilter, .GlobalFilters_Vertical .LocalFilter {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    color: white;
}


/* META  : .Base.Layout.Panel.GlobalFilters.GlobalFilters_LocalFiltersBody */
.LocalFiltersBody {
    display: inline-block;
}

.LocalFiltersBody  * {
    display: inline-block;
    font-size: 12px;
}

.GlobalFilters_Vertical .LocalFiltersBody  * {
    display: block;
    font-size: 12px;
}


/* META  : .Base.Layout.Panel.GlobalFilters.GlobalFilters_select */
.GlobalFilters select {
    max-width: unset;
    text-align: center;
}

.GlobalFieldTypes > select {
    width: 24px;
    height: 24px;
    display: inline-block;
    background-image: url(/images/filter.png);
    background-size: 12px 12px;
    background-repeat: no-repeat;
    padding: 6px;
    font-size: var(--textSize);
    margin: 0 4px;
}

.GlobalFilters_Vertical .LocalFilter > select {
    display: block;
    text-align: left;
    max-width: 100%;
}

.GlobalFilters select {
    background-color: transparent;
    border: 0;
    box-shadow: 0 0 0;
    font-weight: bold;
    color: brown;
}

.GlobalFilters_Vertical .LocalFilter > select {
    background-color: white;
    border: 0;
    color: #222222;
}


/* META  : .Base.Layout.Panel.Login */
.LoginContent {
    padding: 3px 3%;
    text-align: center;
    height: auto;
    }

.LoginButton {
    display: inline-block;
}

.LoginMessage {
    padding: 4px;
    font-weight: 200;
    font-size: 80%;
    margin-top: 2em;
}

.Panel_LoginContent
{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.LoginPanel {
    flex: 2;
}

.LoginWelcomeMessage
{
    flex: 1;
}

.Panel_UserSettings
{
    flex: 1;
}

.LoginPanelTitle
{
    display: none;
}
.LoginVideo
{
    z-index: 1;
}

.LoginVideo video {
    position: fixed;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -100 !important;
    object-fit: cover;
    opacity: 1.0;
}

.Content___Login__ .Panel_Login
{
    display: flex;
    flex-direction: column;
}

.Content___Login__ .Panel_body
{
    flex:1;
}

.PleaseShowCard {
    color: red;
    font-weight: bold;
}

.Logon, #Logon {
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
    text-align: center;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 38px;
    align-self: stretch !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    border-radius: 8px;
    transition: background 150ms ease, box-shadow 150ms ease;
    user-select: none;
}

.Logon:hover {
    background: rgba(0, 0, 0, 0.05);
}

.Logon .UserTable {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}

.Logon .UserImage {
    height: 32px;
    width: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
}

.Content_Login > * {
    padding: 1em;
}

.Logon > span {
    display: inline-block;
}


/* META  : .Base.Layout.Panel.Login.LoginPage */
.LoginPage {
    height: 100% !important;
}

.LoginPage .MainContent {
    min-height: 100%;
    flex: 1;
}
.LoginPage .HomeButton {
    position: fixed;
    top: 5px;
    left: 5px;
    padding: 1em;
}

.LoginPage .HomeButton {
    border-radius: 3em;
}

.Page___Login__ .PageZone_Login {
    height: 100%;
    display: flex;
}


/* META  : .Base.Layout.Panel.Login.LoginForm */
#Cockpit_Login_Form > .Commands > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.LoginForm #ModuleImage {
    display: none;
}

.LoginPage .LoginForm #ModuleImage {
    display: block;
}

.LoginForm .LastMessage {
    margin: 0.5em;
}

.LoginForm .LastMessage {
    color: #dc3545;
    font-weight: 500;
    font-size: 13px;
    padding: 8px 12px;
    background-color: rgba(220,53,69,0.08);
    border-radius: 6px;
    border-left: 3px solid #dc3545;
    animation: loginErrorFadeIn 0.3s ease;
}

@keyframes loginErrorFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.LoginForm {
    padding: 0;
    margin: 0 auto;
    display: block;
    margin-top: 16px;
    max-width: 320px;
}

#Page___Login__ .LoginForm > form {
max-width: 320px;    
gap: 4px;    
display: flex;    
flex-direction: column;

}

.LoginForm > form, .SingleItem_Subscriber_Request {
    text-align: center;
    padding: 2.5rem;
    max-width: 22em;
    margin: 8px auto !important;
    background: rgba(255,255,255,0.95);
    -webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.LoginForm {
    max-width: 380px;
}

.LoginForm div.UserPassword > a.PasswordIcon {
 position: absolute;   
 font-size: 1.25em;   
 right: 2.3em;    
margin-top: .75em;

}

.LoginForm .UserDescription {

    text-align: center;
    font-size: 80%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5em 0 0 0;
    display: none;
}

.LoginForm input, .LoginForm button, .LoginForm .PadKey, .UserSettings .ItemSelection {
    border-radius: 8px;
}

.LoginForm input[type="text"], .LoginForm input[type="password"] {
    padding: 10px 14px;
    border: 1px solid rgba(0,0,0,0.12);
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background-color: rgba(255,255,255,0.9);
}

.LoginForm input[type="text"]:focus, .LoginForm input[type="password"]:focus {
    border-color: var(--backColor);
    box-shadow: 0 0 0 3px rgba(0,120,212,0.1);
    outline: none;
}

.UserProp .ItemSelection {
    display: inline-block;
    min-width: 0 !important;
}

.LoginForm .PadKey {
    border-radius: 0;
}

.LoginForm .UserPassword input {
    width: 100%;
    padding-left: 3em;
    padding-right: 3em;
}

.LoginForm .Captcha {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    white-space: nowrap;
    padding: 2px;
    margin: 0;
    position: relative;
}

.LoginForm .Captcha {
    background-color: transparent;
    border-radius: 5px;
    border: solid 0 rgba(192,192,192,0.75);
}

.LoginForm .PasswordEye_On {
    position: absolute;
    right: 0;
    padding: 10px;
}

.LoginForm .PasswordEye_On {
    color: #888 !important;
}

.HomeButton > .fa {
    margin-right: 4px;
}

.LoginForm .HomeButton img {
    height: 32px !important;
    display: inline-block;
    vertical-align: middle;
}

.LoginForm .UserImage .fas {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    margin: 0.4em;
    font-size: 1em !important;
    padding: 10px;
    margin: 1px !important;
}

.LoginForm .UserName select {
    display: block;
    margin: auto;
}

.UserProp select {
    background-color: rgba(255,255,255,0.75);
}

.LoginForm button {
    padding: 0.75em 1em;
    margin: 0.5em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    font-size: 120%;
}.LoginForm button.ForgotMyPassword > div {
    text-align: right;
}

.LoginForm button.ForgotMyPassword {
    background-color: transparent;
    color: inherit;
    box-shadow: 0 0 0;
    border: 0;
    margin: 0;
    padding: 0;
}

.LoginForm button.ForgotMyPassword > div::after {
    content: "→";
    margin-left: 4px;
    color: var(--backColor, #0a6eb9);
}

.LoginForm .RememberMe {
font-size: 80%;    
padding: 0.25em;    
gap: 3px; 
display: flex;  
justify-content: center;  
align-items: center;

}

.LoginButton {
    background-color: var(--backColor);
    color: white;
    border-radius: 8px;
    font-weight: 500;
    letter-spacing: 0.03em;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.LoginButton:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    filter: brightness(1.08);
}

.LoginButton:active {
    transform: scale(0.98);
}

.LoginMessage {
    color: #0374f7;
    text-transform: capitalize;
    text-align: left;
}

.QRCode {
    background-color: White;
}

.UserProp .Selected {
    background-color: #838383;
    color: white;
}

.FieldValue.UserProp {
    padding: 0;
}

.FieldValue.UserProp > .Label {
    display: none;
}

.LoginForm .UserName {
    background-color: transparent;
    border-radius: 5px;
    border: solid 0 rgba(192,192,192,0.75);
}

.LoginForm button:disabled {
    background-color: #aaa;
    opacity: 0.5;
}

.LoginForm .Logoff {
    background-color: orangered;
    color: white;
}

.LoginForm .Login {
    background-color: var(--backColor);
    color: white;
    border-radius: 8px;
    font-weight: 500;
    letter-spacing: 0.03em;
    transition: box-shadow 0.2s ease, transform 0.1s ease;
}

.LoginForm .ChangePassword {
    background-color: transparent;
    color: #303030;
}

.LoginForm button.ChangePassword {
    background-color: transparent;
    color: #303030;
}

.LoginForm .Cancel {
    background-color: orangered;
    color: white;
}

.LoginForm button.SetOnlyPassword {
    background-color: #085cb2;
    color: white; /* 2026-09-02: koyu zemin, color devralinan #303030 = 3,18:1 -> white 6,6:1 (kardesleri .Login/.Logoff/.Cancel zaten white) */
}

.LoginForm button.ChangePassword:disabled {
    background-color: transparent;
    color: #808080;
}

.LoginForm button.CardPassword {
    background-color: purple;
    color: white;
}


/* META  : .Base.Layout.Panel.Login.UserProp */
div.UserProp {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100%;
    flex: 1;
}

div.UserProp > form {
    text-align: center;
    padding: 0;
    display: flex;
    align-items: Center;
    justify-content: center;
    min-width: 20em;
}

.UserProp  .Label {
    min-width: 7em;
    max-width: 7em;
    text-align: right;
}

.UserProp button
{
    display: block;
}


/* META  : .Base.Layout.Panel.Login.UserSettings */
.LoginContent .UserSettings {
    text-align: center;
    margin: 0 auto;
    min-width: 20em;
    left: -3em;
}.LoginContent .UserSettings > * {
    vertical-align: top;
}

.UserSettings .Label {
    text-align: right;
    margin-top: 0.25em;
}

.UserSettings .ItemSelection {
    min-width: 8em;
    width: auto;
    display: block;
    flex: 1;
}


/* META  : .Base.Layout.Panel.Login.PasswordPolicy */
.PasswordPolicy {
    text-align: left;
    margin: 0 auto;
    color: #303030;
    font-weight: normal;
}

    .PasswordPolicy .PasswordPolicyTitle {
    font-weight: bold;
    padding: 0.5em;
    color: darkred;
    }

    .PasswordPolicy .PasswordPolicyResult {
    font-weight: bold;
    padding: 0.5em;
    color: darkred;
    }

    .PasswordPolicy .PasswordPolicies {
    font-size: 82%;
    padding: 0 0 0 1em;
    }

    .PasswordPolicy .PasswordPolicies div {
    text-align: left;
    padding: 0.25em 0;
    white-space: normal;
    }

    .PasswordPolicy .PasswordPolicies div:before {
    content: var(--icon-Circle);
    font-family: "361";
    text-align: center;
    font-size: 50%;
    padding: 0.5em;
    width: 1.75em;
    display: inline-block;
    }

    .PasswordPolicy .PasswordPolicies div.Wrong:before {
    content: var(--icon-Circle-Times);
    font-family: "361";
    text-align: center;
    font-size: 100%;
    padding: 0;
    }
    .PasswordPolicy .PasswordPolicies div.Right:before {
    content: var(--icon-Circle-Check);
    font-family: "361";
    text-align: center;
    font-size: 100%;
    padding: 0;
    }

    .PasswordPolicy .PasswordPolicies div.Right {
    color: forestgreen;
    }

    .PasswordPolicy .PasswordPolicies div.Wrong {
    color: red;
    }


/* META  : .Base.Layout.Panel.Login.Password */
.SingleItem_ForgotMyPassword_Internet {
    max-width: 40em;
    margin: 0 auto;
}

.SingleItem_ForgotMyPassword_Internet .Text_Title {
    font-size: 200%;
    display: block;
    text-align: center;
    padding: 1em;
}

    .SingleItem_ForgotMyPassword_Internet .ItemStates > * {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.5em;
    }

.SingleItem_ForgotMyPassword_Internet .CloseButton
{
    display: none;
}

.SingleItem_ForgotMyPassword_Internet .ItemBody {
    position: relative;
    height: auto;
}


/* META  : .Base.Layout.Panel.Login.Captcha */
.LoginForm .Captcha {
    white-space: nowrap;
    display: flex;
}

.LoginForm .Captcha .CaptchaImage {
    opacity: 0.5;
    position: absolute;
    z-index: 999;
    padding-left: 8px;
}

.LoginForm .Captcha input {
    height: 32px !important;
    width: 66px;
    text-align: center;
    padding-left: 3em;
}

.LoginForm .Captcha img {
    height: 32px !important;
}

.LoginForm .Captcha a {
    width: 32px;
    height: 32px;
    background-image: url(/images/keyboard.png);
    background-size: 32px 32px;
}


/* META  : .Base.Layout.Panel.Login.Commands */
.Commands {
text-align: center;
    padding: 0.5em;
    gap: 0.5em;
    display: flex;
    flex-direction: column;
}

.Commands > a  > span {
    font-size: 15px;
    padding: 5px;
    margin: 5px;
    display: inline-block;
}

.Commands > a {
    display: block;
    margin: 4px auto;
    opacity: 0.5;
    max-width: 14em;
    min-width: 10em;
}

.Commands > a:hover {
    opacity: 1.0;
}

.LoginContent .Commands {
    padding: 0;
}

.Commands > a.Yes
{
    background-color: red;
    color: white;
}

.Commands > a.No
{
    background-color: green;
    color: white;
}


/* META  : .Base.Layout.Panel.Login.User */
.UserTable {
    display: flex;
    margin: 1px;
    align-items: center;
    justify-content: center;
}

.UserTable > span, .UserTable > img {
    font-size: 2em;
    margin-right: 1px;
}

.UserTable > *
{
    display: table-cell;
    vertical-align: middle;
}

.UserImage > span {
    font-size: 200%;
    display: flex;
}.UserET__Guest .UserET {
    padding: 0.5em;
    }

    .UserTitle {
    line-height: 1em;
    text-align: center;
    display: block;
    }

.ItemView__UserRole_Role {
    display: inline-block;
    max-width: 320px;
    background-color: white !important;
}
.UserET {
    color: #656565;
    display: none;
}


/* META  : .Base.Layout.Panel.Login.ThemesSelect */
.ThemesSelect {
    display: block;
    margin: 0 auto;
    text-align: center;
    padding: 0.5em;
}

.ThemesSelect > div
{
    display: inline-block;
}


/* META  : .Base.Layout.Panel.Login.LoginETList */
.LoginETList {
    padding: 0.5em !important;
    font-size: 1em;
    margin: 0;
    border: 0 !important;
    border-radius: 5px;
    background-color: transparent !important;
    display: none !important;
}

.LoginETList::after {
    content : "";
}


/* META  : .Base.Layout.Panel.Login.UserInterfaceSelect */
.UserInterfaceSelect {
    display: flex;
    margin: 0 auto;
    text-align: center;
    min-width: 20em;
    max-width: 20em;
    white-space: nowrap;
    align-items: center;
}

.UserInterfaceSelect > div {
    display: block;
    margin: 0.25em;
}

.UserInterfaceSelect > .Label {
    min-width: 7em;
    max-width: 7em;
    text-align: right;
}


/* META  : .Base.Layout.Panel.Login.LanguagesSelect */
.LanguagesSelect {
    display: block;
    margin: 0 auto;
    text-align: center;
    padding: 0.5em;
    max-width: 14em;
}

.LanguagesSelect > form > * {
    display: inline-block;
    margin: 0.25em;
}


/* META  : .Base.Layout.Panel.Login.FingerPrintAgent */
#FingerPrintAgent {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    width: 60px !important;
    height: 90px !important;
    background-image: url(/images/fingerprint.png);
    background-repeat: no-repeat;
    background-size: cover;
}


/* META  : .Base.Layout.Panel.Login.QRCodeAuthentication */
.QRCodeAuthentication
{
    margin-top: 1em !important;
}

.QRCodeAuthentication > form
{
    padding: 0;
    margin: 0 auto !important;
}


/* META  : .Base.Layout.Panel.Login.Authenticator */
.LoginForm .ManualCode
{
    text-align: center;
}

.LoginForm .AuthenticatorCode
{
    text-align: center;
}


/* META  : .Base.Layout.Panel.Login.LoginContentHTML */
.LoginContentHTML
{
    height: 100%;
}

.LoginContentHTML > div
{
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* META  : .Base.Layout.Panel.Login.UserImage */
.UserImage svg {
    min-width: 100%;
    min-height: 100%;
    width: 100%;

}


/* META  : .Base.Layout.Panel.Navigation */
.RootHoverMenu.Menu_Horizontal .RootHoverMenuBody {
    display: flex;
    flex-direction: row;
}


/* META  : .Base.Layout.Panel.Navigation.RootHoverMenu */
.RootHoverMenuBody .NavTitle > span
{
    white-space: nowrap;
}

.RootHoverMenuBody .NavTitle
{
    padding: 5px;
}.RootHoverMenuBody > .Nav > .SubNavs > .Nav
{
    display: block;
    margin: 0;
    flex: 1;
}

.RootHoverMenuBody > .Nav {
    padding: 0.5em;
    max-width: 14em;
    max-width: 35em;
    display: block;
    font-size: 100%;
}

.RootHoverMenuBody .Nav {
    vertical-align: top;
    padding: 0;
    padding-left: 1em;
}

.SelectionsMenu.RootHoverMenu .NavButton
{
    padding: calc(var(--cellSize) / 15);
    padding-left: 0;
    padding-right: 0;
}.RootHoverMenuBody .SubNavs {
    margin-left: 1em;
    justify-content: flex-start;
    gap: 0;
    flex-direction: column;
align-items: stretch;
}

.RootHoverMenuBody .Nav .Nav {
    font-size: 90%;
}

.RootHoverMenuBody .NavButton:hover {
    text-shadow: 0 0 1px;
}

.RootHoverMenuBody img {
    height: 1em;
}

.RootHoverMenuBody .NavImage {
    display: none;
}

.RootHoverMenuBody .NavButton:before {
    text-align: left;
    content: var(--icon-Circle);
    font-family: "361";
    left: 0.5em;
    position: absolute;
    font-size: 80%;
}

.RootHoverMenuBody .NavButton:before {
    color: #656565;
    opacity: 0.5;
}

.RootHoverMenuBody .Nav:hover > .NavButton:before {
    font-weight: bold;
    content: var(--icon-Circle-Solid);
}

.RootHoverMenuBody .Nav.Selected > .NavButton .NavTitle > span {
    text-decoration: underline;
}

.RootHoverMenuBody .Nav.Selected {
    box-shadow: 0 0 0;
    border: 0;
}

.RootHoverMenuBody .Nav {
    transition: background-color 0.15s ease;
}

.RootHoverMenuBody .Nav:hover {
    background-color: rgba(0,0,0,0.03);
    border-radius: 4px;
}

.RootHoverMenuBody .Nav.Selected > .NavButton:before {
    color: var(--backColor);
    opacity: 1;
}


/* META  : .Base.Layout.Panel.Navigation.NavHoverMenu */
.NavButton.NavHoverMenu > *
{
    pointer-events: none;
}

.NavButton.NavHoverMenu::after {
content: var(--icon-Triangle-Down);
    font-family: "361";
    opacity: 0.7;
    position: absolute;
    bottom: -1.1em;
    font-size: 0.75em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    filter: drop-shadow(1px 1px 1px gray);
}

.NavButton.NavHoverMenu.SelectionsMenuOpen > .NavTitle:after {
    z-index: 999999;
    bottom: calc(3px - 0.5em);
}

.SelectionsMenu > .RootHoverMenuBody
{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.SelectionsMenu.Menu_HorMenu > .RootHoverMenuBody
{
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    min-width: 50vw;
    max-width: 1200px;
}

.SelectionsMenu.Menu_HorMenu > .RootHoverMenuBody > .Nav
{
    flex: 1;
}


/* META  : .Base.Layout.Panel.Navigation.NavView */
.NavView {
box-sizing: border-box;
    padding: 8px !important;
text-align: center;
}

.NavView > .Nav {
    box-sizing: border-box;
    box-shadow: 1px 1px 1px silver !important;
    max-width: 100%;
}

.NavView > .Nav:only-child
{
    box-shadow: 0 0 0 !important;
}

.NavView > .Nav > .NavButton > .NavImage {
    height: 60%;
    top: 10%;
    position: relative;
}

.NavView > .Nav > .NavTitle {
    width: 100%;
    height: 25%;
    text-align: center;
    padding-top: 10%;
    bottom: 0;
}


/* META  : .Base.Layout.Panel.Navigation.NavigationHistory */
#NavigationHistory {
    text-align: left;

}

#NavigationHistory > div {
    display: inline-block;
    padding: 0;
    vertical-align: middle;
    cursor: pointer;
}

#NavigationHistory > div > div {
    display: inline-block;
    padding: 5px;
    vertical-align: middle;
    font-size: 12px;
}

#NavigationHistory > div:after
{
    content: "";
    width: 0;
    height: 0;
    display: inline-block;
    vertical-align: middle;
}

#NavigationHistory > div > div {
    background-color: #67727D;
    color: white;
}

#NavigationHistory > div:after {
    border-style: solid;
    border-width: 12px 0 12px 12px;
    border-color: transparent transparent transparent #67727D;

}


/* META  : .Base.Layout.Panel.Navigation.Nav360 */
.RootNav.Nav360 {
    position: relative;
    padding: 1em;
    perspective: 1200px;
    transform-style: preserve-3d;
    max-width: 100%;
    margin: 0 auto;
}

    .RootNav.Nav360:before {
    position: absolute;
    content: " ";
    font-family: "361";
font-weight: 900;
font-size: 100%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    top: 0%;
    border: dotted 3px silver;
    border-radius: 50%;
    z-index: -100;
    -webkit-transform: rotateX(50deg);
    transform: rotateX(50deg);
    background-image: radial-gradient( circle closest-side, #ffffffff, rgba(0,0,0,0) );
    }
    .RootNav.Nav360 > .Nav {
    border-radius: 50%;
    width: auto;
    z-index: 0;
    margin: 0;
    display: block;
    position: absolute;
    width: 186px;
    height: 116px;
    left: 40%;
    top: 25%;
    border: 2px solid #222222;

    }

.RootNav.Nav360:before {
    display: block;
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform: rotateX(2deg) rotateY(0deg) translateZ(-70vh) scale(1);
    z-index: -100;
    max-width: 81%;
    margin: 0 auto;
}

.RootNav.Nav360:before {
    color: #222222;
    background-color: rgba(255,255,255,0.1);
    border-radius: 50%;
    border: dotted 1px silver;
}


/* META  : .Base.Layout.Panel.Navigation.NavigationButtons */
.NavigationButtons .NavImage {
    color: var(--iconColor);
}

.NavigationButtons
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: auto;
-webkit-overflow-scrolling: touch;
    position: relative;
    gap: 16px;
    padding: 16px;
}

.MyNavigation .NavigationButtons {
    flex-direction: row;
}


.Navigations_Title {
    font-size: 1.25em;
    text-transform: uppercase;
}

.Navigation_Entities .Navigations_Title {
font-size: 1em;
    text-align: center;
    text-transform: none;
    opacity: 0.5;
}

.NavigationButtons  .NavigationNavs,
.NavigationButtons  .NavigationContents
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    overflow: auto;
-webkit-overflow-scrolling: touch;
    position: relative;
    gap: 10px;
    padding: 10px;
}

.NavigationButtons > .Navigation_EntityTypes
{
    background-color: var(--white);
    padding: 16px;
    border-radius: 8px;

}

.NavigationButtons > .Navigation_DoScripts
{
    padding: 16px;
    border-radius: 8px;
}

.NavigationButtons > .Navigation_DoScripts a
{
    background-color: var(--white);
    padding: 8px 16px;
    border-radius: 16px;
}

.Navigation_Entities  {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    padding: var(--gap);
    gap: var(--gap);
}

.Navigation_Entities > .NavEntity {
    flex-direction: column;
    border-radius: var(--gap);
}

.Navigation_Entities  .NavEntity {
    border-radius: var(--gap);
    background-color: #ffffff20;
    flex: auto;
}

.Navigation_Entities  .NavEntity:not(:has(.NavEntity)) {
    flex-direction: column;
    background-color: var(--white);
    border-radius: var(--gap);
}

.Navigation_Entities > .NavEntity.NavGroup > .NavGroupTitle {
    background-color: transparent;
    padding: 16px;

}

.Navigation_DoScripts {
gap: 8px;
display: flex;
flex-wrap: wrap;
}

.Navigation_DoScripts a
{
    padding: 4px 8px;
    border: var(--border1);
    border-radius: 8px;
}

.Navigation_DoScripts a > .ButtonText
{
    padding: 4px;
}

.Navigation_Entities > .NavEntity > .NavGroupBody {
    flex-direction: column;
}

.NavigationButtons .Nav.NavBranch
{
    border: var(--border2);
    flex: 1 0 auto;
    max-width: 100%;
}

.NavigationButtons  .SubNavs
{
    max-width: 100%;
    min-width: 100%;
}

.NavigationButtons .ViewBody
{
    position: relative;
}

.NavigationButtons  .SubNavs  .Nav.NavBranch
{
    border: var(--border2);
    flex: 1 0 auto;
    max-width: 100%;
}

.NavigationButtons .LeafNav:hover .NavButton
{
    background-image: var(--hoverImage1);
}

.NavigationButtons .LeafNav:hover .NavButton .NavImage
{
    background-image: var(--hoverImage1);
}

.NavigationButtons .LeafNav > .NavButton {
    border-radius: var(--gap);
}

.NavigationButtons .LeafNav .NavImage {
opacity: 0.9;
position: relative;
padding: calc(var(--cellSize) / 5);
width: calc(var(--cellSize));
height: calc(var(--cellSize));
transition: all .2s ease-in-out;
    max-width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--iconBackColor);
    border-radius: var(--iconRadius);
    box-shadow: var(--iconShadow);
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border1);
}

.NavigationButtons .LeafNav .NavImage:before
{
    font-size: calc(var(--cellSize) * 0.6);
    width: calc(var(--cellSize) * 0.6);
    margin: auto;
    height: 100% !important;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    height: 100%;
}.NavigationButtons .NavBranch
{
    border-radius: 1em;
    border: var(--border2);

}

.NavigationButtons .EmptyImage {
    display: none !important;
}

.NavigationTitle {
    top: 0;
    text-align: center;
    left: 0;
    right: 0;
    padding: 0.25em;
    line-height: 1em;
    font-weight: bold;
    opacity: 0.5;
    height: auto;
}

.NavigationButtons .LeafNav.NoImage {
    max-width: inherit;
    height: calc(var(--cellSize) * 1.5);
}

.NavigationButtons .LeafNav.NoImage > .NavTitle > span {
    vertical-align: middle;
}

.NavigationButtons .LeafNav .NavTitle
{
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    width: 100%;
}

.NavigationButtons .LeafNav .NavTitle span
{
    height: 3em;
}

.NavigationButtons .NavTitle span {
    line-height: 1em;
    white-space: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    font-size: calc(var(--cellSize) / 6);
}

.NavigationButtons .Nav > .NavButton > .NavTitle {
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}.NavigationButtons.MenuType3 .LeafNav > .NavTitle
{
    display:flex !important;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    text-align: center;
}

.NavigationButtons .LeafNav {
position: relative;
transition: all .2s ease-in-out;
    padding: 0;
    border-radius: 0;
    border: solid 0 rgba(127, 127, 127,0.4);
}

.NavigationButtons .HideNavTitle {
    display: none !important;
}

.NavigationButtons .HideNavImage .NavImage {
    display: none !important;
}

.NavigationButtons .HideNavImage .LeafNav .NavTitle {
    background-color: var(--backColor) !important;
    border-radius: 1em;
    padding: 0.75em;
}

.NavigationButtons .LeafNav:hover {
    z-index: 1000;
    text-shadow: 0 0 1px;
}

.NavigationButtons .DisabledNav:hover {
    z-index: 1000 !important;
}

.NavigationButtons .LeafNav:hover .NavImage {
transform: scale(1.05);
}

.NavigationButtons .Nav
{
    text-align: center;
    vertical-align: top;
}

.NavigationButtons > .Nav {
    display: block;
    text-align: center;
}

    .NavigationButtons .LeafNav.NoImage,
    .Mobile .NavigationButtons .LeafNav {
    min-height: initial;
    }

.NavigationButtons > .Nav > .SubNavs {
    display: flex;
    width: auto;
    table-layout: fixed;
    border-spacing: 0.25em;
    border-collapse: separate;
    margin: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.NavigationButtons > .Nav > .SubNavs > .Nav {
    display: flex;
    white-space: nowrap;
    flex-direction: column;
    vertical-align: top;
}

.NavigationButtons .LeafNav.NoImage .NavButton > .NavTitle > span:first-Child {
    background-color: white;
    border: var(--border2) !important;
    height: var(--cellSize);
    border-radius: 25%;
}

.NavigationButtons .Nav
{
    border-radius: 10px;
    border-color: transparent;
}

input.NavSearch
{
    max-width: 10em;
    margin: auto;
    border-radius: 2em;
    display: flex;
    text-align: center;
    padding: 0.5em;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: -0.5em;
}

input.NavSearch:focus
{
    max-width: 10em;
}


/* META  : .Base.Layout.Panel.Navigation.NavigationButtons.ContentNavCreated */
.NavigationButtons .Nav.ContentNavCreated.LeafNav .NavImage
{
    border-radius: 8px;
    width: 100%;
    padding: 0;
    height: calc(var(--cellSize)* 2);
    box-shadow: var(--shadow1);
}

.NavigationButtons .Nav.ContentNavCreated.LeafNav .NavImage > div
{
    width: 100%;
    height: 100%;
overflow: hidden;
}

.NavigationButtons .Nav.ContentNavCreated.LeafNav .NavImage .PanelObject
{
    background-color: #26266f29;
    max-width: 100% !important;
    max-height: 100% !important;
    flex:1;
    width: auto;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1em !important;
    position: relative;
}

.NavigationButtons .Nav.ContentNavCreated.LeafNav .NavImage .PanelObject.AggregateView
{
    font-size: 2px;
}

.NavigationButtons .Nav.ContentNavCreated.LeafNav .NavImage .PanelHasTitle
{
    border: solid 1px #60606040;
}

.NavigationButtons .Nav.ContentNavCreated.LeafNav .NavImage .Panel:before,
.NavigationButtons .Nav.ContentNavCreated.LeafNav .NavImage .PanelObject:before
{
    content: attr(t);
    display: block;
    text-align:center;
    font-size: 6px;
    line-height: 1em;
    margin: 0 auto;
}

.NavigationButtons .Nav.ContentNavCreated.LeafNav .NavImage .PanelObject:after
{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    color: black;
    opacity: 0.25;
    font-family: "361";
    font-size: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.NavigationButtons .Nav.ContentNavCreated.LeafNav .NavImage .PanelObject.ViewType_Chart:after
{
    content : var(--icon-Pie-Chart);
}

.NavigationButtons .Nav.ContentNavCreated.LeafNav .NavImage .PanelObject.ViewType_ItemView:after
{
    content : var(--icon-Grid);
}

.NavigationButtons .Nav.ContentNavCreated.LeafNav .NavImage .PanelObject.ViewType_Chart,
.NavigationButtons .Nav.ContentNavCreated.LeafNav .NavImage .PanelObject.ViewType_ItemView
{
    min-height: 3em;
}

.NavigationButtons .Nav.ContentNavCreated.LeafNav .NavImage .Panel
{
    gap: 1px !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: initial !important;
    margin: 0 !important;
    display: flex;
    position: relative;
}


/* META  : .Base.Layout.Panel.Navigation.NavVer */
.NavVer {
    padding: 1px;
}

.NavVer .Nav
{
    display: block;
    text-align: left;
    position: relative;
    padding: 7px !important;
white-space: nowrap;
}

.NavVer .NavImage {

    left: 6px;
}

.NavVer .NavTitle {
    margin-left: 6px !important;
}

.NavVer  .Nav {
    text-align: left;
}


/* META  : .Base.Layout.Panel.Navigation.NavAccordion */
.NavAccordion .Nav {
    display: block;
    text-align: left !important;
    width: 100%;
}

.NavAccordion .SubNavs {
    padding: 0 !important;
    border: var(--border3);
    border-left: 0;
}

.NavAccordion .NavButton {
    position: relative;
}

.NavAccordion  .NavTitle > span {
    letter-spacing: 0.5px;
    padding: 0 0.5em;
    display: block;
    text-align: left;
}

.NavAccordion .SameAsParentNAV {
    display: none;
}.NavAccordion > .Nav.Selected  {
    background-color:  var(--backColor) !important;
    color: var(--textColor);
}

.NavAccordion > .Nav.Selected > .SubNavs {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    top: 2.5em;
}.NavAccordion .Nav.Selected > .NavButton
{
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background-color:  var(--backColor) !important;
    border-color: rgba(127,127,127,0.5);
}

.NavAccordion > .Nav.Selected > .NavButton
{
    background-color: rgba(127,127,127,0.2) !important;
}

.NavAccordion .Nav.Selected > .NavButton:before
{
    content: "";
    width: 2px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: var(--textColor);
}

.NavAccordion.RootNav .Nav .NavButton
{
    padding: 4px 6px;
}

.NavAccordion .Nav.LeafNav
{
    background-color: var(--backColor) !important;
    color: var(--textColor) ;
}

.NavAccordion .Nav .NavImage
{
    background-color: transparent !important;
    color: inherit !important;
}

.NavAccordion .Nav > .SubNavs {
    display: none;
}

.NavAccordion .Nav.Selected > .SubNavs {
    display: block;
    overflow: auto;
    flex: 1;
}.NavAccordion .SubNavs .Nav {
    text-transform: capitalize;
}.AutoHideOn .NavAccordion .SubNavs {
    padding-left: 1px !important;
}

.NavAccordion .NavButton {
    border: var(--border1);
    border-right: 0;
}

.NavAccordion .Nav.NavBranch > .NavButton:after {
    position: absolute;
    right: 0.4em;
    top: 50%;
    font-size: 150%;
    content: var(--icon-Chevron-Down);
    font-family: "361";
    opacity: 0.5;
    transform: translateY(-50%);
}

.NavAccordion .Nav.NavBranch.Selected > .NavButton:after {
    content: var(--icon-Chevron-Right);
}

.NavAccordion.RootNav {
    flex-direction: column;
    width: 100%;
    height: 100% !important;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: center;
}

.NavAccordion.RootNav > .Nav {
    display: flex;
    align-self: stretch;
    flex-direction: column;
    flex: 0;
    flex-basis: auto;
}

.NavAccordion.RootNav > .Nav.Selected {
    flex: 1;
}

.NavAccordion.RootNav > .Nav > .NavButton {
    flex: 0;
}

.NavAccordion.RootNav > .Nav > .Subs {
    flex: 1;
}

    .NavAccordion.SubNav .Nav > .NavButton {
    height: 100%;
    display: flex;
    align-items: center;
    padding-top: 1px;
    padding-bottom: 1px;
    }

    .NavAccordion.SubNav .Nav > .NavButton > .NavImage {
    margin: 1px !important;
    display: none;
    }

.NavigationButtons.NavAccordion .Nav > .NavBotton > .NavTitle {
    top: 0;
}

.NavAccordion.RootNav .Nav .NavButton {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}


/* META  : .Base.Layout.Panel.Navigation.Peers */
#PeerNavs {
    display: flex;
    padding: 1px 1em;
    overflow: auto;
    align-self: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    align-content: stretch;
    flex-basis: max-content;

    flex-shrink: 0;
}.PeerItem {
    padding: 4px;
}

#Peers button
{
    display: block;
}


/* META  : .Base.Layout.Panel.Navigation.SubNav */
#SubNav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: auto;
    padding: 0;
}

.RootNav .SubNavs {
    padding: 15px;
}

.SubNav .NavImage {
    display: none;
}

#SubNav img {
    height: 24px;
    display: none;
}

#SubNavs {
    display: flex;
    padding: 1px 1em;
    align-items: center;
    align-content: stretch;
    flex-direction: row;
    overflow:auto;
}

.Mobile #SubNavs {
    padding: 0;
}

.PageTop .SubNav .NavTitle > span {
    white-space: nowrap;
}

#SubNavs .Nav
{
    vertical-align: middle;
}

.SubNav .Nav {
    display: flex;
    align-items: center;
}

.SubNav .NavTitle {
    vertical-align: middle;
    line-height: 1em;
    padding-left: 5px;
    padding-right: 5px;
}.SubNav #PeerNavs .Selected .NavTitle {
    border-bottom: solid 1px silver;
}

.SubNav .Selected {
    text-shadow: 0 0 1px #656565;
}

.SubNav .Nav {
    background-color: transparent !important;
    flex: 1;
    display: flex;
}

.SubNavs {
    display: flex;
    white-space: normal;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.SubNav .Nav {
    opacity: 0.85;
}

.SubNav .Nav:hover {
    opacity: 1.0;
}

    .SubNavs {
    border-spacing: 1px !important;
    }

    .SubNav .NavImage {
    display: none;
    }

    .RootNav .NavTitle, .SubNav .NavTitle {
    margin: 0 !important;
    display: table-cell;
    vertical-align: middle !important;

    }

    .SubNav .NavTitle > span {
    white-space: nowrap;
    max-width: 100%;
    padding: 5px;
    }

    .SubNav .Nav::after {
    display: none;
    border: 0 !important;
    content: "";
    float: right;
    }

    #SubNav {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    }


/* META  : .Base.Layout.Panel.Navigation.ParentNav */
#ParentNavs
{
    display: flex;
}

#ParentNavs .Nav
{
    vertical-align: middle;
}

#ParentNavs .Nav .NavTitle::after {
    content: var(--icon-Chevron-Right);
    font-family: "361";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.ParentNavHome {
    font-size: 150%;
    padding: 0.4em 0.6em;
}


/* META  : .Base.Layout.Panel.Navigation.PanelNavigation */
.PanelNavigation {
    position: absolute;
    display: flex;
    right: 0;
    bottom: 0.5em;
    z-index: 1000;
    width: 16px;
    height: 16px;
    box-shadow: 0 0 0 !important;
    opacity: 0.25;
    text-align: center;
    background-color: transparent;
    pointer-events: none;
    align-content: center;
    flex: 1;
    top: auto;
    padding-top: 0.25em;
}

.PanelNavigation::after
{
content: var(--icon-Chevron-Right);
font-family: "361";
text-align: center;
}


/* META  : .Base.Layout.Panel.Navigation.RootNav */
.RootNav
{
    padding: 4px;
    flex-direction: row;
}

.RootNav.NavButton {
    flex-direction: row;
}

.MenuType3.RootNav {
    flex-direction: row;
}

.RootNav > .MakeRoot {
    pointer-events: none;
    background-color: rgba(127,127,127,0.25);
}

.RootNav > .MakeRoot::after {
    content: var(--icon-Chevron-Right);
    font-family: "361";
    font-size: 2em;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.RootNav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    padding: 0;
    flex-grow: 1;

}

.RootNav > .Nav {
    flex: 1;
}

.RootNav .Nav
{
    text-align: center;
    font-size: 100%;
}

.RootNav .Nav .NavButton {
    padding: 4px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.RootNav .Nav:hover {
    opacity: 1.0;
    z-index: 1000;
}

.RootNav .Nav > .NavButton > .NavImage {
    height: 20px;
    width: 20px;
    font-size: 17px;
    vertical-align: middle;
    margin: 1px auto;
    text-align: center;
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 0px;
}

.RootNav .Nav > .NavButton > .NavTitle {
    margin: 4px auto;
    vertical-align: middle;
    white-space: normal;
    display: flex;
    align-items: center;
    justify-content: center;

}

.PageLeft .RootNav .Nav > .NavButton > .NavTitle {
    margin: 4px;
    vertical-align: middle;
    white-space: normal;
    flex: 1;
    align-items: center;
    display: flex;
    justify-content: flex-start;
}

.PageLeft .RootNav .Nav > .NavButton > .NavTitle > span {
    padding: 0.5em;
    text-align: left;
}

.PageLeft .RootNav .Nav > .NavButton > .NavImage
{
    width: 20px;
    top: 0;
    background-color:  transparent !important;
    color: var(--menuIconColor) !important;
}

.RootNav .Nav > .NavButton > img.NavTitle {
    height: 24px;
}.RootNav .Nav.Selected {
    position: relative;
}

.RootNavEmpty {
    display: none;
}.RootNav .Nav.Selected {
    opacity: 1.0;

}

.PageLeft .StartLogo img {
    max-height: 48px;
}

.PageLeft .RootNav .Nav {
    border-radius: 6px;
    margin: 1px 4px;
    transition: background-color 0.15s ease;
}

.PageLeft .RootNav .Nav:hover {
    background-color: rgba(0,120,212,0.06);
}

.PageLeft .RootNav .Nav.Selected {
    background-color: rgba(0,120,212,0.1);
    font-weight: 500;
}

.PageLeft .RootNav .Nav > .NavButton > .NavTitle > span {
    font-size: 11px;
    line-height: 1.3;
}

.PageLeft .RootNav .Nav .Badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
}


/* META  : .Base.Layout.Panel.Navigation.NavPanel */
.NavPanel {
    cursor: pointer;
}

.NavPanel.EntityTypeView {
    border: 0;
}.NavPanel.EntityTypeView:hover > .EntityTypeViewBody,
.NavPanel:hover
{
    outline: solid 0 #656565 !important;
    box-shadow: 1px 1px 3px silver;
    opacity: 1.0;
    z-index: 1000;
    border-radius: var(--inputRadius);
}

.NavPanel:hover > .PanelNavigation {
    opacity: 1.0;
}


/* META  : .Base.Layout.Panel.Navigation.Nav */
.Nav:focus {
    outline: solid 0 coral;
}

.Nav
{
    display: inline-block;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.DisabledNav {
    opacity: 0.5 !important;
    box-shadow: 0 0 3px rgba(0, 0, 0,0.5) !important;
}

.LeafNav:hover {
    text-shadow: 0 0 1px;
}

.NavGroupTitle
{
    text-align: left;
    font-size: 130%;
    padding: 0.5em;
}

/* 2026-08-26 (kullanıcı bildirimi): `background-color: rgba(127,127,127,0.1)`
   KALDIRILDI — grup başlığına gri bir şerit basıyor ve görünümü bozuyordu.
   Başlığın ayırt ediciliği zemine değil TİPOGRAFİYE bırakıldı: yukarıdaki blok
   (:1049) hizalama/boyut/dolgu verir, `16-eksik-tokenlar.css:182` gruplu rayda
   büyük-harf + ince üst çizgi ile ayırır. Ön plan rengi TANIMLI DEĞİLDİ, bu yüzden
   zemini kaldırmak kontrast oranını değiştirmez (devralınan mürekkep korunur). */
.NavGroupTitle {
    font-weight: bold;
}


/* META  : .Base.Layout.Panel.Navigation.NavButton */
.NavButton {
    display: flex;
    flex-direction: column;
    align-content: stretch;
    justify-content: space-evenly;
    flex: 1;
    padding: calc(var(--cellSize) / 20);
    flex-wrap: nowrap;
    align-items: stretch;
}

.NavigationButtons .LeafNav .NavButton {
    width: calc(var(--cellSize) * 3 / 2);
}

.NavigationButtons .NavigationContents .LeafNav .NavButton {
    width: calc(var(--cellSize) * 6 / 2);
}

.NavButton:hover > .NavTitle:after {
    z-index: 999999;

}

.NavButton.SelectionsMenuOpen {
    z-index: 10001;
    position: relative;
    opacity: 1.0;
    text-shadow: 0 0 1px;
    background-image: var(--hoverImage1);
}

.Nav > .NavButton > img
{
    margin-left: auto;
    margin-right: auto;
}

.PageTop .NavButton {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    align-content: space-around;
    justify-content: center;
    text-transform: uppercase;
    padding: 0;
}


/* META  : .Base.Layout.Panel.Navigation.NavImage */
.NavImage {
    margin: 1px 5px;
}

.NavImage > svg, .ButtonImage > svg
{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

.MenuType1 .NavImage {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.RootMenu .Nav > .NavButton > .NavImage
{
    margin: 1px !important;
}

.NavBranch > .NavButton > .NavImage {
    display: none;
}


/* META  : .Base.Layout.Panel.Navigation.NavTitle */
.NavBranch.Nav > .NavButton > .NavTitle {
font-weight: 500;
text-transform: uppercase;
}

.EmptyNavTitle {
    display: none !important;
}

.NavTitle > span
{
    letter-spacing: 0;
    line-height: 1em;
    padding: 2px 2px;
    width: 100%;
}

.LeafNav > .NavButton > .NavTitle {
    border: 0 !important;
    padding: 4px;
    font-weight: 300;
}

.RootMenu .Nav > .NavButton > .NavTitle {
line-height: 1em;
}

    .PageTop .NavButton .NavTitle {
    min-height: 2em;
    font-size: 90%;
    }

.MenuType1 .NavTitle {
    display: table-cell;
    width: 100%;
    text-align: center;
}


/* META  : .Base.Layout.Panel.Navigation.NavGrid */
.NavGrid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}


/* META  : .Base.Layout.Panel.Navigation.NavAggregate */
.Nav .Aggregate.AggregateZero {
    opacity: 0.5;
}

.NavButton > .Aggregate {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    font-weight: bold;
    min-width: auto;
}

.Content .NavigationButtons .NavButton > .Aggregate {
    background-color: var(--textColor);
    color: var(--backColor);
    border-radius: 3em;

}

.RootHoverMenuBody  .NavButton > .Aggregate {
    padding: 0;
    right: 16px;
}

.NavigationButtons .NavBranch > .NavButton >  .Aggregate
{
display: none;
}


/* META  : .Base.Layout.Panel.Navigation.NavBlock */
.NavBlock.NavBranch
{
    min-width: 100%;
    border-top: var(--border3);
    border-bottom: var(--border3);
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.NavBlock > .SubNavs
{
    flex-direction: row;
}


/* META  : .Base.Layout.Panel.Navigation.NavGroup */
.NavGroup
{
    box-shadow: var(--shadow1);
}

.NavigationNavs > .NavGroup > .NavGroupTitle {
    text-align: left;
    background-color: transparent;
    text-transform: uppercase;
    opacity: 0.5;
    padding: 16px 16px 4px 16px;
}

.NavigationNavs > .NavGroup {
    border-radius: 16px;
    border: var(--border1);
    background-color: var(--white);
    min-width: 320px;
    flex: auto;
}

.NavGroupBody {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
}


/* META  : .Base.Layout.Panel.Navigation.CurrentEntityNavigation */
.CurrentEntityNavigation
{
    padding: 1.5rem 1em;
}


/* META  : .Base.Layout.Panel.Navigation.SearchNavs */
.SearchNavs
{
    padding: 8px;
    gap: 8px;
    --gap: 8px;
    display: flex;
    flex-direction: row;
    overflow: auto;
    max-width: 800px;
flex-wrap: wrap;
justify-content: center;
}

.SearchNavs  .NavImage > svg, .ButtonImage > svg
{
    max-width: 16px;
    max-height: 16px;
    min-width: 16px;
    min-height: 16px;
}

.SearchNavs  .NavImage
{
    background-color: transparent !important;
    display: none;
}

.SearchNavs  .Aggregate
{
    opacity: 0.5 !important;
}

.SearchNavs  .NavButton
{
    flex-direction: row;
    font-size: 11px;
    border-radius: 32px;
    border: var(--border1);
    background-color: var(--white);
    padding-left: 16px;
    padding-right: 16px;
}

.SearchNavs  .NavTitle > span
{
    white-space: nowrap;
    flex-wrap: nowrap;

}


/* META  : .Base.Layout.Panel.Content */
.ContentTitle {
    text-align: center;
    font-size: 18px;
    display: block;

}

.ContentTitle .ContentHeaderTitle {
    padding: 1em;
    font-size: 150%;
    font-weight: 600;
    letter-spacing: 1px;
}

.Content > .EntityTypeView > .EntityTypeViewBody > .Center > .PanelHeader {
    font-size: 1.5em;
    background-color: var(--white);
    opacity: 1.0;
    box-shadow: 0 0 5px silver;
    background: var(--contentHeaderBackground);
    /* ⭐ ON PLAN ZEMINLE BIRLIKTE GEZER: ayni kural ikisini de verir, biri
       digersiz kalamaz. Sabit beyaz ACIK modul renginde 3.40:1 olculdu. */
    color: var(--contentHeaderForeground, var(--white));
}

.Content > .EntityTypeView > .EntityTypeViewBody > .Center > .PanelHeader > .TopCenter > .EntityTypeViewTitle > .EntityTypeViewTitleBody
{
    font-size: inherit !important;
    color: var(--contentHeaderForeground, var(--white));
}

.Content > .EntityTypeView > .EntityTypeViewBody > .Center > .PanelHeader > .TopCenter >  .EntityTypeLists
{
    color: var(--contentHeaderForeground, var(--white));
}

.Content > .EntityTypeView > .EntityTypeViewBody > .Center > .PanelHeader > .TopCenter >  .ToggleMenu
{
    color: var(--contentHeaderForeground, var(--white));
}

.Content > .EntityTypeView > .EntityTypeViewBody > .Center > .PanelHeader  .TopLeft .Actions a
{
    background-color: transparent !important;
    /* ⛔ ZEMINI KALDIRAN KURAL ON PLANI DA DEVRETMELI (2026-08-20).
       Bu kural dugmeyi HAYALET yapiyor, ama `zz-from-361.css:213`'un
       `.TopLeft .Actions a { color:#ffffff !important }` bildirimi yerinde kaliyor
       => acik renkli modul basliginda beyaz metin. OLCULDU (/SurveyManagement/mSurveys,
       "Varsayilan"): #ffffff / #e2c90f = 1.67:1 (AA 4.5). Zemin artik BASLIGIN zeminidir,
       o yuzden on plan da BASLIKTAN turetilen deger olmalidir. Ozgulluk (0,6,1) —
       rakip (0,2,1) `!important` oldugu icin `!important` sart. */
    color: var(--contentHeaderForeground, var(--white)) !important;
}

.Content > .EntityTypeView > .EntityTypeViewBody > .Center > .PanelHeader > .TopLeft .Action_New{
    min-width: 52px;
    justify-content: center;
    border-radius: 0;
    color: var(--white);
}


/* META  : .Base.Layout.Panel.Content.Content360 */
.Page_Content_360Home .SelectionsMenu.RootHoverMenu {
    display: none;
}

.Page_Content_360Home .PageTop #RootNav {
    display: none;
}

.Page_Content_360Home .NavButton.SelectionsMenuOpen {
    background-color: transparent !important;
    box-shadow: 0 0 0 !important;
}


/* META  : .Base.Layout.Panel.Page.Page360 */
.Page_360 .NavigationButtons {
    width: 100%;

}

.Page_360  .Search {
    justify-content: center !important;
}

.Page_360 .NavigationButtons .Nav.NoImage.LeafNav > .NavTitle > span {
    height: 7em;
    vertical-align: middle;
    width: 100%;
    font-weight: bold;
}

.Page_360 .NavigationButtons .Nav360 .Nav {
    border-radius: 50%;
    margin: 1em;
    width: auto;
    opacity: 1.0;
}

    .Page_360 .NavigationButtons .NavTitle > span {
    padding: 0.5em;
    text-shadow: 0 0 1px black;
    }

    .Page_360 .NavigationButtons .LeafNav > .NavTitle > span {
    width: 8em;
    }

.Page_360 .NavigationButtons .LeafNav {
    z-index: 100;
}

.Page_360 .NavigationButtons .LeafNav .NavImage, .Page_360 .NavigationButtons .LeafNav.NoImage .NavTitle {
    padding: 0.5em 0.4em;
    vertical-align: middle;
    height: 96px !important;
    width: 96px !important;
    font-size: 4em !important;
}

.Page_360 .NavigationButtons .LeafNav.NoImage .NavTitle {
    font-size: inherit !important;
}

    .Page_360 .NavigationButtons .LeafNav .NavImage:after2, .Page_360 .NavigationButtons .LeafNav.NoImage .NavTitle:after2 {
    content: " ";
    transform: scale(1.1) !important;
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    }

.Page_360 .NavigationButtons .LeafNav .NavTitle > span {
    vertical-align: middle;
}.Page_360 .NavigationButtons .LeafNav {
    background-color: transparent;
    color: #222222;
    box-shadow: 0 0 0 !important;
}

.Page_360 .NavigationButtons .LeafNav .NavImage, .Page_360 .NavigationButtons .LeafNav.NoImage .NavTitle {
    background-color: white;
    color: #222222;
    border-radius: 50%;
    box-shadow: 0 0 2px #656565;
    opacity: 1.0;
    border: solid 0px rgba(255,222,0,0.5);
    color: #656565;
    box-shadow: inset -25px -25px 40px rgba(0,0,0,.15), 0px 0px 35px rgba(0,0,0,.5);
    box-shadow: 0px 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23), 3px 3px 10px 10px rgba(0,0,0,0.1) inset;
}

    .Page_360 .NavigationButtons .LeafNav .NavImage:hover, .Page_360 .NavigationButtons .LeafNav.NoImage .NavTitle:hover {
    box-shadow: 0px 20px 40px rgba(0,0,0,0.19), 0 12px 12px rgba(0,0,0,0.23);
    }

.Page_360 .NavigationButtons .LeafNav.NoImage .NavTitle {
    font-size: inherit !important;
}

    .Page_360 .NavigationButtons .LeafNav .NavImage:after2, .Page_360 .NavigationButtons .LeafNav.NoImage .NavTitle:after2 {
    opacity: 0.25;
    border-radius: 50%;
    border: solid 5px darkorange;
    }

.Page_360 .NavigationButtons .LeafNav img.NavImage {
    opacity: 0.75;
}


/* META  : .Base.Layout.Panel.Page.PageFooter */
.PageFooter {
    background-color: var(--footerBackColor);
    color: var(--footerTextColor);
}


/* META  : .Base.Layout.Panel.Page.PageHeader */
.PageHeader {
    background-color: var(--headerBackColor,--backColor);
    color: var(--headerTextColor);
}


/* META  : .Base.Layout.Panel.DirectionFlexColumn */
.DirectionFlexColumn
{
    display: flex;
    flex-direction: column;
}

.DirectionFlexColumn > div
{
    width: 100%;
}


/* META  : .Base.Layout.Panel.DirectionFlexRow */
.DirectionFlexRow
{
    display: flex;
    flex-direction: row;
}


/* META  : .Base.Layout.Panel.NetworkDiagram */
.NetworkDiagram
{
    width: 100%;
    height: 100%;
}


/* META  : .Base.Layout.Panel.ConnectionsGraph */
.ConnectionsGraph{position:relative;display:flex;flex-direction:column;flex:1;min-height:360px;width:100%;border:1px solid var(--border,rgba(0,0,0,0.08));border-radius:var(--radiusLg,12px);background:var(--surface,#fff);overflow:hidden}.ConnectionsGraph .cg-canvas{height:340px;width:100%;flex:0 0 340px}.ConnectionsGraph .cg-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 10px;border-bottom:1px solid var(--border,rgba(0,0,0,0.06));background:var(--surfaceAlt,rgba(0,0,0,0.02))}.ConnectionsGraph .cg-toolbar .cg-ctl{display:inline-flex;gap:4px;align-items:center;font-size:12px;color:var(--text,#333)}.ConnectionsGraph .cg-empty{display:flex;align-items:center;justify-content:center;flex:1;color:var(--textMuted,#888);font-size:13px;padding:24px;text-align:center}


/* META  : .Base.Layout.Panel.EntitySelector */
.EntitySelector
{
    margin: 0 auto;
    justify-content: center;
    align-items: stretch;
    display: flex;
    flex: 1;
    width: 100%;
    height: auto;
    max-width: 340px;
    min-height: 3em;
}

.EntitySelector > .Button
{
    text-align: center;
    justify-content: center;
    background-color: white;
    color: var(--textColor);
    padding: 1em 2em !important;
    align-items: center;
    display: flex;
    display: -webkit-flex;
    font-size: 1.25em;
    line-height: 1em;
    border: 0;
    text-transform: uppercase;
    position: relative;
    max-width: 100%;
    width: 100%;
    border-radius: 0 0 1em 1em;
    margin: 0;
    margin-bottom: 8px;
    box-shadow: 0 0px 3px gray !important;
    letter-spacing: 1px;
}.EntitySelector > .Button.SelectionsMenuOpen
{
    border-radius: 0;
}

.EntitySelector > .Button .ImageSpan
{
    position: absolute;
    left: 16px;
    opacity: 0.5;
    height: 2em;
    width: 1em;
}

.EntitySelector > .Button .ImageClass
{
    position: absolute;
    left: 10px;
    font-size: 2em;
    opacity: 0.5;
}

.EntitySelector > .Button:after {
    content: var(--icon-Chevron-Down);
    position: absolute;
    left: 50%;
    right: 0;
    bottom: -10px;
    z-index: -1;
    top: auto;
    opacity: 0.4;
    transform: translateX(-50%);
    font-family: "361" !important;
}

.EntitySelector:hover > .Button:after
{
    opacity: 1.0;
}

.EntitySelector > .Button  svg {
    font-size: 1.5em;
    max-height: 1.5em;
    max-width: 1.5em;
    width: auto;
    height: auto;
}

.EntitySelector > .ItemSelection.Menu_Arrow_Down::after
{
    height: auto;
    font-size: 1em;
    padding: 0;
    right: auto;
    top: auto;
    bottom: 4px;
    z-index: 99;
}

.EntitySelector > .ItemSelection > span
{
    text-align: center;
    justify-content: center;
    background-color: transparent;
    padding: 4px !important;
    letter-spacing: 1px;
    font-size: 110%;
    font-weight: 600;
    opacity: 0.75;
    color: var(--color5);
}.SelectionsMenu_EntitySelector
{
    --SolutionButtonImageSpan:#e5f5e3;
    --SolutionButtonBack:#ffffff;
    --SolutionButtonColor:#54bcbd;

    font-size: 1em;
    background-color: var(--backColor);
}

.SelectionsMenu_EntitySelector
{
    max-width: 1000px;
    min-width: 340px;
}

.SelectionsMenu_EntitySelector:after
{
    content: " ";
    position: fixed;
    background-color: rgba(127,127,127,0.75);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    top: 4em;
}

.SelectionsMenu_EntitySelector .Solutions
{
    background-color: white;
    min-width: 20em !important;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    max-height: 90vh !important;
    overflow: auto;
    z-index: 99;
}

.SelectionsMenu_EntitySelector .Solutions .Solution
{
    flex: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    border: var(--border1);
    background-color: var(--backColor);
}

.SelectionsMenu_EntitySelector .Solutions .Solution:hover .Solution_Title
{
    opacity: 1.0;
}

.SelectionsMenu_EntitySelector .Solutions .Solution_Title
{
    padding: 0.5em;
    opacity: 0.75;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    width: 12em;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.SelectionsMenu_EntitySelector .Solutions .Solution_Body
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 !important;
    flex: 1;
}

.SelectionsMenu_EntitySelector .Solutions .Button {
    background-color: var(--SolutionButtonBack, transparent);
    color: var(--SolutionButtonColor, #b5b5b5);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    padding: 6px 4px !important;
    margin: 2px !important;
    width: var(--selectorSize, 7em) !important;
    min-width: var(--selectorSize, 7em) !important;
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    box-shadow: 0 0 0;
    border: var(--border1);
    border-radius: 8px !important;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.SelectionsMenu_EntitySelector .Solutions .Button:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Standardized 40x40 Icon Box for BOTH PNG img, direct SVG, and SVG/Font ImageSpan */
.SelectionsMenu_EntitySelector .Solutions .Button > svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    padding: 9px !important;
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    fill: currentColor !important;
    border-radius: 10px !important;
    margin: 0 0 4px 0 !important;
    box-sizing: content-box !important;
    display: block !important;
}

.SelectionsMenu_EntitySelector .Solutions .Button img {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    padding: 7px !important;
    background-color: #f1f5f9 !important;
    border-radius: 10px !important;
    object-fit: contain !important;
    margin: 0 0 4px 0 !important;
    box-sizing: border-box !important;
}

.SelectionsMenu_EntitySelector .Solutions .Button .ImageSpan,
.SelectionsMenu_EntitySelector .Solutions .Button .ImageClass {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.SelectionsMenu_EntitySelector .Solutions .Button .ImageSpan svg,
.SelectionsMenu_EntitySelector .Solutions .Button .ImageClass svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.SelectionsMenu_EntitySelector .Solutions .Button .ImageSpan > *,
.SelectionsMenu_EntitySelector .Solutions .Button .ImageClass > * {
    font-size: 20px !important;
    line-height: 1 !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

.SelectionsMenu_EntitySelector .Solutions .Button .ButtonText {
    font-size: 11px !important;
    line-height: 1.2 !important;
    height: 2.25em !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    opacity: 0.85 !important;
    padding: 2px !important;
    color: var(--textColor) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.SelectionsMenu_EntitySelector .Solutions .Button:hover .ButtonText {
    opacity: 1 !important;
}

.SelectionsMenu_EntitySelector .SolutionGroup
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* SolutionGroup_g1 text-only horizontal layout rules */
.SelectionsMenu_EntitySelector .SolutionGroup_g1 .Solution_Body,
.SolutionGroup_g1 .Solution_Body {
    gap: 0 !important;
}

.SelectionsMenu_EntitySelector .SolutionGroup_g1 .Button img,
.SelectionsMenu_EntitySelector .SolutionGroup_g1 .Button .ImageSpan,
.SelectionsMenu_EntitySelector .SolutionGroup_g1 .Button .ImageClass,
.SolutionGroup_g1 .Button img,
.SolutionGroup_g1 .Button .ImageSpan,
.SolutionGroup_g1 .Button .ImageClass {
    display: none !important;
}

.SelectionsMenu_EntitySelector .SolutionGroup_g1 .Button,
.SolutionGroup_g1 .Button {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    height: auto !important;
    min-height: 40px !important;
    max-height: none !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 4px !important;
    margin: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.SelectionsMenu_EntitySelector .SolutionGroup_g1 .Button .ButtonText,
.SolutionGroup_g1 .Button .ButtonText {
    height: auto !important;
    max-height: none !important;
    line-height: 1em !important;
    font-size: 11px !important;
    text-align: center !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Solution_Cards & SolutionGroup_Cards horizontal layout rules */
.SelectionsMenu_EntitySelector .Solution_Cards .Button,
.SelectionsMenu_EntitySelector .SolutionGroup_Cards .Button,
.SelectionsMenu_EntitySelector [class*="Solution_Cards"] .Button,
.SelectionsMenu_EntitySelector [class*="SolutionGroup_Cards"] .Button,
.Solution_Cards .Button,
.SolutionGroup_Cards .Button,
[class*="Solution_Cards"] .Button,
[class*="SolutionGroup_Cards"] .Button {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 6px 12px !important;
    margin: 3px 4px !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
}

.SelectionsMenu_EntitySelector .Solution_Cards .Button img,
.SelectionsMenu_EntitySelector .Solution_Cards .Button .ImageSpan,
.SelectionsMenu_EntitySelector .Solution_Cards .Button .ImageClass,
.SelectionsMenu_EntitySelector [class*="Solution_Cards"] .Button img,
.SelectionsMenu_EntitySelector [class*="Solution_Cards"] .Button .ImageSpan,
.SelectionsMenu_EntitySelector [class*="Solution_Cards"] .Button .ImageClass,
.Solution_Cards .Button img,
.Solution_Cards .Button .ImageSpan,
.Solution_Cards .Button .ImageClass,
[class*="Solution_Cards"] .Button img,
[class*="Solution_Cards"] .Button .ImageSpan,
[class*="Solution_Cards"] .Button .ImageClass {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    margin: 0 8px 0 0 !important;
    border-radius: 6px !important;
}

.SelectionsMenu_EntitySelector .Solution_Cards .Button .ButtonText,
.SelectionsMenu_EntitySelector [class*="Solution_Cards"] .Button .ButtonText,
.Solution_Cards .Button .ButtonText,
[class*="Solution_Cards"] .Button .ButtonText {
    height: auto !important;
    max-height: none !important;
    line-height: 1.3 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-align: left !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

.SelectionsMenu_EntitySelector .Solutions .SolutionGroupMain
{
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
}


/* META  : .Base.Layout.Panel.DomainVersion */
#DomainVersion {
position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.5;
    bottom: 4px;
    right: 4px;
    width: auto;
    padding: 1px;
    top: auto;
    width: 5em;
    font-size: 90%;
    color: black;
    line-height: 1em;
    letter-spacing: 0.5px;
}


/* META  : .Base.Layout.Panel.DirectionHor */
.DirectionHor, .DirectionHorizontal {
    display: flex;
    flex-direction: column;
}

.DirectionHor > *,
.DirectionHorizontal > * {
    display: flex !important;
}
.DirectionHor > .Hidden,
.DirectionHorizontal > .Hidden {
    display: none !important;
}

.DirectionHor > .Parameter > .ParamLabel,
.DirectionHorizontal > .Parameter > .ParamLabel {
    flex: 1;
    display: flex !important;
    align-items: center;
}

.DirectionHor > .Parameter > .ParamValue,
.DirectionHorizontal > .Parameter > .ParamValue
{
    flex: 3;
}


/* META  : .Base.Layout.Panel.Hide */
.HideTitle .ButtonTitle {
    display: none !important;
}

.HideImage .ImageClass {
    display: none !important;
}


/* META  : .Base.Layout.Panel.AutoLayout */
.Tablet .Center2BottomT > .DirectionVer {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
}

.Tablet .Center2BottomT > .DirectionVer >  div:first-Child {
    grid-column: 1;
    grid-row: 1;
}

.Tablet .Center2BottomT > .DirectionVer > div:nth-child(2)  {
    grid-column: 1 / 3;
    grid-row: 2;
}

.Tablet .Center2BottomT > .DirectionVer > div:last-Child  {
    grid-column: 2;
    grid-row: 1;
}


/* META  : .Base.Layout.Foldable */
@media screen and (min-width: 400px) and (max-width: 1000px) {

    .ItemFooter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;

    --gap: 0;
    top: 0;

    }

    .ItemFooter > .Left {
    grid-column: 1;
    grid-row: 2;
    padding: 0 !important;
    }

    .ItemFooter > .Center {
    grid-column: 1 / 3;
    grid-row: 1;
    padding: 0 !important;
    }
    .ItemFooter > .Right {
    grid-column: 2;
    grid-row: 2;
    padding: 0 !important;
    }
    .ItemFooter .ItemActions
    {
    padding: 0 !important;
    }
}

/* Akilli Header Action Mimarisi (Left - Center - Right & Cok Satirli Zengin Standart) */
.SingleItemHeader,
.ItemHeader.SingleItemHeader,
.ItemHeader[class*="SingleItemHeader"] {
    --gap: 8px;
    background: var(--Card-Background, #ffffff) !important;
    border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-height: 140px !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
}
.SingleItemHeader,
.SingleItemHeader * {
    box-sizing: border-box !important;
}
/* 2026-09-15 — YENI KAYITTA bos baslik alanlari cizilmez (kullanici karari "Bos degerli baslik alanlarini gizle").
   Kusur (TG makina PLMComponent Yeni formu): kaydedilmemis kayitta 7 baslik alaninin 6'si bos (kod/ad/tip/tarih/maliyet),
   yuzen etiketler + bos cizgiler; iPhone 13 bant 164px, 1600x950 102px. Platform isaretleri: SingleItem.SingleItemNew +
   Field.FieldIsEmpty. A/B (.claude/scripts/baslik-bandi-yeni-kayit-sonda.cjs ENJEKTE_CSS): iPhone 13 164 -> 78px, gorunur
   7 -> 1 (durum rozeti), bos 0; MEVCUT kayit (CMPG067) 218px / 7 alan DEGISMEDI. */
.SingleItem.SingleItemNew .SingleItemHeader .Field.FieldIsEmpty {
    display: none !important;
}
.SingleItemHeader .FieldSet_m {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 20px !important;
    gap: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 60px !important;
    max-height: 140px !important;
    overflow: hidden !important;
    background: var(--Card-Background, #ffffff) !important;
}
/* ⛔ MOBIL TAVAN KIRPIYORDU (TG olcumu 2026-09-15, satis SalesTargetMonthly/SalesTargetCascade, iPhone 13):
   390px'te L-C-R uc kolon yan yana kalir, orta kolonda etiket DEGERIN USTUNE sarar -> kolon 155px;
   FieldSet_m icerigi 150px, tavan 140px (icerik kutusu 120px) + overflow:hidden + align-items:center
   => "AYLIK HEDEF" etiketi ustten 10px, "BASARI ORANI %" degeri alttan 10px KESILIYORDU.
   Masaustu kompakt bant (140px) AYNEN kalir; <=767px'te bant icerige uyar. Viewer yasagi (canvas/iframe
   display:none) tavandan bagimsizdir, korunur. Ozgulluk ust kuralla ayni, sira sonra -> !important o yuzden. */
@media (max-width: 767px) {
    .SingleItemHeader,
    .ItemHeader.SingleItemHeader,
    .ItemHeader[class*="SingleItemHeader"],
    .SingleItemHeader .FieldSet_m {
        max-height: none !important;
        overflow: visible !important;
    }
}
/* Guvenlik: Header icinde 3D canvas, iframe veya dev widget render edilmesi KESINLIKLE YASAKTIR */
.SingleItemHeader canvas,
.SingleItemHeader iframe,
.SingleItemHeader embed,
.SingleItemHeader object,
.SingleItemHeader .FieldView_File canvas {
    display: none !important;
}
.SingleItemHeader .FieldSet_m > .DirectionVer {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 20px !important;
}
.SingleItemHeader .FieldSet_l {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 4px !important;
    flex: 1.8 1 0% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
}
.SingleItemHeader .FieldSet_c {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 5px !important;
    flex: 1.2 1 0% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
}
.SingleItemHeader .FieldSet_r {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-end !important;
    text-align: right !important;
    gap: 4px !important;
    flex: 1.1 0 0% !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
}
.SingleItemHeader .Field {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}
.SingleItemHeader .Field .FieldLabel {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin-right: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}
.SingleItemHeader .FieldValue,
.SingleItemHeader .InputSpan,
.SingleItemHeader a,
.SingleItemHeader span {
    white-space: normal !important;
}
.SingleItemHeader .SingleItemHeaderName {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.SingleItemHeader .SingleItemHeaderName a,
.SingleItemHeader .SingleItemHeaderName .InputSpan {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    display: inline-block !important;
}
.SingleItemHeader .FieldValue {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* META  : .Base.Components.Form */
button, input, textarea, select, .ItemSelection > span, .Choice, .Choices > a {
    font-size: inherit;
    display: inline-block;
    line-height: var(--lineHeight);
    vertical-align: middle;
    margin: 0;
    background-origin: content-box;
    box-sizing: border-box;
    font-weight: inherit;
    max-width: 100%;
    min-height: 1em;
    letter-spacing: 0.5px;
    border-radius: 3px;
    border: var(--inputBorder);
    padding: var(--inputPadding);
    border-radius: var(--inputRadius);
    flex: 1;
}input, textarea, select, .ItemSelection {
    width: 100%;
}

button, input, textarea, select, .ItemSelection, .Choice, .FileDisplay, .Choices > a, .Menu_Arrow_Down {
    background-color: var(--inputBackColor);
    line-height: var(--lineHeight);
    border-radius: var(--inputRadius);
    border: var(--inputBorder);
}

button:active, input:active, textarea:active, select:active, .ItemSelection:active, .Choice:active, .Menu_Arrow_Down:active {
    border-color: orangered;
}


/* META  : .Base.Components.Form.input */
input[type=checkbox] {
    display: inline-block;
    width: auto;
}

input[type="file"] {
    all: unset;
}


/* META  : .Base.Components.Form.select */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    padding-right: 1.5em;
    padding-left: 0.75em;
}

select:empty {
    opacity: 0.5;
}


/* META  : .Base.Components.Form.PlaceHolder */
input::placeholder, span.PlaceHolder, option.PlaceHolder {
    opacity: 0.75;
    font-weight: 200;
}

select.PlaceHolder {
    opacity: 0.7;
}


/* META  : .Base.Components.Form.MultipleSelect */
.multi-select-dropdown {
position: relative;
width: 100%;
max-width: 300px;
}

.multi-select-toggle {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}

.multi-select-dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-height: 200px;
overflow-y: auto;
background: white;
border: 1px solid #ccc;
border-radius: 4px;
margin-top: 5px;
z-index: 100;
}

.multi-select-dropdown.open .multi-select-dropdown-menu {
display: block;
}

.multi-select-item {
padding: 8px 12px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}

.multi-select-item:hover {
background-color: #f5f5f5;
}

.search-container {
padding: 8px;
border-bottom: 1px solid #eee;
}

.search-input {
width: 100%;
padding: 6px;
border: 1px solid #ddd;
border-radius: 4px;
}


/* META  : .Base.Components.Form.OnClickMenuForm */
.OnClickMenuForm {
    position: relative;
}

.OnClickMenuForm::after {
    content: var(--icon-Chevron-Down);
    position: absolute;
    font-family: "361";
    right: 1px;
    bottom: 1px;
    opacity: 0.1;
}

.OnClickMenuForm:hover:after {
    opacity: 1.0;
}


/* META  : .Base.Components.Form.OnHoverMenuForm */
.OnHoverMenuForm * {
    pointer-events: none !important;
}


/* META  : .Base.Components.Form.MultipleSelect */
.MultipleSelect {
    min-height: 32px;
    padding: 4px 8px;
    cursor: pointer;
}

.MultipleSelectPlaceholder {
    color: #999;
    font-style: italic;
}

.MultipleSelectChips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.MultipleSelectChip {
    display: inline-flex;
    align-items: center;
    background: #f8f8f8;
    border-radius: 16px;
    padding: 2px 8px;
    font-size: 12px;
    border: var(--border2);
}

.MultipleSelectChip .ChipText {
    margin-right: 4px;
}

.MultipleSelectChip .ChipRemove {
    cursor: pointer;
    font-weight: bold;
    color: #666;
    margin-left: 4px;
}

.MultipleSelectChip .ChipRemove:hover {
    color: #c00;
}

.SelectionCheckbox {
    margin-right: 8px;
    font-size: 14px;
}

.SelectionItemSelected {
    background: #e3f2fd;
}

.SelectionItemSelected .SelectionCheckbox {
    color: #1976d2;
}

.ClearAllButton {
    padding: 8px;
    text-align: center;
    color: #c00;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.ClearAllButton:hover {
    background: #fff0f0;
}


/* META  : .Base.ItemStyles.SingleItem */
.SingleItem  {
    --singleItem-opacity:1;
    background-color: color-mix(in srgb, var(--singleItemBackColor, #f0f1f6) calc(var(--singleItem-opacity, 1) * 100%), transparent);
    gap: 0;
}

.SingleItem .Content {
    position: relative;
}

.NoSingleItemTitle .SingleItemTitle {
    display: none;
}

.SingleItemTitle
{
    line-height: 1.2em;
    font-weight: 600;
    font-size: 115%;
    min-height: 3em;
    white-space: pre-wrap;
    text-transform: uppercase;
    padding: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
    color: var(--labelColor, #3d5986);
}

.SingleItem.NewForm {
    min-height: inherit;
}

.SingleItem {
    display: flex;
    flex-direction: column;
    z-index: 100;
    width: 100%;

    box-sizing: border-box;
    padding: 1px;
    overflow: inherit;
}

.SingleItem > .ItemBody {
    height: auto;
    display: flex;
    flex-direction: row;
    max-width: 100%;
    flex: 1;
    border: var(--border1);
    border-radius: var(--gap)
}.Right > .SingleItem, .Left > .SingleItem, .CenterBottom > .SingleItem , .CenterTop > .SingleItem
{
    height: 100%;
}.SingleItem .Field.LabelPositionTop {
    border-top: 0;
    border-bottom: 0;
    vertical-align: top;
    flex-direction: column;
}

.NewWindow_PrintPreview .SingleItem .Field.LabelPositionTop {
    border: solid 0 transparent;
    padding: 1px;
}

.ETWRight > .SingleItem, .ETWLeft > .SingleItem {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.SingleItem > .CloseButton {
    display: none;
}

.SingleItem > .CloseButton {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 999999999;
    bottom: auto !important;
    left: auto !important;
}

    .SingleItem > .CloseButton:before {
    content: "x";
    font-weight: bold;
    display: inline-block;
    font-size: 125%;
    padding: 0.25em 0.5em;
    }

.SameItem {
    outline: solid 1px;
}

.SingleItem .Field.Mode_Edit:focus-within {
    background-color: rgba(0, 120, 212, 0.04);
    transition: background-color 0.2s ease;
}

.SingleItem .Field.Mode_Edit:focus-within > .FieldLabel {
    color: var(--activeBorderColor, rgb(10, 110, 185));
    font-weight: 600;
}

/* A field flagged with a save error keeps its RED identity even while focused —
   the generic blue focus tint + blue label fought the red error state (B11). */
.SingleItem .Field.Mode_Edit.FieldError:focus-within {
    background-color: rgba(220, 38, 38, 0.05);
}
.SingleItem .Field.Mode_Edit.FieldError:focus-within > .FieldLabel {
    color: var(--errorColor, #dc2626);
}

.SingleItem .Field.Mode_Display {
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.SingleItem > .ItemBottom {
    border-top: 1px solid rgba(127,127,127,0.12);
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.SingleItem > .ItemBottom .ItemAction {
    border-radius: var(--gap, 4px);
    transition: background-color 0.15s ease;
}

.SingleItem > .ItemBottom .ItemAction:hover {
    background-color: rgba(0,0,0,0.04);
}


/* META  : .Base.ItemStyles.SingleItem.ItemView */
.ItemView .DirectionVertical > *,
.ItemView .DirectionVer > * {
    align-self: stretch;

    align-items: stretch;
}

.ItemView .Button {
    margin: 0;
}

.ItemView {
    contain: content;

    display: flex;
    min-width: 64px;
    width: 100%;
    margin: var(--itemMargin);
    vertical-align: top;
    max-width: 100%;
    position: relative;
    border-radius: 0;
    border: var(--border1);

    background-color: #ffffff00;
    margin: 0;
}

.ItemView .ItemView
{
    border: 0;
}

.ItemView:hover, .FolderItem:hover
{
    z-index: 100;
    opacity: 1.0;
}

    .ItemView .ItemView:hover {
    box-shadow: inherit;
    }

.ItemView .Field {
    vertical-align: middle;
    padding: 0px;
    display: flex;
}

.ItemView .Field.Mode_Edit
{
    --inputBackColor: transparent;
    --inputRadius: 0;
    --inputBorder: solid 1px transparent;
    padding: 0;
}

.ItemView .Field.Mode_Edit .ItemSelection:after,
.ItemView .Field.Mode_Edit:after
{
    opacity: 0;
}

.ItemView:hover .Field.Mode_Edit:after,
.ItemView:hover .Field.Mode_Edit .ItemSelection:after
{
    opacity: 1;
}

.ItemView:hover .Field.Mode_Edit
{
    --inputBackColor: white;
    --inputBorder: solid 1px #80808020;
}

.ItemView .Field.FieldValue {
    flex-wrap: wrap;
}

.ItemView .FieldValue {
    padding: 1px;
}.SameItem {
    z-index: 1000;
}

.ItemView .CenterBody .Middle
{
    position: relative;
}

.ItemView .EntityTypeView {
    height: auto;
    border: 0 !important;
}

.ItemView .EntityTypeView.MicroView {
    height: auto;
}

.ETWBody.MinimizeTop > .ItemView {
    max-height: 50px;
    padding: 1px;
    margin: 0;
}

.ItemView .Field_EntityType .FieldMultiAction {
    display: none;
}

.ItemView .Field_EntityType .FieldMultiState {
    display: none;
}

    .ItemView .Choices.ItemSelection {
    text-align: center;
    vertical-align: middle;
    }

.ItemView .Mode_Display > .FieldValue {
    background-color: transparent;
    box-shadow: 0 0 0;
    border: 0;
}


/* META  : .Base.ItemStyles.SingleItem.ItemLeftRight */
.ItemRight {
    position: relative;
    right: 0;
    top: 0;
    bottom: 0;
    width: 0;
    display: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;

}

.ItemLeft {
    position: relative;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    display: none;
}

.ItemCenter
{
    margin: 1px auto;
    width: 100%;
}

.ItemCenter_Delete,
.ItemCenter_Copy
{
    padding: 5%;
}


/* META  : .Base.ItemStyles.SingleItem.ProgressBar */
.ProgressBar {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 50%;
    margin-top: -12px;
    bottom: auto;
    height: 24px;
    z-index: 100;
    font-size: 16px;
    padding: 0;
    display: inline-block;
    box-sizing: border-box;
}

.ProgressBarBar {
    display: inline-block;
    height: 24px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 0;
}

.ProgressBarText {
    top: 0;
    z-index: 10000;
    display: inline-block;
    position: absolute;
    font-size: 16px;
    margin: 3px;
    width: 6em;
    left: 50%;
    margin-left: -3em;
}

.ProgressBar {
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    background-color: rgba(255,255,255,0.95);
    border-radius: 4px;
    overflow: hidden;
}

.ProgressBarBar {
    background: linear-gradient(90deg, var(--backColor), rgba(0,120,212,0.7));
    border-radius: 4px;
    transition: width 0.3s ease;
}


/* META  : .Base.ItemStyles.SingleItem.ActivateItem */
.ActivateItem > .EntityTypeViewBody > .Center > .Middle {
    display: none !important;
}

.ActivateItem > .EntityTypeViewBody > .Center > .ActionPanel {
    display: none !important;
}

.ActivateItem.DisableOverflow > .EntityTypeViewBody > .Center > .ActionPanel {
    display: block !important;
}

.ActivateItem.DisableOverflow > .EntityTypeViewBody > .Center > .ActionPanel.Hidden {
    display: none !important;
}

.ActivateItem > .EntityTypeViewBody > .Left {
    left: 0 !important;
    right: 100% !important;
    width: 0 !important;
}

.ActivateItem > .EntityTypeViewBody > .Right {
    right: 0 !important;
    left: 100% !important;
    width: 0 !important;
}

.ActivateItem > .EntityTypeViewBody > .Right > * {
    display: none;
}

.ActivateItem > .EntityTypeViewBody > .Left > * {
    display: none;
}

.ActivateItem > .EntityTypeViewBody > .Center {
    left: 0 !important;
    right: 0 !important;
}

.EntityTypeView.ActivateItem > .ETWMenu {
    display: none !important;
}

.EntityTypeView.ActivateItem > .EntityTypeViewBody > .Center > .PanelHeader .Actions {
    display: none !important;
}

.EntityTypeView.ActivateItem > .EntityTypeViewBody > .Center > .PanelHeader > .TopRight > * {
    display: none !important;
}

.EntityTypeView.ActivateItem > .EntityTypeViewBody > .Center > .PanelHeader .EntityTypeLists {
    display: none !important;
}

.ActivateItem.ActivateItem_Over > .EntityTypeViewBody > .Center > .PanelHeader {
    display: none;
}


/* META  : .Base.ItemStyles.SingleItem.CopyItem */
.CopyItemBody
{
    max-width: 480px;
    margin: 0 auto;
    padding: 1em;
    font-weight: bold;
}

.CopyItemBody .Message
{
    font-size: 170%;
    padding: 1em;
}

.CopyItemBody .CopyButton {
    font-size: 150%;
    padding: 0.5em;
    margin: 1em;
    opacity: 0.75;
}

    .CopyItemBody .CopyButton:hover {
    opacity: 0.85;
    }

    .CopyItemBody .CopyButton:active {
    opacity: 1;
    }

.CopyItemBody .Message {
    color: #085cb2;
}

.CopyItemBody .CopyButton {
    background-color: rgba(255,0,0,0.75);
    color: white;
}


/* META  : .Base.ItemStyles.SingleItem.ItemSelection */
.ItemSelection
{
    text-align: left;
    white-space: normal;
    display: block;
cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex
;
}

.ViewBody > .ItemSelection
{
    z-index: 9;
}

.LookupField .ItemSelection
{
    min-width: 3em;
}

.ItemSearcher
{
    text-align: center;
    display: block;
    min-width: 18em;
}

    .ItemSearcher::before {
    content: var(--icon-Search);
    font-family: "361";
    display: inline-block;
    float: left;
    margin: 5px 2px;
    position: absolute;
    right: 0;
    font-size: 150%;
    padding: 1px;
    }

.ItemSelectionSearch
{
    text-align: center;
    display: block;
}

.ItemSelection > span {
    display: flex;
    align-items: center;
    flex-direction: row;
    border: 0;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 2em;
}

.ItemSelection > span:empty::after {
    content: ".";
    color: transparent;
    opacity: 0;
    line-height: 1em;
}

.ItemSelection:empty::before {
    content: ".";
    color: transparent;
}

.MicroView .ItemSelection {
    background-image: none;
    background-color: transparent !important;
}

.ViewType.ItemSelection {
    background-color: transparent !important;
}

.ViewType.ItemSelection {
    background-color: transparent !important;
}

.ViewBody .Field.Mode_Edit > .ItemSelection {
    background-color: rgba(255,255,255,0.9) !important;
}

.ItemSelection > span:hover:after {
    visibility: visible;
}

.ItemSelection:hover
{
    opacity: 1.0;
}.MicroView .ByFieldsRight {
    padding: 0;
    margin: 1px;
}

.MicroView:hover .ItemSelection {
    display: inherit;
}.MicroView .ItemSelection:hover
{
    background-image: unset;
}

.MicroView .ViewType.ItemSelection {
    display: none;
}

.MicroView:hover .ViewType.ItemSelection {
    display: inline-block;
    width: auto;
}

.ViewType.ItemSelection {
    bottom: 5px;
    left: 5px;
    position: absolute;
    min-height: 1em;
    cursor: pointer;
    box-shadow: 0 0 0;
    font-size: 1em;
    border: 0;
    width: auto;
    padding: 4px;
}

.ViewType.ItemSelection > span {
    padding: 1px;
}

.ByFieldsRight .ItemSelection
{
    cursor: pointer;
    min-height: 1em;
    display: flex;
    width: auto;
    flex: 1;
    align-items: center;
}.PivotTable .ItemSelection {
    border: 1px solid #ccc !important;
    box-shadow: 0 0 0;
    margin-bottom: 1px;
}

    .ValueField .ItemSelection {
    text-align: right;
}

.ValueField .ItemSelection.Menu_Arrow_Down::after {
    right: 0 ;
    left: auto;
}

.GroupField .ItemSelection.Menu_Arrow_Down::after {
    visibility: visible;
}

.GroupField:hover .ItemSelection.Menu_Arrow_Down::after {
    visibility: visible;
}.EntityTypeView .ByFieldsRight .ItemSelection > span {
    padding: 0.5em;
}

.EntityTypeView .ViewBody_Chart .ByFieldsRight .ItemSelection > span
{
    padding: 2px 2px;
}

.ItemSelection.Menu_Arrow_Down:hover::after {
    opacity: 1.0;
}

.ItemView .Choices.ItemSelection {
    background-color: transparent;
    box-shadow: 0 0 0;
    border: 0;
}

.ItemView .Choices.ItemSelection .ToggleButton .fa-check-square {
    color: green;
    font-weight: bold;
}

.ETWMenu .ByFieldsRight .GroupFieldFunction > .ItemSelection {
    background-color: transparent;
    box-shadow: 0 0 0;
    width: 77% !important;
}

.ActionPanel_FilterBy  .ByFieldsRight .ByFieldsRightItem > .ItemSelection {
    background-color: transparent;
    box-shadow: 0 0 0;
}

.ActionPanel_Files .ItemSelection {
    width: 80%;
    margin-left: 1.5em;
}

.ItemSelectionSearch
{
    box-shadow: 0 0 0 !important;
    border: 0 !important;
    background-color: transparent !important;
    text-align: left;
    width: 100%;
}

    .ItemSelectionSearch:active,
    .ItemSelectionSearch:focus {
    background-color: transparent !important;
    }

.ItemSearcher {
    box-shadow: 0 0 3px #222222 inset;
}



/* META  : .Base.ItemStyles.SingleItem.ActionOnClick */
.ActionOnClick.Field .FieldValue:after,
.ActionOnClick.Field.FieldValue:after,
.ActionOnClick.FieldSet:after
{
    display: inline-block;
    top: 1px;
    right: 1px;
    content: var(--icon-Chevron-Right);
    font-family: "361";
    opacity: 0.5;
    font-size: 1rem;
    padding: 0.3em 0;
    position: absolute;
}

.ActionOnClick:hover .FieldValue  {
    box-shadow: 0 0 0 #656565 inset !important;
}


/* META  : .Base.ItemStyles.SingleItem.ItemMetric */
.ItemMetric {
    display: inline-block;
    width: auto;
    cursor: pointer;
    position: relative;
    height: auto;
    vertical-align: top;
    min-width: 80px;
}

.ItemMetricAll {
    height: auto;

}

.ItemMetricAll > .MetricText {
    display: none;
}

.ValueMetric {
    margin: 3px;
}

.ValueMetric .MetricNumber {
    font-size: 110% !important;
    padding: 10px 2px;
}

.ValueMetric .MetricText {
    padding: 3px;
}

.ItemMetric > .MetricText {
    padding: 3px;
    height: 2em;
}

.ItemMetric .MetricNumber {
    font-size: 130%;
    padding: 1px 1px;
}

.MetricNumber2 {
    white-space: nowrap;
    text-align: center;
}

.MetricNumber2 > div {
    display: inline-block;
}.MetricImage {
    text-align: center;
}

.MetricImage img, .MetricImage span, .MetricImage div {

    height: 40px;
    line-height: 40px;
    font-size: 40px;
}

.ItemMetric {
    background-color: #60ce6080;
    color: #303030;
    border: solid 1px rgba(127,127,127,0.2);
}

.ItemMetricAll {
    background-color: transparent !important;
    box-shadow: 0 0 0 !important;
}

.ItemMetricAll > .MetricText {
    color: transparent;
}

.ItemMetricAll > .ValueMetric {
    background-color: transparent;
    color: #222222;
}

.ValueMetric {
    box-shadow: 0 0 0;
}

.ValueMetric .MetricText {
    color: silver;
}

.MetricNumber2 > .MetricSuffix:first-child {
    color: transparent;
    background-color: transparent;
}

.MetricImage img, .MetricImage span, .MetricImage div {
    color: #222222;
}


/* META  : .Base.ItemStyles.SingleItem.ItemHeader */
.ItemActions > select {
    padding: 0 1em;
}

.ItemHeader > .Right
{
min-width: 20%;
    text-align: right;
    width: auto;
    display: flex;
    flex-direction: column;
    vertical-align: middle;
    position: relative;
}

.ItemHeader > .Right .ItemPreviewButton
{
    position: absolute;
    left: -32px;
    top: 0;
    height: 100%;
    display: flex;
    opacity: 0;
}

.ItemHeader:hover > .Right .ItemPreviewButton
{
    opacity: 1;
}

.ItemHeader > .Center {
    text-align: center;
    vertical-align: middle;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
    position: relative;
}

.ItemHeader > .Center > img {
    height: 36px;
    margin: 2px 5px 2px 1px;
    float: left;
    position: absolute;
}

.ItemHeader:hover .ItemPreviewButton {
    visibility: visible;
}

.ItemHeader {
    min-height: 48px;
    display: flex;
    flex-direction: row;
    white-space: nowrap;

    font-size: 1.25em;

    right: 0;
    left: 0;
    position: relative;
}

.ItemHeader > .Left
{
min-width: 20%;
    text-align: left;
    width: auto;
    vertical-align: middle;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
}

    .ItemHeader > .Left > a {
    display: flex;
    align-content: center;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    min-width: 5rem;
    max-width: 5rem;
    }

    .ItemHeader .ImageClass {
    font-size: 20px;
    text-align: center;
    }

    .ItemHeader .ImageClass:before {
    text-align: center;
    }

    .ItemHeader > .Left > a:hover {
    opacity: 1.0;
    }
    .ItemHeader > .Left > a > img {
    height: 100%;
    width: 100%;
    max-height: 48px;
    }

.ItemHeader .Field .FieldValue {
    font-size: 1.05em;
    letter-spacing: 0.01em;
}

.ItemHeader .Field .FieldLabel {
    opacity: 0.6;
    font-size: 0.85em;
    text-transform: none;
}


/* META  : .Base.ItemStyles.SingleItem.ItemFooter */
.ItemFooter
{
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    font-size: 90%;
    min-height: 48px;
    position: relative;
    top: -8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    background-color: rgba(248,249,250,0.98);
    -webkit-backdrop-filter: blur(4px);backdrop-filter: blur(4px);
    padding: 4px 0;
}

.ItemFooter > .Center > .ParentTitle {
    border-bottom: dotted 1px gray;
}

.ItemFooter > .Center > .ParentTitle:hover {
    text-shadow: 0 0 1px;
}

.ItemFooter > .Center .ItemPreviewButton
{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
}

.ItemFooter > .Left
{
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: center;
    opacity:1;
    flex-grow: 0;
    flex-direction: row;
}

.ItemFooter > .Center {
    flex: 1;
    padding: 0;
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    padding-left: 1rem;
    padding-right: 1rem;
    justify-content: center;
    display: flex;
}

.ItemFooter > .Right {
    padding-top: 8px !important;
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    opacity: 1;
    flex-grow: 0;
    flex-direction: row;
}
.ItemFooter > .Center .ImageSpan{
    max-height: 30px;
    min-height: 30px;
    max-width: 30px;
    position: absolute;
    left: -4px;
    padding: 4px;
    opacity: 0.5;
}

.ItemFooter .Button {
    min-height: 36px;
    min-width: 44px;
    border-radius: 6px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.ItemFooter .Button:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.ItemFooter > .Left .Button {
    margin-right: 4px;
}


/* META  : .Base.ItemStyles.SingleItem.ItemSubmit */
.ItemSubmit {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    height: 100%;
    opacity: 0.5;
}

.Mobile .ItemSubmit {
    font-size: 100%;
}

.ItemSubmit a {
    padding: 0;
    border-radius: 0;
    opacity: 0.75;
    font-size: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 5em;
    max-width: 5em;
}

.ItemSubmit img {
    height: 20px;
    display: inline-block;
    margin: 4px;
}

.ItemSubmit span {
    white-space: normal;
    line-height: 1em;
    vertical-align: middle;
    text-align: center;
    padding-left: 3px;
    padding-right: 3px;

}

.ItemSubmit .OkButton {
    background-color: #00a74e;
    color: white;
}

.ItemSubmit .OkButton .fas,
.ItemSubmit .CancelButton .fas
{
    display: none;
}

.ItemSubmit > a > span:first-child
{
    font-size: 1.5em;
}

.ItemSubmit > a.SaveButton > span:first-child
{
    color: #00a74e;
}

.ItemSubmit > a.CancelButton > span:first-child
{
    color: #a7004e;
}

.ItemSubmit .OkButton > span:first-child
{
    display: none;
}

.ItemSubmit .SaveButton > .ButtonText
{
    display: none;
}

.ItemSubmit .CancelButton > .ButtonText
{
    display: none;
}

.ItemSubmit .SaveButton
{
    visibility: hidden;
}

.ItemHeader:hover .ItemSubmit .SaveButton,
.ItemFooter:hover .ItemSubmit .SaveButton
{
    visibility: visible;
}

.ItemHeader:hover .ItemSubmit,
.ItemFooter:hover .ItemSubmit
{
    opacity: 1.0;
}

.ItemSubmit a:hover {
    opacity: 1.0;
    text-shadow: 0 0 0.25em;
}


/* META  : .Base.ItemStyles.SingleItem.SingleItemInForm */
.SingleItemInForm {
    position: relative;
    height: 100%;
}

.SingleItemInForm > .ItemHeader > .Left,  .SingleItemInForm > .ItemHeader > .Right
{
    display: none;
}

.SingleItemInForm > .ItemStates .Transition
{
    display: none;
}

.SingleItemInForm > .ItemBody
{
    top: 0;
    bottom: auto;
    height: 0;
    display: none;
}

.SingleItemInForm > .ItemSubForm
{
flex: 1;
}


/* META  : .Base.ItemStyles.SingleItem.ItemActions */
.ItemActions
{
    vertical-align: top;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    font-size: 1rem;
}

.ItemActionsTitle
{
    padding: var(--inputPadding);
    padding-left: 24px;
    position: relative;
border-bottom: var(--border2);
}

.ItemActionsTitle .ImageClass {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

.SingleItem.TightItems .ItemActions > a  {
    max-width: 3em;
}

.ItemActionsTitle > div:first-child
{
    font-weight:bold;
}

.ItemActionsTitle > div:last-child
{
    font-size: 80%;
}

.SingleItem > .ItemActions {
    text-align:center;
    white-space: nowrap;
    flex-wrap: nowrap;
    display: flex;
    width: auto;
    flex: 0;
    align-items: center;
    justify-content: center;
}

.ItemActions a .ButtonText {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px;
    line-height: 1em;

}

.ItemBottom  .ItemActions a .ButtonText,
.ItemFooter  .ItemActions a .ButtonText
{
    max-width: 8em;
}

.ItemFooter  .ItemActions a.Action_Edit ,
.ItemFooter  .ItemActions a.Action_Display ,
.ItemFooter  .ItemActions a.Action_Delete,
.ItemFooter  .ItemActions a.Action_Copy ,
.ItemFooter  .ItemActions a.Action_Merge
{
    min-width: 4.5em !important;
    flex: 0;
}

.ItemFooter  .ItemActions a.Action_Edit .ButtonText,
.ItemFooter  .ItemActions a.Action_Display .ButtonText,
.ItemFooter  .ItemActions a.Action_Delete .ButtonText,
.ItemFooter  .ItemActions a.Action_Copy .ButtonText,
.ItemFooter  .ItemActions a.Action_Merge .ButtonText
{
    display: none;
}

.ItemFooter  .ItemActions a.Action_Edit .ImageClass,
.ItemFooter  .ItemActions a.Action_Display .ImageClass,
.ItemFooter  .ItemActions a.Action_Delete .ImageClass,
.ItemFooter  .ItemActions a.Action_Copy .ImageClass,
.ItemFooter  .ItemActions a.Action_Merge .ImageClass
{
    position: relative;
    opacity: 1.0;
    display: block;
text-align: center;
}

.icon-Empty:before {
    content: "\00a0";
    font-family: 361;
}

.ItemActions > .ItemActions {
    overflow: auto;
}

.ItemBottom .ItemActions  {
    gap: 0;
    position: relative;
    z-index: 9999;
    padding-top: 8px;
}

.ItemFooter .ItemActions  {
    display: flex;
    justify-content: center;
    gap: 0;
    padding-top: 8px;
}

.ItemFooter .Left .ItemActions  {
    justify-content: flex-start;
    height: 100%;
}

.ItemBottom .ItemActions a,
.ItemFooter .ItemActions a
{
    border-radius: 0;
    min-width: 7em;
    border: solid 1px #80808040;
    padding-left: 20px;
    padding-right: 20px;
    min-height: 3em;
    background-color: var(--white);
    flex:1;
    max-width: 10em;
}.ItemHeader .ItemActions:has( > select)
{
    min-width: 10rem;
    max-width: 10rem;
}

.ItemImage > * {
    width: 100%;
    height: 100%;
    max-height: 40px;
}

.ItemHeader .ItemImage > * {
    max-height: 40px;
}

.ItemHeader .ItemImage > .ImageClass,
.ItemHeader .ItemImage > .ImageSpan
{
    opacity: 0.5;
}

.ItemImage > * > * {
    width: 100%;
    height: 100%;
}

.ItemHeader .ItemActions .ButtonText {
    display: none;
}

.ItemHeader .ItemActions:has( > select):after,
.ItemBottom .Left .ItemActions:has( > select):after
{
    content: var(--icon-Chevron-Down);
    font-family: "361";
    position: absolute;
    right: 8px;
    font-size: 1.5em;
    TOP: 50%;
    transform: translateY(-50%);
    line-height: 1em;
    opacity: 0.3;
    pointer-events: none;
}

.ItemActions .ItemImage
{
    padding: 0 !important;
    justify-content: center;
    display: flex;
}

.ItemActions  .ItemImage svg,
.ItemActions  .ItemImage img
{
    height: 24px !important;
    width: 24px !important;
}

.ItemActions a
{
    padding: 1px;
    position: relative;
    cursor: pointer;
    min-width: 5em;
    overflow-wrap: normal;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.ItemActions a:first-child:before
{
    content: "";
    display: none;
}

.ItemActions a:last-child:after
{
    content: "";
    display: none;
}

.ItemHeader .ItemActions a
{
    width: 4em;
    min-width: 4em;
    padding: 1px;
    border: solid 1px #80808040;
    opacity: 0.5;
    color: #505050;
    flex-direction: row;
    flex-wrap: nowrap;
    display: flex;
}

.ItemHeader:hover .ItemActions a:hover {
    opacity: 1.0;
}

.ItemActions a.SelectedAction {
    background-color: var(--color1);
    color: var(--white);
    opacity: 1.0;
}

.ItemActions a.SelectedAction .ButtonText {
    opacity: 1.0;
}.ItemActions option
{
    height: 24px;
}

.ItemActions a img,
.ItemActions a .ImageClass
{
    display: flex;
    font-size: 16px;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    min-width: 24px;
    padding: 8px;
    opacity: 1.0;
    color: #808080;
    background-color: transparent;
    z-index: 99;

}

.ItemFooter .ItemActions a img,
.ItemFooter .ItemActions a .ImageClass
{
    padding: 1px;
    position: absolute;
    left: 0;
    opacity: 0.75;
}.ItemActions a span
{
    display: flex;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    flex-wrap: nowrap;
    padding: 4px;
}

.ItemActions img
{
    display: inline-block;
    position: absolute;
    left: 5px;
    top: 5px;
    height: 20px;
}.ItemActions a:hover
{
    background-color: #8eff8e;
    color: var(--textColor);
}

.ItemActions > select {
    box-shadow: 0 0 0;
    opacity: 0.75;
    background-color: transparent;
}

.ItemActions > select:hover {
    opacity: 1.0;
}


/* META  : .Base.ItemStyles.SingleItem.ItemActions.ItemAction */
.ItemAction {
    display: flex
;
    align-items: center;
    min-width: 5rem;
    justify-content: center;
}


/* META  : .Base.ItemStyles.SingleItem.ItemActions2.ItemAction */
.ItemAction {
    display: flex
;
    align-items: center;
    min-width: 5rem;
    justify-content: center;
}


/* META  : .Base.ItemStyles.SingleItem.ItemBody */
.ItemBody
{
    text-align: center;
    vertical-align: middle;
    position: relative;
    overflow: auto;

    -webkit-overflow-scrolling: touch;
}

.HasStates > .ItemBody {
    flex: 1;
}


/* META  : .Base.ItemStyles.SingleItem.Fields */
.Fields
{
    text-align: left;
    position: relative;
}

.ItemBody > .Fields {
    box-sizing: border-box;
    position: relative;
    height: auto;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    gap: var(--gap);
}

.Fields.Hidden {
    display: inherit !important;
}

.Fields > ._element_ {
    border: 1px solid silver;
}

.SingleItem > .ItemBody > .Fields {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    overflow: auto;
}

.SingleItem > .ItemBody > .Fields > div:only-of-type {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0;
    gap: var(--gap);
    width: 100% !important;
}

.SingleItem > .ItemBody > .Fields > *
{
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.SingleItem.FullWidth > .ItemBody > .Fields > *
{
    max-width: 100%;
}

.SingleItem.FullPage > .ItemBody > .Fields > *
{
    max-width: 100%;
}

.SingleItem > .ItemBody > .Fields > div > div:only-of-type {
    flex-grow: 1;
}

.FieldValue > .Fields {
    border: solid 1px rgba(127,127,127,0.2);
}

.FieldValue.LookupField > .Fields {
    display: inline-block;
}


/* META  : .Base.ItemStyles.SingleItem.EnableIf */
.EnableIf_false {
    display: none !important;
}


/* META  : .Base.ItemStyles.SingleItem.FieldSet */
.FieldSet {
    box-sizing: border-box;
    max-width: 100%;
    flex-basis: auto;
}

.FieldSet.EntityTypeView
{
    width: 100%;
    padding: 0;
}

.FieldSetPanel {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ItemView .FieldSetPanel {
    gap: 0;
}


/* META  : .Base.ItemStyles.SingleItem.SubItems */
.SingleItem_RightOpen > .ItemBody > .ItemRight
{
    width: var(--subItemsWidth);
    display: flex !important;
    padding-right: 24px;
}

.SingleItem_RightOpen .SubItemButton
{
    opacity: 1.0 !important;
    filter: blur(0px);
    border-radius: 50% 0 0 50%;
}

.ItemRight.SubItems .SingleItem .ItemHeader .ButtonText
{
    display: none !important;
}
.ItemRight.SubItems >.EntityTypeView
{
    border-color: rgba(255, 255, 255, 0.7);
    border-right-width: 0.5em;;
}
.ItemRight.SubItems >.EntityTypeView > .EntityTypeViewBody
{
    padding: 0.4em;
}

.ItemRight.SubItems .SingleItem.ActiveContent
{
    padding: 0 !important;
    padding-top: 0 !important;
}

.ItemRight.SubItems .SingleItem .ItemSubmit a
{
    padding: 4px 12px;
}

.ItemRight.SubItems .SingleItem .ItemHeader
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
top: 0;
}

.ItemRight.SubItems .SingleItem .ItemHeader > .Left
{
    grid-area: 1 / 1 / 2 / 2;
}

.ItemRight.SubItems .SingleItem .ItemHeader > .Center
{
grid-area: 2 / 1 / 3 / 3;
}

.ItemRight.SubItems .SingleItem .ItemHeader > .Right
{
grid-area: 1 / 2 / 2 / 3;
}

.ItemRight.SubItems .SingleItem .ItemHeader .ItemActions select
{
    pointer-events: none;
}

.ItemRight.SubItems .SingleItem .SubItemButtons
{
    display: none !important;
}

.ItemRight.SubItems .SingleItem .ItemBody
{
    padding: 0;
}

.ItemRight .SubItems {
    display: table-cell;
    top: 0;
    left: 0;
    right: 0;
    bottom: 52px;
    border: solid 1px rgba(127,127,127,0.2);
    vertical-align: bottom;
    display: flex;
    flex-direction: column;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}.ItemRight .SubItems .ItemFooter {
    display: none !important;
}

.ItemRight .SubItems .SubItemButtons {
    display: none !important;
}

.ItemRight .SubItems .ItemSubmit > a > span {
    display: inline-block !important;
}

.ItemRight .SubItems .ItemSubmit > a > .ButtonText {
    display: none !important;
}

.SubItems > .SubItem {
    margin: 5px 0;
    display: table-cell;
    vertical-align: bottom;
    border-radius: 10px;
    padding: 3px 5px;
    height: inherit;
    display: block;
    font-size: 100%;
    position: relative;
}

.SubItem .AttachmentButton{
    display: none;
    position: absolute;
    bottom: 0;
    margin-top: 3px;
    left: 5px;
}
.SubItem:hover .AttachmentButton {
    display: inline-block;
}

.SubItemDate {
    float: left;
}

.SubItemUser {
    float: right;
}

.SubItemSubject {
    float: none;
    margin-top: 1.5em;
}

.SubItemFile {
    margin: 5px;
    overflow: hidden;
    text-decoration: underline;
    cursor: pointer;
}

.SubItem:after {
    content: '';
    display: block;
    height: 10px;
}
.ItemRight textarea {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 55px;
    height: 50px;
}

.ItemRight .AddSubItem {
position: absolute;
    bottom: 1px;
    right: 1px;
    width: 32px;
    width: auto;
    opacity: 0.5;
    font-size: 38px;
    line-height: 38px;
    padding: 4px;
    border-radius: 4px;
}

.ItemRight .AddSubItem:hover {
    opacity: 1.0;
}

.SingleItem .SubItemButton {
    opacity: 0.75;
    filter: blur(0px);
    border-radius: 0;
    background-color: white;
    padding: 0.5rem;
    font-size: 2rem;
    margin: 1px;
}

.SingleItem .SubItemButton img {
    width: 16px;
    height: 16px;
}

.SingleItem .SubItemButton.Active {
    color: var(--menuIconColor);
}

.SingleItem  .SubItemButtons
{
    opacity: 1;
    position: absolute;
    right: 0;
    z-index: 1000;
    padding: 0;
    display: flex;
    flex-direction: column;
    top: 40vh;
    top: clamp(5rem,50%,40vh);
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    align-content: center;
}

.SubItems .Actions .ButtonText
{
    display: none;
}

.SubItemButton:hover {
    opacity: 1.0;
}


/* META  : .Base.ItemStyles.SingleItem.RichText */
.RichText_Template .richtextvar  .richtextvartitle  {
    display: inline-block !important;
}
.RichText_Template .richtextvar  .richtextvartitle  {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.RichText_Template .richtextvar  .richtextvarname  {
    display: none !important;
}


/* META  : .Base.ItemStyles.SingleItem.PeerItems */
.PeerItems {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 160px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-right: 1px solid #EFEFEF;
}


/* META  : .Base.ItemStyles.SingleItem.HoverBody */
.HoverBody {
    position: relative;
}

.HoverBody:hover .HoverCommands {
    visibility: visible;
}

.HoverCommands {
    position: absolute;
    visibility: hidden;
    right: 0;
}.HoverBody .HoverBody .HoverItem {
    visibility: hidden;
}

.HoverBody .HoverItem
{
    visibility: hidden;
}

.HoverBody:hover .HoverItem
{
    visibility: visible;
}

.Button.HoverItem,
.HoverItem .Button {
    font-size: 12px;
    padding: 2px 9px;
    margin: 0;
    padding: 7px;
}

.HoverTop
{
    position: absolute;
    top: -24px;
    right: 0;
    left: 0;
    text-align: center;
    z-index: 1000;
}

.HoverBottom
{
    position: absolute;
    bottom: -24px;
    right: 0;
    left: 0;
    text-align: center;
    z-index: 1000;
}

    #HoverForm {
    background-color: white;
    box-shadow: 1px 2px 5px #222222;
    }

.HoverItem:hover {
    color: orange !important;
    outline: 0;
}

.Button.HoverItem,
.HoverItem .Button {
    background-color: #656565;
    color: white;
    box-shadow: 0 0 6px;
}

.HoverTop .Button {
    background-color: transparent;
    color: #656565;
}

.HoverBottom .Button {
    background-color: #656565;
    color: white;
}

.HoverTop .Button:hover {
    outline: 0;
    color: orange;
}


/* META  : .Base.ItemStyles.SingleItem.ItemStates */
.ItemStates {
    width: 100%;
    display: flex;
    white-space: nowrap;
    box-sizing: border-box;
    position: relative;
    align-items: stretch;
    justify-content: center;
    text-transform: uppercase;
    padding: 0;

}

.ItemStates > div {
    display: flex;
    white-space: normal;
    justify-content: center;
    align-content: center;
    width: 100%;

}

.ItemStates .Transition {
    margin: 2px;
    background-color: rgba(127,127,127,0.08);
    position: relative;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
}

.ItemStates .Left {
    text-align: right;
    justify-content: flex-end;
    flex-grow: 1;
}

.ItemStates .Left .Transition {
    border-radius: 4em 0 0 4em;
    border-radius: 0;
}

.ItemStates .Left .Transition:before {
    border-radius: 4em 0 0 4em;
    border-radius: 0;
}

.ItemStates .Right .Transition {
    border-radius: 0 4em 4em 0;
    border-radius: 0;
}
.ItemStates .Right .Transition:before
{
    border-radius: 0 4em 4em 0;
    border-radius: 0;
}

.Fields .Transition {
    border-radius: 3px !important;
}

.ItemStates .Right .Transition::after
{
    width: 1px;
    height: 1px;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid green;
}

.ItemStates .Center {
    text-align: center;
    vertical-align: middle;
    position: relative;
    z-index: 100;
    min-width: 20%;
    width: 50%;
    border: var(--border1);
}

.ItemStates .Right {
    text-align: left;
    justify-content: flex-start;
    flex-grow: 1;
}

.ItemStates .Transition:hover {
    filter: brightness(0.92);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

.ItemStates .Center {
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    font-weight: 600;
    border-bottom: 3px solid var(--backColor);
    border-radius: 4px;
    background-color: rgba(255,255,255,0.9);
}

.ItemView  .ItemStates .Center {
    height: auto;
}

.StateTitle {
    border-radius: 0 !important;
    opacity: 1 !important;
    color: #222222;
    box-shadow: 0 0 0 rgba(127,127,127,0.5);
}

.StateTitle {
    width: auto;
    position: relative;
    margin: 0 !important;
    display: flex;
    margin-left: auto;
    margin-right: auto;
--singleItem-opacity:1;
    background-color: color-mix(in srgb, var(--singleItemBackColor, #f0f1f6) calc(var(--singleItem-opacity, 1) * 100%), transparent);
    text-transform: uppercase;
}

.StateTitle > div {
    display: flex;
    align-content: center;
    flex-direction: row;
    align-items: center;
}


/* META  : .Base.ItemStyles.SingleItem.ItemStates.Transition */
.Transition > span {
    display: table-cell;
    vertical-align: middle;
    height: 2.5em;
}

.Transition {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-align: center;
    cursor: pointer;

    opacity: 1;
    vertical-align: middle;
    flex:1;
    max-width: 16em;
}

    .Transition > span {
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-items: center;
    vertical-align: middle;
    line-height: 1em;
    max-width: 12em;
    min-width: 4em;
    white-space: normal;
    padding: 0 1.5em;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

.Transition:hover
{
    opacity: 1.0;
}


/* META  : .Base.ItemStyles.SingleItem.ItemStates.StatesBar */
.StatesBar {
    display: flex;
    flex-direction: row;
    flex-wrap: no-wrap;
    justify-content: center;
    width: 100%;
    --prevStatesColor: #00aa00;
    --currentStatesColor: #50ee50;

}

.StatesBar a {
    display: block;
    margin:0;
    text-align: center;
    justify-content: center;
    padding: 8px 8px 2px 8px  !important;
    flex:1;
    align-items: center;

}

.StatesBar > div
{
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 25%;
    justify-content: flex-start;
    text-align:center;
    vertical-align: middle;
    align-items: center;
    position: relative;
}

.StatesBar > div
{
    border-left: var(--border1);
}

.StatesBar > div:last-child
{
    border-right: var(--border1);
}

.StatesBar > div > a:before
{
    font-family: "361";
    content: var(--icon-Dot);
    position: absolute;
    top: -7px;
    font-size: 15px;
    z-index: 99;
    color: #d9d9d9;
}

.StatesBar > div:before,
.StatesBar > div:after
{
    content: "";
    position: absolute;
    width: 50%;
    border-top: solid 2px #d9d9d9;
    top: 0;
}

.StatesBar > div:first-child:before,
.StatesBar > div:last-child:after
{
    display: none;
}

.StatesBar > div:before
{
    left: 0;

}

.StatesBar > div:after
{
    right: 0;

}.StatesBar .PrevState a:before {
    color: var(--prevStatesColor);
}

.StatesBar .PrevState:before,
.StatesBar .PrevState:after
{
    border-color: var(--prevStatesColor);
}

.StatesBar .CurrentState:before {
    border-color: var(--prevStatesColor);
}.StatesBar .CurrentState a:after {
    font-family: "361";
    content: var(--icon-Dot);
    position: absolute;
    top: -12px;
    font-size: 25px;
    z-index: 90;
    color: var(--prevStatesColor);
}.StatesBar .CurrentState a {
    opacity: 1.0;
    font-weight: bold;
    justify-content: center;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 16px 4px !important;
}

.StatesBar .CurrentState {
    background-color: transparent !important;
}

.StatesBar .Transition {
    opacity: 1.0 !important;
    border: var(--border2);
    border-radius: 8px;
}

.StatesBar .Transition > span {
font-size: 85%;
}


/* META  : .Base.ItemStyles.SingleItem.ItemStates.StatesView */
.StatesView {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.StatesView.ItemStates {
    flex-direction: row;
}

.Top.StatesView {
    border-left: 0 !important;
    border-right: 0 !important;
}


/* META  : .Base.ItemStyles.SingleItem.Field */
.FieldHasSelect:after {
    content: var(--ChevronDown);
    font-family: "361";
    font-size: 1.5em;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 9px;
    opacity: 0.3;
    margin: auto;
    pointer-events: none;
    z-index: 10;
    height: max-content;
}

.Field {
    min-width: 2em;
    padding: var(--fieldPadding);
    position: relative;
    white-space: nowrap;
    max-width: 100%;

}

.Field:hover .FieldDescription {
    opacity: 1.0;
}

.FieldDescription
{
    display: block;
    padding: 4px;
    text-align: center;
    opacity: 0.2;
    text-align: left;
    font-size: 9px;
    white-space: normal;
}

.FieldTitle
{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 5px;
}

.FieldType
{
    position: absolute;
    top: 2px;
    right: 2px;
    text-align: right;
    font-size: 9px;
}

td.FieldBool {
    text-align: center;
}

.FieldEMail input, .FieldWeb input {
    display: block;
}

.Field input {
    width: 100% !important;
}

.InputSpan {
    max-width: 100%;
    min-width: 70%;
}

.FieldFilter .Label
{
    text-align: left;
    padding-left: 10px;
    font-size: 90%;
    width: 90%;
    float: left;

}

.Field a > * {
    display: inline-block;
    vertical-align: middle;
}

.Field a
{
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    white-space: pre-wrap;
}

.FieldChoice img {
    height: 20px;
}

.FieldPercent {
    font-size: 70%;
    margin: 3px;
    text-align: right;
}

.Field__State {
    text-transform: uppercase;
}

.Mode_Display.FieldIsEmpty.HideIfEmpty {
    display: none !important;
}

.LabelHidden.Field {
    max-width: 100%;
}

.FieldSubType_Percent input {
    width: 4em !important;
}

.FieldPercent {
    color: rgba(0,0,0,0.8);
}

.FieldIsZero input {
    color: #8f8f8f;
}

.FieldIsZero input:active {
    color: #303030;
}

.SingleItem .Field.Mode_Edit input,
.SingleItem .Field.Mode_Edit textarea,
.SingleItem .Field.Mode_Edit select {
    border: var(--inputBorder);
    border-radius: var(--inputRadius, 6px);
    padding: var(--inputPadding);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background-color: rgba(255,255,255,0.95);
}

.SingleItem .Field.Mode_Edit input:focus,
.SingleItem .Field.Mode_Edit textarea:focus,
.SingleItem .Field.Mode_Edit select:focus {
    border-color: var(--activeBorderColor);
    box-shadow: 0 0 0 3px rgba(10,110,185,0.1);
    outline: none;
}

.SingleItem .Field .FieldLabel {
    color: var(--labelColor, #3d5986);
    font-weight: 500 !important;
    font-size: 0.92em;
    letter-spacing: 0.01em;
}

.SingleItem .Field.Mode_Edit select {
    appearance: none;
    -webkit-appearance: none;
}

@keyframes fieldErrorShake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

.SingleItem .Field.FieldError {
    --inputBorder: solid 2px #d9534f !important;
    --labelColor: #b52b27 !important;
    animation: fieldErrorShake 0.35s ease;
}

.SingleItem .Field.FieldError input,
.SingleItem .Field.FieldError textarea,
.SingleItem .Field.FieldError select {
    border: solid 2px #d9534f !important;
    box-shadow: 0 0 0 3px rgba(217,83,79,0.15) !important;
}

.FieldErrorMessage {
    display: block;
    color: #d9534f;
    font-size: 0.78em;
    font-weight: 500;
    margin-top: 2px;
    white-space: normal;
    line-height: 1.3;
}


/* META  : .Base.ItemStyles.SingleItem.Field.Required */
.Field.Mode_Edit {
    --labelColor: rgba(0,64,0,0.75);
    --inputBorder: solid 1px rgba(0,128,0,0.25);
}

.Field.Mode_Edit.FieldIsEmpty {
    --labelColor: rgba(64,0,0,0.75); ;
    --inputBorder: solid 1px rgba(128,128,128,0.25);
}

.Field.Mode_Edit.Required.FieldIsEmpty {
    --labelColor: rgba(64,0,0,0.75); ;
    --inputBorder: solid 1px rgba(128,0,0,0.25);
}

.Mode_Edit.Required > .FieldLabel a > span:after {
    content: "*";
    position: relative;
    color: #400000;
}


/* META  : .Base.ItemStyles.SingleItem.Field.Upload */
.UploadImage
{
    width: 100% !important;
    display: inline-block !important;
    background-image: url(/images/emptyimage.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    max-height: 320px;
    max-width: 320px;
}

.Upload_Progress {
    position: relative;
}

.UploadFilesProgress {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100000;
    padding: 10%;
}

.UploadFilesProgress > div
{
    position: relative;
    left: 25%;
    right: 25%;
    width: 50%;
    height: 5em;
}

.UploadFilesProgress .UploadFileProgress {
    position: relative !important;
}

.UploadFilesProgress .UploadFileName {
    padding: 1em 0.5em 0.5em 0.5em;
}

.UploadImage {
    background-color: rgba(255,255,255,0.75);
}

.UploadFilesProgress {
    background-color: rgba(0,0,0,0.2);
}

.UploadFilesProgress > div {
    background-color: white;
}


/* META  : .Base.ItemStyles.SingleItem.Field.HBar */
.FieldValue > .HBar {
    display: block;
    width: 100%;
}

    .FieldValue > .HBar > .HBarValue {
    display: block;
    height: 100%;
    }

.FieldValue > .HBar {
    box-shadow: 0 0 4px inset #656565;
    display: block;
    background-color: rgb(255, 46, 46);
    width: 100%;
}

    .FieldValue > .HBar > .HBarValue {
    display: block;
    height: 100%;
    background-color: rgb(26, 195, 26);
    }

    .FieldValue > .HBar.FullHBar > .HBarValue {
    background-color: rgb(26, 195, 26);
    }


/* META  : .Base.ItemStyles.SingleItem.Field..FieldCoordinate */
.FieldCoordinate > .FieldValue {
    display: flex !important;
    flex-direction: column;
    flex: 1;
}

.FieldCoordinate > .FieldValue > .EntityTypeView {
    flex: 1;
    width: 100%;
    min-width: 100%;
}

.FieldCoordinate > .EntityTypeView .EntityTypeViewBody > .Center > .Middle > .ViewBody_Map {
    min-height: 200px;
}

.FieldCoordinate input {
    text-align: center;
    display: block;
    flex: 0;
}

.FieldCoordinate > .EntityTypeView
{
    width: 100%;
    flex: 1;
}

.FieldCoordinate textarea {
    width: 22em;
    text-align: left;
    display: block;
    height: 2em;
}

.FieldCoordinate
{
    width: 100%;
    height: auto;
    display: flex;
    flex: 1;
    min-height: 20em;
}

.FieldCoordinate .CoordinateActions  {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    font-size: 2em;
    z-index: 100;
}.FieldCoordinate.Field.FieldValue {
    flex-direction: column;
    flex-wrap: nowrap;
}


/* META  : .Base.ItemStyles.SingleItem.Field.MinMax */
.MinMax.FieldValue {
    white-space: nowrap;
}.FieldLabel.MinMax a {
    /* 2026-09-01 ERISILEBILIRLIK: #b78807 beyaz uzerinde 3.21:1 idi (AA esigi 4.5).
       12px + bold buyuk metin SAYILMAZ (AA buyuk metin esigi 18.66px bold), yani
       3:1 gevsemesi UYGULANMAZ. En acik AA'yi gecen altin tonu marjla secildi:
       #936e00 = 4.70 (kil payi) · #8a6500 = 5.33 (secilen) · #7d5c00 = 6.17 (fazla koyu).
       Kaynak DOGRULANDI: bu renk meta.xml'de YOK (OUTPUT 0, canli ElementStyle 0) ve
       itemstyles.css'i yazan bir uretici YOK => dosya GERCEK kaynaktir; ustteki
       `@meta CssKey=173` yorumu tarihsel koken isaretidir, canli bir uretici bagi DEGIL. */
    color: #8a6500;
    font-weight: bold;
}


/* META  : .Base.ItemStyles.SingleItem.Field.FileDisplay */
.FileDisplay {
    display: block;
    padding: 0;
    position: relative;
    height: auto;
    width: auto;
    cursor: pointer;
    box-sizing: border-box;
}.FileDisplay .FileImage {
    width: 48px !important;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 48px;
}

.FilesView_Folder .FileDisplay
{
    display: inline-table !important;
    width: 320px !important;
    white-space: normal;
    text-align: center !important;
}

.FilesView_Folder .FileDisplay:hover {
    box-shadow: 1px 1px 5px #607d8b6e;
}

.FilesView_Folder .FileDisplay > * {
    white-space: normal !important;
}

.FilesView_Folder .FileDisplay > .FileName {
    height: 5em;
    line-height: 1em;
    text-align: left !important;
    vertical-align: middle;
    display: table-cell;
    width: auto;
}

.FilesView_Folder .FileDisplay > .FileSize {
    display: none !important;
}

.FilesView_Folder .FileDisplay > .FileType {
    display: none !important;
}

.FilesView_Folder .FilesDisplay
{
    overflow: auto !important;
-webkit-overflow-scrolling: touch;
    white-space: normal !important;

    max-height: initial;
}

.FileDisplay  .ImageFileName {
    display: none !important;
}

.FileDisplay .AddButton {
    cursor: default;
}

.FileDisplay .CameraButton {
    cursor: default;
}

.FileDisplay .FaceButton {
    cursor: default;
}

.FileDisplay:hover .ActionButtons {
    display: inline-block;
}

.FileDisplay > img {
    max-width: 100%;
    padding: 0;
    margin: auto;
}

.FileDisplay:hover
{}

.FileDisplay:hover > img
{
    box-shadow: 1px 1px 5px #656565;

}

.FileDisplay:hover .FileFileName
{}

.FileDisplay .FileFileName
{
    padding: 10px;
    display: block;
}

.FilesDisplay {
    display: flex;
    position: relative;
    min-height: 50px;
    max-height: 320px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    overflow-y: overlay;
    padding: 1px;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    border-radius: var(--inputRadius);
}

.FilesDisplay > .FileDisplay {
    height: 100%;
    display: inline-block;
    min-width: 150px;
    position: relative;
    margin: 5px;
    font-weight: normal;
}

.FilesDisplay > a {
    position: absolute;
    right: 1px;
    top: 1px;
}

.FilesDisplay > a > img {
    height: 16px;
    width: 16px;
}

.FilesDisplay img {
    height: 48px;
    max-width: 48px;
}

.FilesFileName {
    padding: 10px 25px;
    vertical-align: bottom;
    display: inline-block;
}

.FieldValue .FileDisplay {
    display: block;
    text-align: center;
    margin: 0;
    border-radius: 0;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: var(--inputRadius);
}

.FilesDisplay > .FileDisplay > .FileName
{
    text-align: left;
}

.FileDisplay > * {
    padding: 0;
    display: block;
    max-width: 100%;
    display: flex;
    justify-content: center;
}

.FileDisplay > .FileName
{
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0.5em;
}

.FileDisplay > .FileType {
    width: 15%;
    text-align: center;
    overflow: hidden;
    border: solid 1px rgba(127,127,127,0.2);
    text-overflow: ellipsis;
}

.FileDisplay > .FileSize {
    width: 10%;
    text-align: right;
    border: solid 1px rgba(127,127,127,0.2);
    text-overflow: ellipsis;
    overflow: hidden;
}

.FileDisplay {

    color: #222222;
    border: solid 1px rgba(127,127,127,0.2);
}

.FileDisplay:hover {
    border-color: orange;
}

.FileDisplayHeader
{
    color: #656565 !important;
}

.FilesView_Folder
{
    height: auto;
}

.FilesView_Folder .FileDisplay > .FileName {
    background-color: transparent !important;
    box-shadow: 0 0 0;
}

.FilesView_Folder .FilesDisplay {
    background-color: white;
    border: solid 1px rgba(127,127,127,0.2);
    border-radius: 3px;
}

.FilesDisplay > .FileDisplay
{
    border-radius: 2em;
    color: #666666;
    font-weight: normal;
}

.FilesDisplay > .FileDisplay > .FileName {
    background-color: white;
}

.FilesDisplay > .FileDisplay > .FileSize {
    background-color: white;
}

.FilesDisplay > .FileDisplay > .FileType {
    background-color: white;
}

.PreviewField  .FileDisplay {
    width: 100%;
    height: 100%;
    padding: 0;
}


/* META  : .Base.ItemStyles.SingleItem.Field.Alignment */
.Left
{
    text-align: left;
}

.Center
{
    text-align: center;
}

.Right
{
    text-align: right;
}

.AlignCenter.Field > * {
    justify-content: center;
    text-align:center;
    margin-left: auto !important;
    margin-right: auto !important;
}

.AlignCenter.Field > .InputSpan > a {
    justify-content: center;
    text-align:center;
    margin-left: auto !important;
    margin-right: auto !important;
}

.AlignCenter.Field > .FieldLabel > a {
    justify-content: center;
    text-align:center;
    margin-left: auto !important;
    margin-right: auto !important;
}

.AlignCenter.Field  > .FieldValue > .InputSpan {
    justify-content: center;
    text-align:center;
    margin-left: auto !important;
    margin-right: auto !important;
}

.AlignCenter.Field  > .FieldValue > .InputSpan > a {
    justify-content: center;
    text-align:center;
    margin-left: auto !important;
    margin-right: auto !important;
}

.AlignRight {
    text-align: right !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

.AlignRight.Field > .InputSpan > a {
    justify-content: flex-end;
    text-align:right;
    margin-left: auto !important;
    margin-right: 0 !important;
}

.AlignRight.Field > .FieldLabel > a {
    justify-content: flex-end;
    text-align: right;
    margin-left: auto !important;
    margin-right: 0 !important;
}

.AlignRight.Field  > .FieldValue > .InputSpan {
    justify-content: flex-end;
    text-align: right;
    margin-left: auto !important;
    margin-right: 0 !important;
}
.LabelPositionTop.AlignRight.Field  > .FieldValue > .InputSpan {
    justify-content: flex-end !important;
}

.AlignRight > * {
    width: auto;
    justify-content: flex-end;
    text-align: right;
    margin-left: auto !important;
    margin-right: 0 !important;
}

.AlignLeft {
    text-align: left !important;
    justify-content: flex-start !important;
}

.AlignLeft > * {
    text-align: left !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.AlignLeft.Field > .InputSpan > a {
    justify-content: flex-start;
    text-align: left;
}

.AlignLeft.Field > .FieldLabel > a {
    justify-content: flex-start;
    text-align: left;
}

.AlignLeft.Field  > .FieldValue > .InputSpan {
    justify-content: flex-start;
    text-align: left;
}.AlignLeft > * {
    width: auto;
    justify-content: flex-start;
    text-align: left;
}

.AlignCenter {
    text-align: center !important;
    justify-content: center !important;
    display: flex;

}

.AlignCenter.Field input, .AlignCenter.Field.FieldMoney input, .AlignCenter.Field.FieldNumber input, .AlignCenter.Field.FieldInteger .InputSpan > a, .AlignCenter.Field.FieldMoney .InputSpan > a, .AlignCenter.Field.FieldNumber .InputSpan > a
{
    justify-content: center !important;
    text-align: center !important;
}

.VAlignTop {
    display: flex;
    flex-direction: row !important;
    align-items: flex-start !important;
}

.VAlignMiddle {
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
}

.DirectionVer > .VAlignMiddle {
    display: flex;

}

.DirectionFlexCol.VAlignMiddle,
.DirectionAll.VAlignMiddle
{
    display: flex;
    flex-direction: column !important;
    justify-content: center !important;
}

.VAlignBottom {
    display: flex;
    flex-direction: row !important;
    align-items: flex-end !important;
}

.AlignLeft{
    justify-content: flex-start !important;
}
.AlignRight{
    justify-content: flex-end !important;
}
.AlignCenter,
.AlignCenter > .PanelBody,
.Panel.AlignCenter,
.PageZone.AlignCenter,
.FieldSet.AlignCenter
{
    justify-content: center !important;
}

.VAlignTop
{
    align-items: flex-start !important;
}
.VAlignMiddle
{
align-items: center !important;
}
.VAlignBottom
{
align-items: flex-end !important;
}


/* META  : .Base.ItemStyles.SingleItem.Field.FieldDate */
td.FieldDate,
td.FieldDateTime
{
    text-align: center !important;
}

.FieldDate .FieldValue,
.FieldDateTime .FieldValue
{
    flex-wrap: nowrap;
}

.Field.FieldDate input,
.Field.FieldDateTime input
{
    padding-right: 2em;
}

.FieldDate.LabelPositionTop .FieldLabel a {
    text-align: center;
}

.FieldDate.LabelPositionTop .FieldValue a {
    text-align: center;
}

.FieldDate > .FieldValue > .InputSpan > a {

    margin: 0 auto;
}

.FieldDate.LabelPositionLeft > .FieldValue > .InputSpan > a {
    margin: 0;
    width: auto;
}

.FieldDate.Field.LabelPositionTop select
{
    width: auto !important;
    display: inline-block !important;
}


/* META  : .Base.ItemStyles.SingleItem.Field.DatePicker */
span.DatePicker
{
    position: relative;
    width: 8.5em;
    min-width: 8.5em;
    max-width: 8.5em;
}

.DatePickerSelector
{

width: 22em;
    max-width: 22em;
}

    .DatePickerSelector td.SelectedDate {
    font-weight: bold;
    box-shadow: 0 0 0.5em silver;
    color: white;
    background-color: #222222;
    }

.DatePickerSelector td.OtherMonth {
    opacity: 0.5;
}

.DatePickerSelectorTop {
    white-space: nowrap;
    padding: 0 0;
    margin: 0;
}
.DatePickerSelectorTop > *
{
    display: inline-block !important;
    line-height: 24px;
    text-align: center;
    white-space: nowrap;
}

.DatePickerSelectorTop a
{
    width: 10%;
    font-size: 1.25em;
    padding: 0.5em;
    opacity: 0.75;
}

.DatePickerSelectorTop .MonthYear {
    width: 60%;
}

.DatePickerSelectorTop select {
    font-size: 1.2em;
    width: auto;
    border: 0 !important;
    text-align: center;
    padding-right: 1.5em !important;
    text-align-last: right;
}.DatePickerSelectorTop select.YearSelect {
    height: auto;
}

.DatePickerSelector table td {
    font-size: 1.5em;
    padding: 0.5em;
    border-radius: 3px;
}

span.DatePicker {
    border: solid 0 rgba(127,127,127,0.1);
}.DatePickerSelector .ClearDate:after {
    content: "c";
    }

    .DatePickerSelector .NextMonth:after {
    content: var(--icon-Chevron-Right);
    font-family: "361";
    }
    .DatePickerSelector .PrevMonth:after {
    content: var(--icon-Chevron-Left);
    font-family: "361";
    }

    .DatePickerSelector .CloseCalendar:after {
    content: var(--icon-Times);
    font-family: "361";
    }

    .DatePickerSelector .MonthYear > span {
    position: relative;
    }

.DatePickerSelector .DatePickerSelectorTop a:hover {
    background-color: orange;
}

.DatePickerSelector td.TodayDate {
    color: indianred;
}

    span.DatePicker::after {
    content: var(--icon-Date-Picker);
    font-family: "361";
    font-size: 1em;
    margin: 0;
    box-shadow: 0 0 0 grey;
    vertical-align: middle;
    position: absolute;
    right: 0;
    left: auto;
    pointer-events: none;
    cursor: pointer;
    opacity: 0.5;
    z-index: 100;
    display: flex;
    padding: 8px;
    align-items: center;
    top: 0;
    bottom: 0;
    }

span.DatePicker:hover:after {
    opacity: 1.0;
}

input.DatePicker
{
    width: 8.5em;
    padding-left: 1em;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    min-width: 8.5em;
    max-width: 8.5em;
    padding: var(--inputPadding);
}

.DatePicker:after {
    content: var(--icon-Chevron-Down);
    font-family: "361";
float: right;
}


/* META  : .Base.ItemStyles.SingleItem.Field.HourMinutePicker */
span.HourPicker {
    width: 3em;
    position: relative;
}

span.MinutePicker {
    width: 3em;
    position: relative;
}

.HourPicker select, .MinutePicker select {
    width: 100%;
    padding: 8px 8px !important;
    text-align: center;
}
.HourPicker:after, .MinutePicker:after {
    content: var(--icon-Chevron-Down);
    font-family: "361";
    font-size: 8px;
    padding: 1px;
    opacity: 0.3;
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: fit-content;
    background-color: transparent;
    text-align: center;
    pointer-events: none;
}
.Field:hover .HourPicker:after, .Field:hover .MinutePicker:after {
    opacity: 1.0;
}


/* META  : .Base.ItemStyles.SingleItem.Field.RatingStars */
.RatingStars {
    color: silver;
    display: flex;
}

.FieldValue > .Rating
{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

.RatingStars .Selected {
    background-color: transparent !important;
    text-shadow: 0 0 1px #222222;
    box-shadow: 0 0 0;
    outline: 0;
    color: #588b71 !important;
}
    .RatingStars .FieldValue .Selected {
    color: inherit !important;
    }

    .RatingStars div.Selected:before {
    text-shadow: 0 0 1px #222222;
    }

    .RatingStars .Selected div:before {
    text-shadow: 0 0 2px #222222;
    }

.RatingStars {
    font-size: 100%;
    white-space: nowrap;
}

    .RatingStars div {
    display: flex;
    flex-direction: row-reverse;
    }

    .RatingStars > div {
    float: none;
    }
    .RatingStars div:before {
    content: var(--icon-Star);
    font-family: "361";
    display: inline-block;
    padding: 0.25em;
    font-size: 150%;
    }

    .RatingTitle {
    padding: 0.25em;
    line-height: 1em;
    }


/* META  : .Base.ItemStyles.SingleItem.Field.SunEditor */
.sun-editor {
    font-family: inherit !important;
    width: 100% !important;
    min-height: 100% !important;
    display: flex !important;

}

.sun-editor * {
    letter-spacing: 0;

}

.sun-editor .se-toolbar
{
    overflow: hidden;
}

.Page .sun-editor .se-btn {
    width: auto;
    height: 16px;
    border: 0;
    border-radius: 4px;
    margin: 1px!important;
    padding: 0 4px;
    font-size: 12px;
    line-height: 16px;
}

.Page .sun-editor .se-svg,
.Page .sun-editor button>svg {
    width: 12px;
    height: 12px;
}

.sun-editor-editable {
    font-family: inherit !important;
    font-size: 1em ;
}

.Field .sun-editor-editable {
    font-family: inherit !important;
    font-size: inherit ;
    padding: 8px;
}.Page .sun-editor .se-btn-tray {
    display: block;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    padding: 0;
}

.Page .sun-editor .se-btn-module-border
{
    border: 0;
}

.sun-editor .se-container
{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

.sun-editor .se-wrapper {
    flex: 1;
    overflow: auto;
}

.sun-editor-editable
{
    height: 100% !important;

}

.Field .sun-editor .se-resizing-bar.se-resizing-none
{
    display: none;
}

.sun-editor .se-wrapper .se-wrapper-code
{
    max-height: 100%;
}

.Field.Mode_Edit.FieldRichText.FieldValue
{
    height: 100%;
    padding: 0;
}


/* META  : .Base.ItemStyles.SingleItem.Field.LabelActions */
.Parameter .LabelActions {
    display: none;
}

.Parameter .LabelActions {
    display: none !important;
}

.Field:hover .LabelActions,
.Parameter:hover .LabelActions {
    display: inherit;
    opacity: 1.0;
}

.LabelActions {
    position: absolute;
    right: 2em;
    left: auto;
    width: 2em !important;
    top: 0;
    bottom: 0;
    height: fit-content;
    margin: auto;
    font-size: 1em !important;
    opacity: 0.0;
}

.LabelActions a:hover {
    opacity: 1.0;
}

.LabelActions a.fa-pen:before {
    content: var(--icon-Pencil);
    font-family: "361";
}

.LabelActions a {
    padding: 0.75em 0.5em;
    line-height: 1em;
}


/* META  : .Base.ItemStyles.SingleItem.Field.Gauge */
.Gauge > .Suffix {
    display: block;
    text-align: center;
}

.Gauge
{
    text-align: center;
    margin: 0 auto;
    min-width: 100%;
    min-height: 100%;
}

.FieldGauge > .InputSpan
{
    text-align: center;
}

.GaugeField > .InputSpan
{
    display: none !important;
}

.GaugeField > .InputSpan > a
{
    width: auto !important;
}

.FieldValue.GaugeField
{
    justify-content: center !important;
}

.Field.LabelPositionTop .FieldValue.GaugeField
{
    flex-direction: column;
}

.Gauge .neddle {
    box-shadow: 0 0 2px white;
    fill: #656565;
}

.Gauge .arc.chart-color1 {
    fill: #ffff88;
}

.Gauge .arc.chart-color2 {
    fill: red;
}

.Gauge .arc.chart-color3 {
    fill: green;
}


/* META  : .Base.ItemStyles.SingleItem.Field.BarCode */
@font-face {
    font-family: 'BarCode';
    font-display: swap;
    src: url('/fonts/BarCode.ttf');
}

@font-face {
    font-family: 'Code39';
    font-display: swap;
    src: url('/fonts/LibreBarcode39Text-Regular.ttf');
}

@font-face {
    font-family: 'Code128';
    font-display: swap;
    src: url('/fonts/LibreBarcode128Text-Regular.ttf');
}

@font-face {
    font-family: 'EAN13';
    font-display: swap;
    font-feature-settings: "calt" 1;
    src: url('/fonts/LibreBarcodeEAN13Text-Regular.ttf');
}

.QRCode
{
    display: block;
    padding: 5px;
    width: 160px;
    height: 160px;
    margin: 0 auto;
    flex: 1;
}

#QRCodeAuthentication {
    text-align: center;
}


/* META  : .Base.ItemStyles.SingleItem.Field.FieldFiles */
.FieldFile
{
    flex: 1;
}

.Field_File {
    height: auto;
}

.FieldFiles .FieldValue > a {
    opacity: 0.5;
}

.FieldFiles .FieldValue > a:hover {
    opacity: 1.0;
}

.FieldFiles .FieldValue > .AddButton
{
    position: absolute;
    top: 0;
    right: 1px;
}

.FieldFiles .FieldValue > .CameraButton
{
    position: absolute;
    top: 0;
    right: 30px;
}

.FieldFiles .FieldValue > .FaceButton
{
    position: absolute;
    top: 0;
    right: 64px;
}

.FieldFiles .ImagePreview img {
    max-width: 100%;
}

.FilesButtons {
    position: absolute;
    z-index: 100;
}

.ProcessingOCR {
    color: white;
    background-color: red;
    border-radius: 5px;
    font-weight: bold;
}
.FieldFile .FileDisplay >.FileFileName:empty{
    padding: 0;
}

.FieldFile.Mode_Display.PreviewField:has(>iframe) > .InputSpan > a,
.FieldFile.Mode_Display.PreviewField:has(>iframe) > .InputSpan
{
    z-index: -9999 !important;
    visibility: hidden !important;
}


/* META  : .Base.ItemStyles.SingleItem.Field.FieldRichText */
.Field.FieldRichText.FieldValue {
    flex-direction: column;
}

.FieldRichText {
flex:1;
}.Field.Mode_Display.FieldRichText.FieldValue {
    flex-direction: column;
    display: block;
    line-height: 1.5em;

}

.SingleItem .Field.Mode_Display.FieldRichText > .FieldValue
{
padding: var(--inputPadding);
}

.SingleItem .ItemView .Field.Mode_Display.FieldRichText > .FieldValue
{
padding: 0;
}

.Field.Mode_Display.FieldRichText > .FieldValue {
    flex-direction: column;
    line-height: 1.5em;
    display: block;

}

.FieldRichText.LabelPositionTop .FieldLabel a {
    text-align: left;
}

.FieldRichText .FieldValue,
.FieldRichText {
    text-align: left !important;
    white-space: normal;
}

.Mobile .Mode_Edit.FieldRichText .FieldValue,
.Mobile .Mode_Edit.FieldRichText
{
    max-height: initial;
}

.Mode_Edit.FieldRichText {
    flex-direction: column;

}

.FieldRichText  *
{
    max-width: 100%;

    line-height: 1.5em;
}


/* META  : .Base.ItemStyles.SingleItem.Field.FieldTextArea */
.Mode_Display.LabelHidden.FieldTextArea > .FieldValue > .InputSpan > * {
    text-align: left;
}

.Mode_Display.FieldTextArea > .FieldValue > .InputSpan > a {
    display: block;
    word-break: break-word;
}

.FieldTextArea.LabelPositionTop .FieldLabel a {
    text-align: left;
}

.Field.FieldTextArea.LabelPositionNone .FieldValue {
    height: 100%;
}

.Field.FieldTextArea.LabelPositionNone .FieldValue textarea {
    height: 100%;
}


/* META  : .Base.ItemStyles.SingleItem.Field.FieldNumber */
.DecimalSeperator {
    opacity: 0;
    font-size: 25%;
    vertical-align: middle;
    margin-top: 0.25em;
}

.WholePart {
    vertical-align: middle;
    white-space: nowrap;
}
.DecimalPart {
    font-size: 70%;
    padding: 3px 1px;
    vertical-align: top;
    white-space: nowrap;
}

.ListBody .FieldNumber,
.ListBody .FieldInteger,
.ListBody .FieldMoney,
.ListBody .FieldDate,
.ListBody .FieldCounter,
.FieldNumber .InputSpan,
.FieldInteger  .InputSpan,
.FieldMoney .InputSpan,
.FieldDate .InputSpan,
.FieldCounter  .InputSpan
{
    font-family: var(--monoFont);

}

.FieldIsZero
{
    opacity: 0.5;
}

.FieldValueZero {
    opacity: 0.5;
}

.FieldValueNegative {
    color: #d32f2f;
}

.FieldValueNegative * {
    color: #d32f2f;
}

.ListHeader td.FieldNumber a:first-child > span,
.ListHeader td.FieldInteger  a:first-child > span,
.ListHeader td.FieldMoney  a:first-child > span
{
    padding-right: 16px;
}

.ListTable td.FieldInteger
{
    text-align: right !important;
}

.ListTable td.FieldNumber
{
    text-align: right !important;
}

.ListTable td.FieldMoney
{
    text-align: right !important;
}

.FieldMoney .FieldValue a
{
    text-align: right;

}

.FieldInteger .FieldValue  a
{
    text-align: right !important;

}

.FieldMoney.LabelPositionNone .FieldValue {
    text-align: right !important;
}

.FieldMoney.FieldValue > .InputSpan,
.FieldInteger.FieldValue > .InputSpan,
.FieldNumber.FieldValue > .InputSpan {
    justify-content: flex-end !important;
}

.Field.FieldInteger.Mode_Edit .FieldLabel, .Field.FieldMoney.Mode_Edit .FieldLabel, .Field.FieldNumber.Mode_Edit .FieldLabel {
    text-align: center;
    max-width: initial;
}

.Field.FieldInteger.Mode_Edit.LabelPositionLeft .FieldLabel,
.Field.FieldMoney.Mode_Edit.LabelPositionLeft .FieldLabel,
.Field.FieldNumber.Mode_Edit.LabelPositionLeft .FieldLabel {
    justify-content: center;
}.Field.FieldInteger input,
.Field.FieldMoney input,
.Field.FieldNumber input,
.Field.FieldInteger .InputSpan > a,
.Field.FieldMoney .InputSpan > a,
.Field.FieldNumber .InputSpan > a {
    text-align: right;
    min-width: 3em;
    display: flex;
    max-width: var(--numWidth);
    position: relative;
    justify-content: flex-end;
    white-space: nowrap;
}

.Field.FieldInteger.LabelPositionTop .FieldLabel,
.Field.FieldMoney.LabelPositionTop .FieldLabel,
.Field.FieldNumber.LabelPositionTop .FieldLabel
{
    max-width: 100%;
    margin: auto;
}

.FieldMoney .FieldLabel a
{}

.FieldNumber .FieldLabel  a
{
    text-align: right;

}

.FieldInteger .FieldLabel  a
{}

.ItemView .FieldMoney .InputSpan > a {
    color: darkgreen;
}

.FieldNumber.LabelPositionLeft > .FieldValue,
.FieldMoney.LabelPositionLeft > .FieldValue,
.FieldInteger.LabelPositionLeft > .FieldValue {
    max-width: 100%;
    text-align: left;
}

.FieldNumber.LabelPositionLeft > .FieldValue input,
.FieldMoney.LabelPositionLeft > .FieldValue input,
.FieldInteger.LabelPositionLeft > .FieldValue input {
    max-width: var(--numWidth) !important;
}

.FieldNumber.LabelHidden > .FieldValue, .FieldMoney.LabelHidden > .FieldValue, .FieldInteger.LabelHidden > .FieldValue {
    max-width: 100%;
    text-align: right;
    justify-content: flex-end;
    display: block !important;
    margin: 0 auto;
}

    .FieldMoney > .FieldValue > .InputSpan,
    .FieldNumber > .FieldValue > .InputSpan,
    .FieldInteger > .FieldValue > .InputSpan {
    text-align: right;
    justify-content: flex-end;
    }

.FieldInteger > .FieldValue > .InputSpan,
.FieldNumber > .FieldValue > .InputSpan,
.FieldMoney > .FieldValue > .InputSpan {
    display: flex;
    justify-content: flex-start;

}

.LabelPositionLeft.FieldMoney > .FieldValue > .InputSpan,
.LabelPositionLeft.FieldNumber > .FieldValue > .InputSpan,
.LabelPositionLeft.FieldInteger > .FieldValue > .InputSpan {
    text-align: left;
    margin: 0;
}

.LabelHidden.FieldMoney > .FieldValue > .InputSpan,
.LabelHidden.FieldNumber > .FieldValue > .InputSpan,
.LabelHidden.FieldInteger > .FieldValue > .InputSpan {
    text-align: right;
    justify-content: flex-end;
    width: auto;
    margin: 0 auto;

}

.LabelPositionTop.FieldMoney > .FieldValue > .InputSpan,
.LabelPositionTop.FieldNumber > .FieldValue > .InputSpan,
.LabelPositionTop.FieldInteger > .FieldValue > .InputSpan {
    text-align: left;
    justify-content: flex-start;
    width: auto;
    margin: 0 auto;
}


/* META  : .Base.ItemStyles.SingleItem.Field.FieldImage */
.FieldImage > .FieldValue > *
{
    white-space: normal;
    display: block;
}
.FieldImage > .FieldValue {
    text-align: center !important;
}

.FieldImage  {
    display: block;
}

.FieldLabelTop.FieldImage .FieldValue  {
    width: 100%;
}

.FieldHasImage  {
    flex-direction: row;
}

.FieldHasImage > img {
    position: absolute;
    max-height: 100%;
}


/* META  : .Base.ItemStyles.SingleItem.Field.FieldDrawing */
.FieldDrawing .FieldValue
{
    height: 100%;
    width: 100%;
    display: block;
    padding: 0 !important;
}

.FieldDrawing
{
    height: 100%;
    width: 100%;
    display: block;
    padding: 0 !important;
}


/* META  : .Base.ItemStyles.SingleItem.Field.GroupField */
.GroupField {
    width: auto;
    text-align:left;
}

.GroupField select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 12.6em;
    background-image: url(/images/down_16.png);
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: right;
    background-position: right -12px center;
    padding-right: 20px !important;
    margin: 1px;
}

.GroupField input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    width: 12em;
}

.GroupFieldFunction
{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.GroupFieldFunctionLeft
{
    text-align: center;
}

.GroupFieldFunctionRight
{
    text-align: left;
}

.GroupFieldAggFunction {
    opacity: 0.5;
}


/* META  : .Base.ItemStyles.SingleItem.Field.PreviewField */
.PreviewField
{
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    position: relative;
    margin: 0 !important;
}

.PreviewField .FieldValue
{
    width: 100%;
    height: 100% !important;
    padding: 0;
}

.PreviewField iframe {
    width: 100%;
    height: calc(100% - 4em);
    padding: 0;
}


/* META  : .Base.ItemStyles.SingleItem.Field.Choice */
.Choices {
    white-space: normal;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
}

.ItemView .Choices > select {
    flex: 1;
}

.ChoiceTitles {
    white-space: normal;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
    min-height: 2.25em;
    display: none;
}

.ChoiceTitles > .Choice {
    background-color: transparent;
}

.MultipleChoices {
    position: relative;
}

.MultipleChoices > .ChoiceTitles {
    display: inherit;
}

.MultipleChoices > .Choices {
    display: none;
}

.MultipleChoices:hover > .Choices {
    display: inherit;
    position: absolute;
    top: 2.25em;
    z-index: 9990;
    background-color: var(--white);
    color: var(--black);
}

/* ⛔ TG olcumu (2026-09-15, makina PLMComponent.Certifications 15 cip / PLMLifecycleTemplate.ApplicableCatalogs, iPhone 13, edit):
   (1) Alan `.ItemCenter` gibi SABIT yukseklikli flex SUTUNUNDA flex-shrink ile satir ici `min-height:38px`'e eziliyordu:
       alan kutusu 38px, cipler 437px -> 10/10 cip alanin DISINA tasiyor, panel kenarinda kesiliyordu.
   (2) `.Choices` min-content'i nowrap cip metninden (197px) geliyordu; 155px deger kutusunda ve mobil
       `justify-content:center` ile iki yana tasip SOLDA kirpiliyordu (15/15 cip viewport disinda, x=-1).
   Cozum yer acmak: alan ezilmez, cip kabi kutuya sigar, uzun cip metni cipin ICINDE sarar (ellipsis YOK). */
.Field.FieldMultipleChoice {
    flex-shrink: 0;
}
.MultipleChoices > .Choices {
    min-width: 0;
    max-width: 100%;
}
.MultipleChoices > .Choices > * {
    max-width: 100%;
}
.MultipleChoices > .Choices > * > span {
    white-space: normal;
    overflow-wrap: anywhere;
}

a.Choice,.Choices > *
{
    width: auto;
    display: block;
    flex: 0;
}

a.Choice > span, .Choices > * > span
{
    white-space: nowrap;
}

.Choices > * {
    border-radius: 3px;
    border: 1px solid rgb(229, 232, 236);
}

.LabelPositionLeft > .FieldValue.Choices {
    text-align: left;
}

.Choice > .ButtonText {
    padding: 0;
    text-align: center;
    min-width: 1em;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}

.Choice > img, .Choice > .fas, .Choice > .fab {
    margin-right: 0.25em;
}

.Choices .Selected {
    color: white !important;
    background-color: rgb(0, 127, 255) ;
    border-color: rgb(0, 127, 255) ;
    box-shadow: none;
}

.Choices.FieldValue a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.LabelPositionTop.Choices .FieldLabel a {
    text-align: center;
}

.FieldValue.Choice > img {
    display: inline-block;
}

.Choice {
    white-space: nowrap;
    width: auto;
}

.Choice_
{
    height: 100%;
    opacity: 0.75;
}

.Choice > img {
    height: 1em;
}

.Parameter .Choice {
    padding: 10px;
}

.Parameter .Choice_true .ButtonText {
    padding: 10px;
}

.Parameter .Choice_false .ButtonText {
    padding: 10px;
}

.Choice > * {
    display: inline-block;
}

.FieldBool .FieldValue.Choices
{
    white-space: nowrap;
    flex-wrap: nowrap;
}

.FieldValue.Choices > a,
.FieldValue .Choices > a,
.Parameter.Choices > a,
.Choice {
    margin: 0 !important;
}

.Field.Mode_Display > .FieldValue.Choices > a,
.Field.Mode_Display > .FieldValue .Choices > a,
.Parameter.Choices > a,
.Field.Mode_Display .Choice
{
    padding: 0 !important;
}

.Choices > a:hover,
.Choice:hover {
    z-index: 100;
}

.ChoiceGroups {
    vertical-align: top;
}

.ChoiceGroup {
    display: block !important;
    width: auto !important;
    vertical-align: top;
}

.ParamValue.Choices
{
    display: flex;
    align-items: center;
}

.LookupField > a.Choice::after {
    display: none;

opacity: 0.5;
    font-size: 80%;
    margin-left: 0.5em;
}

.Choices > span {
    padding: 5px;
    margin: 1px;
}

    .FieldMultiAction .FieldValue .Choice .ButtonText {
    min-width: 3em;
    }
.Choice.Selected {
    background-color: var(--choiceSelectedColor, rgb(0, 127, 255));
    color: white;
    border-color: var(--choiceSelectedColor, rgb(0, 127, 255));
}

.Selected.Choice_false {

    background-color: var(--choiceSelectedFalseColor, #d24f6b) !important;
    border-color: var(--choiceSelectedFalseColor, #d24f6b) !important;
    color: white;
}

.Selected.Choice_true {

    color: white;
}

.Choices > a:hover, .Choice:hover {
    border-color: var(--choiceSelectedColor, rgb(0, 127, 255));
    background-color: rgba(0, 127, 255, 0.04);
}

.Field.Mode_Display .Choice,
.Field.Mode_Display .Choices > a {
    background-color: transparent;
}


/* META  : .Base.ItemStyles.SingleItem.Field.GlobalField */
.GlobalFieldTypes {
    color: white;
}

    .GlobalFieldTypes > select {
    border-radius: 50%;
    border: solid 1px rgba(127,127,127,0.2);
    background-color: rgba(255,255,255,0.5);
    opacity: 0.5;
    }

.GlobalFieldTypes:hover > select {
    opacity: 1.0;
    box-shadow: 1px 1px 4px #222222;
}


/* META  : .Base.ItemStyles.SingleItem.Field.AutoSelectList */
.ListTable .AutoSelectList {
    display: none;
}
.AutoSelectList {
    position: absolute!important;
    width: 2.5em;
    height: 100%;
    right: 0px;
    top:0;
    bottom:0;
    margin:auto 1px;
    z-index: 99;
    cursor: pointer;
    border:none!important;
}

.AutoSelectField input {
    padding-right: 2.5em;
}

    .Field:hover .AutoSelectList::after
    {
    opacity: 1;
    }

.AutoSelectList::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: auto;
    height: fit-content;
    text-align: center;
    content: var(--icon-Chevron-Down);
    font-family: "361";
    padding: 8px;
    opacity: 0.3;
    pointer-events: none;
    display: flex;
    align-items: center;
    margin: auto;
}


/* META  : .Base.ItemStyles.SingleItem.Field.SelectionItem */
.SelectionItem
{
    padding: 8px;
    display: block;
    font-size: 1em;
    cursor: pointer;
    border-top: solid 1px rgba(127,127,127,0.2);
    position: relative;
}

.SelectionItem .SelectionImage,
.SelectionItem .ImageClass {
    max-height: 100%;
    height: 100%;
    min-width: 1.25em;
    max-width: 1.25em;

    position: absolute;
    left: 0.25em;
    top: 0;
    right: auto;
    bottom: 0;
    display: flex;
    justify-content: center;
    opacity: 0.5;
}

.SelectionItem .SelectionImage img, .SelectionItem .SelectionImage svg {
    max-height: 100%;
    height: 100%;
    max-width: 1.25em;
    min-width: 1.25em;
}

.SelectionItem:first-child
{
    border-top: 0;
}.SelectionItemSelected {
    font-weight: bold;
}

.SelectionItem {
    min-height: 1.25em;
    line-height: 1.25em;
    White-space:pre;
}

.SelectionItem:after
{
    content : ".";
    display: inline-block;
}

.SelectionItemSelected {
    background-color: rgba(0, 168, 230, 0.5);
}

.SelectionItem:hover
{
    background-color: var(--choiceSelectedColor, rgb(0, 127, 255));
    color: white;
}

.SelectionItem:after {
    color: transparent;
}

.SelectorTop:before {
    content: var(--icon-Search);
    font-family: "361";
    position: absolute;
    font-size: 150%;
    right: 4.25em;
    top: 10px;
    z-index: 100;
}

.SelectorTop input {
    left: 0;
    display: block;
    width: calc(100% - 5.5em) !important;
    position: relative;
    border-radius: 0;
    margin: 0;
    border-color: rgba(127,127,127,0.1);
    padding: 8px;
}

.SelectorTop input:focus {
    box-shadow: 0 0 3px orange inset;
}

.SelectorTop img
{
    height: 20px;
    position: absolute;
    top: 3px;
    right: 3px;
    cursor: pointer;
}


/* META  : .Base.ItemStyles.SingleItem.Field.Selector */
.ItemSelector {
    max-height: 20em;
    min-height: 20em;
    min-width: 18em;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-top: solid 1px rgba(127,127,127,0.2);
    border-bottom: solid 1px rgba(127,127,127,0.2);
}

.SelectorBottom
{
    height: auto;
}

.SelectorTop
{
    position: relative;
}

.ItemSelector .NoRecordsFound {
    padding: 25% !important;
    position: relative !important;
    margin: 0 !important;
    text-transform: uppercase;
}

.ItemSelector .NoRecordsFound {
    color: red;
}

.SelectorTop input {
    background-color: #ffff88;
}


/* META  : .Base.ItemStyles.SingleItem.Field.LookupField */
.Field.LabelPositionNone .FieldValue.LookupField {
    text-align: left;
}

.LookupField
{
    text-align: left;
}

.LookupField > a.Choice
{
    width: auto;
    display: block;
    flex: 0;
}

.LookupField.Mode_Display  .InputSpan > a
{
    padding-right: 2em !important;
}

.FieldLookup.FieldIsEmpty.Mode_Display .FieldValue::after, .FieldLookup.HideLink.Mode_Display .FieldValue::after
{
    display: none;
}

.FieldLookup.LabelPositionTop .FieldLabel a {
    text-align: left;
}

.FieldLookup.Mode_Display .FieldValue::after {
    content: var(--icon-External-Link);
    font-family: "361";
    position: absolute;
    padding: 0.25em;
    padding-right: 0;
    opacity: 0.25;
    right: 2px;
    bottom: 0;
top: 0;
vertical-align: middle;
margin: auto;
display: flex;
align-items: center;
}

.FieldLookup.Mode_Display:hover .FieldValue::after {
    opacity: 0.75;
}

.FieldLookup.Mode_Display.HideLink .FieldValue::after {
    content:"" !important;
    background-color: transparent !important;
}

.Page_Web .LookupField::before
{
    content: "";
    width: 0;
    display: none;
}

.LookupField_NoTitle .FieldLabel {
    display: none !important;
}

.LookupField.ReadOnly:hover {
    background-color: rgba(255,222,0,0.3);
}

.Mode_Display.LookupField.Field.FieldLookup .FieldValue .InputSpan > a:first-child::after {
    opacity: 0.4;
    color: #002c94;
}

.Mode_Display.LookupField.Field.FieldLookup .FieldValue:hover .InputSpan > a:first-child::after {
    opacity: 1.0;
}


/* META  : .Base.ItemStyles.SingleItem.Field.FieldMulti */
.FieldMultiState > .FieldValue, .FieldMultiState > .FieldLabel,
.FieldMultiField > .FieldValue, .FieldMultiField > .FieldLabel,
.FieldMultiAction > .FieldValue, .FieldMultiAction > .FieldLabel {
    display: block;
    width: auto;
    text-align: left;
}

.Mode_Edit.FieldMultiAction .FieldValue a,
.Mode_Edit.FieldMultiField .FieldValue a,
.Mode_Edit.FieldMultiState .FieldValue a {
    border: 1px solid rgba(225, 225, 225, 0.5);
    margin: 0;
    padding: 8px;
    display: inline-block;
}

.FieldMultiAction > *, .FieldMultiState > *, .FieldMultiField > * {
    display: block;
    width: auto;
    text-align: left;
    padding: 0;
    max-width: inherit;
}

.FieldMultiField.Mode_Display a
{
    overflow-wrap: anywhere;
}


/* META  : .Base.ItemStyles.SingleItem.Field.Aggregate */
.AggregateValue {
    display: flex;
    padding: 2px !important;
    line-height: 0.9em;
    align-content: center;
    text-align: center;
    min-width: 1em;
    justify-content: flex-end;
}

.Content .Aggregate > .AggregateValue {
    font-size: 1.2em;
}

.AggregateLabel {
    margin-left: 8px;
    margin-right: 8px;
}

.AggField {
    text-align: right;
}

.AggField > div {
    display: block;
    text-align: right;
    vertical-align: middle;
    padding: 0.5em 1em;
    font-size: 140%;
    font-weight: bold;
}

.Button > .Aggregate {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    height: auto;
}

.ItemActions > a  {
    position: relative;
}

.ItemActions > a > .Aggregate {
    position: absolute;

    left: 50%;
    right: auto;
    top: -1em;
    background-color: var(--white);
    color: var(--textColor);
    border-radius: 1em;
    border: unset;
    margin: auto;
    transform: translateX(-50%);
    text-align: center;
    min-width: 2.5em;
    justify-content: center;
    opacity: 1;
}

.ItemActions > a.SelectedAction > .Aggregate{
    opacity: 1;
    background-color: #009ef7 !important;
    color: var(--white);
}
.ItemActions > a:hover > .Aggregate {

    background-color: #8eff8e !important;
    color: var(--textColor);

}

.Aggregate {
    padding: 1px;
    opacity: 0.75;
    display: flex;
    font-size: 75%;
    vertical-align: top;
    white-space: nowrap;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
}

.DirectionAccordion > div > .PanelHeader > .Aggregate {
    right: 2em;
    font-size: 100%;
}

.Aggregate > .AggregateValue::after
{
    content: attr(suffix);
    opacity: 0.5;
    padding-left: 2px;
}

.Aggregate.AggregateLabelTop {
    display: flex;
    flex-direction: column;
}

.Aggregate.AggregateLabelBottom {
    display: flex;
    flex-direction: column-reverse;
}

.Aggregate.AggregateLink
{
    cursor: pointer;
}
.Aggregate.AggregateLink:after
{

    content: var(--icon-Chevron-Right);
    position: absolute !important;
    font-family: '361';
    /* 2026-09-07: Chevron sag ust koseye alindi; dikey merkezde AggregateValue uzerine binmesi engellendi */
    font-size: 13px !important;
    line-height: 1 !important;
    right: 0.65em !important;
    top: 0.6em !important;
    bottom: auto !important;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    opacity: 0.35 !important;
    pointer-events: none;
}

.Aggregate.AggregateLink:hover:after
{
    opacity: 0.75 !important;
}

.Aggregate.AggregateLink:hover {
}


/* META  : .Base.ItemStyles.SingleItem.Field.FieldLabel */
.FieldLabel {
    color: var(--labelColor);
    display: flex;
    min-width: 30%;
    text-align: right;
    vertical-align: top;
    white-space: normal;
    box-sizing: border-box;
    font-weight: 400;
}

.FieldLabel a {
    display: flex;
    line-height: 1em;
    border: solid 0 rgba(127,127,127,0);
    padding: var(--fieldLabelPadding);
    position: relative;
}

.LabelPositionLeft .FieldLabel a
{
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0 !important;
}

.LabelPositionLeft .FieldLabel a:after
{
    content: "";
    border: dotted 1px var(--labelColor);
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
    margin-left: 4px;

    opacity: 0.5;
    z-index: -1;
    flex: 1;
    height: 1px;
}

.Field.Mode_Display .FieldLabel {
    font-size: 100%;
}

.LabelPositionTop .FieldLabel {
    display: flex !important;
    width: 100% !important;
    text-align: left;
    margin: 0;
    min-width: inherit;
    border-spacing: 0;
    position: relative;
    top: 2px;
}

.LabelPositionTop .FieldLabel a {
    width: 100%;
    text-align: left;
    vertical-align: bottom;
    padding-right: 0;
}

.FieldLabel a span {
line-height: 1em;
}

.Field.LabelPositionTop  > .FieldLabel a span {
    white-space: nowrap;
    overflow: hidden;
}

.FieldText.LabelPositionTop .FieldLabel a {
    text-align: left;
}

.Field.LabelPositionNone .FieldLabel {
    display: none;
}

.LabelPositionNone > .FieldLabel {
display: none !important;
}

.LabelPositionLeft > .FieldLabel > a {
    text-align: left;
}

.FieldLabel.RegExp a {
    color: #a5b707;
    font-weight: bold;
}

.Field.LabelPositionLeft > .FieldLabel {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    width: var(--fieldLabelWidth) !important;
    min-width: var(--fieldLabelWidth) !important;
    max-width: var(--fieldLabelWidth) !important;
}

.FieldLabelWidth50 {
    --fieldLabelWidth: 50%;
}

.FieldLabelWidth60 {
    --fieldLabelWidth: 60%;
}

.FieldLabelWidth70 {
    --fieldLabelWidth: 70%;
}

.FieldLabelWidth75 {
    --fieldLabelWidth: 75%;
}

.Field.LabelPositionLeft.FieldTextArea > .FieldLabel,
.Field.LabelPositionLeft.FieldRichText > .FieldLabel,
.Field.LabelPositionLeft.FieldImage > .FieldLabel,
.Field.LabelPositionLeft.FieldFile > .FieldLabel,
.Field.LabelPositionLeft.FieldPassword > .FieldLabel {
    justify-content: flex-start;

}


/* META  : .Base.ItemStyles.SingleItem.Field.FieldValue */
.SingleItem .FieldValue .InputSpan a
{

    border: var(--inputBorder);
    background-color: transparent;
    border-radius: var(--inputRadius);

}

/* Read-only / computed / display-mode values must NOT look editable.
   CssKey 201 above gives every .InputSpan a the input border; for Mode_Display
   fields (computed FullName, lookups shown read-only, Overview forms) that made
   them indistinguishable from editable inputs. Present them flat: no input
   border, muted value, default cursor — editable fields keep border+focus ring,
   so users can tell at a glance what they can change. */
.SingleItem .Field.Mode_Display .FieldValue .InputSpan a {
    border-color: transparent;
    background-color: transparent;
    padding-left: 0;
    color: var(--readonlyValueColor, #5a6675);
    cursor: default;
}
.SingleItem .Field.Mode_Display > .FieldLabel {
    opacity: 0.72;
}
/* Disabled / readonly editable inputs: greyed + dashed so they read as locked. */
.SingleItem .Field.Mode_Edit input[readonly],
.SingleItem .Field.Mode_Edit input:disabled,
.SingleItem .Field.Mode_Edit select:disabled,
.SingleItem .Field.Mode_Edit textarea[readonly],
.SingleItem .Field.Mode_Edit textarea:disabled {
    background-color: rgba(127,127,127,0.06);
    color: #6b7280;
    border-style: dashed;
    cursor: not-allowed;
}

.FieldValue
{
    display: flex;
    flex-wrap: wrap;
    width: auto;
    box-sizing: border-box;
    align-items: flex-start;
}

.Field > .FieldValue {
    flex: 1;
}

.FieldValue textarea
{
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
    min-height: 6em;
    white-space: normal;
}

.ItemView .FieldValue textarea {
    min-height: initial;
}

.FieldValue > .InputSpan {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    position: relative;
    margin: 0 auto;
    border-spacing: 0;
}

.AlignCenter > .FieldValue > .InputSpan {
    justify-content: center !important;
}

.AlignCenter.FieldValue > .InputSpan {
    justify-content: center !important;
}

.AlignCenter.FieldRichText > *
{
    text-align:center;
    justify-content: center;
}

.Mode_Display.LabelHidden > .FieldValue > .InputSpan > * {
    text-align: center;
}

.FieldValue > .Label {
    display: none;
}

.FieldValue .InputSpan a
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    line-height: var(--lineHeight);
    border: var(--inputBorder);
    border-radius: 3px;
    padding: var(--inputPadding);
    width:100%;
    text-align: left;
    border: solid 1px transparent;
}

.FieldTextArea.FieldValue .InputSpan a
{
    align-items: flex-start;
}

.AlignCenter.FieldValue .InputSpan a
{
    justify-content: center;
    text-align: center;
}

.FieldValue.fas:before,
.FieldValue.far:before {
    position: absolute;
    top: 0.9em;
    left: 0.7em;
}

.FieldValue > .fas,
.FieldValue > .FieldValueImage
{
    position: absolute;
    right: 0em;
    height: auto;
    width: 2em;
    max-height: 2em;

    bottom: auto;
    font-size: 1.2em;
    padding: 0.35em;
}

.FieldValueImage > svg
{
    height: 100%;
    width: 100%;
}

.FieldValue.fas .InputSpan a,
.FieldValue.FieldValueImage .InputSpan a,
.FieldValue.far .InputSpan a {
    padding-left: 2em;
}

.ItemView .FieldValue .InputSpan a,
.CalendarItem .FieldValue .InputSpan a
{
    border-color: transparent;
}

.Mode_Display .FieldValue .InputSpan {
    padding: 0;
}

.FieldIsEmpty .FieldValue .InputSpan a:after {
    content: " ";
    white-space: pre;
}

.FieldValue .Selected {
    color: white !important;
    background-color: rgb(0, 127, 255) ;
    border-color: rgba(127,127,127,0.2);
}

.FieldValue .Selected img,
.FieldValue .Selected .fa {
    filter: invert(1);
}

.LabelPositionTop .FieldValue select {
    width: 100%;
}

.FieldValue > a > img
{
    max-height: 1em;
}

.FieldValue > img
{
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    max-height: 100%;

}

.LabelHidden .FieldValue {
    width: 100% !important;
}

.Field.FieldValue {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: stretch;
}

.HideLink.FieldValue::after {
    content: "" !important;
    background-color: transparent !important;
    display: none;
}

.Field.LabelPositionNone .FieldValue {
    display: block;
    width: auto;
    text-align: center;
}
.FieldValue  {
    position: relative;
}

.Mode_Display.FieldIsEmpty .FieldValue {
    opacity: 0.75;
}

.Field.ValuePositionLeft > .FieldValue > .InputSpan
{
justify-content: flex-start;
}

.Field.ValuePositionRight > .FieldValue > .InputSpan {
    justify-content: flex-end;
}

.Field.ValuePositionCenter > .FieldValue > .InputSpan {
    justify-content: center;
}


/* META  : .Base.ItemStyles.SingleItem.Field.FieldTime */
.FieldTime {
    vertical-align: bottom;
}

.FieldTime > .FieldValue  > * {
    white-space: nowrap !important;
    display: inline-block !important;
    width: auto !important;
    text-align: center;
}


/* META  : .Base.ItemStyles.SingleItem.Field.ImagePreview */
.FieldValue > .ImagePreview {
    position: relative;
}

.FieldValue > .ImagePreview > .PrevImageFile {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
}

.FieldValue > .ImagePreview > .PrevImageFile:before {
    content: var(--icon-Chevron-Left);
    font-family: "361";
    font-size: 200%;
    min-height: 1em;
    min-width: 1.5em;
    background-color: #455A64;
    justify-content: center;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    line-height: 2;
    opacity: 0.1;
    color: #ffffff;

}

.FieldValue > .ImagePreview > .NextImageFile {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
}

.FieldValue > .ImagePreview > .NextImageFile:before {
    content: var(--icon-Chevron-Right);
    font-family: "361";
    font-size: 200%;
    min-height: 1em;
    min-width: 1.5em;
    background-color: #455A64;
    justify-content: center;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    line-height: 2;
    opacity: 0.1;
    color: #ffffff;

}

.FieldValue > .ImagePreview:hover > .PrevImageFile:before,
.FieldValue > .ImagePreview:hover > .NextImageFile:before{
    opacity: 0.4;
}
.FieldValue > .ImagePreview > .PrevImageFile:hover:before,
.FieldValue > .ImagePreview > .NextImageFile:hover:before{
    opacity: 1;
}


/* META  : .Base.ItemStyles.SingleItem.Field.InvalidField */
.InvalidField .Choices a, .InvalidField input, .InvalidField textarea, .InvalidField select, .InvalidField .ItemSelection {
    background-color: rgba(255,127,127,0.1);
}


/* META  : .Base.ItemStyles.SingleItem.Field.LabelPositionLeft */
.Field.LabelPositionLeft {
    display: flex !important;
    flex-direction: row !important;
    width: 100%;
    align-self: flex-start;
}

.Field.LabelPositionLeft > .FieldPadding {
    width: 0;
    display: flex;
}

.Field.LabelPositionLeft > .FieldValue
{
    max-width: calc(100% - 8em);
    align-content: center;
}

.Field.LabelPositionLeft.Hidden {
    display: none !important;
}

.LabelPositionLeft.LabelHidden > .FieldValue {
    width: 100%;
}

@media screen and (min-width: 381px) and (max-width: 1024px) {
    .DirectionVer .Field.LabelPositionLeft {
    display: flex;
    flex-direction: column !important;
    align-self: flex-start;
    --fieldLabelWidth: 100%;
    }

    .DirectionVer .Field.LabelPositionLeft .FieldLabel a:after {
    content: none;
    }

    .DirectionVer .Field.LabelPositionLeft > .FieldValue {
    max-width: 100%;
    }

}

@media screen and (min-width: 381px) and (max-width: 800px) {
    .AutoVertical > .DirectionVer  {
    display: flex !important;
    flex-direction: column !important;
    }

}


/* META  : .Base.ItemStyles.SingleItem.Field.LabelPositionBottom */
.Field.LabelPositionBottom {
    display: flex !important;
    flex-direction: column-reverse !important;
    width: 100%;
    align-self: flex-start;
}

.Field.LabelPositionBottom.Hidden {
    display: none !important;
}

.LabelPositionBottom.LabelHidden > .FieldValue {
    width: 100%;
}


/* META  : .Base.ItemStyles.SingleItem.Field.LabelPositionTop */
.Field.LabelPositionTop {

    vertical-align: middle;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    display: flex;
}

.LabelPositionTop.Field {
    max-width: 100%;
}

.Field.LabelPositionTop .FieldValue {
    width: 100%;
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
}

.Field.FieldBoolean.LabelPositionTop .FieldValue {
    flex-wrap: nowrap;
}

.Field.LabelPositionTop.LabelHidden .FieldValue {
    display: block;
    width: 100%;
}


/* META  : .Base.ItemStyles.SingleItem.Field.ColorField */
.ColorFieldDIV {
    position: absolute;
    height: 144px;
    white-space: nowrap;
    display: none;
    right: 0;
}

.Field:hover .ColorFieldDIV {
    display: initial;
}

.ColorFieldDIV > * {
    display: inline-block;
}


/* META  : .Base.ItemStyles.SingleItem.Field.Geo */
.FieldGeoJSON > .EntityTypeView
{
    height: calc(100% - 4em) !important;
}

.FieldGeoJSON  {
    height: 100%;
    min-height: 9em;
}

.FieldGeoJSON textarea {
    height: 100%;
}


/* META  : .Base.ItemStyles.SingleItem.Field.IFrame */
.IFrame {
    display: block;
}

.aspect-ratio {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56%;
}

    .aspect-ratio iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    }

.IFrameContainer {
    flex: 1;
}

.FieldValue > iframe {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.FieldSubType_IFrame.FieldFile > .FieldValue {
    height: 100%;
}

.IFrame {
    box-shadow: 0 0 0;
    border: solid 1px rgba(127,127,127,0.2);
}


/* META  : .Base.ItemStyles.SingleItem.Field.FilterField */
.FilterFieldComparator
{
    width: 2em;
}

.FilterFieldParams
{
    white-space: nowrap;
}


/* META  : .Base.ItemStyles.SingleItem.Field.Suffix */
.Suffix {
    font-size: 0.85em;
    position: relative;
    display: flex !important;
    align-items: center;
    width: auto;
    float: left;
    opacity: 0.5;
    left: 0;
    white-space: nowrap;
}

td .Suffix {

    display: flex !important;
    align-items: center;
    width: auto;
    float: right;
    left: 0;
    white-space: nowrap;
    width: 16px;
    font-size: 1em;
    padding-left: 2px;
    align-content: center;
    font-weight: 300;
    font-size: 8px;
    height: 1em;
    position: absolute;
    top: 2em;
}


/* META  : .Base.ItemStyles.SingleItem.Field.MaskField */
.MaskField {
    display: block !important;
}


/* META  : .Base.ItemStyles.SingleItem.Field.FieldPassword */
.FieldPassword > .FieldValue {
    flex-direction: column;
}

.FieldPassword input, .FieldPassword2 input {
    display: block;
}

.PasswordEye_On, .PasswordEye_Off {
    position: absolute;
    right: 0;
    z-index: 100;
    opacity: 0.75;
    font-size: 1em;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    margin: 11px;
    padding: 11px;
    margin: 0;
}

.PasswordEye_On:before, .PasswordEye_Off:before {
    vertical-align: middle;
    text-align: center;
}

.PasswordEye_On, .PasswordEye_Off {
    color: #656565;
}

.PasswordEye_On {
    color: red !important;
}
.FieldValue:hover .PasswordEye_On,
.FieldValue:hover .PasswordEye_Off {
    opacity: 1.0;
}


/* META  : .Base.ItemStyles.SingleItem.Field.FieldHasSelect */
.FieldHasSelect::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: auto;
    height: fit-content;
    text-align: center;
    right: 0;
    padding: 8px;
    font-size: 1em;
    opacity: 0.3;
    pointer-events: none;
    display: flex;
    align-items: center;
    margin: auto;
    font-family: "361";
    content: var(--icon-Chevron-Down);
}


/* META  : .Base.ItemStyles.SingleItem.Field.AceEditor */
.ace_editor
{
    min-height: 150px;
    width: 100%;
    height: 100%;
}


/* META  : .Base.ItemStyles.SingleItem.Field.FieldEntityType */
.FieldEntityType > .FieldValue,
.FieldEntityType.FieldValue
{
    flex-direction: row !important;
    flex-wrap: nowrap;
}

.SingleItem__Authorization .FieldEntityType > .FieldValue,
.SingleItem__Authorization .FieldEntityType.FieldValue
{
    flex-direction: column !important;
    flex-wrap: nowrap;
}

.FieldEntityType > .FieldValue > .ItemSelection {
    max-width: 25em !important;
    text-align: left;
}

.FieldEntityType.LabelPositionLeft   .FieldLabel {
    max-width: 25em !important;

    justify-content: flex-start !important;
    padding: var(--inputPadding);
}


/* META  : .Base.ItemStyles.SingleItem.Field.SubFields */
.SubFields .Field {
    text-align: left;
    max-width: inherit;
    padding-left: 0;
    padding-right: 0;
    flex: 1;
    line-height: 1em;
}

.Field_UserET .SubFields .Field {
    padding: 0;
}

.SubFields {
    display: flex;
    flex-direction: column;
    flex: 1;
    line-height: 1em;
}

.SubFields .Field {
    box-shadow: 0 0 0 !important;
}

.SubFields .ItemSelection {
    padding: var(--inputPadding);
}

.SubFields > div {
    display: block;
    white-space: normal;
    width: 100%;
    vertical-align: top;
}


/* META  : .Base.ItemStyles.SingleItem.Field.Files_FolderView */
.Files_FolderView
{
    display: flex;
    flex-direction: row;
}

.Files_FolderView > .FileDisplayHeader
{
    display: none;
}

.Files_FolderView > .FileDisplay
{
    width: auto !important;
}

.Files_FolderView > .FileDisplay > span
{
    width: auto !important;
}

.Files_FolderView > .FileDisplay > span.FileType
{
    display: none;
}


/* META  : .Base.ItemStyles.SingleItem.Field.MultipleChoice */
.FieldMultipleChoice .InputSpan  {
    flex-wrap: wrap;
}
.FieldMultipleChoice .InputSpan > a {
    width: auto;
    margin-left: 3px;
    margin-right: 3px;
}

.FieldMultipleChoice .InputSpan > a:hover {
    text-decoration: underline;
}


/* META  : .Base.ItemStyles.SingleItem.Field.MultiLanguage */
.FieldSet_Multi_Lang.TabPanel.AnyTabSelected
{
    min-height: auto;
    height: auto;
    flex-direction: column-reverse;
}

.FieldSet_Multi_Lang > .TabHeader
{
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto;
    justify-content: flex-end;
    box-shadow: 0 0 0 !important;
    border: 0;
    margin-right: 1em !important;
    min-height: 1.5em !important;
    position: relative;
    bottom: 0;
    right: 0;
    position: absolute;
    bottom: -10px;
    top: auto;
}

.FieldSet_Multi_Lang > .TabBody > div.Selected
{
    border: 0;
}

.FieldSet_Multi_Lang > .TabHeader > .TabButton
{
    padding: 0 !important;
    flex: 0;
    min-height: auto;
}

.FieldSet_Multi_Lang > .TabHeader > .TabButton > span
{
    padding: 3px !important;
    min-height: auto;
    min-width: 0;
}


/* META  : .Base.ItemStyles.SingleItem.Field.FieldHTML */
.FieldHTML {
    flex: 1;
}

.FieldHTML.Mode_Display
{
    display: block !important;
    vertical-align: top;
    text-align: left;
    align-content: normal !important;
}


/* META  : .Base.ItemStyles.SingleItem.Field.FieldTextArea */
.FieldTextArea
{
    flex: 1;
}


/* META  : .Base.ItemStyles.SingleItem.Field.FieldUserType */
.FieldUserType  .Choice .ButtonText
{
    max-width: 7em;
    min-width: 7em;
}


/* META  : .Base.ItemStyles.SingleItem.Field.Empty */
.FieldIsEmpty.Mode_Display {
    opacity: 0.5;
}

.FieldIsEmpty.Mode_Edit .FieldLabel {
    font-weight: bold;
}

.FieldIsEmpty.Mode_Display .FieldValue {
    font-style: italic;
    color: rgba(0,0,0,0.3);
}

.ListBody .FieldValueZero {
    color: rgba(0,0,0,0.25);
}


/* META  : .Base.ItemStyles.SingleItem.Field.LinkTo */
.InputSpan > .LinkTo
{
    width: 3em !important;
    text-align:center !important;
    justify-content: center !important;
}


/* META  : .Base.ItemStyles.SingleItem.SignDocument */
.SignDocument
{
    padding: 0.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}.SignDocument .SignMessage
{
    text-align: center;
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: red;
    flex-wrap: wrap;
    flex-direction: column;
    white-space: normal;
    position: relative;
    min-height: 2em;
}

.SignDocument button
{
    width: auto;
    text-align: center;
    padding: 0.5em 1em;
    margin: auto;
    font-size: 1.5em;
}

.SignDocument button[disabled],
.SignDocument button:disabled
{
    opacity: 0.5;
}

.SignDocument.DocumentSigner_Online .SignMessage
{
    color: green;
}

.SignDocument .FileFields {
    display: flex;
    flex-direction: row;
    display: none;
}

.SignDocument .FileFields > * {
    padding: 1em;
}


/* META  : .Base.ItemStyles.SingleItem.ItemTitlesMenu */
.ItemTitlesMenu {
    text-align: center;
    position: fixed;
    bottom: 0;
    z-index: 99999;
    opacity: 0.7;
    transform: translateX(-50%);
    left: 50%;
    display: flex;
}

.ItemTitlesMenu:hover {
    opacity: 1.9;
}

.ItemTitlesMenu > a {
    padding: 0.5rem 1rem;
    text-align: center;
    background-color: rgba(255,255,255,1);
    color: #303030;
    margin: 1px;
    display: flex;
    align-items: center;
    box-shadow: 0 0 1px gray;
}

.ItemTitlesMenu > a:hover {
    color: green;
}

.ItemTitlesMenu > a:active,
.ItemTitlesMenu > a:focus
{
    color: red;
}

.ItemTitlesMenu > a > .ButtonText {

    border-radius: 4px;
    line-height: 1em;
}


/* META  : .Base.ItemStyles.SingleItem.FullWidth */
.SingleItem.FullWidth > .ItemBody > .Fields > *
{
    max-width: 100%;
}

.SingleItem.FullWidth {
    padding-left: var(--gap);
    padding-right: var(--gap);
    max-width: 100% !important;
}


/* META  : .Base.ItemStyles.SingleItem.LanguageTools */
.FieldValue > .LanguageTool {
position: absolute;
    right: 0.75em;
    top: calc(50% - 0.75em);
    z-index: 99;
    font-weight: 500;
    cursor: pointer;
    opacity: 0.3;
    font-size: 0.75em;
}

.FieldValue > .LanguageTool:before {
    opacity: 0.1;
    position: absolute;
    left: -1px;
    font-size: 1.5em;
}

.FieldValue:hover > .LanguageTool {
    opacity: 1.0;
}

.Language_Other
{
    opacity: 1;
}

.Language_Other .FieldLabel > a
{
    opacity: 1;
}


/* META  : .Base.ItemStyles.SingleItem.ItemBottom */
.ItemBottom {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;

}

.ItemBottom > .Left {
    flex: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
}.ItemBottom > .Left > .ItemActions > select {
    padding: 8px;
    font-size: 1.5em;
    border: 0;
    border-radius: 0;
}

.ItemBottom > .Right {
    flex: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.ItemBottom > .Right .ItemSubmit {
    width: 100%;
}

.ItemBottom > .Right a {
    padding: 4px;
}

.ItemBottom > .Center {
    flex: 1;
}

.ItemBottom > .Center > .ItemActions {
    justify-content: center;
}


/* META  : .Base.ItemStyles.SingleItem.SingleItemType */
.SingleItemType
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-weight: 300;
}

.ItemHeader .Center .SingleItemType {
    line-height: 1em;
    font-size: 75%;
    padding: 1px;
    position: absolute;
    left: 50%;
    bottom: 1px;
    transform: translateX(-50%);
    color: rgba(0,0,0,0.5);
    bottom: 0;
}

.ItemHeader .Center.NoSingleItemTitle .SingleItemType
{
    position: relative !important;
    align-items: center !important;
}

.ItemHeader .Left .SingleItemType {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border: 0 !important;
    max-width: 100%;
    justify-content: flex-start;
    border-right: solid 0 #80808030 !important;
}

.NoSingleItemTitle .SingleItemType {
    font-size: 100%;
    top: 0;
    position: relative;
    height: 100%;
}


/* META  : .Base.ItemStyles.SingleItem.ByUserDate */
.ByUserDate
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: 80%;
    line-height: 1em;
    gap: 1px;
    position: relative;
    overflow: hidden;
}

.ItemFooter .ByUserDate {
    opacity: 0;
    position: absolute !important;
    top: 0;
}

.ItemFooter:hover .ByUserDate {
    opacity: 0.5;
}

.ItemFooter:hover .ByUserDate:hover {
    opacity: 1.0;
}

.ByUserDate > span {
    display: flex;
    justify-content: center;
    flex: auto;
    padding: 1px 8px;
}.ByUserDate > span:nth-child(2)
{
    gap: 1px;
}

.ByUserDate > span:nth-child(2) > span:first-child:after
{
    content: ":";
    padding: 2px;
}


/* META  : .Base.ItemStyles.SingleItem.SingleItemHeader */
.SingleItem .SingleItemHeaderName
{
    flex: 1;
}

.SingleItemHeader .ItemStates .Center
{
    width: auto;
}

.SingleItem .SingleItemHeader,
.Fields_Header.ItemHeader
{
    background-color: #ffffff80;
    font-size: 1em;
    padding: 4px !important;

}

.SingleItem .SingleItemHeader .Field,
.Fields_Header.ItemHeader .Field
{
    --inputBorder: 0 !important;
    --fieldPadding: 1px !important;
}

.SingleItem .SingleItemHeader .LabelPositionTop
{
    --fieldLabelPadding: 4px 4px 0 4px;
}

.SingleItem .SingleItemHeaderName .InputSpan a
{
    font-size: 1.25em;
    font-weight: bold;
    text-align:center;
    justify-content: center;
}

.SingleItem .SingleItemHeaderTitle
{
    position: relative;
    right: 0;
    left: 0;
    bottom: auto;
    text-transform: uppercase;
    font-weight: 600;
    text-align: left;
    justify-content: flex-start;
    padding: 0;
    opacity: 1;

    letter-spacing: 1px;
    padding-left: 8px;
}

.SingleItem .FieldSet_m .SingleItemHeaderTitle
{
padding: 0;
position: absolute;
top: -1.2em;
width: auto;
left: 0;
right: 0;
text-align: center;
margin: 0 auto;
justify-content: center;
}

.SingleItem .FieldSet_m .SingleItemHeaderTitle > span
{
background-color: white !important;
border-radius: 8px;
padding: 4px 8px;
border: var(--border2);
z-index: 9;
    background-color: color-mix(in srgb, var(--singleItemBackColor, #f0f1f6) calc(var(--singleItem-opacity, 1) * 100%), transparent);
}

.SingleItem .SingleItemHeader .FieldSet_l
{
    justify-content: center;
}


/* META  : .Base.ItemStyles.EntityTypeHasBorders */
.EntityTypeView {
    border: var(--border1);
    border-radius: var(--gap);
    background-color: #ffffff80;
}

.EntityTypeView .EntityTypeView {
    border: 0;
    border-radius: 0;
    background-color: transparent;
}

.SingleItem > .ItemBody  {
    background-color: #ffffff80;
}

.SingleItem > .ItemBody  .EntityTypeView {
    background-color: transparent;
}


/* META  : .Base.Views.View */
.ViewBody
{
    position: absolute;
    white-space: normal;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    flex-wrap: wrap;
align-content: flex-start;
justify-content: center;
width: 100%;
}

.DisableOverflow .ViewBody {
    position: relative;
}

.EntityTypeViewBody.ViewBody {
    display: flex;
    flex-direction: row;
}

.ViewBody select:hover {
    opacity: 1.0 !important;
}

.ViewBody:hover > .FolderOptions {
    display: initial;
}

.LeftPanelHandler
{
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(/images/menu.png);
    background-size: 16px 16px;
    width: 24px;

    background-repeat: no-repeat;

    bottom: 0;
    background-position: 0;
    opacity: 0.5;
}

.RightPanelHandler
{
    position: absolute;
    left: 3px;
    top: 3px;
    background-image: url(/images/darrowright.png);
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    border-radius: 16px;
}

.List_SaveNew {
display: flex;
}

.List_SaveNew > *:first-child {
    flex-grow: 1;
}

.DropArea
{
    box-shadow: 0 0 7px rgba(255,0,0,0.75) inset !important;
}

.FullView
{
    height: 480px;
    position: relative;
}

.ItemCountLabel {
    padding-left: 0.5em;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
    font-size: 0.5em;
    top: 0.5em;
    position: relative;
}

.DisplayFilterPanel_False img {
transform: rotateZ(0deg);
perspective: 800px;
}

.DisplayFilterPanel_True img {
transform: rotateZ(90deg);
}

.DisplayFilterPanel_True, .DisplayBrowseDataPanel_True {
    display: inline-block;
    border-radius: 0 2px 2px 0;
    opacity: 1.0 !important;
    border-right: 0;
}


/* META  : .Base.Views.View.ImportExport */
.ImportExport .Buttons .Choice {
    background-color: white;
    border: solid 1px rgba(127,127,127,0.2);
}

.ImportExport .Buttons #Choice_Import {
    background-color: lightsalmon;
}

.ImportExport .Buttons #Choice_Export {
    background-color: lightblue;
}

.ImportExport {
    max-width: 320px;
    margin: 0 auto;
    position: relative;
}

.ImportExport > div {
    margin: 1em;
}

    .ImportExport .Buttons {
    text-align: center;
    }

.ImportExport .Buttons .Choice {
    padding: 1em;
    margin: 0.5em;
    font-size: 150%;
}


/* META  : .Base.Views.View.MultiActons */
.MultiActions {
    height: auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 100;
    text-align: left;
    white-space: nowrap;
}

.MultiActions img {
    height: 16px;
    opacity: 0.7;
    display: none;
}

    .MultiActions a {
    display: inline-block;
    border: solid 1px rgba(127,127,127,0.2);
    padding: 0 3px;
    opacity: 1;
    margin: 1px;
    }

.MultiActions a:hover {
    opacity: 1.0;
}

.MultiActions span
{
    font-size: 100%;
    display: inline-block;
    padding: 0.5em 1em;
}

.SelectionCounter {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: rgba(var(--primaryRGB, 0,120,212), 1);
    background-color: rgba(var(--primaryRGB, 0,120,212), 0.1);
    border: 1px solid rgba(var(--primaryRGB, 0,120,212), 0.25);
    border-radius: 10px;
    padding: 1px 8px;
    margin-right: 6px;
    vertical-align: middle;
    white-space: nowrap;
}


/* META  : .Base.Views.View.DataActions */
.DataActions {

    display: inline-block;
}

.DataActions a div {
    display: inline-block;
}
.DataActions img {
    padding: 2px 2px;
    margin: 2px 3px;
}


/* META  : .Base.Views.View.ETSearch */
.ETSearch {
    padding: 1px 5px;
    line-height: 1em;
    position: absolute;
    right: 0;
    font-weight: normal;
}

.ETSearchPlace {
    width: 3em;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
}.ETSearch input {
    width: 2.5em;
    border-radius: 2em;
    padding: 0.5em 1em;
    font-weight: normal;
    opacity: 0.5;
    position: relative;
    z-index: 100;
    transition: all 350ms;
    background-color: transparent;
    border-color: transparent;
    z-index: 0;
}

/* 2026-08-29: malformasyonlu selector onarıldı. Eskisi:
   ".Mobile .ETSearch input .ETSearch:hover input:active" — geçersiz koma öğesi
   TÜM kuralı öldürüyordu (Tablet/Mobile 10em + NotEmpty genişlemesi hiç çalışmıyordu).
   İstenen seçiciler ayrı ayrı yazıldı. */
.ETSearch:hover input, .Tablet .ETSearch input, .Mobile .ETSearch input, .ETSearch:hover input:active, .ETSearch input.NotEmpty {
    width: 10em;
    background-color: white;
    color: #303030;
    opacity: 1.0;
    outline: 1px solid #d7dae1;
}

.ETSearch input:active, .ETSearch input:focus, .ETSearch input:hover {
    opacity: 1.0;
    width: 10em;
    background-color: white;
}

.ETSearch input::placeholder, .ETSearch input::placeholder {
    opacity: 0.0;
}

.ETSearch:hover input::placeholder {
    opacity: 1.0;
}

.ETSearch input:active::placeholder, .ETSearch input:focus::placeholder, .ETSearch input:hover::placeholder {
    opacity: 1.0;
}

/* 2026-08-29: Mobil/Tablet'te input daima geniş — placeholder da görünür olmalı
   (dokunmatikte hover yok, aksi hâlde "Ara..." asla görünmezdi). */
.Mobile .ETSearch input::placeholder, .Tablet .ETSearch input::placeholder {
    opacity: 1.0;
}

.ETSearch::after
{
    content: var(--icon-Search);
    font-family: "361";
    position: absolute;
    top: 0;
    bottom: 0;
    height: fit-content;
    padding: 0.5em;
    font-size:1.5em;
    margin: auto;
    right: 0;
    z-index: 99;
    opacity: 0.5;
}


/* META  : .Base.Views.View.BulkInsert */
.BulkInsertDataPanel {
    height: 64px;
    position: absolute;
    left: 10px;
    right: 10px;
    top: 40px;
    overflow: auto;
-webkit-overflow-scrolling: touch;
}

.BulkInsertFields
{
    white-space: nowrap;
    overflow: auto;
-webkit-overflow-scrolling: touch;
    position: absolute;
    text-align: left;
    top: 0;
    left: 0;
    bottom: 0;
    right: 48px;
}

.BulkInsertActions
{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 48px;
    right: 0;
}

.BulkInsertDataPanel .AddNewRecord
{
    width: 40px;
    height: 40px;
    display: inline-block;
    padding: 4px
}

.BulkInsertFields .FieldValue {
    white-space: nowrap;
}

.BulkInsertFields .FieldValue > * {
    display: inline-block !important;
    padding: 3px;
    vertical-align: middle;
}

.BulkInsertFields > div
{
    display: inline-block;
}

.BulkInsertDataPanel .Field {
    padding: 1px;
}

.BulkInsertDataPanel .FieldLabel {
    text-align: left;
    display: block !important;
    width: 100% !important;
}

.BulkInsertDataPanel .FieldValue {
    padding: 1px;
    text-align: left;
    display: block !important;
    width: 100% !important;
}

.BulkInsertDataPanel {
    border: solid 1px rgba(127,127,127,0.2);
    background-color: rgba(240, 243, 245, 0.71);
}


/* META  : .Base.Views.View.AddGroupField */
.AddGroupField {
    width: auto !important;
    padding: 0 !important;
    line-height: 0;
    display: block;
    vertical-align: middle;
}.AddGroupField > a {
    font-size: 80%;
    padding: 0.5em 0.5em 0.5em 2em;

}

.AddGroupField a:before
{
    content: "+";
    font-weight: bold;
    line-height: 1.5em;
    font-size: 115%;
}

.AddGroupField:hover {
    opacity: 1.0;
    text-shadow: 0 0 1px;
}

.AddGroupField {
    -webkit-appearance: none !important;
    appearance: none !important;
    opacity: 0.75 !important;
    border: none !important;
    background-color: transparent !important;
    box-shadow: 0 0 0;
}


/* META  : .Base.Views.View.ByFieldsRight */
.View_Matrix .ByFieldsRightItem {
    width: auto;
    vertical-align: bottom;
}

.Cell.ByFieldsRight
{
    width: auto;
    height: auto;
}div.ByFieldsRight .GroupByDir {
    width: 2em;
    flex: 0;
}

div.ByFieldsRight {
    text-align: left;
    vertical-align: bottom !important;
    white-space: nowrap;
    padding: 0;
    display: flex !important;
    flex-direction: row;
}

.ViewBody > div.ByFieldsRight {
    z-index: 9;
}

.UIViewSingle  > .ByFieldsRight {
    display: none !important;
}

.ByFieldsRight img {
    height: 12px !important;
    width: 12px !important;
    opacity: 0.5;
}

.ByFieldsRight > div {
    display: flex;
    flex-direction: row;
    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
}

.PivotTable .ByFieldsRight  {
    position: relative;
}

.PivotTable .TopRight .ByFieldsRight {
    display: inline-flex !important;
}.PivotTable .ByFieldsRight > .ByFieldsRightAdd {
    position: initial;
}

.PivotTable .PivotLeft .ByFieldsRight > div {
    display: block;
}

.ByFieldsRight > div {
    padding: 0 5px 0 0;
}

.ByFieldsRight .Label {
    display: none;
}

.ByFieldsRight .GroupFieldFunction {
    width: 100% !important;
}

.ByFieldsRight select {
    width: auto;
    position: static;
    line-height: 1em;
    padding: 5px;
    padding-left: 14px;
}

.Right.ByFieldsRight {
    text-align: right;
}

.EntityTypeViewTitleBody.ByFieldsRight {
    height: auto;
    white-space: nowrap;
}

.FolderOptions .ByFieldsRight {
    display: inline-block;
    float: left;
}

.Header .Right .ByFieldsRight {
    display: inline-block;
}

.MicroView:hover .ByFieldsRight {
    display: inherit;
    }

.MicroView .ViewBody .ByFieldsRight,
.UIViewMicro .ViewBody .ByFieldsRight
{
    display: none !important;
    font-size: 9px;
}

.ETWMenu .ByFieldsRight
{
    white-space: normal !important;
    display: block !important;
}

.ETWMenu .ByFieldsRight > div
{
    display: block !important;
    text-align: left;
}

.ETWMenu .ByFieldsRight .ItemSelection {
display: block !important;
    text-align: left;
    padding: 0;
    white-space: normal;
    margin: 0 1.5em;
    width: calc(100% - 3em);
}


/* META  : .Base.Views.View.ETWMenu */
.ETWMenu_Closed {
    display: flex;
    flex-direction: row;
}

.ETWMenu .CloseButton {
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 9999;
    font-size: 1.25rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.15s ease;
    opacity: 0.6;
}
.ETWMenu .CloseButton:hover {
    background: rgba(0,0,0,0.06);
    opacity: 1;
}

.ETWMenu_Closed > .EntityTypeViewBody {
    flex: 1;
}

.ETWMenu_Closed > .ETWMenu {
    flex: 0;
}

.ETWMenu_Open {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.ETWMenu_Open > .EntityTypeViewBody {
    flex: 1;
    max-width: 100%;
    width: 100%;
}

.ETWMenu_Open > .ETWMenu {
    flex: initial;
    transform: translateX(0);
}

.ETWMenu_Over > .EntityTypeViewBody > .Center > .PanelHeader > .TopRight > .ViewActions,
.ETWMenu_Open > .EntityTypeViewBody > .Center > .PanelHeader > .TopRight > .ViewActions {
    position: relative;
    z-index: 100;
}

.ETWMenu_Open > .EntityTypeViewBody > .Center > .PanelHeader {
    margin-right: 0 !important;
}

.ETWMenu .GroupFieldFunctionRight {
    display: block;
    text-align: center;
}

.ETWMenu .GroupFieldFunction > input {
    width: 80%;
    margin-left: 1.5em;
}

div.ETWMenuBody > div.ETWBys {
    height: auto;
}

.ETWMenu .InlineHelpText {
    display: block;
    padding: 0.5em 1em !important;
}

.ETWMenu_Open > .ETWMenu, .ETWMenu_Over > .ETWMenu {
    width: 260px !important;
    opacity: 1.0;
}

.ETWMenu > .ToggleMenu {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 1000;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.15s ease;
    opacity: 0.5;
}
.ETWMenu > .ToggleMenu:hover {
    background: rgba(0,0,0,0.06);
    opacity: 0.8;
}

.ETWMenu_Open > .ETWMenu > div, .ETWMenu_Over > .ETWMenu > div {
    display: block;
}

.ETWMenu {
    z-index: 300;
    position: relative;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: var(--backColor);
    border-left: 1px solid rgba(127,127,127,0.12);
    box-shadow: -4px 0 16px rgba(0,0,0,0.06);
}

.ETWMenuBody {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-top: solid 0 rgba(192, 192, 192, 0.5);
    border-bottom: solid 0 rgba(192, 192, 192, 0.5);
    flex: 1;
    padding: 0;
}

.MicroView > .EntityTypeViewBody > .ETWMenu {
    display: none !important;
}

.ETWMenu > div {
    text-align: center;
    display: none;
}

.ETWMenu .GroupFieldFunction {
    display: block;
    width: auto;
    white-space: nowrap;
}

.ETWMenu .GroupFieldFunction .ItemSelectionChoice {
    padding: 0.5em;
    text-align: center;
}

.ETWMenu .ItemSelectionChoice span {
    margin: 2px !important;
    padding: 3px 10px !important;
}

.ETWMenu .ActionPanelHeader {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(48,48,48,0.5);
    padding: 10px 14px 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ETWMenu .ActionPanelHeader:hover {
    background-color: rgba(0,0,0,0.04);
}

.ETWMenu .ActionPanelBody {
    padding: 4px 8px;
}

.ETWMenu .ActionPanel_ViewTypes a {
    border-left: 3px solid transparent;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    border-radius: 0 6px 6px 0;
    padding: 6px 12px;
    margin: 1px 0;
}

.ETWMenu .ActionPanel_ViewTypes a.Selected {
    border-left: 3px solid var(--backColor);
    background-color: rgba(0,120,212,0.06);
    font-weight: 500;
}

.ETWMenu .ActionPanel_ViewTypes a:hover {
    background-color: rgba(0,0,0,0.04);
}

.ETWMenu .ActionPanelButton {
    display: inline-block;
    padding: 6px 12px;
    margin: 2px 4px;
    border-radius: 6px;
    font-size: 12px;
    transition: background 0.15s ease;
}

.ETWMenu .ActionPanelButton:hover {
    background: rgba(0,0,0,0.05);
}

.ETWMenuTop {
    border-bottom: 1px solid rgba(127,127,127,0.1);
    padding: 4px 0;
}

.ETWMenuBottom {
    border-top: 1px solid rgba(127,127,127,0.1);
    padding: 4px 0;
}

.ETWMenu .GroupFieldCompareFunction {
    display: block;
    font-size: 9px !important;
    width: auto !important;
    margin: 0 auto !important;
    padding: 5px 10% !important;
    text-align: right !important;
}


/* META  : .Base.Views.View.ViewActions */
.ViewActions {
    vertical-align: middle;
    display: inline-block;
    border: solid 1px transparent;
    padding: 0;
    z-index: 2;
}

.ViewActions .ToggleMenu {
    border: 0;
    background-color: transparent;
    padding: 4px 8px;
    font-size: 1.6em;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.ViewActions .ToggleMenu:hover {
    border: 0;
    color: orangered;
    background-color: rgba(255,69,0,0.08);
}

.ViewActions img {
    padding: 2px;
    margin: 5px;
}

.ViewActions a {
    padding: 6px 12px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
    font-weight: 400;
}

.ViewActions a:hover {
    background-color: rgba(0,0,0,0.04);
}

.ViewActions a.Selected {
    font-weight: 500;
    background-color: rgba(0,120,212,0.08);
    border-radius: 6px;
}


/* META  : .Base.Views.View.Trash */
.TrashButton {
    position: absolute;
    top: 1px;
right: 50%;
z-index: 1000;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 24px;
vertical-align: middle;
padding: 7px;
}

.TrashButton img
{
    position: relative;
    width: 20px;
    height: 20px;
    display: inline-block;
}

.TrashButton {
    background-color: white;
    box-shadow: 0 0 7px rgba(0,0,0,0.75) !important;
    border-radius: 50%;
    opacity: 1.0;
}


/* META  : .Base.Views.View.Paging */
.Paging {
    vertical-align: middle;
    display: block;
}

.EntityTypeView .Paging {
    opacity: 0.1;
}

.EntityTypeView:hover .Paging {
    opacity: 1;
}

.Center .Paging select {
    text-align: center;
    min-width: 3em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: 1em;
    padding: 8px;
    direction: rtl;
    border: 0;
}

.Paging select {
    width: auto;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
}

.Paging a {
    display: inline-block !important;
    min-width: 20px;
    height: 20px;
    cursor: pointer;
    margin: 0 1px;
    vertical-align: middle;
    box-sizing: content-box;
    padding: 2px;
    border: solid 1px #80808040;
    border-radius: 8px !important;
}

.Paging .FieldHasSelect {
    position: relative;
}

    .Paging a span {
    line-height: 20px;
    vertical-align: middle;
    }

    .Paging a img {
    line-height: 24px;
    top: 2px;
    position: relative;
    }

    .MicroView .Paging .MicroButton {
    display: initial;
}

.Paging a {
    border-radius: 3px;
}
.Paging input {
    width: 5em;
    text-align:center;
}

.Paging a.Selected {
    background-color: rgba(255,255,255,0.5);
    font-weight: bold;
}

.Paging a:hover {
    background: #00a8e6;
    color: #fff;
}


/* META  : .Base.Views.View.Excel */
.ImportExcel {
    text-align: center;
}

.ImportExcel button {
    border-radius: 3px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    text-shadow: 1px 1px #fff;
}

    .ImportExcel button::before {

    content: var(--icon-Import);
    font-family: "361";

    padding-right: 0.5em;
    opacity: 0.5;
    }

.ImportExcel input[type='file'] {
    display: none;
}.ActionPanel_ExcelPanel .importfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

    .ActionPanel_ExcelPanel .importfile + label,
    .ActionPanel_ExcelPanel .ActionPanelButton
    {
    font-size: 1em;
    font-weight: normal;
    border: solid 1px rgb(79,79,81);
    border-radius: 3px;
    }

    .ActionPanel_ExcelPanel .ActionPanelButton {
    margin: 1em;
    display: block;
    }
    .ActionPanel_ExcelPanel .importfile + label:hover {
    background-color: #222222;
    color: white;
    }

.ActionPanel_ExcelPanel {
    display: none;
}

.View_List .ActionPanel_ExcelPanel {
    display: block;
}

.ActionPanel_ExcelPanel .SampleFile {
    display: none;
    padding: 0.5em;
    text-decoration: underline;
}

    .ActionPanel_ExcelPanel .ExportToExcel {
    position: relative;
    padding-left: 2.25em;
    }

    .ActionPanel_ExcelPanel .ImportFromExcel {
    position: relative;
    padding-left: 2.25em;
    }

    .ActionPanel_ExcelPanel .ExportToExcel:before {

    content: var(--icon-Export);
    font-family: "361";

    position: absolute;
    left: 0.5em;
    font-size: 1.25em;
    }

    .ActionPanel_ExcelPanel .ImportFromExcel:before {

    content: var(--icon-Import);
    font-family: "361";

    position: absolute;
    left: 0.5em;
    font-size: 1.25em;
    }


/* META  : .Base.Views.View.InsertRow */
.InsertRow .SaveButton {
    position: absolute;
    left: 10px;
    top: 3px;
    font-size: 150% !important;
    padding: 0 !important;
    display: block !important;
    line-height: 1em !important;
    margin: auto 0;
}

.InsertRow .FirstCol input
{
    margin-left: 20px;
    width: calc(100% - 20px);
}

.InsertRow .StepButton {
    display: none;
}

.InsertRow .FieldDate > *
{
    display: inline-block !important;
}

.InsertRow .FieldIsZero {
    opacity: 1.0;
}

.InsertRow {
    outline: 4px solid #A3A3A3;
    text-transform: none;
    opacity: 1.0 !important;
}

.InsertRow td {
    background-color: #ffffff !important;
}

.InsertRow input, .InsertRow select {
    border-radius: 0;
    border: 0;
    box-shadow: 0 0 0;
    background-color: #ffffff !important;
    opacity: 1.0;
}

.ListQuickInsert .ReadOnly {
    background-color: #F0F0F0 !important;
}

.InsertRow td a {
    color: #222222 !important;
}

.InsertRow .Suffix {
    display: none !important;
}

.InsertRow td {
    padding: 0 !important;
    height: 24px;
}

.InsertRow input,.InsertRow select {
    display: block;
    width: 100%;
    height: 22px !important;
}

    .InsertRow .ItemSelection {
    display: block !important
    }

    .InsertRow .ItemSelection  {
    border-radius: 0;
    border: 0;
    box-shadow: 0 0 0;
    min-width: inherit;
    opacity: 1.0;
    height: 22px;
}

    .InsertRow > .FieldBool > a {
    display: inline-block;
    padding: 3px 6px;
    }

.InsertRow > td > * {
    padding: 3px;
}

.InsertRow .HourPicker {
    width: 3em !important;
    padding: 0;
}

.InsertRow .MinutePicker {
    width: 3em !important;
    padding: 0;
}

.ListQuickInsert .ListHeader
{
    height: 54px !important;
}

.ListQuickInsert .ListBody
{
    top: 55px !important;
}


/* META  : .Base.Views.View.ActionPanel */
.ActionPanel {
    position: relative;
    padding: 1px;
    margin-left: auto;
    margin-right: auto;
}

.ActionPanel.Parameters
{
    padding: 0;
    margin: 0;
    font-size: 80%;
    padding-top: 4px;
    padding-bottom: 4px;
    --inputPadding: 4px 6px;
    --inputRadius: 4px;

}

.ActionPanelBody {
    padding: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    box-sizing: border-box;
    border-top: 1px dotted rgba(127,127,127,0.2);
}

.ActionPanelHeader
{
    display: block;
    text-align: left;
    padding: 1px;
    line-height: 1em;
    padding-left: 6px;
    font-weight: 600;
}

.ActionPanelHeader:after
{
    content: var(--icon-Chevron-Down);
    font-family: "361";
    position: absolute;
    right: 0.5em;
    top: 0.5em;
    opacity: 0.5;
}

.HideActionBody > .ActionPanelHeader:after
{
    transform: rotate(90deg);
}

.ActionPanel_FilterBy .GroupField
{
    margin-bottom: 5px;
}

.ActionPanelHeader span {
    font-size: 1em;
}.ActionPanelBody .GroupFieldParams
{
    text-align: center;
    position: relative;
}

.ActionPanel .OrderByToggle {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0.25em 0;
    border: 0;
}

.ActionPanel_ViewTypes
{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* 2026-06-29 PREMIUM REDESIGN of the view-type picker (SelectionsMenu_ViewTypes).
   The old layout was display:block with two inline-block spans (icon + label) on a 2em
   line-height baseline — icons drifted off the text and long titles wrapped under the icon
   ("icons shifted / text unreadable"). Now every option is a flex ROW: a fixed 24px icon box
   + a single-line ellipsised label, with a calm tinted Selected state (no harsh box-shadow). */
.ActionPanel_ViewTypes .ActionPanelHeader {
    display: none;
}

.SelectionsMenu_ViewTypes .ActionPanel_ViewTypes,
.SelectionsMenu_ViewTypes .ActionPanel_ViewTypes .ActionPanelBody {
    padding: 6px;
    box-sizing: border-box;
}

.ActionPanel_ViewTypes .ActionPanelBody a,
.SelectionsMenu .ActionPanel_ViewTypes .ActionPanelBody a {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    margin: 1px 0;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    text-align: left;
    text-decoration: none;
    color: #1f2937;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* icon box — fixed square, centered; holds an inline SVG or an icon-FONT glyph identically.
   The font-icons (icon-List/icon-Pivot/…) size by font-size, the SVG icons by width/height —
   set BOTH to 20px so every option's icon is the same visual size. */
.ActionPanel_ViewTypes .ActionPanelBody a > .ImageSpan,
.SelectionsMenu .ActionPanel_ViewTypes .ActionPanelBody a > .ImageSpan {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;       /* center the icon-FONT glyph / SVG inside the 24px square box
                                      (was flex-start -> glyph hugged the left edge, looked off-centre) */
    padding: 0;
    margin: 0;
    line-height: 1;
    font-size: 20px;
    color: #64748b;
    text-align: center;
}

.ActionPanel_ViewTypes .ActionPanelBody a > .ImageSpan svg,
.SelectionsMenu .ActionPanel_ViewTypes .ActionPanelBody a span svg {
    width: 20px;
    height: 20px;
    display: block;
}

.ActionPanel_ViewTypes a img {
    flex: 0 0 24px;
    width: 20px;
    height: 20px;
    display: block;
    vertical-align: middle;
}

/* label — fills the row, single line, ellipsis; never wraps under the icon */
.ActionPanel_ViewTypes .ActionPanelBody a .ButtonText,
.SelectionsMenu .ActionPanel_ViewTypes .ActionPanelBody a .ButtonText {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    line-height: 1.25;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ActionPanel_ViewTypes .ActionPanelBody a:hover,
.SelectionsMenu .ActionPanel_ViewTypes .ActionPanelBody a:hover {
    background-color: #f1f5f9;
    border-color: #e2e8f0;
}

.ActionPanel_ViewTypes a.Selected,
.ActionPanel_ViewTypes .ActionPanelBody a.Selected,
.SelectionsMenu .ActionPanel_ViewTypes .ActionPanelBody a.Selected {
    box-shadow: none;
    background-color: #eaf3fc;
    border-color: #bcdcf5;
    color: #0b63a6;
    font-weight: 700;
}

.ActionPanel_ViewTypes .ActionPanelBody a.Selected > .ImageSpan,
.SelectionsMenu .ActionPanel_ViewTypes .ActionPanelBody a.Selected > .ImageSpan {
    color: #0b74c4;
}

.EntityTypeView > .Left {
    position: relative;
}

.EntityTypeView > .Left .ActionPanel_SendItems
{
    position: absolute;
    left: 0;
    bottom: 0;
}

.ActionPanel_SendItems select, select.SendItems {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearenace: none;
    width: 24px;
    height: 24px;
    background-image: url(/images/share.png);
    background-size: 16px 16px;
    background-repeat: no-repeat;
    opacity: 0.5;
    padding: 4px;
    margin: 1px 5px;
}

.EntityTypeView .Left .ActionPanel_SendItems .ActionPanelHeader
{
    display: none;
}

.ActionPanel_View > .ActionPanelHeader
{
    text-align: center;
}

.ActionPanel_View > .ActionPanelBody
{
    padding: 1px;
    text-align: left;
}

.ActionPanel_Data > .ActionPanelHeader
{
    text-align: center;
}

.ActionPanel_Data > .ActionPanelBody
{
    padding: 0;
}

.ETWMenu .ActionPanel {
    padding: 0;
}

.ActionPanel .ByFieldsRightItem.Choices a.ToggleButton {
    padding: 0.5em 0;
}

.ETWMenu .ActionPanelHeader {
    text-align: left;
    padding: 0.75em;
}

.ETWMenu .HideActionBody > .ActionPanelBody {
    display: none !important;
}

.ActionPanelButton {
    padding: 0.5em;
    font-size: 100%;
    display: block;

    margin: 0.25em;
}

.ActionPanelButton:hover {
    transform: scale(1);
}

.ActionPanel_UpdateBy .ActionPanelBody {
    text-align: center;
}

.ETWMenu .ETWMenuBody .ActionPanel {
    background-color: transparent !important;
    border-top: 1px solid rgba(127,127,127,0.2);
    border-bottom: 1px solid rgba(127,127,127,0.2);
}

.ETWMenu .ActionPanelHeader {
    color: #222222;
    background-color: rgba(192, 192, 192, 0);
    text-transform: uppercase;
    font-weight: 555;
    font-size: 95%;
    text-align: left;
}

.ActionPanelButton {

    text-transform: uppercase;
    border-radius: 3px;
    color: rgb(79,79,81);
    background-color: transparent;
    border: solid 1px rgb(79,79,81);
}
    .ActionPanelButton:hover {
    opacity: 1.0;
    background-color: rgb(79,79,81);
    color: white;
    }

.ActionPanel .ByFieldsRightItem.Choices a.ToggleButton {
padding: 0.25em;
    background-color: transparent;
    min-width: 1em;
    font-size: 1.5em;
}

.ActionPanel .ByFieldsRightItem.Choices a.ToggleButton:hover {
    box-shadow: 0 0 0;
    text-shadow: 0 0 1px #303030;
}


/* META  : .Base.Views.View.DisableOverflow */
.DisableOverflow > .EntityTypeViewBody > .Center {
    position: relative;
}
.DisableOverflow.PanelHasHeader > .EntityTypeViewBody > .Center > .Middle {
    display: flex;
}
.DisableOverflow > .EntityTypeViewBody > .Center > .Bottom {
    position: relative;
    width: 100%;
}

.DisableOverflow .Middle {
overflow: initial;
}

.DisableOverflow .Parameters2
{
    position: relative;
}

.DisableOverflow .Parameters4
{
    position: relative;
}

.DisableOverflow > .ETWBody.MinimizeBottom.OpenItemSize_Full, .DisableOverflow > .ETWBody.MinimizeBottom.OpenItemSize_Over {
    top: 0;
    bottom: 100%;
    opacity: 0.0;
    display: none !important;
}

    .DisableOverflow
    {
    position: relative !important;
    height: auto !important;
    z-index: 0;
    }

    .DisableOverflow > .EntityTypeViewBody {
    height: auto;
    min-height: 100%;
    }

    .DisableOverflow > .EntityTypeViewBody > .Center {
    height: auto;
    min-height: 100%;
    }

    .DisableOverflow .Parameters {
    position: relative;
    top: inherit !important;
    }


/* META  : .Base.Views.View.PageByField */
.PageByField::after
{
    content: var(--icon-Chevron-Down);
    font-family: "361";
    position: absolute;
    right: 0.25em;
    bottom: 0.5em;
    pointer-events: none;
}

.PageByField:hover:after, .Field:hover .FieldHasSelect:after {
    opacity: 1.0;
}

.PageByField
{
    margin: 1px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    position: relative;
}

.PageByField > * {
    line-height: 1em;
    padding: 0.5em;
    text-align: left;
}

    .PageByField > select {
    max-width: 10em;
    width: 100%;

    }

    .PageByField.NotEmpty > select {
    max-width: 90%;
    }

.PageByField.Required {
    color: red;
}

.BigPageByPanel .Label {
display: flex;
    font-size: 80%;
    align-items: center;
}


/* META  : .Base.Views.View.ActionButtons */
.MainItemTitle .ActionButtons {
    position: absolute;
    top: 5px;
    right: 15px;
}

.MainItemTitle .ActionButtons button
{
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    border: 0;
    margin: 1px 10px;
    background-repeat: no-repeat;
    background-position: center;
}

.ActionButtons button:hover
{
    box-shadow: 0 0 10px red;
}

.ActionButtons .SignButton {
    z-index: 99;
    color: blue;
    font-weight: bold;
    font-size: 150%;
}

.ActionButtons .DeleteButton .fas {
    font-size: 20px;
}

.FieldValue .ActionButtons {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    display: none;
    z-index: 1000;
}

    .FieldValue .ActionButtons .DeleteButton {
    right: 0;
    bottom: 0;
    top: auto;
    }

    .FieldValue .ActionButtons a {
    padding: 2px;
    font-size: 1.5em;
    bottom: 0 !important;
    top: auto !important;
    }

.FieldValue .ActionButtons a img
{
    width: 20px;
    height: 20px;
    max-height: unset;
}

.ActionButtons > a
{
    opacity: 0.5;
    padding: 0;
}

.ActionButtons > a:hover
{
    opacity: 1;
}

.PreviewField .ActionButtons {
    bottom: 0;
    top: auto;
}


/* META  : .Base.Views.View.GroupBy */
.GroupByBody  {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
justify-content: center;
}

.ItemView .GroupByBody  {
    gap: 0;
    padding: 0;
}

.GroupByTitle > .GroupByAgg {
position: absolute;
    top: 1px;
    right: 1px;
    padding-right: 8px;
    padding-left: 0;
    opacity: 0.5;
}

.ViewBody .GroupByTitle {
    text-align: left;
    position: sticky;
    top: 0;
}

.ViewBody > .LastGroupByBody
{
    display: flex;
    overflow: auto;
-webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.GroupByTabHeader {
    padding: 0;
    gap: 0;
    display: flex;
max-width: 100%;
overflow: auto;
}

    .GroupByTabHeader > div {
    display: inline-block;
    padding: 0;
    cursor: pointer;
    font-size: 110%;
    border: solid 1px rgba(127,127,127,0.2);
    margin: 0;
    box-sizing: border-box;
    }

.GroupByTabHeader > div > div
{
    display: table;
}

    .GroupByTabHeader > div > div > a {
    padding: 1px;
    display: table-cell;
    min-width: 2em;
    height: 3em;
    vertical-align: middle;
    line-height: 1em;
    font-size: 100%;
    text-align: center;
    white-space: normal;
    padding: 1em;
    }

.ETWBody.MinimizeLeft .FolderGroupBy , .ETWBody.MinimizeRight .FolderGroupBy
{
    padding: 0;
    margin: 0;
}

.ViewBody > .GroupByMode_Menu {
    position: relative;
    width: 100%;
    height: 100%;
}

.GroupByRow1 {
    background-color: rgba(222,222,222,0.30);
}

.GroupByRow2 {
    background-color: rgba(222,222,222,0.25);
}

.GroupByRow3 {
    background-color: rgba(222,222,222,0.20);
}

.GroupByRow4 {
    background-color: rgba(222,222,222,0.15);
}

.GroupByRow5 {
    background-color: rgba(222,222,222,0.1);
}

.GroupByTabHeader .Selected {
    box-shadow: 0 0 5px silver;
    background-color: rgba(255,255,255,0.7) !important;
}


/* META  : .Base.Views.View.FieldLabels */
.Parameters.FieldLabels {
    background-color: white;
}

.ParameterSet.FieldLabels {
    background-color: white;
}

.FieldLabels .Text {
    width: 100%;
    border: solid 1px rgba(127,127,127,0.2);
    border-right: 0;
    align-items: center;
}

    .FieldLabels .Text:last-child {
    border-right: solid 1px rgba(127,127,127,0.2);
    }

.Parameters.FieldLabels, .FieldLabels .Parameters {
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border: solid 1px rgba(127,127,127,0.2);
    border-bottom: 0;
    overflow-y: auto;
}

.EntityTypeView.FieldLabels .ItemView {
    padding: 0;
    box-shadow: 0 0 0;
    display: block;
    border-bottom-width: 0;
}

    .EntityTypeView.FieldLabels .ItemView:last-child {
    border-bottom-width: 1px;
    }

    .EntityTypeView.FieldLabels .ItemView:hover {
    border-color: orange;
    }

    .EntityTypeView.FieldLabels .ItemView:hover + .ItemView {
    border-top-color: orange;
    }

    .EntityTypeView.FieldLabels .ItemView .Field {
    border: solid 1px rgba(127,127,127,0.2);
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
    }

    .EntityTypeView.FieldLabels .ItemView .Field.Mode_Edit.LabelHidden {
    padding: 0;
    border: 0;
    }

    .EntityTypeView.FieldLabels .ItemView .Field.Mode_Edit.LabelHidden .FieldValue {
    padding: 0 !important;
    margin: 0 !important;
    }

    .EntityTypeView.FieldLabels .ItemView .Field.Mode_Edit.LabelHidden .FieldValue input {
    border-radius: 0;
    }

    .EntityTypeView.FieldLabels .ItemView .Field.Mode_Edit.LabelHidden .FieldValue .ItemSelection {
    border-radius: 0;
    }

.Mobile .EntityTypeView.FieldLabels .ItemView .Field .FieldValue {
    padding: 5px !important;
}


/* META  : .Base.Views.View.SelectedItem */
.SelectedItem {
    z-index: 10;
}

.ItemView.SelectedItem {
    position: relative;
}

.ItemView.SelectedItem:after {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content : " ";
    background-color: rgba(var(--primaryRGB, 0,120,212), 0.12);
    border: solid 1px rgba(var(--primaryRGB, 0,120,212), 0.3);
    pointer-events: none;
}

.ListBody tbody > tr.SelectedItem {
    background-color: rgba(var(--primaryRGB, 0,120,212), 0.10) !important;
    outline: 1px solid rgba(var(--primaryRGB, 0,120,212), 0.25);
    outline-offset: -1px;
}

.SelectedItem .HideOnSelected
{
    display: none !important;
}

.SelectedItem .HideOnSelectedEdit.Mode_Edit
{
    display: none !important;
}

.SelectedItem .ShowOnSelected
{
    display: inherit;
}

.ShowOnSelected {
    display: none;
}


/* META  : .Base.Views.View.ItemsTable */
.ItemsTable {
    width: 100%;
}.ItemsTable caption
{
    padding: 5px;
    text-align: left;
    padding-left: 20px;
    font-size: 13px;
}

.ItemsTable thead td {
    vertical-align: bottom;
}

.ItemsTable td
{
    text-align: left;
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ItemsTable .ItemValue {
    text-align: right;
    width: 8em;
}

.ItemsTable caption {
    color: #222222;
    font-weight: bold;
    background-color: rgba(0,0,0,0.08);
}

.ItemsTable tr:hover {
    background-color: rgba(0,255,0,0.5);
}


/* META  : .Base.Views.View.MicroView */
.MicroView {
    width: 100%;
    height: 100%;
    max-height: unset;
    min-height: unset;
    padding: 0;
    box-sizing: border-box;
    }

    .Mobile .MicroView
    {
    padding: 0;
    }

    .MicroView > .EntityTypeView:hover {
    z-index: 1000;
    }

    .MicroView .MicroView {
    margin: 0;
    }

.MicroView .CurrentViewType {
    display: none !important;
    }

.MicroView:hover > .EntityTypeView > tr > td > div > .ViewBody > select {
    display: inline-block !important;
    }

.MicroView select {
    line-height: normal !important;
    height: auto !important;
}

    .MicroView .BrowseItem {
    margin: 0;
    }

    .MicroView .FieldSet {
    text-align: center;
    }.MicroView .Middle {
    border: 0;
}

.MicroView .EntityTypeViewTitle {
    white-space: normal;
    line-height: 1em;
    margin: 1px;
}

.MicroView {
    background-color: transparent;
    box-shadow: 0 0 0 !important;
}

    .MicroView > .EntityTypeView {
    background-color: white;
    border: solid 1px rgba(127,127,127,0.2);
    }

.MicroView > .EntityTypeView:hover {
    box-shadow: 0 0 12px #222222 !important;
}

.MicroView .ViewBody {
    box-shadow: 0 0 0;
}

.MicroView.View_Metrics .ViewBody,
.UIViewMicro.View_Metrics .ViewBody {
    background-color: transparent;
}


/* META  : .Base.Views.View.Actions */
.Actions a, .DataActions a, .ViewActions a, .Top a {
    padding: 0.7em 1em;
    margin: 0;
    border-radius: 0;
    vertical-align: middle;
    display: inline-block;
    display: flex;
min-width: 48px;
text-align: center;
justify-content: center;
}

.TopLeft .Actions a {
    background-color: #009ef7 !important;
    color: #ffffff !important;
}

.Actions a img
{
    width: 16px;
    height: 16px;
    margin: 1px 5px;
}

.Actions a:hover
{
    opacity: 1.0;
    box-shadow: 0 0 5px #222222;
}

.Actions > a > span {
    margin: 1px;
    padding: 1px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.View_Chart .TopLeft .Actions,
.View_Metrics .TopLeft .Actions,
.View_Matrix .TopLeft .Actions {
    display: none !important;
}

.List_Actions > a, .List_Action {
    padding: 10px;
}

.List_Actions a:hover {
    color: orangered;
}


/* META  : .Base.Views.View.NoRecordsFound */
.NoRecordsFound {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
    padding: 1.25em;
    vertical-align: middle;
    text-align: center;
    white-space: normal;
    letter-spacing: 0.5px;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 120px;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.NoRecordsFound:before {
    content: '!';
    border-radius: 5em;
    background-color: black;
    color: white;
    opacity: 0.25;
    padding-left: 0.5em;
    padding-right: 0.5em;
    text-align: center;
    margin-right: 0.5em;
}

.DisableOverflow .NoRecordsFound, .UIViewSingle > .NoRecordsFound, .UIViewMicro > .NoRecordsFound {
    position: relative;
}


/* META  : .Base.Views.View.EntityTypeView */
.EntityTypeView > .EntityTypeViewBody  {
    flex-grow: 1;
    max-width: 100%;
}

.EntityTypeView {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;
display: flex;
    display: -webkit-flex;
flex: 1;
flex-direction: row;
    contain: layout;

}.EntityTypeViewBody {

    box-sizing: border-box;
    vertical-align: top;
    position: relative;
    display: block;
    min-height: 100%;
    height: auto;
    flex: 1;
flex-direction: column;
justify-content: flex-start;
    contain: layout;

}

.ItemView .EntityTypeViewBody {
    border: 0;
}

.EntityTypeViewBody .EntityTypeViewBody {
    background-color: transparent;
}

.DisableOverflow > .EntityTypeViewBody,
.ViewBody.EntityTypeViewBody, .UIViewMicro > .EntityTypeViewBody
{
    min-height: initial;
    height: auto;
}

.EntityTypeViewBody > * {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
}

.EntityTypeViewBody > .ItemView {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
}

.EntityTypeViewBody > .GroupByMode_Open
{
    flex-direction: column;
    width: 100%;

}.EntityTypeViewBody > .Center {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    height: 100%;
    gap: 0 !important;
    flex: 1;
}.EntityTypeViewBody > .Center > .Middle {
    flex: 1;
    width: 100%;
    display: block;
    height: auto;
}

/* EntityTypeView ViewBody absolute min-height contract (DisableOverflow != True durumunda min-height'in calismasi)
   2026-09-14 MEKANIZMA DUZELTILDI (kullanici karari; AGENTS.md "EntityTypeView Min-Height Yayilim Sozlesmesi"):
   yukseklik YALNIZ ETV'de yasar. Onceki `min-height: inherit` Body/Center/.Middle halkalarinda ETV'nin TUM
   min-height'ini tekrar aliyordu; Center baslik (Top) ve alt cubugu (Bottom) da icerdigi icin baslik iki kez
   sayiliyor, grafik/liste ETV'si kartindan +13..+67px tasip alttaki karta biniyordu (olculdu: PayrollHome,
   AgingAnalysis). Simdi halkalar min-height:0, .Middle flex-grow ile Top/Bottom'dan kalani doldurur; mutlak
   .ETWBody `inherit` ile 0 alir ve Middle'i inset:0 doldurur (A/B: PayrollHome 5->0, kontrol grubu degismedi).
   Rapor: .claude/reports/etv-kalite-2026-09-14/ */
.EntityTypeView:not(.DisableOverflow) {
    position: relative;
}
.EntityTypeView:not(.DisableOverflow) > .EntityTypeViewBody,
.EntityTypeView:not(.DisableOverflow) > .EntityTypeViewBody > .Center {
    position: relative;
    height: 100%;
    min-height: 0 !important;
}
.EntityTypeView:not(.DisableOverflow) > .EntityTypeViewBody > .Center > .Middle {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
.EntityTypeView:not(.DisableOverflow) .ETWBody,
.EntityTypeView:not(.DisableOverflow) .MiddleCenter {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: inherit !important;
}
.EntityTypeView:not(.DisableOverflow) .ListAll {
    height: 100% !important;
    min-height: inherit !important;
}
.EntityTypeView:not(.DisableOverflow) .ListBody {
    height: 100% !important;
    flex: 1 1 auto !important;
}

/* 2026-09-14 — KART GORUNUMU (ItemView) GOVDESI AKIS ICINDE. Mutlak govde kartlari ETV min-height'ina hapsediyordu:
   OLCULDU (PayrollHome) govde 404px / icerik 438px -> 34px ic scroll dogdu. Kartlar icerik kadar buyur (A/B: 534px, govde = icerik). */
.Content .EntityTypeView[class*="View_ItemView"]:not(.DisableOverflow) > .EntityTypeViewBody > .Center > .Middle > .ETWBody {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
}
.Content .EntityTypeView[class*="View_ItemView"]:not(.DisableOverflow) > .EntityTypeViewBody > .Center > .Middle {
    height: auto !important;
}

/* 2026-09-14 — ETV KABINDAN GENIS OLAMAZ. Flex ogesinin `min-width:auto` varsayilani genis tabloyu kabin disina itiyordu
   (OLCULDU: TransportHome 1633px liste sag raya +97px). Tablo artik kendi icinde kayar. */
.EntityTypeView,
.EntityTypeView > .EntityTypeViewBody,
.EntityTypeView > .EntityTypeViewBody > .Center,
.EntityTypeView > .EntityTypeViewBody > .Center > .Middle {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* 2026-09-14 — LISTE ALT CUBUGU. Meta `.Bottom .Left,.Bottom .Right{width:15%}` + `.Bottom .Center{width:70%}` inline-block
   caginin yuzde sutunlari: bos sayfalayici 463px yer tutuyor, durum cipi 99px'e (mobil 36-47px) kirpiliyordu ("Olay Tari...").
   ETV'nin DOGRUDAN alt cubugunda sutunlar icerik-tabanli flex; dar ekranda satir sarilir (A/B: TransportHome 2->0). */
.EntityTypeView > .EntityTypeViewBody > .Center > .Bottom {
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 4px;
}
.EntityTypeView > .EntityTypeViewBody > .Center > .Bottom > .Left,
.EntityTypeView > .EntityTypeViewBody > .Center > .Bottom > .Right {
    width: auto;
    flex: 0 1 auto;
    max-width: 100%;
}
.EntityTypeView > .EntityTypeViewBody > .Center > .Bottom > .Center {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}


.EntityTypeView.FullView {
    width: auto !important;
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    min-height: 360px !important;
    z-index: 10000 !important;
    border: 0 0 25px  rgba(66,66,66,0.6) !important;
    box-sizing: border-box;
    margin: 10px;
}

.EntityTypeView.FullView > .EntityTypeView {

    min-height: 360px !important;
    box-sizing: border-box;
}.EntityTypeView tr td.Center {
    vertical-align: top;
    text-align: center;
    position: relative;
    width: auto;
}.EntityTypeView tr td.Left {
    text-align: left;
    vertical-align: top;
    width: 0;
    overflow: auto;
-webkit-overflow-scrolling: touch;
}

.EntityTypeView .EntityTypeView {
    box-shadow: 0 0 0;
}

.EntityTypeView tr td.Right {
    text-align: right;
    vertical-align: top;
    width: 0;
}


/* META  : .Base.Views.View.EntityTypeView.QuickForm */
.EntityTypeViewBody .QuickForm
{
    display: flex;
    flex-direction: row;
    border-top: var(--border1);
    border-bottom: var(--border1);

}

.EntityTypeViewBody .QuickForm > .QuickFormAdd
{
    flex: 0;
    min-width: 3em;
    max-width: 3em;
    display: flex;
    align-content: center;
    justify-content: center;
    border-left: var(--border1);
}

.EntityTypeViewBody .QuickForm > .QuickFormAdd > .ImageClass
{
    font-size: 2em;
}

.EntityTypeViewBody .QuickForm > .Fields
{
    flex:1;
    max-width: calc(100% - 3em);
}


/* META  : .Base.Views.View.EntityTypeView.ItemsTitles */
.ItemsTitles {
    display: flex;
    flex-wrap: nowrap;
--labelcolor: #78909C;
font-size: 90%;
color: var(--labelColor);
border-top: var(--border1);
padding-top: 4px;
padding-bottom: 4px;
}

.ItemsTitles .Field,
.ItemsTitles .FieldView,
.ItemsTitles .Text,
.ItemsTitles .SiteMapTitle
{
    padding-left: 1px;
    padding-right: 1px;
display: flex;
justify-content: center;
flex-direction: column;
align-content: center;
line-height: 1em;
white-space: break-spaces;
width: 100%;
padding: 1px;
position: relative !important;
    color: var(--labelColor);
padding: var(--fieldPadding);
height: auto !important;
text-align: left;
padding-top: 1px;
padding-bottom: 1px;
}

.ItemsTitles .FieldSet {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
height: auto !important;
}

.ItemsTitles .DirectionVer {
    gap: 0 !important;
    height: auto;
}

.ItemsTitles .SiteMapTitle
{
    flex: 0 0 25%;
    padding-left: 3em;
    text-align: left;
}

.ItemsTitles .Field_Number,
.ItemsTitles .Field_Money,
.ItemsTitles .Field_Integer
{
    text-align: right;
    padding-right: 1em;
}


/* META  : .Base.Views.View.ETWTools */
.ETWTools > * {
    padding: 5px;
    opacity: 0.5;
}

.ETWTools > *:hover {
    opacity: 1.0;
}

.ETWTools img {
    height: 12px;
}

.ETWTools > a > *{
    display: block;
    width: auto;
    text-align: center;
    margin: auto;
}


/* META  : .Base.Views.View.ETWTop */
.ETWTop {
    opacity: 1.0;
    top: 0;
    bottom: 100%;
    left: 0;
    right: 0;
}

.ETWTop.Activate.OpenItemSize_Full, .ETWTop.Activate.OpenItemSize_Over {
    top: 0;
    bottom: 0;
    opacity: 1.0;
    position: absolute;
    left: 0;
    right: 0;
}

.ETWTop.Activate
{
    top: 0;
    bottom: 50%;
    opacity: 1.0;
    position: absolute;
    left: 0;
    right: 0;
}


/* META  : .Base.Views.View.ETWLeft */
.ETWLeft {
    position: absolute;
    left: 0;
    right: 100%;
    top: 0;
    bottom: 0;
    opacity: 0;
}

    .ETWLeft.Activate {
    left: 0;
    right: 50%;
    opacity: 1.0;
    }

.ETWLeft.Activate.OpenItemSize_Full, .ETWLeft.Activate.OpenItemSize_Over {
    left: 0;
    right: 0;
    opacity: 1.0;
}


/* META  : .Base.Views.View.ETWRight */
.ETWRight {
    position: absolute;
    left: 100%;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
}

.ETWRight.Activate
{
    left: 50%;
    right: 0;
    opacity: 1.0;
}

.ETWRight.Activate.OpenItemSize_Full, .ETWRight.Activate.OpenItemSize_Over {
    left: 0;
    right: 0;
    opacity: 1.0;
}

.OpenItemSize_Small.ETWRight .ItemSubmit img
{
    width: 16px;
    height: 16px;
    margin: 0;
}


/* META  : .Base.Views.View.Gantt */
.GanttItem {
    position: absolute;
    border: solid 1px rgba(127,127,127,0.2);
}



/* META  : .Base.Views.View.ETWBottom */
.ETWBottom {
flex: 0;
}

.ETWBottom.Activate
{
flex: 1;
display: flex !important;

}

.ETWBottom.Activate.OpenItemSize_Full, .ETWBottom.Activate.OpenItemSize_Over {
    top: 0;
    bottom: 0;
    opacity: 1.0;
}


/* META  : .Base.Views.View.ETWBody */
.ETWBody.MinimizeLeft {
    left: 100%;
    right: 0;
    width: 50%;
    margin-left: -50%;
    top: 40px;
    bottom: 0;
    height: auto;
    }

.ETWBody.MinimizeLeft.OpenItemSize_Full, .ETWBody.MinimizeLeft.OpenItemSize_Over {
    width: 0;
    margin-left: 0;
}

.ETWBody.MinimizeRight.OpenItemSize_Full, .ETWBody.MinimizeRight.OpenItemSize_Over {
    width: 0;
    margin-right: 0;
}

.ETWBody.MinimizeBottom.OpenItemSize_Full, .ETWBody.MinimizeBottom.OpenItemSize_Over {
    top: 0;
    bottom: 100%;
    opacity: 0.0;
}

.ETWBody.MinimizeTop.OpenItemSize_Full, .ETWBody.MinimizeTop.OpenItemSize_Over {
    top: auto;
    bottom: 0;
    margin-right: 0;
    opacity: 0.0;
    height: 0 !important;
}

.Mobile .ETWBody.MinimizeTop.OpenItemSize_Full, .ETWBody.MinimizeTop.OpenItemSize_Over {
    display: none !important;
}

.ETWBody.MinimizeBottom
{
    top: 0;
    bottom: 50%;
    opacity: 1.0;
    position: absolute;
    left: 0;
    right: 0;
}

.ETWBody.MinimizeTop
{
    top: 50%;
    bottom: 0;
    opacity: 1.0;
    padding: 0;
    white-space: nowrap !important;
    height: 50%;
}

.ETWBody.MinimizeRight
{
    left: 0;
    right: 100%;
    width: 50%;
    margin-right: -50%;
    padding: 0;
}

.ETWBody.MinimizeBottom
{
    top: 0;
    bottom: 50%;
    padding: 0;
}

.ETWBody.MinimizeLeft > .ViewBody,
.ETWBody.MinimizeRight > .ViewBody
{
    padding: 32px 1px;
}

.ETWBody.MinimizeLeft .ItemView,
.ETWBody.MinimizeRight .ItemView {
    margin: 1px !important;
    padding: 1px !important;
    display: block;
    width: auto;
}

    .ETWBody.MinimizeLeft .ItemView .FieldValue, .ETWBody.MinimizeRight .ItemView .FieldValue {
    padding: 1px !important;
    }

.ETWBody.MinimizeLeft  .CardDetail {
    overflow: hidden;
    max-height: 0;
}

.ETWBody.MinimizeRight  .CardDetail {
    overflow: hidden;
    max-height: 0;
}

.ETWBody.MinimizeLeft .ItemView,
.ETWBody.MinimizeRight .ItemView {
    background-color: transparent;
}


/* META  : .Base.Views.View.ETWBody_VeryBig */
.ETWBody.MinimizeLeft.OpenItemSize_VeryBig {
    width: 200px;
    margin-left: -200px;
    border: solid 1px #e4e4e4;
}

.ETWBody.MinimizeRight.OpenItemSize_VeryBig {
    width: 200px;
    margin-right: -200px;
    border: solid 1px #e4e4e4;
}

.ETWRight.Activate.OpenItemSize_VeryBig
{
    left: 200px;
    right: 0;
    opacity: 1.0;
}

.ETWBottom.Activate.OpenItemSize_VeryBig {
    top: 50px;
    bottom: 0;
    opacity: 1.0;
    border: solid 1px #e4e4e4;
}

.ETWBody.MinimizeBottom.OpenItemSize_VeryBig {
    top: 0;
    bottom: 100% !important;
    opacity: 1.0;
    position: absolute;
    left: 0;
    right: 0;
    margin-bottom: -50px;
    border: solid 1px #e4e4e4;
}

.ETWBody.MinimizeTop.OpenItemSize_VeryBig {
    top: 0;
    bottom: 0;
    margin-top: 0;
    opacity: 1.0;
    border: solid 0 #e4e4e4;
    height: auto;
}

.ActivateItem_VeryBig > .EntityTypeViewBody > .Center > .Middle {
    flex: initial;
    min-height: 5em;
}

.ETWTop.Activate.OpenItemSize_VeryBig {
    top: 0;
    bottom: 0;
    opacity: 1.0;
    position: relative;
    left: 0;
    right: 0;
    border: solid 1px #e4e4e4;
    flex: 1;
}

.ETWLeft.Activate.OpenItemSize_VeryBig
{
    left: 0;
    right: 200px;
    opacity: 1.0;
}


/* META  : .Base.Views.View.ETWBody_Big */
.ETWBody.MinimizeLeft.OpenItemSize_Big
{
    width: 320px;
    margin-left: -320px;
}

.ETWBody.MinimizeRight.OpenItemSize_Big
{
    width: 320px;
    margin-right: -320px;
}

.ETWLeft.Activate.OpenItemSize_Big
{
    left: 0;
    right: 320px;
    opacity: 1.0;
}

.ETWRight.Activate.OpenItemSize_Big
{
    left: 320px;
    right: 0;
    opacity: 1.0;
}

.ETWBottom.Activate.OpenItemSize_Big
{
    top: 150px;
    bottom: 0;
    opacity: 1.0;
}

.ETWBody.MinimizeBottom.OpenItemSize_Big
{
    top: 0;
    bottom: 100% !important;
    opacity: 1.0;
    position: absolute;
    left: 0;
    right: 0;
    margin-bottom: -150px;
}

.ETWBody.MinimizeTop.OpenItemSize_Big
{
    top: 100%;
    bottom: 0;
    margin-top: -150px;
    opacity: 1.0;
    height: 150px;
}

.ETWTop.Activate.OpenItemSize_Big
{
    top: 0;
    bottom: 150px;
    opacity: 1.0;
    position: absolute;
    left: 0;
    right: 0;
}

.ETWLeft.Activate.OpenItemSize_Big {
    left: 0 !important;
    right: 160px !important;
    opacity: 1.0 !important;
    }


/* META  : .Base.Views.View.ETWBody_Small */
.ETWBody.MinimizeLeft.OpenItemSize_Small
{
    right: 0;
    left: 320px;
    margin: 0;
}

.ETWBody.MinimizeRight.OpenItemSize_Small
{
    right: 320px;
    left: 0;
    margin: 0;
}

.ETWBottom.Activate.OpenItemSize_Small
{
    top: 100%;
    bottom: 0;
    opacity: 1.0;
    margin-top: -150px;
}

.ETWRight.Activate.OpenItemSize_Small
{
    width: 320px;
    right: 0;
    left: 100%;
    margin-left: -320px;
    opacity: 1.0;
}

.ETWLeft.Activate.OpenItemSize_Small
{
    left: 0;
    width: 320px;
    right: 0;
    opacity: 1.0;
}

.ETWBody.MinimizeBottom.OpenItemSize_Small
{
    top: 0;
    bottom: 150px;
    opacity: 1.0;
    position: absolute;
    left: 0;
    right: 0;
}

.ETWBody.MinimizeTop.OpenItemSize_Small
{
    top: 150px;
    bottom: 0;
    opacity: 1.0;
}

.ETWTop.Activate.OpenItemSize_Small
{
    top: 0;
    height: 150px;
    opacity: 1.0;
    position: absolute;
    left: 0;
    right: 0;
}


/* META  : .Base.Views.Print2PDF */
.Print2PDF {
    max-width: 100% !important;
}

    .Print2PDF .FieldValue::after
    {
    display: none !important;
    }

    .Print2PDF .SingleItem {
    max-width: 100% !important;
    }

.Print2PDF div.EntityTypeView, .Print2PDF div.EntityTypeViewBody {
    height: auto !important;
    max-width: 90%;
    margin: 0 auto !important;
    padding: 0 !important;
}


/* META  : .Base.Views.EntityTypeLists */
.EntityTypeLists {
    -webkit-overflow-scrolling: touch;
    display: flex;
    align-items: center;
}

.EntityTypeLists > a {
    position: relative;
}

.EntityTypeLists .ButtonText {
font-size: 1em;
padding: 4px;
height: 3em;
justify-content: center;
display: flex;
align-content: center;
flex-direction: column;

}

.SelectionsMenu .EntityTypeLists  {
    display: block !important;
    flex-direction: column !important;
}

.SelectionsMenu .EntityTypeLists > a {
    display: block !important;
    flex: 1;
}

.SelectionsMenu .EntityTypeLists .ButtonText {
align-content: center;
justify-content: flex-start;
flex-direction: row;
height: 2em;
}

.Center > .EntityTypeLists
,.TopCenter > .EntityTypeLists
{
    justify-content: center;
    flex-wrap: wrap;
    gap: 1px;
}

.Center > .EntityTypeLists > a
,.TopCenter > .EntityTypeLists > a
{
    border: var(--border1);
    flex:1;
    min-width: 5em;
    max-width: 14em;
    position: relative;
}

.EntityTypeLists .Aggregate
{
position: absolute;
top: 1px;
right: 1px;
left: auto;
}

.Center > .EntityTypeLists > a .Aggregate
,.TopCenter > .EntityTypeLists > a .Aggregate
{
    left: 50%;
    right: auto;
    top: -1em;
    background-color: var(--white);
    color: var(--textColor);
    border-radius: 1em;
    border: unset;
    margin: auto;
    transform: translateX(-50%);
    text-align: center;
    min-width: 2.5em;
    justify-content: center;
}
.Center > .EntityTypeLists > a:hover
,.TopCenter > .EntityTypeLists > a:hover
{
    background-color: #8eff8e !important;
    color: var(--textColor) !important;
}
.Center > .EntityTypeLists > a:hover .Aggregate
,.TopCenter > .EntityTypeLists > a:hover .Aggregate
{
    background-color: inherit;
    color: inherit;
}

.Center > .EntityTypeLists > a .Aggregate > .AggregateValue::after
,.TopCenter > .EntityTypeLists > a .Aggregate > .AggregateValue::after
{
    content : none;
}

.Center > .EntityTypeLists > a.Selected
,.TopCenter > .EntityTypeLists > a.Selected
{
    box-shadow: 0 0 1px gray;
    background-color: #009ef7 !important;
    color: var(--white)!important;
}

.TopRight > .EntityTypeLists {
    padding: 3px 16px;
    display: flex;
    align-items: center;
    height: 100%;
}

.EntityTypeLists > a {
    height: auto !important;
    display: block;
}

.EntityTypeLists select {
    height: auto;
    padding: 4px;
    border-radius: 24px;
}


/* META  : .Base.Views.OpenItemSize */
.OpenItemSize_Small .Field {
    padding: 1px;
}

.OpenItemSize_Small .FieldLabel {
    width: 30%;
}

.OpenItemSize_Small .FieldValue {
    width: 70%;
}


/* META  : .Base.Views.UpdateBy */
.UpdateByCount {
    width: 6em;
    margin: 0 auto;
    text-align: center;
    display: block;
}


/* META  : .Base.Views.OrderBy */
.OrderByToggle   > div
{
    display: none;
}


/* META  : .Base.Views.BrowseFilterPanel */
.BrowseFilterPanel .ActionPanel_FilterBy .GroupField {
    margin-right: 5px !important;
    margin-left: 5px !important;
    margin-bottom: 4px;
    margin-top: 4px;
}

.BrowseFilterPanel .ActionPanel_FilterBy .ActionPanelBody div
{
    white-space: nowrap !important;
    width: auto !important;
    display: inline-block;
    padding: 0 !important;
}

.BrowseFilterPanel .ActionPanel_FilterBy select,
.BrowseFilterPanel .ActionPanel_FilterBy input
{
    white-space: nowrap !important;
    display: inline-block;
    margin: 0 !important;
    width: auto;
    vertical-align: top;
}

.BrowseFilterPanel .ActionPanel_FilterBy input
{
    width: 8em !important;
}

.BrowseFilterPanel .ActionPanel_FilterBy .ActionPanelHeader {
    display: none !important;
}

.DisableOverflow > .EntityTypeViewBody > .Center > .BrowseFilterPanel {
    position: relative;
    top: 0 !important;
    bottom: 0 !important;
}

.BrowseFilterPanel.PageByPanel
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
}.BrowseFilterPanel .ActionPanel_FilterBy {
    width: auto;
    text-align: center;
    padding: 0;
    margin: 0;
}


/* META  : .Base.Views.MinimizeLeft */
.MinimizeLeft.OpenItemSize_VeryBig > .FolderItemText , .MinimizeRight.OpenItemSize_VeryBig > .FolderItemText
{
    width: 280px;
    padding: 3px;
}

.MinimizeLeft.OpenItemSize_VeryBig > .FolderItemText > .FolderTitle, .MinimizeRight.OpenItemSize_VeryBig > .FolderItemText > .FolderTitle
{
    width: 280px;
    padding: 3px;
    height: 1em;
}

.MinimizeLeft.OpenItemSize_Big > .FolderItemText , .MinimizeRight.OpenItemSize_Big > .FolderItemText
{
    width: 280px;
    padding: 3px;
}

.MinimizeLeft.OpenItemSize_Big > .FolderItemText > .FolderTitle, .MinimizeRight.OpenItemSize_Big > .FolderItemText > .FolderTitle
{
    width: 280px;
    padding: 3px;
    height: auto;
}


/* META  : .Base.Views.ViewType */
.ViewTypes
{
    padding: 2px 10px;
}

.CurrentViewType img,
.CurrentView img
{
    height: 16px;
    width: 16px;
    display: inline-block;
    vertical-align: middle;
    opacity: 0.5;
}

.CurrentViewType span {
    padding: 1px 3px;
}

.CurrentViewType .ImageSpan  {
    max-height: 16px !important;
    max-width: 16px;
}

.CurrentViewType .ImageSpan  svg {
    max-height: 16px !important;
    max-width: 16px;
}

.CurrentViewType,
.CurrentView {
    margin: 1px 0.5em 1px 1em;
    padding: 0.5em;
    width: 78%;
    text-align: left;
    display: flex;
}

.ViewBody {

}

.ViewBody.DisableOverflow
{
    min-height: 3em;
}


/* META  : .Base.Views.ViewType.Calendar */
.CalendarBody {
    height: calc(100% - 2.5em);
    min-height: 200px;
}

.ViewBody_Calendar .Header > .Left,
.ViewBody_Calendar .Header > .Right
{
    width: 40%;
}

.ViewBody_Calendar .Header > .Center
{
    width: 20%;
}

.CalendarBody > table {
    width: 100%;
    height: 100%;
}.CalendarBody .DayNames td {
    position: relative;
}

.CalendarBody .DayOfMonth {
    position: absolute;
    left: 0;
    top: 0;
    background-color: transparent;
    height: 100%;
    display: flex !important;
    vertical-align: middle;
    width: 2em;
    align-content: center;
    justify-content: center;
    align-items: center;
    border: solid 1px rgba(192,192,192,0.5);
}

.CalendarBody > table td {
    vertical-align: top;
}

.DayOfWeekName
{
    overflow: hidden;
}

.ViewBody_Calendar {
    overflow: hidden;
}

.ViewBody_Calendar > .Header > .Left > .ByFieldsRight {
    display: flex !important;
    flex-direction: row !important;
}

.ViewBody_Calendar > .Header .ByFieldsRight .GroupFieldFunction
{
    display: flex;
    flex-direction: row;
}

.ViewBody_Calendar > .Header > .Right > .ByFieldsRight {
    float: left;
}

.CalendarBody > table > .AllDays > td {
    border-bottom: solid 1px rgba(127,127,127,0.2);
}

.CalendarItem {
    position: relative;
    cursor: pointer;
    padding: 0.5em;
    margin: 0;
    border-bottom: solid 1px rgba(127,127,127,0.2);
}

.CalendarItem:first-child {
    border-top: solid 1px rgba(127,127,127,0.2);
}

.CalendarItem:hover
{
    z-index: 99;
}
.CalendarItemHour
{
position: absolute;
    left: 0;
    top: 0;
    width: 2.3em;
    padding: 3px 1px;
    font-weight: 200;
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.CalendarItemTitle
{
    padding-left: 2.5em;
    text-align: left;
    width: 100%;
    font-weight: 500;
}

.CalendarBody {
    background-color: white;
    border: solid 1px rgba(127,127,127,0.2);
}

.DateModes, .HourModes{
    display: inline-block;
    padding: 0;
    margin: 0;
}

.HourModes {
    margin-left: 1em;
    margin-right: 1em;
}

.DateModes a, .HourModes a {
    padding: 0.5em 0.5em;
    min-width: 3em;
    text-align: center;
}

.HourModes a {
    min-width: 1em;
}

.DateTitle {
    width: 10em;
}

.DateDisplay {
    white-space: nowrap;
    padding: 0.5em;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.DateDisplay .fas {
    font-size: 140%;
    vertical-align: middle;
    display: inline-block;

}
.DateDisplay > *
{
    display: inline-block;
    font-size: 125%;
}

.DateModes {
    background-color: white;
    border-radius: 3px;
}

.DateModes .Selected {
box-shadow: 0 0 3px #656565;
}



/* META  : .Base.Views.ViewType.Day */
.DayNames {
    font-size: 75%;
}

.DayNames td {
    text-align: center !important;
    vertical-align: middle !important;
}

.AllDayBody
{
    max-height: 30vh;
    overflow: auto;
}

.HourBlock
{
    position: absolute;
    left: 0;
    right: 0;
    border-top: solid 1px rgba(192, 192, 192, 0.32);
}

.AllDays > td
{
    border: solid 1px rgba(192, 192, 192, 0.32);
}

.HourBlock > span {
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0.5;
}
.DayNames > td
{
    height: 2em;
}

.DayBody {
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}

td:last-child > .DayBody {
-ms-overflow-style: initial;
scrollbar-width: initial;
}

td:last-child > .DayBody::-webkit-scrollbar {
    display: initial;
}

.DayBody::-webkit-scrollbar {
display: none;
}.CalendarBody.DateMode_week.HourMode_Display .DayBody > .CalendarItem,
.CalendarBody.DateMode_week.HourMode_Only .DayBody > .CalendarItem,
.CalendarBody.DateMode_day.HourMode_Display .DayBody > .CalendarItem,
.CalendarBody.DateMode_day.HourMode_Only .DayBody > .CalendarItem
{
    position: absolute;
    left: 0px;
    right: 0px;
}

.DayBody > .CalendarItem
{
    background-color: white;
    box-shadow: 0 0 16px silver;
}

.WeekNumber {
    width: 3em !important;
    text-align: center;
    vertical-align: middle !important;
}

.Days td {
    vertical-align: top;
    width: 14%;
    position: relative;
    border-left: solid 1px #CFD8DC;
}
.Days td:first-child {
    border-left: solid 1px transparent !important;
}

.FullDay {
    height: 100%;
}

.FullDay td {
    vertical-align: top;
    width: 100%;
    position: relative;
}

.DayTitle {
    text-align: left;
    padding: 2px;
    height: 1.5em;
}

.DayBody {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.DayBody > .Item
{
    padding: 2px;
}

.CalendarBody.DateMode_week table .Days,
.CalendarBody.DateMode_day table .Days
{
    height: 100%;
}

.CalendarBody.DateMode_month .DayBody
{
    top: 1.5em;
}

.DayNames {
    color: #656565;
    opacity: 0.75;
}

.DayNames td:hover {
    background-color: transparent !important;
}

.DayTitle {
    background-color: rgba(99,99,99,0.0);
    box-shadow: 0 0 0;
    border-left: solid 1px rgba(192, 192, 192, 0.4);
    border-top: solid 1px rgba(192, 192, 192, 0.4);
}.DayBody > .Item {
    border: solid 1px silver;
}

.OtherDay {
    opacity: 0.5;
}


/* META  : .Base.Views.ViewType.Chart */
.ViewBody_Chart .ChartBody {
    box-shadow: var(--BoxShadow);
}

.ViewBody_Chart select.ViewType
{
    position: absolute;
    bottom: 1px;
    left: 1px;
}

.ViewBody_Chart .ItemSelection {
    border: 0;
}

.ViewBody_Chart .Menu_Arrow_Down::after
{
    display: none;
}

.ViewBody_Chart:hover .Menu_Arrow_Down::after
{
    display: initial;
}

.ViewBody_Chart .ViewType
{
    display: none;
}

.ViewBody_Chart:hover .ViewType
{
    display: initial;
}

.ViewBody_Chart .ByFieldsRightAdd
{
    display: none;
}

.ViewBody_Chart:hover .ByFieldsRightAdd
{
    display: initial;
}

.ViewBody_Chart .ToggleButton
{
    display: none;
}

.ViewBody_Chart:hover .ToggleButton
{

    display: flex;
    flex: 0;
    min-width: 1em;
    padding: 0;
}

.ViewBody_Chart
{
    min-height: 180px !important;
}

.ChartGroupBy {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: center;
}

.ChartValueField {
    position: absolute;
    top: 0;
    left: 0;
}

.ChartGeoField {
    position: absolute;
    bottom: 0;
    left: 40px;
    margin-left: 0;
}

.ChartBody {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background-color: white;
}

.ChartText
{
    text-shadow: 0 0 5px white;
}

    .MicroView:hover > .EntityTypeView > tr > td > div > .ViewBody > .ChartValueField  {
    display: inline-block !important;
    }
    .MicroView:hover > .EntityTypeView > tr > td > div > .ViewBody > .ChartValueField  select {
    display: inline-block !important;
    }

    .MicroView .ViewBody_Chart {
    box-sizing: border-box;
    }

    .MicroView .ChartValueField
    {
    top: 0;
    }

.MicroView:hover > .EntityTypeView > tr > td > div > .ViewBody_Chart > .TopRight {
    display: inline-block;
}

.MicroView:hover > .EntityTypeView > tr > td > div > .ViewBody_Chart > .SummaryValueField {
    display: none;
}

.ChartGeoField {
    background-color: rgba(255,255,255,0.95);
}
.DirectionVer:has( >.View_Chart.EntityTypeView ){
    gap:var(--gap);
}


/* META  : .Base.Views.ViewType.Merge */
.ViewBody_Merge {
border: 20px solid transparent;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}

.ViewType_Merge .TabBody > div
{
    height: auto !important;
}

.ViewBody_Merge .TabHeader
{
    padding: 4px;
    z-index: 100;
    position: absolute;
}

.ViewBody_Merge .TabBody
{
    padding: 0;
    top: 40px !important;
    z-index: 0;
}.MergeItemBody {
    height: 100%;
}

.MergeItemActions {
    height: 6em;
}

.ViewBody_Merge select {
    background-color: transparent;
}


/* META  : .Base.Views.ViewType.OpenLayers */
.Map .ol-full-screen
{
    right: .5em !important;
    top: .5em !important;
    bottom: auto !important;
}

.ol-toolbar {
    position: absolute;
}

.ol-toolbar.ol-toolbar-modes
{
    top: 0 !important;
    bottom: auto !important;
    left: 50% !important;
    position: absolute !important;
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.Map .ol-control-displaypanel
{
    position: absolute;
    top: 2em !important;
    right: 4em !important;
    bottom: auto !important;
    left: auto !important;
    padding: 0.5em;
}

.ol-toolbar.ol-toolbar-tools
{
    top: 3em !important;
    right: 1em !important;
    bottom: auto !important;
    position: absolute !important;
}

.ol-toolbar.ol-toolbar-tools > * {
    display: block !important;
    margin: 0 !important;
}

.ol-toolbar  .ol-tool
{
    display: inline-block;
    width: auto;
    vertical-align: middle;
    font-size: 12px;
    margin: 1px;
    padding: 2px 4px;
    margin: 0 5px;
}

.ol-toolbar .ol-tool:hover {
    cursor: pointer;
}

.ol-toolgroup
{
    margin: 0;
}
.ol-toolgroup .ol-tool
{
    margin: 0;
}

.Map .ol-control-autofit
{
    top: 3em !important;
    right: 0.5em !important;
    bottom: auto !important;
}

.Map .ol-control-autofit button:before {
    content: "\26de";
}

.Map .ol-mouse-position {
    top: 8px;
    right: 80px;
    position: absolute;
    right: 40px;
    padding: 3px 6px;
}

.map-tools
{
display: inline-block;
}

.map-tool
{
    border: solid 1px #222222;
    width: 24px;
    height: 24px;
    display: inline-block;
}

.map-tool-hand
{
    content : "H";
}

.map-tool-point {
    content: "O";
}

.map-tool-line {
    content: "L";
}

.map-tool-polygon {
    content: "P";
}

.map-tool-oval {
    content: "V";
}

.map-tool-rectangle {
    content: "R";
}

.Map .ol-control-displaypanel {
    color: #222222;
    background-color: rgba(255,255,255,0.5);
}

.ol-toolbar.ol-toolbar-tools {
    background-color: rgba(255,255,255,0.5) !important;
}

.ol-toolbar .ol-tool {
    border: solid 1px silver;
    color: #222222;
}

.ol-tool.Selected {
    background-color: #656565 !important;
    color: white !important;
}

.ol-toolbar .ol-tool:hover {
    background-color: silver;
    color: white;
}

.Map .ol-mouse-position {
    background-color: rgba(255,255,255,0.5);
    border-radius: 1em;
    color: #222222;
}

.ol-attribution.ol-uncollapsible
{
    display: none !important;
}


/* META  : .Base.Views.ViewType.D3 */
svg.nvd3-svg {
    height: auto !important;

}


/* META  : .Base.Views.ViewType.ViewBody_Map */
.FieldValue .ViewBody_Map .ItemSelection {
    display: none !important;
}

.FieldValue .ViewBody_Map .ByFieldsRight {
    display: none !important;
}

.ViewBody_Map {
    min-height: 10em !important;
}

.ViewBody_Map .ChartGroupBy {
    right: 50%;
    transform: translate(50%, 0);
}

.ViewBody_Map .ChartValueField {
    left: 0 !important;
    transform: translate(0, 0) !important;
}

.ViewBody_Map .ItemSelection {
    background-color: rgba(255,255,255,0.9) !important;
}

.ViewBody_Map .ByFieldsRight select {
    border: 1px solid transparent !important;

    box-shadow: 0 0 0 !important;
}


/* META  : .Base.Views.ViewType.Map */
.FieldValue .View_Map {
    min-height: 200px;
}

.LoadingMap
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -64px !important;
    margin-top: -64px !important;
    width: 128px !important;
    height: 128px !important;
    font-size: 128px !important;
    padding: 0 !important;
}

.mapTextBox {
    position: absolute;
    padding: 5px;
    }

.mapIndicatorText{
    position: relative;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.mapCluster {
    position: absolute;
    padding: 5px;
    vertical-align: middle;
    min-width: 16px;
    min-height: 16px;
    display: table-cell;
    }

.Map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
}

.mapCoordinate {
    position: absolute;
    display: inline-block !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    min-width: 24px;
    height: 24px;
    line-height:24px;
    padding: 0 3px;
}

.mapCoordinate:hover {
    font-size: 21px;
    min-width: 60px;
    height: 60px;
    line-height:60px;
}

.mapMarker {
    position: absolute;
    display: inline-block !important;
}
.mapMarker img {
    height: 24px;
}

.MapItem {
    padding: 5px;
    min-width: 100px;
    width: 200px;
    height: auto;
}

.LoadingMap {
    color: #656565;
    text-shadow: 0 0 5px #222222;
    opacity: 0.9;
    background-color: transparent !important;
}

.mapTextBox {
    background: #ffff88;
    border-radius: 100%;
    box-shadow: 1px 1px 4px #656565;
}

.mapCluster {
    background: #ffff88;
    border-radius: 100%;
    box-shadow: 0 0 1px #222222;
    background-color: green;
    color: white;
    opacity: 0.8;
}

.mapCoordinate {
    background-color: orange;
    border-radius: 50%;
    color: #222222;
    opacity: 1;
    box-shadow: 0 0 1px #222222;
}

.GeoTileLayers {
    position: absolute;
    bottom: 3px !important;
    right: 3px !important;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
}


/* META  : .Base.Views.ViewType.ViewBody_Matrix */
.ViewBody_Matrix .ValueField select {
    display: block;
    width: 100% !important;
}

.ViewBody_Matrix {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

    .ViewBody_Matrix .TopRight .ItemSelection {
    max-width: 10em;
    white-space: normal;
    display: flex;
    justify-content: center;
    flex-direction: column;
    }

.ViewBody_Matrix .TopRight .Cell {
    width: 100% !important;
    min-width: 8em;
}

    .ViewBody_Matrix .MiddleRight .Cell {
    width: 100% !important;
    min-width: 8em;
    }


/* META  : .Base.Views.ViewType.Tree */
.TreeLevel {
    display: inline-block;
}

.TreeTitle {
    display: inline-block;
}

.TreeToggle {
    width: 1.5em;
}


/* META  : .Base.Views.ViewType.SiteMap */
.SiteMapBody  {
    vertical-align: top;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.SiteMapItem {
    display: flex;
    padding: 3px;
    text-align: left;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    background-color: white;
}

.SiteMapItem .SiteMapBody {
    flex: 0 0 75%;
}

.SiteMapItem .SiteMapTitle {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.SiteMapItem .SiteMapTitle > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.SiteMapItem .Field {
    padding: 0 !important;
}

.SiteMapItem  .FieldValue .InputSpan a
{
    padding: 4px;
}

.SiteMapTree {
    display: block;
    padding: 0;
    font-size: 98%;
    position: relative;
}

.SiteMapBody > .SiteMapBlock > .SiteMapItem {
    font-size: 115%;
}

.SiteMapBlock {
    display: block;
    padding: 0;
    cursor: pointer;
}

.ShowOnHoverMenu .SiteMapBody > .SiteMapBlock > .SiteMapTree {
    display: none;
    position: absolute;
    z-index: 1000;

    top: 100%;

    margin: 0;
}

.ShowOnHoverMenu .SiteMapBody > .SiteMapBlock:hover > .SiteMapTree {
    display: block;
}

.SitemapToggle {
    font-size: 150% !important;
    padding: 1px 5px;
    opacity: 0.5;
}

.SiteMapBlock.HasChildren > .SiteMapItem > .SiteMapTitle > .SiteMapToggle
{
    opacity: 0.5;
}.ClosedSiteMapItem > .SiteMapTree {
    display: none !important;
}

.SiteMapItem > .SiteMapTitle > .SitemapToggle:before {

    content: var(--icon-Folder);
    font-family: "361";

    font-weight: 900;
    display: flex;
    width: 18px;
    transition: transform var(--contentms);
    opacity: 0.5;
}

.HasChildren > .SiteMapItem > .SiteMapTitle > .SitemapToggle:before {
    content: var(--icon-Folder-Minus);
    font-family: "361";
    opacity: 1.0;

}

.ClosedSiteMapItem.HasChildren > .SiteMapItem > .SiteMapTitle > .SitemapToggle:before {
    content: var(--icon-Folder-Plus);
    font-family: "361";
    opacity: 1.0;

}

.SiteMapItem:hover {
    color: red;
}

.SiteMapItem.SelectedItem {
    outline: 0;
    box-shadow: 0 0 3px #656565 inset !important;
    color: darkblue;
}

.SiteMapTree {
    box-shadow: 0 0 0;
}.MapItem {
    background-color: white;
    color: #222222;
    box-shadow: 1px 1px 5px white;
}


/* META  : .Base.Views.ViewType.BrowseItem */
.BrowseItem .DeleteButton
{
    position: absolute;
    right: 3px;
    top: 3px;
    z-index: 1000;
}

.BrowseItemTitle
{
    position: absolute;
    left: 0;
    font-size: 110%;
    right: 0;
    text-align: left;
    top: 0;
    padding: 3px;
    z-index: 100;
}

.BrowseItemFieldTitle
{
    position: absolute;
    right: 20px;
    font-size: 100%;
    text-align: left;
    top: 0;
    padding: 3px;
}

.BrowseItemValue
{
    position: absolute;
    left: 0;
    right: 0;
    top: 45%;
    bottom: 0;
    vertical-align: middle;
    text-align:center;
    font-size: 24px;
}

.BrowseItemLabel
{
    position: absolute;
    left: 0;
    right: 0;
    top: 15%;
    bottom: 0;
    vertical-align: middle;
    text-align:center;
    font-size: 18px;
    white-space: normal;
    display: inline-block;
    height: 50%;
    vertical-align: bottom;
}

.BrowseDataPanel .BrowseItem .ItemsBody {
    overflow: auto;
-webkit-overflow-scrolling: touch;
}

.BrowseItem .ItemsBody {
    position: absolute;
    top: 20px;
    bottom: 0;
    left: 0;
    right: 0;
}

.BrowseItem .ItemsBodyHeader td
{
    padding: 5px;
}

.BrowseItem .ItemsBodyFooter td
{
    padding: 5px;
}

.FilteredBrowseItem .BrowseItemFieldTitle
{
    left: 0;
    right: 0;
    top: 35%;
    text-align: center;
}

.BrowseItem .Left {
    width: auto;
}

.BrowseItem .Right {
    width: auto;
}.BrowseDataPanel:before {
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    font-smoothing: antialiased;
    background-color: white;
}

.BrowseDataPanel select {
    background-color: transparent;
}

.BrowseItemTitle {
    color: #0259A9;
    border-bottom: 1px solid #EEEEEE;
}

.BrowseItemFieldTitle {
    color: silver;
}

.BrowseItemLabel {
    color: #017EB2;
}

.FilteredBrowseItem {
    background-color: rgba(255, 247, 0, 0.63);
    border: solid 1px rgba(127,127,127,0.2);
}

.MicroView .BrowseItem {
    background-color: transparent;
    box-shadow: 0 0 0;
}

.BrowsePageByPanel {
    height: 32px;
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.BrowseDataPanel:before
{

    content: var(--icon-Chevron-Down);
    font-family: "361";

    font-size: inherit;
    position: absolute;
    left: 8px;
    top: 8px;
    font-size: 15px;
}

.BrowseDataPanel {
    height: 202px;
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}.BrowseDataPanel .BrowseBody
{
    white-space: nowrap;
    overflow: auto;
-webkit-overflow-scrolling: touch;
}

.BrowseDataPanel .Header {
    text-align: center;
}

.Top:hover .DisplayBrowseDataPanel
{
    display: inline-block;
}


/* META  : .Base.Views.ViewType.Metrics */
.BrowseItem
{
    width: 250px;
    height: 158px;
    display: inline-block;
    margin: 5px;
    position: relative;
    vertical-align: top;
    font-size: 110%;
}

.MetricsBody {
    overflow: auto;
-webkit-overflow-scrolling: touch;
    height: auto;
}

.MetricsBody .BrowseItem {
    width: auto;
    height: auto;
}

    .MetricsBody  .ItemsBody {
    position: static !important;
    }

.MetricsBody .BrowseItemValue {
    position: static !important;
    }

    .MetricsBody  .BrowseItemTitle {
    position: static !important;
    }

    .MetricSuffix {
    font-size: 85%;
    text-align: left;
    width: auto;
    padding-left: 1px;
    }

    .MicroView .ViewBody_Metrics,
    .UIViewMicro .ViewBody_Metrics {
    background-color: transparent;
    }

.MicroView .ViewBody_Metrics,
.UIViewMicro .ViewBody_Metrics {
    padding: 0;
}


/* META  : .Base.Views.ViewType.ViewBody_Folder */
.EntityTypeView.ViewBody_Folder
{
flex-wrap: wrap;
}

.ViewBody_Folder .NoRecordsFound {
    padding: 1em;
}

.ViewBody_Folder {
    position: absolute;
    overflow: auto;
    height: 100%;
width: 100%;
    text-align: center;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
    flex-direction: row;
}

.ViewBody_ItemView
{

    overflow: auto;
}.ItemView .ViewBody_Folder {
    position: relative;
}

.ItemView .ViewBody_ItemView {
    position: relative;
}

.DisableOverflow .ViewBody_Folder {
    position: relative;
}

.DisableOverflow .ViewBody_ItemView {
    position: relative;
}

.ViewBody_Folder.MinimizeLeft .FolderItem {
    font-size: 100%;
}


/* META  : .Base.Views.ViewType.ViewBody_Folder.FolderItem */
.FolderItem > .FolderTitle > div:before {
    color: silver;
}

.FolderItem:hover > .FolderTitle > div:before {
    color: #e50119;
}

.FolderItem {
    border: solid 0 rgba(127,127,127,0.1);
}

.DefaultIcon {
    opacity: 0.25;
}


/* META  : .Base.Views.ViewType.ViewBody_Folder.Folder */
.FolderItemText:hover {
    box-shadow: 0 0 0;
    text-shadow: 0 0 1px;
}

.FolderItem
{

    margin: 1px;
    display: inline-block;
    vertical-align: top;
    padding: 0;
    overflow: visible;
    position: relative;
    padding: 4px;
    background-color: var(--white);
    border-radius: 1px;
}

.FolderItemText {
    width: 300px;
    max-width: 100%;
    cursor: pointer;
}

.FolderItemText .FolderTitle {
    text-align: center;
}

.FolderTitle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2em;
    padding: 0.5rem;
    vertical-align: middle;
    text-align: center;

}

.FolderTitle > div
{
    display: flex;
    width: 100%;
    vertical-align: middle;
    padding: 0;
    align-items: flex-start;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    flex-wrap: nowrap;

}

.FolderItem .FolderImage {
    border-radius: 50%;

    height: 80px;

    text-align: center;
    display: inline-block;
}

    .FolderItem .FolderImage > span {
    height: 80px;
    font-size: 80px;
    opacity: 0.5;
    }

.FolderItem img {
    height: 80px;
    nax-width: 100%;
    display: inline-block;
    transform: scale(1);
    max-width: 100%;
}

.FolderItem img:hover {
    transform: scale(1.1);
}.FolderItem .Field
{
    padding: 1px;
}

.ViewBody > .FolderGroupBy {
    padding: 1px 2em;
    margin-top: 24px;
}

.DisableOverflow > .ViewBody > .FolderGroupBy {
    padding: 1px;
    margin: 0;
}

.FolderGroupByTab > .GroupByBody {
    display: none;
    padding: var(--gap);
    box-shadow: 0 0 0;
    gap: var(--gap);
    justify-content: center;
    padding: 0;
    gap: 0;
}

.FolderGroupByTab > .Selected {
    display: flex !important;
}

.FolderItem > .FolderTitle > div:before {
    text-align: left;
    content: var(--icon-Circle);
    font-family: "361";

    position: absolute;
    left: -0.5em;

}

.FolderItem:hover > .FolderTitle > div:before {
    content: var(--icon-Circle-Solid);
}


/* META  : .Base.Views.ViewType.ViewBody_Folder.FolderOptions */
.FolderOptions_Open {
    padding-top: 24px !important;
}

.FolderOptions {
    position: absolute;
    padding: 0;
    top: 0;
    height: 24px;
    left: 0;
    right: 0;
    display: none;
}


/* META  : .Base.Views.ViewType.ViewBody_Folder.OneByOne */
.ViewBody_OneByOne > .ItemView {
    display: none !important;
    width: 100% !important;
}

.ViewBody_OneByOne > .ItemView.SelectedOne {
    display: initial !important;
    height: 100%;
}

.ViewBody_OneByOne {
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 !important;
}

.ViewBody_OneByOne > .ItemView {
    padding: 0;
    margin: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    border: 0;
}

.ViewBody_OneByOne > .ItemView:hover {
    box-shadow: 0 0 0 !important;
}

.OneByOne_NextButton {
    z-index: 100;
    box-shadow: 0 0 0 !important;
    font-size: 1.5em;
    opacity: 0.75;
    padding: 1px 0.5em;
}

.OneByOne_NextButton img {
    height: 32px;
    width: 32px;
}

.OneByOne_Side .OneByOne_NextButton {
    position: absolute;
    right: 0;
    top: 45%;
}

.OneByOne_Side .OneByOne_PrevButton {
    position: absolute;
    left: 0;
    top: 45%;
}

.OneByOne_Side .OneByOnePanelBody {
    z-index: 100;
}

.OneByOne_PrevButton {
    z-index: 100;
    box-shadow: 0 0 0 !important;
    font-size: 1.5em;
    opacity: 0.75;
    padding: 1px 0.5em;
}

.OneByOne_PrevButton img {
    height: 32px;
    width: 32px;
}

.OneByOnePanel {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: solid 0 rgba(127,127,127,0.2);
    box-sizing: border-box;
display: flex;
    flex-direction: row;
}

.OneByOnePanelBody {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.OneByOnePanelBody > div {
    display: inline-block;
    padding: 0.75em 1em;

    margin: 1px 1px;
    cursor: pointer;
    vertical-align: middle;
}

.OneByOneCenter > .Middle {
    top: 0;
}

.OneByOne_Bottom .OneByOneCenter > .Middle {
    top: 0;
}

.OneByOne_NextButton:hover {
    opacity: 1.0;
    color: #085cb2;
}

.OneByOne_PrevButton:hover {
    opacity: 1.0;
    color: #085cb2;
}

.OneByOnePanelBody > div {
    color: #656565;
}

.OneByOnePanelBody > .Selected {
    border: solid 1px rgba(127,127,127,0.2);
    background-color: white;
    font-weight: bold;
}


/* META  : .Base.Views.ViewType.ListTable.FirstCol */
.FirstCol .far {
    line-height: inherit;
    width: auto;
    font-size: 100%;
    padding: 0;
    display: block;
}

.FirstCol {
    width: 100%;
    text-align: center;
    overflow: visible !important;
    position: relative;
}


/* META  : .Base.Views.ViewType.ListTable.Column */
td:hover > .ColumnResizer
{
    display: inline-block;
}

.ColumnResizer
{
    position: absolute;
    top: 0;
    right: 0;
    cursor: col-resize;
    z-index: 110;
    width: 5px;
    bottom: 0;
    display: none;
}

.ColumnAdder {
    position: absolute;
    top: auto;
    left: 0;
    cursor: pointer;
    z-index: 110;
    display: none;
    font-size: 12px !important;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
    padding: 0 4px !important;
    width: auto;
    height: auto;
    bottom: 0;
    width: 16px;
    height: 16px;
}

    .ColumnAdder::before {
    content: var(--icon-Plus);
    font-family: "361";
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    padding: 0;
    font-size: 140%;
    }

.ListMiddle .ListHeader td:hover .ColumnAdder
{
    display: inline-block;
}

.ColumnRemover {
    position: absolute;
    top: auto;
    left: auto;
    right: 6px;
    top: 2px;
    bottom: auto;
    cursor: pointer;
    z-index: 110;
    display: none;
    font-size: 12px !important;
    font-weight: bold;
    vertical-align: top;
    text-align: center;
    padding: 0 4px !important;
    width: auto;
    height: auto;
    width: 16px;
    height: 16px;
    overflow: hidden;
}

.ListMiddle .ListHeader td:hover .ColumnRemover {
    display: inline-block;
}

.ColumnResizer {
    background-color: rgba(127,127,127,0.5);
}

.ColumnAdder {
    border-radius: 50%;
    opacity: 1.0 !important;
}

.AddColumn
{
    position: absolute;
    left: -8px;
    bottom: -7px;
    z-index: 1000;
}

.AddColumn img
{
    height: 16px;
    width: 16px;
}


/* META  : .Base.Views.ViewType.ListTable.SelectFields */
.SelectFields {
    max-height : 20em;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.SelectFields > div {
    padding: 3px 6px;
    cursor: pointer;
    border-bottom: 1px solid rgba(192, 192, 192, 0.39);
}


/* META  : .Base.Views.ViewType.PivotTable */
.PivotTable .PivotRight .GroupField
{
    width: 8.4em;
}

.PivotTable {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
}

    .PivotTable .PivotCenter .Cell
    {
    text-align: right;
    font-weight: normal;
    }.PivotTable .SubRows {
    padding: 0;
    margin: 0;
    }

.PivotTable .PivotRight {
vertical-align: bottom;
width: fit-content;
text-align: left;
/* 2026-09-14: JS satir ici `min-width: 8.1em` (~75px) + overflow:hidden; nowrap grup basligi 80px + 5px dolgu istiyordu ->
   pivot sag bolmesi 5-13px kirpiliyordu (MarketplaceAsset/ShopProductionInput, masaustu + mobil). Icerikten dar olamaz.
   A/B: masaustu 1->0, mobil 1->0. */
min-width: max-content !important;
}

.PivotTable table
{
    table-layout: fixed;
}.PivotTable.NoRows > tbody {
    display: none;
}

.PivotTableScroll {
    max-width: 100%;
    width: 100%;
    padding: 2px;
}

.PivotTable td.BottomCenter {
    overflow-x: scroll;
    overflow-y: hidden;
    width: auto;
}

    .PivotTable td.PivotLeft {
    vertical-align: top;
    }
    .PivotTable td.PivotRight {
    vertical-align: top;
    overflow-x: scroll;
    overflow-y: hidden;
    width: auto;
    }

    .PivotTable tbody Td.MiddleRight {
    overflow: auto;

    }

    .PivotTable tbody div.PivotRight {
    display: inline-block;
    vertical-align: top;
    overflow: auto;
    width: auto;
    overflow-y: auto;
    overflow-x: hidden;

    }



/* META  : .Base.Views.ViewType.PivotTable.PivotLeft */
.PivotTable .PivotLeft
{
    text-align: left;
    min-width: 200px;
    max-width: 200px;
}.PivotTable thead .PivotLeft
{
    vertical-align: bottom;
    text-align: center;
}

.PivotTable .PivotLeft div {
    text-align: left;

}

.PivotTable .PivotLeft .SubRows div {
    border-left: solid 1px rgba(127,127,127,0.2);
}

.PivotTable .PivotLeft .CellRow {
    text-align: left;
}

.PivotTable .PivotLeft tbody > tr > td {
    padding-left: 24px;
}

.PivotTable .PivotLeft tbody
{
    width: 100%;
}

.PivotTable .PivotLeft td
{
padding: 3px;
    white-space: nowrap;

}

    .PivotTable .PivotLeft .SubRows {
    margin-left: 24px;
    }

    .PivotTable tbody div.PivotLeft {
    display: block;
    vertical-align: top;
    overflow: hidden;
    overflow-y: hidden;
    }

    .PivotTable div.PivotLeft::-webkit-scrollbar,
    .PivotTable div.PivotLeft::scrollbar {
    display: none;
    }

.PivotLeft .Cell
    {
    width: fit-content !important;
    }

    .PivotLeft .Cell, .PivotLeft .Cell, .PivotRight .Cell
    {

    text-align: left !important;

    }



/* META  : .Base.Views.ViewType.PivotTable.CellRow */
.PivotTable .CellRow {
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
    white-space: nowrap;
    text-align: left;
    box-sizing: border-box;
    position: relative;
display: block;
width: fit-content;
min-width: 100%;
border-bottom: var(--border1);
border-left: var(--border1);
}PivotRight .CellRow {
    display: block;
    width: auto;
}


/* META  : .Base.Views.ViewType.PivotTable.Cell */
.PivotTable .Cell {
    display: inline-block;
    min-width: 9em;
    white-space: nowrap;

}

.PivotTable .CellRow > .Cell:first-child > CellValue:first-child
{
    border-left: 0;
}

.PivotTable .PivotCenter .CellTitle {
    text-align: center;
    min-height: 2em;
}

.CellRow > .Cell
    {
    white-space: nowrap;
    box-sizing: border-box;
    }

    .CellColumn {
    display: inline-block;
    }

    .CellAll {
    width: 8em;
    }
    .CellColumn > .Cell {
    display: block !important;
    width: 100% !important;
    }

    .CellColumn > .CellColumn {
    white-space: nowrap;
    }.CellTitle > span {
    white-space: pre-line;
    overflow: hidden;
    position: absolute;
    left: 5px;
    right: 5px;
    top: 1px;
}

.CheckCell {
    width: 24px;
}

.CellFull
{
width: 100%;
}

.BottomLeft .AllCell {
    width: 100% !important;
}

.AllCell {
    font-weight: bold;
    text-align: right !important;
}

    .PivotTable .CellTitle {
    display: block;
    position: relative;
    line-height: 2em;
    box-sizing: border-box;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    padding: 0 0 0 2em;
    font-weight: 600;

    }


/* META  : .Base.Views.ViewType.PivotTable.CellLink */
.PivotTable .CellLink {
    width: 2em;
    height: 2em;
    position: absolute;
    cursor: pointer;
    opacity: 0.3;
    z-index: 100;
    display: none;
}

.Mobile .PivotTable .CellLink
{
    display: block;
}

.PivotTable .Cell:hover .CellLink
{
    display: block;
}

.PivotTable .PivotLeft .CellRow:hover .CellLink {
    display: block;
}

.PivotTable .CellLink:hover
{
opacity: 1.0;
}

.PivotTable .CellLink:before {
    content: var(--icon-Chevron-Right);
    font-family: "361";

    padding: 0.5em 0.5em;
    vertical-align: middle;
    font-size: 100%;
    display: block;
}


/* META  : .Base.Views.ViewType.PivotTable.PivotCenter */
.PivotTable td.PivotCenter {
    width: auto;
    vertical-align: top;
}

.PivotTable div.PivotCenter::-webkit-scrollbar {
    visibility: hidden;
    width: 0;
    height: 0;
}

.PivotTable div.PivotCenter::-webkit-scrollbar,
.PivotTable div.PivotCenter::scrollbar {
    display: none;
}

.PivotTable td.PivotCenter  {

    white-space: nowrap;
    vertical-align: bottom !important;
}

.PivotTable .PivotCenter .Cell
{
    text-align: center;
}
.PivotTable  thead  .PivotCenter .Cell .CellValue {
    color: var(--labelColor);
    font-weight: 300;
    line-height: 1.2em;
}
.PivotTable  tfoot  .PivotCenter .Cell {
    font-weight: 700;
}
.PivotTable  tbody  .PivotRight .Cell {
    font-weight: 700;
}



/* META  : .Base.Views.ViewType.PivotTable.PivotTable */
.PivotTable {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
}

.PivotTable .ByFieldsRightAdd{
    display: none !important;
}
.PivotTable:hover .ByFieldsRightAdd{
    display: flex !important;
}
.PivotTable .ByFieldsRight {
    opacity: 0.4;
}
.PivotTable .ByFieldsRight:hover {
    opacity: 1;
}

.PivotTable > * > tr > td
{
    border: var(--border1);
}

.PivotTable > tfoot
{
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
}

.PivotTable > thead,
.PivotTable > tfoot
{
    flex: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.PivotTable > tbody
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex:1;
}

.PivotTable td.PivotLeft,
.PivotTable td.PivotRight
{
    position: relative;
    flex-grow: 0;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.PivotTable thead td.PivotLeft,
.PivotTable thead td.PivotCenter,
.PivotTable thead td.PivotRight
{
    padding-top: 1.5em;
}

.PivotTable thead .ByFieldsRight > .ByFieldsRightAdd {
    position: absolute;
    top: -2em;
    right: 0;
    flex: 1;
}

.PivotTable thead td.PivotLeft > .ByFieldsRight > .ByFieldsRightAdd
{
    top: -3.5em;
}

.PivotTable tbody td.PivotLeft,
.PivotTable tbody td.PivotCenter,
.PivotTable tbody td.PivotRight
{
    justify-content: flex-start;
    position: relative;
}

.PivotTable tbody div.PivotLeft,
.PivotTable tbody div.PivotCenter,
.PivotTable tbody div.PivotRight
{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    justify-content: flex-start;
    max-width: 100%;
}

.DisableOverflow .PivotTable tbody div.PivotLeft,
.DisableOverflow  .PivotTable tbody div.PivotCenter,
.DisableOverflow  .PivotTable tbody div.PivotRight
{
    position: relative;
    min-width: 100%;

}

.UIViewSingle  .PivotTable tbody div.PivotLeft,
.UIViewSingle   .PivotTable tbody div.PivotCenter,
.UIViewSingle   .PivotTable tbody div.PivotRight
{
    position: relative;
    min-width: 100%;

}

.PivotTable td.PivotRight {
    min-width: 10em;
}

.PivotTable div.PivotLeft,
.PivotTable div.PivotRight
{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.PivotTable tr {
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.PivotTable td {
    max-width: 100%;
}



/* META  : .Base.Views.ViewType.PivotTable.CellValue */
.PivotTable .CellValue:before {
    content: " ";
    display: inherit;
}

.PivotTable .CellValue {
    vertical-align: top;
    line-height: 2em;
    padding: 0 3px;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: right;
    box-sizing: border-box;
    width: 9em;
    border-right: var(--border1);

}

.PivotTable > tbody td.PivotCenter > .PivotCenter .CellValue {
    background-color: white;
}

.CellValue span.dec {
    opacity: 0.5;
    font-size: 80%;
    line-height: 2em;
}

.CellValue span.suf {
    margin-left: 1em;
}


/* META  : .Base.Views.ViewType.PivotTable.PivotTableScroll */
.PivotTable td.PivotCenter {
    position: relative;
    flex: 1;
    overflow: auto;
}

.PivotTable div.PivotCenter {
    overflow: auto;
    width: auto;
}

.PivotTable div.PivotCenter::-webkit-scrollbar {
    display: none;
width: 1px;
scrollbar-width: thin;
}

.PivotTable div.PivotCenter::scrollbar {
    display: none;
width: 1px;
scrollbar-width: thin;
}

.PivotTable thead  div.PivotCenter {
    overflow: hidden;
}

.PivotTable tfoot div.PivotCenter {
    overflow: hidden;
}

.PivotTable tfoot td.PivotCenter {
    overflow: hidden;
}



/* META  : .Base.Views.ViewType.PivotTable.PivotPremium */
/* ===== Premium Pivot — 2026-06-27 (PivotPremium) ===== */
/* Readable base type (overrides the old 75%) */
.PivotTable { font-size: 0.86rem; color: var(--textColor, #1f2733); }

/* ---- Layout: pivot host is a flex column — the grid is the PRIMARY surface and scrolls;
       helpers (insights strip, on-hover bar, drill) dock around it without crowding it. ---- */
.PivotHost { display: flex; flex-direction: column; min-height: 0; position: relative; }
.PivotHost > .PivotTable { flex: 1 1 auto; min-height: 0; }

/* ---- On-hover quick bar (2026-06-30): the FULL control set moved into the docked
       "Görünüm Özellikleri" ActionPanel. Only the 3 most-used actions (heatmap · % · export)
       stay ON the view, in a compact bar that is hidden until the user hovers/focuses the pivot —
       so the data surface stays uncrowded (Gestalt: data primary, helpers secondary). ---- */
.PivotHoverBar {
    position: absolute; top: 6px; right: 10px; z-index: 6;
    display: flex; gap: 3px; padding: 3px;
    border-radius: 10px;
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(127,127,127,0.16);
    box-shadow: 0 4px 14px -6px rgba(0,0,0,0.30);
    -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
    opacity: 0; transform: translateY(-5px); pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}
.PivotHost:hover > .PivotHoverBar,
.PivotHost:focus-within > .PivotHoverBar,
.PivotHoverBar:hover { opacity: 1; transform: none; pointer-events: auto; }
/* keep the bar gently visible when a toggle is active, so its state is discoverable at rest */
.PivotHoverBar:has(.active) { opacity: 0.92; transform: none; pointer-events: auto; }
.PivotHoverBtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    border: 1px solid transparent; border-radius: 8px;
    background: transparent; color: var(--labelColor, #6b7280); cursor: pointer;
    transition: background .14s, color .14s, border-color .14s, box-shadow .14s, transform .08s;
}
.PivotHoverBtn:hover { background: rgba(127,127,127,0.12); color: var(--textColor, #1f2733); }
.PivotHoverBtn:active { transform: translateY(1px); }
.PivotHoverBtn:focus-visible { outline: none; border-color: var(--accentColor, #3b82f6); box-shadow: 0 0 0 2px rgba(59,130,246,0.28); }
.PivotHoverBtn.active { background: var(--accentColor, #3b82f6); color: #fff; box-shadow: 0 1px 5px rgba(59,130,246,0.42); }
.PivotHoverBtn svg { width: 16px; height: 16px; display: block; }
/* on touch / print, never show the hover bar */
@media print { .PivotHoverBar { display: none !important; } }

/* ---- Premium chrome: zebra (all three panes track together) + totals ---- */
.PivotTable .PivotLeft .CellRow:nth-of-type(even),
.PivotTable .PivotCenter .CellRow:nth-of-type(even),
.PivotTable .PivotRight .CellRow:nth-of-type(even) { background: rgba(127,127,127,0.038); }
.PivotTable .PivotLeft .CellRow:hover .CellTitle { color: var(--accentColor, #3b82f6); }

/* Right (row totals) + footer (column totals) emphasis */
.PivotTable tbody .PivotRight .CellValue { font-weight: 700; }
.PivotTable tfoot { background: rgba(127,127,127,0.06); }
.PivotTable tfoot .CellTitle, .PivotTable tfoot .CellValue,
.PivotTable .AllCell, .PivotTable .AllCell .CellValue { font-weight: 800; }
.PivotTable .CellTitle.ALLTEXT, .PivotTable tfoot .AllCell .CellTitle { color: var(--accentColor, #3b82f6); }

/* Metric sublabel under column headers — quiet it down (shown once per column, not noisy) */
.PivotTable thead .PivotCenter .Cell .CellValue { opacity: 0.65; font-size: 0.8em; font-weight: 500; }

/* Empty key column/row label */
.PivotTable .PivotEmptyKey { color: var(--labelColor, #8a93a3); font-style: italic; }

/* Zero values muted */
.PivotTable .CellValue.FieldValueZero { color: rgba(127,127,127,0.4); }

/* Drill affordance: data cells are actionable */
.PivotTable .PivotData.PivotDrillable { cursor: pointer; }
.PivotTable .PivotData.PivotDrillable:hover {
    outline: 1.5px solid var(--accentColor, #3b82f6); outline-offset: -2px;
    background: rgba(59,130,246,0.12) !important; border-radius: 3px;
}

/* ---- Heatmap (magnitude at a glance) — !important beats the .PivotCenter .CellValue white fill ---- */
.PivotTable.HeatOn .PivotData { background: rgba(59,130,246, calc(var(--heat, 0) * 0.66)) !important; }
.PivotTable.HeatOn .PivotData.PivotDrillable:hover { background: rgba(59,130,246,0.62) !important; }
/* keep numbers legible on the darkest heat cells */
.PivotTable.HeatOn .PivotData[style*="--heat: 0.9"],
.PivotTable.HeatOn .PivotData[style*="--heat: 1.0"],
.PivotTable.HeatOn .PivotData[style*="--heat: 1"] { color: #0b2447; font-weight: 700; }

/* ---- In-cell data bars (proportional magnitude, per value field) — a sparkline-style underline
       that complements the number. Negative values use the danger color. ---- */
.PivotTable.BarsOn .PivotData { position: relative; }
.PivotTable.BarsOn .PivotData::before {
    content: ""; position: absolute; left: 3px; bottom: 1px;
    height: 3px; width: calc(var(--bar, 0) * (100% - 6px));
    background: var(--accentColor, #3b82f6); border-radius: 2px; opacity: 0.5;
    pointer-events: none;
}
.PivotTable.BarsOn .PivotData.PivotBarNeg::before { background: var(--dangerColor, #ef4444); }
.PivotTable.BarsOn.HeatOn .PivotData::before { opacity: 0.85; }

/* ---- Percent mode ---- */
.PivotTable.PercentOn .CellValue { font-variant-numeric: tabular-nums; }

/* ---- 1-D fix: with no column band, keep totals close to the labels ---- */
.PivotTable .PivotRight .CellValue { width: 7em; }

/* Right (row-totals) column: identical width across thead / tbody / tfoot so the
   header, body and footer right columns line up exactly when filled. */
.PivotTable td.PivotRight {
    width: var(--pivot-right-w, 8em);
    min-width: var(--pivot-right-w, 8em);
    max-width: var(--pivot-right-w, 8em);
    flex: 0 0 var(--pivot-right-w, 8em);
}

/* Empty-section hint inside the pivot field pickers — quiet, compact (not a big block) */
.PivotTable .ETWEmptyHint {
    font-size: 11px; line-height: 1.3; color: var(--labelColor, #8a93a3);
    opacity: 0.85; padding: 1px 2px; max-width: 15em;
}

/* Horizontal scroll affordance (only when columns overflow) */
.PivotTable.PivotHasOverflowX td.PivotCenter { box-shadow: inset -14px 0 12px -12px rgba(0,0,0,0.18); }

/* ---- Empty state ---- */
.PivotEmpty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 28px 24px; min-height: 170px;
    color: var(--labelColor, #8a93a3);
}
.PivotEmptyIcon::before {
    content: var(--icon-Grid); font-family: "361"; font-size: 34px; opacity: 0.32;
    display: block; margin-bottom: 12px;
}
.PivotEmptyTitle { font-size: 15px; font-weight: 700; color: var(--textColor, #1f2733); margin-bottom: 5px; }
.PivotEmptyHint { font-size: 12.5px; max-width: 380px; line-height: 1.45; }

/* Hide redundant metric sublabel when a single value field (the metric is shown once in the value picker) */
.PivotTable.PivotSingleMetric thead .PivotCenter .Cell .CellValue { display: none; }

/* Compact, de-cluttered inline field-config clear buttons (was 3x big "SEÇİMİ TEMİZLE") */
.PivotTable .ETWClearByFields {
    font-size: 0 !important; min-width: 0 !important;
    width: 26px !important; max-width: 26px !important; height: 26px !important;
    flex: 0 0 26px !important; box-sizing: border-box;
    padding: 0 !important; border-radius: 7px; display: inline-flex;
    align-items: center; justify-content: center; opacity: 0.5;
    border: 1px solid rgba(127,127,127,0.28);
}
.PivotTable .ETWClearByFields:hover { opacity: 1; border-color: var(--accentColor, #3b82f6); }
.PivotTable .ETWClearByFields::before {
    content: var(--icon-Times); font-family: "361"; font-size: 12px;
    line-height: 1; display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}

/* Give the value-field (aggregation) picker enough room so labels don't truncate */
.PivotTable .ValueField select, .PivotTable .ValueField .Menu_Arrow_Down { min-width: 8.5em; }

/* ---- Responsive: premium across desktop / tablet / mobile ---- */
@media (max-width: 760px) {
    .PivotInsightValue { max-width: 14em; }
    .PivotDrillBody { max-height: 46vh; }
}
@media (max-width: 560px) {
    /* touch: the hover bar can't be hovered → keep it visible and thumb-sized */
    .PivotHoverBar { top: 4px; right: 6px; opacity: 1; transform: none; pointer-events: auto; }
    .PivotHoverBtn { width: 34px; height: 34px; }
    .PivotDrill { margin: 4px; }
    .PivotInsights { padding: 4px 4px 0; }
    .PivotInsight { flex: 1 1 100%; }                 /* stack KPI chips */
    .PivotInsightValue { max-width: none; }
}




/* META  : .Base.Views.ViewType.PivotPremiumAdditions */
.PivotInsights{display:flex;flex-wrap:wrap;gap:6px;padding:6px 6px 0;flex:0 0 auto}.PivotInsight{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:3px 8px;border:1px solid rgba(127,127,127,.18);border-radius:7px;background:rgba(255,255,255,.78);box-shadow:0 1px 2px rgba(0,0,0,.04)}.PivotInsightLabel{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--labelColor,#8a93a3)}.PivotInsightValue{font-size:12px;font-weight:700;color:var(--textColor,#1f2733);max-width:22em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.PivotDrill{display:none;flex:0 0 auto;margin:6px;padding:0;border:1px solid rgba(127,127,127,.18);border-radius:8px;background:var(--panelColor,#fff);box-shadow:0 2px 12px rgba(0,0,0,.08);overflow:hidden}.PivotDrill.PivotDrillOpen{display:block}.PivotDrillHead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-bottom:1px solid rgba(127,127,127,.16);background:rgba(127,127,127,.045)}.PivotDrillCopy{min-width:0}.PivotDrillTitle{font-size:13px;font-weight:800;color:var(--textColor,#1f2733);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.PivotDrillMeta{font-size:11px;color:var(--labelColor,#8a93a3);margin-top:2px}.PivotDrillClose{width:28px;height:28px;min-width:28px;border:1px solid rgba(127,127,127,.2);border-radius:7px;background:transparent;color:inherit;cursor:pointer;line-height:1}.PivotDrillClose:hover{border-color:var(--accentColor,#3b82f6);color:var(--accentColor,#3b82f6)}.PivotDrillBody{max-height:260px;overflow:auto;padding:6px}.PivotDrillBody.PivotDrillItems{display:flex;flex-direction:column;gap:4px}.PivotDrillEmpty{padding:18px;text-align:center;color:var(--labelColor,#8a93a3);font-size:12px}.PivotDrillLoading .PivotDrillBody:before{content:"";display:block;height:3px;background:linear-gradient(90deg,transparent,var(--accentColor,#3b82f6),transparent);animation:_npb 1s linear infinite}.PivotDrillRecord{display:flex;flex-direction:column;gap:5px;padding:8px;border:1px solid rgba(127,127,127,.14);border-radius:7px;background:rgba(255,255,255,.72)}.PivotDrillRecordTitle{font-size:12px;font-weight:800;color:var(--textColor,#1f2733);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.PivotDrillRecordFields{display:flex;flex-wrap:wrap;gap:5px 10px}.PivotDrillRecordField{display:inline-flex;gap:4px;min-width:0;font-size:11px}.PivotDrillRecordLabel{color:var(--labelColor,#8a93a3);font-weight:700}.PivotDrillRecordValue{color:var(--textColor,#1f2733);max-width:14em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ⭐ PIVOT BAŞLIK SATIRI — ULAŞILAMAZ İÇERİK (2026-08-18, ÖLÇÜLDÜ)
   `.PivotTable { overflow: hidden }` BİLİNÇLİDİR: gövde kendi içinde kayar
   (`td.BottomCenter { overflow-x: scroll }`). Ama BAŞLIK satırı `display:flex`
   + `flex-wrap:nowrap` ve dar kadrajda taşıyor: ölçüldü `scrollWidth 664 >
   clientWidth 376` ⇒ 288px kırpılıyor ve `button.ETWClearByFields`e HİÇ
   ulaşılamıyor (mobilde 330px taşma, 14 vaka).

   Kaydırma kabı eklemek başlığı gövdeden bağımsız kaydırırdı (daha kötü).
   Çare koşullu sarma: içerik sığıyorsa görsel etki YOK, sığmıyorsa alt satıra
   iner ve erişilebilir kalır. */
.PivotTable > thead,
.PivotTable > thead > tr,
.PivotTable > thead > tr > th {
    flex-wrap: wrap;
}

/* ⭐ DAR KADRAJDA PIVOT — TABLONUN KENDİSİ KAYAR (2026-08-18, ÖLÇÜLDÜ)
   Başlık sarması taşmayı 330px → 117px'e indirdi ama bitirmedi: `td.PivotLeft`
   (satır başlıkları sütunu) hâlâ kadraj dışında kalıyor. Pivotun iç kaydırma
   tasarımı (gövde hücresi kayar, tablo `overflow:hidden`) GENİŞ kadraj içindir;
   390px'te satır başlığı + veri zaten sığmaz.

   ⚠️ KAPSAM: <=1024px (mobil VE tablet). İlk sürüm 768px'ti ve tablet açıkta
   kaldı — ölçüldü: 1024px'te aynı kusur 35px taşma ile SÜRDÜ. Masaüstü
   BİLEREK dışarıda: orada iç kaydırma doğru çalışıyor (bu sınıf masaüstünde
   toplam 1 vaka) ve `auto`'ya çevirmek çift kaydırma çubuğu üretebilir. */
@media (max-width: 1024px) {
    .PivotTable {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}



/* META  : .Base.Views.ViewType.ItemFlow */
.ViewBody.ItemFlow_Column, .ViewBody_ItemView.ItemFlow_Column
{
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: auto;
    justify-content: flex-start;
    display: flex !important;
}

.ViewBody.ItemFlow_Row, .ViewBody_ItemView.ItemFlow_Row
{
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: auto;
    align-items: center;
    justify-content: flex-start;
    display: flex !important;
}

.ViewBody.ItemFlow_Float
{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;

}

.ViewBody.ItemFlow_Float > .ItemView
{
    width: auto;
}


/* META  : .Base.Views.ViewType.FirstLetters */
.FirstLetters
{
    position: Fixed;
    top: 40%;
    right: 4px;
    transform: translateY(-50%);
    font-weight: bold;
    width: 2.4em;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.FirstLetters > div
{
    padding: 1px 0 0;
    width: 2em;
    height: 2em;
    border: var(--border1);
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 400;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    background-color: var(--textColor);
    color: var(--backColor);
}

.FirstLetters .CurrentLetter {
    background-color: rgba(127,127,127,0.2);
}

.FirstLetters .CurrentLetter:before {
    content: attr(title);
    font-size: 5rem;
    position: absolute;
    left: -1em;

    transform: translateY(-40%);
    font-weight: bold;
}


/* META  : .Base.Views.ViewType.Kanban */
/* Kanban Enhanced CSS - Premium Enterprise Styling */
/* Version: 2.0 - 2026-06-29 */

/* ==================== BASE STYLES ==================== */
.KanbanError {
    padding: 40px 20px;
    text-align: center;
    color: #666;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.Theme_Dark .KanbanError {
    color: #999;
}

.ViewBody_Kanban {
    height: 100%;
    overflow: hidden;
}

/* ==================== CONTAINER ==================== */
.KanbanContainer {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 16px;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: flex-start;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 transparent;
}

.KanbanContainer::-webkit-scrollbar {
    height: 8px;
}

.KanbanContainer::-webkit-scrollbar-track {
    background: transparent;
}

.KanbanContainer::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 4px;
}

.KanbanContainer::-webkit-scrollbar-thumb:hover {
    background-color: #a1a1a1;
}

.Theme_Dark .KanbanContainer {
    scrollbar-color: #555 transparent;
}

.Theme_Dark .KanbanContainer::-webkit-scrollbar-thumb {
    background-color: #555;
}

/* ==================== COLUMNS ==================== */
.KanbanColumn {
    display: flex;
    flex-direction: column;
    min-width: 280px;
    max-width: 320px;
    width: 300px;
    background-color: #f4f5f7;
    border-radius: 12px;
    flex-shrink: 0;
    max-height: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border-top: 3px solid #dfe1e6;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* 2026-09-02 (ajan D, backlog L13841) — AZ KOLONLU PANODA KABIN %24'U OLU KALIYORDU.
   OLCULDU (finance/FinancialEarlyWarningHome): 2 kolon, kap 788px, kolonlar 300+300
   => 188px bos. Kok YUKARIDAKI CSS DEGIL: et-kanban.js:347-349 her kolona SATIR ICI
   `width/minWidth/maxWidth = KanbanColumnWidth (varsayilan 300px)` yazar; satir ici
   stil (1,0,0,0) hicbir sinif seciciyle yenilemez — bu yuzden buradaki `max-width:320px`
   de, `.KanbanColumnEmpty{width:70px}` de zaten hic uygulanmiyordu. `!important` bu
   depoda istisnadir ve TEK mesru gerekcesi budur: rakip satir ici stildir.
   `flex-basis:auto` satir ici `width`i (kullanicinin KanbanColumnWidth ayari) TABAN
   olarak KORUR; grow=1 kalan alani dagitir; satir ici `min-width` altina inilmez =>
   cok kolonlu panoda `.KanbanContainer{overflow-x:auto}` davranisi AYNEN surer.
   Content duzeyinde `max-width:none + flex:1 1 300px` ile 752px (%95) olculmustu
   (RED->GREEN); bu kural o careyi platforma tasir. Bos kolon (.KanbanColumnEmpty)
   kapsam DISI: onun daraltma tasarimi ayri (3a9ed4e44). */
.KanbanColumn:not(.KanbanColumnEmpty) {
    max-width: none !important;
    flex: 1 1 auto !important;
}

.Theme_Dark .KanbanColumn {
    background-color: #2d2d2d;
    border-top-color: #4d4d4d;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.KanbanColumn:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.Theme_Dark .KanbanColumn:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.KanbanColumnColored {
    border-top-width: 4px;
}

.KanbanColumnEmpty {
    opacity: 0.5;
    background-color: #f9fafb;
    min-width: 60px;
    max-width: 80px;
    width: 70px;
    transition: min-width 0.2s ease, max-width 0.2s ease, opacity 0.2s ease;
    overflow: hidden;
}

.KanbanColumnEmpty .KanbanCardContainer,
.KanbanColumnEmpty .KanbanWIPProgressBar {
    display: none;
}

.KanbanColumnEmpty .KanbanColumnHeader {
    padding: 8px 6px;
    font-size: 11px;
    flex-direction: column;
    gap: 2px;
}

.KanbanColumnEmpty .KanbanColumnTitle {
    font-size: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 60px;
}

.KanbanColumnEmpty:hover {
    opacity: 0.8;
    min-width: 200px;
    max-width: 280px;
}

.KanbanColumnEmpty:hover .KanbanCardContainer,
.KanbanColumnEmpty:hover .KanbanWIPProgressBar {
    display: flex;
}

.KanbanColumnEmpty:hover .KanbanColumnHeader {
    padding: 12px 14px;
    font-size: 13px;
    flex-direction: row;
}

.KanbanColumnEmpty:hover .KanbanColumnTitle {
    font-size: 13px;
    max-width: none;
}

.Theme_Dark .KanbanColumnEmpty:hover {
    background-color: #2a2a2a;
}

/* ==================== COLUMN HEADER ==================== */
.KanbanColumnHeader {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    background-color: #ebecf0;
    border-radius: 9px 9px 0 0;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 48px;
    user-select: none;
}

.Theme_Dark .KanbanColumnHeader {
    background-color: #3d3d3d;
}

.KanbanColorIndicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
    transition: transform 0.2s ease;
}

.KanbanColumn:hover .KanbanColorIndicator {
    transform: scale(1.1);
}

.KanbanColumnTitle {
    font-weight: 600;
    font-size: 14px;
    color: #172b4d;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.Theme_Dark .KanbanColumnTitle {
    color: #e0e0e0;
}

.KanbanColumnCount {
    background-color: #dfe1e6;
    color: #5e6c84;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.Theme_Dark .KanbanColumnCount {
    background-color: #4d4d4d;
    color: #b0b0b0;
}

/* ==================== WIP LIMITS ==================== */
.KanbanColumnNearWIP {
    border-top-color: #f59e0b;
}

.KanbanColumnNearWIP .KanbanColumnCount {
    background-color: #fef3c7;
    color: #92400e;
}

.Theme_Dark .KanbanColumnNearWIP .KanbanColumnCount {
    background-color: #78350f;
    color: #fcd34d;
}

.KanbanColumnOverWIP {
    border-top-color: #ef4444;
    animation: KanbanWIPPulse 2s infinite;
}

.KanbanColumnOverWIP .KanbanColumnCount {
    background-color: #fee2e2;
    color: #991b1b;
}

.Theme_Dark .KanbanColumnOverWIP .KanbanColumnCount {
    background-color: #7f1d1d;
    color: #fca5a5;
}

@keyframes KanbanWIPPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

.KanbanWIPBadge {
    background-color: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
    animation: KanbanWIPBadgePulse 1.5s infinite;
}

@keyframes KanbanWIPBadgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.KanbanWIPProgressBar {
    width: 100%;
    height: 3px;
    background-color: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.Theme_Dark .KanbanWIPProgressBar {
    background-color: #404040;
}

.KanbanWIPProgressFill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

/* ==================== CARD CONTAINER ==================== */
.KanbanCardContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    overflow-y: auto;
    flex-grow: 1;
    min-height: 80px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    border-radius: 0 0 9px 9px;
}

.KanbanCardContainer::-webkit-scrollbar {
    width: 6px;
}

.KanbanCardContainer::-webkit-scrollbar-track {
    background: transparent;
}

.KanbanCardContainer::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 3px;
}

.Theme_Dark .KanbanCardContainer::-webkit-scrollbar-thumb {
    background-color: #555;
}

.KanbanCardContainer.KanbanDropActive {
    background-color: rgba(25, 118, 210, 0.05);
}

.Theme_Dark .KanbanCardContainer.KanbanDropActive {
    background-color: rgba(100, 181, 246, 0.1);
}

.KanbanCardContainer.KanbanDropHover {
    background-color: rgba(25, 118, 210, 0.12);
    box-shadow: inset 0 0 0 2px #1976d2;
    border-radius: 0 0 9px 9px;
}

.Theme_Dark .KanbanCardContainer.KanbanDropHover {
    background-color: rgba(100, 181, 246, 0.18);
    box-shadow: inset 0 0 0 2px #64b5f6;
}

/* ==================== CARDS ==================== */
.KanbanCard {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
    border-left: 3px solid transparent;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.Theme_Dark .KanbanCard {
    background-color: #424242;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Hover Effects */
.KanbanCard_HoverLift:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transform: translateY(-4px);
}

.KanbanCard_HoverGlow:hover {
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.3), 0 4px 12px rgba(0,0,0,0.1);
}

.KanbanCard_HoverBorder:hover {
    border-left-color: #1976d2;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.Theme_Dark .KanbanCard_HoverLift:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.Theme_Dark .KanbanCard_HoverGlow:hover {
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.4), 0 4px 12px rgba(0,0,0,0.2);
}

.Theme_Dark .KanbanCard_HoverBorder:hover {
    border-left-color: #64b5f6;
}

.KanbanCard:active {
    cursor: grabbing;
}

.KanbanCard[draggable="true"] {
    cursor: grab;
}

/* Dragging State */
.KanbanCard.KanbanCardDragging {
    opacity: 0.4;
    transform: rotate(2deg) scale(1.02);
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
    pointer-events: none;
}

/* Ghost Drag Preview */
.KanbanCard.KanbanCardDragGhost {
    opacity: 0.9;
    transform: rotate(3deg) scale(1.05);
    box-shadow: 0 16px 40px rgba(0,0,0,0.3);
    z-index: 1000;
}

/* Multi-Select */
.KanbanCard.KanbanCardSelected {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

.Theme_Dark .KanbanCard.KanbanCardSelected {
    outline-color: #64b5f6;
}

/* ==================== CARD HEADER ==================== */
.KanbanCardHeader {
    padding: 12px 14px 8px 14px;
}

.KanbanCardTitle {
    font-weight: 600;
    font-size: 14px;
    color: #172b4d;
    line-height: 1.4;
    word-break: break-word;
    letter-spacing: -0.01em;
}

.Theme_Dark .KanbanCardTitle {
    color: #e0e0e0;
}

/* ==================== CARD CONTENT ==================== */
.KanbanCardContent {
    padding: 0 14px 10px 14px;
    font-size: 12px;
    color: #5e6c84;
    line-height: 1.5;
}

.Theme_Dark .KanbanCardContent {
    color: #b0b0b0;
}

.KanbanCardField {
    margin-bottom: 6px;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.KanbanCardField:last-child {
    margin-bottom: 0;
}

.KanbanFieldLabel {
    color: #7a869a;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.Theme_Dark .KanbanFieldLabel {
    color: #888;
}

.KanbanFieldValue {
    color: #42526e;
    word-break: break-word;
}

.Theme_Dark .KanbanFieldValue {
    color: #ccc;
}

/* ==================== CARD IMAGE ==================== */
.KanbanCardImage {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
    margin-bottom: -4px;
}

/* ==================== CARD PROGRESS ==================== */
.KanbanCardProgress {
    width: 100%;
    height: 4px;
    background-color: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 8px;
}

.Theme_Dark .KanbanCardProgress {
    background-color: #404040;
}

.KanbanCardProgressFill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
    background: linear-gradient(90deg, #1976d2, #42a5f5);
}

.Theme_Dark .KanbanCardProgressFill {
    background: linear-gradient(90deg, #64b5f6, #90caf9);
}

/* ==================== CARD BADGE ==================== */
.KanbanCardBadge {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #1976d2;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.Theme_Dark .KanbanCardBadge {
    background-color: #64b5f6;
    color: #1a1a1a;
}

/* ==================== CARD COLOR BORDER ==================== */
.KanbanCardColorBorder {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 8px 0 0 8px;
}

/* ==================== CARD AVATAR ==================== */
.KanbanCardAvatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #1976d2;
    color: white;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.Theme_Dark .KanbanCardAvatar {
    background-color: #64b5f6;
    color: #1a1a1a;
}

/* ==================== CARD DATE ==================== */
.KanbanCardDate {
    font-size: 10px;
    color: #9ca3af;
    margin-top: 4px;
}

.Theme_Dark .KanbanCardDate {
    color: #6b7280;
}

/* ==================== CARD PRIORITY ==================== */
.KanbanCardPriority {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
}

.KanbanCardPriority_High {
    border-width: 20px 20px 0 0;
    border-color: #ef4444 transparent transparent transparent;
}

.KanbanCardPriority_Medium {
    border-width: 20px 20px 0 0;
    border-color: #f59e0b transparent transparent transparent;
}

.KanbanCardPriority_Low {
    border-width: 20px 20px 0 0;
    border-color: #10b981 transparent transparent transparent;
}

/* ==================== CARD QUICK ACTIONS ==================== */
.KanbanCardQuickActions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.KanbanCard:hover .KanbanCardQuickActions {
    opacity: 1;
}

.KanbanCardQuickAction {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background-color: rgba(255,255,255,0.9);
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
    font-size: 12px;
}

.Theme_Dark .KanbanCardQuickAction {
    background-color: rgba(66,66,66,0.9);
    border-color: #555;
}

.KanbanCardQuickAction:hover {
    background-color: #1976d2;
    color: white;
    border-color: #1976d2;
    transform: scale(1.1);
}

/* ==================== CARD FOOTER ==================== */
.KanbanCardFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px 10px 14px;
    border-top: 1px solid #f0f0f0;
    min-height: 10px;
}

.KanbanCard .KanbanCardItemView .KanbanCardFooter {
    display: none;
}

.Theme_Dark .KanbanCardFooter {
    border-top-color: #555;
}

/* ==================== CARD ITEMVIEW ==================== */
.KanbanCardItemView {
    padding: 10px;
}

/* ==================== INLINE EDIT ==================== */
.KanbanCardInlineEdit {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    width: 100%;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.KanbanCardInlineEdit:hover {
    border-color: #d1d5db;
    background-color: #f9fafb;
}

.KanbanCardInlineEdit:focus {
    outline: none;
    border-color: #1976d2;
    background-color: white;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

.Theme_Dark .KanbanCardInlineEdit:hover {
    border-color: #555;
    background-color: #3d3d3d;
}

.Theme_Dark .KanbanCardInlineEdit:focus {
    border-color: #64b5f6;
    background-color: #424242;
    box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.3);
}

/* ==================== SWIMLANES ==================== */
.KanbanSwimlane {
    margin-bottom: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.Theme_Dark .KanbanSwimlane {
    border-color: #404040;
}

.KanbanSwimlaneHeader {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.KanbanSwimlaneHeader:hover {
    background-color: #f3f4f6;
}

.Theme_Dark .KanbanSwimlaneHeader {
    background-color: #2d2d2d;
    border-bottom-color: #404040;
}

.Theme_Dark .KanbanSwimlaneHeader:hover {
    background-color: #333;
}

.KanbanSwimlaneTitle {
    font-weight: 600;
    font-size: 13px;
    color: #374151;
    flex-grow: 1;
}

.Theme_Dark .KanbanSwimlaneTitle {
    color: #e5e7eb;
}

.KanbanSwimlaneCount {
    background-color: #e5e7eb;
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
}

.Theme_Dark .KanbanSwimlaneCount {
    background-color: #404040;
    color: #9ca3af;
}

.KanbanSwimlaneCollapse {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.KanbanSwimlaneCollapsed .KanbanSwimlaneCollapse {
    transform: rotate(-90deg);
}

.KanbanSwimlaneBody {
    padding: 12px;
    display: flex;
    gap: 12px;
    overflow-x: auto;
}

.KanbanSwimlaneCollapsed .KanbanSwimlaneBody {
    display: none;
}

/* ==================== EMPTY STATE ==================== */
.KanbanEmptyState {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #9ca3af;
    font-size: 13px;
    text-align: center;
    min-height: 100px;
}

.KanbanEmptyStateIcon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.5;
}

/* ==================== LOADING SKELETON ==================== */
.KanbanCardSkeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: KanbanSkeletonShimmer 1.5s infinite;
    border-radius: 8px;
    height: 80px;
}

.Theme_Dark .KanbanCardSkeleton {
    background: linear-gradient(90deg, #3d3d3d 25%, #4d4d4d 50%, #3d3d3d 75%);
    background-size: 200% 100%;
}

@keyframes KanbanSkeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==================== COLUMN COLLAPSE ==================== */
.KanbanColumnCollapsed {
    min-width: 48px;
    max-width: 48px;
    width: 48px;
    cursor: pointer;
}

.KanbanColumnCollapsed .KanbanColumnHeader {
    padding: 12px 8px;
    flex-direction: column;
    align-items: center;
}

.KanbanColumnCollapsed .KanbanColumnTitle {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
}

.KanbanColumnCollapsed .KanbanColumnCount {
    display: none;
}

.KanbanColumnCollapsed .KanbanCardContainer {
    display: none;
}

/* ==================== FOCUS STATES (Accessibility) ==================== */
.KanbanCard:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

.Theme_Dark .KanbanCard:focus-visible {
    outline-color: #64b5f6;
}

.KanbanColumn:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: -2px;
}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
    .KanbanCard,
    .KanbanColumn,
    .KanbanCardContainer,
    .KanbanSwimlaneHeader,
    .KanbanCardQuickAction {
        transition: none !important;
        animation: none !important;
    }
    
    .KanbanCard.KanbanCardDragging {
        transform: none !important;
    }
    
    .KanbanColumnOverWIP {
        animation: none !important;
    }
    
    .KanbanWIPBadge {
        animation: none !important;
    }
}

/* ==================== HIGH CONTRAST ==================== */
@media (prefers-contrast: high) {
    .KanbanCard {
        border: 2px solid #000;
    }
    
    .KanbanColumn {
        border: 2px solid #000;
    }
    
    .KanbanCardTitle {
        font-weight: 700;
    }
    
    .KanbanColumnTitle {
        font-weight: 700;
    }
}

/* ==================== PRINT ==================== */
@media print {
    .KanbanContainer {
        flex-wrap: wrap;
        overflow: visible;
        height: auto;
    }
    
    .KanbanColumn {
        page-break-inside: avoid;
        max-height: none;
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .KanbanCardContainer {
        overflow: visible;
    }
    
    .KanbanCard {
        box-shadow: 0 0 0 1px #ddd;
        break-inside: avoid;
    }
    
    .KanbanCardQuickActions {
        display: none;
    }
    
    .KanbanSwimlaneBody {
        flex-wrap: wrap;
    }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .KanbanContainer {
        padding: 8px;
        gap: 8px;
    }
    
    .KanbanColumn {
        min-width: 260px;
        width: 280px;
    }
    
    .KanbanCardHeader {
        padding: 8px 10px 4px 10px;
    }
    
    .KanbanCardContent {
        padding: 0 10px 6px 10px;
    }
    
    .KanbanCardTitle {
        font-size: 13px;
    }
    
    .KanbanSwimlaneBody {
        padding: 8px;
        gap: 8px;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .KanbanColumn {
        min-width: 260px;
        width: 280px;
    }
}

/* ==================== TOUCH DEVICES ==================== */
@media (hover: none) and (pointer: coarse) {
    .KanbanCardQuickActions {
        opacity: 1;
    }
    
    .KanbanCard {
        -webkit-touch-callout: none;
    }
}




/* META  : .Base.Views.ViewType.Kanban.Kanban_@media */
@media (max-width: 768px) {
.KanbanContainer {
    padding: 8px;
    gap: 8px;
}
.KanbanColumn {
    min-width: 260px;
    width: 280px;
}
.KanbanCardHeader {
    padding: 8px 10px 4px 10px;
}
.KanbanCardContent {
    padding: 0 10px 6px 10px;
}
.KanbanCardTitle {
    font-size: 13px;
}
}

@media (max-width: 1024px) and (min-width: 769px) {
.KanbanColumn {
    min-width: 260px;
    width: 280px;
}
}

@media print {
.KanbanContainer {
    flex-wrap: wrap;
    overflow: visible;
    height: auto;
}
.KanbanColumn {
    page-break-inside: avoid;
    max-height: none;
}
.KanbanCardContainer {
    overflow: visible;
}
.KanbanCard {
    box-shadow: 0 0 0 1px #ddd;
}
}



/* META  : .Base.Views.ViewType.Kanban.Kanban_KanbanCardFooter */
.KanbanCardFooter {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 12px 8px 12px;
border-top: 1px solid #f0f0f0;
min-height: 8px;
}

.KanbanCard .KanbanCardItemView .KanbanCardFooter {
display: none;
}

.Theme_Dark .KanbanCardFooter {
border-top-color: #555;
}



/* META  : .Base.Views.ViewType.Timeline */
.TimelineError {
padding: 40px 20px;
text-align: center;
color: #666;
font-size: 14px;
}

.ViewBody_Timeline {
height: 100%;
overflow: hidden;
}

.TimelineContainer {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}

.TimelineHeader {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background-color: #f8f9fa;
border-bottom: 1px solid #e9ecef;
flex-shrink: 0;
}

.Theme_Dark .TimelineHeader {
background-color: #2d2d2d;
border-bottom-color: #404040;
}

.TimelineDateRange {
font-weight: 600;
font-size: 14px;
color: #495057;
}

.Theme_Dark .TimelineDateRange {
color: #e0e0e0;
}

.TimelineCount {
font-size: 13px;
color: #6c757d;
}

.Theme_Dark .TimelineCount {
color: #999;
}

.TimelineAlternate .TimelineItemWrapper.TimelineItemAlternate {
flex-direction: row-reverse;
padding-left: 0;
padding-right: 30px;
transform: translateX(-100%);
margin-left: -30px;
}

.TimelineCard:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
transform: translateY(-2px);
}

.TimelineCard:last-child {
margin-bottom: 0;
}

.TimelineCardHeader {
padding: 12px 14px 8px 14px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}

.TimelineCard_Compact .TimelineCardHeader {
padding: 0;
}

.TimelineCardDate {
font-size: 11px;
color: #868e96;
white-space: nowrap;
}

.Theme_Dark .TimelineCardDate {
color: #888;
}

.TimelineCardContent {
padding: 0 14px 10px 14px;
}

.TimelineCardField {
margin-bottom: 4px;
font-size: 12px;
line-height: 1.4;
}

.TimelineFieldLabel {
color: #868e96;
}

.Theme_Dark .TimelineFieldLabel {
color: #888;
}

.TimelineFieldValue {
color: #495057;
}

.Theme_Dark .TimelineFieldValue {
color: #ccc;
}

.TimelineCardItemView {
padding: 8px;
}

.TimelineSwimlanes {
display: flex;
gap: 16px;
min-height: 100%;
}

.TimelineSwimlane {
flex: 1;
min-width: 280px;
max-width: 400px;
background-color: #f8f9fa;
border-radius: 8px;
display: flex;
flex-direction: column;
}

.Theme_Dark .TimelineSwimlane {
background-color: #2d2d2d;
}

.TimelineSwimlaneHeader {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background-color: #e9ecef;
border-radius: 8px 8px 0 0;
}

.Theme_Dark .TimelineSwimlaneHeader {
background-color: #3d3d3d;
}

.TimelineSwimlaneTitle {
font-weight: 600;
font-size: 14px;
color: #495057;
}

.Theme_Dark .TimelineSwimlaneTitle {
color: #e0e0e0;
}

.TimelineSwimlaneCount {
background-color: #dee2e6;
color: #6c757d;
font-size: 12px;
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
}

.Theme_Dark .TimelineSwimlaneCount {
background-color: #555;
color: #ccc;
}

.TimelineSwimlaneBody {
flex: 1;
padding: 12px;
overflow-y: auto;
position: relative;
}

.TimelineAnimated .TimelineItemWrapper:nth-child(1) { animation-delay: 0.05s; }

.TimelineAnimated .TimelineItemWrapper:nth-child(2) { animation-delay: 0.1s; }

.TimelineAnimated .TimelineItemWrapper:nth-child(3) { animation-delay: 0.15s; }

.TimelineAnimated .TimelineItemWrapper:nth-child(4) { animation-delay: 0.2s; }

.TimelineAnimated .TimelineItemWrapper:nth-child(5) { animation-delay: 0.25s; }

.TimelineAnimated .TimelineItemWrapper:nth-child(6) { animation-delay: 0.3s; }

.TimelineAnimated .TimelineItemWrapper:nth-child(7) { animation-delay: 0.35s; }

.TimelineAnimated .TimelineItemWrapper:nth-child(8) { animation-delay: 0.4s; }

.TimelineAnimated .TimelineItemWrapper:nth-child(9) { animation-delay: 0.45s; }

.TimelineAnimated .TimelineItemWrapper:nth-child(10) { animation-delay: 0.5s; }

@keyframes timelineFadeIn {
from {
    opacity: 0;
    transform: translateX(-20px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}

@keyframes timelineFadeInHorizontal {
from {
    opacity: 0;
    transform: translateY(-20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

@media (max-width: 768px) {
.Timeline_Vertical .TimelineBody {
    padding-left: 20px;
}
.Timeline_Vertical .TimelineLine {
    left: 36px;
}
.Timeline_Vertical .TimelineItemWrapper {
    padding-left: 30px;
}
.Timeline_Vertical .TimelinePoint {
    left: 6px;
}
.Timeline_Vertical .TimelineDateLabel {
    position: static;
    width: auto;
    text-align: left;
    margin-bottom: 4px;
}
.TimelineAlternate .TimelineBody {
    padding-left: 20px;
}
.TimelineAlternate .TimelineItemWrapper,
.TimelineAlternate .TimelineItemWrapper.TimelineItemAlternate {
    flex-direction: row;
    padding-left: 30px;
    padding-right: 0;
    transform: none;
    margin-left: 0;
}
.TimelineSwimlanes {
    flex-direction: column;
}
.TimelineSwimlane {
    max-width: none;
    min-width: auto;
}
}

@media print {
.TimelineContainer {
    height: auto;
    overflow: visible;
}
.TimelineBody {
    overflow: visible;
}
.TimelineAnimated .TimelineItemWrapper {
    animation: none;
    opacity: 1;
}
.TimelineCard {
    box-shadow: 0 0 0 1px #ddd;
    page-break-inside: avoid;
}
}



/* META  : .Base.Views.ViewType.Timeline.Timeline_TimelineBody */
.TimelineBody {
flex: 1;
overflow: auto;
padding: 20px;
position: relative;
}

.Timeline_Vertical .TimelineBody {
padding-left: 40px;
}

.TimelineAlternate .TimelineBody {
padding-left: 50%;
}

.Timeline_Horizontal .TimelineBody {
display: flex;
align-items: flex-start;
padding: 20px;
overflow-x: auto;
overflow-y: hidden;
}



/* META  : .Base.Views.ViewType.Timeline.Timeline_TimelineCard */
.TimelineCard {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
cursor: pointer;
transition: box-shadow 0.2s ease, transform 0.15s ease;
margin-bottom: 8px;
border-left: 3px solid #1976d2;
}

.TimelineCard_Compact .TimelineCard {
padding: 10px 14px;
}

.TimelineCard_Minimal .TimelineCard {
padding: 8px 12px;
border-left-width: 2px;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.Theme_Dark .TimelineCard {
background-color: #3d3d3d;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}



/* META  : .Base.Views.ViewType.Timeline.Timeline_TimelineCardFooter */
.TimelineCardFooter {
padding: 8px 14px;
border-top: 1px solid #f1f3f4;
display: flex;
align-items: center;
justify-content: flex-end;
}

.TimelineCard_Compact .TimelineCardFooter {
display: none;
}

.Theme_Dark .TimelineCardFooter {
border-top-color: #555;
}



/* META  : .Base.Views.ViewType.Timeline.Timeline_TimelineCardTitle */
.TimelineCardTitle {
font-weight: 600;
font-size: 14px;
color: #212529;
line-height: 1.4;
flex: 1;
}

.TimelineCard_Minimal .TimelineCardTitle {
font-size: 13px;
}

.Theme_Dark .TimelineCardTitle {
color: #e0e0e0;
}



/* META  : .Base.Views.ViewType.Timeline.Timeline_TimelineContentWrapper */
.Timeline_Vertical .TimelineContentWrapper {
flex: 1;
margin-left: 16px;
}

.TimelineAlternate .TimelineItemAlternate .TimelineContentWrapper {
margin-left: 0;
margin-right: 16px;
}

.Timeline_Horizontal .TimelineContentWrapper {
width: 100%;
}



/* META  : .Base.Views.ViewType.Timeline.Timeline_TimelineDateLabel */
.Timeline_Vertical .TimelineDateLabel {
position: absolute;
left: -100px;
top: 6px;
width: 90px;
text-align: right;
font-size: 12px;
font-weight: 500;
color: #6c757d;
}

.TimelineAlternate .TimelineItemAlternate .TimelineDateLabel {
left: auto;
right: -100px;
text-align: left;
}

.Timeline_Horizontal .TimelineDateLabel {
font-size: 12px;
font-weight: 500;
color: #6c757d;
margin-bottom: 8px;
text-align: center;
}

.TimelineSwimlane .TimelineDateLabel {
position: static;
width: auto;
text-align: left;
margin-bottom: 4px;
}

.Theme_Dark .TimelineDateLabel {
color: #999;
}



/* META  : .Base.Views.ViewType.Timeline.Timeline_TimelineItemWrapper */
.Timeline_Vertical .TimelineItemWrapper {
display: flex;
align-items: flex-start;
margin-bottom: 24px;
position: relative;
padding-left: 40px;
}

.TimelineAlternate .TimelineItemWrapper {
padding-left: 30px;
padding-right: 0;
}

.Timeline_Horizontal .TimelineItemWrapper {
display: flex;
flex-direction: column;
align-items: center;
min-width: 200px;
margin-right: 24px;
position: relative;
}

.TimelineSwimlane .TimelineItemWrapper {
padding-left: 32px;
}

.TimelineAnimated .TimelineItemWrapper {
animation: timelineFadeIn 0.4s ease forwards;
opacity: 0;
}

.TimelineAnimated.Timeline_Horizontal .TimelineItemWrapper {
animation-name: timelineFadeInHorizontal;
}



/* META  : .Base.Views.ViewType.Timeline.Timeline_TimelineLine */
.Timeline_Vertical .TimelineLine {
position: absolute;
left: 56px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, #e9ecef 0%, #dee2e6 50%, #e9ecef 100%);
}

.TimelineAlternate .TimelineLine {
left: 50%;
transform: translateX(-50%);
}

.Timeline_Horizontal .TimelineLine {
position: absolute;
top: 50px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(to right, #e9ecef 0%, #dee2e6 50%, #e9ecef 100%);
}

.TimelineConnector_Curved .TimelineLine {
border-radius: 4px;
}

.TimelineConnector_None .TimelineLine {
display: none;
}

.TimelineSwimlane .TimelineLine {
left: 28px;
}

.Theme_Dark .TimelineLine {
background: linear-gradient(to bottom, #404040 0%, #555 50%, #404040 100%);
}



/* META  : .Base.Views.ViewType.Timeline.Timeline_TimelinePoint */
.Timeline_Vertical .TimelinePoint {
position: absolute;
left: 12px;
top: 8px;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #1976d2;
border: 3px solid #fff;
box-shadow: 0 0 0 2px #1976d2;
z-index: 2;
}

.TimelineAlternate .TimelineItemAlternate .TimelinePoint {
left: auto;
right: 12px;
}

.Timeline_Horizontal .TimelinePoint {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #1976d2;
border: 3px solid #fff;
box-shadow: 0 0 0 2px #1976d2;
margin-bottom: 12px;
z-index: 2;
}

.TimelinePoint_Square .TimelinePoint {
border-radius: 3px;
}

.TimelinePoint_Diamond .TimelinePoint {
border-radius: 0;
transform: rotate(45deg);
}

.TimelinePointSize_Small .TimelinePoint {
width: 10px;
height: 10px;
border-width: 2px;
}

.TimelinePointSize_Large .TimelinePoint {
width: 18px;
height: 18px;
border-width: 4px;
}

.TimelineSwimlane .TimelinePoint {
left: 6px;
}



/* META  : .Base.Views.ViewType.CardView */
.CardViewContainer {
display: grid;
width: 100%;
padding: 16px;
box-sizing: border-box;
}

.CardViewContainer[data-layout="Grid"] {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.CardViewContainer[data-layout="List"] {
grid-template-columns: 1fr;
}

.CardViewContainer[data-layout="Masonry"] {
display: block;
column-count: auto;
column-width: 280px;
}

.CardViewContainer[data-layout="Carousel"] {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}

.CardViewContainer[data-columns="1"] { grid-template-columns: 1fr; }

.CardViewContainer[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }

.CardViewContainer[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }

.CardViewContainer[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }

.CardViewContainer[data-columns="5"] { grid-template-columns: repeat(5, 1fr); }

.CardViewContainer[data-columns="6"] { grid-template-columns: repeat(6, 1fr); }

.CardViewContainer[data-layout="Masonry"][data-columns="1"] { column-count: 1; }

.CardViewContainer[data-layout="Masonry"][data-columns="2"] { column-count: 2; }

.CardViewContainer[data-layout="Masonry"][data-columns="3"] { column-count: 3; }

.CardViewContainer[data-layout="Masonry"][data-columns="4"] { column-count: 4; }

.CardViewContainer[data-layout="Masonry"][data-columns="5"] { column-count: 5; }

.CardViewContainer[data-layout="Masonry"][data-columns="6"] { column-count: 6; }

.CardViewContainer[data-gap="None"] { gap: 0; }

.CardViewContainer[data-gap="Small"] { gap: 8px; }

.CardViewContainer[data-gap="Medium"] { gap: 16px; }

.CardViewContainer[data-gap="Large"] { gap: 24px; }

.CardViewContainer[data-layout="Masonry"][data-gap="None"] { column-gap: 0; }

.CardViewContainer[data-layout="Masonry"][data-gap="Small"] { column-gap: 8px; }

.CardViewContainer[data-layout="Masonry"][data-gap="Medium"] { column-gap: 16px; }

.CardViewContainer[data-layout="Masonry"][data-gap="Large"] { column-gap: 24px; }

.CardItem[data-card-style="Flat"] {
background: #fff;
}

.CardItem[data-card-style="Elevated"] {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.Theme_Dark .CardItem[data-card-style="Elevated"] {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.CardItem[data-card-style="Outlined"] {
border: 1px solid #e0e0e0;
}

.Theme_Dark .CardItem[data-card-style="Outlined"] {
border-color: #444;
}

.CardItem[data-card-style="Filled"] {
background: #f5f5f5;
}

.Theme_Dark .CardItem[data-card-style="Filled"] {
background: #383838;
}

.CardItem[data-card-radius="None"] { border-radius: 0; }

.CardItem[data-card-radius="Small"] { border-radius: 4px; }

.CardItem[data-card-radius="Medium"] { border-radius: 8px; }

.CardItem[data-card-radius="Large"] { border-radius: 16px; }

.CardItem[data-card-radius="Round"] { border-radius: 24px; }

.CardItem[data-hover-effect="Lift"]:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.CardItem[data-hover-effect="Glow"]:hover {
box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.3);
}

.CardItem[data-hover-effect="Scale"]:hover {
transform: scale(1.02);
}

.CardItem[data-hover-effect="Border"]:hover {
border-color: #4285f4;
}

.CardItem[data-image-position="Right"] {
flex-direction: row;
}

.CardItem[data-image-position="Background"] {
position: relative;
}

.CardImageWrapper[data-ratio="1:1"] { aspect-ratio: 1 / 1; }

.CardImageWrapper[data-ratio="4:3"] { aspect-ratio: 4 / 3; }

.CardImageWrapper[data-ratio="16:9"] { aspect-ratio: 16 / 9; }

.CardImageWrapper[data-ratio="21:9"] { aspect-ratio: 21 / 9; }

.CardImageWrapper[data-ratio="Auto"] { aspect-ratio: auto; }

.CardImageWrapper.CardImageError {
display: flex;
align-items: center;
justify-content: center;
color: #999;
}

.CardBadge {
position: absolute;
padding: 4px 8px;
font-size: 12px;
font-weight: 500;
background: #4285f4;
color: #fff;
border-radius: 4px;
z-index: 2;
}

.CardBadge[data-position="TopLeft"] { top: 8px; left: 8px; }

.CardBadge[data-position="TopRight"] { top: 8px; right: 8px; }

.CardBadge[data-position="BottomLeft"] { bottom: 8px; left: 8px; }

.CardBadge[data-position="BottomRight"] { bottom: 8px; right: 8px; }

/* UXPEAK #2 — Featured (Recommended) card highlight */
.CardFeatured {
  border: 2px solid var(--accent, #4285f4);
  box-shadow: 0 6px 20px rgba(66, 133, 244, 0.28);
}

.CardFeaturedTag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #fff;
  background: linear-gradient(135deg, #ff8a00, #e53935);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.CardDescription[data-lines="1"] { -webkit-line-clamp: 1; }

.CardDescription[data-lines="2"] { -webkit-line-clamp: 2; }

.CardDescription[data-lines="3"] { -webkit-line-clamp: 3; }

.CardDescription[data-lines="4"] { -webkit-line-clamp: 4; }

.CardDescription[data-lines="5"] { -webkit-line-clamp: 5; }

.CardDescription[data-lines="All"] { -webkit-line-clamp: unset; }

.CardFooter {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px 12px;
border-top: 1px solid #f0f0f0;
font-size: 12px;
color: #5f6368;
}

.Theme_Dark .CardFooter {
border-top-color: #444;
}

.CardFooterItem {
display: flex;
align-items: center;
gap: 4px;
}

.CardFooterLabel {
color: #999;
}

.Theme_Dark .CardFooterLabel {
color: #666;
}

.CardFooterValue {
color: #333;
}

.Theme_Dark .CardFooterValue {
color: #bbb;
}

.CardItem[data-selected="true"] {
outline: 2px solid #4285f4;
outline-offset: -2px;
}

.CardItemViewContent {
padding: 12px;
}

.CardGroup {
margin-bottom: 24px;
}

.CardGroupToggle {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #666;
transition: transform 0.2s;
}

.CardGroupTitle {
font-size: 16px;
font-weight: 600;
color: #202124;
flex: 1;
}

.Theme_Dark .CardGroupTitle {
color: #e8eaed;
}

.CardGroupCount {
background: #e8eaed;
color: #5f6368;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}

.Theme_Dark .CardGroupCount {
background: #444;
color: #aaa;
}

.CardGroupContent {
display: grid;
}

.CardGroup[data-collapsed="true"] .CardGroupContent {
display: none;
}

.CardGroupContent[data-layout="Grid"] {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.CardGroupContent[data-columns="1"] { grid-template-columns: 1fr; }

.CardGroupContent[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }

.CardGroupContent[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }

.CardGroupContent[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }

.CardGroupContent[data-columns="5"] { grid-template-columns: repeat(5, 1fr); }

.CardGroupContent[data-columns="6"] { grid-template-columns: repeat(6, 1fr); }

.CardGroupContent[data-gap="None"] { gap: 0; }

.CardGroupContent[data-gap="Small"] { gap: 8px; }

.CardGroupContent[data-gap="Medium"] { gap: 16px; }

.CardGroupContent[data-gap="Large"] { gap: 24px; }

.CardEmptyState {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
color: #999;
}

.Theme_Dark .CardEmptyState {
color: #666;
}

/* 2026-09-14 — BOS KART GORUNUMU DIKEY ORTALI (diger bos gorunumlerle tutarli). ETWBody satir yonlu SARMALAYAN flex
   (align-content:flex-start) oldugundan bos-durum kabi tam sayfa gorunumun TEPESINDE kaliyordu; kaba margin:auto
   vermek etkisizdi (sarmalayan flex'te satirin capraz boyu icerik kadar). Olculdu: SurveyPeriod ETWBody 817px / kap 296px tepede.
   A/B: masaustu 1->0 (icerik alt kenari 296 -> 557px), mobil 1->0; kareyle dogrulandi. */
.EntityTypeView.NoItems > .EntityTypeViewBody > .Center > .Middle > .ETWBody:has(> .CardViewContainer > .CardEmptyState) {
align-content: center !important;
}

.CardEmptyIcon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}

.CardEmptyText {
font-size: 16px;
}

.CardSkeleton {
display: flex;
flex-direction: column;
overflow: hidden;
}

.CardSkeleton[data-card-style="Elevated"] {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.CardSkeleton[data-card-style="Outlined"] {
border: 1px solid #e0e0e0;
}

.CardSkeletonImage {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: cardSkeletonShimmer 1.5s infinite;
}

.CardSkeletonImage[data-ratio="1:1"] { aspect-ratio: 1 / 1; }

.CardSkeletonImage[data-ratio="4:3"] { aspect-ratio: 4 / 3; }

.CardSkeletonImage[data-ratio="16:9"] { aspect-ratio: 16 / 9; }

.CardSkeletonContent {
padding: 12px;
}

.CardSkeletonTitle {
height: 20px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: cardSkeletonShimmer 1.5s infinite;
border-radius: 4px;
margin-bottom: 8px;
width: 70%;
}

.CardSkeletonDesc {
height: 14px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: cardSkeletonShimmer 1.5s infinite;
border-radius: 4px;
margin-bottom: 6px;
}

.Theme_Dark .CardSkeletonDesc {
background: linear-gradient(90deg, #383838 25%, #444 50%, #383838 75%);
background-size: 200% 100%;
}

.CardSkeletonDescShort {
width: 50%;
}

.CardItem[data-animation="FadeIn"] {
opacity: 0;
animation: cardFadeIn 0.4s ease forwards;
}

.CardItem[data-animation="SlideUp"] {
opacity: 0;
transform: translateY(20px);
animation: cardSlideUp 0.4s ease forwards;
}

.CardItem[data-animation="Scale"] {
opacity: 0;
transform: scale(0.9);
animation: cardScale 0.4s ease forwards;
}

.CardItem[data-animation="Stagger"] {
opacity: 0;
transform: translateY(10px);
animation: cardStagger 0.3s ease forwards;
}



/* META  : .Base.Views.ViewType.CardView.CardView_@keyframes */
@keyframes cardSkeletonShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

@keyframes cardFadeIn {
to { opacity: 1; }
}

@keyframes cardSlideUp {
to { opacity: 1; transform: translateY(0); }
}

@keyframes cardScale {
to { opacity: 1; transform: scale(1); }
}

@keyframes cardStagger {
to { opacity: 1; transform: translateY(0); }
}



/* META  : .Base.Views.ViewType.CardView.CardView_@media */
@media (max-width: 768px) {
.CardViewContainer[data-responsive="true"] {
    grid-template-columns: repeat(2, 1fr);
    padding: 8px;
}
.CardViewContainer[data-responsive="true"][data-columns="1"],
.CardViewContainer[data-layout="List"] {
    grid-template-columns: 1fr;
}
.CardViewContainer[data-layout="Masonry"][data-responsive="true"] {
    column-count: 2;
}
.CardItem[data-image-position="Left"],
.CardItem[data-image-position="Right"] {
    flex-direction: column;
}
.CardItem[data-image-position="Left"] .CardImageWrapper,
.CardItem[data-image-position="Right"] .CardImageWrapper {
    width: 100%;
}
.CardGroupContent[data-responsive="true"] {
    grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 480px) {
.CardViewContainer[data-responsive="true"] {
    grid-template-columns: 1fr;
}
.CardViewContainer[data-layout="Masonry"][data-responsive="true"] {
    column-count: 1;
}
.CardGroupContent[data-responsive="true"] {
    grid-template-columns: 1fr;
}
.CardViewContainer[data-layout="Carousel"] .CardItem {
    flex: 0 0 calc(100vw - 48px);
}
}

@media print {
.CardViewContainer {
    display: block;
}
.CardItem {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ddd;
    margin-bottom: 16px;
}
.CardItem[data-hover-effect] {
    transform: none !important;
}
.CardSelectBox {
    display: none;
}
.CardSkeleton {
    display: none;
}
.CardItem[data-animation] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}
}



/* META  : .Base.Views.ViewType.CardView.CardView_CardContent */
.CardItem[data-card-size="Small"] .CardContent { padding: 8px; }

.CardItem[data-card-size="Medium"] .CardContent { padding: 12px; }

.CardItem[data-card-size="Large"] .CardContent { padding: 16px; }

.CardItem[data-image-position="Background"] .CardContent {
position: relative;
z-index: 1;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
color: #fff;
margin-top: auto;
}

.CardContent {
flex: 1;
display: flex;
flex-direction: column;
padding: 12px;
}



/* META  : .Base.Views.ViewType.CardView.CardView_CardDescription */
.CardItem[data-card-size="Small"] .CardDescription { font-size: 12px; }

.CardItem[data-card-size="Medium"] .CardDescription { font-size: 14px; }

.CardItem[data-card-size="Large"] .CardDescription { font-size: 15px; }

.CardDescription {
color: #5f6368;
line-height: 1.5;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
}

.Theme_Dark .CardDescription {
color: #9aa0a6;
}



/* META  : .Base.Views.ViewType.CardView.CardView_CardGroupHeader */
.CardGroupHeader {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 0;
border-bottom: 2px solid #e0e0e0;
margin-bottom: 16px;
}

.CardGroup[data-group-style="Divider"] .CardGroupHeader {
border-bottom: 1px solid #e0e0e0;
}

.CardGroup[data-group-style="Tab"] .CardGroupHeader {
background: #f5f5f5;
padding: 12px 16px;
border-radius: 8px 8px 0 0;
border-bottom: none;
}

.CardGroup[data-group-style="Accordion"] .CardGroupHeader {
background: #fafafa;
padding: 12px 16px;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 8px;
}

.Theme_Dark .CardGroupHeader {
border-bottom-color: #444;
}

.Theme_Dark .CardGroup[data-group-style="Tab"] .CardGroupHeader {
background: #383838;
}

.Theme_Dark .CardGroup[data-group-style="Accordion"] .CardGroupHeader {
background: #333;
border-color: #444;
}



/* META  : .Base.Views.ViewType.CardView.CardView_CardImage */
.CardImage {
width: 100%;
height: 100%;
display: block;
}

.CardImageWrapper[data-fit="Cover"] .CardImage { object-fit: cover; }

.CardImageWrapper[data-fit="Contain"] .CardImage { object-fit: contain; }

.CardImageWrapper[data-fit="Fill"] .CardImage { object-fit: fill; }

.CardImageWrapper.CardImageError .CardImage {
display: none;
}



/* META  : .Base.Views.ViewType.CardView.CardView_CardImageWrapper */
.CardItem[data-image-position="Left"] .CardImageWrapper { order: -1; }

.CardItem[data-image-position="Right"] .CardImageWrapper { order: 1; }

.CardItem[data-image-position="Bottom"] .CardImageWrapper { order: 1; }

.CardItem[data-image-position="Right"] .CardImageWrapper {
width: 40%;
flex-shrink: 0;
}

.CardItem[data-image-position="Background"] .CardImageWrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}

.CardImageWrapper {
position: relative;
overflow: hidden;
background: #f0f0f0;
}

.Theme_Dark .CardImageWrapper {
background: #383838;
}



/* META  : .Base.Views.ViewType.CardView.CardView_CardItem */
.CardItem {
display: flex;
flex-direction: column;
background: #fff;
cursor: pointer;
transition: all 0.2s ease;
overflow: hidden;
position: relative;
min-height: 60px;
box-sizing: border-box;
}

.CardViewContainer[data-layout="Masonry"] .CardItem {
break-inside: avoid;
margin-bottom: 16px;
}

.CardViewContainer[data-layout="Carousel"] .CardItem {
flex: 0 0 300px;
scroll-snap-align: start;
margin-right: 16px;
}

.Theme_Dark .CardItem {
background: #2d2d2d;
}



/* META  : .Base.Views.ViewType.CardView.CardView_CardSelectBox */
.CardSelectBox {
position: absolute;
top: 8px;
left: 8px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.9);
border-radius: 4px;
cursor: pointer;
z-index: 3;
opacity: 0;
transition: opacity 0.2s;
}

.CardItem[data-selected="true"] .CardSelectBox {
opacity: 1;
}

.Theme_Dark .CardSelectBox {
background: rgba(45, 45, 45, 0.9);
color: #e8eaed;
}



/* META  : .Base.Views.ViewType.CardView.CardView_CardTitle */
.CardItem[data-card-size="Small"] .CardTitle { font-size: 14px; }

.CardItem[data-card-size="Medium"] .CardTitle { font-size: 16px; }

.CardItem[data-card-size="Large"] .CardTitle { font-size: 18px; }

.CardTitle {
font-weight: 600;
color: #202124;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.Theme_Dark .CardTitle {
color: #e8eaed;
}

/* 2026-09-15 kullanici karari "Yedek kimlik goster": basligi bos kayitta et-card.js "(adsız) · <ilk dolu kimlik>" basar;
   gercek baslikla karismasin diye soluk ve italik. */
.CardTitle.CardTitleFallback {
font-weight: 500;
font-style: italic;
color: #80868b;
}

.Theme_Dark .CardTitle.CardTitleFallback {
color: #9aa0a6;
}



/* META  : .Base.Views.ViewType.FolderSkeleton */
.FolderSkeletonWrapper{display:flex;flex-direction:column;width:100%;padding:4px 0;box-sizing:border-box;}.FolderSkeletonRow{display:flex;align-items:center;gap:10px;padding:8px;}.FolderSkeletonIcon{flex:0 0 20px;width:20px;height:20px;border-radius:4px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s infinite;}.Theme_Dark .FolderSkeletonIcon{background:linear-gradient(90deg,#383838 25%,#444 50%,#383838 75%);background-size:200% 100%;}.FolderSkeletonLabel{height:14px;border-radius:3px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s infinite;}.Theme_Dark .FolderSkeletonLabel{background:linear-gradient(90deg,#383838 25%,#444 50%,#383838 75%);background-size:200% 100%;}@media print{.FolderSkeletonWrapper{display:none;}}


/* META  : .Base.Views.ViewType.DashboardSkeleton */
.DashboardSkeletonContainer{display:grid;width:100%;padding:16px;box-sizing:border-box;gap:16px;grid-template-columns:repeat(3,1fr);}.DashboardSkeletonContainer[data-columns="1"]{grid-template-columns:1fr;}.DashboardSkeletonContainer[data-columns="2"]{grid-template-columns:repeat(2,1fr);}.DashboardSkeletonContainer[data-columns="3"]{grid-template-columns:repeat(3,1fr);}.DashboardSkeletonContainer[data-columns="4"]{grid-template-columns:repeat(4,1fr);}.DashboardSkeletonContainer[data-columns="6"]{grid-template-columns:repeat(6,1fr);}.DashboardSkeletonWidget{display:flex;align-items:flex-start;gap:14px;padding:20px;background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,0.06);}.Theme_Dark .DashboardSkeletonWidget{background:#2d2d2d;}.DashboardSkeletonIcon{flex:0 0 48px;width:48px;height:48px;border-radius:12px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s infinite;}.Theme_Dark .DashboardSkeletonIcon{background:linear-gradient(90deg,#383838 25%,#444 50%,#383838 75%);background-size:200% 100%;}.DashboardSkeletonBody{flex:1;display:flex;flex-direction:column;gap:10px;}.DashboardSkeletonValue{height:28px;width:60%;border-radius:4px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s infinite;}.Theme_Dark .DashboardSkeletonValue{background:linear-gradient(90deg,#383838 25%,#444 50%,#383838 75%);background-size:200% 100%;}.DashboardSkeletonLabel{height:13px;width:80%;border-radius:3px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s infinite;}.Theme_Dark .DashboardSkeletonLabel{background:linear-gradient(90deg,#383838 25%,#444 50%,#383838 75%);background-size:200% 100%;}@media(max-width:768px){.DashboardSkeletonContainer{grid-template-columns:repeat(2,1fr);padding:8px;}}@media(max-width:480px){.DashboardSkeletonContainer{grid-template-columns:1fr;}}@media print{.DashboardSkeletonContainer{display:none;}}


/* META  : .Base.Views.ViewType.ChartSkeleton */
.ChartSkeletonRect{display:block;width:100%;min-height:200px;height:100%;border-radius:6px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s infinite;}.Theme_Dark .ChartSkeletonRect{background:linear-gradient(90deg,#383838 25%,#444 50%,#383838 75%);background-size:200% 100%;}@media print{.ChartSkeletonRect{display:none;}}


/* META  : .Base.Views.ViewType.Dashboard */
.DashboardContainer {
display: grid;
width: 100%;
padding: 16px;
box-sizing: border-box;
gap: 16px;
}

.DashboardContainer[data-layout="Grid"] {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.DashboardContainer[data-layout="Flex"] {
display: flex;
flex-wrap: wrap;
}

.DashboardContainer[data-layout="Masonry"] {
display: block;
column-count: 3;
column-gap: 16px;
}

.DashboardContainer[data-columns="1"] { grid-template-columns: 1fr; }

.DashboardContainer[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }

.DashboardContainer[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }

.DashboardContainer[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }

.DashboardContainer[data-columns="6"] { grid-template-columns: repeat(6, 1fr); }

.DashboardContainer[data-layout="Masonry"][data-columns="2"] { column-count: 2; }

.DashboardContainer[data-layout="Masonry"][data-columns="3"] { column-count: 3; }

.DashboardContainer[data-layout="Masonry"][data-columns="4"] { column-count: 4; }

.DashboardContainer[data-gap="None"] { gap: 0; }

.DashboardContainer[data-gap="Small"] { gap: 8px; }

.DashboardContainer[data-gap="Medium"] { gap: 16px; }

.DashboardContainer[data-gap="Large"] { gap: 24px; }

.DashboardWidget[data-widget-style="Card"] {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.Theme_Dark .DashboardWidget[data-widget-style="Card"] {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.DashboardWidget[data-widget-style="Flat"] {
background: #fff;
border: none;
}

.DashboardWidget[data-widget-style="Outlined"] {
border: 1px solid #e0e0e0;
box-shadow: none;
}

.Theme_Dark .DashboardWidget[data-widget-style="Outlined"] {
border-color: #444;
}

.DashboardWidget[data-widget-style="Glass"] {
background: rgba(255, 255, 255, 0.7);
-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}

.Theme_Dark .DashboardWidget[data-widget-style="Glass"] {
background: rgba(45, 45, 45, 0.7);
border-color: rgba(255, 255, 255, 0.1);
}

.DashboardWidget[data-widget-radius="None"] { border-radius: 0; }

.DashboardWidget[data-widget-radius="Small"] { border-radius: 4px; }

.DashboardWidget[data-widget-radius="Medium"] { border-radius: 8px; }

.DashboardWidget[data-widget-radius="Large"] { border-radius: 16px; }

.DashboardWidget[data-widget-size="Small"] { padding: 12px; }

.DashboardWidget[data-widget-size="Medium"] { padding: 20px; }

.DashboardWidget[data-widget-size="Large"] { padding: 28px; }

.DashboardWidget[data-widget-size="XLarge"] { padding: 36px; }

.DashboardWidget[data-widget-span="1"] { grid-column: span 1; }

.DashboardWidget[data-widget-span="2"] { grid-column: span 2; }

.DashboardWidget[data-widget-span="3"] { grid-column: span 3; }

.DashboardWidget[data-widget-span="Full"] { grid-column: 1 / -1; }

.DashboardWidget[data-has-color="true"] {
border-left: 4px solid #4285f4;
}

.DashboardWidget:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.DashboardWidget[data-widget-style="Outlined"]:hover {
background: #f8f9fa;
transform: none;
box-shadow: none;
}

.Theme_Dark .DashboardWidget[data-widget-style="Outlined"]:hover {
background: #383838;
}

.DashboardWidgetContent {
display: flex;
align-items: flex-start;
gap: 16px;
flex: 1;
}

.DashboardWidgetIcon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #f0f4ff;
border-radius: 12px;
font-size: 24px;
color: #4285f4;
flex-shrink: 0;
}

.Theme_Dark .DashboardWidgetIcon {
background: #383838;
}

.DashboardWidgetText {
flex: 1;
min-width: 0;
}

.DashboardWidgetLabel {
font-size: 14px;
color: #5f6368;
margin-bottom: 4px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.Theme_Dark .DashboardWidgetLabel {
color: #9aa0a6;
}

.DashboardWidgetCount {
font-size: 12px;
color: #9aa0a6;
}

.Theme_Dark .DashboardWidgetCount {
color: #666;
}

.DashboardWidgetChange {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 14px;
font-weight: 500;
margin-top: 8px;
}

.DashboardWidgetChange[data-direction="up"] {
color: #34a853;
}

.DashboardWidgetChange[data-direction="down"] {
color: #ea4335;
}

.DashboardChangeArrow {
font-size: 10px;
}

.DashboardProgress {
margin-top: 16px;
}

.DashboardProgress[data-style="Bar"] {
display: flex;
align-items: center;
gap: 12px;
}

.DashboardProgressBar {
flex: 1;
height: 8px;
background: #e8eaed;
border-radius: 4px;
overflow: hidden;
}

.DashboardProgressBar .DashboardProgressFill {
height: 100%;
background: linear-gradient(90deg, #4285f4, #34a853);
border-radius: 4px;
transition: width 0.6s ease;
}

.DashboardProgressCircle .DashboardProgressFill {
fill: none;
stroke: #4285f4;
stroke-width: 6;
stroke-linecap: round;
transition: stroke-dashoffset 0.6s ease;
}

.DashboardProgressPercent {
font-size: 14px;
font-weight: 600;
color: #5f6368;
min-width: 45px;
text-align: right;
}

.DashboardProgress[data-style="Semicircle"] .DashboardProgressPercent {
position: absolute;
font-size: 12px;
}

.DashboardProgress[data-style="Semicircle"] {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.DashboardProgressCircle {
transform: rotate(-90deg);
}

.DashboardProgressCircle .DashboardProgressBg {
fill: none;
stroke: #e8eaed;
stroke-width: 6;
}

.Theme_Dark .DashboardProgressCircle .DashboardProgressBg {
background: #444;
stroke: #444;
}

.DashboardTrend {
position: absolute;
top: 16px;
right: 16px;
}

.DashboardTrendIcon {
font-size: 20px;
font-weight: bold;
}

.DashboardTrendIcon[data-direction="up"] {
color: #34a853;
}

.DashboardTrendIcon[data-direction="down"] {
color: #ea4335;
}

.DashboardEmptyState {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
color: #999;
}

.Theme_Dark .DashboardEmptyState {
color: #666;
}

.DashboardEmptyIcon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}

.DashboardEmptyText {
font-size: 16px;
}

.DashboardWidget {
animation: dashboardWidgetIn 0.3s ease-out both;
}

.DashboardWidget:nth-child(1) { animation-delay: 0s; }
.DashboardWidget:nth-child(2) { animation-delay: 0.05s; }
.DashboardWidget:nth-child(3) { animation-delay: 0.1s; }
.DashboardWidget:nth-child(4) { animation-delay: 0.15s; }
.DashboardWidget:nth-child(5) { animation-delay: 0.2s; }
.DashboardWidget:nth-child(6) { animation-delay: 0.25s; }

@keyframes dashboardWidgetIn {
from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
}
to {
    opacity: 1;
    transform: translateY(0) scale(1);
}
}

.DashboardWidgetIcon {
transition: transform 0.2s ease;
}

.DashboardWidget:hover .DashboardWidgetIcon {
transform: scale(1.1);
}
.DashboardWidgetHeader {
display: flex;
align-items: center;
justify-content: flex-end;
height: 20px;
margin-bottom: 4px;
}

.DashboardCollapseBtn {
background: none;
border: none;
cursor: pointer;
padding: 2px 4px;
font-size: 10px;
color: #9aa0a6;
line-height: 1;
border-radius: 3px;
transition: color 0.15s ease, background 0.15s ease;
opacity: 0;
transition: opacity 0.2s ease;
}

.DashboardWidget:hover .DashboardCollapseBtn {
opacity: 1;
}

.DashboardCollapseBtn:hover {
color: #5f6368;
background: #f1f3f4;
}

.Theme_Dark .DashboardCollapseBtn:hover {
background: #444;
color: #e8eaed;
}

.DashboardWidgetBody {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
transition: opacity 0.2s ease, max-height 0.3s ease;
}

.DashboardWidget[data-collapsed="true"] .DashboardWidgetBody {
display: none;
}

.DashboardWidget[data-collapsed="true"] {
min-height: auto;
}

.DashboardWidgetDragging {
opacity: 0.5;
transform: scale(0.97);
box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
z-index: 1000;
cursor: grabbing !important;
}

.DashboardDropTarget {
outline: 2px dashed #4285f4;
outline-offset: -2px;
background: rgba(66,133,244,0.05) !important;
}

.DashboardWidget[draggable="true"] {
cursor: grab;
}

.DashboardWidget[draggable="true"]:active {
cursor: grabbing;
}

.DashboardRefreshCountdown {
position: absolute;
top: 8px;
right: 8px;
width: 20px;
height: 20px;
z-index: 10;
pointer-events: none;
}

.DashboardCountdownSvg {
width: 20px;
height: 20px;
transform: rotate(-90deg);
}

.DashboardCountdownBg {
fill: none;
stroke: #e8eaed;
stroke-width: 2.5;
}

.Theme_Dark .DashboardCountdownBg {
stroke: #444;
}

.DashboardCountdownProgress {
fill: none;
stroke: #4285f4;
stroke-width: 2.5;
stroke-linecap: round;
}

.DashboardWidget:nth-child(7) { animation-delay: 0.3s; }
.DashboardWidget:nth-child(8) { animation-delay: 0.35s; }
.DashboardWidget:nth-child(9) { animation-delay: 0.4s; }
.DashboardWidget:nth-child(10) { animation-delay: 0.45s; }
.DashboardWidget:nth-child(11) { animation-delay: 0.5s; }
.DashboardWidget:nth-child(12) { animation-delay: 0.55s; }


/* META  : .Base.Views.ViewType.Dashboard.Dashboard_@media */
@media (max-width: 768px) {
.DashboardContainer {
    grid-template-columns: 1fr;
    padding: 8px;
}
.DashboardContainer[data-columns="2"],
.DashboardContainer[data-columns="3"],
.DashboardContainer[data-columns="4"],
.DashboardContainer[data-columns="6"] {
    grid-template-columns: repeat(2, 1fr);
}
.DashboardContainer[data-layout="Masonry"] {
    column-count: 2;
}
.DashboardWidget[data-widget-span="2"],
.DashboardWidget[data-widget-span="3"] {
    grid-column: span 1;
}
.DashboardWidget[data-widget-size="Large"] { padding: 20px; }
.DashboardWidget[data-widget-size="XLarge"] { padding: 24px; }
.DashboardWidget[data-widget-size="Large"] .DashboardWidgetValue,
.DashboardWidget[data-widget-size="XLarge"] .DashboardWidgetValue {
    font-size: 32px;
}
}

@media (max-width: 480px) {
.DashboardContainer,
.DashboardContainer[data-columns="2"],
.DashboardContainer[data-columns="3"],
.DashboardContainer[data-columns="4"],
.DashboardContainer[data-columns="6"] {
    grid-template-columns: 1fr;
}
.DashboardContainer[data-layout="Masonry"] {
    column-count: 1;
}
.DashboardWidgetContent {
    flex-direction: column;
    align-items: stretch;
}
.DashboardWidgetIcon {
    width: 40px;
    height: 40px;
    font-size: 20px;
}
}

@media print {
.DashboardContainer {
    display: block;
}
.DashboardWidget {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ddd;
    margin-bottom: 16px;
}
.DashboardWidget:hover {
    transform: none !important;
}
}


/* META  : .Base.Views.ViewType.Dashboard.Dashboard_DashboardWidget */
.DashboardWidget {
display: flex;
flex-direction: column;
background: #fff;
padding: 20px;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
box-sizing: border-box;
}

.DashboardContainer[data-layout="Masonry"] .DashboardWidget {
break-inside: avoid;
margin-bottom: 16px;
}

.DashboardContainer[data-layout="Flex"] .DashboardWidget {
flex: 1 1 280px;
margin: 8px;
}

.Theme_Dark .DashboardWidget {
background: #2d2d2d;
}


/* META  : .Base.Views.ViewType.Dashboard.Dashboard_DashboardWidgetValue */
.DashboardWidget[data-widget-size="Small"] .DashboardWidgetValue { font-size: 24px; }

.DashboardWidget[data-widget-size="Medium"] .DashboardWidgetValue { font-size: 32px; }

.DashboardWidget[data-widget-size="Large"] .DashboardWidgetValue { font-size: 42px; }

.DashboardWidget[data-widget-size="XLarge"] .DashboardWidgetValue { font-size: 54px; }

.DashboardWidgetValue {
font-size: 32px;
font-weight: 700;
color: #202124;
line-height: 1.2;
margin-bottom: 4px;
}

.Theme_Dark .DashboardWidgetValue {
color: #e8eaed;
}


/* META  : .Base.Views.ViewType.Gallery */
.GalleryContainer {
display: grid;
width: 100%;
padding: 8px;
box-sizing: border-box;
}

.GalleryContainer[data-layout="Grid"] {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.GalleryContainer[data-layout="Masonry"] {
display: block;
column-count: auto;
column-width: 200px;
}

.GalleryContainer[data-layout="Justified"] {
display: flex;
flex-wrap: wrap;
}

.GalleryContainer[data-layout="Carousel"] {
display: block;
position: relative;
overflow: hidden;
}

.GalleryContainer[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }

.GalleryContainer[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }

.GalleryContainer[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }

.GalleryContainer[data-columns="5"] { grid-template-columns: repeat(5, 1fr); }

.GalleryContainer[data-columns="6"] { grid-template-columns: repeat(6, 1fr); }

.GalleryContainer[data-layout="Masonry"][data-columns="2"] { column-count: 2; }

.GalleryContainer[data-layout="Masonry"][data-columns="3"] { column-count: 3; }

.GalleryContainer[data-layout="Masonry"][data-columns="4"] { column-count: 4; }

.GalleryContainer[data-layout="Masonry"][data-columns="5"] { column-count: 5; }

.GalleryContainer[data-layout="Masonry"][data-columns="6"] { column-count: 6; }

.GalleryContainer[data-gap="None"] { gap: 0; }

.GalleryContainer[data-gap="Small"] { gap: 4px; }

.GalleryContainer[data-gap="Medium"] { gap: 8px; }

.GalleryContainer[data-gap="Large"] { gap: 16px; }

.GalleryContainer[data-layout="Masonry"][data-gap="None"] { column-gap: 0; }

.GalleryContainer[data-layout="Masonry"][data-gap="Small"] { column-gap: 4px; }

.GalleryContainer[data-layout="Masonry"][data-gap="Medium"] { column-gap: 8px; }

.GalleryContainer[data-layout="Masonry"][data-gap="Large"] { column-gap: 16px; }

.GalleryItem[data-ratio="Square"] { aspect-ratio: 1 / 1; }

.GalleryItem[data-ratio="4:3"] { aspect-ratio: 4 / 3; }

.GalleryItem[data-ratio="16:9"] { aspect-ratio: 16 / 9; }

.GalleryItem[data-ratio="3:2"] { aspect-ratio: 3 / 2; }

.GalleryItem[data-ratio="Original"] { aspect-ratio: auto; }

.GalleryItem[data-radius="None"] { border-radius: 0; }

.GalleryItem[data-radius="Small"] { border-radius: 4px; }

.GalleryItem[data-radius="Medium"] { border-radius: 8px; }

.GalleryItem[data-radius="Large"] { border-radius: 16px; }

.GalleryItem[data-radius="Round"] { border-radius: 50%; }

.GalleryImageWrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}

.GalleryContainer[data-layout="Masonry"] .GalleryImageWrapper {
position: relative;
}

.GalleryImageWrapper[data-placeholder="Blur"] {
background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
filter: blur(5px);
}

.GalleryImageWrapper[data-placeholder="Color"] {
background: #e8eaed;
}

.GalleryImageWrapper[data-placeholder="Skeleton"] {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: gallerySkeletonShimmer 1.5s infinite;
}

.GalleryImage[data-fit="Cover"] { object-fit: cover; }

.GalleryImage[data-fit="Contain"] { object-fit: contain; }

.GalleryImage[data-fit="Fill"] { object-fit: fill; }

.GalleryImageWrapper.GalleryImageError {
background: #f5f5f5;
}

.GalleryImageWrapper.GalleryImageError::after {
content: "⚠";
font-size: 24px;
color: #999;
}

.GalleryItem[data-hover="Lift"]:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.GalleryOverlay {
position: absolute;
left: 0;
right: 0;
padding: 12px;
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
flex-direction: column;
justify-content: flex-end;
}

.GalleryItem:hover .GalleryOverlay {
opacity: 1;
}

.GalleryOverlay[data-position="Bottom"] {
bottom: 0;
}

.GalleryOverlay[data-position="Top"] {
top: 0;
justify-content: flex-start;
}

.GalleryOverlay[data-position="Full"] {
top: 0;
bottom: 0;
justify-content: center;
align-items: center;
text-align: center;
}

.GalleryOverlay[data-style="Gradient"] {
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

.GalleryOverlay[data-style="Gradient"][data-position="Top"] {
background: linear-gradient(rgba(0, 0, 0, 0.7), transparent);
}

.GalleryOverlay[data-style="Gradient"][data-position="Full"] {
background: rgba(0, 0, 0, 0.5);
}

.GalleryOverlay[data-style="Solid"] {
background: rgba(0, 0, 0, 0.6);
}

.GalleryCaptionBelow {
padding: 8px;
background: #fff;
}

.Theme_Dark .GalleryCaptionBelow {
background: #2d2d2d;
}

.GalleryItem[data-selected="true"] {
outline: 3px solid #4285f4;
outline-offset: -3px;
}

.GalleryItem[data-animation="FadeIn"] {
opacity: 0;
animation: galleryFadeIn 0.4s ease forwards;
}

.GalleryItem[data-animation="ZoomIn"] {
opacity: 0;
transform: scale(0.8);
animation: galleryZoomIn 0.4s ease forwards;
}

.GalleryItem[data-animation="SlideUp"] {
opacity: 0;
transform: translateY(20px);
animation: gallerySlideUp 0.4s ease forwards;
}

.GalleryGroup {
margin-bottom: 24px;
}

.GalleryGroupHeader {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 8px;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 8px;
}

.Theme_Dark .GalleryGroupHeader {
border-bottom-color: #444;
}

.GalleryGroupTitle {
font-size: 16px;
font-weight: 600;
color: #202124;
}

.Theme_Dark .GalleryGroupTitle {
color: #e8eaed;
}

.GalleryGroupCount {
font-size: 13px;
color: #5f6368;
}

.GalleryGroupContent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.GalleryCarouselWrapper {
position: relative;
overflow: hidden;
}

.GalleryCarouselTrack {
display: flex;
transition: transform 0.5s ease;
}

.GalleryCarouselSlide {
flex: 0 0 100%;
opacity: 0.5;
transition: opacity 0.3s;
}

.GalleryCarouselNext:hover {
background: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.GalleryCarouselPrev { left: 16px; }

.GalleryCarouselDots {
display: flex;
justify-content: center;
gap: 8px;
padding: 16px;
}

.GalleryCarouselDot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ddd;
cursor: pointer;
transition: all 0.2s;
}

.Theme_Dark .GalleryCarouselDot {
background: #555;
}

.GalleryCarouselDot:hover {
background: #bbb;
}

.GalleryLightbox {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.95);
z-index: 10000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}

.GalleryLightboxClose {
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: #fff;
cursor: pointer;
z-index: 10;
opacity: 0.7;
transition: opacity 0.2s;
}

.GalleryLightboxClose:hover {
opacity: 1;
}

.GalleryLightboxContent {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 60px;
box-sizing: border-box;
}

.GalleryLightboxImage {
max-width: 100%;
max-height: 100%;
object-fit: contain;
cursor: zoom-in;
transition: transform 0.3s;
}

.GalleryLightboxImage.zoomed {
transform: scale(2);
cursor: zoom-out;
}

.GalleryLightboxCaption {
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 16px;
text-align: center;
max-width: 80%;
}

.GalleryLightboxCounter {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}

.GalleryLightboxNext {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #fff;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s;
z-index: 10;
}

.GalleryLightboxNext { right: 16px; }

.GalleryLightboxNext:hover {
opacity: 1;
}

.GalleryLightboxPrev { left: 16px; }

.GalleryEmptyState {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
color: #999;
}

.Theme_Dark .GalleryEmptyState {
color: #666;
}

.GalleryEmptyIcon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}

.GalleryEmptyText {
font-size: 16px;
}


/* META  : .Base.Views.ViewType.Gallery.Gallery_@keyframes */
@keyframes gallerySkeletonShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

@keyframes galleryFadeIn {
to { opacity: 1; }
}

@keyframes galleryZoomIn {
to { opacity: 1; transform: scale(1); }
}

@keyframes gallerySlideUp {
to { opacity: 1; transform: translateY(0); }
}


/* META  : .Base.Views.ViewType.Gallery.Gallery_@media */
@media (max-width: 768px) {
.GalleryContainer {
    grid-template-columns: repeat(2, 1fr);
    padding: 4px;
}
.GalleryContainer[data-columns="3"],
.GalleryContainer[data-columns="4"],
.GalleryContainer[data-columns="5"],
.GalleryContainer[data-columns="6"] {
    grid-template-columns: repeat(3, 1fr);
}
.GalleryContainer[data-layout="Masonry"] {
    column-count: 2;
}
.GalleryCarouselPrev,
.GalleryCarouselNext {
    width: 36px;
    height: 36px;
    font-size: 16px;
}
.GalleryLightboxContent {
    padding: 40px 16px;
}
.GalleryLightboxPrev,
.GalleryLightboxNext {
    width: 44px;
    height: 44px;
    font-size: 22px;
}
}

@media (max-width: 480px) {
.GalleryContainer,
.GalleryContainer[data-columns="3"],
.GalleryContainer[data-columns="4"],
.GalleryContainer[data-columns="5"],
.GalleryContainer[data-columns="6"] {
    grid-template-columns: repeat(2, 1fr);
}
.GalleryContainer[data-layout="Masonry"] {
    column-count: 2;
}
.GalleryGroupContent {
    grid-template-columns: repeat(2, 1fr);
}
}

@media print {
.GalleryContainer {
    display: block;
}
.GalleryItem {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 8px;
}
.GalleryOverlay {
    opacity: 1 !important;
    background: none !important;
}
.GalleryCaption,
.GalleryDescription {
    color: #000 !important;
    text-shadow: none !important;
}
.GalleryLightbox {
    display: none !important;
}
.GallerySelectBox {
    display: none;
}
.GalleryItem[data-animation] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}
}


/* META  : .Base.Views.ViewType.Gallery.Gallery_GalleryCaption */
.GalleryCaption {
color: #fff;
font-size: 14px;
font-weight: 500;
line-height: 1.3;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.GalleryCaptionBelow .GalleryCaption {
color: #202124;
text-shadow: none;
}

.Theme_Dark .GalleryCaptionBelow .GalleryCaption {
color: #e8eaed;
}


/* META  : .Base.Views.ViewType.Gallery.Gallery_GalleryCarouselNext */
.GalleryCarouselNext {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
cursor: pointer;
font-size: 20px;
color: #333;
z-index: 10;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition: all 0.2s;
}

.GalleryCarouselNext { right: 16px; }

.Theme_Dark .GalleryCarouselNext {
background: rgba(45, 45, 45, 0.9);
color: #e8eaed;
}


/* META  : .Base.Views.ViewType.Gallery.Gallery_GalleryDescription */
.GalleryDescription {
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
margin-top: 4px;
line-height: 1.4;
}

.GalleryCaptionBelow .GalleryDescription {
color: #5f6368;
}

.Theme_Dark .GalleryCaptionBelow .GalleryDescription {
color: #9aa0a6;
}


/* META  : .Base.Views.ViewType.Gallery.Gallery_GalleryImage */
.GalleryImage {
width: 100%;
height: 100%;
display: block;
transition: transform 0.3s ease, filter 0.3s ease;
}

.GalleryImageWrapper.GalleryImageError .GalleryImage {
display: none;
}

.GalleryItem[data-hover="Zoom"]:hover .GalleryImage {
transform: scale(1.1);
}

.GalleryItem[data-hover="Brighten"]:hover .GalleryImage {
filter: brightness(1.1);
}


/* META  : .Base.Views.ViewType.Gallery.Gallery_GalleryItem */
.GalleryItem {
position: relative;
overflow: hidden;
cursor: pointer;
background: #f0f0f0;
}

.GalleryContainer[data-layout="Masonry"] .GalleryItem {
break-inside: avoid;
margin-bottom: 4px;
}

.GalleryContainer[data-layout="Justified"] .GalleryItem {
flex: 1 1 200px;
max-width: 300px;
margin: 2px;
}

.GalleryContainer[data-layout="Masonry"] .GalleryItem {
aspect-ratio: auto !important;
}

.Theme_Dark .GalleryItem {
background: #383838;
}


/* META  : .Base.Views.ViewType.Gallery.Gallery_GallerySelectBox */
.GallerySelectBox {
position: absolute;
top: 8px;
left: 8px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.9);
border-radius: 4px;
cursor: pointer;
z-index: 3;
opacity: 0;
transition: opacity 0.2s;
}

.GalleryItem[data-selected="true"] .GallerySelectBox {
opacity: 1;
}

.Theme_Dark .GallerySelectBox {
background: rgba(45, 45, 45, 0.9);
color: #e8eaed;
}


/* META  : .Base.Views.ViewType.Gallery.Gallery_active */
.GalleryCarouselSlide.active {
opacity: 1;
}

.GalleryCarouselDot.active {
background: #4285f4;
transform: scale(1.2);
}

.GalleryLightbox.active {
opacity: 1;
visibility: visible;
}


/* META  : .Base.Views.ViewType.Gallery.Gallery_Premium */
.GalleryWrapper { position: relative; width: 100%; }
.GalleryCountBadge { position: absolute; top: 8px; right: 12px; font-size: 12px; font-weight: 500; color: #5f6368; background: rgba(255,255,255,0.9); padding: 4px 12px; border-radius: 20px; z-index: 5; -webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.Theme_Dark .GalleryCountBadge { background: rgba(45,45,45,0.9); color: #9aa0a6; }
.GalleryToolbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; margin-bottom: 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); flex-wrap: wrap; }
.Theme_Dark .GalleryToolbar { background: #2d2d2d; border-color: #444; }
.GalleryToolbarGroup { display: flex; align-items: center; gap: 2px; background: #f1f5f9; border-radius: 8px; padding: 2px; }
.Theme_Dark .GalleryToolbarGroup { background: #383838; }
.GalleryToolbarBtn { display: flex; align-items: center; justify-content: center; min-width: 32px; height: 30px; padding: 0 8px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500; color: #64748b; transition: all 0.15s ease; user-select: none; }
.GalleryToolbarBtn:hover { background: #fff; color: #1e293b; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.GalleryToolbarBtn.active { background: #fff; color: #3b82f6; box-shadow: 0 1px 3px rgba(0,0,0,0.08); font-weight: 600; }
.Theme_Dark .GalleryToolbarBtn:hover { background: #444; color: #e8eaed; }
.Theme_Dark .GalleryToolbarBtn.active { background: #444; color: #60a5fa; }
.GalleryToolbarSep { width: 1px; height: 20px; background: #e2e8f0; margin: 0 4px; flex-shrink: 0; }
.Theme_Dark .GalleryToolbarSep { background: #444; }
.GallerySearchWrap { display: flex; align-items: center; gap: 6px; background: #f1f5f9; border-radius: 8px; padding: 4px 10px; flex: 0 1 200px; min-width: 120px; }
.Theme_Dark .GallerySearchWrap { background: #383838; }
.GallerySearchIcon { font-size: 13px; color: #94a3b8; flex-shrink: 0; }
.GallerySearchInput { flex: 1; min-height: 20px; font-size: 13px; color: #1e293b; outline: none; white-space: nowrap; overflow: hidden; }
.GallerySearchInput:empty::before { content: attr(data-placeholder); color: #94a3b8; }
.Theme_Dark .GallerySearchInput { color: #e8eaed; }
.GalleryBulkActions { margin-left: auto; }
.GallerySelectionCounter { font-size: 11px; font-weight: 600; color: #3b82f6; background: rgba(59,130,246,0.1); padding: 2px 8px; border-radius: 10px; min-width: 20px; text-align: center; }
.GallerySortMenu { position: fixed; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 160px; max-height: 300px; overflow-y: auto; z-index: 10001; padding: 4px; }
.Theme_Dark .GallerySortMenu { background: #2d2d2d; border-color: #444; }
.GallerySortMenuItem { display: flex; align-items: center; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; color: #1e293b; transition: background 0.12s; }
.GallerySortMenuItem:hover { background: #f1f5f9; }
.GallerySortMenuItem.active { color: #3b82f6; font-weight: 600; }
.Theme_Dark .GallerySortMenuItem { color: #e8eaed; }
.Theme_Dark .GallerySortMenuItem:hover { background: #383838; }
.GallerySkeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; padding: 8px; }
.GallerySkeleton[data-layout="Masonry"] { display: block; column-count: 3; column-gap: 8px; }
.GallerySkeletonItem { position: relative; overflow: hidden; border-radius: 8px; background: #fff; border: 1px solid #f0f0f0; }
.GallerySkeletonItem[data-ratio="Square"] { aspect-ratio: 1/1; }
.GallerySkeletonItem[data-ratio="4:3"] { aspect-ratio: 4/3; }
.GallerySkeletonItem[data-ratio="16:9"] { aspect-ratio: 16/9; }
.GallerySkeletonItem[data-ratio="3:2"] { aspect-ratio: 3/2; }
.Theme_Dark .GallerySkeletonItem { background: #383838; border-color: #444; }
.GallerySkeletonImage { width: 100%; height: 70%; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: gallerySkeletonShimmer 1.5s infinite; }
.Theme_Dark .GallerySkeletonImage { background: linear-gradient(90deg, #383838 25%, #444 50%, #383838 75%); background-size: 200% 100%; }
.GallerySkeletonText { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.GallerySkeletonLine { height: 12px; border-radius: 4px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: gallerySkeletonShimmer 1.5s infinite; }
.Theme_Dark .GallerySkeletonLine { background: linear-gradient(90deg, #383838 25%, #444 50%, #383838 75%); background-size: 200% 100%; }
.GalleryHoverActions { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; z-index: 4; opacity: 0; transform: translateY(-4px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; }
.GalleryItem:hover .GalleryHoverActions { opacity: 1; transform: translateY(0); pointer-events: auto; }
.GalleryHoverBtn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.95); border-radius: 8px; cursor: pointer; font-size: 14px; color: #334155; box-shadow: 0 2px 8px rgba(0,0,0,0.12); transition: all 0.15s ease; -webkit-backdrop-filter: blur(4px);backdrop-filter: blur(4px); }
.GalleryHoverBtn:hover { background: #fff; transform: scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,0.18); color: #3b82f6; }
.Theme_Dark .GalleryHoverBtn { background: rgba(45,45,45,0.95); color: #e8eaed; }
.Theme_Dark .GalleryHoverBtn:hover { background: #444; color: #60a5fa; }
.GalleryItem:hover .GalleryOverlay { animation: galleryOverlaySlideUp 0.25s ease forwards; }
@keyframes galleryOverlaySlideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.GalleryItem { border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.GalleryItem:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.GalleryItem:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.GalleryContainer[data-image-size="Small"] { gap: 4px; }
.GalleryContainer[data-image-size="Large"] { gap: 12px; }
.GalleryContainer[data-image-size="Large"][data-layout="Grid"] { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.GalleryContainer[data-image-size="XL"] { gap: 16px; padding: 16px; }
.GalleryContainer[data-image-size="XL"][data-layout="Grid"] { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.GalleryItemContentView { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px; background: linear-gradient(transparent, rgba(0,0,0,0.6)); z-index: 2; font-size: 12px; color: #fff; }
.Theme_Dark .GalleryItemContentView { background: linear-gradient(transparent, rgba(0,0,0,0.8)); }
.GalleryEmptyPremium { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; text-align: center; }
.GalleryEmptyPremiumIcon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background: #f1f5f9; border-radius: 50%; margin-bottom: 20px; font-size: 32px; color: #94a3b8; }
.Theme_Dark .GalleryEmptyPremiumIcon { background: #383838; color: #666; }
.GalleryEmptyPremiumTitle { font-size: 18px; font-weight: 600; color: #1e293b; margin-bottom: 8px; }
.Theme_Dark .GalleryEmptyPremiumTitle { color: #e8eaed; }
.GalleryEmptyPremiumSubtitle { font-size: 14px; color: #64748b; margin-bottom: 24px; }
.Theme_Dark .GalleryEmptyPremiumSubtitle { color: #9aa0a6; }
.GalleryEmptyCTABtn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; background: #3b82f6; color: #fff; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; box-shadow: 0 2px 8px rgba(59,130,246,0.3); }
.GalleryEmptyCTABtn:hover { background: #2563eb; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59,130,246,0.4); }
.GalleryLightboxTopBar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: linear-gradient(rgba(0,0,0,0.6), transparent); z-index: 11; }
.GalleryLightboxInfo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.GalleryLightboxActions { display: flex; gap: 4px; }
.GalleryLightboxActionBtn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.15); border-radius: 8px; cursor: pointer; color: #fff; font-size: 16px; transition: all 0.15s ease; -webkit-backdrop-filter: blur(4px);backdrop-filter: blur(4px); }
.GalleryLightboxActionBtn:hover { background: rgba(255,255,255,0.3); transform: scale(1.1); }
.GalleryLightboxZoomControls { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.6); border-radius: 8px; padding: 4px; -webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px); z-index: 11; }
.GalleryLightboxZoomBtn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.15); border-radius: 6px; cursor: pointer; color: #fff; font-size: 14px; transition: background 0.15s; }
.GalleryLightboxZoomBtn:hover { background: rgba(255,255,255,0.3); }
.GalleryZoomReset { min-width: 48px; font-size: 11px; font-weight: 600; }
.GalleryLightboxThumbs { position: absolute; bottom: 0; left: 0; right: 0; display: flex; gap: 4px; padding: 12px 20px; overflow-x: auto; background: linear-gradient(transparent, rgba(0,0,0,0.6)); z-index: 11; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent; }
.GalleryLightboxThumbs::-webkit-scrollbar { height: 4px; }
.GalleryLightboxThumbs::-webkit-scrollbar-track { background: transparent; }
.GalleryLightboxThumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; }
.GalleryLightboxThumb { flex: 0 0 48px; height: 48px; border-radius: 6px; overflow: hidden; cursor: pointer; opacity: 0.5; transition: all 0.15s ease; border: 2px solid transparent; }
.GalleryLightboxThumb:hover { opacity: 0.8; }
.GalleryLightboxThumb.active { opacity: 1; border-color: #fff; transform: scale(1.05); }
.GalleryLightboxThumbImg { width: 100%; height: 100%; object-fit: cover; }
.GalleryGroup[data-collapsible="true"] .GalleryGroupHeader { cursor: pointer; user-select: none; }
.GalleryGroup[data-collapsible="true"] .GalleryGroupHeader:hover { background: #f8fafc; border-radius: 8px; }
.Theme_Dark .GalleryGroup[data-collapsible="true"] .GalleryGroupHeader:hover { background: #383838; }
.GalleryGroupToggle { font-size: 10px; color: #94a3b8; transition: transform 0.2s ease; flex-shrink: 0; }
.GalleryGroupHeader.collapsed .GalleryGroupToggle { transform: rotate(-90deg); }
.GalleryGroupClosed .GalleryGroupContent { display: none; }
.GalleryGroupThumbs { display: flex; gap: 2px; margin-left: auto; flex-shrink: 0; }
.GalleryGroupThumb { width: 28px; height: 28px; border-radius: 4px; overflow: hidden; border: 1px solid rgba(255,255,255,0.2); }
.GalleryGroupThumbImg { width: 100%; height: 100%; object-fit: cover; }
.GalleryCarouselWrapper { border-radius: 12px; overflow: hidden; }
.GalleryCarouselPrev, .GalleryCarouselNext { opacity: 0; transition: opacity 0.2s ease, background 0.15s ease, transform 0.15s ease; }
.GalleryCarouselWrapper:hover .GalleryCarouselPrev, .GalleryCarouselWrapper:hover .GalleryCarouselNext { opacity: 1; }
.GalleryCarouselPrev:hover, .GalleryCarouselNext:hover { transform: translateY(-50%) scale(1.1); }
@media (max-width: 1024px) { .GalleryContainer[data-columns="5"], .GalleryContainer[data-columns="6"] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .GalleryToolbar { padding: 6px 8px; gap: 4px; } .GallerySearchWrap { flex: 1 1 100%; min-width: 0; } .GalleryToolbarSep { display: none; } .GalleryGroupThumbs { display: none; } .GalleryLightboxZoomControls { bottom: 100px; } }
@media (max-width: 480px) { .GalleryToolbarGroup { gap: 1px; } .GalleryToolbarBtn { min-width: 28px; height: 26px; font-size: 11px; padding: 0 6px; } .GalleryHoverActions { display: none; } .GalleryLightboxTopBar { padding: 8px 12px; } .GalleryLightboxActions { gap: 2px; } .GalleryLightboxActionBtn { width: 30px; height: 30px; font-size: 14px; } .GalleryLightboxZoomControls { bottom: 80px; padding: 2px; gap: 2px; } .GalleryLightboxZoomBtn { width: 28px; height: 28px; font-size: 12px; } .GalleryLightboxThumbs { padding: 8px 12px; } .GalleryLightboxThumb { flex: 0 0 40px; height: 40px; } }
.Theme_Dark .GalleryToolbar { box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.Theme_Dark .GalleryItem { box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.Theme_Dark .GalleryItem:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.Theme_Dark .GalleryEmptyPremium { color: #e8eaed; }
.Theme_Dark .GallerySortMenu { box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.GalleryItem:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; z-index: 5; }
.GalleryToolbarBtn:focus-visible, .GalleryHoverBtn:focus-visible, .GalleryLightboxActionBtn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .GalleryItem[data-animation] { animation: none !important; opacity: 1 !important; transform: none !important; } .GalleryItem { transition: none !important; } .GalleryHoverActions { transition: none !important; } .GalleryOverlay { transition: none !important; } }
@media print { .GalleryToolbar { display: none !important; } .GalleryHoverActions { display: none !important; } .GalleryCountBadge { display: none !important; } .GallerySelectBox { display: none !important; } .GalleryLightbox { display: none !important; } .GalleryItem { break-inside: avoid; page-break-inside: avoid; box-shadow: none !important; border: 1px solid #ddd; } .GalleryOverlay { opacity: 1 !important; background: none !important; } .GalleryCaption, .GalleryDescription { color: #000 !important; text-shadow: none !important; } }


/* META  : .Base.Views.ViewType.Gantt */
.GanttContainer {
display: flex;
width: 100%;
height: 100%;
min-height: 400px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
font-size: 13px;
}

.Theme_Dark .GanttContainer {
background: #2d2d2d;
border-color: #444;
}

.GanttTaskList {
flex-shrink: 0;
border-right: 1px solid #e0e0e0;
background: #fafafa;
display: flex;
flex-direction: column;
}

.Theme_Dark .GanttTaskList {
background: #252525;
border-right-color: #444;
}

.GanttTaskListHeader {
display: flex;
align-items: center;
padding: 0 12px;
background: #f5f5f5;
border-bottom: 1px solid #e0e0e0;
font-weight: 600;
color: #333;
}

.GanttTaskListHeaderTitle {
flex: 1;
}

.GanttTaskListBody {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}

.GanttTaskRow {
display: flex;
align-items: center;
padding: 0 12px;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
transition: background 0.15s;
}

.Theme_Dark .GanttTaskRow {
border-bottom-color: #383838;
}

.GanttTaskRow:hover {
background: #e8f0fe;
}

.Theme_Dark .GanttTaskRow:hover {
background: #383838;
}

.GanttTaskTitle {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
}

.Theme_Dark .GanttTaskTitle {
color: #e8eaed;
}

.GanttTimeline {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}

.GanttTimelineHeader {
flex-shrink: 0;
background: #f5f5f5;
border-bottom: 1px solid #e0e0e0;
overflow: hidden;
}

.Theme_Dark .GanttTimelineHeader {
background: #333;
border-bottom-color: #444;
}

.GanttTimelineHeaderRow {
display: flex;
white-space: nowrap;
}

.GanttTimelineHeaderTop {
background: #f0f0f0;
border-bottom: 1px solid #e0e0e0;
}

.GanttHeaderCell.GanttWeekend {
background: #fafafa;
color: #999;
}

.Theme_Dark .GanttHeaderCell.GanttWeekend {
background: #2a2a2a;
}

.GanttHeaderCell.GanttToday {
background: #e8f0fe;
color: #1a73e8;
font-weight: 600;
}

.Theme_Dark .GanttHeaderCell.GanttToday {
background: #1a3a5c;
color: #8ab4f8;
}

.GanttTimelineBody {
flex: 1;
position: relative;
overflow: auto;
background: #fff;
}

.Theme_Dark .GanttTimelineBody {
background: #2d2d2d;
}

.GanttGrid {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}

.GanttGridLineH {
position: absolute;
left: 0;
right: 0;
height: 1px;
background: #f0f0f0;
}

.GanttGridLineV {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: #f0f0f0;
}

.Theme_Dark .GanttGridLineV {
background: #383838;
}

.GanttWeekendBg {
position: absolute;
top: 0;
background: rgba(0, 0, 0, 0.02);
}

.Theme_Dark .GanttWeekendBg {
background: rgba(255, 255, 255, 0.02);
}

.GanttTodayLine {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background: #ea4335;
z-index: 10;
}

.GanttTodayLine::before {
content: "";
position: absolute;
top: -4px;
left: -4px;
width: 10px;
height: 10px;
background: #ea4335;
border-radius: 50%;
}

.GanttBarsContainer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.GanttBar:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
z-index: 6;
}

.GanttBarLabel {
padding: 0 8px;
color: #fff;
font-size: 11px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.GanttBarProgress {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.3);
pointer-events: none;
}

.GanttEmptyState {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
color: #999;
}

.Theme_Dark .GanttEmptyState {
color: #666;
}

.GanttEmptyIcon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}

.GanttEmptyText {
font-size: 16px;
}

/* 2026-09-15 — BOS GANTT GORUNUMU ICERIGINE BUYUR. Mutlak ETV govdesi yukseklige katki vermiyor; GanttContainer'in
   bos-durum tabani (mobil 300px) govdeden tasiyordu. OLCULDU (PPSchedulingScenario mobil): ETV 419-609px, bos-durum 465-763px —
   kart takvim ikonunun altinda kesiliyor, "Gorev bulunamadi" metni ve CTA kartin DISINDA.
   Once "kabi govdeye sigdir" denendi (min-height:min(300px,100%)): tasma sayisi 0 oldu ama metin ALTTAN KIRPILDI — reddedildi.
   Yalniz BOS Gantt'ta govde akisa girer; dolu Gantt'in mutlak govde sozlesmesine dokunulmaz.
   A/B: mobil 1->0 (ETV 190->346px, bos-durum tamami kartin icinde — oge karesiyle dogrulandi), masaustu kontrol degismedi. */
.Content .EntityTypeView.NoItems.View_Gantt > .EntityTypeViewBody > .Center > .Middle {
height: auto !important;
min-height: 0 !important;
}
.Content .EntityTypeView.NoItems.View_Gantt > .EntityTypeViewBody > .Center > .Middle > .ETWBody {
position: relative !important;
inset: auto !important;
height: auto !important;
min-height: 0 !important;
}

@media (max-width: 768px) {
.GanttContainer {
    flex-direction: column;
    min-height: 300px;
}
.GanttTaskList {
    width: 100% !important;
    max-height: 150px;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
}
.GanttTimeline {
    margin-left: 0 !important;
}
.GanttTaskListBody {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
}
.GanttTaskRow {
    flex-shrink: 0;
    width: auto;
    padding: 0 16px;
}
}

@media print {
.GanttContainer {
    border: 1px solid #ddd;
    min-height: auto;
}
.GanttBar {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.GanttTodayLine {
    display: none;
}
.GanttTaskRow:hover {
    background: transparent;
}
.GanttBar:hover {
    transform: none;
    box-shadow: none;
}
}



/* META  : .Base.Views.ViewType.Gantt.Gantt_GanttBar */
.GanttBar {
position: absolute;
background: #4285f4;
cursor: pointer;
display: flex;
align-items: center;
overflow: hidden;
transition: transform 0.15s, box-shadow 0.15s;
z-index: 5;
}

.GanttContainer[data-bar-style="Flat"] .GanttBar {
border-radius: 0;
}

.GanttContainer[data-bar-style="Rounded"] .GanttBar {
border-radius: 4px;
}

.GanttContainer[data-bar-style="Pill"] .GanttBar {
border-radius: 100px;
}



/* META  : .Base.Views.ViewType.Gantt.Gantt_GanttHeaderCell */
.GanttHeaderCell {
display: inline-flex;
align-items: center;
justify-content: center;
border-right: 1px solid #e0e0e0;
font-size: 12px;
color: #666;
flex-shrink: 0;
box-sizing: border-box;
}

.GanttContainer[data-view-mode="Hour"] .GanttHeaderCell {
font-size: 11px;
}

.GanttContainer[data-view-mode="Year"] .GanttHeaderCell {
font-size: 12px;
}

.Theme_Dark .GanttHeaderCell {
border-right-color: #444;
color: #9aa0a6;
}



/* META  : .Base.Views.ViewType.Gantt.Gantt_GanttHeaderGroup */
.GanttHeaderGroup {
font-weight: 600;
color: #333;
background: #f0f0f0;
}

.Theme_Dark .GanttHeaderGroup {
background: #383838;
}

.Theme_Dark .GanttHeaderGroup {
color: #e8eaed;
}



/* META  : .Base.Views.ViewType.Spreadsheet */
/* ============================================================
   SpreadSheet (Tablo) — premium single-tree sticky architecture
   2026-07-06 (SPREAD-SHEET). Frozen cols via position:sticky; one
   scroll container drives header (sticky-top) + frozen cols (sticky-left).
   ============================================================ */
.SpreadsheetContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  color: var(--ss-text);
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  border-radius: 8px;
  /* geometry */
  --ss-row-h: 36px;
  --ss-head-h: 40px;
  /* light palette (dark overridden in CssKey=374) */
  --ss-surface: var(--surface-color, #ffffff);
  --ss-header-bg: var(--header-bg, #f5f7f9);
  --ss-border: var(--border-color, #e6e8eb);
  --ss-border-strong: var(--border-color, #d3d7dc);
  --ss-text: var(--text-primary, #1f2328);
  --ss-text2: var(--text-secondary, #656d76);
  --ss-accent: var(--primary-color, #2563eb);
  --ss-zebra-bg: #f6f8fa;
  --ss-hover-bg: #eef4ff;
  --ss-sel-bg: #e3edff;
  --ss-sel-border: rgba(37, 99, 235, 0.55);
  --ss-shadow: rgba(15, 23, 42, 0.08);
}
.SpreadsheetContainer[data-row-height="Small"]  { --ss-row-h: 30px; }
.SpreadsheetContainer[data-row-height="Large"]   { --ss-row-h: 46px; }
.SpreadsheetContainer[data-header-height="Small"] { --ss-head-h: 34px; }
.SpreadsheetContainer[data-header-height="Large"] { --ss-head-h: 48px; }

/* ---- Toolbar ---- */
.SpreadsheetToolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 6px 8px; min-height: 34px;
  border-bottom: 1px solid var(--ss-border);
  background: var(--ss-surface);
}
.SpreadsheetToolbarLeft { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.SpreadsheetToolbarRight { display: flex; align-items: center; gap: 4px; }
.SpreadsheetToolBtn {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; color: var(--ss-text2); cursor: pointer; font-size: 15px;
  transition: background .12s, color .12s;
}
.SpreadsheetToolBtn:hover { background: var(--ss-hover-bg); color: var(--ss-accent); }

/* ---- Filter chips ---- */
.SpreadsheetFilterChipsLabel { font-size: 11px; color: var(--ss-text2); margin-right: 2px; }
.SpreadsheetFilterChip {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px 0 10px;
  background: var(--ss-sel-bg); color: var(--ss-accent); border-radius: 12px; font-size: 12px; font-weight: 600;
}
.SpreadsheetFilterChipText { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.SpreadsheetFilterChipX { cursor: pointer; opacity: .7; font-size: 11px; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.SpreadsheetFilterChipX:hover { opacity: 1; background: rgba(0,0,0,.08); }

/* ---- Dirty save bar ---- */
.SpreadsheetSaveBar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 12px; background: #fff8e6; border-bottom: 1px solid #f0d999; color: #7a5b00;
  font-size: 12.5px; font-weight: 600;
}
.SpreadsheetSaveBtns { display: flex; gap: 6px; }
.SpreadsheetSaveBtn {
  padding: 5px 14px; border-radius: 6px; cursor: pointer; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--ss-border-strong); background: var(--ss-surface); color: var(--ss-text);
  transition: filter .12s, background .12s;
}
.SpreadsheetSaveBtn:hover { filter: brightness(0.97); }
.SpreadsheetSaveBtnPrimary { background: var(--ss-accent); border-color: var(--ss-accent); color: #fff; }

/* ---- Scroll region ---- */
.SpreadsheetScroll {
  flex: 1; position: relative; overflow: auto;
  scrollbar-width: thin;
}

/* ---- Header ---- */
.SpreadsheetHeaderRow {
  position: sticky; top: 0; z-index: 20;
  display: flex; height: var(--ss-head-h); min-width: 100%;
  background: var(--ss-header-bg);
  border-bottom: 1px solid var(--ss-border-strong);
}
.SpreadsheetHeaderCorner {
  display: flex; align-items: center; justify-content: center;
  background: var(--ss-header-bg); border-right: 1px solid var(--ss-border-strong);
  z-index: 26;
}
.SpreadsheetHeaderCell {
  position: relative; box-sizing: border-box;
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px 0 10px; height: var(--ss-head-h);
  background: var(--ss-header-bg);
  border-right: 1px solid var(--ss-border);
  font-weight: 600; color: var(--ss-text);
  cursor: pointer; user-select: none;
  transition: background .1s;
}
.SpreadsheetHeaderCell:hover { background: var(--ss-hover-bg); }
.SpreadsheetHeaderContent { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.SpreadsheetHeaderCell.SpreadsheetFrozenCol { z-index: 25; }
.SpreadsheetHeaderDrop { box-shadow: inset 3px 0 0 var(--ss-accent); }

.SpreadsheetSortIndicator { flex: 0 0 auto; font-size: 11px; color: var(--ss-accent); }
.SpreadsheetHeaderCell[data-sort] { color: var(--ss-accent); }

.SpreadsheetFilterBtn {
  flex: 0 0 auto; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--ss-text2); opacity: .38; border-radius: 4px; cursor: pointer;
  transition: opacity .12s, background .12s, color .12s;
}
.SpreadsheetHeaderCell:hover .SpreadsheetFilterBtn { opacity: .85; }
.SpreadsheetFilterBtn:hover { background: rgba(0,0,0,.08); color: var(--ss-accent); opacity: 1; }
.SpreadsheetFilterBtn.SpreadsheetFilterBtnActive { opacity: 1; color: #fff; background: var(--ss-accent); }

.SpreadsheetResizeHandle {
  position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
  cursor: col-resize; z-index: 2;
}
.SpreadsheetResizeHandle:hover { box-shadow: inset -2px 0 0 var(--ss-accent); }

.SpreadsheetSelectAll { cursor: pointer; font-size: 15px; color: var(--ss-text2); }
.SpreadsheetSelectAll:hover { color: var(--ss-accent); }

/* ---- Body / rows / cells ---- */
.SpreadsheetBody { position: relative; min-width: 100%; }
.SpreadsheetRow {
  display: flex; box-sizing: border-box; height: var(--ss-row-h);
  background-color: var(--ss-surface);
}
.SpreadsheetContainer[data-zebra="true"] .SpreadsheetRowAlt { background-color: var(--ss-zebra-bg); }
.SpreadsheetRow:hover { background-color: var(--ss-hover-bg); }
.SpreadsheetRow.Selected { background-color: var(--ss-sel-bg); }

.SpreadsheetCell {
  position: relative; box-sizing: border-box;
  display: flex; align-items: center; height: var(--ss-row-h);
  padding: 0 10px; overflow: hidden;
  border-right: 1px solid var(--ss-border);
  border-bottom: 1px solid var(--ss-border);
  color: var(--ss-text);
}
.SpreadsheetCellText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.SpreadsheetCell.SpreadsheetCellRight { justify-content: flex-end; text-align: right; }
.SpreadsheetCell.SpreadsheetCellRight .SpreadsheetCellText { text-align: right; }

/* grid line modes */
.SpreadsheetContainer[data-grid-lines="Horizontal"] .SpreadsheetCell { border-right-color: transparent; }
.SpreadsheetContainer[data-grid-lines="Vertical"]   .SpreadsheetCell { border-bottom-color: transparent; }
.SpreadsheetContainer[data-grid-lines="None"]        .SpreadsheetCell { border-right-color: transparent; border-bottom-color: transparent; }

/* editability affordances */
.SpreadsheetCell.SpreadsheetCellEditable { cursor: text; }
.SpreadsheetCell.SpreadsheetCellReadOnly,
.SpreadsheetCell.SpreadsheetCellComputed,
.SpreadsheetCell.SpreadsheetCellReverseLookup { color: var(--ss-text2); background-image: linear-gradient(0deg, rgba(0,0,0,.012), rgba(0,0,0,.012)); }
.SpreadsheetCell.SpreadsheetCellLookup { cursor: pointer; }
.SpreadsheetCell.SpreadsheetCellLookup .SpreadsheetCellText { color: var(--ss-accent); }

/* active + range selection */
.SpreadsheetCell.SpreadsheetCellActive { box-shadow: inset 0 0 0 2px var(--ss-accent); z-index: 3; }
.SpreadsheetCell.SpreadsheetCellSelected { background-image: linear-gradient(0deg, var(--ss-sel-bg), var(--ss-sel-bg)); }

/* save state micro-animations (keyframes in CssKey=373) */
.SpreadsheetCell.SpreadsheetCellSaving { background-image: linear-gradient(0deg, rgba(37,99,235,.10), rgba(37,99,235,.10)); }
.SpreadsheetCell.SpreadsheetCellSaved  { animation: ssSavedPulse .9s ease-out; }
.SpreadsheetCell.SpreadsheetCellError  { animation: ssErrorPulse 1.6s ease-out; }
.SpreadsheetCell.SpreadsheetCellDirty::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px;
  border-radius: 50%; background: #e0a400;
}

.SpreadsheetCellInput {
  width: 100%; height: calc(var(--ss-row-h) - 4px); box-sizing: border-box;
  border: 2px solid var(--ss-accent); border-radius: 3px; padding: 0 6px;
  font: inherit; color: var(--ss-text); background: var(--ss-surface); outline: none;
}
.SpreadsheetBoolIcon { font-size: 14px; margin: 0 auto; }
.SpreadsheetBoolIcon.SpreadsheetBoolOn { color: #1a9e57; }
.SpreadsheetBoolIcon.SpreadsheetBoolOff { color: #c0c6ce; }
.SpreadsheetCellImage { max-height: calc(var(--ss-row-h) - 8px); max-width: 100%; border-radius: 3px; object-fit: cover; }

/* fill handle */
.SpreadsheetFillHandle {
  position: absolute; right: -3px; bottom: -3px; width: 8px; height: 8px;
  background: var(--ss-accent); border: 1px solid #fff; border-radius: 1px;
  cursor: crosshair; z-index: 4;
}
.SpreadsheetCell.SpreadsheetFillPreview { box-shadow: inset 0 0 0 1px var(--ss-sel-border); }

/* ---- Row number gutter ---- */
.SpreadsheetRowNum {
  display: flex; align-items: center; justify-content: center; gap: 2px; position: relative;
  background-color: inherit; color: var(--ss-text2); font-size: 11px; font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--ss-border-strong);
  border-bottom: 1px solid var(--ss-border);
}
.SpreadsheetRowNumText { transition: opacity .1s; }
.SpreadsheetRow:hover .SpreadsheetRowNumText { opacity: .25; }
.SpreadsheetRowCheck, .SpreadsheetRowOpen {
  position: absolute; display: none; cursor: pointer; font-size: 13px; color: var(--ss-text2);
}
.SpreadsheetRowCheck { left: 6px; }
.SpreadsheetRowOpen { right: 5px; }
.SpreadsheetRow:hover .SpreadsheetRowCheck,
.SpreadsheetRow.Selected .SpreadsheetRowCheck,
.SpreadsheetRow:hover .SpreadsheetRowOpen { display: inline-flex; align-items: center; }
.SpreadsheetRowCheck:hover, .SpreadsheetRowOpen:hover { color: var(--ss-accent); }
.SpreadsheetRow.Selected .SpreadsheetRowCheck { color: var(--ss-accent); }

/* ---- Sticky (frozen columns + gutter) ---- */
.SpreadsheetSticky { position: sticky; background-color: inherit; }
.SpreadsheetCell.SpreadsheetFrozenCol { z-index: 5; background-color: inherit; }
.SpreadsheetRowNum.SpreadsheetSticky { z-index: 6; }
/* right edge shadow on frozen region handled by last frozen col */
.SpreadsheetFrozenCol { box-shadow: none; }

/* ---- Summary ---- */
.SpreadsheetSummaryArea { min-width: 100%; z-index: 15; }
.SpreadsheetSummaryBottom { position: sticky; bottom: 0; }
.SpreadsheetSummaryTop { position: sticky; top: var(--ss-head-h); }
.SpreadsheetSummaryRow {
  display: flex; height: 30px; background: var(--ss-header-bg);
  border-top: 2px solid var(--ss-border-strong);
}
.SpreadsheetSummaryCorner {
  display: flex; align-items: center; justify-content: center;
  background: var(--ss-header-bg); color: var(--ss-text2); font-weight: 700;
  border-right: 1px solid var(--ss-border-strong);
}
.SpreadsheetSummaryCell {
  box-sizing: border-box; display: flex; align-items: center; gap: 6px; justify-content: flex-end;
  padding: 0 10px; background: var(--ss-header-bg);
  border-right: 1px solid var(--ss-border);
  font-weight: 600; color: var(--ss-text);
}
.SpreadsheetSummaryAggLabel {
  font-size: 10px; font-weight: 700; color: #fff; background: var(--ss-text2);
  border-radius: 3px; padding: 1px 4px; cursor: pointer; opacity: .8;
}
.SpreadsheetSummaryAggLabel:hover { opacity: 1; background: var(--ss-accent); }
.SpreadsheetSummaryVal { font-variant-numeric: tabular-nums; }

/* ---- Status bar ---- */
.SpreadsheetStatusBar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 5px 12px; min-height: 28px;
  border-top: 1px solid var(--ss-border);
  background: var(--ss-header-bg); color: var(--ss-text2);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.SpreadsheetStatusSeg { white-space: nowrap; }
.SpreadsheetStatusSel { color: var(--ss-accent); font-weight: 600; }
.SpreadsheetStatusStat { padding-left: 14px; border-left: 1px solid var(--ss-border); }



/* META  : .Base.Views.ViewType.Spreadsheet.Spreadsheet_@keyframes */
@keyframes ssSavedPulse {
  0%   { background-color: rgba(26, 158, 87, 0.28); }
  100% { background-color: transparent; }
}
@keyframes ssErrorPulse {
  0%, 30% { background-color: rgba(220, 38, 38, 0.30); }
  100%    { background-color: transparent; }
}



/* META  : .Base.Views.ViewType.Spreadsheet.Spreadsheet_@media */
/* Dark theme — platform .Theme_Dark class (primary) + OS prefers-color-scheme (fallback) */
.Theme_Dark .SpreadsheetContainer {
  --ss-surface: #1e2126;
  --ss-header-bg: #262a31;
  --ss-border: #333a42;
  --ss-border-strong: #3d454e;
  --ss-text: #e6e8eb;
  --ss-text2: #9aa4af;
  --ss-zebra-bg: #23272e;
  --ss-hover-bg: #2a3340;
  --ss-sel-bg: #2d3b52;
  --ss-sel-border: rgba(96, 165, 250, 0.6);
  --ss-accent: var(--primary-color, #60a5fa);
}
.Theme_Dark .SpreadsheetSaveBar { background: #3a2f12; border-color: #5a4a1c; color: #e9cf8a; }
.Theme_Dark .SpreadsheetFilterPopup { background: #23272e; border-color: #333a42; color: #e6e8eb; }
.Theme_Dark .SpreadsheetFilterSearch { background: #1e2126; border-color: #333a42; color: #e6e8eb; }

@media (prefers-color-scheme: dark) {
  .SpreadsheetContainer:not(.Theme_Light) {
    --ss-surface: #1e2126;
    --ss-header-bg: #262a31;
    --ss-border: #333a42;
    --ss-border-strong: #3d454e;
    --ss-text: #e6e8eb;
    --ss-text2: #9aa4af;
    --ss-zebra-bg: #23272e;
    --ss-hover-bg: #2a3340;
    --ss-sel-bg: #2d3b52;
    --ss-accent: var(--primary-color, #60a5fa);
  }
}

/* Responsive: tighten paddings + hide status stats on narrow viewports */
@media (max-width: 640px) {
  .SpreadsheetCell, .SpreadsheetHeaderCell { padding-left: 7px; padding-right: 7px; }
  .SpreadsheetStatusStat { display: none; }
  .SpreadsheetToolbar { flex-wrap: wrap; }
}



/* META  : .Base.Views.ViewType.Spreadsheet.Spreadsheet_SpreadsheetFrozenCell */
/* Column filter popup (appended to document.body, so NOT scoped under container) */
.SpreadsheetFilterPopup {
  position: fixed; z-index: 100000; width: 248px; max-height: 360px;
  display: flex; flex-direction: column;
  background: #fff; color: #1f2328;
  border: 1px solid #d3d7dc; border-radius: 8px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13px;
}
.SpreadsheetFilterSearch {
  margin: 8px; padding: 6px 10px; border: 1px solid #d3d7dc; border-radius: 6px;
  font: inherit; outline: none;
}
.SpreadsheetFilterSearch:focus { border-color: #2563eb; }
.SpreadsheetFilterTools { display: flex; gap: 12px; padding: 0 12px 6px; }
.SpreadsheetFilterLink { color: #2563eb; cursor: pointer; font-size: 12px; font-weight: 600; }
.SpreadsheetFilterLink:hover { text-decoration: underline; }
.SpreadsheetFilterList { flex: 1; overflow: auto; padding: 2px 4px; }
.SpreadsheetFilterItem {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px; cursor: pointer;
}
.SpreadsheetFilterItem:hover { background: #eef4ff; }
.SpreadsheetFilterItemText { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.SpreadsheetFilterItemCount { color: #656d76; font-size: 11px; font-variant-numeric: tabular-nums; }
.SpreadsheetFilterFooter { display: flex; justify-content: flex-end; gap: 6px; padding: 8px; border-top: 1px solid #e6e8eb; }

/* Choice/Lookup cell editor (same skin, single-pick) */
.SpreadsheetChooserPopup { width: 264px; }
.SpreadsheetChooserPopup .SpreadsheetFilterItem { cursor: pointer; }
.SpreadsheetChooserActive { background: #e3edff; font-weight: 600; }
.SpreadsheetChooserClear { color: #656d76; font-style: italic; }



/* META  : .Base.Views.ViewType.Spreadsheet.Spreadsheet_SpreadsheetFrozenRow */
/* Empty-state + scrollbar polish for the spreadsheet scroll region */
.SpreadsheetScroll::-webkit-scrollbar { width: 12px; height: 12px; }
.SpreadsheetScroll::-webkit-scrollbar-thumb { background: rgba(120,130,140,.4); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
.SpreadsheetScroll::-webkit-scrollbar-thumb:hover { background: rgba(120,130,140,.6); background-clip: content-box; }
.Theme_Dark .SpreadsheetScroll::-webkit-scrollbar-thumb { background: rgba(150,160,170,.35); background-clip: content-box; }



/* META  : .Base.Views.ViewType.Calendar */
.CalendarBody {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: relative;
}

.CalendarBody .Days td {
    border: 1px solid #e2e8f0;
    vertical-align: top;
    padding: 0;
    position: relative;
    min-height: 100px;
    background-color: #ffffff;
    transition: background-color 0.2s ease;
}

.CalendarBody table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.CalendarBody.DateMode_year table {
    height: auto;
}

.CalendarBody .Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}

.CalendarBody .Header .Right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.CalendarBody .Header .Center {
    display: flex;
    align-items: center;
    gap: 12px;
}

.CalendarBody .DateDisplay {
    display: flex;
    align-items: center;
    gap: 8px;
}

.CalendarBody .DateTitle {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    min-width: 200px;
    text-align: center;
}

.CalendarBody .TodayButton {
    padding: 6px 16px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.CalendarBody .TodayButton:hover {
    background-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
}

.CalendarBody .DateDisplay .MicroButton {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.CalendarBody .DateDisplay .MicroButton:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.CalendarBody .HourModes {
    display: flex;
    gap: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 4px;
    border-radius: 8px;
}

.CalendarBody .HourModes .Button {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
}

.CalendarBody .HourModes .SelectedButton {
    background-color: #ffffff;
    color: #667eea;
    font-weight: 600;
}

.CalendarBody .DayNames td {
    padding: 12px 8px;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}

.CalendarBody .DayNames .DayOfWeekName {
    display: block;
    margin-bottom: 2px;
}

.CalendarBody .DayNames .DayOfMonth {
    font-size: 14px;
    color: #334155;
}

.CalendarBody .WeekNumber {
    width: 40px !important;
    min-width: 40px;
    background-color: #f1f5f9;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    transition: all 0.2s ease;
    border-right: 1px solid #e2e8f0;
}

.CalendarBody .WeekNumber:hover {
    background-color: #e2e8f0;
    color: #475569;
}

.CalendarBody .Days td:hover {
    background-color: #f8fafc;
}

.CalendarBody .Days td.Today {
    background-color: #eff6ff !important;
    border-color: #3b82f6;
}

.CalendarBody .YearDay.Today {
    background-color: #3b82f6;
    color: #ffffff;
    font-weight: 600;
}

.CalendarBody .Days td.OtherDay {
    background-color: #f8fafc;
}

.CalendarBody .DayTitle:hover {
    color: #3b82f6;
}

.CalendarBody .HourBlock {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid #f1f5f9;
    box-sizing: border-box;
}

.CalendarBody .HourBlock span {
    font-size: 10px;
    color: #94a3b8;
    padding-left: 4px;
    background-color: #ffffff;
}

.CalendarBody .HourBlock:nth-child(even) {
    background-color: rgba(248, 250, 252, 0.5);
}

.CalendarItem:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.CalendarItem.Dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.CalendarItem .CalendarItemHour {
    font-weight: 600;
    color: #3b82f6;
    margin-right: 8px;
}

.CalendarItem .CalendarItemTitle {
    color: #334155;
}

.DayBody.DragOver {
    background-color: #dbeafe !important;
    border: 2px dashed #3b82f6;
}

.CalendarBody .AllDays {
    background-color: #fefce8;
    border-bottom: 2px solid #fde047;
}

.CalendarBody .AllDays td {
    min-height: 40px;
    padding: 4px;
}

.CalendarBody .AllDayBody {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 32px;
}

.CalendarBody .YearRow {
    height: auto;
}

.CalendarBody .YearMonth {
    padding: 12px;
    border: 1px solid #e2e8f0;
    vertical-align: top;
    width: 33.33%;
}

.CalendarBody .YearMonthHeader {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    padding: 8px 0;
    text-align: center;
    cursor: pointer;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 8px;
    transition: color 0.2s ease;
}

.CalendarBody .YearMonthHeader:hover {
    color: #3b82f6;
}

.CalendarBody .YearMonthGrid {
    font-size: 11px;
}

.CalendarBody .YearDayNames {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    color: #94a3b8;
    margin-bottom: 4px;
}

.CalendarBody .YearDaysGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.CalendarBody .YearDay {
    text-align: center;
    padding: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    color: #475569;
    transition: all 0.15s ease;
}

.CalendarBody .YearDay:hover {
    background-color: #e2e8f0;
}

.CalendarBody .YearDay.HasEvents {
    position: relative;
}

.CalendarBody .YearDay.HasEvents::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: #f97316;
    border-radius: 50%;
}

.CalendarBody .YearDayEmpty {
    padding: 4px 2px;
}

.CalendarLoading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.CalendarSpinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: calendarSpin 0.8s linear infinite;
}

@keyframes calendarSpin {
    to {
    transform: rotate(360deg);
    }
}

.CalendarFooter {
    padding: 8px 16px;
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 8px 8px;
}

@media (max-width: 768px) {
    .CalendarBody .Header {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    }
    .CalendarBody .Header .Left,
    .CalendarBody .Header .Right {
    width: 100%;
    justify-content: center;
    }
    .CalendarBody .DateTitle {
    font-size: 16px;
    min-width: auto;
    }
    .CalendarBody .DayNames td {
    padding: 8px 4px;
    font-size: 10px;
    }
    .CalendarBody .WeekNumber {
    width: 30px !important;
    min-width: 30px;
    font-size: 10px;
    }
    .CalendarBody .Days td {
    min-height: 60px;
    }
    .CalendarItem {
    padding: 4px 6px;
    font-size: 11px;
    }
    .CalendarBody .YearMonth {
    padding: 8px;
    }
    .CalendarBody .YearDay {
    padding: 2px;
    font-size: 10px;
    }
}

.CalendarBody.DateMode_week .Days td {
    height: 400px;
    overflow: hidden;
}

.CalendarItem.Selected {
    box-shadow: 0 0 0 2px #3b82f6, 0 4px 6px rgba(0, 0, 0, 0.15);
}



/* META  : .Base.Views.ViewType.Calendar.Calendar_CalendarItem */
.CalendarItem {
    margin: 2px 4px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #ffffff;
    border-left: 4px solid #3b82f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.CalendarBody.DateMode_day .CalendarItem {
    position: absolute;
    left: 4px;
    right: 4px;
    margin: 0;
    z-index: 1;
}

.CalendarBody .AllDayBody .CalendarItem {
    position: relative;
    flex-shrink: 0;
}



/* META  : .Base.Views.ViewType.Calendar.Calendar_DayBody */
.CalendarBody .DayBody {
    min-height: 80px;
    padding: 4px;
    position: relative;
    overflow-y: auto;
}

.CalendarBody.DateMode_day .DayBody {
    min-height: 400px;
    position: relative;
}

.CalendarBody.DateMode_week .DayBody {
    overflow-y: auto;
    height: 100%;
}



/* META  : .Base.Views.ViewType.Calendar.Calendar_DayTitle */
.CalendarBody .Days td.Today .DayTitle {
    background-color: #3b82f6;
    color: #ffffff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px;
}

.CalendarBody .Days td.OtherDay .DayTitle {
    color: #cbd5e1;
}

.CalendarBody .DayTitle {
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
}



/* META  : .Base.Views.Parameters */
.Parameters .Text
{
    padding: 8px 1px;
}
.Parameters .Text:first-child
{
    padding-left: 1em;
}

.ParameterSet
{
    text-align: center;
    justify-content: center;
}

.Parameters {
    width: 100%;
    --inputPadding: 8px;
}.Parameters .Text span {
font-size: 80%;
}

.ParametersView > .Parameters {
    position: relative;
    text-align: center;
}

.Parameter > .ParamValue > .InputSpan
{
    display: flex;
    flex-direction: row;
}


/* META  : .Base.Views.Parameters.DoData */
.DoData {
    position: relative;
    vertical-align: bottom;
}

.DoData img {
    max-width: 20px;
    max-height: 20px;
}


/* META  : .Base.Views.Parameters.ParameterSet */
.ParameterSet .ViewBody {
    background-color: transparent;
}


/* META  : .Base.Views.Parameters.Parameter */
.Parameter {
    font-size: 100%;
    vertical-align: top;
    display: inline-block;
    position: relative;
    max-width: 100%;
}

.Parameter img {
    height: 24px;
}

.ParameterNumber input {
    width: 7em;
    text-align: right;
}

.ParameterMoney input {
    width: 7em;
    text-align: right;
}

.ParameterInteger input {
    width: 7em;
    text-align: right;
}

.ParamLabel {
    display: inline-block;
    padding: 1px 5px;
    text-align: center;
    color: var(--labelColor);
}

.ParamValue {
    position: relative;
white-space: nowrap;
}

.Parameter.LabelDirection_vertical > *
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.InvalidParameter .ItemSelection, .InvalidParameter input {
    background-color: rgba(255,0,0,0.1) !important;
}

.LabelDirection_vertical.Parameter {
    white-space: nowrap;
}

    .LabelDirection_vertical.Parameter > * {
    display: inline-block;
    vertical-align: middle;
    }


/* META  : .Base.Views.EntityTypeViewTitle */
.EntityTypeViewTitle .InlineHelpText
{
    display: none;
}

.EntityTypeView .EntityTypeViewTitle span
{
    border-bottom: 2px dotted transparent;
}.Top > .TopCenter:before
{
    content: " ";
    color: transparent;
    height: 3em;
    line-height: 3em;
}

.EntityTypeViewTitle
{
    line-height: 1em;
    font-weight: bold;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    z-index: 0;
    max-width: fit-content;
    color: var(--panelHeaderTextColor);
    position: relative;

}

.MicroView .EntityTypeViewTitle
{
    position: relative;
    left: 0;
    right: 0;
transform: none;
}

.EntityTypeViewTitle .EntityTypeViewTitleBody {
    vertical-align: middle;
    text-align: center;
    display: flex;
    white-space: normal;
    flex-direction: column;
    justify-content: center;
    align-content: center;

}

.EntityTypeView .EntityTypeViewTitle .ItemSelection {
    border-bottom: 2px dotted transparent;
}

/* ============================================================================
   Panel header title position — LEFT (platform default, 2026-06-30)
   A real 3-zone bar laid out with CSS GRID (1fr auto 1fr) + explicit columns:
       [ TopLeft 1fr ][ TopCenter auto ][ TopRight 1fr ]
   - Left   = identity + actions (title beside the New/action buttons), left-aligned.
   - Center = the lone list "view switcher" pill, ALWAYS perfectly centered.
   - Right  = tools (search, menu, AI), right-aligned.
   Why grid: the side tracks reserve equal space even when a zone is empty/hidden,
   so the center stays dead-centered no matter which sides are populated — and we
   can fully HIDE empty zones (no artifact) without the center drifting. min-width:0
   lets the left title ellipsize instead of being clipped.
   Legacy centered layout is untouched (.TitleCenter / absolute base).
   ============================================================================ */

.Panel > .PanelHeader.TitleLeft,
.PanelHeader.TitleLeft.Top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 8px;
}

/* All three zones become in-flow grid items (override the absolute base) */
.PanelHeader.TitleLeft > .TopLeft,
.PanelHeader.TitleLeft > .TopCenter,
.PanelHeader.TitleLeft > .TopRight {
    position: static !important;
    inset: auto !important;
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 0;
    opacity: 1;
    background: none;
}
.PanelHeader.TitleLeft > .TopLeft   { grid-column: 1; justify-content: flex-start; gap: 8px; padding-left: 10px; }
.PanelHeader.TitleLeft > .TopCenter { grid-column: 2; justify-content: center; }
.PanelHeader.TitleLeft > .TopRight  { grid-column: 3; justify-content: flex-end; gap: 4px; padding-right: 10px; }

/* Hide empty zones entirely — the grid tracks keep their space, so the center
   stays perfectly centered regardless of which sides are populated. */
.PanelHeader.TitleLeft > .TopLeft:empty,
.PanelHeader.TitleLeft > .TopCenter:empty,
.PanelHeader.TitleLeft > .TopRight:empty { display: none; }

/* Long-title relief: the symmetric 1fr…1fr caps the title at ~half and clips long ones while the
   right 1fr (small/hover-revealed tools) sits mostly empty. When _drawHeader detects the title is
   actually clipped it adds .TitleLeftWide → the title column takes ALL the leftover space (the list
   + tools yield to the right) so a long title shows uncut. Short titles never get the class, so they
   keep the centered list. */
.PanelHeader.TitleLeft.TitleLeftWide { grid-template-columns: minmax(0, 1fr) auto auto; }

/* Left title: take the available room, ellipsize gracefully (never clipped) */
.PanelHeader.TitleLeft > .TopLeft .EntityTypeViewTitle {
    flex: 0 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0;                 /* icon hugs the title; its own margin gives the tiny separation */
    min-width: 0;
    max-width: 100%;
}
.PanelHeader.TitleLeft > .TopLeft .EntityTypeViewTitle .EntityTypeViewTitleBody {
    text-align: left;
    align-items: flex-start;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* EntityType identity icon beside the left title (always shown — a default glyph fills the slot when
   the ET has no icon, so the title's left edge is constant). Bigger glyph, minimal box padding. */
.EntityTypeViewTitleIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;              /* fixed box in PARENT em → title left edge is identical for every icon type */
    flex: 0 0 auto;
    margin-right: 0.35em;       /* small, fixed separation from the title (title gap is 0) */
    opacity: 0.5;               /* quiet by default… */
    transition: opacity .15s ease;
    color: inherit;
}
.PanelHasHeader:hover .EntityTypeViewTitleIcon { opacity: 1; }   /* …full strength when the panel is engaged */
.EntityTypeViewTitleIcon svg { width: 100%; height: 100%; fill: currentColor; display: block; }
/* Font-glyph icons: bigger glyph (1.4em) but compensate the box width so it still measures 1.6
   PARENT em (em compounds with font-size) — keeps the title's left edge constant. */
.EntityTypeViewTitleIcon[class*="icon-"] { font-size: 1.4em; width: 1.143em; height: 1.143em; line-height: 1; }
/* Neutral default glyph (no ET icon) — present for alignment, extra quiet so it never shouts. */
.EntityTypeViewTitleIconDefault { opacity: 0.4; }
.PanelHasHeader:hover .EntityTypeViewTitleIconDefault { opacity: 0.7; }

/* The lone, centered list selector as a premium "view switcher" pill.
   Selector includes .Top > .TopCenter so it outweighs the generic TopCenter
   list-button rule (specialized.css); otherwise that rule's padding wins and the
   text runs under the absolute chevron. Right padding clears the chevron. */
.Top > .TopCenter .EntityTypeLists.Menu_Arrow_Down.ViewSwitcher {
    border-radius: 999px;
    border: var(--inputBorder);
    /* Katman YONU on plandan turetilir (m.js `--baslikCipZemin`). Sabit beyaz katman
       zemini metne yaklastirip beyaz yaziyi 4.83 -> 4.28'e dusuruyordu (AA 4.5 alti).
       Geri dusus = bugunku deger, yani JS kosmazsa davranis degismez. */
    background: var(--baslikCipZemin, rgba(255, 255, 255, 0.08));
    padding: 0.45em 2.6em 0.45em 1.35em;
    font-weight: 600;
    max-width: min(22em, 40vw);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .15s ease, box-shadow .15s ease;
}
.Top > .TopCenter .EntityTypeLists.Menu_Arrow_Down.ViewSwitcher:hover {
    background: var(--baslikCipZeminHover, rgba(255, 255, 255, 0.16));
    box-shadow: 0 0 0 2px var(--primaryColor, #009ef7) inset;
}

/* ===== NewButtonMode toolbar zones (2026-06-30) — keep the title anchored at a fixed left
   padding regardless of whether a NewButton exists. Marker class ActionsPos_<zone> on the header
   (TopLeft for Button/FAB/Both; TopRight/TopCenter for the side placements). ===== */

/* TopLeft (default): actions stay in the left zone but CSS order puts the TITLE first, so the
   title's left edge never moves whether or not actions exist (DOM order is [actions][title]). */
.PanelHeader.TitleLeft.ActionsPos_TopLeft > .TopLeft > .EntityTypeViewTitle { order: 1; }
.PanelHeader.TitleLeft.ActionsPos_TopLeft > .TopLeft > .Actions            { order: 2; }

/* TopRight: actions live with the view tools — always visible (override the TopLeft hover-dim),
   leftmost in the right zone, vertically centered. */
.PanelHeader.ActionsPos_TopRight > .TopRight > .Actions {
    opacity: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    height: 100%;
    order: -1;
    margin-right: 4px;
}

/* TopCenter: actions sit left of the EntityTypeLists selector — always visible, centered group. */
.PanelHeader.ActionsPos_TopCenter > .TopCenter > .Actions {
    opacity: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    height: 100%;
    order: -1;
    margin-right: 6px;
}

/* NewButtonMode FAB/Both: the "New" button floats as the mature .NewItemFAB (created by
   DrawActions, styled in 30-item-forms.css). The header toolbar zone is unaffected here. */



/* META  : .Base.Views.Orderline */
.OrderlineBody {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    --orderline-box-shadow: 0 0 1px grey inset;
    --orderline-back-color: white;
    flex-wrap: nowrap;
    flex-grow: 1;
    max-height: calc(100% - 6rem);
}
.OrderlineBody.ViewBody{
    position: relative;
}

.OrderlineBody > * {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: hidden;
    overflow-x: scroll;
}

.OrderlineRow
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.Orderline .OrderlineValue
{
    padding: 0.5em;
    font-weight: 300;
    position: absolute;
    top: 0;
    right: 2px;
    padding: 0;
    font-size: 70%;
    left: 2px;
    overflow: hidden;
}

.OrderlineLeft > .Orderline
{
    cursor: pointer;
}

.OrderlineLeft > .Orderline:hover
{
    text-shadow: 0 0 1px black;
}

.OrderlineLeft .Orderline .OrderlineValue
{
    left: auto;
}

.OrderlineColumn
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.View_Orderline .ViewHeader
{
    font-weight: 200;
    font-size: 80%;
}

.View_Orderline .EntityTypeViewBody > .Center
{
    max-height: 100%;
}

.View_Orderline .ViewHeader .OrderlineCenter
{
    overflow: hidden;
}

.View_Orderline .ViewHeader .OrderlineTitle
{
    padding: 2px;
    text-align: center;
    font-weight: 200;
}

.View_Orderline .ViewHeader .OrderlineLeft .OrderlineTitle
{
    text-align: right;
}

.View_Orderline  .MiddleCenter
{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.DisableOverflow .View_Orderline  .MiddleCenter
{
    position: relative;
}

.OrderlineBody .OrderlineRight .OrderlineTitle  {
    text-align: right;
    font-family: var(--monoFont);
}

.OrderlineBody > .OrderlineCenter {
    flex-grow: 1;
    overflow: auto;
    box-shadow: var(--orderline-box-shadow);
}

.OrderlineBody > .OrderlineLeft {
    min-width: 15rem;
    max-width: 15rem;
}

.OrderlineBody > .OrderlineRight {
    flex: none;
}

.OrderlineBody > .OrderlineRight  .OrderlineTitle {
    min-width: 7rem;
    max-width: 7rem;

}

.OrderlineBody .Orderline {
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
}

.OrderlineBody .OrderlineTitle {
    box-shadow: var(--orderline-box-shadow);
    padding: 8px;
    white-space: nowrap;
    text-align: left;
    overflow: hidden;
    flex-grow: 1;
}

.OrderlineBody .OrderlineTitle:before {
    content: " ";
    white-space: pre;
}

.OrderlineBody > .OrderlineCenter > .Orderline {
    display: flex;
    flex-direction: row;
    box-shadow: var(--orderline-box-shadow);
}

.OrderlineBody > .OrderlineCenter > .Orderline > .ItemView_Orderline  {
    cursor: pointer;
    background-color: var(--orderline-back-color);
    white-space: nowrap;
    position: relative;
    flex-wrap: nowrap;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.OrderlineBody > .OrderlineCenter > .Orderline > .ItemView_Orderline:hover  {
    box-shadow: 0 0 5px gray;
    z-index: 9;
}

.View_Orderline  .ByFieldsRight .GroupFieldFunction {
    width: 100% !important;
    display: flex;
}

.View_Orderline  .Header .Right .ByFieldsRight {
    justify-content: flex-end;
}

.View_Orderline  .Header .Right .ByFieldsRight {
    justify-content: flex-end;
    position: relative;
}

.View_Orderline  .Header .Right .ByFieldsRight .ByFieldsRightItem .GroupFieldFunction
{
    display: flex;
    flex-direction: column;
    max-width: 7em;
    min-width: 7em;

}

.View_Orderline  .Header .Right .ByFieldsRight   .ByFieldsRightItem
{
    padding: 0;
}

.View_Orderline  .Header .Right .ByFieldsRight  .ByFieldsRightAdd
{
    position: absolute;
    left: 0;
    top: 0;
}


/* META  : .Base.Views.UserRolesView */
.UserRolesView > .UserRoles_Items  {
    display: flex;
    flex: 0;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    max-width: 800px;
    margin: 0 auto;
}

.UserRolesView > .UserRoles_Items > div {
    padding: 8px;
    margin: 4px;
    flex: auto;
    border: solid 1px rgba(127,127,127,0.2);
    justify-content: space-between;
    display: flex;
    align-items: center;

}

.UserRolesView > .UserRoles_Actions  {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;

}

.UserRolesView > .UserRoles_Actions  .Button .ButtonText {
    padding: 0px 8px;
}


/* META  : .Base.Views.GroupByMode */
.GroupByMode_Tab.OneGroup {
    padding: 0 !important;
}

.GroupByMode_Tab.OneGroup > .FolderGroupByTab {
    height: 100% !important;
    padding: 0!important;
}

.GroupByMode_Tab.OneGroup > .GroupByTabHeader {
    display: none !important;
}

.GroupByMode_ReadOnly
{
    flex: 1;
}

.GroupByMode_Tab {
    padding: 0 !important;

    max-width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;

}

.GroupByMode_Tab > .FolderGroupByTab
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 3.5em;
    overflow: auto;
}

.GroupByMode_Open
{
width: 100%;
}

.GroupByMode {
    display: inline-block;
    float: right;
    top: 4px;
    right: 4px;
    padding: 4px;
    width: 5em;

}

.GroupByMode_Ver
{
    flex-wrap: wrap;
    justify-content: center;
}

.GroupByMode_Ver .FolderGroupBy {
    display: inline-block;
    width: 320px;
    vertical-align: top;
    padding: 5px;
}

.GroupByMode_Menu > .GroupByTabHeader {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    white-space: normal;
}

.GroupByMode_Menu.Selected {
    box-shadow: 0 0 0;
}

.FolderGroupByMenu {
    position: absolute;
    top: 0;
    bottom: 100%;
    left: 0;
}

.GroupByMode_Menu.Selected > .FolderGroupByMenu {
    position: absolute;
    top: 0;
    bottom: 4.5em;
    left: 0;
    right: 0;
    overflow: auto;
}

.GroupByMode_Menu.Selected > .GroupByTabHeader {
    position: absolute;
    top: auto;
    bottom: 0;
    height: 4.5em;
    left: 0;
    right: 0;
    overflow: auto;
}

.FolderGroupByMenu .GroupByBody {
    display: none;
}

.FolderGroupByMenu .GroupByBody.Selected {
    display: inherit;
}


/* META  : .Base.Views.GroupByMode.GroupByMode_Acc */
.GroupByMode_Acc > .GroupByTabHeader {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    white-space: normal;
}

.GroupByMode_Acc.Selected {
    box-shadow: 0 0 0;
}

.FolderGroupByAcc {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
}

.FolderGroupByAcc .TogglePanel > GroupByBody {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;

}

.FolderGroupByAcc > .TogglePanel
{
    flex: 1;
}

.FolderGroupByAcc > .TogglePanel.Toggle_Closed
{
    flex: 0;
}

.GroupByMode_Acc.Selected > .FolderGroupByAcc {
    position: absolute;
    top: 0;
    bottom: 4.5em;
    left: 0;
    right: 0;
    overflow: auto;
}

.GroupByMode_Acc.Selected > .GroupByTabHeader {
    position: absolute;
    top: auto;
    bottom: 0;
    height: 4.5em;
    left: 0;
    right: 0;
    overflow: auto;
}

.FolderGroupByAcc .TogglePanel.Toggle_Closed.GroupByBody {
    display: none;
}

.FolderGroupByAcc .GroupByBody.Selected {
    display: inherit;
}


/* META  : .Base.Views.ViewSettings */
.ViewSettingsButton {
    padding: 4px 8px !important;
    min-width: auto !important;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    position: absolute;
    right: 0;
    top: 0;
bottom: 0;
font-size: 1.5em;
display: flex;
    justify-content: center;

}

.ViewSettingsButton:hover {
    opacity: 1;
}

/* Transparent click-catching backdrop behind the View Settings popup (2026-06-30):
   genuine outside-click / Esc close without the old change-closes-it bug. */
.ViewSettingsBackdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: transparent;
}

.ViewSettingsPopup {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.10);
    min-width: 320px;
    width: 340px;
    max-width: 92vw;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: viewSettingsSlideIn 0.18s ease-out;
}

.ActionPanel_View > .ActionPanelBody
{
    position: relative;
}
@keyframes viewSettingsSlideIn {
    from {
    opacity: 0;
    transform: translateY(-10px);
    }
    to {
    opacity: 1;
    transform: translateY(0);
    }
}

.ViewSettingsHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.ViewSettingsTitle {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.ViewSettingsClose {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex: 0;
}

.ViewSettingsClose:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.ViewSettingsBody {
    padding: 16px 20px 18px;
    overflow-y: auto;
    max-height: calc(80vh - 60px);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ViewSettingsRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #f1f5f9;
}

.ViewSettingsRow:last-child {
    border-bottom: none;
}

.ViewSettingsLabel {
    font-size: 13px;
    color: #374151;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    padding-right: 0;
}

/* Label LEFT, value RIGHT-aligned (2026-06-30, user): the control sits on the right edge
   of the row instead of stacking under the label. */
.ViewSettingsInput {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* width-bearing controls (the select combobox, text, color) get a capped width on the
   right; compact controls (toggle, number) shrink to their natural size, still right-aligned. */
.ViewSettingsRow:has(.ViewSettingsSelect) .ViewSettingsInput,
.ViewSettingsRow:has(.ViewSettingsText) .ViewSettingsInput,
.ViewSettingsRow:has(.ViewSettingsColorWrapper) .ViewSettingsInput {
    width: min(58%, 230px);
    min-width: 150px;
}
.ViewSettingsRow:has(.ViewSettingsNumber) .ViewSettingsInput {
    width: 110px;
}

/* Only genuinely-wide editors (column chooser / command / zone editors) stack full-width
   under the label. */
.ViewSettingsRow.ViewSettingsRowFull {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
.ViewSettingsRow.ViewSettingsRowFull .ViewSettingsLabel {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #64748b;
}
.ViewSettingsRow.ViewSettingsRowFull .ViewSettingsInput {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    justify-content: stretch;
}

.ViewSettingsColorWrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.ViewSettingsColorWrapper .ViewSettingsColorText {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
}

.ViewSettingsSelect {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    font-size: 13px;
    color: #374151;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ViewSettingsSelect:hover {
    border-color: #9ca3af;
}

.ViewSettingsSelect:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

/* The select is now an AddSelect2 combobox (.ItemSelection): reads like the old select box,
   fills its (capped) wrapper; the SEARCH lives inside the popup, not inline. */
.ViewSettingsInput .ViewSettingsSelect.ItemSelection {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    padding: 0 26px 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    font-size: 13px;
    color: #374151;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ViewSettingsInput .ViewSettingsSelect.ItemSelection:hover { border-color: #9ca3af; }
.ViewSettingsInput .ViewSettingsSelect.ItemSelection > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* iOS-style toggle switch (replaces the bare checkbox for boolean params) */
.ViewSettingsToggle {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 50px;
    height: 30px;
    cursor: pointer;
}
.ViewSettingsToggle .ViewSettingsCheckbox {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.ViewSettingsToggleSlider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.2s ease;
}
.ViewSettingsToggleSlider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}
.ViewSettingsToggle .ViewSettingsCheckbox:checked + .ViewSettingsToggleSlider {
    background: #34c759;
}
.ViewSettingsToggle .ViewSettingsCheckbox:checked + .ViewSettingsToggleSlider::before {
    transform: translateX(20px);
}
.ViewSettingsToggle .ViewSettingsCheckbox:focus-visible + .ViewSettingsToggleSlider {
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.30);
}

.ViewSettingsCheckbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #667eea;
}

.ViewSettingsNumber,
.ViewSettingsText {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
    color: #374151;
    transition: all 0.2s ease;
}

.ViewSettingsNumber:hover,
.ViewSettingsText:hover {
    border-color: #9ca3af;
}

.ViewSettingsNumber:focus,
.ViewSettingsText:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.ViewSettingsEmpty {
    text-align: center;
    color: #9ca3af;
    padding: 24px;
    font-size: 13px;
}

/* ===== Matrix/Pivot: read-only summary (Özet group, relocated from the on-view strip) ===== */
.ViewSettingsInsightsRow .ViewSettingsInput { width: 100%; }
.ViewSettingsInsights { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.ViewSettingsInsight {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 7px 10px; border-radius: 8px;
    background: #f8fafc; border: 1px solid #eef0f4;
}
.ViewSettingsInsightLabel {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: #8a93a3; flex: 0 0 auto;
}
.ViewSettingsInsightValue {
    font-size: 13px; font-weight: 700; color: #1f2733;
    text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ViewSettingsInsightsEmpty { font-size: 12px; color: #b3b9c4; font-style: italic; padding: 4px 2px; }

/* ===== Matrix/Pivot: command buttons (İşlemler group) ===== */
/* one-shot actions relocated from the old on-view toolbar into the docked View Properties panel */
.ViewSettingsCommandsRow .ViewSettingsInput { width: 100%; }
.ViewSettingsCommands {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%;
}
.ViewSettingsCommandBtn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 10px; min-height: 36px;
    border: 1px solid #e5e7eb; border-radius: 8px;
    background: #fff; color: #374151;
    font-size: 12px; font-weight: 600; cursor: pointer; text-align: left;
    transition: background .15s, border-color .15s, box-shadow .15s, color .15s, transform .08s;
}
.ViewSettingsCommandBtn:hover { border-color: #667eea; color: #4f46e5; box-shadow: 0 2px 8px -3px rgba(102,126,234,0.4); }
.ViewSettingsCommandBtn:active { transform: translateY(1px); }
.ViewSettingsCommandBtn:focus-visible { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.18); }
.ViewSettingsCommandBtn svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: 0.85; }
.ViewSettingsCommandLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Matrix/Pivot: field zones (Rows / Columns / Values) with drag & drop ===== */
.ViewSettingsZonesRow .ViewSettingsInput { width: 100%; }
.PivotZones { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-bottom: 4px; }
.PivotZone {
    border: 1px dashed #d6d9e0; border-radius: 9px; padding: 7px 8px;
    background: #fafbfe; transition: border-color .15s, background .15s, box-shadow .15s;
}
.PivotZone.PivotZoneDragOver { border-color: #667eea; border-style: solid; background: #eef0fe; box-shadow: 0 0 0 3px rgba(102,126,234,0.12); }
.PivotZoneTitle {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: #8a93a3; margin-bottom: 6px;
}
.PivotZone_val .PivotZoneTitle { color: #4f46e5; }
.PivotZoneChips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 26px; align-items: center; }
.PivotZoneEmpty { font-size: 11px; color: #b3b9c4; font-style: italic; }
.PivotChip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 4px 3px 9px; border-radius: 7px;
    background: #fff; border: 1px solid #dfe3ea; color: #374151;
    font-size: 12px; font-weight: 600; cursor: grab; user-select: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: border-color .14s, box-shadow .14s, transform .08s, opacity .14s;
}
.PivotChip:hover { border-color: #667eea; box-shadow: 0 2px 7px -3px rgba(102,126,234,0.45); }
.PivotChip_val { background: #eef0fe; border-color: #c7ccfb; color: #4338ca; }
.PivotChip.PivotChipDragging { opacity: 0.45; cursor: grabbing; }
.PivotChip.PivotChipDropBefore { box-shadow: -3px 0 0 0 #667eea; }
.PivotChipLabel { max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.PivotChipRemove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; padding: 0; line-height: 1;
    border: none; border-radius: 5px; background: transparent;
    color: #9ca3af; font-size: 15px; cursor: pointer;
}
.PivotChipRemove:hover { background: rgba(239,68,68,0.12); color: #ef4444; }

.ViewSettingsChartInfo {
    margin-top: 16px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.ChartInfoTitle {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ChartInfoRow {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #374151;
    padding: 4px 0;
}

.ChartInfoRow span:last-child {
    font-weight: 600;
    color: #667eea;
}


/* META  : .UIComponents.UIElements.TabHeader */
.TabHeader {
    display: flex;
flex-direction: row;
flex-wrap: nowrap;
    padding: 0;
    height: auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-spacing: 0 !important;
    border: solid 0.5em transparent;
    border-bottom: 0;
    border: 0;
    justify-content: center;

}.TabPanel_Tab > .TabHeader > span {
    border-bottom: 0;
}

.TabHeader > span:after {
    content: var(--icon-Circle-Solid);
    position: absolute;
    bottom: -50%;
    font-family: "361";
    z-index: 9;
    font-size: 32px;
    color: #80808020;
}

.TabPanel_TabBottom > .TabHeader > span:after
{
    top: -50%;
    bottom: auto;
}

.TabHeader > span.Selected:after {
    color: var(--color1);
}

.TabHeader > span.Selected .AggregateValue {
    color: white;
}

.TabHeader > span:hover:after,
.TabHeader > a:hover:after {
    color: var(--color1);
}

.TabPanel_TabBottom > .TabHeader {
    text-align: center;
    border-bottom: 0;
}

.TabPanel_TabBottom > .TabHeader > span {
    border-top: 0;
}

.TabHeaderHidden > .TabHeader {
    display: none !important;
}

.TabHeaderHidden > .TabBody {
    height: 100%;
}

.TabHeader > span, .TabHeader > a {
    border-radius: 0 !important;
    box-shadow: 0 0 0;
    justify-content: center;
    display: flex;
    text-transform: uppercase;
    border: solid 1px transparent;
    overflow: hidden;
    opacity: 0.5;
}

.TabHeader > span:hover,
.TabHeader > a:hover {
    outline: solid 1px #80808000;
    opacity: 0.75;
}

.TabHeader > span:active,
.TabHeader > a:active {
    box-shadow: 0 0 0;
    text-shadow: 0 0 0;
    opacity: 0.75;
}

.TabHeader span.Selected {
    --panelHeaderTextColor:#03A9F4;
    box-shadow: 0 0 0;
    border-radius: 0;
    text-shadow: 0 0 0;
    border-color: #80808000;
    background-color: transparent;
    color: var(--panelHeaderTextColor);
    opacity: 1.0;

}


/* META  : .UIComponents.UIElements.TabBody */
.TabBody > div
{
    display: none !important;
    opacity: 0.0;
    transition: opacity var(--contentms) ease;
}

.TabBody > div.Selected
{
    display: flex !important;
flex-direction: column;
    box-shadow: 0 0 0;
    min-height: 100%;
    overflow: auto;
flex: 1;
-webkit-overflow-scrolling: touch;
    width: 100%;
    padding: 0 !important;
    border: var(--border2);
    border-radius: var(--gap);
}

.TabBody > div.Selected:has(> .FieldSet:only-child)
{
    padding: 0 !important;
}

.TabBody > div.Selected:has(> .EntityTypeView:only-child)
{
    padding: 0 !important;
}

.TabBody > div.Selected:has(> .TabHeader)
{
    padding: 0 !important;
}

.TabBody
{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 0;
    width: 100%;
}

.TabBody > .EntityTypeView
{
    border-spacing: 0;
}
.TabBody > .FieldSet {
    padding: 0;
    min-height: 100%;
}


/* META  : .UIComponents.UIElements.RTCClient.RTCClient */
.RTCClient {
    box-sizing: border-box;
    padding: 5px;
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
}

.Page:has(.Content.ActiveContent:has(.RTCClientView)) .RTCClient  {
    display: block;
}

.RTCClientView {
    box-sizing: border-box;
    padding: 0;
    width: 100%;
    height: 100%;
    flex: 1;
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

}

.RTCClient .ImageClass
{
    position: relative;
    max-width: 100%;
    max-height: 100%;
    left: 0;
    top: 0;
    border-radius: 50%;
    color: forestgreen;
    align-items:center;
    justify-content: center;
    display: flex;
min-height: 48px;
    min-width: 48px;
    font-size: 40px;
}

.RTCClient .RTCChat {

    flex: 1;
}

.RTCClient .RTCList
{
    min-width: 280px;
    flex-grow: 1;
    box-shadow: 0 0 1px gray;
    overflow: auto;
}

.RTCClient .RTCButton
{
    font-size: 2rem;
}

.RTCClient {
    border-radius: 3px;
    padding: 1px;

}

.RTCClient .RTCBody {
    display: table;
}


/* META  : .UIComponents.UIElements.RTCClient.RTCTitle */
.RTCClient .RTCTitle {
    display: table-cell;
}

.RTCClient.RTCOpen .RTCTitle > div {
    display: flex;
    padding: 5px;
}


/* META  : .UIComponents.UIElements.RTCClient.RTCChat */
.RTCClient .RTCChat {

    z-index: 888;
    background-color: white;
    position: relative;
    display: flex;
    flex-direction: column;
    border: solid 1px #80808040;
}

.RTCChatTop
{
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    flex-direction: row;
}

.RTCChatLeft
{
    top: 0;
    left: 0;
display: flex;
align-items: center;
}

.RTCChatRight
{
    top: 0;
    right: 0;
    display: flex;
align-items: center;

}

.RTCChatCenter
{
    display: flex;
    flex: 1;
align-items: center;}

.RTCChatBottom
{
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.RTCChatBody
{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    flex: 1;
    display: block;
    width: 100%;
}

.RTCUserTitle
{
    line-height: 38px;
    vertical-align: middle;
    padding: 5px 5px 5px 10px;
}

.RTCUserPicture
{
    height: 60px;
    width: 60px;
    margin: 2px;
    border-radius: 50%;
    background-color: white;
    font-size: 60px;
    padding: 0;
}

.RTCChatBottom textarea {
    overflow: auto;
-webkit-overflow-scrolling: touch;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    border: 0;
    min-height: 6em;
    border: solid 1px #80808040;
}

.RTCChatBody
{
    border: solid 1px #80808040;
}


/* META  : .UIComponents.UIElements.RTCClient.RTCBody */
.RTCClient > .RTCBody {
    display: none;
    flex-direction: row;
    flex-wrap: nowrap    ;
    min-height: 320px;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: white;
}

.RTCClient .RTCBody
{
display: grid;
grid-template-columns: 340px 1fr;
grid-template-rows: auto 1fr auto;
gap: 0px 0px;
grid-template-areas:
    "RTCtl RTCtc"
    "RTCml RTCmc"
    "RTCbl RTCbc";
}

.RTCClient .RTCBody .RTCVideos
{
    display: none;
}

.RTCClient .RTCMeBody
{
    grid-area: RTCtl;
}

.RTCClient .RTCTitle
{
    grid-area: RTCtc;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
    border: solid 1px #80808040;
    min-height: 52px;
    background: white;
}

.RTCClient .RTCUsers
{
    grid-area: RTCml;
    border: solid 1px #80808040;

}

.RTCClient .RTCSearch
{
    grid-area: RTCbl;
    border: solid 1px #80808040;

}

.RTCClient .RTCChat
{
    grid-area: RTCmc;
    border: solid 1px #80808040;
    display: none;
}

.RTCClient .RTCHome
{
    grid-area: RTCmc;
    border: solid 1px #80808040;
    overflow-y: auto;
    background: #f5f5f5;
    padding: 12px 16px;
}

.RTCClient .RTCChatInput
{
    border: solid 1px #80808040;
    grid-area: RTCbc;
    min-height: 56px;
}

.RTCClient .RTCChatInput > textarea
{
    display: none;
}


/* META  : .UIComponents.UIElements.RTCClient.RTCList */
.RTCClient .RTCList
{
    display:flex;
    flex-direction: column;
    position: relative;
    flex-grow: 1;
}

.RTCClient .RTCList .RTCListTitle
{
    padding: 0.5em;
    text-align: left;
    font-size: 1.5em;
    text-align: center;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* META  : .UIComponents.UIElements.RTCClient.RTCUsers */
.RTCClient .RTCUsers {
    background-color: rgba(255,255,255,0.1);
}.RTCClient .RTCUsers {

    left: 0;
    right: 0;
    overflow: auto;
-webkit-overflow-scrolling: touch;
    padding: 0;
    min-width: 160px;
    flex: 1;
}

.RTCClient  .PrecenseTitle {
    padding: 5px;
    text-align: center;
}

.RTCClient .PrecenseTitle {
    color: silver;
}

.RTCClient .RTCUsers > div:hover {
    background-color: rgba(255,222,0,0.4);
}

.RTCClient .PrecenseState_Online {
    border-right: 5px solid green !important;
}


/* META  : .UIComponents.UIElements.RTCClient.RTCMe */
.RTCClient .RTCMe  {
    padding: 5px;
    border: solid 1px #80808040;
    border-right: solid 8px silver;
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: 1em 1fr 1em;
    grid-gap: 1px;
}

.RTCClient .RTCMe .ImageClass {
    grid-column: 1;
grid-row: 1 / 4;
    max-width: 100%;
    max-height: 100%;
    width: 48px;
    height: 48px;
    left: 0;
    top: 0;
    border-radius: 50%;
    font-size: 40px;
    color: forestgreen;
    align-items:center;
    justify-content: center;
}

.RTCClient .RTCMe .RTCUserName {
    grid-column: 2 / 2;
    grid-row: 2 / 2;
    padding: 1px 3px;
    font-size: 1.5rem;
}

.RTCClient .RTCMe .RTCUserDescription {
    grid-column: 2 / 2;
    grid-row: 3 / 3;
    padding: 0 3px;
    font-size: 80%;
    font-weight: 200;
    opacity: 0.5;
}

.RTCClient  .RTCDevice {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 70%;
    font-weight: 300;
}

.RTCClient .RTCMe > img
{
    max-height: 32px;
}


/* META  : .UIComponents.UIElements.RTCClient.RTCUsersItem */
.RTCClient .RTCUsers > div {
    padding: 8px;
    border-right: solid 8px silver;
    border-bottom: solid 1px rgba(127,127,127,0.2);
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: 11px 1fr 11px;
}

.RTCClient .RTCUsers > div > .ImageClass {
    grid-column: 1;
grid-row: 1 / 4;
color: gray;
}

.RTCClient .RTCUsers > div > .RTCUserName {
    grid-column: 2 / 2;
    grid-row: 2 / 2;
    padding: 1px 3px;
    font-size: 1.25em;
    display: flex;
    align-items: center;
}

.RTCClient .RTCUsers > div > .RTCUserDescription {
    grid-column: 2 / 2;
    grid-row: 3 / 3;
    padding: 0 3px;
    font-size: 80%;
    font-weight: 300;
}


/* META  : .UIComponents.UIElements.RTCClient.RTCSearch */
.RTCClient .RTCSearch
{
    display: block;
}

.RTCClient .RTCSearch input
{
    height: 100%;
    border: 0;
}


/* META  : .UIComponents.UIElements.RTCClient.RTCVideo */
.RTCClient video {
    width: 100%;
    box-sizing: border-box;
    background-image: url(/images/biz/play.png);
    background-size: 48px 48px;
    background-repeat: no-repeat;
    background-position: center center;
}

.RTCClient video {

    box-shadow: 0 0 4px grey;
}

.RTCClient .LocalVideo
{
    display: none;
}.RTCClient .RTCChat .LocalVideo
{
    position:absolute;
    right: 8px;
    bottom: 8px;
    width: 20vw;
}

.RTCClient .RTCVideos .VideoPlayButton {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0.5;
    bottom: 0;
}


/* META  : .UIComponents.UIElements.RTCClient.RTCAction */
.RTCChatActions {
    position: absolute;
    right: 0;
    top: 0;
}

.RTCAction {
    padding: 4px;
    opacity: 0.75;
    margin: 4px;
}

.RTCChatTop .RTCAction
{
    border-radius: 0;
}

.RTCAction::before {
    padding: 4px;
}

.RTCAction:hover {
    opacity: 1.0;
}

.RTCChat .RTCAction.ImageClass:before
{
    font-size: 24px;
}

.RTCChat .RTCAction_CallVideo
{
    display: flex;
}.RTCChat .RTCAction_Hangup
{
    display: none;
    color: red;
}


/* META  : .UIComponents.UIElements.RTCClient.RTCModeUser */
.RTCModeUser .RTCList {
    display: none;
}

.RTCClient .RTCChat {
    display: none;
}.RTCClient.RTCModeUser .RTCChat {
    display: flex;
    grid-row: 1 / 9;
}

.RTCModeUser .LocalVideo {
    display: flex;
}


/* META  : .UIComponents.UIElements.RTCClient.RTCModeVideo */
.RTCClient.RTCModeVideo .RemoteVideo
{
max-height: 70vh;
}

.RTCClient.RTCModeVideo .RTCChat {
    display: flex;
    grid-row: 1 / 9;
    grid-column: 1 / 9;
}

.RTCClient.RTCModeVideo .RTCChat .RTCVideos {
    display: flex;
    position: relative;
}

.RTCClient.RTCModeVideo .RTCChat .RTCAction_CallVideo {
    display: none;
}

.RTCClient.RTCModeVideo .RTCChat .RTCAction_CallDisplay {
    display: none;
}

.RTCClient.RTCModeVideo .RTCChat .RTCAction_CallAudio {
    display: none;
}

.RTCClient.RTCModeVideo .RTCChat .RTCAction_Hangup {
    display: flex;
}


/* META  : .UIComponents.Specialized.SolutionGroup */
.SolutionGroupTab
{
    display: flex;
    flex-direction: column !important;
    transition: 1s;
}

.SolutionGroupTab > .SolutionGroupBody
{
    display: flex;
    flex-direction: column;
}

.SolutionGroupTab > .SolutionGroupBody > div
{
    display: none !important;
    border: 0 !important;
}

.SolutionGroupTab > .SolutionGroupBody > div.Selected
{
    display: flex !important;
    -webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;

}

.SolutionGroupTab > .SolutionGroupTabs
{
    display: flex;
    flex-direction: row !important;
    align-items: stretch;
    justify-content: center;
    background-color: var(--backColor);
    border-bottom: solid 2px var(--backColor);
    flex-wrap: wrap;
}

.SolutionGroupTab.SolutionGroupTabFull > .SolutionGroupTabs
{
    border-bottom: solid 0px var(--backColor);

}

.SolutionGroupTab > .SolutionGroupBody > .Solution
{
    border: 0 !important;
}

.SolutionGroupTab > .SolutionGroupBody > .Solution > .Solution_Body
{
    padding: 16px;
    min-height: 14em;
    margin: 0 auto;
}

.SolutionGroupTab > .SolutionGroupBody > .Solution > .Solution_Title
{
    display: none !important;
}

.SolutionGroupTab > .SolutionGroupTabs > a
{
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.7s ease,
    height 0.7s ease-out,
    padding 0.7s ease-in-out;
}

.SolutionGroupTab > .SolutionGroupTabs > a.Selected
{
    position: relative;
    top: 2px;
    background-color: white;
    border-left: solid 2px var(--backColor);
    border-right: solid 2px var(--backColor);
}

.SolutionGroupTabFull .SolutionGroupTabs
{
    align-items: stretch;
}

.SolutionGroupTabFull .SolutionGroupTabs > a
{
    padding: 3em 16px;
    flex: 1;
    border: solid 2px var(--backColor);
    background-color: white;
    transition: background-color 0.7s ease,
    height 0.7s ease-out,
    padding 0.7s ease-in-out;

}
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}


/* META  : .UIComponents.Specialized.Browsers.Safari */
.BROWSER_Safari .Button, .BROWSER_Mobile_Safari .Button {
    transition-property: none !important;
}

.BROWSER_Safari .Button:before, .BROWSER_Mobile_Safari .Button:before {
    transition-property: none !important;
    content: none;
    display: none;
}

.BROWSER_Safari .View, .BROWSER_Mobile_Safari .View
{
    display: flex;
}

.BROWSER_Safari .ViewBody, .BROWSER_Mobile_Safari .ViewBody
{
    display: flex;
}

.BROWSER_Safari .ViewBody > .ItemView, .BROWSER_Mobile_Safari .ViewBody > .ItemView
{
    display: flex;
}


/* META  : .UIComponents.Specialized.Designer */
#Designer_Element_Form
{
    max-width: 320px;
    min-width: 320px;

    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    background-color: #d0d0d8;
    color: #404040;
    display: flex;
    flex-direction: column;
    font-family: "HankenGrotesk";
}

#Designer_Element_Form input:disabled,
#Designer_Element_Form select:disabled
{
    background-color: transparent;
}

body.DesignerMode
{
border-right: solid 320px transparent;
}

body.DesignerMode .OBJECT
{
    outline: solid 1px #0000FF20;
}

body.DesignerMode .OBJECT:hover
{
    outline: solid 4px #FF00FF40 !important;
}

body.DesignerMode .OBJECT.CURRENT
{
    outline: solid 4px #FF000040 !important;
}

#Designer_Element_Form .ElementGroups
{
    overflow: auto;
    flex:1;
background-color: #e0e0e8;
display: flex;
flex-direction: column;

}

#Designer_Element_Form .ElementGroup
{
    position: relative;
    display: flex;
    flex-direction: column;
    border: var(--border1);
}

#Designer_Element_Form .ElementHeader
{
    text-align: left;
    padding: 8px 32px;
    font-weight: 700;
    font-size: 120%;
border-bottom: var(--border3);
}

#Designer_Element_Form .ElementGroupTitle
{
    text-align: left;
    padding: 8px;
    font-weight: 600;
}

#Designer_Element_Form .ElementGroupBody
{
    display: none;
    overflow: auto;
    flex:1;
    background-color: #e8e8ef;

}

#Designer_Element_Form .ElementGroup.Selected
{
    flex: 1;
}

#Designer_Element_Form .ElementGroup:before
{
    content: var(--icon-Chevron-Up);
    font-family: "361";
    position: absolute;
    right: 8px;
    top: 8px;

}

#Designer_Element_Form .ElementGroup.Selected:before
{
    content: var(--icon-Chevron-Down);
}

#Designer_Element_Form .ElementGroup.Selected .ElementGroupBody
{
    display: block;
    position: absolute;
    top: 2.5em;
    left: 0;
    right: 0;
    bottom: 0;
}

#Designer_Element_Form  .AttributeType_Select .AttributeValue:after
{
    content: var(--icon-Chevron-Down);
    font-family: "361";
    position: absolute;
    right: 1em;
    top: 1em;
}

#Designer_Element_Form  .AttributeSetTitle
{
    padding: 8px;
    text-align: left;
    font-weight: bold;
}

#Designer_Element_Form .AttributeLabel
{
    padding: 8px 0 0 0;
    flex:1;
    font-size: 90%;
}

#Designer_Element_Form .AttributeValue
{
    position: relative;
    flex:3;
}

#Designer_Element_Form .CloseMe
{
    position: absolute;
    right: 0;
    top: 0;
    padding: 4px;
    font-size: 24px;
}

#Designer_Element_Form .SaveMe
{
    position: absolute;
    right: 32px;
    top: 0;
    padding: 4px;
    font-size: 24px;
}

#Designer_Element_Form .UpMe
{
    position: absolute;
    left: 0;
    top: 0;
    padding: 4px;
    font-size: 24px;
}

#Designer_Element_Form .AttributeValue option
{
    font-family: "HankenGrotesk";
}

#Designer_Element_Form .AttributeValue input,
#Designer_Element_Form .AttributeValue textarea,
#Designer_Element_Form .AttributeValue select
{
    font-weight: bold;
    font-family: "HankenGrotesk";
    border-radius: 0;
}

#Designer_Element_Form .AttributeValue .Selected
{
    background-color: green;
    color: white;
}

#Designer_Element_Form .Attribute
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 2px 8px;
}

#Designer_Element_Form .AttributeSetHasTitle
{
    border: var(--border1);

}


/* META  : .UIComponents.Specialized.NumericKeyPad */
table.NumericKeyPad {
    width: 100%;
    border-spacing: 5px;
    display: table !important;
}

table.NumericKeyPad_Horizontal
{
    display: flex !important;
    justify-content: center;
    align-content: stretch;
    align-items: center;
}

table.NumericKeyPad_Horizontal > tr {
    display: flex !important;
    justify-content: center;
    align-content: stretch;
    align-items: center;
}

table.NumericKeyPad_Horizontal > tr > td {
    display: flex !important;
    justify-content: center;
    align-content: stretch;
    align-items: center;
    margin-right: 1px;
}

table.NumericKeyPad td {
    font-size: 42px;
    padding: 4px;
    line-height: 1.5em;
    vertical-align: middle;
    font-weight: bold;
    text-align: center !important;
    box-shadow: 0 0 5px #656565;
    cursor: pointer;
}.Selections_NumericKeyPad
{
    max-width: 16em;
}

.Selections_NumericKeyPad input {
    font-size: 200%;
    padding: 1px;
    text-align: center;
}

.Selections_NumericKeyPad button
{
    display: block;
    width: 100%;
}.Selections_NumericKeyPad .OkKeyPad {
    background-color: #303030;
    color: white;
}


/* META  : .UIComponents.Specialized.Menu_Arrow_Down */
.ValueField .Menu_Arrow_Down {
    padding-right: 0.5em !important;
    padding-left: 1.25em !important;
}

.Menu_Arrow_Down {
    position: relative;
}

.Menu_Arrow_Down.SelectionsMenuOpen {
    outline: dotted 1px gray;
}

.EntityTypeLists.Menu_Arrow_Down {
    position: relative;
    border: 0;
    font-size: 1em;
    background-color: transparent;
    color: var(--textColor);
    /* Reserve room for the absolute chevron (::after, ~2em at right:0) so the
       list title never runs under it in any context (default safeguard). */
    padding-right: 2.4em;
}

.Top > .TopCenter .EntityTypeLists.Menu_Arrow_Down {
    font-size: 1em;
    /* right padding must clear the absolute chevron (.Menu_Arrow_Down::after is
       ~2em wide at right:0); 1.5em was too small so the text ran under it. */
    padding: 0.5em 2.4em 0.5em 1.25em;
    height: 100%;
}

.Menu_Arrow_Down:hover:after {
    opacity: 1.0 !important;
}

.Menu_Arrow_Down {
    border: var(--inputBorder);
}

.Menu_Arrow_Down::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: auto;
    height: fit-content;
    text-align: center;

    right: 0;
    padding: 8px;
    font-size: 1em;
    opacity: 0.5;
    pointer-events: none;
    display: flex;
    align-items: center;
    margin: auto;
    font-family: "361";
    content: var(--icon-Chevron-Down);
}


/* META  : .UIComponents.Specialized.NewWindow */
.NewWindow
{
    display: block;
    height: 100%;
    overflow: auto;
-webkit-overflow-scrolling: touch;
}.NewWindow .TabBody {
    height: auto;
}.NewWindow body {
    padding: 0 100px;
}

.NewWindow > body > div {
    height: 100%;
}

.NewWindow .DirectionVer
{
    height: auto;
}

.NewWindow .SingleItem > .CloseButton {
    display: none;
}

.NewWindow {
    background-color: silver;
    background-image: none;
}


/* META  : .UIComponents.Specialized.NewWindow_PrintPreview */
.NewWindow_PrintPreview .InlineHelpText {
    display: none;
}

.NewWindow_PrintPreview .AddGroupField {
    display: none;
}

.NewWindow_PrintPreview .BrowseDataPanel .BrowseItem {
    display: none;
}

.NewWindow_PrintPreview .ETWMenu {
    display: none !important;
}

.NewWindow_PrintPreview .BrowseDataPanel .FilteredBrowseItem {
    display: inline-block;
}

.NewWindow_PrintPreview .BrowseDataPanel .SingleBrowseItem {
    display: inline-block;
    height: auto;
}

.NewWindow_PrintPreview .CenterBody {
    height: auto;
}

.NewWindow_PrintPreview .ItemBody > .Fields {
    height: auto !important;
    padding: 0;
}

.NewWindow_PrintPreview .GroupByTitle {
    overflow: visible !important;
    }

.NewWindow_PrintPreview .SingleItemType {
    width: auto;
    left: auto;
    right: auto;
    display: block;
    transform: none;
    bottom: 0;
}.NewWindow_PrintPreview   iframe {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 0 0 0;
    box-sizing: border-box;
    z-index: 10;
}

.NewWindow_PrintPreview .ViewBody {
    margin: auto !important;
    padding: 0;
}

.NewWindow_PrintPreview .BrowseDataPanel {
    height: auto;
}

.NewWindow_PrintPreview .Actions {
    display: none;
}

.NewWindow_PrintPreview .MicroButton {
    display: none;
}

.NewWindow_PrintPreview .ToggleButton {
    display: none;
}

.NewWindow_PrintPreview .ItemBody {
    overflow: visible;
    border: 0;
}

.NewWindow_PrintPreview .EntityTypeViewTitle {
    display: inline-block;
    }

.NewWindow_PrintPreview .EntityTypeLists {
    display: inline-block;
    vertical-align: middle;
    height: 2em;
    text-align: right;
    line-height: 3.5em;
    margin: 0 1em;
}

.NewWindow_PrintPreview div.EntityTypeView, .NewWindow_PrintPreview .SingleItem, .NewWindow_PrintPreview .FieldSet, .NewWindow_PrintPreview table.EntityTypeView {
    height: auto !important;
    max-width: 100%;
    flex:1;
    }

.NewWindow_PrintPreview .ItemActions {
    display: none;
}.NewWindow_PrintPreview body #PrintPreviewBody  .Field.LabelPositionLeft > .FieldValue {
max-width: calc(100% - 6em);
}.NewWindow_PrintPreview .LabelPositionLeft > * {
    display: table-cell !important;
    vertical-align: middle;
    }

.NewWindow_PrintPreview .SingleItem  .NoSingleItemTitle {
    display: none;
}

.NewWindow_PrintPreview .PagePortrait {
    margin-left: auto;
    margin-right: auto;
    width: 210mm !important;
    padding: 0;
}

.NewWindow_PrintPreview body #PrintPreviewBody {
    background-color: white !important;
    box-shadow: 0 0 5px #656565;
    --fieldLabelWidth: 6em;
    --fieldLabelPadding: 0;
}

.PreviewTools .Orientation a.Selected {
    background-color: white;
    color: #222222;
}
.NewWindow_PrintPreview .SingleItem > .ItemHeader,.NewWindow_PrintPreview .SingleItem > .ItemFooter{
    display: none !important;
}
.PreviewTools a:hover {
    opacity: 1.0;
}

.NewWindow_PrintPreview .SendItems a:hover {
    opacity: 1.0;
}

.BrowseFilterPanel .ActionPanel_FilterBy select, .BrowseFilterPanel .ActionPanel_FilterBy input {
    background-color: white;
    opacity: 1.0;
    border-radius: 0;
}

.NewWindow_PrintPreview .SingleItem {
    background-color: white;
    border: 0;
}

/* The paper (#PrintPreviewBody) is the only opaque surface — it is white.
   Every inner container is transparent so the white paper shows through
   uniformly; otherwise containers left transparent over the dark viewer
   chrome (#525659) would let gray bleed through in the middle. */
.NewWindow_PrintPreview #PrintPreviewBody {
    background: #fff !important;
}
.NewWindow_PrintPreview #PrintPreviewBody .SingleItem,
.NewWindow_PrintPreview #PrintPreviewBody .ItemBody,
.NewWindow_PrintPreview #PrintPreviewBody .Fields,
.NewWindow_PrintPreview #PrintPreviewBody .FieldSet,
.NewWindow_PrintPreview #PrintPreviewBody .Panel,
.NewWindow_PrintPreview #PrintPreviewBody .PageZone,
.NewWindow_PrintPreview #PrintPreviewBody .Contents,
.NewWindow_PrintPreview #PrintPreviewBody .Field,
.NewWindow_PrintPreview #PrintPreviewBody .FieldValue {
    background: transparent !important;
}

/* ── Print header (task #25): every preview/print gets a document header
   with the document type title + organisation + date. Injected by atom.js
   $redraw as the first child of #PrintPreviewBody. ── */
.NewWindow_PrintPreview .PrintPreviewHeader {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 10px;
    margin: 0 0 18px;
    border-bottom: 2px solid #111827;
    page-break-inside: avoid;
    break-inside: avoid;
}
/* When the header is a designer-configured HeaderForm, the SingleItem's
   .ItemHeader (which carries the rendered form) is revealed and tagged
   .PrintPreviewHeaderForm — show it as a block letterhead (override the
   generic .ItemHeader hide rule) rather than the flex title/meta row. */
.NewWindow_PrintPreview .PrintPreviewHeaderForm,
.NewWindow_PrintPreview .SingleItem > .ItemHeader.PrintPreviewHeaderForm {
    display: block !important;
    justify-content: initial;
    align-items: initial;
    background: transparent !important;
}
.NewWindow_PrintPreview .PrintPreviewHeader .PPH_TitleWrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.NewWindow_PrintPreview .PrintPreviewHeader .PPH_Eyebrow {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
}
.NewWindow_PrintPreview .PrintPreviewHeader .PPH_Title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: #111827;
    letter-spacing: -0.01em;
}
.NewWindow_PrintPreview .PrintPreviewHeader .PPH_Meta {
    text-align: right;
    font-size: 12px;
    line-height: 1.45;
    color: #6b7280;
    white-space: nowrap;
}
.NewWindow_PrintPreview .PrintPreviewHeader .PPH_Org {
    display: block;
    font-weight: 600;
    color: #374151;
    font-size: 13px;
}
.NewWindow_PrintPreview .PageHideTitle .PrintPreviewHeader { display: none; }

/* Display mode: fields are read-only output on paper. Flatten any residual
   form controls so nothing prints as an editable box. Scoped to the paper
   (#PrintPreviewBody) so the PreviewTools zoom controls keep their styling. */
.NewWindow_PrintPreview #PrintPreviewBody input,
.NewWindow_PrintPreview #PrintPreviewBody select,
.NewWindow_PrintPreview #PrintPreviewBody textarea {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #111827 !important;
    -webkit-appearance: none;
    appearance: none;
    padding-left: 0 !important;
    resize: none;
}
.NewWindow_PrintPreview .FieldLabel { color: #374151; }
.NewWindow_PrintPreview .FieldValue { color: #111827; }

@media print {
    /* Paper output: white background, exact ink, no viewer chrome/shadows. */
    .NewWindow_PrintPreview,
    .NewWindow_PrintPreview body { background: #fff !important; }
    .NewWindow_PrintPreview * {
        box-shadow: none !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .NewWindow_PrintPreview .PreviewTools { display: none !important; }
    .NewWindow_PrintPreview body { padding: 0 !important; }
    .NewWindow_PrintPreview body #PrintPreviewBody {
        box-shadow: none !important;
        width: auto !important;
        margin: 0 !important;
    }
    .NewWindow_PrintPreview .PrintPreviewHeader { border-bottom-color: #000 !important; }
    @page { margin: 12mm; }
}


/* META  : .UIComponents.Specialized.NewWindow_PrintPreview.NewWindow_PrintPreview_NewWindow_PrintPreview */
.NewWindow_PrintPreview td {
    overflow: visible !important;
    }

.NewWindow_PrintPreview * {
    position: relative !important;
    min-height: unset !important;
}

.NewWindow_PrintPreview {
    background-color: #525659;
}


/* META  : .UIComponents.Specialized.NewWindow_PrintPreview.NewWindow_PrintPreview_Other */
/* task #25 — this slot (NewWindow_PrintPreview_Other) had been corrupted: every
   rule lost its selector ("{ … }"), so the whole block was invalid CSS the
   browser silently dropped — it styled nothing. The live PrintPreview rules all
   live in CssKey=415 (.NewWindow_PrintPreview …). Only the recoverable intent
   (landscape page width) is kept here, properly scoped. */
.NewWindow_PrintPreview .PageLandscape {
    margin-left: auto;
    margin-right: auto;
    width: 297mm !important;
}


/* META  : .UIComponents.Specialized.NewWindow_PrintPreview.NewWindow_PrintPreview_PreviewTools */
.NewWindow_PrintPreview .PreviewTools {
    position: fixed !important;
    top: 50px !important;
    right: 24px !important;
    width: auto !important;
    bottom: auto !important;
    height: auto !important;
    z-index: 999999;
}

.NewWindow_PrintPreview .PreviewTools.Run {
    position: fixed !important;
    top: 0px !important;
    right: 0 !important;
    width: 100% !important;
    bottom: 0 !important;
    height: 100% !important;
    background-color: rgba(127,127,127,0.5);
    z-index: 999999;
}

.PreviewTools a {
    opacity: 0.5;
    color: white;
}


/* META  : .UIComponents.Specialized.NewWindow_PrintPreview.NewWindow_PrintPreview_SendItems */
.NewWindow_PrintPreview .SendItems span {
    display: block;
    text-align: center;
}

.NewWindow_PrintPreview .SendItems a {
    display: block;
    text-align: center;
    line-height: 24px;
    width: 60px;
    margin: 3px;
}

.NewWindow_PrintPreview .SendItems a {
    background-color: rgba(255,255,255,1.0) !important;
    color: #222222;
    opacity: 0.5;
    box-shadow: 0 0 4px;
}


/* META  : .UIComponents.Specialized.Confirm */
.ConfirmBox {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 10000;
}

.ConfirmWindow {
    position: absolute;
    left: 25%;
    right: 25%;
    width: 30em;
    margin: 0 auto;
    bottom: auto;
    top: 20%;
    height: auto !important;
}

.ConfirmTitle {
    display: block;
    vertical-align: middle;
    text-align: center;
    padding: 2em 2em 4.5em 2em;
    width: 100%;
    font-size: 150%;
}

.ConfirmCancel {
    position: absolute;
    left: auto;
    top: auto;
    right: 60%;
    padding: 1em;
    bottom: 1em;
    text-align: center;
    width: 7em;
    cursor: pointer;
}

.ConfirmOk {
    position: absolute;
    right: auto;
    top: auto;
    left: 60%;
    width: 7em;
    padding: 1em;
    bottom: 1em;
    text-align: center;
    cursor: pointer;
}

.ConfirmBox {
    background-color: rgba(0,0,0,0.5);
}

.ConfirmWindow {
    background-color: white;
}

.ConfirmCancel {
    background-color: red;
    color: white;
}

.ConfirmOk {
    background-color: limegreen;
    color: white;
}


/* META  : .UIComponents.Specialized.AreYouSure */
.AreYouSure {
    color: #085cb2;
    font-weight: bold;
}

    .AreYouSure .Yes {
    background-color: rgba(0, 128, 0, 0.50);
    color: white;
    }

    .AreYouSure .No {
    background-color: rgba(255, 0, 0, 0.50);
    color: white;
    }

.AreYouSure {
    padding: 1em;
    font-size: 18px;
    text-align: center;
}


/* META  : .UIComponents.Specialized.CookieConsent */
.CookieConsent {
    background-color: rgb(56, 59, 117);
    opacity: 1;
}

.CookieConsent .CookieConsent_Message {
    color: white;
}

.CookieConsent .CookieConsent_URL {
    color: white;
    text-decoration: underline;
}

.CookieConsent .CookieConsent_IGot {
    background-color: rgb(241, 214, 0);
    color: #222222;
}

.CookieConsent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    font-size: 150%;
    padding: 0.5em;
    Z-INDEX: 100000;
    -webkit-animation-duration: 2s !important;
    animation-duration: 2s !important;
}

    .CookieConsent .CookieConsent_Message {
    display: inline-block;
    width: auto;
    padding: 0.5em;
    }

    .CookieConsent .CookieConsent_URL {
    display: inline-block;
    width: auto;
    padding: 0.5em;
    }

    .CookieConsent .CookieConsent_IGot {
    float: right;
    padding: 0.5em;
    }


/* META  : .UIComponents.Specialized.QuestionMark */
.QuestionMark {
    line-height: 1em;
    display: inline;
    padding: 0 !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: transparent;
    box-shadow: none;
}

.QuestionMark {
    color: #222222;
    font-weight: normal;
    opacity: 0.75;
    box-shadow: 0 0 0 grey;
    border-radius: 0;
    background-color: transparent;
}

.FieldLabel {
    position: relative;
}

.QuestionMark:hover {
    opacity: 1.0;
}

.QuestionMark::after
{
    font-weight: bold;
}

.QuestionMark:hover::before {
    content: attr(title);
    position: fixed;
    left: auto;
    right: auto;
    z-index: 99999;
    font-size: 1.25em;
    text-align: center;
    background-color: #ffca28ed;
    padding: 1em;
    margin-top: -2em;
    width: auto;
    border-radius: 0.3rem;
    max-width: 80vw;
    margin-left: 2em;
    bottom: 0;
}
.QuestionMark::after {
    content: "?" !important;
    display: inline-block;
    width: 0.9em;
    text-align: center;
    padding: 2px;
    position: absolute;
    top: 1.1em;
    color: #ff6f00;
}

.QuestionMark:hover {
    opacity: 1.0;
}
.QuestionMark:hover::before {
    content: attr(title);
    position: fixed;
    left: auto;
    right: auto;
    z-index: 99999;
    font-size: 1.25em;
    text-align: center;
    background-color: #ffca28ed;
    padding: 1em;
    margin-top: -2em;
    width: auto;
    border-radius: 0.3rem;
    max-width: 80vw;
    margin-left: 2em;
}


/* META  : .UIComponents.Specialized.LightBox */
.LightBox {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100000;
}

.LightBox > * {
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 10%;
    right: 10%;
}

    .LightBox {
    position: fixed;
    z-index: 99999;
    }

.LightBox_CloseButton {
    position: absolute;
    top: 2em;
    right: 1em;
    width: auto;
    height: auto;
    bottom: auto;
    right: auto;
    font-size: 1.5em;
    padding: 0.5em 0.85em;
    z-index: 99999;
    right: 10%;
    left: auto;
}

.LightBox_CloseButton:hover {
    transform: scale(1.1);

}

    .LightBox_CloseButton:before {
    content: var(--icon-Times);
    font-family: "361";
    font-size: 150%;
    }

.LightBox_Body {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    z-index: 99999;
}

.LightBox_Body > iframe {
    width: 100%;
    height: 100%;
}

.LightBox
{
    background-color: rgba(0,0,0,0.5);
}

.LightBox {
    background-color: rgba(0,0,0,0.5);
}

.LightBox_CloseButton {
    background-color: transparent;
    border-radius: 100%;
    color: white;
}

.LightBox_Body {
    background-color: white;
}


/* META  : .UIComponents.Specialized.Running */
.RunningDIV {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
}

.RunningIMG {
    position: absolute;
    top: 50%;
    margin-top: -32px;
    margin-left: -32px;
    left: 50%;
    width: 64px;
    height: 64px;
    animation: anim-Spin 2s infinite linear,fadeinrunningimg 1s linear;
    display: inline-block;

    content: var(--icon-Gear);
    font-family: "361";

visibility: visible;
    transition: opacity 1s, visibility 1s;
    z-index: 10000;
}

.ViewBody > .RunningIMG {
    position: absolute;
    margin-left: -32px;
    margin-top: -32px;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    animation: fa-spin 2s infinite linear,fadeinrunningimg 5s linear;
}

.MicroView  .RunningIMG {
    position: absolute;
    margin-left: -24px;
    margin-top: -24px;
    top: 50%;
    left: 50%;
    width: 48px !important;
    height: 48px !important;
}

.MicroView .RunningIMG::after
{
    width: 48px;
    height: 48px;
    font-size: 48px;
    margin-top: 1px;
    margin-left: 1px;
}

.RunningMessage {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 50%;
    margin-top: -128px;
    text-align: center;
    font-size: 24px;
}

.RunningPercent {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 75%;
    margin-top: -128px;
    text-align: center;
    font-size: 32px;
}

.RunningPercent:after
{
content: " %";
opacity: 0.5;
}

.RunningIMG::after
{
    content: var(--icon-Gear);
    font-family: "361";
    display: inline-block;
    width: 64px;
    height: 64px;
    font-size: 64px;
}

.RUNNING {
    text-align: center;
    font-size: 150%;
    padding: 1em;
}

.RunningDIV {
    background-color: rgba(0,0,0,0.4);
}

.RunningIMG {
    opacity: 1;
    background-color: transparent;
}

.RunningMessage {
    color: #ffff88;
}

.RunningIMG::after {
    color: lightblue;
    text-shadow: 0 0 2px #656565;
}

.RUNNING {
    color: darkred;
}


/* META  : .UIComponents.Specialized.INFOMessage */
.INFOMessages {
    position: fixed;
    right: 1em;
    left: auto;
    top: auto;
    bottom: 1em;
    padding: 0;
    margin: 0;
    max-width: 320px;
    z-index: 10000;
}

.INFOMessages > div {
    padding: 0.5em;
    margin: 0.5em;
    width: 15em;
    font-size: 150%;
    position: relative;
}

.INFOMessages > div:after
{
    content: "x";
    position: absolute;
    top: 0;
    right: 0.5em;
    opacity: 0.5;
    font-size: 80%;
}

.INFOMessages > div:hover:after {
    opacity: 1.0;
}

.INFOMessages > div {
    border-radius: 0.5em;
    background-color: #222222;
    box-shadow: 0 0 5px #656565;
    color: white;
}

.INFOMessages > .info{
    background-color: #ffffff;
    color: black;
}

.INFOMessages > .error{
    background-color: #de4343;
    color: black;
}

.INFOMessages > .run{
    background-color: #51c433;
    color: black;
}

.INFOMessages > .message {
    background-color: #f0f0f0;
    color: black;
}

.INFOMessages > .exception{
    background-color: #ae4343;
    color: white; /* 2026-09-02: siyah/#ae4343 = 3,68:1 AA alti -> white 5,71:1 (.error 4,98 gecer, dokunulmadi) */
}

.INFOMessages > .warning{
    background-color: #eaaf51;
    color: black;
}

.INFOMessages > .success{
    background-color: #81f443;
    color: black;
}


/* META  : .UIComponents.Specialized.Legend */
.ViewLegend {
    position: absolute;
    right: 3px;
    bottom: 32px;
    display: inline-block;
    width: auto;
    font-size: 10px;
    padding: 5px;
}

.ViewLegend > .Colors {
text-align: center;
}

.ViewLegend > .Colors > div {
    height: 15px;
    width: 32px;
    margin-left: auto;
    margin-right: auto;
}
.ViewLegend {
    background-color: white;
    border: solid 1px rgba(127,127,127,0.2);
}


/* META  : .UIComponents.Specialized.SelectionsMenu */
.SelectionsMenu {
    position: fixed;
    max-height: 100%;
    line-height: 1.5em;
    z-index: 1000;
    background-color: rgba(255,255,255,0.98);
    -webkit-backdrop-filter: blur(12px);backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 10px;
    overflow: hidden;
}

.SelectionsMenuOpen {
    outline: solid 2px rgba(0,120,212,0.2);
}

.SelectionsMenu_DatePicker
{
    max-width: 22em !important;
    min-width: 22em !important;
}

.SelectionsMenu.SelectionsMenu_NavHoverMenu
{
    padding: 1em;
    border-radius: 12px;
}

.SelectionsMenu.SelectionsMenu_NavHoverMenu .Nav {
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.SelectionsMenu.SelectionsMenu_NavHoverMenu .Nav:hover {
    background-color: rgba(0,120,212,0.06);
}

.SelectionsMenu .EntityTypeLists
{
    display: block !important;
    overflow: auto;
-webkit-overflow-scrolling: touch;
    max-height: 60vh;
}

.SelectionsMenu select {
    max-height: 10em;
}

.SelectionsMenu .EntityTypeLists > div
{
    display: flex !important;
    padding: 0;

    border-bottom: dotted 1px #e8e8e8;
    border-left: 0;
    border-right: 0;
}

.SelectionsMenu .EntityTypeLists .ETL_View_Item  {
    font-weight: bold;
}

.SelectionsMenu .EntityTypeLists .ETL_Seperator_Item {
    font-weight: bold;
}

.SelectionsMenu .EntityTypeLists .ETL_Item .List_Actions {
    opacity: 0.7;
    }

.SelectionsMenu .EntityTypeLists .ETL_Item:hover .List_Actions {
    opacity: 1.0;
}

.SelectionsMenu .EntityTypeLists > div > *:first-child {
    flex-grow: 1;
}

    .SelectionsMenu .EntityTypeLists > div:last-child {
    border-bottom: dotted 0 silver;
    }

    .SelectionsMenu .EntityTypeLists > div:hover {
    background-color: rgba(0,120,212,0.04);
    }

.SelectionsMenu > .ItemActions {
    display: block;
    min-width: 8em;
max-height: 50vh;
    overflow: auto;
}

.SelectionsMenu > .ItemActions > a {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

}

.SelectionsMenu table
{
    width: 100%;
}

.SelectionsMenu .SelectorTop .DeleteButton {
    right: 1.25em;
    font-size: 200%;
    top: 0;
    padding: 0.2em 0.25em;
    position:absolute;
}

.SelectionsMenu .SelectorTop .CloseButton {
    right: 0;
    font-size: 200%;
    top: 0;
    padding: 0.2em 0.25em;
    position: absolute;
}

.SelectionsMenu table td
{
    height: 24px;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    width: 14.2%;
    font-size: 100%;
}

.SelectionsMenu .LookupField::before {
    content: "";
    width: 0;
    display: none;
}


/* META  : .UIComponents.Specialized.Notification */
.Notifications_Open {
    position: fixed;
    right: 0;
    bottom: 25vh;
    top: auto;
    padding: 0.5em;
    background-color: white;
    color: #303030;
    border-radius: 10px 0 0 10px;
    z-index: 99999;
    font-size: 1.5rem;
    box-shadow: 5px 5px 10px silver;
    border: solid 5px silver;
    border-right: 0;
    transition: 350ms;
}

.Notifications_Close {
    position: absolute;
    right: 0;
    top: 5px;
    bottom: auto;
    padding: 0.5em;
    background-color: white;
    color: #303030;
    border-radius: 0;
    z-index: 99999;
    font-size: 1.5rem;
    transition: 350ms;
}
.Notifications_Panel.Open   .Notifications_Open {
    right: -5em;
    box-shadow: 0 0 0 silver;
    background-color: transparent;
    border-color: transparent;
    }

.ItemView_Notification___Card.Style_S {
    border-left-color: green !important;
}

.ItemView_Notification___Card.Style_W {
    border-left-color: yellow !important;
}

.ItemView_Notification___Card.Style_E {
    border-left-color: orangered !important;
}

.ItemView__Notification__Card.Style_I {
    border-left-color: silver !important;
}

.ItemView_Notification___Card {
    display: block;
    border-radius: 0 !important;
    padding: 5px;
    margin: 1px 0 !important;
    border-left: solid 5px transparent !important;
}

    .ItemView_Notification___Card .FieldValue .InputSpan a {
    padding: 1px;
    }

    .ItemView_Notification___Card .Field_Title {
    font-size: 1.25rem;
    font-weight: bold;
    }

    .ItemView_Notification___Card .Field_Body {
    font-size: 1rem;
    }

.Notification_Title
{
    padding: 1em;
    display: flex;
    align-content: center;
}

.Notification_PanelTop {
    border-left: solid 5px silver;
    border-top: solid 5px silver;
    border-radius: 10px 0 0 0;
}

.Notification_PanelBody .NoRecordsFound {
    position: relative !important;
    border-left: solid 5px silver;
    color: transparent;
}

.Notification_PanelBody .NoRecordsFound:before {

    content: var(--icon-Bell);
    font-family: "361";

    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 4rem;
    color: silver;
    opacity: 0.5;
}

.Notification_PanelBottom {
    border-left: solid 5px silver;
    border-bottom: solid 5px silver;
    border-radius: 0 0 0 10px;
    padding-bottom: 20px;
}

.ItemView_Notification___Card .Field_Status .InputSpan {
    display: none;
}

.ItemView_Notification___Card .Field_Status.FieldValue > .fas {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: 1.5rem;
    display: flex;
    align-self: center;
    justify-content: center;
    padding: 1rem 0;
}

.ItemView_Notification___Card .DoScriptButton_CloseMe {
    position: absolute;
    right: -10px;
    top: 0;
    opacity: 0.5;
    width: auto;
    padding: 1px;
    display: none;
}

    .ItemView_Notification___Card .DoScriptButton_CloseMe:hover {
    opacity: 1.0;
    }

.ItemView_Notification___Card:hover .DoScriptButton_CloseMe {
    display: block;
    outline: 0;
}

.ItemView_Notification___Card .Field_Created {
    font-size: 0.8rem;
    font-style: italic;
    position: absolute;
    right: 0;
    top: -5px;
    width: auto !important;
    display: inline-block !important;
}

.Notifications_Panel {
    position: fixed;
    right: -25em;
    bottom: auto;
    top: 25vh;
    width: 25em;

    padding: 0 0 0 0;
    background-color: white;
    color: #303030;
    border-radius: 10px 0 0 10px;
    z-index: 99998;
    transition: 350ms;
    box-shadow: 5px 5px 10px silver;
}

.Notification_PanelBody {
    overflow: auto;
    max-height: 70vh;
}

.Notifications_Panel .EntityTypeViewBody {
    padding: 0;
}

    .Notifications_Panel.Open {
    right: 0;
    }

    .NotificationsButton {
    background-color: transparent !important;
    margin: 1em auto !important;
    padding: 9px 18px !important;
    width: auto !important;
    color: inherit !important;
}


/* META  : .UIComponents.Specialized.Wizard */
/* === WIZARD STEPPER — Enterprise UI === */

/* Header bar */
.TabHeader.Wizard > div {
    display: none;
}
.TabHeader.Wizard > div.Selected {
    display: flex !important;
    width: 100%;
    background: transparent !important;
    align-items: center;
    justify-content: center;
}
.TabHeader.Wizard {
    margin: 0 0 1.5em 0;
    min-height: 48px;
    border-bottom: 1px solid var(--borderColor, rgba(0,0,0,0.08));
    padding-bottom: 1em;
}

/* Tab container */
.WizardTab {
    display: flex;
    align-items: center;
    width: 100%;
}
.WizardTab > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 33%;
}

/* UXPEAK #6 — Wizard step progress bar */
.WizardProgress {
    width: 100%;
    height: 18px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 9px;
    overflow: hidden;
    margin: 6px 0 2px;
}
.WizardProgressBar {
    height: 100%;
    min-width: 36px;
    background: linear-gradient(90deg, var(--accent, #4285f4), #34a853);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
    border-radius: 9px;
    transition: width 0.25s ease;
}

/* UXPEAK #1 — Advanced collapsible fieldset */
.AdvancedFieldset.AdvancedCollapsed > .PanelBody { display: none; }
.AdvancedFieldset > .PanelHeader.AdvancedToggle { cursor: pointer; }
.AdvancedFieldset > .PanelHeader.AdvancedToggle::after {
    content: "\25B8";
    float: right;
    margin-left: 8px;
    transition: transform 0.2s ease;
}
.AdvancedFieldset.AdvancedCollapsed > .PanelHeader.AdvancedToggle::after { content: "\25BE"; }

/* === Button Base === */
.Wizard .TabButton {
    padding: 10px 1.8em;
    border-radius: 6px;
    font-size: 0.82em;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    position: relative;
    white-space: nowrap;
    line-height: 1.4;
}

/* === Active Step — Solid Primary === */
.WizardTab.Selected > span:nth-child(2) .TabButton {
    background: var(--primaryColor, #2c3e50);
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* === Prev/Next — Ghost Outlined === */
.WizardPrev .TabButton,
.WizardNext .TabButton {
    background: var(--backColor, #fff);
    color: var(--fontColor, #444);
    border: 1px solid var(--borderColor, rgba(0,0,0,0.12));
    font-weight: 400;
    opacity: 0.9;
}
.WizardPrev .TabButton:hover,
.WizardNext .TabButton:hover {
    background: var(--hoverColor, rgba(0,0,0,0.04));
    border-color: var(--primaryColor, #2c3e50);
    color: var(--primaryColor, #2c3e50);
    opacity: 1;
}

/* Next button — right-aligned with subtle arrow feel */
.WizardNext {
    text-align: right !important;
}
.WizardPrev {
    text-align: left !important;
}
.WizardNext .TabButton {
    border-radius: 6px;
}
.WizardPrev .TabButton {
    border-radius: 6px;
}

/* Smooth content transition */
.DirectionWizard > div {
    transition: opacity 0.15s ease;
}


/* META  : .UIComponents.Specialized.Preview */
.PrintPreviewBody .Transition {
    display: none;
}

#PrintPreviewBody {
    padding: 2.54cm 2cm;
}

.PreviewTools > div
{
    margin: 10px 1px;
}

.PreviewTools  a {
    padding: 5px;
    display: inline-block;
}

.PreviewTools .Orientation {
    text-align: center;
}

.PrintPreviewButton  {
    display: inline-block;
    opacity: 0.5;
}

.PrintPreviewButton img {
    height: 16px;
    width: 16px;
}

.PrintPreviewBody > .EntityTypeView > tr > .Center > .CenterBody
{
    height: 100% !important;
}

.PrintPreviewBody > .EntityTypeView > tr > .Center > .CenterBody > .ViewBody
{
    height: 100% !important;
}

#PreviewDIV {
    display: block;
    position: relative;
    width: 100%;
    height: 75vh;
    padding: 0 !important;
}

#PreviewIFrame {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 20px solid transparent;
    border-top: 0;
    border-bottom: 0;
    box-sizing: border-box;
}

#PreviewIFrame body {
    padding: 0 !important;
}

.Print_Preview_Button
{
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 24px !important;
}

.PreviewImage {
    margin: 0 auto;
}

.PreviewIFrame
{
    width: 100%;
    height: 100%;
}

.ItemPreviewButton
{

    font-size: 150% !important;
    padding: 4px 8px;
    opacity: 0.3;
}

.ItemBottom  .ItemPreviewButton
{
    position: absolute;
    top: 0;
    right: 0;
}

.PagePrintPreview body {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    left: auto;
    right: auto;
}

    .PagePrintPreview #MainContent {
    position: relative !important;
    left: auto;
    right: auto;
    bottom: auto;
    min-height: 100% !important;
    margin: 0 auto;
    }.PagePrintPreview .Content {
    position: relative !important;
    left: auto;
    right: auto;
    bottom: auto;
    min-height: 100% !important;
    margin: 0 auto;
    }

.PagePrintPreview .GlobalFiltersBody {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    white-space: normal;
}

.PagePrintPreview .Search, .PagePrintPreview .RootNav, .PagePrintPreview .SubNav {
    display: none !important;
}

    .PagePrintPreview .GlobalFiltersBody .GlobalFilter {
    display: inline-block !important;
    }

#PrintPreviewBody {

    color: #222222;
    background-color: white;
}

.PagePrintPreview {
    background-color: silver !important;
}

.PagePrintPreview body {
    background-color: white !important;
}

.PagePrintPreview {
    background-color: silver !important;
}

.PagePrintPreview #MainContent {
    background-color: white !important;
}

.PagePrintPreview .Content {
    background-color: white !important;
}

.PagePrintPreview .StartLogo {
    background-color: white !important;
}

.PagePrintPreview .GlobalFiltersBody {
    background-color: white !important;
}.PageZoom input {
    width: 3em;
    text-align: center;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    padding: 2px;
}

.PageZoom input[type=range]
{
    width: 80px;
    display: block;
    height: 12px !important;
    margin-left: auto;
    margin-right: auto;
}

.PageZoomTop
{
white-space: nowrap;
}

    .PageZoomTop > a:hover {
    opacity: 1.0;
    }

.PageZoomTop > a {
    display: inline-block;
    min-width: 24px;
    text-align: center;
    opacity: 0.5;
}

.PageZoomTop > a > span {
    font-size: 22px;
    vertical-align: middle;
}

.SendItems
{
    padding: 2px 10px;
}

.SendItems > div
{
    position: relative;
    padding: 1px 1px 1px 32px;
    display: block;
    height: 32px;
    line-height: 32px;
}

.SendItems > div > div
{
    text-align: left;
    vertical-align: middle;
    display: inline-block;
}

.SendItems img
{
    height: 24px;
    position: absolute;
    left: 3px;
    top: 3px;
}


/* META  : .UIComponents.Specialized.ShowHideIf */
.ShowIfDesktop
{
    display: none !important;
}

.Desktop .ShowIfDesktop {
    display: inherit !important;
}

.ShowIfMobile {
    display: none !important;
}

.Mobile .ShowIfMobile
{
    display: inherit !important;
}

.Mobile .HideIfMobile
{
    display: none !important;
}

.Tablet .HideIfTablet {
    display: none !important;
}

.Desktop .HideIfDesktop {
    display: none !important;
}


/* META  : .UIComponents.Specialized.Messages */
#messagediv {
    background-size: 40px 40px;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
    transparent 75%, transparent);
    width: 320px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    left: auto;
    max-width:320px;
    right: 16px;
    top: auto;
    position: fixed;
    _position: absolute;
    animation: animate-bg 5s linear infinite;
    bottom: 16px;
    z-index: 999999;
    font-size: 150%;
}

#messagediv > div
{
    padding: 8px;
    text-align: center;
    margin: 2px;
    box-shadow: 0 0 5px #656565;
}

#messagediv > div > div:nth-child(2)
{
    font-weight: 300;
    font-size: 80%;
}

.info{
    background-color: #ffffff;
}

.error{
    background-color: #de4343;
}

.run{
    background-color: #51c433;
}

.message {
    background-color: #f0f0f0;
}

.exception{
    background-color: #ae4343;
}

.warning{
    background-color: #eaaf51;
}

.success{
    background-color: #81f443;
}


/* META  : .UIComponents.Specialized.Pulse */
@-moz-keyframes pulse {
0% {-moz-transform: scale(1)}
25% {-moz-transform: scale(0.8)}
50% {-moz-transform: scale(1)}
75% {-moz-transform: scale(1.2)}
100% {-moz-transform: scale(1)}
}
@-webkit-keyframes pulse {
0% {-webkit-transform: scale(1)}
25% {-webkit-transform: scale(1.2)}
50% {-webkit-transform: scale(1)}
75% {-webkit-transform: scale(0.8)}
100% {-webkit-transform: scale(1)}
}
@-ms-keyframes pulse {
0% {-ms-transform: scale(1.0)}
25% {-ms-transform: scale(1.2)}
50% {-ms-transform: scale(1.0)}
75% {-ms-transform: scale(0.8)}
100% {-ms-transform: scale(1)}
}

@keyframes pulse {
0% {transform: scale(1.0)}
25% {transform: scale(1.2)}
50% {transform: scale(1.0)}
75% {transform: scale(0.8)}
100% {transform: scale(1)}
}

.faa-pulse.animated, .faa-pulse.animated-hover:hover {
-moz-animation: pulse 2s linear infinite;
-webkit-animation: pulse 2s linear infinite;
-ms-animation: pulse 2s linear infinite;
animation: pulse 2s linear infinite;
}


/* META  : .UIComponents.Specialized.Video */
.BackgroundVideo {
    position: absolute;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -100 !important;
    object-fit: cover;
    opacity: 1.0;
}

video.fullscreen {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translate(-50%, -50%);
}

.FieldValue > video {
    z-index: -1000 !important;
}

.PlayVideoButton:after {
    color: #222222;
    opacity: 0.5;
}


/* META  : .UIComponents.Specialized.Authorization */
.ItemView__Authorization img {
    max-height: 24px;
}

.ItemView__Authorization_Ozet {
    background-color: white;
    background-color: #F9F6F6;
}

.ItemView__Authorization_Ozet .FieldSet_Top {
    background-color: #656565;
    color: white;
}

.ItemView__Authorization_Card
{
    margin: 0;
}

.ItemView__Authorization_Card.ItemView .Field.FieldValue {
    place-content: flex-start;
}
.ItemView__Authorization_Card.ItemView .Field.LabelPositionLeft
{
    flex-direction: column;
}

.ItemView__Authorization_Card.ItemView .FieldLabel {
    opacity: 0.5;
}

.ItemView__Authorization_Card .Field_SecurityQuery * {
    text-align: center !important;
}

.ItemView__Authorization_Card .Field_EntityType.Mode_Display .SubFields {
    display: none;
}

    .ItemView__Authorization_Card .FieldSet_OzetT .DirectionVer > *
{
    border-right: solid 1px rgba(127,127,127,0.2);
    padding: 3px;
    }

    .ItemView__Authorization_Card .Field_DisabledFields,
    .ItemView__Authorization_Card .Field_SecurityQuery {
    border-top: solid 1px rgba(127,127,127,0.2);
    padding: 3px;
    }


/* META  : .UIComponents.Specialized.Print */
body.Printing .DontPrint {
    visibility: none !important;
    opacity: 0;
}

html.Printing .DontPrint {
    visibility: none !important;
    opacity: 0;
}

@media print {

    .LabelPositionLeft .FieldValue {
    width: auto;
    }

    .DirectionVertical > *, .DirectionVer > * {
    height: auto !important;
    }

    .DirectionVertical, .DirectionVer {
    height: auto !important;
    }

    .NewWindow_PrintPreview body {
    position: static !important;
    }

    .FieldRichText .FieldValue {
    height: auto !important;
    }

    @page {
    size: A4;
    margin: 0;
    border: solid 1px blue !important;

    @top-left {
    font-size: 20px;
    }

    @bottom-center {
    font-size: 18px;
    }
    }

    @page:right {
    @bottom-left {
    font-size: 9pt;
    }
    }

    .ItemBody {
    position: relative !important;
    }.DontPrint {
    display: none !important;
    }

    .Page, html, body {
    height: auto !important;
    margin: 0;
    max-height: unset !important;
    z-index: 0 !important;
    overflow: visible !important;
    position: static !important;

    background-color: white !important;
    box-shadow: 0 0 0 !important;
    vertical-align: top;
    }#myPrintHeader {
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    width: 100% !important;
    }

    .PrintNAVTitle {
    font-size: 18px;
    color: #222222;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    }

    .CellRow {
    page-break-inside: avoid !important;
    }

    .Cell {
    page-break-inside: avoid !important;
    }

    table {
    width: auto;
    }

    thead {
    width: auto;
    z-index: 10000;
    display: table-row-group;
    padding: 0;
    }

    tbody {
    width: auto;
    z-index: 100;
    }

    tfoot {
    width: auto;
    z-index: 10000;
    display: table-row-group;
    }

    .ETWBody, .EntityTypeViewBody, .EntityTypeView, .Middle, .Content, .ListBody, .Map, .ListAll, .ListLeft, .ListMiddle, .ListRight {
    position: relative !important;
    height: auto !important;
    z-index: 0 !important;
    margin: 0 !important;
    box-shadow: 0 0 0 !important;
    vertical-align: top;
    }

    .EntityTypeView {
    border: solid 1px silver;
    }

    .ItemSelection {
    border: 0 !important;
    }input, textarea {
    background-color: white !important;
    -webkit-print-color-adjust: exact;
    box-shadow: 0 0 0;
    }

    .DateTimeNow {
    position: fixed;
    top: 0;
    right: 0;
    padding: 5px;
    color: silver;
    }

    .CurrentUserName {
    position: fixed;
    left: 0;
    top: 0;
    padding: 5px;
    color: silver;
    }
}


/* META  : .UIComponents.Specialized.FullScreen */
.MakeFullScreen
{
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

:-webkit-full-screen,
:-moz-full-screen {
    width: 100% !important;
    height: 100% !important;
}

    :-webkit-full-screen .EntityTypeView .EntityTypeView .DisplayFullScreenToggle,
    :-moz-full-screen .EntityTypeView .EntityTypeView .DisplayFullScreenToggle {
    display: none;
    }

.MakeFullScreen {
    background-color: rgba(222,222,222,1.0) !important;
}

:-webkit-full-screen, :full-screen {
    background-color: rgba(222,222,222,1.0) !important;
}

    :-webkit-full-screen .DisplayFullScreenToggle, :full-screen .DisplayFullScreenToggle {
    background-color: white;
    box-shadow: 0 0 9px #656565;
    opacity: 1.0;
    }

.AbsoluteFill
{
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: 0 !important;
    height: 100% !important;
    z-index: 100000;
}

.FixedFill
{
    display: block !important;
    position: fixed !important;
    left: 30px !important;
    right: 30px !important;
    bottom: 30px !important;
    top: 30px !important;
    height: auto !important;
    width: auto !important;

    z-index: 100000;
}

.FixedFill::before {
    position: fixed !important;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: auto;
    height: auto;
    content : "";
}


/* META  : .UIComponents.Specialized.Animations.Blink */
.blink_me {
    animation: blinkme 1s linear infinite;
}

@keyframes blinkme {
    0% {
    opacity: 1.0;
    }
    50% {
    opacity: 0;
    }
    100% {
    opacity: 1.0;
    }

}


/* META  : .UIComponents.Specialized.Animations.Blinker */
.ProcessingOCR {
    display: inline-block;
    position: absolute;
    top: 6px;
    left: 65%;
    margin-left: -16px;
    line-height: 1em;
    margin: 0;
    padding: 5px 10px;
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
50% { opacity: 0.3;   }
}

#Server_Offline_Message {
    position: fixed;
    top: 45%;
    left: 25%;
    right: 25%;
    text-align: center;
    font-size: 300%;
    animation: blinker 1s linear infinite;
}


/* META  : .UIComponents.Specialized.Animations.fadeIt */
.ElementChanged {
    background-image: none !important;
    -webkit-animation: fadeIt 500ms linear;
    -moz-animation: fadeIt 500ms linear;
    -o-animation: fadeIt 500ms linear;
    animation: fadeIt 500ms linear;
}

@-webkit-keyframes fadeIt {
    0% {
    background-color: rgba(0,255,0,1);
    }

    50% {
    background-color: rgba(0,255,0,0.5);
    }

    100% {
    background-color: rgba(0,255,0,0);
    }
}

@-moz-keyframes fadeIt {
    0% {
    background-color: rgba(0,255,0,1);
    }

    50% {
    background-color: rgba(0,255,0,0.5);
    }

    100% {
    background-color: rgba(0,255,0,0);
    }
}

@-o-keyframes fadeIt {
    0% {
    background-color: rgba(0,255,0,1);
    }

    50% {
    background-color: rgba(0,255,0,0.5);
    }

    100% {
    background-color: rgba(0,255,0,0);
    }
}

@keyframes fadeIt {
    0% {
    background-color: rgba(0,255,0,0.5);
    }

    50% {
    background-color: rgba(0,255,0,0.25);
    }

    100% {
    background-color: rgba(0,255,0,0);
    }
}


/* META  : .UIComponents.Specialized.Animations.Animation */
.Choice,
button,
.Button,
[data-action] {
    transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.Choice:hover,
button:hover,
.Button:hover {
    transform: translateY(-1px);
}

.Choice:active,
button:active,
.Button:active {
    transform: translateY(0);
}

.SelectionItem {
    transition: background-color 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="checkbox"] {
    transition: background-color 0.2s ease;
}

.Skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
}

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.Ripple {
    position: relative;
    overflow: hidden;
}

.Ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
}

.Ripple:active::after {
    width: 200px;
    height: 200px;
    opacity: 1;
    transition: 0s;
}

@keyframes menuSlideIn {
    to {
    opacity: 1;
    transform: translateY(0);
    }
}


/* META  : .UIComponents.Specialized.Animations.SelectionsMenu */
.SelectionsMenu {
    position: absolute;
    z-index: 10000;
}

.SelectionsMenu_AddSelect
{
    display: flex;
    flex-direction: column;
}

.SelectionsMenu_AddSelect > .ItemSelector
{
    flex: 1;
    overflow: auto;
}

.SelectionsMenu .ItemSelector {
    max-height: inherit;
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: 80vh;
}

.SelectionsMenu.HasScrollTop::before,
.SelectionsMenu.HasScrollBottom::after {
    content: '';
    position: sticky;
    display: block;
    height: 20px;
    background: linear-gradient(to bottom, white, transparent);
    pointer-events: none;
}

.SelectionsMenu.HasScrollBottom::after {
    background: linear-gradient(to top, white, transparent);
}

@keyframes menuSlideUp {
    from {
    opacity: 0;
    transform: translateY(10px);
    }
    to {
    opacity: 1;
    transform: translateY(0);
    }
}

@keyframes menuSlideDown {
    from {
    opacity: 0;
    transform: translateY(-10px);
    }
    to {
    opacity: 1;
    transform: translateY(0);
    }
}


/* META  : .UIComponents.Specialized.Animations.IOSOpt */
.SelectionsMenu,
.Modal,
.Dialog,
.Popup {
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.ItemSelector,
.EntityTypeView,
.ItemsContainer {
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
}

.SelectionsMenu.closed {
    will-change: auto;
}


/* META  : .UIComponents.Specialized.Animations.LazyImage */
.LazyImage {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.LazyImage[src]:not([src=""]):not([src^="data:"]) {
    opacity: 1;
}

.LazyImage::before {
    content: '';
    display: block;
    background: #f0f0f0;
    /* Bounded, not infinite: a never-resolving icon (e.g. on a New form) used to
       pulse forever, wasting GPU/compositor cycles (B8). 6 cycles is ample for a
       real lazy load, then it settles. */
    animation: lazyPulse 1.5s ease-in-out 6;
}
/* Once ANY src is present (loaded or failed), drop the shimmer skeleton so it
   never animates over a resolved/broken image. */
.LazyImage[src]:not([src=""])::before { display: none; }

@keyframes lazyPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}


/* META  : .UIComponents.Specialized.Animations.ReDraw */
.ReDraw_InProgress {
    visibility: hidden !important;
    contain: layout style paint;
}

.EntityTypeViewBody,
.SingleItem,
.ListBody {
    animation: contentFadeIn 0.25s ease-out;
}

@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ETWBottom.Activate {
    animation: panelSlideUp 0.2s ease-out;
}

@keyframes panelSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ListBody td.Field__State {
    text-align: center;
}

.ListBody td.Field__State > span,
.ListBody td.Field__State > a {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 85%;
    font-weight: 500;
    line-height: 1.5em;
    white-space: nowrap;
}

.ListBody td[style*="background-color"] {
    border-radius: 0;
}

.FieldIsEmpty.Mode_Display .FieldValue {
    font-style: italic;
    color: rgba(0,0,0,0.3);
}

.Panel_body > h3,
.Panel_body > .PanelTitle {
    border-left: 3px solid var(--backColor);
    padding-left: 12px;
    color: var(--labelColor, #3d5986);
    font-weight: 600;
    margin-bottom: 8px;
}

.Button.HasImage {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.Button.HasImage:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* UXPEAK #3 — LiveBadge / LiveProgress primitives */
.LiveBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: var(--backColor, #3b82f6);
    white-space: nowrap;
    vertical-align: middle;
    margin-left: 4px;
}

.LiveProgress {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--borderColor, #e5e7eb);
    overflow: hidden;
    min-width: 60px;
}

.LiveProgressBar {
    height: 100%;
    border-radius: 3px;
    background: var(--backColor, #3b82f6);
    transition: width 0.4s ease;
    white-space: nowrap;
    font-size: 0;
}

/* AI-Chat badge — position as absolute overlay on bubble, keep red */
.AiChat-bubble-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
}


/* META  : .UIComponents.SupportsTouch */
.SupportsTouch.OnlyPasswordAuthentication .Content {
    padding: 1px !important;
}

.SupportsTouch a,
.SupportsTouch button,
.SupportsTouch  [data-action-click],
.SupportsTouch  [role="button"] {

    -webkit-tap-highlight-color: rgba(0,0,0,0.15);
}

.SupportsTouch.OnlyPasswordAuthentication #ModuleTitle {
    padding: 1px !important;
    margin: 1px !important;
}

.SupportsTouch.OnlyPasswordAuthentication .LoginForm {
    padding: 1px !important;
    margin: 1px !important;
}

.SupportsTouch .MainContent > .SingleItem
{
    position: relative;
}

.SupportsTouch .MainContent > .LeftContent
{
    display: none !important;
}

.SupportsTouch .GroupByMode_Tab {
    display: flex !important;
    flex-direction: column-reverse;
    height: 100%;
    padding: 0;
}

.SupportsTouch    .GroupByMode_Tab .GroupByTabHeader {
    white-space: nowrap;
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
}

.SupportsTouch .GroupByMode_Tab .FolderGroupByTab {
    height: calc(100% - 5em);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 5px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.SupportsTouch   .GroupByMode_Tab .GroupByBody
{
    padding: 1px;
    }

.SupportsTouch .ViewBody_Folder
{
    padding: 0 !important;
    }

.SupportsTouch .SaveButton {
    opacity: 1.0;
    font-weight: bold;
}

.SupportsTouch .OkButton {
    opacity: 1.0;
    font-weight: bold;
}

.SupportsTouch .CancelButton {
    opacity: 1.0;
    font-weight: bold;
}

.SupportsTouch .ItemSubmit a {
    padding: 8px;
}

.SupportsTouch .ItemSubmit span
{}

.SupportsTouch select option {
    height: 2em !important;
}.SupportsTouch .ItemSubmit a {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.SupportsTouch .ListBody td {
    padding: 10px 5px;
    font-size: 100%;
}

.SupportsTouch .ListBody td.FirstCol {
    text-align: center;
}

.SupportsTouch  .Actions a {
    opacity: 1;
    border-radius: 0;
}

.SupportsTouch .ProcedureButton {
    font-size: 120%;
}

.SupportsTouch .ColumnAdder {
    bottom: 2px !important;
    opacity: 0 !important;
}

.SupportsTouch .ColumnResizer {
    opacity: 0 !important;
}

.SupportsTouch .updownarrow {
    opacity: 0.0;
}

.SupportsTouch .ShowOnHover .ShowOnHover {
    display: inherit;
}

.SupportsTouch .ShowOnHover .ShowOnHover.ColumnRemover {
    display: none;
}

.SupportsTouch .Logon .UserImage {
    position: relative;
    left: 0;
    top: 0;
    height: 32px;
    width: 32px;
}

.SupportsTouch .Logon .LogonUser {
    position: relative;
}


/* META  : .UIComponents.SupportsTouch.TouchBottom */
.TouchBottom {
    position: sticky;
    bottom: 0;
    flex: 0;
    height: auto !important;
    z-index: 1000;
    left: 0;
    right: 0;

}

.TouchBottom .RootNav {
    padding: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: stretch;
overflow: auto;
    justify-content: flex-start;
background-color: var(--menuBackColor);
    color: var(--menuTextColor);
}

.TouchBottom .RootNav .Nav.Selected
{
    background-color: var(--backColor);
    color: var(--textColor);
}

.TouchBottom .RootNav .Nav {
    box-shadow: 0 0 1px white inset;
    display: flex;
    padding: 0;
    flex-direction: row;
    align-items: stretch;
}

.TouchBottom .RootNav .NavTitle
{
    display: block;
    white-space: normal;
    flex: 1;
}

.TouchBottom .RootNav .NavTitle > span
{
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
}

.TouchBottom .RootNav .NavImage
{
    display: none;
    vertical-align: middle;
}

.NavTitle {
    line-height: 1em;
}

.TouchBottom .RootNav .Nav {
    box-shadow: 0 0 1px white inset;
}

.TouchBottom .RootNav .Nav.Selected {
    border-radius: 0;
    font-weight: bold;
}


/* META  : .UIComponents.SupportsTouch.TouchTop */
.TouchTop .Logon
{
    padding: 1px 10px 1px 1em;
}

.TouchTop .Search {
    padding-right: 1em;
}

.TouchTop #ModuleTitle {
    padding: 0;
    margin: 0;
    display: none !important;
}

.TouchTop .Logon {
    padding: 1px 10px 1px 1em;
}

.TouchTop #ModuleTitle {
    color: #222222;
}


/* META  : .UIComponents.Button.Button */
.Button {
    display: inline-flex;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    margin: 2px;
    z-index: 200;
    position: relative;
    border-radius: var(--radiusMd, 8px);
    padding: var(--inputPadding);
    background-color: var(--buttonBackColor, inherit);
    color: var(--buttonTextColor);
    box-shadow: var(--buttonBoxShadow);
    transition: all var(--transitionBase, 250ms) ease;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.Button, button {
    cursor: pointer;
}

.Button:hover {
    box-shadow: 1px 1px 5px gray !important;
}

.HideButtonText .ToggleButtonText
{
    display: none !important;
}

.HideButtonText  .ButtonTitle
{
    display: none !important;
}

.HideButtonTitle .ToggleButtonText
{
    display: none !important;
}

.HideButtonTitle .ButtonTitle
{
    display: none !important;
}

.HideButtonLabel .ToggleButtonText
{
    display: none !important;
}

.Button:disabled,
.Button[disabled]{
    opacity: 0.5;
}

.Button:hover {
    box-shadow: var(--buttonBoxShadowHover);
}

.Parameters .Button {
    padding: var(--inputPadding);
    align-self: stretch;
}

.ItemView  .Button
{
    padding: 4px 8px;

    background-color: transparent;
    color: var(--textColor);
    border: solid 0 black;
    border-color: var(--textColor);
    border-radius: 4px;
}

.ItemView:hover  .Button
{
    opacity: 0.75;
}

.Button:hover {
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    opacity: 1.0;
}

.Button:active {
    transform: scale(0.97);
    opacity: 0.92;
}

.Button:focus-visible {
    outline: 2px solid var(--primaryColor, #2563eb) !important;
    outline-offset: 2px;
}.Buttons > a {
    position: relative;
    padding: 4px 8px;
    display: inline-block;

    line-height: 1em;
    cursor: pointer;
    margin-left: 1px;
    padding: 4px;
}

.FullButtons > a
{
    position: relative;
    padding: 1px 1px 1px 32px;
    display: block;
    height: 32px;
    line-height: 32px;
}

.Buttons > a > div,.FullButtons > a > div
{
    text-align: left;
    vertical-align: middle;
    display: block;
}

.Buttons img,.FullButtons img
{
    height: 24px;
    position: absolute;
    left: 3px;
    top: 3px;
}

.Button > div {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center!important;
    align-self: center;
    border-spacing: 0;
    font-size: 125%;
    overflow: hidden;

}.Button > div > * {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}.Buttons > a:hover {
    color: #222222;
    background-color: rgba(255, 255, 255, 0.2);
}

.Buttons > a {
    color: #656565;
    background-color: rgba(255, 255, 255, 0.1);
}

.CancelButton {
    color: #4f4f52;
    border: solid 1px transparent;
}

.OkButton {
    background-color: #4f4f52;
    border: solid 1px #4f4f52;
    color: white;
}

.SaveButton {
    color: #085cb2;
    opacity: 0.25;
}

.ItemHeader .SaveButton {
    display: none;
}

.ItemHeader:hover .SaveButton {
    display: inherit;
}

button:hover {
    box-shadow: 0 0 1em #303030;
}

button:active {
    box-shadow: 0 0 1px #303030;
}

.DeleteButton {
    position: absolute;
    top: 0.5em;
    font-size: 1.5em;
}

.DeleteButton > span {
    font-size: 0.75em;
    padding: 0.1em;
}

.ReplaceButton {
    position: absolute;
    left: 1px;
    top: 0;
}

.ItemSubmit .SaveButton .ButtonText {
    display: none;
}

.ButtonText
{
    text-align: center;
}

.Button img
{
    max-height: 24px;
}

.PlayButton::before
{
    content: var(--icon-Circle-Play);
    font-family: "361";

    margin: 1px 3px 1px 1px;

}

.PauseButton::before {
    content: var(--icon-Circle-Pause);
    font-family: "361";

    margin: 1px 3px 1px 1px;
}

.StepButton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1;
}

.StepButton > span {
    display: inline-block;
}

.StepButton > span {
    width: 24px;
    height: 24px;
    display: table-cell;
    vertical-align: middle;
    font-size: 125%;
    text-align: center;
}

.StepButton {
    padding: 0 !important;
}

.StepButton > .ButtonText {
    padding: 0.5em;
    justify-content: center;
    display: flex;
    align-items: center;
}

.StepButton > span {
    border: solid 1px rgba(127,127,127,0.2);
    background-color: #656565;
}

.StepButton > span {
    color: white;
}

.Button_ExitApplication {
    position: fixed;
    bottom: 0.5em;
    right: 0.5em;
    font-size: 20px;
    padding: 0.5em;
    margin: 1px;
}

.FieldValue > .PlayVideoButton {
    display: block;
}

.PlayVideoButton {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    width: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.PlayVideoButton:after {
    position: absolute;
    left: 40%;
    top: 40%;
    width: 25%;
    height: 25%;
    font-size: 400%;
    content: var(--icon-Circle-Play);
    font-family: "361";
}

.FileButton {
    margin: 1px;
}


/* META  : .UIComponents.Button.ButtonGroup */
.ButtonGroup a {
    cursor: pointer;
    display: inline-block;
}

.ButtonGroup a {
    color: silver;
}

    .ButtonGroup a:hover {
    color: green;
    }

.ButtonGroup .Selected {
    color: #222222;
}


/* META  : .UIComponents.Button.MicroButton */
.ByFieldsRight .MicroButton {
    display: none;
}

.ByFieldsRight .MicroButton {
    position: absolute;
    bottom: 1px;
    left: auto;
    right: 0;
    border: 0;
    display: none;
    opacity: 1;
}

.Button .MicroButton {
    font-size: 2em;
}

.Button .MicroButton.NewAction {
    position: absolute;
    right: 1em;
}

.ETWBys .ByFieldsRight .MicroButton {
    left: 0;
    right: auto;
    font-size: 1.5em;
    padding: 0.25em 0;
}

.ByFieldsRight .ByFieldsRightItem:hover .MicroButton {
    display: inline-block;
}

.ByFieldsRight.ChartGroupBy .ByFieldsRightItem:hover .MicroButton {
    display: flex;
    flex: 0;
    padding: 0;
    position: static;
}

.ValueField.ByFieldsRight .ByFieldsRightItem:hover .MicroButton {
    top: 1.2em;
    bottom: auto;
}

.MicroButton {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    opacity: 0.5;
    vertical-align: inherit;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.MicroButton:hover {
    opacity: 1.0;
}

.MicroButton img {
    vertical-align: middle;
    text-align: center;
    display: inline-block;
    height: 16px;
    width: 16px;
    border: 0;
}

.FirstCol > .MicroButton
{
    position: absolute;
}

.ByFieldsRight .MicroButton {
    background-color: transparent;
}

.FilterMicroButton {
    position: absolute;
    left: 1px;
    top: 4px !important;
    width: 16px;
    height: 16px;
    display: inline-block !important;
}

.ViewBody_Matrix .FilterMicroButton
{
    display: none !important;
}

.ListHeader .MicroButton img
{
    height: 14px;
    width: 14px;
    margin: 3px;
}


/* META  : .UIComponents.Button.ToggleButton */
.ToggleButton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5em;
    cursor: pointer;
    opacity: 0.75;
}

.ToggleButton img {
    width: 16px;
    height: 16px;
}

.ListTable .ToggleButton img {
    height: 12px;
    width: 12px;
    vertical-align: top;
}

.FieldValue > .ToggleButton.Selected {
    box-shadow: 0 0 2px #656565;
    opacity: 1.0;
}

.FirstCol .ToggleButton {
    opacity: 1.0;
    opacity: 0;
    font-size: 125% !important;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    border: 0 !important;
    background-color: transparent;
    display: flex;
}

tr:hover .FirstCol .ToggleButton {
    opacity: 1.0;
}

.FirstCol .ToggleButton.Value_True {
    opacity: 1.0;
}

.ToggleButton:hover
{
    opacity: 1.0;
}

.ListHeader td a.ToggleButton {
    font-size: 100%;
}

.EntityTypeViewTitle .ToggleButton
{
    padding: 5px 0;
    margin: 1px;
    position: relative;
    left: 0;
    top: 1px;
}

.PagePrintPreview .ToggleButton
{
    display: none;
}

    .ItemView .Choices.ItemSelection .ToggleButton {
    font-size: 150%;
    }

.ToggleButton.Selected
{
    background-color: white !important;
    color: #222222 !important;
}


/* META  : .UIComponents.Button.TabButton */
.TabButton {
    cursor: pointer;
    display: inline-block;
}

.TabButton > span {
    min-height: 3em;
    vertical-align: middle;
    display: flex;
    flex-direction: row;
    padding: 0 1em 1em 1em;
    line-height: 1em;
    opacity: 0.75;
    font-size: 85%;
    min-width: 5em;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 15em    ;
}

.TabPanel.TabPanel_TabBottom .TabButton > span
{
padding: 1em 1em 0 1em;
}

.TabButton.Selected > span {
    opacity: 1.0;
}

.TabButton:hover > span {
    opacity: 1.0;
}

.TabButton
{
    position: relative;
}

.TabButton > .Aggregate
{
    position: absolute;
    right: 0;
    top: auto;
    bottom: 0;
    left: 0;
    height: auto;
    padding: 1px;
    min-width: 1em;
    font-size: 80%;
    font-weight: normal;
    font-weight: 300;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.TabPanel.TabPanel_TabBottom .TabButton > .Aggregate
{
    top: 0;
    bottom: auto;
}

.TabButton > .Aggregate > .AggregateValue
{
    justify-content: center;
    padding: 1px !important;
}


/* META  : .UIComponents.Button.RadioButton */
.RadioButton {
    padding: 5px 10px;
}

.RadioButton input, .RadioButton input:active, .RadioButton input:focus {
    border: 0 solid white;
    box-shadow: 0 0 0;
    outline: none;
}


/* META  : .UIComponents.Button.PushButton */
.PushButton a {
    border: 1px solid rgba(225, 225, 225, 0.5);
    background-color: white;
}

.PushButton {
    overflow: hidden;
    flex-direction: row;
}

.PushButton a {
    margin: 0;
    display: none !important;
}

.PushButton a.Selected {

    display: inherit !important;
}


/* META  : .UIComponents.Button.PrimaryButton */
.PrimaryButton
{
    background-color: var(--primaryButtonBackColor) !important;
    color: var(--primaryButtonTextColor) !important;
}


/* META  : .UIComponents.Button.OpenAction */
.OpenAction.CurrentAction {
    opacity: 0.5;
}


/* META  : .UIComponents.Server */
.Server_Offline .Page {
    opacity: 0.5;
}

#Server_Offline_Message {
    color: red;
    font-weight: bold;
    animation: blinker 1s linear infinite;
}


/* META  : .Tooltip */
.hasTooltip:hover::after
{
    position: fixed;
    content: attr(tooltip);
    padding: 6px 10px;
    background-color: rgba(30,30,30,0.92);
    -webkit-backdrop-filter: blur(4px);backdrop-filter: blur(4px);
    border: none;
    color: white;
    opacity: 1.0;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 400;
    max-width: 200px;
    white-space: normal;
    line-height: 1.4;
    margin-left: 0;
    transform: translate(-109%, 0);
    z-index: 99999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: tooltipFadeIn 0.15s ease;
}

@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translate(-109%, 4px); }
    to { opacity: 1; transform: translate(-109%, 0); }
}

.hasTooltip:hover
{
    font-weight: 700;
}

.Button:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

a:hover {
    transition: color 0.15s ease;
}


/* META  : .Toast */
.ToastContainer {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.Mobile .ToastContainer {
    top: auto;
    bottom: 20px;
    left: 20px;
    right: 20px;
}

.Toast {
    display: flex;
    align-items: center;
    min-width: 300px;
    max-width: 500px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #333;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.Mobile .Toast {
    min-width: auto;
    max-width: none;
    transform: translateY(100%);
}

.Toast.ToastShow {
    opacity: 1;
    transform: translateX(0);
}

.Mobile .Toast.ToastShow {
    transform: translateY(0);
}

.Toast.ToastHide {
    opacity: 0;
    transform: translateX(100%);
}

.Toast_success { background: #2e7d32; }
.Toast_error { background: #c62828; }
.Toast_warning { background: #f57c00; }
.Toast_info { background: #1565c0; }

.ToastIcon {
    font-size: 18px;
    margin-right: 12px;
    flex-shrink: 0;
}

.ToastMessage {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
}

.ToastClose {
    font-size: 20px;
    margin-left: 12px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.ToastClose:hover {
    opacity: 1;
}

.ToastAction {
    margin-left: 12px;
    padding: 4px 12px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 4px;
    background: transparent;
    color: white;
    cursor: pointer;
    font-size: 12px;
}

.ToastAction:hover {
    background: rgba(255,255,255,0.1);
}

.ToastBody {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ToastTitle {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.ToastBody .ToastMessage {
    font-size: 12px;
    opacity: 0.9;
}

.ToastClickable .ToastBody,
.ToastClickable .ToastMessage {
    cursor: pointer;
}


/* META  : .LoadingSpinner */
.LoadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.LoadingOverlay.LoadingShow {
    opacity: 1;
    visibility: visible;
}

.LoadingSpinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.SpinnerRing {
    width: 48px;
    height: 48px;
    border: 4px solid #e0e0e0;
    border-top-color: #1976d2;
    border-radius: 50%;
    animation: spinnerRotate 1s linear infinite;
}

@keyframes spinnerRotate {
    to { transform: rotate(360deg); }
}

.LoadingText {
    color: #666;
    font-size: 14px;
}

.ElementLoading {
    pointer-events: none;
    opacity: 0.6;
}

.ElementSpinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 4px;
    align-items: center;
    background: rgba(255,255,255,0.9);
    padding: 8px 16px;
    border-radius: 4px;
    z-index: 10;
}

.SpinnerDot {
    width: 8px;
    height: 8px;
    background: #1976d2;
    border-radius: 50%;
    animation: spinnerBounce 1.4s infinite ease-in-out both;
}

.SpinnerDot:nth-child(1) { animation-delay: -0.32s; }
.SpinnerDot:nth-child(2) { animation-delay: -0.16s; }

@keyframes spinnerBounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

.ButtonLoading {
    position: relative;
    pointer-events: none;
}

.ButtonSpinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    margin-right: 8px;
    animation: spinnerRotate 0.8s linear infinite;
    vertical-align: middle;
}


/* META  : .NotificationButton */
.NotificationButton{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;border-radius:50%;position:relative;z-index:1000;transition:all 0.25s ease;border:1px solid rgba(24,159,223,0.69);background:#fff;color:var(--primaryColor,#3b82f6);box-shadow:rgba(3,116,247,0.58) 0 0 8px 0;width:32px;height:32px;margin:2px}
.NotificationButton .NotificationButtonIcon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.NotificationButton .NotificationButtonIcon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.NotificationButtonBadge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 4px;line-height:1}
.NotificationButton:hover{box-shadow:rgba(3,116,247,0.8) 0 0 12px 0}


/* META  : .NotificationPanel */
.Notifications_Panel{position:fixed;right:-420px;top:0;width:420px;height:100vh;height:100dvh;background:var(--backColor,#fff);box-shadow:-8px 0 32px rgba(var(--shadowRGB,0,0,0),0.12);z-index:9999;transition:right 0.35s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column;border-left:1px solid rgba(var(--shadowRGB,0,0,0),0.06)}
.Notifications_Panel.Open{right:0}
.NP_Header{padding:20px 20px 16px;border-bottom:1px solid rgba(var(--shadowRGB,0,0,0),0.06);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,rgba(var(--primaryColorRGB,59,130,246),0.04),transparent)}
.NP_HeaderLeft{display:flex;align-items:center;gap:10px}
.NP_HeaderIcon{display:flex;align-items:center;color:var(--primaryColor,#3b82f6)}
.NP_HeaderTitle{font-size:17px;font-weight:700;letter-spacing:-0.01em;color:var(--textColor,#1a1a1a)}
.NP_HeaderBadge{display:none;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:11px;background:var(--primaryColor,#3b82f6);color:#fff;font-size:11px;font-weight:700;padding:0 6px}
.NP_HeaderRight{display:flex;align-items:center;gap:6px}
.NP_MarkAll{display:flex;align-items:center;gap:5px;cursor:pointer;padding:6px 10px;border-radius:6px;font-size:12px;color:var(--primaryColor,#3b82f6);transition:all 0.2s ease;white-space:nowrap}
.NP_MarkAll:hover{background:rgba(var(--primaryColorRGB,59,130,246),0.08)}
.NP_Close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;cursor:pointer;color:rgba(var(--shadowRGB,0,0,0),0.4);transition:all 0.2s ease}
.NP_Close:hover{background:rgba(var(--shadowRGB,0,0,0),0.06);color:rgba(var(--shadowRGB,0,0,0),0.7)}
.NP_Body{flex:1;overflow-y:auto;padding:8px 12px}
.NP_Card{display:flex;align-items:flex-start;gap:12px;padding:14px 12px;border-radius:10px;margin-bottom:4px;cursor:default;transition:all 0.2s ease;position:relative;overflow:hidden}
.NP_Card:hover{background:rgba(var(--shadowRGB,0,0,0),0.025)}
.NP_Card:hover .NP_CardActions{opacity:1}
.NP_CardIcon{width:36px;height:36px;min-width:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.NP_Sev_Error .NP_CardIcon{background:rgba(239,68,68,0.1);color:#ef4444}
.NP_Sev_Warning .NP_CardIcon{background:rgba(245,158,11,0.1);color:#f59e0b}
.NP_Sev_Info .NP_CardIcon{background:rgba(59,130,246,0.1);color:#3b82f6}
.NP_CardContent{flex:1;min-width:0}
.NP_CardTitleRow{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.NP_CardTitle{font-size:13px;font-weight:600;color:var(--textColor,#1a1a1a);line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.NP_CardTime{font-size:11px;color:rgba(var(--shadowRGB,0,0,0),0.35);white-space:nowrap;margin-top:2px;min-width:fit-content}
.NP_CardDesc{font-size:12px;color:rgba(var(--shadowRGB,0,0,0),0.5);line-height:1.45;margin-top:4px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.NP_CardActions{position:absolute;right:8px;top:50%;transform:translateY(-50%);opacity:0;transition:opacity 0.2s ease}
.NP_CardRead{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(var(--shadowRGB,0,0,0),0.3);transition:all 0.2s ease;background:var(--backColor,#fff);box-shadow:0 1px 3px rgba(var(--shadowRGB,0,0,0),0.1)}
.NP_CardRead:hover{color:#22c55e;background:rgba(34,197,94,0.08);box-shadow:0 2px 6px rgba(34,197,94,0.15)}
.NP_Footer{padding:12px 20px;border-top:1px solid rgba(var(--shadowRGB,0,0,0),0.06)}
.NP_ViewAll{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--primaryColor,#3b82f6);transition:all 0.2s ease}
.NP_ViewAll:hover{background:rgba(var(--primaryColorRGB,59,130,246),0.06)}
.NP_Empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:40px 20px;gap:12px}
.NP_EmptyIcon{opacity:0.25}
.NP_EmptyTitle{font-size:15px;font-weight:600;color:rgba(var(--shadowRGB,0,0,0),0.5)}
.NP_EmptyDesc{font-size:13px;color:rgba(var(--shadowRGB,0,0,0),0.3)}
.NP_Loading{display:flex;align-items:center;justify-content:center;height:120px}
.NP_Spinner{width:24px;height:24px;border:3px solid rgba(var(--shadowRGB,0,0,0),0.08);border-top-color:var(--primaryColor,#3b82f6);border-radius:50%;animation:npSpin 0.7s linear infinite}
@keyframes npSpin{to{transform:rotate(360deg)}}
.NP_Sev_Error{border-left:3px solid rgba(239,68,68,0.5)}
.NP_Sev_Warning{border-left:3px solid rgba(245,158,11,0.5)}
.NP_Sev_Info{border-left:3px solid rgba(59,130,246,0.3)}














.NP_Filters{display:flex;gap:4px;flex:1;overflow-x:auto}
.NP_Filter{padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;background:rgba(var(--shadowRGB,0,0,0),0.05);color:rgba(var(--shadowRGB,0,0,0),0.5);transition:all 0.2s}
.NP_Filter:hover{background:rgba(var(--shadowRGB,0,0,0),0.08)}
.NP_Filter.active{background:var(--primaryColor,#3b82f6);color:#fff}
.NP_Filter-badge{display:inline-flex;min-width:14px;height:14px;border-radius:7px;font-size:9px;align-items:center;justify-content:center;padding:0 3px;margin-left:3px;background:rgba(var(--shadowRGB,0,0,0),0.15)}
.NP_Filter.active .NP_Filter-badge{background:rgba(255,255,255,0.3)}
.NP_SoundToggle{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(var(--shadowRGB,0,0,0),0.35);transition:all 0.2s;font-size:14px}
.NP_SoundToggle:hover{background:rgba(var(--shadowRGB,0,0,0),0.06);color:rgba(var(--shadowRGB,0,0,0),0.6)}
.NP_SoundToggle.muted{color:rgba(239,68,68,0.5)}
.NP_GroupHeader{font-size:11px;font-weight:700;color:rgba(var(--shadowRGB,0,0,0),0.35);text-transform:uppercase;letter-spacing:0.5px;padding:10px 12px 4px;position:sticky;top:0;background:var(--backColor,#fff);z-index:1}
.NP_Card.read{opacity:0.55;border-left-color:transparent}
.NP_Card.read .NP_CardTitle{font-weight:500}


/* META  : .StatusBar */
.StatusBar{display:flex;align-items:center;gap:10px;padding:2px 8px;font-size:11px;color:rgba(var(--shadowRGB,0,0,0),0.45);user-select:none}
.StatusBar-part{display:flex;align-items:center;gap:5px;white-space:nowrap}
.StatusBar-dot-host{display:flex;align-items:center}
.StatusBar-dot-host #__connection_dot__{position:static!important;opacity:0.8}
.StatusBar-version{letter-spacing:0.4px;opacity:0.8}
.StatusBar-clock{font-variant-numeric:tabular-nums}


/* META  : .SidePanel */
.SidePanel{position:fixed;top:0;right:0;bottom:0;width:420px;background:var(--backColor3,#fff);-webkit-backdrop-filter: blur(16px);backdrop-filter:blur(16px);box-shadow:-4px 0 24px rgba(var(--shadowRGB,0,0,0),0.06),-1px 0 0 rgba(var(--shadowRGB,0,0,0),0.04);z-index:10001;display:none;transform:translateX(100%);transition:transform 320ms cubic-bezier(0.16,1,0.3,1),width 300ms ease;flex-direction:column;overflow:hidden;border-left:1px solid rgba(var(--shadowRGB,0,0,0),0.05)}
.SidePanel.SidePanel-open{display:flex;transform:translateX(0)}
.SidePanel.SidePanel-fullscreen{width:100%;border-left:none;border-radius:0}
.SidePanel-header{height:48px;display:flex;align-items:center;padding:0 10px 0 16px;border-bottom:1px solid rgba(var(--shadowRGB,0,0,0),0.06);flex-shrink:0;background:linear-gradient(135deg,var(--primaryColor,#3b82f6) 0%,color-mix(in srgb,var(--primaryColor,#3b82f6) 75%,#6366f1) 100%);color:#fff}
.SidePanel-header-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.SidePanel-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}
.SidePanel-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.SidePanel-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.01em}
.SidePanel-header-right{display:flex;align-items:center;gap:2px}
.SidePanel-header-btn{width:36px;height:36px;border-radius:8px;border:none;background:rgba(255,255,255,0.12);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 200ms}
.SidePanel-header-btn:hover{background:rgba(255,255,255,0.22)}
.SidePanel-header-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.SidePanel-tabs{display:flex;gap:0;padding:0;background:var(--backColor2,#fafbfc);border-top:1px solid rgba(var(--shadowRGB,0,0,0),0.06);flex-shrink:0}
.SidePanel-tabs:empty{display:none}
.SidePanel-tabs.single-tab{display:none}
.SidePanel-tab{flex:1;border:none;border-top:2px solid transparent;background:none;cursor:pointer;padding:9px 4px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:rgba(var(--shadowRGB,0,0,0),0.35);font-size:11px;font-weight:600;transition:all 180ms;position:relative;letter-spacing:0.01em}
.SidePanel-tab:hover{color:rgba(var(--shadowRGB,0,0,0),0.55);background:rgba(var(--shadowRGB,0,0,0),0.02)}
.SidePanel-tab.active{color:var(--primaryColor,#3b82f6);border-top-color:var(--primaryColor,#3b82f6);background:rgba(var(--primaryColorRGB,59,130,246),0.04)}
.SidePanel-tab-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.SidePanel-tab-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.SidePanel-tab-badge{position:absolute;top:1px;right:calc(50% - 18px);min-width:15px;height:15px;border-radius:8px;background:var(--primaryColor,#3b82f6);color:#fff;font-size:9px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 3px;line-height:1}
.SidePanel-tab.has-badge .SidePanel-tab-badge{display:inline-flex}
.SidePanel-body{flex:1;overflow:hidden;position:relative}
.SidePanel-content{position:absolute;top:0;left:0;right:0;bottom:0;overflow-y:auto;display:none;flex-direction:column;padding:0}
.SidePanel-content.active{display:flex;animation:SidePanelFade 160ms ease}@keyframes SidePanelFade{from{opacity:0}to{opacity:1}}
.SidePanel-aichat .AiChat-header{display:none!important}
.SidePanel-aichat .AiChat{height:100%}
.SidePanel-aichat .AiChat-panel{border:none;border-radius:0;box-shadow:none;height:100%}
.SidePanel-aichat .AiChat--embedded{height:100%}
.SidePanel-aichat .AiChat-tabs{border-top:none}
.NP_Toolbar{display:flex;align-items:center;justify-content:flex-end;padding:6px 12px;border-bottom:1px solid rgba(var(--shadowRGB,0,0,0),0.05);gap:8px;flex-shrink:0;background:var(--backColor2,#fafbfc)}
.NP_Toolbar .NP_MarkAll{display:flex;align-items:center;gap:5px;cursor:pointer;padding:5px 10px;border-radius:6px;font-size:12px;color:var(--primaryColor,#3b82f6);transition:all 0.2s;white-space:nowrap}
.NP_Toolbar .NP_MarkAll:hover{background:rgba(var(--primaryColorRGB,59,130,246),0.08)}
.NP_Toolbar .NP_HeaderBadge{display:none;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:10px;background:var(--primaryColor,#3b82f6);color:#fff;font-size:10px;font-weight:700;padding:0 5px}
.SP_Placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:14px;color:rgba(var(--shadowRGB,0,0,0),0.3);padding:40px 20px;text-align:center}
.SP_PlaceholderIcon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;opacity:0.25}
.SP_PlaceholderIcon svg{width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.SP_PlaceholderTitle{font-size:15px;font-weight:600;color:rgba(var(--shadowRGB,0,0,0),0.45)}
.SP_PlaceholderDesc{font-size:13px;color:rgba(var(--shadowRGB,0,0,0),0.3)}
.SP_SearchSection{margin-bottom:8px}
.SP_SearchSectionHeader{font-size:11px;font-weight:700;color:rgba(var(--shadowRGB,0,0,0),0.4);padding:8px 4px 6px;border-bottom:1px solid rgba(var(--shadowRGB,0,0,0),0.05);margin-bottom:2px;display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:0.03em}
.SP_SearchCount{color:var(--primaryColor,#3b82f6);font-size:10px;font-weight:700}
.SP_SearchRow{padding:9px 8px;border-radius:8px;cursor:pointer;font-size:13px;color:rgba(var(--shadowRGB,0,0,0),0.7);transition:all 150ms;line-height:1.4}
.SP_SearchRow:hover{background:rgba(var(--primaryColorRGB,59,130,246),0.06);color:var(--primaryColor,#3b82f6)}
.SP_SearchEmpty{text-align:center;padding:48px 20px;color:rgba(var(--shadowRGB,0,0,0),0.3);font-size:14px}
.SidePanel-search-shell{padding:16px;gap:0}
.SidePanel-command-hint{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:12px;background:rgba(var(--shadowRGB,0,0,0),0.03);border-radius:8px;cursor:pointer;transition:background 0.15s}
.SidePanel-command-hint:hover{background:rgba(var(--shadowRGB,0,0,0),0.06)}
.SidePanel-command-hint i{font-size:13px;color:rgba(var(--shadowRGB,0,0,0),0.34)}
.SidePanel-command-hint span{flex:1;min-width:0;font-size:13px;color:rgba(var(--shadowRGB,0,0,0),0.52);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.SidePanel-command-hint kbd{background:rgba(var(--shadowRGB,0,0,0),0.08);border-radius:4px;padding:2px 8px;font-size:11px;color:rgba(var(--shadowRGB,0,0,0),0.52);font-family:inherit;line-height:1.35}
.SidePanel-search-wrap{position:relative;margin-bottom:12px;flex:0 0 auto}
.SidePanel-search-input{width:100%;height:40px;padding:10px 12px 10px 36px;border:1px solid rgba(var(--shadowRGB,0,0,0),0.12);border-radius:10px;font-size:14px;outline:none;background:rgba(var(--shadowRGB,0,0,0),0.02);box-sizing:border-box;transition:border-color 200ms,box-shadow 200ms}
.SidePanel-search-input:focus{border-color:var(--primaryColor,#3b82f6);box-shadow:0 0 0 3px rgba(var(--primaryColorRGB,59,130,246),0.12)}
.SidePanel-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:rgba(var(--shadowRGB,0,0,0),0.34);pointer-events:none;width:16px;height:16px;display:flex;align-items:center;justify-content:center}
.SidePanel-search-status{height:18px;margin:-4px 0 8px;padding:0 2px;font-size:11px;font-weight:650;color:rgba(var(--shadowRGB,0,0,0),0.42);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.SidePanel-search-results{flex:1;overflow-y:auto;min-height:0}
.SP_SearchLoading{display:flex;align-items:center;justify-content:center;padding:20px}
.SP_SearchEmpty-rich{padding:36px 18px;text-align:left;border:1px solid rgba(var(--shadowRGB,0,0,0),0.08);border-radius:12px;background:rgba(var(--shadowRGB,0,0,0),0.018);color:rgba(var(--shadowRGB,0,0,0),0.62)}
.SP_SearchEmpty-title{font-size:14px;font-weight:700;color:rgba(var(--shadowRGB,0,0,0),0.72);margin-bottom:4px}
.SP_SearchEmpty-desc{font-size:12px;line-height:1.45;color:rgba(var(--shadowRGB,0,0,0),0.48);margin-bottom:12px}
.SP_SearchSuggestions{display:flex;flex-wrap:wrap;gap:6px}
.SP_SearchSuggestions button{border:1px solid rgba(var(--primaryColorRGB,59,130,246),0.18);background:rgba(var(--primaryColorRGB,59,130,246),0.07);color:var(--primaryColor,#3b82f6);border-radius:999px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;max-width:100%;white-space:nowrap}
.SP_SearchSuggestions button:hover{background:rgba(var(--primaryColorRGB,59,130,246),0.13)}
.SP_ResultItem{display:flex;flex-direction:column;gap:2px;min-width:0}
.SP_ResultTitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}
.SP_ResultMeta{font-size:11px;color:rgba(var(--shadowRGB,0,0,0),0.44);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.SidePanel-content[data-tool=rtc] .RTCClient{display:block!important;width:100%!important;height:100%!important;padding:0!important}
.SidePanel-content[data-tool=rtc] .RTCBody{display:flex!important;flex-direction:column!important;width:100%;height:100%}
.SidePanel-content[data-tool=rtc] .RTCMeBody{border-bottom:1px solid rgba(var(--shadowRGB,0,0,0),0.06);padding:8px 12px}
.SidePanel-content[data-tool=rtc] .RTCMe{border:none;border-right:none}
.SidePanel-content[data-tool=rtc] .RTCUsers{flex:1;overflow-y:auto;border:none;min-width:0}
.SidePanel-content[data-tool=rtc] .RTCTitle{display:none}
.SidePanel-content[data-tool=rtc] .RTCHome{display:none}
.SidePanel-content[data-tool=rtc] .RTCSearch{border:none;border-top:1px solid rgba(var(--shadowRGB,0,0,0),0.06);padding:6px 8px}
.SidePanel-content[data-tool=rtc] .RTCSearch input{width:100%;padding:8px 12px;border:1px solid rgba(var(--shadowRGB,0,0,0),0.1);border-radius:8px;font-size:13px;outline:none}
.SidePanel-content[data-tool=rtc] .RTCChat{position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;background:var(--backColor3,#fff)}
.SidePanel-content[data-tool=rtc] .RTCChatInput{border:none;border-top:1px solid rgba(var(--shadowRGB,0,0,0),0.06)}
.SidePanel-fullscreen .SidePanel-content[data-tool=rtc] .RTCBody{display:grid!important;flex-direction:unset!important;grid-template-columns:340px 1fr;grid-template-rows:auto 1fr auto;gap:0;grid-template-areas:'RTCtl RTCtc' 'RTCml RTCmc' 'RTCbl RTCbc'}
.SidePanel-fullscreen .SidePanel-content[data-tool=rtc] .RTCTitle{display:flex}
.SidePanel-fullscreen .SidePanel-content[data-tool=rtc] .RTCHome{display:block}
.SidePanel-fullscreen .SidePanel-content[data-tool=rtc] .RTCChat{position:relative}
.SidePanel-search-navs{display:flex;flex-direction:column;gap:1px;margin-bottom:8px;border-bottom:1px solid rgba(var(--shadowRGB,0,0,0),0.06);padding-bottom:8px}
.SidePanel-search-navs:empty{display:none;border:none;margin:0;padding:0}
.SidePanel-search-navs .Nav{display:flex!important;width:100%!important;height:auto!important;padding:6px 8px;border-radius:8px;text-decoration:none;align-items:center;box-sizing:border-box;transition:background 150ms}
.SidePanel-search-navs .Nav:hover{background:rgba(var(--primaryColorRGB,59,130,246),0.06)}
.SidePanel-search-navs .Nav .NavButton{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;width:100%;height:auto!important;padding:0}
.SidePanel-search-navs .Nav .NavImage{width:28px!important;height:28px!important;min-width:28px;border-radius:6px!important;display:flex!important;align-items:center;justify-content:center;font-size:13px!important}
.SidePanel-search-navs .Nav .NavImage svg{width:16px!important;height:16px!important}
.SidePanel-search-navs .Nav .NavTitle{font-size:13px!important;font-weight:500;color:rgba(var(--shadowRGB,0,0,0),0.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.SidePanel-search-navs .Nav .NavBadge{font-size:10px!important;min-width:18px;height:18px;border-radius:9px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;background:rgba(var(--shadowRGB,0,0,0),0.08)!important;color:rgba(var(--shadowRGB,0,0,0),0.5)!important;font-weight:600;margin-left:auto}
.SidePanel .NP_Footer{display:flex;align-items:stretch;gap:6px;padding:10px 12px}
.NP_Footer .NP_MarkAll{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;padding:9px 8px;border-radius:8px;font-size:12px;font-weight:600;color:rgba(var(--shadowRGB,0,0,0),0.55);transition:all 0.2s;white-space:nowrap}
.NP_Footer .NP_MarkAll:hover{background:rgba(34,197,94,0.08);color:#16a34a}
.NP_Footer .NP_ViewAll{flex:1;padding:9px 8px;font-size:12px;white-space:nowrap}


/* META  : .UserToolButton */
.UserToolButton{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(0,0,0,0.1);background:#fff;color:var(--primaryColor,#3b82f6);cursor:pointer;transition:all 200ms;position:relative}
.UserToolButton:hover{background:rgba(var(--primaryColorRGB,59,130,246),0.08);box-shadow:0 0 8px rgba(var(--primaryColorRGB,59,130,246),0.3)}
.UserToolButton.usertool-active{background:var(--primaryColor,#3b82f6);color:#fff;border-color:var(--primaryColor,#3b82f6);box-shadow:0 0 12px rgba(var(--primaryColorRGB,59,130,246),0.4)}
.UserToolButton-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.UserToolButton-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 2026-08-06 — KONTRAST: beyaz rakam `#3b82f6` üzerinde 3.68 idi (WCAG AA 4.5). Rozet KÜÇÜK
   (9px) ve BİLGİ TAŞIR (okunmamış sayısı) — okunamayan rozet, olmayan rozetten kötüdür çünkü
   yer kaplar ve "bir şey var" der. Ölçülen adaylar (beyaz metne karşı, canlı DOM):
   #3b82f6 3.68 ✗ · **#2563eb 5.17 ✓** · #1d4ed8 6.70 ✓ — eşiği geçen EN AÇIK ton alındı.
   ⚠️ `--primaryColor` DEĞİŞKENİ DURUYOR: bir domain kendi markasını atarsa yine o kazanır;
   burada düzeltilen yalnız GERİ DÜŞÜŞ değeridir. Domain'in atadığı renk de eşiği geçmiyorsa
   bu kural onu düzeltmez — o ayrı bir kalemdir (tema kontrastı). */
.UserToolButton-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--primaryColor,#2563eb);color:#fff;font-size:9px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 3px;line-height:1}
.UserToolButton.has-badge .UserToolButton-badge{display:inline-flex}


/* META  : .AiChat */
.AiChatContainer{position:relative;z-index:100000}.AiChat{--chat-primary:var(--color1, #009ef7);--chat-bg:var(--backColor, #f5f7fa);--chat-text:var(--textColor, #303030);--chat-border:var(--borderColor, rgba(127,127,127,0.2));--chat-radius:12px;--chat-shadow:0 8px 32px rgba(0,0,0,.15);font-family:inherit}.AiChat--floating{position:fixed;bottom:24px;z-index:100000}.AiChat--right{right:24px}.AiChat--left{left:24px}.AiChat-bubble{width:48px;height:48px;border-radius:50%;background:var(--chat-primary);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--chat-shadow);transition:transform .2s;position:relative}.AiChat-bubble:hover{transform:scale(1.1)}.AiChat-bubble-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:#ef4444;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;padding:0 4px}.AiChat-panel{width:400px;height:560px;border-radius:var(--chat-radius);background:var(--chat-bg);box-shadow:var(--chat-shadow);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--chat-border)}.AiChat--floating .AiChat-panel{position:absolute;bottom:72px;right:0;transform-origin:bottom right}.AiChat--floating .AiChat-panel[hidden]{display:none}.AiChat--sidebar{position:fixed;top:0;right:0;height:100vh;height:100dvh;z-index:100000}.AiChat--sidebar .AiChat-panel{width:420px;height:100%;border-radius:0;border-left:1px solid var(--chat-border)}.AiChat--inline{position:relative;display:inline-flex}.AiChat--inline .AiChat-bubble{width:40px;height:40px;border-radius:50%;padding:0;font-size:16px;cursor:pointer}.AiChat--inline .AiChat-bubble>*{pointer-events:none}.AiChat--portal{z-index:100000}.AiChat--portal .AiChat-panel{width:400px;height:560px}.AiChat--portal-sidebar .AiChat-panel{width:420px;height:100%;border-radius:0;border-left:1px solid var(--chat-border)}.AiChat--embedded{width:100%;height:100%}.AiChat--embedded .AiChat-panel{width:100%;height:100%;border-radius:var(--chat-radius)}.AiChat--fullpage{display:flex;width:100%;height:100%}.AiChat--fullpage .AiChat-history{width:300px;border-right:1px solid var(--chat-border);background:var(--chat-bg);overflow-y:auto}.AiChat--fullpage .AiChat-panel{flex:1;border-radius:0}.AiChat-header{padding:12px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--chat-border);background:var(--chat-primary);color:#fff;min-height:52px}.AiChat-header-title{font-weight:600;font-size:15px;flex:1}.AiChat-header-status{font-size:12px;opacity:.8}.AiChat-header-actions{display:flex;gap:8px}.AiChat-header-btn{background:none;border:none;color:inherit;cursor:pointer;padding:4px;opacity:.8;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex:0 0 auto}.AiChat-header-btn:hover{opacity:1}.AiChat-agent-select{padding:8px 12px;border-bottom:1px solid var(--chat-border);display:flex;gap:8px;overflow-x:auto}.AiChat-agent-chip{padding:6px 12px;border-radius:16px;font-size:13px;border:1px solid var(--chat-border);cursor:pointer;white-space:nowrap;transition:all .15s;display:flex;align-items:center;gap:6px}.AiChat-agent-chip.active{background:var(--chat-primary);color:#fff;border-color:var(--chat-primary)}.AiChat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.AiChat-body::-webkit-scrollbar{width:4px}.AiChat-body::-webkit-scrollbar-thumb{background:var(--chat-border);border-radius:2px}.AiChat-welcome{text-align:center;padding:32px 16px}.AiChat-welcome-icon{font-size:48px;color:var(--chat-primary);margin-bottom:16px}.AiChat-welcome-title{font-size:18px;font-weight:600;margin-bottom:8px}.AiChat-welcome-text{font-size:14px;color:var(--chat-text);opacity:.7}.AiChat-msg{display:flex;gap:8px;max-width:85%;animation:aichat-fadeIn .2s}.AiChat-msg--user{align-self:flex-end;flex-direction:row-reverse}.AiChat-msg--agent{align-self:flex-start}.AiChat-msg--operator{align-self:flex-start}.AiChat-msg--system{align-self:center;max-width:100%}.AiChat-msg-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--chat-primary);color:#fff;font-size:14px;flex-shrink:0}.AiChat-msg--operator .AiChat-msg-avatar{background:#10b981}.AiChat-msg-content{display:flex;flex-direction:column;gap:4px}.AiChat-msg-name{font-size:12px;font-weight:600;opacity:.7}.AiChat-msg-text{padding:10px 14px;border-radius:12px;font-size:14px;line-height:1.5;word-break:break-word}.AiChat-msg--user .AiChat-msg-text{background:var(--chat-primary);color:#fff;border-bottom-right-radius:4px}.AiChat-msg--agent .AiChat-msg-text{background:color-mix(in srgb,var(--chat-border) 30%,transparent);border-bottom-left-radius:4px}.AiChat-msg--operator .AiChat-msg-text{background:#ecfdf5;border-bottom-left-radius:4px;border:1px solid #a7f3d0}.AiChat-msg--system .AiChat-msg-text{background:transparent;text-align:center;font-size:12px;opacity:.6;padding:4px 12px}.AiChat-msg-meta{font-size:11px;opacity:.5;padding:0 4px}.AiChat-msg--user .AiChat-msg-meta{text-align:right}.AiChat-msg--tool{align-self:center;display:flex;align-items:center;gap:8px;font-size:12px;opacity:.6;padding:4px 12px;background:color-mix(in srgb,var(--chat-border) 20%,transparent);border-radius:8px}.AiChat-typing{display:flex;gap:4px;padding:12px 14px;align-self:flex-start}.AiChat-typing-dot{width:8px;height:8px;border-radius:50%;background:var(--chat-primary);opacity:.4;animation:aichat-typing 1.4s infinite}.AiChat-typing-dot:nth-child(2){animation-delay:.2s}.AiChat-typing-dot:nth-child(3){animation-delay:.4s}.AiChat-msg-text pre{background:#1e1e1e;color:#d4d4d4;padding:12px;border-radius:8px;overflow-x:auto;margin:8px 0;font-size:13px}.AiChat-msg-text code{background:rgba(0,0,0,.08);padding:2px 6px;border-radius:4px;font-size:13px}.AiChat-msg-text table{border-collapse:collapse;width:100%;margin:8px 0}.AiChat-msg-text th,.AiChat-msg-text td{border:1px solid var(--chat-border);padding:6px 10px;font-size:13px}.AiChat-msg-text th{background:color-mix(in srgb,var(--chat-border) 30%,transparent)}.AiChat-msg-text a{color:var(--chat-primary)}.AiChat-msg-text img{max-width:100%;border-radius:8px}.AiChat-file{display:flex;align-items:center;gap:8px;padding:8px 12px;background:color-mix(in srgb,var(--chat-border) 20%,transparent);border-radius:8px;font-size:13px;cursor:pointer}.AiChat-file-icon{font-size:20px;color:var(--chat-primary)}.AiChat-file-name{flex:1;font-weight:500}.AiChat-file-size{font-size:11px;opacity:.6}.AiChat-input{padding:12px;border-top:1px solid var(--chat-border);display:flex;align-items:flex-end;gap:8px}.AiChat-input-actions{display:flex;gap:4px}.AiChat-btn{width:36px;height:36px;border-radius:50%;border:none;background:transparent;color:var(--chat-text);opacity:.5;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.AiChat-btn:hover{opacity:1;background:color-mix(in srgb,var(--chat-border) 30%,transparent)}.AiChat-btn.recording{color:#ef4444;opacity:1;animation:aichat-pulse 1.5s infinite}.AiChat-input-field{flex:1;max-height:120px;overflow-y:auto;padding:8px 12px;border-radius:20px;font-size:14px;border:1px solid var(--chat-border);outline:none;background:color-mix(in srgb,var(--chat-border) 15%,transparent)}.AiChat-input-field:focus{border-color:var(--chat-primary)}.AiChat-input-field:empty::before{content:attr(data-placeholder);opacity:.5}.AiChat-send{width:36px;height:36px;min-width:36px;border-radius:50%;border:none;background:var(--chat-primary);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s;flex:0 0 auto}.AiChat-send:hover{transform:scale(1.1)}.AiChat-send:disabled{opacity:.4;transform:none;cursor:default}.AiChat-escalation{padding:8px 16px;background:#fef3c7;border-top:1px solid #fcd34d;display:flex;align-items:center;gap:8px;font-size:13px}.AiChat-escalation-btn{padding:4px 12px;border-radius:12px;border:none;background:#f59e0b;color:#fff;cursor:pointer;font-size:12px;font-weight:500;flex:0 0 auto}.AiChat-history-item{padding:12px 16px;border-bottom:1px solid var(--chat-border);cursor:pointer;transition:background .15s}.AiChat-history-item:hover{background:color-mix(in srgb,var(--chat-border) 20%,transparent)}.AiChat-history-item.active{background:color-mix(in srgb,var(--chat-primary) 10%,transparent);border-left:3px solid var(--chat-primary)}.AiChat-history-title{font-size:14px;font-weight:500;margin-bottom:4px}.AiChat-history-preview{font-size:12px;opacity:.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.AiChat-history-date{font-size:11px;opacity:.4;margin-top:4px}@keyframes aichat-fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes aichat-typing{0%,60%,100%{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}@keyframes aichat-pulse{0%,100%{opacity:1}50%{opacity:.5}}@keyframes aichat-slideUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes aichat-scale{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.AiChat-panel.anim-slideUp{animation:aichat-slideUp .3s ease-out}.AiChat-panel.anim-fadeIn{animation:aichat-fadeIn .3s ease-out}.AiChat-panel.anim-scale{animation:aichat-scale .3s ease-out}.AiChat-tabs{display:flex;border-bottom:1px solid var(--chat-border);background:var(--chat-bg)}.AiChat-tab{flex:1;padding:10px;text-align:center;cursor:pointer;font-size:13px;color:var(--chat-text);opacity:.6;transition:all .2s;border-bottom:2px solid transparent;display:flex;align-items:center;justify-content:center;gap:6px}.AiChat-tab:hover{opacity:.8;background:color-mix(in srgb,var(--chat-primary) 5%,transparent)}.AiChat-tab.active{opacity:1;color:var(--chat-primary);border-bottom-color:var(--chat-primary)}.AiChat-tab i{margin-right:4px}.AiChat-agent-list{overflow-y:auto;flex:1;background:var(--chat-bg)}.AiChat-agent-card{display:flex;gap:8px;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--chat-border);transition:background .15s}.AiChat-agent-card:hover{background:color-mix(in srgb,var(--chat-primary) 5%,transparent)}.AiChat-agent-card.recommended{border-left:3px solid var(--chat-primary)}.AiChat-agent-avatar{width:32px;height:32px;border-radius:50%;background:var(--chat-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}.AiChat-agent-info{flex:1;min-width:0}.AiChat-agent-name{font-weight:600;font-size:13px;color:var(--chat-text)}.AiChat-agent-desc{font-size:11px;opacity:.6;margin-top:1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.AiChat-agent-tags{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap}.AiChat-agent-tag{font-size:10px;padding:2px 6px;border-radius:8px;background:color-mix(in srgb,var(--chat-border) 60%,transparent);color:var(--chat-text);opacity:.7}.AiChat-section-title{font-size:10px;font-weight:600;text-transform:uppercase;opacity:.5;padding:8px 12px 2px;letter-spacing:.5px}.AiChat-conv-list{overflow-y:auto;flex:1;background:var(--chat-bg)}.AiChat-conv-item{display:flex;gap:8px;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--chat-border);transition:background .15s}.AiChat-conv-item:hover{background:color-mix(in srgb,var(--chat-primary) 5%,transparent)}.AiChat-conv-preview{font-size:12px;opacity:.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.AiChat-conv-time{font-size:11px;opacity:.4}.AiChat-agent-header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--chat-border);background:color-mix(in srgb,var(--chat-primary) 3%,var(--chat-bg))}.AiChat-agent-header .AiChat-agent-avatar{width:36px;height:36px;font-size:14px}.AiChat-agent-header-info{flex:1;min-width:0}.AiChat-agent-header .AiChat-agent-name{font-size:14px}.AiChat-agent-header .AiChat-agent-desc{font-size:11px;-webkit-line-clamp:1}.AiChat-back-btn{background:none;border:none;color:var(--chat-text);cursor:pointer;padding:4px;font-size:14px;border-radius:50%;opacity:.6;transition:all .15s;width:28px;height:28px;min-width:28px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.AiChat-back-btn:hover{opacity:1;background:color-mix(in srgb,var(--chat-primary) 10%,transparent)}.AiChat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;opacity:.5;font-size:13px;padding:40px 20px;text-align:center}.AiChat-feedback{display:inline-flex;gap:2px;margin-left:4px;vertical-align:middle}.AiChat-feedback-btn{background:none;border:none;cursor:pointer;padding:2px 4px;font-size:12px;opacity:.4;color:var(--chat-text);transition:all .15s;border-radius:4px;flex:0 0 auto}.AiChat-feedback-btn:hover{opacity:.8;background:color-mix(in srgb,var(--chat-border) 40%,transparent)}.AiChat-feedback-btn.active[data-feedback='up']{opacity:1;color:#10b981}.AiChat-feedback-btn.active[data-feedback='down']{opacity:1;color:#ef4444}.AiChat-conv-agent-name{font-size:11px;color:var(--chat-primary);opacity:.7;margin-top:1px}.AiChat-agent-info-btn{background:none;border:none;color:var(--chat-text);opacity:.3;cursor:pointer;padding:4px;font-size:13px;transition:opacity .15s;flex:0 0 auto;align-self:center;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.AiChat-agent-info-btn:hover{opacity:.7;color:var(--chat-primary)}.AiChat-agent-profile{display:flex;flex-direction:column;height:100%}.AiChat-agent-profile-header{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--chat-border);background:color-mix(in srgb,var(--chat-primary) 3%,var(--chat-bg))}.AiChat-agent-profile-body{flex:1;overflow-y:auto;padding:16px}.AiChat-agent-profile-section{margin-bottom:16px}.AiChat-agent-profile-label{font-size:11px;font-weight:600;text-transform:uppercase;opacity:.5;letter-spacing:.5px;margin-bottom:4px}.AiChat-agent-profile-section>div:last-child{font-size:14px;line-height:1.5}.AiChat-agent-profile-actions{padding:16px;border-top:1px solid var(--chat-border)}.AiChat-agent-profile-start{width:100%;padding:12px;border:none;border-radius:8px;background:var(--chat-primary);color:#fff;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .15s;flex:0 0 auto}.AiChat-agent-profile-start:hover{opacity:.9}.AiChat-action-card{border:1px solid var(--chat-border);border-radius:10px;padding:12px;margin:4px 0;background:var(--chat-bg);animation:aichat-fadeIn .2s;align-self:stretch;max-width:100%}.AiChat-action-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}.AiChat-action-icon{font-size:18px;flex-shrink:0}.AiChat-action-title{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.AiChat-action-type{font-size:13px;font-weight:600;color:var(--chat-text)}.AiChat-action-entity{font-size:11px;opacity:.6;color:var(--chat-text)}.AiChat-action-params{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;background:color-mix(in srgb,var(--chat-border) 20%,transparent);border-radius:6px;padding:8px 10px}.AiChat-action-param{font-size:12px;color:var(--chat-text);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.AiChat-action-param b{font-weight:600;text-transform:capitalize}.AiChat-action-buttons{display:flex;gap:8px}.AiChat-action-approve{flex:1;padding:8px 12px;border:none;border-radius:7px;background:var(--chat-primary);color:#fff;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:opacity .15s}.AiChat-action-approve:hover{opacity:.88}.AiChat-action-approve:disabled{opacity:.4;cursor:default}.AiChat-action-reject{flex:1;padding:8px 12px;border:1px solid var(--chat-border);border-radius:7px;background:transparent;color:var(--chat-text);font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s}.AiChat-action-reject:hover{background:color-mix(in srgb,var(--chat-border) 30%,transparent)}.AiChat-action-reject:disabled{opacity:.4;cursor:default}.AiChat-action-status{font-size:13px;font-weight:500;padding:8px 12px;border-radius:7px;display:block;text-align:center;width:100%}.AiChat-action-status--approved{color:#16a34a;background:color-mix(in srgb,#22c55e 12%,transparent)}.AiChat-action-status--rejected{color:#dc2626;background:color-mix(in srgb,#ef4444 10%,transparent)}.AiChat-voice-btn.recording{color:#ef4444!important;opacity:1!important}.AiChat-voice-btn.recording i{animation:aichat-pulse 1s infinite}.AiChat-msg-speak{opacity:.35;transition:all .15s;color:var(--chat-text)}.AiChat-msg-speak:hover{opacity:.7;color:var(--chat-primary)}.AiChat-msg-speak.speaking{opacity:1;color:var(--chat-primary);animation:aichat-pulse 1.2s infinite}.AiChat-file-preview{display:flex;gap:6px;padding:6px 12px 0;overflow-x:auto;flex-wrap:wrap;border-top:1px solid var(--chat-border);background:var(--chat-bg)}.AiChat-file-preview:empty{display:none}.AiChat-file-preview-item{position:relative;flex-shrink:0}.AiChat-file-thumb{width:64px;height:64px;object-fit:cover;border-radius:8px;border:2px solid var(--chat-border);display:block}.AiChat-file-card{display:flex;align-items:center;gap:6px;padding:6px 10px;background:color-mix(in srgb,var(--chat-border) 25%,transparent);border-radius:8px;max-width:180px;border:1px solid var(--chat-border)}.AiChat-file-card-icon{font-size:20px;color:var(--chat-primary);flex-shrink:0}.AiChat-file-card-info{min-width:0}.AiChat-file-card-name{font-size:11px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px;color:var(--chat-text)}.AiChat-file-card-size{font-size:10px;opacity:.5;color:var(--chat-text)}.AiChat-file-remove{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:none;background:#ef4444;color:#fff;font-size:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.AiChat-file-remove:hover{background:#dc2626}.AiChat-drop-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(var(--primaryColorRGB,59,130,246),0.1);border:2px dashed var(--chat-primary);border-radius:8px;display:none;align-items:center;justify-content:center;z-index:10;pointer-events:none}.AiChat-body.dragging .AiChat-drop-overlay{display:flex}.AiChat-body.dragging{position:relative}.AiChat-drop-overlay-inner{display:flex;flex-direction:column;align-items:center;color:var(--chat-primary);font-size:13px;font-weight:600}.AiChat-msg-inline-img{max-width:200px;max-height:200px;border-radius:8px;cursor:pointer;display:block}.AiChat-canvas{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.AiChat-stat-card{background:color-mix(in srgb,var(--chat-border) 20%,transparent);border:1px solid var(--chat-border);border-radius:8px;padding:12px;min-width:90px;text-align:center;flex:1}.AiChat-stat-value{font-size:20px;font-weight:700;color:var(--chat-primary)}.AiChat-stat-label{font-size:11px;color:var(--chat-text);opacity:.7;margin-top:3px}.AiChat-table{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0;border-radius:6px;overflow:hidden}.AiChat-table th{background:var(--chat-primary);color:#fff;padding:6px 8px;text-align:left;font-weight:600}.AiChat-table td{padding:6px 8px;border-bottom:1px solid var(--chat-border)}.AiChat-table tr:nth-child(even) td{background:rgba(0,0,0,.03)}.AiChat-chart{min-height:120px;margin:8px 0;border-radius:8px;overflow:hidden;background:color-mix(in srgb,var(--chat-border) 15%,transparent);padding:8px}.AiChat-chart-title{font-size:12px;font-weight:600;color:var(--chat-text);margin-bottom:6px;opacity:.8}.AiChat-chart-bars{display:flex;flex-direction:column;gap:5px}.AiChat-chart-bar-row{display:flex;align-items:center;gap:6px;font-size:11px}.AiChat-chart-bar-label{width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--chat-text);opacity:.7;flex-shrink:0}.AiChat-chart-bar-track{flex:1;height:14px;background:rgba(0,0,0,.08);border-radius:7px;overflow:hidden}.AiChat-chart-bar-fill{height:100%;background:var(--chat-primary);border-radius:7px;transition:width .4s ease}.AiChat-chart-bar-val{font-size:11px;font-weight:600;color:var(--chat-primary);min-width:30px;text-align:right}pre{position:relative}.AiChat-code-copy{position:absolute;top:6px;right:6px;font-size:11px;padding:2px 8px;border-radius:4px;background:var(--chat-primary);color:#fff;border:none;cursor:pointer;opacity:.8;z-index:1}.AiChat-code-copy:hover{opacity:1}.AiChat-code-lang{position:absolute;top:6px;left:10px;font-size:10px;color:rgba(255,255,255,.5);font-family:monospace;pointer-events:none}.AiChat-collapse{margin:8px 0;border:1px solid var(--chat-border);border-radius:6px;overflow:hidden}.AiChat-collapse summary{cursor:pointer;color:var(--chat-primary);font-weight:500;padding:8px 12px;list-style:none;display:flex;align-items:center;gap:6px;font-size:13px}.AiChat-collapse summary::-webkit-details-marker{display:none}.AiChat-collapse summary::before{content:'▶';font-size:10px;transition:transform .2s}.AiChat-collapse[open] summary::before{transform:rotate(90deg)}.AiChat-collapse-body{padding:8px 12px;font-size:13px;border-top:1px solid var(--chat-border)}.AiChat-action-inline{display:inline-flex;align-items:center;padding:5px 12px;border-radius:16px;background:var(--chat-primary);color:#fff;border:none;cursor:pointer;font-size:12px;font-weight:500;margin:3px 4px 3px 0;transition:opacity .15s}.AiChat-action-inline:hover{opacity:.85}.AiChat-chips{display:flex;gap:6px;padding:6px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-shrink:0;border-top:1px solid var(--chat-border);background:var(--chat-bg)}.AiChat-chips::-webkit-scrollbar{display:none}.AiChat-chip{white-space:nowrap;padding:6px 12px;border-radius:16px;border:1px solid var(--chat-border);background:var(--chat-bg);color:var(--chat-text);font-size:12px;cursor:pointer;transition:all .15s;flex-shrink:0}.AiChat-chip:hover{border-color:var(--chat-primary);color:var(--chat-primary);background:color-mix(in srgb,var(--chat-primary) 6%,transparent)}.AiChat-agent-badge-relevant{background:var(--chat-primary);color:#fff;font-size:10px;padding:1px 6px;border-radius:8px;margin-left:6px;vertical-align:middle;font-weight:600}.AiChat-msg-text h2,.AiChat-msg-text h3,.AiChat-msg-text h4{margin:8px 0 4px;font-weight:600;line-height:1.3}.AiChat-msg-text h2{font-size:16px}.AiChat-msg-text h3{font-size:14px}.AiChat-msg-text h4{font-size:13px}.AiChat-msg-text ul,.AiChat-msg-text ol{padding-left:18px;margin:4px 0}.AiChat-msg-text li{margin:2px 0}.AiChat-ws-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;flex-shrink:0;transition:background .3s;border:1px solid rgba(255,255,255,0.4)}.AiChat-ws-dot--connecting{background:#f59e0b;animation:aichat-pulse 1.5s infinite}.AiChat-ws-dot--connected{background:#22c55e}.AiChat-ws-dot--disconnected{background:#ef4444}.AiChat-live-voice-btn{border-radius:50%}.AiChat-live-voice-active{background:linear-gradient(135deg,#6366f1,#8b5cf6)!important;color:#fff!important;opacity:1!important}.AiChat-voice-wave{display:flex;align-items:center;justify-content:center;gap:3px;padding:0 8px;height:36px;flex-shrink:0}.AiChat-voice-wave span{display:inline-block;width:3px;background:var(--chat-primary);border-radius:2px;animation:aichat-voicewave 1.2s ease-in-out infinite}.AiChat-voice-wave span:nth-child(1){height:8px;animation-delay:0s}.AiChat-voice-wave span:nth-child(2){height:16px;animation-delay:.1s}.AiChat-voice-wave span:nth-child(3){height:24px;animation-delay:.2s}.AiChat-voice-wave span:nth-child(4){height:16px;animation-delay:.3s}.AiChat-voice-wave span:nth-child(5){height:8px;animation-delay:.4s}@keyframes aichat-voicewave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}.AiChat-widget{margin:8px 0;border-radius:10px;overflow:hidden;border:1px solid var(--chat-border)}.AiChat-widget-header{font-size:13px;font-weight:700;padding:10px 14px;background:color-mix(in srgb,var(--chat-primary) 8%,transparent);border-bottom:1px solid var(--chat-border);color:var(--chat-text)}.AiChat-widget-grid{display:flex;flex-wrap:wrap;gap:1px;background:var(--chat-border)}.AiChat-widget-metric{flex:1;min-width:100px;padding:12px 14px;background:var(--chat-bg);display:flex;align-items:center;gap:10px}.AiChat-widget-metric i{font-size:22px;flex-shrink:0}.AiChat-widget-metric-body{display:flex;flex-direction:column}.AiChat-widget-val{font-size:20px;font-weight:700;color:var(--chat-text);line-height:1.1}.AiChat-widget-lbl{font-size:11px;color:var(--chat-text);opacity:.6;margin-top:2px}.AiChat-widget-progress-row{display:flex;align-items:center;gap:8px;padding:6px 14px;background:var(--chat-bg)}.AiChat-widget-progress-label{font-size:12px;width:100px;flex-shrink:0;color:var(--chat-text)}.AiChat-widget-progress-bar{flex:1;height:8px;background:rgba(0,0,0,.08);border-radius:4px;overflow:hidden}.AiChat-widget-progress-fill{height:100%;border-radius:4px;transition:width .4s ease}.AiChat-widget-progress-val{font-size:12px;font-weight:600;min-width:50px;text-align:right;color:var(--chat-primary)}.AiChat-widget-status-grid{display:flex;flex-wrap:wrap;gap:1px;background:var(--chat-border)}.AiChat-widget-status-card{flex:1;min-width:120px;padding:10px 14px;background:var(--chat-bg);display:flex;align-items:center;gap:8px}.AiChat-widget-status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.AiChat-widget-status-body{display:flex;flex-direction:column}.AiChat-widget-status-title{font-size:12px;font-weight:600;color:var(--chat-text)}.AiChat-widget-status-value{font-size:11px;opacity:.6;color:var(--chat-text)}.AiChat-widget-list{list-style:none;padding:0;margin:0;background:var(--chat-bg)}.AiChat-widget-list-item{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--chat-border);font-size:13px;color:var(--chat-text)}.AiChat-widget-list-item:last-child{border-bottom:none}.AiChat-widget-list-val{margin-left:auto;font-weight:600;color:var(--chat-primary)}.AiChat-html-widget{margin:8px 0}.AiChat-genui-gridwrap{margin:8px 0;overflow-x:auto}.AiChat-genui-grid{border-collapse:collapse;width:100%;font-size:12px}.AiChat-genui-grid th{background:var(--chat-primary);color:#fff;padding:6px 8px;text-align:left;font-weight:600}.AiChat-genui-grid td{padding:6px 8px;border-bottom:1px solid var(--chat-border)}.AiChat-genui-row{cursor:pointer;transition:background .12s}.AiChat-genui-row:hover td{background:color-mix(in srgb,var(--chat-primary) 12%,transparent)}.AiChat-genui-cap{font-size:11px;opacity:.6;margin-top:4px}.AiChat-genui-record{margin:8px 0;border:1px solid var(--chat-border);border-radius:8px;overflow:hidden}.AiChat-genui-rhead{font-size:12px;font-weight:700;padding:8px 12px;background:color-mix(in srgb,var(--chat-primary) 8%,transparent);border-bottom:1px solid var(--chat-border)}.AiChat-genui-record .AiChat-genui-grid th{background:transparent;color:var(--chat-text);opacity:.7;width:38%;text-align:left}.AiChat-genui-ractions{padding:8px 12px;display:flex;gap:8px}.AiChat-genui-rbtn{cursor:pointer;font-size:12px;font-weight:600;padding:4px 12px;border-radius:14px;background:var(--chat-primary);color:#fff}.AiChat-genui-rbtn:hover{opacity:.88}.AiChat-diff{margin:6px 0 10px}.AiChat-diff .AiChat-diff-before{opacity:.6;text-decoration:line-through}.AiChat-diff .AiChat-diff-after{color:var(--chat-primary);font-weight:600}.AiChat-diff tr.AiChat-diff-changed td{background:color-mix(in srgb,var(--chat-primary) 8%,transparent)}.AiChat-genui-error{padding:10px 12px;margin:6px 0;border-radius:8px;background:color-mix(in srgb,var(--chat-danger,#d33) 10%,transparent);color:var(--chat-danger,#d33);font-size:13px}.AiChat-connecting-note .AiChat-msg-text{color:var(--chat-primary)!important;opacity:.9!important}.AiChat-context-chip{display:flex;align-items:center;gap:6px;margin:6px 12px 0;padding:5px 10px;border-radius:14px;background:rgba(var(--primaryColorRGB,59,130,246),0.08);color:var(--primaryColor,#3b82f6);font-size:12px;font-weight:600;width:fit-content;max-width:calc(100% - 24px)}.AiChat-context-chip i{font-size:10px;opacity:0.7}.AiChat-context-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.AiChat-context-chip-x{border:0;background:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0 2px;opacity:0.6;flex:0 0 auto}.AiChat-context-chip-x:hover{opacity:1}
.AiChat--sidebar .AiChat-panel[hidden]{display:none}


/* META  : .RTCSidePanel */
.rtc-sidepanel{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden;position:relative}.rtc-profile-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid rgba(0,0,0,0.06);min-height:48px;flex-shrink:0}.rtc-profile-avatar{width:32px;height:32px;border-radius:50%;background:var(--primaryColor,#0078d4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;cursor:pointer;position:relative;flex-shrink:0;background-size:cover;background-position:center}.rtc-profile-name{font-size:13px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rtc-status-dot{width:10px;height:10px;border-radius:50%;background:#4caf50;border:2px solid #fff;position:absolute;bottom:-1px;right:-1px}.rtc-status-dot.busy{background:#f44336}.rtc-status-dot.away{background:#ff9800}.rtc-status-dot.offline{background:#9e9e9e}.rtc-status-dot.invisible{background:#9e9e9e}.rtc-status-dropdown{position:absolute;top:100%;left:0;background:#fff;border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,0.15);z-index:100;min-width:180px;padding:4px 0;margin-top:4px}.rtc-status-option{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:12px;transition:background 0.15s}.rtc-status-option:hover{background:rgba(0,0,0,0.04)}.rtc-status-option .rtc-status-dot{position:static;border-color:transparent;width:8px;height:8px}.rtc-tab-bar{display:flex;border-bottom:1px solid rgba(0,0,0,0.08);flex-shrink:0;background:rgba(0,0,0,0.01)}.rtc-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:10px 8px;cursor:pointer;font-size:12px;font-weight:500;color:rgba(0,0,0,0.5);border-bottom:2px solid transparent;transition:all 0.2s;position:relative;user-select:none}.rtc-tab:hover{color:rgba(0,0,0,0.7);background:rgba(0,0,0,0.02)}.rtc-tab.active{color:var(--primaryColor,#0078d4);border-bottom-color:var(--primaryColor,#0078d4);font-weight:600}.rtc-tab-badge{background:var(--primaryColor,#0078d4);color:#fff;font-size:10px;font-weight:600;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}.rtc-tab-badge:empty{display:none}.rtc-tab-content{flex:1;overflow:hidden;position:relative}.rtc-panel{position:absolute;top:0;left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;display:none}.rtc-panel.active{display:block}.rtc-conversation-item{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;transition:background 0.15s}.rtc-conversation-item:hover{background:rgba(0,0,0,0.04)}.rtc-conversation-item.active{background:rgba(var(--primaryColorRGB,0,120,212),0.08)}.rtc-conv-avatar{width:40px;height:40px;border-radius:50%;background:var(--primaryColor,#0078d4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;flex-shrink:0;position:relative;background-size:cover;background-position:center}.rtc-conv-avatar .rtc-status-dot{bottom:0;right:0}.rtc-conv-info{flex:1;overflow:hidden;min-width:0}.rtc-conv-top{display:flex;align-items:center;justify-content:space-between;gap:4px}.rtc-conv-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rtc-conv-time{font-size:11px;color:rgba(0,0,0,0.4);flex-shrink:0;white-space:nowrap}.rtc-conv-bottom{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:2px}.rtc-conv-preview{font-size:12px;color:rgba(0,0,0,0.45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.rtc-conv-badge{background:var(--primaryColor,#0078d4);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px;flex-shrink:0}.rtc-conv-badge:empty{display:none}.rtc-conversation-item.unread .rtc-conv-name{font-weight:700}.rtc-conversation-item.unread .rtc-conv-preview{color:rgba(0,0,0,0.7)}.rtc-conversation-item.unread .rtc-conv-time{color:var(--primaryColor,#0078d4)}.rtc-contact-item{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;transition:background 0.15s}.rtc-contact-item:hover{background:rgba(0,0,0,0.04)}.rtc-contact-avatar{width:40px;height:40px;border-radius:50%;background:var(--primaryColor,#0078d4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;flex-shrink:0;position:relative;background-size:cover;background-position:center}.rtc-contact-info{flex:1;overflow:hidden;min-width:0}.rtc-contact-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rtc-contact-detail{font-size:11px;color:rgba(0,0,0,0.4);margin-top:1px}.rtc-contact-actions{display:flex;gap:4px;opacity:0;transition:opacity 0.15s}.rtc-contact-item:hover .rtc-contact-actions{opacity:1}.rtc-contact-action-btn{width:28px;height:28px;border:none;background:rgba(0,0,0,0.05);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;color:rgba(0,0,0,0.6);transition:all 0.15s}.rtc-contact-action-btn:hover{background:var(--primaryColor,#0078d4);color:#fff}.rtc-contacts-search{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid rgba(0,0,0,0.06);flex-shrink:0}.rtc-contacts-search input{flex:1;border:none;outline:none;font-size:12px;padding:6px 8px;background:rgba(0,0,0,0.04);border-radius:6px}.rtc-contacts-search input:focus{background:rgba(0,0,0,0.06)}.rtc-contacts-search i{color:rgba(0,0,0,0.3);font-size:12px}.rtc-contacts-group-header{padding:6px 12px;font-size:11px;font-weight:700;color:rgba(0,0,0,0.35);text-transform:uppercase;letter-spacing:0.5px;background:rgba(0,0,0,0.02);position:sticky;top:0;z-index:1}.rtc-chat-view{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;background:#fff;transform:translateX(100%);transition:transform 0.3s ease;z-index:10}.rtc-sidepanel.chat-active .rtc-chat-view{transform:translateX(0)}.rtc-sidepanel.chat-active .rtc-profile-bar,.rtc-sidepanel.chat-active .rtc-tab-bar,.rtc-sidepanel.chat-active .rtc-tab-content{transform:translateX(-30%);opacity:0;pointer-events:none;transition:transform 0.3s ease,opacity 0.2s ease}.rtc-chat-header{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid rgba(0,0,0,0.06);min-height:48px;flex-shrink:0}.rtc-chat-back{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:16px;color:rgba(0,0,0,0.6);transition:background 0.15s;flex-shrink:0}.rtc-chat-back:hover{background:rgba(0,0,0,0.06)}.rtc-chat-user-avatar{width:32px;height:32px;border-radius:50%;background:var(--primaryColor,#0078d4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0;position:relative;background-size:cover;background-position:center}.rtc-chat-user-info{flex:1;overflow:hidden;min-width:0}.rtc-chat-user-name{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rtc-chat-user-status{font-size:11px;color:rgba(0,0,0,0.4)}.rtc-chat-actions{display:flex;gap:4px}.rtc-chat-action-btn{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:14px;color:rgba(0,0,0,0.5);transition:all 0.15s}.rtc-chat-action-btn:hover{background:rgba(0,0,0,0.06);color:var(--primaryColor,#0078d4)}.rtc-chat-messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px;display:flex;flex-direction:column;gap:4px}.rtc-msg-date{text-align:center;padding:8px 0;font-size:11px;color:rgba(0,0,0,0.35);font-weight:500}.rtc-msg{max-width:85%;padding:8px 12px;border-radius:12px;font-size:13px;line-height:1.4;word-wrap:break-word;position:relative}.rtc-msg.outgoing{align-self:flex-end;background:var(--primaryColor,#0078d4);color:#fff;border-bottom-right-radius:4px}.rtc-msg.incoming{align-self:flex-start;background:rgba(0,0,0,0.06);color:rgba(0,0,0,0.85);border-bottom-left-radius:4px}.rtc-msg-text{margin:0}.rtc-msg-file{display:flex;align-items:center;gap:6px;padding:6px 8px;background:rgba(255,255,255,0.15);border-radius:6px;margin-top:4px;font-size:11px}.rtc-msg-file i{font-size:14px}.rtc-msg-time{font-size:10px;opacity:0.6;margin-top:2px;text-align:right}.rtc-msg-typing{align-self:flex-start;padding:12px 16px;background:rgba(0,0,0,0.06);border-radius:12px;border-bottom-left-radius:4px;display:flex;gap:4px}.rtc-msg-typing span{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,0.3);animation:rtcTyping 1.4s infinite}.rtc-msg-typing span:nth-child(2){animation-delay:0.2s}.rtc-msg-typing span:nth-child(3){animation-delay:0.4s}@keyframes rtcTyping{0%,60%,100%{transform:translateY(0);opacity:0.3}30%{transform:translateY(-4px);opacity:1}}.rtc-chat-input{display:flex;align-items:flex-end;gap:6px;padding:8px 12px;border-top:1px solid rgba(0,0,0,0.06);flex-shrink:0}.rtc-input-attach{width:32px;height:36px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:rgba(0,0,0,0.4);border-radius:50%;transition:color 0.15s;flex:0 0 32px}.rtc-input-attach:hover{color:var(--primaryColor,#0078d4)}.rtc-input-textarea{flex:1;border:1px solid rgba(0,0,0,0.1);border-radius:18px;padding:8px 14px;font-size:13px;font-family:inherit;resize:none;outline:none;min-height:36px;max-height:120px;line-height:1.4;transition:border-color 0.2s}.rtc-input-textarea:focus{border-color:var(--primaryColor,#0078d4)}.rtc-input-send{width:36px;height:36px;border:none;background:var(--primaryColor,#0078d4);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:14px;transition:all 0.15s;flex:0 0 36px}.rtc-input-send:hover{filter:brightness(1.1)}.rtc-input-send.disabled{opacity:0.4;cursor:default;pointer-events:none}.rtc-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:40px 20px;text-align:center;color:rgba(0,0,0,0.4)}.rtc-empty-state i{font-size:48px;margin-bottom:12px;opacity:0.3}.rtc-empty-state-title{font-size:14px;font-weight:600;margin-bottom:4px}.rtc-empty-state-desc{font-size:12px}.rtc-empty-state-btn{margin-top:16px;padding:8px 20px;background:var(--primaryColor,#0078d4);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:filter 0.15s}.rtc-empty-state-btn:hover{filter:brightness(1.1)}.SidePanel-fullscreen .rtc-sidepanel{flex-direction:row}.SidePanel-fullscreen .rtc-sidepanel .rtc-left-panel{display:flex;flex-direction:column;width:320px;border-right:1px solid rgba(0,0,0,0.08);flex-shrink:0;height:100%}.SidePanel-fullscreen .rtc-sidepanel .rtc-right-panel{display:flex;flex-direction:column;flex:1;height:100%;min-width:0}.SidePanel-fullscreen .rtc-sidepanel .rtc-tab-bar{display:none}.SidePanel-fullscreen .rtc-sidepanel .rtc-tab-content{display:none}.SidePanel-fullscreen .rtc-sidepanel .rtc-chat-view{display:none}.rtc-left-panel{display:none}.rtc-left-toggle{display:none;flex-shrink:0;padding:8px 12px;gap:4px}.SidePanel-fullscreen .rtc-left-toggle{display:flex}.rtc-left-toggle-btn{flex:1;padding:6px 0;border:none;background:rgba(0,0,0,0.04);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;color:rgba(0,0,0,0.5);transition:all 0.2s}.rtc-left-toggle-btn.active{background:var(--primaryColor,#0078d4);color:#fff}.rtc-left-search{display:none;padding:8px 12px;flex-shrink:0}.SidePanel-fullscreen .rtc-left-search{display:flex}.rtc-left-search input{flex:1;border:none;outline:none;font-size:12px;padding:6px 10px;background:rgba(0,0,0,0.04);border-radius:6px}.rtc-left-search input:focus{background:rgba(0,0,0,0.06)}.rtc-left-list{flex:1;overflow-y:auto}.rtc-right-panel{display:none}.SidePanel-fullscreen .rtc-right-panel .rtc-chat-back{display:none}.SidePanel-fullscreen .rtc-right-panel .rtc-chat-header{border-bottom:1px solid rgba(0,0,0,0.06)}.SidePanel-content[data-tool=rtc] .RTCClient{display:none!important}.SidePanel-content[data-tool=rtc] .rtc-sidepanel{display:flex}


/* META  : .CommandPalette */
.cmd-palette-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(var(--shadowRGB,0,0,0),0.5);-webkit-backdrop-filter: blur(4px);backdrop-filter:blur(4px);z-index:10000;display:flex;justify-content:center;padding-top:20vh;opacity:0;transition:opacity 150ms ease;pointer-events:none}.cmd-palette-backdrop.visible{opacity:1;pointer-events:auto}.cmd-palette{width:100%;max-width:640px;background:var(--backColor,#fff);border-radius:12px;box-shadow:0 16px 70px rgba(var(--shadowRGB,0,0,0),0.2);overflow:hidden;transform:scale(0.98);opacity:0;transition:transform 200ms ease-out,opacity 200ms ease-out;align-self:flex-start}.cmd-palette-backdrop.visible .cmd-palette{transform:scale(1);opacity:1}.cmd-palette-header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(var(--textRGB,48,48,48),0.15)}.cmd-palette-icon{color:rgba(var(--textRGB,48,48,48),0.5);font-size:16px;flex:0 0 16px}.cmd-palette-input{flex:1;border:none;outline:none;font-size:16px;font-family:inherit;background:transparent;color:var(--textColor,#1a1a1a)}.cmd-palette-input::placeholder{color:rgba(var(--textRGB,48,48,48),0.5)}.cmd-palette-header kbd{background:rgba(var(--textRGB,48,48,48),0.12);border-radius:4px;padding:2px 8px;font-size:11px;color:rgba(var(--textRGB,48,48,48),0.6);flex:0 0 auto}.cmd-palette-results{max-height:400px;overflow-y:auto;padding:8px 0}.cmd-palette-group-title{font-size:11px;font-weight:700;text-transform:uppercase;color:rgba(var(--textRGB,48,48,48),0.5);padding:8px 16px 4px;letter-spacing:0.5px}.cmd-palette-item{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer;transition:background 0.1s}.cmd-palette-item:hover,.cmd-palette-item.active{background:rgba(var(--primaryColorRGB,0,120,212),0.08)}.cmd-palette-item-icon{width:28px;height:28px;border-radius:6px;background:rgba(var(--textRGB,48,48,48),0.08);display:flex;align-items:center;justify-content:center;font-size:13px;color:rgba(var(--textRGB,48,48,48),0.6);flex:0 0 28px}.cmd-palette-item.active .cmd-palette-item-icon{background:var(--primaryColor,#0078d4);color:#fff}.cmd-palette-item-body{flex:1;min-width:0}.cmd-palette-item-title{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--textColor,#1a1a1a)}.cmd-palette-item-breadcrumb{font-size:12px;color:rgba(var(--textRGB,48,48,48),0.6);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cmd-palette-item-shortcut{display:flex;align-items:center;gap:2px;flex:0 0 auto;margin-left:4px}.cmd-palette-item-shortcut-sep{font-size:10px;color:rgba(var(--textRGB,48,48,48),0.35);padding:0 1px}.cmd-palette-item-shortcut kbd{background:rgba(var(--textRGB,48,48,48),0.12);border-radius:4px;padding:2px 6px;font-size:10px;color:rgba(var(--textRGB,48,48,48),0.5);line-height:1.4}.cmd-palette-footer{display:flex;align-items:center;gap:16px;padding:8px 16px;border-top:1px solid rgba(var(--textRGB,48,48,48),0.15);font-size:11px;color:rgba(var(--textRGB,48,48,48),0.5)}.cmd-palette-footer kbd{background:rgba(var(--textRGB,48,48,48),0.12);border-radius:3px;padding:1px 5px;font-size:10px;margin:0 2px}.cmd-palette-empty{padding:32px 16px;text-align:center;color:rgba(var(--textRGB,48,48,48),0.5);font-size:13px}


/* META  : .KeyboardShortcutsOverlay */
.ks-overlay-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(var(--shadowRGB,0,0,0),0.55);-webkit-backdrop-filter: blur(4px);backdrop-filter:blur(4px);z-index:10001;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 180ms ease;pointer-events:none}.ks-overlay-backdrop.visible{opacity:1;pointer-events:auto}.ks-overlay{background:var(--backColor,#fff);border-radius:14px;box-shadow:0 20px 80px rgba(var(--shadowRGB,0,0,0),0.25);width:100%;max-width:720px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;transform:scale(0.96);opacity:0;transition:transform 200ms ease-out,opacity 200ms ease-out}.ks-overlay-backdrop.visible .ks-overlay{transform:scale(1);opacity:1}.ks-overlay-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(var(--textRGB,48,48,48),0.12);flex:0 0 auto}.ks-overlay-title{font-size:15px;font-weight:600;color:var(--textColor,#1a1a1a);display:flex;align-items:center;gap:8px}.ks-overlay-title i{color:var(--primaryColor,#0078d4);font-size:16px}.ks-overlay-close{border:none;background:none;cursor:pointer;font-size:20px;line-height:1;color:rgba(var(--textRGB,48,48,48),0.5);padding:4px 8px;border-radius:6px;transition:background 0.15s,color 0.15s}.ks-overlay-close:hover{background:rgba(var(--textRGB,48,48,48),0.08);color:var(--textColor,#1a1a1a)}.ks-overlay-body{overflow-y:auto;padding:20px;flex:1}.ks-overlay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}.ks-overlay-col{display:flex;flex-direction:column;gap:6px}.ks-overlay-col-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--primaryColor,#0078d4);margin-bottom:4px;padding-bottom:6px;border-bottom:1px solid rgba(var(--primaryColorRGB,0,120,212),0.2)}.ks-overlay-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 0}.ks-overlay-label{font-size:13px;color:rgba(var(--textRGB,48,48,48),0.8);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ks-overlay-kbd{display:flex;align-items:center;gap:2px;flex:0 0 auto}.ks-overlay-kbd kbd{background:rgba(var(--textRGB,48,48,48),0.08);border:1px solid rgba(var(--textRGB,48,48,48),0.18);border-radius:5px;padding:3px 7px;font-size:11px;font-family:inherit;color:rgba(var(--textRGB,48,48,48),0.75);line-height:1.3;box-shadow:0 1px 0 rgba(var(--textRGB,48,48,48),0.12)}


/* META  : .TourOverlay */
.TourOverlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:50000;pointer-events:auto;background:transparent}.TourSpotlight{position:fixed;background:transparent;border-radius:8px;box-shadow:0 0 0 9999px rgba(0,0,0,0.65);transition:all 280ms cubic-bezier(0.4,0,0.2,1);z-index:50001;pointer-events:none}.TourTooltip{position:fixed;z-index:50002;width:300px;max-width:calc(100vw - 32px);background:var(--backColor,#fff);border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,0.2),0 2px 8px rgba(0,0,0,0.1);border:1px solid rgba(var(--shadowRGB,0,0,0),0.08);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;animation:tourTooltipIn 220ms cubic-bezier(0.34,1.56,0.64,1)}.TourTooltipInner{padding:18px 18px 14px}.TourTooltipHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.TourStepCounter{font-size:11px;font-weight:700;color:var(--primaryColor,#3b82f6);background:rgba(var(--primaryColorRGB,59,130,246),0.1);padding:3px 8px;border-radius:20px;letter-spacing:0.02em}.TourSkipBtn{background:none;border:none;cursor:pointer;color:rgba(var(--shadowRGB,0,0,0),0.35);font-size:16px;line-height:1;padding:4px 6px;border-radius:6px;transition:all 150ms;flex:none;width:auto}.TourSkipBtn:hover{background:rgba(var(--shadowRGB,0,0,0),0.06);color:rgba(var(--shadowRGB,0,0,0),0.7)}.TourTooltipTitle{font-size:15px;font-weight:700;color:var(--textColor,#1e293b);margin-bottom:8px;line-height:1.3}.TourTooltipBody{font-size:13px;color:rgba(var(--shadowRGB,0,0,0),0.6);line-height:1.6;margin-bottom:14px}.TourTooltipBody p{margin:0 0 6px}.TourTooltipBody p:last-child{margin:0}.TourTooltipFooter{display:flex;align-items:center;justify-content:flex-end;gap:8px}.TourPrevBtn{display:inline-flex;align-items:center;padding:7px 14px;border-radius:8px;border:1px solid rgba(var(--shadowRGB,0,0,0),0.1);background:transparent;font-size:13px;font-weight:500;color:rgba(var(--shadowRGB,0,0,0),0.6);cursor:pointer;transition:all 150ms;flex:none;width:auto}.TourPrevBtn:hover{background:rgba(var(--shadowRGB,0,0,0),0.04);color:rgba(var(--shadowRGB,0,0,0),0.85)}.TourNextBtn{display:inline-flex;align-items:center;padding:7px 16px;border-radius:8px;border:none;background:var(--primaryColor,#3b82f6);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:all 150ms;flex:none;width:auto}.TourNextBtn:hover{filter:brightness(1.08);box-shadow:0 4px 12px rgba(var(--primaryColorRGB,59,130,246),0.35)}.TourTooltipArrow{position:absolute;width:12px;height:12px;background:var(--backColor,#fff);border:1px solid rgba(var(--shadowRGB,0,0,0),0.08);transform:rotate(45deg);z-index:-1}.TourTooltip[data-placement=bottom] .TourTooltipArrow{top:-7px;left:50%;margin-left:-6px;border-bottom:none;border-right:none}.TourTooltip[data-placement=top] .TourTooltipArrow{bottom:-7px;left:50%;margin-left:-6px;border-top:none;border-left:none}.TourTooltip[data-placement=left] .TourTooltipArrow{right:-7px;top:50%;margin-top:-6px;border-top:none;border-right:none}.TourTooltip[data-placement=right] .TourTooltipArrow{left:-7px;top:50%;margin-top:-6px;border-bottom:none;border-left:none}.TourTooltip[data-placement=center] .TourTooltipArrow{display:none}.tour-target-highlight{outline:3px solid var(--primaryColor,#3b82f6)!important;outline-offset:3px;border-radius:4px;position:relative;z-index:50001}.guide-tour-launch-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;border:none;background:linear-gradient(135deg,var(--primaryColor,#3b82f6),color-mix(in srgb,var(--primaryColor,#3b82f6) 70%,#7c3aed));color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all 200ms;box-shadow:0 4px 12px rgba(var(--primaryColorRGB,59,130,246),0.3);margin:8px 0}.guide-tour-launch-btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 20px rgba(var(--primaryColorRGB,59,130,246),0.4)}.guide-tour-launch-btn i{font-size:15px}body.tour-active{overflow:hidden}@keyframes tourTooltipIn{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}


/* META  : .ContextualTooltip */
.js-tooltip{position:fixed;z-index:99998;max-width:260px;min-width:100px;background:rgba(20,20,30,0.93);-webkit-backdrop-filter: blur(8px);backdrop-filter:blur(8px);border-radius:8px;padding:8px 12px;box-shadow:0 4px 20px rgba(0,0,0,0.25);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity 180ms ease,transform 180ms ease;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}.js-tooltip.js-tooltip-visible{opacity:1;transform:translateY(0)}.js-tooltip-title{font-size:13px;font-weight:600;color:#fff;line-height:1.4;margin-bottom:3px}.js-tooltip-body{font-size:12px;color:rgba(255,255,255,0.72);line-height:1.5}


/* META  : .ETWMenuPremium */
.ETWMenuTop .ActionPanel,.ETWMenuBody .ActionPanel{margin:0 !important;}.ETWMenuTop .ActionPanelHeader,.ETWMenuBody .ActionPanelHeader{padding:8px 12px !important;font-size:11px !important;font-weight:700 !important;letter-spacing:.4px !important;min-height:0 !important;}.ETWMenuTop .ActionPanelBody,.ETWMenuBody .ActionPanelBody{padding:4px 12px 9px !important;}.ETWMenuTop .ActionPanel.HideActionBody .ActionPanelBody,.ETWMenuBody .ActionPanel.HideActionBody .ActionPanelBody{padding:0 !important;}.ETWMenuBody .ActionPanelButton{margin:3px 0 !important;}.ETWBys{padding:0 !important;}.CurrentViewType{display:flex !important;align-items:center;gap:8px;width:100% !important;margin:0 !important;box-sizing:border-box;padding:9px 12px !important;border:1px solid #e2e8f0 !important;border-radius:10px !important;background:#fff !important;font-size:13px !important;font-weight:600 !important;color:#1e293b !important;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.05) !important;transition:border-color .15s,box-shadow .15s !important;text-align:left !important;}.CurrentViewType:hover{border-color:#c7d2fe !important;background:#fbfbfe !important;box-shadow:0 2px 8px rgba(15,23,42,.08) !important;}.CurrentViewType img,.CurrentViewType svg{width:17px;height:17px;flex:0 0 auto;}.ETWMenuBody .ActionPanel{border-top:1px solid rgba(15,23,42,.06) !important;}.ETWMenuBody .ActionPanelHeader{color:#475569 !important;text-transform:uppercase !important;cursor:pointer !important;transition:background .12s,color .12s !important;}.ETWMenuTop .ActionPanelHeader:hover,.ETWMenuBody .ActionPanelHeader:hover{background:#f8fafc !important;color:#1e293b !important;}.ETWMenuBody .ItemSelection{margin:0 0 6px !important;width:100% !important;box-sizing:border-box !important;padding:8px 10px !important;border:1px solid #e2e8f0 !important;border-radius:9px !important;background:#fff !important;font-size:13px !important;color:#1e293b !important;cursor:pointer !important;transition:border-color .15s,box-shadow .15s !important;}.ETWMenuBody .ItemSelection:hover{border-color:#c7d2fe !important;box-shadow:0 1px 4px rgba(15,23,42,.06) !important;}.ETWMenuBody .ByFieldsRightAdd{border:0 !important;background:none !important;padding:0 !important;margin:0 !important;}.ETWMenuBody .AddGroupField{display:inline-flex !important;align-items:center !important;gap:7px !important;padding:7px 12px 7px 7px !important;margin:5px 0 !important;border:1px solid #e7e1fb !important;border-radius:10px !important;background:#faf9ff !important;color:#6d28d9 !important;font-size:12.5px !important;font-weight:600 !important;cursor:pointer !important;transition:border-color .14s,background .14s,box-shadow .14s !important;}.ETWMenuBody .AddGroupField:hover{border-color:#8b5cf6 !important;background:#f3effe !important;box-shadow:0 2px 8px rgba(139,92,246,.13) !important;}.ETWMenuBody .AddGroupField>span:first-child{display:inline-flex !important;align-items:center !important;justify-content:center !important;width:18px !important;height:18px !important;border-radius:6px !important;background:#8b5cf6 !important;color:#fff !important;font-size:14px !important;font-weight:700 !important;line-height:1 !important;flex:0 0 auto !important;}.ETWMenuBody .AddGroupField>span:first-child:before{content:'+';}.ETWMenuBody .AddGroupField a{color:inherit !important;text-decoration:none !important;background:none !important;padding:0 !important;border:0 !important;}.ETWMenuBody .ActionPanelButton{margin:4px 0 !important;padding:9px 12px 9px 30px !important;border:1px solid #e2e8f0 !important;border-radius:9px !important;background:#fff !important;color:#334155 !important;font-size:12.5px !important;font-weight:500 !important;cursor:pointer !important;transition:border-color .14s,background .14s,box-shadow .14s !important;}.ETWMenuBody .ActionPanelButton:hover{border-color:#c7d2fe !important;background:#fbfbfe !important;box-shadow:0 2px 8px rgba(15,23,42,.06) !important;}.ETWMenuBody .MicroButton{display:inline-flex !important;align-items:center !important;justify-content:center !important;width:26px !important;height:26px !important;border-radius:7px !important;background:transparent !important;color:#94a3b8 !important;cursor:pointer !important;flex:0 0 auto !important;transition:background .12s,color .12s !important;}.ETWMenuBody .MicroButton:hover{background:rgba(239,68,68,.1) !important;color:#dc2626 !important;}.ETWMenuBody .MicroButton .ImageClass,.ETWMenuBody .MicroButton>span{font-size:14px !important;}.ETWMenuBody .ByFieldsRightItem{display:flex !important;align-items:center !important;gap:6px !important;font-size:12.5px !important;color:#1e293b !important;}.ETWMenuBottom .ToggleButton,.ETWMenuBottom .PrintPreviewButton{display:inline-flex !important;align-items:center !important;gap:7px !important;padding:8px 13px !important;border:1px solid #e2e8f0 !important;border-radius:9px !important;background:#fff !important;color:#475569 !important;font-size:12.5px !important;font-weight:600 !important;cursor:pointer !important;transition:border-color .14s,background .14s !important;}.ETWMenuBottom .ToggleButton:hover,.ETWMenuBottom .PrintPreviewButton:hover{border-color:#c7d2fe !important;background:#f8fafc !important;color:#1e293b !important;}.ETWMenuBottom .ToggleButton img,.ETWMenuBottom .PrintPreviewButton img,.ETWMenuBottom .ToggleButton svg,.ETWMenuBottom .PrintPreviewButton svg{width:15px !important;height:15px !important;}.ViewColHidden{display:none !important;}.ETWMenuSection{display:flex;align-items:center;gap:8px;padding:11px 12px 5px;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#94a3b8;}.ETWMenuSection:before{content:'';width:4px;height:13px;border-radius:3px;background:#cbd5e1;flex:0 0 auto;}.ETWMenuSection_shape:before{background:#8b5cf6;}.ETWMenuSection_action:before{background:#0ea371;}.ETWMenu{display:flex !important;flex-direction:column !important;max-height:100% !important;}.ETWMenuTop,.ETWMenuBottom{flex:0 0 auto !important;}.ETWMenuBody{flex:1 1 0 !important;min-height:0 !important;overflow-y:auto !important;overflow-x:hidden !important;}.ETWMenuBody::-webkit-scrollbar{width:10px;}.ETWMenuBody::-webkit-scrollbar-thumb{background:rgba(15,23,42,.16);border-radius:8px;border:3px solid transparent;background-clip:content-box;}.ViewSettingsPopup{width:346px!important;max-width:92vw!important;background:#fff!important;border:1px solid rgba(15,23,42,.07)!important;border-radius:16px!important;overflow:hidden!important;box-shadow:0 18px 50px rgba(15,23,42,.22),0 3px 10px rgba(15,23,42,.08)!important;font-family:inherit!important;}.ViewSettingsHeader{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:13px 16px!important;background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%)!important;color:#fff!important;}.ViewSettingsTitle{font-size:14px!important;font-weight:700!important;letter-spacing:.2px!important;color:#fff!important;}.ViewSettingsClose{width:26px!important;height:26px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:0!important;border-radius:8px!important;background:rgba(255,255,255,.18)!important;color:#fff!important;font-size:16px!important;line-height:1!important;cursor:pointer!important;transition:background .15s!important;}.ViewSettingsClose:hover{background:rgba(255,255,255,.34)!important;}.ViewSettingsBody{max-height:min(70vh,560px)!important;overflow:auto!important;padding:4px 0 8px!important;background:#fff!important;}.ViewSettingsBody::-webkit-scrollbar{width:11px;}.ViewSettingsBody::-webkit-scrollbar-thumb{background:rgba(15,23,42,.16);border-radius:8px;border:3px solid #fff;}.ViewSettingsGroup{border-bottom:1px solid rgba(15,23,42,.05)!important;}.ViewSettingsGroup:last-child{border-bottom:0!important;}.ViewSettingsGroupHeader{display:flex!important;align-items:center!important;gap:8px!important;padding:6px 0!important;cursor:pointer!important;user-select:none!important;transition:background .12s!important;}.ViewSettingsGroupHeader:hover{background:transparent!important;}.ViewSettingsGroupTitle{flex:1!important;font-size:11px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.6px!important;color:#64748b!important;}.ViewSettingsGroupToggle{color:#94a3b8!important;font-size:11px!important;}.ViewSettingsGroupContent{padding:0 0 8px!important;}.ViewSettingsRow{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:7px 0!important;}.ViewSettingsRowFull{display:block!important;}.ViewSettingsLabel{font-size:13px!important;color:#334155!important;}.ViewSettingsSelect,.ViewSettingsNumber,.ViewSettingsText,.ViewSettingsColorText{padding:7px 9px!important;border:1px solid #e2e8f0!important;border-radius:9px!important;font-size:13px!important;background:#fff!important;color:#0f172a!important;transition:border-color .15s,box-shadow .15s!important;}.ViewSettingsSelect:focus,.ViewSettingsNumber:focus,.ViewSettingsText:focus,.ViewColAddSelect:focus{outline:none!important;border-color:#8b5cf6!important;box-shadow:0 0 0 3px rgba(139,92,246,.16)!important;}.ViewColChooser{display:flex;flex-direction:column;gap:9px;width:100%;text-align:left;}.ViewColList{display:flex;flex-direction:column;gap:5px;max-height:272px;overflow:auto;padding:1px;}.ViewColItem{display:flex;align-items:center;gap:9px;padding:9px 11px;background:#fff;border:1px solid #e9edf4;border-radius:11px;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:box-shadow .15s,border-color .15s,opacity .12s;outline:none;cursor:grab;user-select:none;-webkit-user-select:none;-ms-user-select:none;touch-action:none;}.ViewColItem:active{cursor:grabbing;}.ViewColDragging{opacity:.35!important;border-style:dashed!important;border-color:#c7d2fe!important;background:#f8fafc!important;box-shadow:none!important;}.ViewColGhost{position:fixed!important;margin:0!important;pointer-events:none!important;z-index:2147483600!important;box-shadow:0 14px 34px rgba(15,23,42,.28)!important;border-color:#8b5cf6!important;opacity:.98!important;}.ViewColHidden{display:none!important;}.ViewColDraggingBody,.ViewColDraggingBody *{cursor:grabbing!important;}.ViewColItem:hover{border-color:#d7deea;box-shadow:0 3px 10px rgba(15,23,42,.09);}.ViewColItem:focus-visible{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.16);}.ViewColGrip{cursor:grab;color:#cbd5e1;font-size:15px;line-height:1;letter-spacing:-3px;padding-right:1px;transition:color .15s;}.ViewColItem:hover .ViewColGrip{color:#94a3b8;}.ViewColGrip:active{cursor:grabbing;}.ViewColName{flex:1;font-size:13px;font-weight:500;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}.ViewColTag{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#0ea371;background:rgba(16,185,129,.13);padding:3px 8px;border-radius:999px;flex:0 0 auto;}.ViewColTagAgg{color:#b45309;background:rgba(245,158,11,.15);}.ViewColDel{width:24px;height:24px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:#94a3b8;font-size:12px;line-height:1;cursor:pointer;opacity:0;transition:background .15s,color .15s,opacity .15s;}.ViewColItem:hover .ViewColDel,.ViewColItem:focus-within .ViewColDel{opacity:1;}.ViewColDel:hover{background:rgba(239,68,68,.12);color:#dc2626;}.ViewColDropAbove{box-shadow:0 -2px 0 0 #8b5cf6,0 2px 8px rgba(15,23,42,.08);}.ViewColDropBelow{box-shadow:0 2px 0 0 #8b5cf6,0 2px 8px rgba(15,23,42,.08);}.ViewColEmpty{font-size:12px;color:#94a3b8;padding:16px;text-align:center;border:1px dashed #e2e8f0;border-radius:11px;}.ViewColAdd{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}.ViewColAddSelect{width:100%;box-sizing:border-box;height:36px;padding:7px 10px;border:1px solid #e2e8f0;border-radius:10px;font-size:13px;background:#fff;color:#0f172a;cursor:pointer;transition:border-color .15s,box-shadow .15s;}.ViewColAdd .ViewColAddSelect{flex:1 1 auto;width:auto;min-width:120px;}.ViewColReset{cursor:pointer;border:1px solid #e2e8f0;background:#fff;border-radius:10px;font-size:12px;font-weight:600;padding:8px 12px;color:#64748b;white-space:nowrap;transition:background .15s,color .15s;}.ViewColReset:hover{background:#f8fafc;color:#0f172a;}.ViewColRemote,.ViewColAgg{display:flex;flex-direction:column;gap:7px;padding-top:11px;margin-top:3px;border-top:1px dashed #e2e8f0;}.ViewColRemoteLabel{font-size:10.5px;font-weight:800;color:#0ea371;text-transform:uppercase;letter-spacing:.5px;}.ViewColAggLabel{font-size:10.5px;font-weight:800;color:#b45309;text-transform:uppercase;letter-spacing:.5px;}/* panel header = collapsible affordance (rotating chevron) */.ETWMenuBody .ActionPanelHeader{position:relative !important;padding-right:30px !important;}.ETWMenuBody .ActionPanelHeader:after{content:'';position:absolute;right:13px;top:50%;width:7px;height:7px;border-right:2px solid #cbd5e1;border-bottom:2px solid #cbd5e1;transform:translateY(-65%) rotate(45deg);transition:transform .18s,border-color .15s;pointer-events:none;}.ETWMenuBody .ActionPanel:not(.HideActionBody)>.ActionPanelHeader:after{transform:translateY(-30%) rotate(-135deg);}.ETWMenuBody .ActionPanelHeader:hover:after{border-color:#8b5cf6;}/* one separator only: drop the native body top-border (was doubling the panel border) */.ETWMenuBody .ActionPanelBody{border-top:0 !important;}/* hamburger menu toggle: rounded hit area + hover (was a flat oversized icon) */.ToggleButton.ToggleMenu{border-radius:10px !important;transition:background .14s,color .14s !important;}.ToggleButton.ToggleMenu:hover{background:#f1f5f9 !important;color:#475569 !important;}/* ViewSettings rows: label LEFT, input RIGHT, label width adapts to input type */.ETWMenuBody .ViewSettingsRow{text-align:left !important;gap:12px !important;}.ETWMenuBody .ViewSettingsLabel{flex:1 1 auto !important;text-align:left !important;min-width:0 !important;}.ETWMenuBody .ViewSettingsInput{flex:0 0 auto !important;margin-left:auto !important;width:auto !important;display:flex !important;align-items:center !important;justify-content:flex-end !important;text-align:right !important;}.ETWMenuBody .ViewSettingsInput .ViewSettingsNumber{width:78px !important;text-align:right !important;}.ETWMenuBody .ViewSettingsInput .ViewSettingsSelect{min-width:128px !important;}.ETWMenuBody .ViewSettingsInput .ViewSettingsText,.ETWMenuBody .ViewSettingsInput .ViewSettingsColorText{width:140px !important;}.ETWMenuBody .ViewSettingsInput .ViewSettingsCheckbox{margin:0 !important;}/* the full-width column-chooser row stays full width (label-less) */.ETWMenuBody .ViewSettingsRowFull{display:block !important;}.ETWMenuBody .ViewSettingsRowFull .ViewSettingsInput{width:100% !important;display:block !important;margin-left:0 !important;text-align:left !important;}/* inner inputs must NOT flex-grow (base rule gave them flex:1 1 0% -> stretched to 140px); size by type so wrapper hugs + label fills */.ETWMenuBody .ViewSettingsInput .ViewSettingsCheckbox{width:18px !important;height:18px !important;flex:0 0 auto !important;}.ETWMenuBody .ViewSettingsInput .ViewSettingsNumber{flex:0 0 auto !important;width:78px !important;}.ETWMenuBody .ViewSettingsInput .ViewSettingsSelect{flex:0 0 auto !important;width:130px !important;min-width:0 !important;}.ETWMenuBody .ViewSettingsInput .ViewSettingsText,.ETWMenuBody .ViewSettingsInput .ViewSettingsColorText{flex:0 0 auto !important;width:140px !important;}.ETWMenuBody .ViewSettingsInput{min-width:0 !important;}/* === inline column management on list headers (ListFieldTitles) — premium (user req: do columns via headers) === */.ListFieldTitles td a[draggable]{cursor:grab !important;}.ListFieldTitles td a[draggable]:active{cursor:grabbing !important;}.ListFieldTitles td.FieldText:hover{background:rgba(139,92,246,.05) !important;}.ListFieldTitles td.ShowOnHover:hover .MicroButton.ShowOnHover,.ListFieldTitles td .MicroButton:not(.ShowOnHover){display:inline-flex !important;}.ListFieldTitles td .MicroButton{align-items:center !important;justify-content:center !important;width:22px !important;height:22px !important;min-width:22px !important;border-radius:6px !important;background:transparent !important;color:#94a3b8 !important;transition:background .12s,color .12s !important;}.ListFieldTitles td .MicroButton .ImageClass,.ListFieldTitles td .MicroButton>span{font-size:12px !important;}.ListFieldTitles td .MicroButton.OrderBy:hover{background:#eef2ff !important;color:#4f46e5 !important;}.ListFieldTitles td .MicroButton.ColumnAdder{border-radius:6px !important;}.ListFieldTitles td .MicroButton.ColumnAdder:hover{background:rgba(16,185,129,.12) !important;color:#0ea371 !important;}.ListFieldTitles td .MicroButton.ColumnRemover{width:22px !important;}.ListFieldTitles td .MicroButton.ColumnRemover:hover{background:rgba(239,68,68,.12) !important;color:#dc2626 !important;}.ListFieldTitles td .ColumnResizer{background:transparent !important;width:5px !important;cursor:col-resize !important;transition:background .12s !important;}.ListFieldTitles td:hover .ColumnResizer{background:rgba(148,163,184,.35) !important;}.ListFieldTitles td .ColumnResizer:hover{background:#8b5cf6 !important;}/* remote/aggregate pickers inside the inline header '+ add' menu (SelectionsMenu) */.HeaderColPick{display:flex !important;flex-direction:column !important;gap:6px !important;padding:9px 11px !important;border-top:1px dashed #e2e8f0 !important;margin-top:5px !important;}.HeaderColPick .ViewColRemoteLabel{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#0ea371;}.HeaderColPick .ViewColAggLabel{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#b45309;}.HeaderColPick .ViewColAddSelect{width:100%;box-sizing:border-box;height:34px;padding:6px 9px;border:1px solid #e2e8f0;border-radius:9px;font-size:13px;background:#fff;color:#0f172a;cursor:pointer;transition:border-color .15s,box-shadow .15s;}.HeaderColPick .ViewColAddSelect:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.16);}/* right-click column-header context menu (all column actions) */.ColumnHeaderMenu{position:fixed;z-index:2147483600;min-width:212px;background:#fff;border:1px solid rgba(15,23,42,.1);border-radius:12px;box-shadow:0 18px 50px rgba(15,23,42,.22),0 3px 10px rgba(15,23,42,.08);padding:6px;font-size:13px;color:#1e293b;}.ColumnHeaderMenuItem{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;color:#334155;text-decoration:none;transition:background .12s,color .12s;}.ColumnHeaderMenuItem:hover{background:#f1f5f9;color:#0f172a;}.ColumnHeaderMenuItem.danger:hover{background:rgba(239,68,68,.1);color:#dc2626;}.ColumnHeaderMenuIcon{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:#94a3b8;flex:0 0 auto;}.ColumnHeaderMenuItem:hover .ColumnHeaderMenuIcon{color:inherit;}.ColumnHeaderMenuItem.danger:hover .ColumnHeaderMenuIcon{color:#dc2626;}.ColumnHeaderMenuLabel{flex:1;white-space:nowrap;}.ColumnHeaderMenuSep{height:1px;background:rgba(15,23,42,.08);margin:5px 8px;}/* premium cohesion pass: unify borders, separators, shadows, backgrounds */.ETWMenu{border-color:#e2e8f0 !important;box-shadow:-10px 0 30px rgba(15,23,42,.07) !important;background:#f8fafc !important;}.ETWMenuTop{border-bottom:1px solid rgba(15,23,42,.07) !important;}.ETWMenuBottom{border-top:1px solid rgba(15,23,42,.07) !important;background:#fff !important;}.ETWMenuBody .ActionPanel{border-top:1px solid rgba(15,23,42,.06) !important;}.ETWMenuBody .ActionPanel:first-child{border-top:0 !important;}.ETWMenuBody .ViewSettingsRow{border-bottom:1px solid rgba(15,23,42,.05) !important;}.ETWMenuBody .ViewSettingsRow:last-child{border-bottom:0 !important;}/* consistent border + subtle shadow on every interactive control */.ETWMenuBody .ItemSelection,.ETWMenuBody .ViewSettingsSelect,.ETWMenuBody .ViewSettingsNumber,.ETWMenuBody .ViewSettingsText,.ETWMenuBody .ViewSettingsColorText,.ETWMenuBody .ActionPanelButton,.ETWMenuBottom .PrintPreviewButton,.ETWMenuBottom .ToggleButton{border:1px solid #e2e8f0 !important;box-shadow:0 1px 2px rgba(15,23,42,.04) !important;background:#fff !important;}.ETWMenuBody .ItemSelection:hover,.ETWMenuBody .ActionPanelButton:hover,.ETWMenuBottom .PrintPreviewButton:hover,.ETWMenuBottom .ToggleButton:hover{border-color:#c7d2fe !important;box-shadow:0 2px 8px rgba(15,23,42,.08) !important;}/* by-field direction toggle (PageByDir / OrderByToggle) — premium icon-button */.ETWMenuBody .ToggleButton.OrderByToggle,.ETWMenuBody .ToggleButton.PageByDir,.ETWMenuBody .ByFieldsRightItem .ToggleButton{display:inline-flex !important;align-items:center !important;justify-content:center !important;width:26px !important;height:26px !important;min-width:26px !important;padding:0 !important;border-radius:7px !important;background:transparent !important;color:#64748b !important;cursor:pointer !important;transition:background .12s,color .12s !important;}.ETWMenuBody .ToggleButton.OrderByToggle:hover,.ETWMenuBody .ToggleButton.PageByDir:hover,.ETWMenuBody .ByFieldsRightItem .ToggleButton:hover{background:#eef2ff !important;color:#4f46e5 !important;}.ETWMenuBody .ToggleButton.OrderByToggle .ImageClass,.ETWMenuBody .ToggleButton.PageByDir .ImageClass,.ETWMenuBody .ByFieldsRightItem .ToggleButton .ImageClass{font-size:13px !important;}/* a direction toggle in the descending state reads as 'active' */.ETWMenuBody .ToggleButton[class*=_descending]{color:#4f46e5 !important;}/* active-selection count badge on by-field panel headers */.ETWMenuBody .ActionPanelHeader{display:flex !important;align-items:center !important;}.ETWMenuBody .ActionPanelHeader .ButtonText{flex:0 1 auto !important;}.ETWMenuBody .ActionPanelHeader .ActionPanelCount{display:inline-flex !important;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;margin-left:8px;margin-right:auto;border-radius:9px;background:#8b5cf6;color:#fff;font-size:10px;font-weight:800;letter-spacing:.3px;line-height:1;flex:0 0 auto;}/* real accordion: the OPEN ActionPanel fills the body height, its body scrolls internally */.ETWMenuBody{overflow:hidden !important;}.ETWMenuBody .ETWBys{display:flex !important;flex-direction:column !important;flex:1 1 0 !important;min-height:0 !important;overflow:hidden !important;}.ETWMenuBody .ETWBys .ActionPanel{flex:0 0 auto !important;}.ETWMenuBody .ETWBys .ActionPanel:not(.HideActionBody){flex:1 1 0 !important;min-height:0 !important;display:flex !important;flex-direction:column !important;}.ETWMenuBody .ETWBys .ActionPanel:not(.HideActionBody) > .ActionPanelHeader{flex:0 0 auto !important;}.ETWMenuBody .ETWBys .ActionPanel:not(.HideActionBody) > .ActionPanelBody{flex:1 1 0 !important;min-height:0 !important;overflow-y:auto !important;}.ETWMenuBody > .ETWBys{height:100% !important;}.ETWMenuTop{padding:0 !important;}/* count badge: right-aligned, small, just left of the header chevron */.ETWMenuBody .ActionPanelHeader .ActionPanelCount{margin-left:auto !important;margin-right:0 !important;min-width:16px !important;height:16px !important;padding:0 5px !important;font-size:9.5px !important;}/* by-field rows: flex layout; field select fills, toggle + delete are full-height and aligned */.ETWMenuBody .ByFieldsRight > .ByFieldsRightItem{display:flex !important;align-items:center !important;gap:6px !important;flex-wrap:nowrap !important;}.ETWMenuBody .ByFieldsRight > .ByFieldsRightItem > .ItemSelection,.ETWMenuBody .ByFieldsRight > .ByFieldsRightItem > .ItemSelectionChoice{flex:1 1 auto !important;min-width:0 !important;}.ETWMenuBody .ByFieldsRight > .ByFieldsRightItem > .ToggleButton,.ETWMenuBody .ByFieldsRight > .ByFieldsRightItem > .MicroButton{height:30px !important;min-height:30px !important;align-self:center !important;flex:0 0 auto !important;margin:0 !important;}/* AddGroupField: drop the duplicate native '+' (keep the violet badge) */.ETWMenuBody .AddGroupField a:before{content:none !important;}/* emphasize the active (open) ActionPanel */.ETWMenuBody .ETWBys > .ActionPanel:not(.HideActionBody){border-left:3px solid #8b5cf6 !important;background:rgba(139,92,246,.035) !important;}.ETWMenuBody .ETWBys > .ActionPanel:not(.HideActionBody) > .ActionPanelHeader{color:#6d28d9 !important;font-weight:800 !important;background:rgba(139,92,246,.06) !important;}.ETWMenuBody .ETWBys > .ActionPanel:not(.HideActionBody) > .ActionPanelHeader:after{border-color:#8b5cf6 !important;}.ETWMenuBody .ETWBys > .ActionPanel:not(.HideActionBody) > .ActionPanelHeader .ActionPanelCount{background:#6d28d9 !important;}/* by-field delete: was position:absolute bottom-right (platform) -> static so it flows inline + centers with the toggle */.ETWMenuBody .ByFieldsRight > .ByFieldsRightItem > .MicroButton{position:static !important;bottom:auto !important;right:auto !important;opacity:1 !important;order:-1 !important;align-self:center !important;margin:0 4px 0 0 !important;flex:0 0 auto !important;}/* by-field direction toggle: platform pins it top:0 (absolute) -> vertically center it in the row */.ETWMenuBody .ByFieldsRight > .ByFieldsRightItem{position:relative !important;}.ETWMenuBody .ByFieldsRight > .ByFieldsRightItem > .ToggleButton{top:50% !important;bottom:auto !important;transform:translateY(-50%) !important;}

				@media only screen and (max-width: 767px) {
				

/* META Mobile : .Base.Root */
html {
    padding: 0 !important;
    bottom: 0 !important;
}

body {
    padding: 0 !important;
    margin-top: 0;
    --fieldLabelPadding: 2px 2px;
}


/* META Mobile : .Base.Root.ResetElements */
body {
    font-size: var(--mobileTextSize);
}

.Panel:only-child,
.PageZone:only-child,
.DirectionVer:only-child,
.FieldSet:only-child
{
    min-height: initial;
}


/* META Mobile : .Base.Root.ScrollBars */
::-webkit-scrollbar-track, ::scrollbar-track {
    background-color: #F5F5F5;
    border-radius: 1em;
    }

    ::-webkit-scrollbar, ::scrollbar {
    width: 6px;
    height: 6px;
    background-color: #F5F5F5;
    border-radius: 1em;
    visibility: hidden;
    }

    ::-webkit-scrollbar-thumb, ::scrollbar-thumb {
    background-color: #D6CBCB;
    z-index: 1000;
    position: absolute;
    padding: 2px;
    border-radius: 1em;
    }


/* META Mobile : .Base.Root.Mobile */
.DirectionVer, .DirectionVertical {
    gap: var(--space2, 8px);
}

.Field.LabelPositionLeft {
    flex-direction: column !important;
}

.Field.LabelPositionLeft > .FieldValue {
    max-width: 100%;
}

.PanelHeader {
    min-height: 48px;
}

.Top .TopCenter {
    padding-left: 8px;
    padding-right: 8px;
}

.SingleItem > .ItemBody {
    flex-direction: column;
}

.Button, .NavButton, .MicroButton {
    min-height: 44px;
}


/* META Mobile : .Base.Root.NoAnimation */
.NoAnimation *,
.NoAnimation *:before,
.NoAnimation *:after
{
    -o-transition-property: none !important;
    -moz-transition-property: none !important;
    -ms-transition-property: none !important;
    -webkit-transition-property: none !important;
    transition-property: none !important;

    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;

    animation-play-state: paused !important;
}


/* META Mobile : .Base.Guide */
.GuideOverlay{width:100%;border-left:none}
body.GuideActive #MainContent{margin-right:0}


/* META Mobile : .Base.Layout.HeaderTitle */
.EntityTypeViewTitleBody {
    font-size: 100%;
}


/* META Mobile : .Base.Layout.Panel */
.Top.OldPanelHasActions > .TopCenter {
    margin-left: 4em;
    }



/* META Mobile : .Base.Layout.Panel.Search */
#SearchZone {
    display: block;
    width: 100% !important;
    }

    .SearchBody {
    min-height: 320px;
    }


/* META Mobile : .Base.Layout.Panel.SearchInput */
#SearchInput {
    width: 2em;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    }

    #SearchInput:active, #SearchInput:focus {
    width: 8em;
    max-width: 100%;
    }


/* META Mobile : .Base.Layout.Panel.AutoHide */
.AutoHideTopLeftHandle, .AutoHideTopRightHandle, .AutoHideBottomRightHandle, .AutoHideBottomLeftHandle {
    display: none !important;
    }


/* META Mobile : .Base.Layout.Panel.BiziconStart */
#ModuleImage {
    padding: 1px !important;
    }

    #ModuleTitle {
    padding: 1px !important;
    font-size: 18px;
    white-space: normal;
    }


/* META Mobile : .Base.Layout.Panel.AutoVertical */
.AutoVertical, .AutoVerticalR {
    width: auto !important;
    height: auto !important;
    }

    .AutoVertical.Hidden, .AutoVerticalR.Hidden {
    display: none !important;
    }
    .AutoVertical > *,
    .AutoVertical > .PanelBody > .PanelBody > .DirectionVertical,
    .AutoVertical > .PanelBody > .DirectionVertical {
    vertical-align: top !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    flex-direction: column !important;

    }

    .AutoVerticalR > * {
    vertical-align: top !important;
    width: auto !important;
    height: auto !important;
    display: -webkit-flex ;
    -webkit-flex-direction: column-reverse !important;
    display: flex !important;
    flex-direction: column-reverse !important;

    }

    .AutoVertical > .DirectionVertical > *,
    .AutoVertical > .PanelBody > .PanelBody > .DirectionVertical > *,
    .AutoVertical > .DirectionVer > * {
    width: auto !important;
    }

    .AutoVertical > .DirectionVertical > .Hidden,
    .AutoVertical > .DirectionVer > .Hidden {
    display: none !important;
    }

    .AutoVerticalR > .DirectionVertical > *,
    .AutoVerticalR > .DirectionVer > * {
    width: auto !important;
    }

    .AutoVerticalR > .DirectionVertical > .Hidden,
    .AutoVerticalR > .DirectionVer > .Hidden {
    display: none !important;
    }

    .AutoVertical > .PanelBody > .FieldSetBody > .DirectionVertical > *, .AutoVertical > .PanelBody > .FieldSetBody > .DirectionVer > * {
    display: block;
    width: auto !important;
    }

    .AutoVertical > .PanelBody > .FieldSetBody > .DirectionVertical, .AutoVertical > .PanelBody > .FieldSetBody > .DirectionVer {
    flex-direction: column;
    }

    .AutoVertical > .PanelBody > .FieldSetBody > .DirectionVertical > .Hidden, .AutoVertical > .PanelBody > .FieldSetBody > .DirectionVer > .Hidden {
    display: none !important;
    }

    .AutoVertical > .DirectionVertical > .Hidden, .AutoVertical > .DirectionVer > .Hidden {
    display: none !important;
    }

    .AutoVertical > .Hidden {
    display: none !important;
    }

    .AutoVertical > .DirectionVer > .Hidden {
    display: none !important;
    }

    .AutoVertical > .DirectionVer > * {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex: 1;
    flex-direction: column !important;
    }


/* META Mobile : .Base.Layout.Panel.PanelHeader */
.PanelHeader.Top > .TopCenter {
    display: flex;
    flex-direction: column;
}

.Panel > .PanelHeader {
    min-height: 1em;
}

.PanelHasHeader .ViewActions,
.PanelHasHeader .EntityTypeLists.ItemCount_0,
.PanelHasHeader .Actions
{
    opacity: 1.0 !important;
}

.OldPanelHeader.Top {
    display: grid;
    grid-auto-columns: 5em 1fr;
    grid-auto-rows: 1fr auto;
}

.OldPanelHeader.Top > .TopLeft {
    grid-row: 2/2;
    grid-column:1/1;
    width: auto;
    justify-content: flex-start;
}

.OldPanelHeader.Top > .TopRight {
    grid-row: 2/2;
    grid-column:2/2;
    width: auto;
    justify-content: flex-end;
    position: initial;
}

.OldPanelHeader.Top > .TopCenter {
    grid-row: 1/1;
    grid-column:1/3;
    margin: 0;
}

.OldPanelHeader.Top .ETSearch {
    top: 0;
    right: 0;
}



/* META Mobile : .Base.Layout.Panel.MainContent */
.MainContent > .Content
{
    padding: 0;
}


/* META Mobile : .Base.Layout.Panel.DirectionAccordion */
.DirectionAccordion > div.AccordionSelected > .PanelBody{
    position: relative;
    top: 0;
}


/* META Mobile : .Base.Layout.Panel.MaxWidth */
.Max320 {
    max-width: 100% !important;
}

.Max240 {
    max-width: 100% !important;
}

.MaxM {
    width: 100%;
    max-width: 100% !important;
    min-width:  100% !important;
    margin: 0 auto !important;
}

.MaxM2 {
    width: 50%;
}

.MaxM3 {
    width: 33%;
}


/* META Mobile : .Base.Layout.Panel.PageZone */
.PageZones {
    height: auto;
    }

    .PageZone {
    height: auto !important;
    }

    .PageZone_AutoLeft {
    width: auto !important;
    }

.PageZone_LeftNavs {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 2000;
    width: 260px !important;
    max-width: 80vw !important;
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 2px 0 16px rgba(0,0,0,0.18);
    background-color: var(--menuBackColor, #1a1a27);
}

.nav-open .PageZone_LeftNavs {
    transform: translateX(0);
}

.nav-open-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1999;
    -webkit-backdrop-filter: blur(2px);backdrop-filter: blur(2px);
}

.nav-open .nav-open-overlay {
    display: block;
}

.HamburgerBtn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--menuTextColor, #fff);
    border-radius: 8px;
    flex-shrink: 0;
    padding: 0;
    margin-right: 4px;
    -webkit-tap-highlight-color: transparent;
}

.HamburgerBtn:active {
    background-color: rgba(255,255,255,0.1);
}

.nav-open .HamburgerBtn {
    color: var(--textColor, #333);
}


/* META Mobile : .Base.Layout.Panel.TabPanel */
.TabPanel_Tab > .TabBody > .EntityTypeView.Selected > .EntityTypeViewBody > .Center > .PanelHeader.Top  {
    grid-auto-rows: 0 2.5em;
}


/* META Mobile : .Base.Layout.Panel.StartLogo */
.StartLogo {
    position: relative;
    white-space: nowrap !important;
}

.StartLogo img {
    max-height: 48px ;
    max-width: 128px;
    min-height: 32px;
}


/* META Mobile : .Base.Layout.Panel.Middle */
.Middle {
    position: relative !important;
    min-height: initial;
    top: 0 !important;
    }


/* META Mobile : .Base.Layout.Panel.Top */
.Top > .TopCenter
{
    align-items: center;
    justify-content: center;
}


/* META Mobile : .Base.Layout.Panel.Bottom */
.Center > .Bottom {
    position: relative !important;
    width: 100%;
    }


/* META Mobile : .Base.Layout.Panel.GlobalFilters */
.GlobalFiltersBody {
    white-space: nowrap !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    height: auto !important;
    }

    .GlobalFiltersBody > * {
    display: inline-block !important;
    }

    .GlobalFilters {
    margin: 0 !important;
    }


/* META Mobile : .Base.Layout.Panel.Login */
.LoginContent {
    padding: 0;
    margin: 0;
    }

    .LogOff {
    display: none !important;
    }


/* META Mobile : .Base.Layout.Panel.Login.LoginForm */
.LoginForm {
    margin-left: auto;
    margin-right: auto;
    padding: 1px;
    margin-top: 5%;
    }

    .LoginForm .StartLogo img {
    max-height: 64px !important;
    max-width: 256px !important;
    height: auto !important;
    }

    .UserProp_Language {
    margin: 0;
    }


/* META Mobile : .Base.Layout.Panel.Login.UserSettings */
.LoginContent .UserSettings {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    }


/* META Mobile : .Base.Layout.Panel.Login.Commands */
.Commands {
    text-align: center;
    padding: 1px;
    }


/* META Mobile : .Base.Layout.Panel.Navigation.NavigationHistory */
#NavigationHistory {
    display: none;
    }


/* META Mobile : .Base.Layout.Panel.Navigation.Nav360 */
.RootNav.Nav360 {
    height: 100% !important;
    }


/* META Mobile : .Base.Layout.Panel.Navigation.NavigationButtons */
.NavigationButtons {
    padding: 0 !important;
    max-height: unset;
    height: auto;
    gap: 0;
}

.NavigationButtons .NavTitle span {
    font-size: calc(var(--cellSize) / 5);
}

input.NavSearch
{
    top: 0;
}


/* META Mobile : .Base.Layout.Panel.Navigation.NavVer */
.NavVer .Nav {
    display: inline-block;
    padding: 0 !important;
    position: relative !important;
    opacity: 1.0 !important;
    bottom: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    }


/* META Mobile : .Base.Layout.Panel.Navigation.SubNav */
.SubNavs {
    gap: 0px;
}


/* META Mobile : .Base.Layout.Panel.Navigation.ParentNav */
#ParentNavs > .Nav:first-child {
    display: none;
    }


/* META Mobile : .Base.Layout.Panel.Navigation.RootNav */
.MenuType3.RootNav {
    justify-content: flex-start;
    }

    .RootNav.MenuType3 .Nav {
    padding: 4px !important;
    }

    .RootNav {
    white-space: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;

    }

    .RootNav .Nav .NavButton {
    padding: 4px;
    }.RootNav .Nav.Selected {
    font-weight: bold;
    position: relative !important;
    }

    .RootNav .NavTitle > span,
    .SubNav .NavTitle > span {
    margin: 0 !important;
    padding: 1px !important;
    min-width: 4em;
    text-align: center;
    vertical-align: middle;
    line-height: 1em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    }


/* META Mobile : .Base.Layout.Panel.Navigation.NavGroup */
.NavGroup
{
    min-width: 100%;
}

.NavigationNavs > .NavGroup {
    border-radius: 16px;
    border: var(--border1);
    background-color: var(--white);
    min-width: 100%;
}


/* META Mobile : .Base.Layout.Panel.Navigation.CurrentEntityNavigation */
.CurrentEntityNavigation
{
    padding: 1px;
}


/* META Mobile : .Base.Layout.Panel.ConnectionsGraph */
.ConnectionsGraph{min-height:280px}.ConnectionsGraph .cg-canvas{height:240px;flex:0 0 240px}.ConnectionsGraph .cg-toolbar{gap:6px;padding:6px 8px}


/* META Mobile : .Base.Layout.Panel.EntitySelector */
.EntitySelector > .Button
{
    max-width: 40vw;
    font-size: 80%;
    padding-left: 2em;
    padding-right: 2em;
    font-size: 0.75em;
    letter-spacing: 0;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.SelectionsMenu_EntitySelector .Solutions .Solution
{
    border-bottom: solid 1px #80808080;
    flex-direction: column;

}

.SelectionsMenu_EntitySelector .Solutions .Solution:last-child
{
    border-bottom: solid 0 #80808080;
}

/* --- SelectionsMenu_EntitySelector Mobile Responsive Width --- */
html body.Mobile .SelectionsMenu_EntitySelector,
body.Mobile .SelectionsMenu_EntitySelector,
.SelectionsMenu_EntitySelector
{
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    font-size: 100%;
}

.SelectionsMenu_EntitySelector .Solutions
{
    width: 100% !important;
    max-height: calc(100vh - 42px) !important;
    max-height: calc(100dvh - 42px) !important;
}

.EntitySelector > .Button .ImageSpan
{
    left: 8px;
}

.EntitySelector > .Button .ImageClass
{
    left: 8px;
}

.SelectionsMenu_EntitySelector .Solutions .Solution_Title
{
    padding: 1em;
    font-weight: bold;
}

.SelectionsMenu_EntitySelector .Solutions .Button
{
    font-size: 100%;
    padding: 4px;
    flex: auto !important;
    max-width: 50%;
}

.SelectionsMenu_EntitySelector .Solutions .Solution_Body
{
    gap: 4px;
}

.SelectionsMenu_EntitySelector .Solutions .Button .ButtonText
{

    font-size: 100%;
}

.SelectionsMenu_EntitySelector .SolutionGroup
{
    flex-direction: column;
}


/* META Mobile : .Base.ItemStyles.SingleItem */
.SingleItem {
    overflow: initial;
    }

.SingleItemTitle
{
    min-height: 1em;
}

.SingleItemType {
    justify-content: flex-start;
    align-items: flex-start;
    right: auto !important;
    transform: none !important;
    font-size: 75% !important;
    padding: 1px !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: auto;
}

    .SingleItem .Field.LabelPositionTop {
    border: solid 0.25em transparent;
    border-top: solid 0.125em transparent;
    border-bottom: solid 0.125em transparent;
    flex-direction: column;
    }


/* META Mobile : .Base.ItemStyles.SingleItem.ItemHeader */
/* 1) SingleItem: Üstten kesilmeyi önleyen ferah boşluk */
html body.Mobile .SingleItem,
body.Mobile .SingleItem,
.SingleItem {
    padding-top: 8px !important;
}

/* 2) SingleItemHeaderTitle: Asla kesilmez, kartın üstünde ortalanmış hap olarak durur */
html body.Mobile .SingleItem .SingleItemHeaderTitle,
html body.Mobile .SingleItem .FieldSet_m .SingleItemHeaderTitle,
body.Mobile .SingleItem .SingleItemHeaderTitle,
body.Mobile .SingleItem .FieldSet_m .SingleItemHeaderTitle,
.SingleItem .SingleItemHeaderTitle,
.SingleItem .FieldSet_m .SingleItemHeaderTitle {
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 2px auto 6px auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 3 !important;
    width: auto !important;
    text-align: center !important;
    transform: none !important;
}

html body.Mobile .SingleItem .SingleItemHeaderTitle > span,
body.Mobile .SingleItem .SingleItemHeaderTitle > span,
.SingleItem .SingleItemHeaderTitle > span {
    border-radius: 12px !important;
    padding: 2px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    box-sizing: border-box !important;
}

/* 3) ItemHeader / SingleItemHeader / Fields_Header: Ultra Kompakt kart düzeni */
html body.Mobile .SingleItem .SingleItemHeader,
html body.Mobile .Fields_Header.ItemHeader,
html body.Mobile .ItemHeader,
body.Mobile .SingleItem .SingleItemHeader,
body.Mobile .Fields_Header.ItemHeader,
body.Mobile .ItemHeader,
.SingleItem .SingleItemHeader,
.Fields_Header.ItemHeader,
.ItemHeader {
    padding: 4px 8px 6px 8px !important;
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 1px !important;
    box-sizing: border-box !important;
}

/* Yukarıdaki boş/gereksiz elementleri gizle */
html body.Mobile .ItemHeader .FieldSet_m > .FieldSet_l:first-child:not(:has(a:not(:empty))),
html body.Mobile .ItemHeader .FieldSet_l:has(.Field_UserType:not(:has(a:not(:empty)))),
html body.Mobile .ItemHeader .Field:has(a:empty:only-child),
html body.Mobile .ItemHeader .Field_UserType,
body.Mobile .ItemHeader .Field_UserType,
.ItemHeader .FieldSet_m > .FieldSet_l:first-child:not(:has(a:not(:empty))) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.Mobile .SingleItemHeader .Field,
html body.Mobile .Fields_Header .Field,
html body.Mobile .ItemHeader .Field,
body.Mobile .SingleItemHeader .Field,
body.Mobile .Fields_Header .Field,
body.Mobile .ItemHeader .Field,
.SingleItemHeader .Field,
.Fields_Header .Field,
.ItemHeader .Field {
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    height: auto !important;
    line-height: 1.2 !important;
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    --fieldPadding: 0 !important;
    --inputPadding: 0 !important;
}

html body.Mobile .ItemHeader .SingleItemHeaderName,
body.Mobile .ItemHeader .SingleItemHeaderName,
.ItemHeader .SingleItemHeaderName {
    margin: 0 0 1px 0 !important;
    padding: 0 !important;
}

html body.Mobile .ItemHeader .SingleItemHeaderName a,
html body.Mobile .Fields_Header .Field_Name a,
html body.Mobile .Fields_Header .Field_Person a,
body.Mobile .ItemHeader .SingleItemHeaderName a,
body.Mobile .Fields_Header .Field_Name a,
body.Mobile .Fields_Header .Field_Person a,
.ItemHeader .SingleItemHeaderName a,
.Fields_Header .Field_Name a,
.Fields_Header .Field_Person a {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

html body.Mobile .ItemHeader .Field_CorporateTitle,
html body.Mobile .ItemHeader .Field_Organization,
body.Mobile .ItemHeader .Field_CorporateTitle,
body.Mobile .ItemHeader .Field_Organization,
.ItemHeader .Field_CorporateTitle,
.ItemHeader .Field_Organization {
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body.Mobile .ItemHeader .FieldSet_cc,
html body.Mobile .ItemHeader .FieldSet_l,
html body.Mobile .ItemHeader .FieldSet_c,
body.Mobile .ItemHeader .FieldSet_cc,
body.Mobile .ItemHeader .FieldSet_l,
body.Mobile .ItemHeader .FieldSet_c,
.ItemHeader .FieldSet_cc,
.ItemHeader .FieldSet_l,
.ItemHeader .FieldSet_c {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body.Mobile .ItemHeader .Field_CellPhone,
html body.Mobile .ItemHeader .Field_email,
body.Mobile .ItemHeader .Field_CellPhone,
body.Mobile .ItemHeader .Field_email,
.ItemHeader .Field_CellPhone,
.ItemHeader .Field_email {
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ItemHeader .icon-Check {
    display: none;
}

.ItemHeader .icon-Check {
    display: none;
}

.ItemHeader .icon-Cancel {
    display: none;
}

    .ItemPreviewButton {
    display: none !important;
    }

    .SaveButton {
    display: none !important;
    }


/* META Mobile : .Base.ItemStyles.SingleItem.ItemFooter */
.ItemFooter {
    white-space: nowrap;
    padding: 1px;
    height: 28px;
    line-height: 26px;
    vertical-align: bottom;
    position: relative;
    font-size: 10px;
    text-align: center;
    display: none;
    }


/* META Mobile : .Base.ItemStyles.SingleItem.ItemSubmit */
.ItemSubmit a {
    border-left: var(--border1);
    flex: 1;
    max-width: 100%;
}

.ItemSubmit  {
    opacity: 1.0;
}


/* META Mobile : .Base.ItemStyles.SingleItem.ItemActions */
.ItemActions {
    display: flex;
    border-right: var(--border1);
    flex: 1;
    flex-wrap: nowrap;
}

.ItemActions select {
    max-width: 20em;
}

.ItemHeader .ItemActions
{
    min-width: 10rem;
    max-width: 100%;
}


/* META Mobile : .Base.ItemStyles.SingleItem.ItemBody */
.ItemBody
{
    padding-top: 0;
    padding-bottom: 0;
}


/* META Mobile : .Base.ItemStyles.SingleItem.Fields */
.ItemBody > .Fields {
    position: relative;
    padding: 0;
    gap: var(--gap);
    overflow: auto;
}


/* META Mobile : .Base.ItemStyles.SingleItem.SubItems */
.SingleItem  .SubItemButtons
{
    top: 0;
    padding-top: 20rem;
    bottom: 0;
    height: 100%;

}

.SingleItem.HasSubItems {
    --fieldPadding: 8px 8px;
}

.SingleItem  .SubItemButtons > *
{
    position: sticky;
    top: 0;
}


/* META Mobile : .Base.ItemStyles.SingleItem.ItemStates */
.StateTitle > div {
    height: 1.5em;
    font-weight: bold;
}

.ItemStates {
    display: flex;
    flex-wrap: wrap;
    border: 0;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    background-color: var(--backColor);
}

.ItemStates > div {
    display: flex !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: space-evenly;
    align-content: center;
    flex-grow: 1;
    flex-wrap: wrap;
}

.ItemStates .Transition {
    margin: 0 !important;
    border: 0;
    border-radius: 0;
}


/* META Mobile : .Base.ItemStyles.SingleItem.ItemStates.Transition */
.Transition
{
    box-shadow: 0 0 5px silver;
    margin: 8px !important;
    border-radius: 8px;
}


/* META Mobile : .Base.ItemStyles.SingleItem.ItemStates.Transactions */
.Transactions
{
    background-color: var(--backColor);
}

.Transactions > div
{
    flex: 1;
}


/* META Mobile : .Base.ItemStyles.SingleItem.Field.MinMax */
.MinMax.FieldValue {
    white-space: normal;
    padding: 0 !important;
    margin: 0 !important;
    }

    .MinMax.FieldValue > a {
    padding: 0 !important;
    margin: 0 !important;
    }

    .MinMax.FieldValue > input {
    margin: 0;
    }


/* META Mobile : .Base.ItemStyles.SingleItem.Field.FieldRichText */
.FieldRichText .FieldValue {
    height: auto !important;
    display: block !important;
    }


/* META Mobile : .Base.ItemStyles.SingleItem.Field.Choice */
.FieldValue.Choices {
    text-align: center;
    white-space: normal;
    }


/* META Mobile : .Base.ItemStyles.SingleItem.Field.FieldLabel */
.FieldLabel {
    min-width: 25% !important;
    max-width: 100% !important;

}

.Field.LabelPositionLeft > .FieldLabel
{
    width: auto !important;
    min-width: var(--fieldLabelWidth) !important;
    max-width: var(--fieldLabelWidth) !important;
}

.AutoVertical > .DirectionVer > .Field > .FieldLabel
{
    width: auto !important;
    min-width: 25% !important;
    max-width: 100% !important;
}


/* META Mobile : .Base.ItemStyles.SingleItem.Field.FieldValue */
.FieldValue {
    width: auto;
    }

    .FieldValue > .ItemSelection {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    }

    .FieldValue > input {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    }

    .FieldValue > .InputSpan {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: flex-start;
    }

/* 2026-09-02 (ajan D, backlog L17822) — MOBILDE ETIKET GENISLIGI REZERVI YANLIS:
   Bu blok MobileCSSText'tir (CssKey=201) ve ayni @media(max-width:767px) icinde
   `.Field.LabelPositionLeft { flex-direction: column !important }` (CssKey=15) etiketi
   degerin USTUNE alir; yani etiket artik SOLDA DEGILKEN deger kutusundan 8em (98px)
   dusulmeye devam ediyordu. OLCULDU (390px, ItemView 2 sutun): .Field 124px ->
   .FieldValue 26px -> .InputSpan 24px -> .Suffix clientWidth 24 / scrollWidth 27
   ('Adet' -> 'Ade'). Eski deger `calc(100% - var(--fieldLabelWidth))` yerine 100%:
   FieldValue 124px, Suffix 27/27, fixture'da kirpik 0 (enjeksiyonla RED->GREEN).
   Liste (td) duzeltmesi 70-list.css:1605 bu sinifi kapsamiyordu; kok o secici degil,
   bu rezervdi. `!important` korunuyor: rakip CssKey=15 `max-width:100%` zaten ayni
   degeri soyluyor, sirasi degismesin diye. Masaustu (row) davranisi DEGISMEZ —
   bu kural yalniz mobil blokta yasar. */
.Field.LabelPositionLeft > .FieldValue
{
    max-width: 100% !important;
}

.Field.FieldRichText.LabelPositionLeft > .FieldValue
{
    max-width: 100% !important;
}

.Field.FieldRichText.LabelPositionLeft
{
    flex-direction: column !important;
}

.Field50 .FieldLabel {
    width: 50%;
}

.Field50 .FieldValue {
    width: 50%;
}


/* META Mobile : .Base.ItemStyles.SingleItem.Field.LabelPositionTop */
.Field.LabelPositionTop .FieldValue {
    justify-content: center;
}

.Field.LabelPositionTop .FieldValue > .InputSpan {
    justify-content: center !important;
}


/* META Mobile : .Base.ItemStyles.SingleItem.ItemBottom */
.ItemBottom {
    border-top: solid 1px rgba(127, 127, 127, 0.2);
}

.ItemBottom > .Left {
    flex: 1;
}
.ItemBottom > .Right {
    flex: 1;
}


/* META Mobile : .Base.Views.View.ActionPanel */
.BrowseFilterPanel {
    position: relative;
    overflow: auto;
    max-width: 100%;
    }


/* META Mobile : .Base.Views.View.PageByField */
.PageByField > * {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    font-size: 90%;
    color: #607D8B;
}

.PageByField
{
    flex-direction: column;
}


/* META Mobile : .Base.Views.View.GroupBy */
.FolderGroupBody, .FolderGroupBy, .GroupByBody {
    height: auto;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    }

    .ViewBody > .GroupByTabHeader {
    white-space: nowrap;
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    }.GroupByTabHeader > div > div {
    padding: 4px;
    max-width: 9em;
    white-space: normal;
    }


/* META Mobile : .Base.Views.View.Actions */
.EntityTypeViewBody > .Center > .Top > .TopLeft .Actions a {
    border-radius: 3px !important;
    opacity: 1.0;
    font-size: 1em;
    padding: 1rem;
}

.Actions > a > span {
    margin: 0;
    padding: 0;
    max-width: 3em;
    line-height: 1em;
    text-align: center;
    vertical-align: middle;
}

.Actions > a > span.ButtonText {
    display: none;
}


/* META Mobile : .Base.Views.View.NoRecordsFound */
.NoRecordsFound {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    min-height: initial;
    }


/* META Mobile : .Base.Views.View.EntityTypeView */
.Old .EntityTypeViewBody > .Center > .Top > .TopLeft {
    left: 0.5em;
    right: auto;
    top: 0.5em;
    }

.EntityTypeViewBody{

    min-height: fit-content;
}
.EntityTypeView.NoItems .EntityTypeViewBody:has( .DoScriptButton ){
min-height: fit-content;
}

.DisableOverflow > .EntityTypeViewBody,
.DisableOverflow.EntityTypeViewBody
{
min-height: initial;
}.EntityTypeViewBody {
    position: relative !important;
    -webkit-overflow-scrolling: touch;
    }

    .EntityTypeViewBody > .Left {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: 0 !important;
    }

    .EntityTypeViewBody > .Right {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: 0 !important;
    text-align: center;
    }

    .EntityTypeViewBody > .Center {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: 0 !important;
    }

    .Content > .EntityTypeView {
    border: 0 !important;
    }

    .Content > .Panel > .EntityTypeView {
    border: 0 !important;
    }


/* META Mobile : .Base.Views.View.ETWBody */
.ETWBody {
    position: relative !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    }

.ViewBody_Calendar.ETWBody {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
}


/* META Mobile : .Base.Views.View.ETWBody_VeryBig */
.ETWBody.MinimizeTop.OpenItemSize_VeryBig {
    margin: 0;
    }

.ETWTop.Activate.OpenItemSize_VeryBig {
    position: relative;
    }


/* META Mobile : .Base.Views.View.ETWBody_Big */
.ETWBody.MinimizeLeft.OpenItemSize_Big {
    width: 160px !important;
    margin-left: -160px !important;
    }


/* META Mobile : .Base.Views.EntityTypeLists */
.EntityTypeLists select {
    max-width: 10em;
    }

    .EntityTypeLists {
    line-height: 1em;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    font-size: 80%;
    margin: 1px;
    }


/* META Mobile : .Base.Views.ViewType */
.ViewBody {
    min-height: 5em;
}


/* META Mobile : .Base.Views.ViewType.Calendar */
.ViewBody_Calendar > .Header {
    white-space: normal;
    }

    .ViewBody_Calendar > .Header > * {
    display: block;
    width: auto !important;
    text-align: center !important;
    }



/* META Mobile : .Base.Views.ViewType.Day */
.DayNames  .DayOfMonth {
    position: relative;
    width: 100%;
}

.DayNames  .DayOfWeekName {
    font-size: 80%;
}

.DayNames > td
{
    height: auto !important;
}


/* META Mobile : .Base.Views.ViewType.ViewBody_Folder */
.ViewBody_Folder {
    padding: 1px !important;
    position: relative !important;
    height: auto !important;
    }


/* META Mobile : .Base.Views.ViewType.ViewBody_Folder.Folder */
.FolderItemText {
    width: 320px;
}

.FolderItem
{
margin: 2px;
padding: 0;
}


/* META Mobile : .Base.Views.ViewType.ViewBody_Folder.OneByOne */
.OneByOneCenter > .Middle {
    top: 0 !important;
    }

    .OneByOnePanelBody {
    position: relative !important;
    height: auto !important;
    left: 0 !important;
    right: 0 !important;
    }

    .OneByOnePanel > .MicroButton {
    display: none;
    }

    .OneByOnePanel {
    position: relative !important;
    height: auto !important;
    }

    .OneByOnePanelBody > div {
    margin: 1px !important;
    }

    .OneByOne_NextButton {
    right: 5px !important;
    }

    .OneByOne_PrevButton {
    left: 5px !important;
    }


/* META Mobile : .Base.Views.ViewType.PivotTable */
.PivotTable .PivotLeft
{
    text-align: left;
    min-width: 30%;
    max-width: 30%;
}



/* META Mobile : .Base.Views.ViewType.PivotTable.PivotTable */
.PivotTable td.PivotLeft,
.PivotTable td.PivotRight
{
    max-width: 33%;
}

.PivotTable {
    font-size: 75%;
}



/* META Mobile : .Base.Views.ViewType.FirstLetters */
.FirstLetters {
    position: fixed;
    top: auto;
    bottom: 15vh;
    right: 0;
    transform: translateY(0%);
    z-index: 9999;
}


/* META Mobile : .Base.Views.ViewType.Kanban */
.ViewBody {
    min-height: 5em;
}



/* META Mobile : .Base.Views.ViewType.Timeline */
.ViewBody {
    min-height: 5em;
}



/* META Mobile : .Base.Views.ViewType.Spreadsheet */
.ViewBody {
    min-height: 5em;
}


/* META Mobile : .Base.Views.ViewType.Calendar */
.ViewBody {
    min-height: 5em;
}



/* META Mobile : .Base.Views.Parameters */
.Parameters {
    position: relative;
    top: 0 !important;
    bottom: 0 !important;
    width: 100%;
    }

    .Parameters2 {
    position: relative;
    }


/* META Mobile : .Base.Views.EntityTypeViewTitle */
.EntityTypeViewTitle
{
    position: relative;
    transform: none;
    left: 0;
    margin: 0 auto;
    padding: 8px;
}

.EntityTypeViewTitleBody
{
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

.Top > .TopCenter:before
{
    content: "";
    color: transparent;
    height: 0;
    line-height: 0;
}

/* TitleLeft on mobile: same 3-zone symmetric flex, tighter paddings. min-width:0
   + ellipsis (from core) keep the left title within its flex share; the centered
   pill caps so it never crowds the side zones on narrow screens. */
.PanelHeader.TitleLeft > .TopLeft { padding-left: 6px; gap: 6px; }
.PanelHeader.TitleLeft > .TopRight { padding-right: 6px; }
.PanelHeader.TitleLeft > .TopCenter { max-width: 60%; }
.PanelHeader.TitleLeft > .TopLeft .EntityTypeViewTitle {
    margin: 0;
    padding: 4px 0;
}


/* META Mobile : .UIComponents.UIElements.TabBody */
.TabBody > div.Selected
{
    padding: 0 !important;
}


/* META Mobile : .UIComponents.Specialized.NumericKeyPad */
table.NumericKeyPad td {
    padding: 1px 8px !important;
    }


/* META Mobile : .UIComponents.Specialized.Menu_Arrow_Down */
.EntityTypeLists.Menu_Arrow_Down {
    border: 0;
    background-color: transparent;
    right: 0;
    top: -8px;
}


/* META Mobile : .UIComponents.Specialized.Confirm */
.ConfirmWindow {
    position: absolute;
    left: 10%;
    right: 10%;
    width: auto;
    }


/* META Mobile : .UIComponents.Specialized.QuestionMark */
.QuestionMark:hover {
    opacity: 1.0;
}
.QuestionMark:hover::before {
    content: attr(title);
    position: relative;
    left: auto;
    right: auto;
    z-index: 99999;
    font-size: 1.25em;
    text-align: center;
    background-color: #ffca28ed;
    padding: 0.6em;
    margin-top: -2em;
    width: auto;
    border-radius: 0.3rem;
    max-width: 80vw;
    margin-left: 2em;
}

.QuestionMark::after {
    content: "?" !important;
    display: inline-block;
    width: 0.9em;
    text-align: center;
    padding: 2px;
    position: absolute;
    left: 1.3em;
    top: 1.3em;
    color: #ff6f00;
}


/* META Mobile : .UIComponents.Specialized.FullScreen */
.DisplayFullScreenToggle {
    display: none;
    }


/* META Mobile : .UIComponents.SupportsTouch */
.SupportsTouch .ListBody td {
    padding: 10px 6px !important;
    min-height: 44px;
}

.SupportsTouch .NavButton {
    min-height: 44px;
}

.SupportsTouch .Actions a {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.SupportsTouch .TabHeader > span, .SupportsTouch .TabHeader > a {
    min-height: 44px;
    display: flex;
    align-items: center;
}

.SupportsTouch input[type="text"], .SupportsTouch input[type="number"], .SupportsTouch select, .SupportsTouch textarea {
    min-height: 40px;
    font-size: 16px !important;
}


/* META Mobile : .UIComponents.SupportsTouch.TouchBottom */
.TouchBottom .RootNav {
    padding: 0;
    display: flex !important;
    white-space: nowrap;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-start;
    align-content: center;
    }


/* META Mobile : .UIComponents.Button.MicroButton */
.MicroView .MicroButton {
    display: none;
    }


/* META Mobile : .NotificationPanel */
.Notifications_Panel{width:100vw;right:-100vw}



/* META Mobile : .SidePanel */
.SidePanel{width:100%;border-left:none}


/* META Mobile : .AiChat */
.AiChat--floating .AiChat-panel{width:calc(100vw - 32px);height:calc(100vh - 120px);height:calc(100dvh - 120px);bottom:68px;right:-8px}.AiChat-bubble{width:48px;height:48px}.AiChat--sidebar .AiChat-panel{width:100vw}.AiChat--fullpage .AiChat-history{width:100%;position:absolute;z-index:1;height:100%}.AiChat-msg{max-width:92%}.AiChat-input-actions .video-btn{display:none}.AiChat-file-thumb{width:52px;height:52px}.AiChat-file-card{max-width:140px}


/* META Mobile : .CommandPalette */
@media(max-width:640px){.cmd-palette-backdrop{padding-top:0;align-items:flex-start}.cmd-palette{max-width:100%;border-radius:0 0 12px 12px}.cmd-palette-results{max-height:60vh}}


/* META Mobile : .KeyboardShortcutsOverlay */
.ks-overlay-backdrop{align-items:flex-end}.ks-overlay{max-width:100%;border-radius:12px 12px 0 0;max-height:90vh;position:fixed;bottom:0;left:0;right:0}.ks-overlay-grid{grid-template-columns:1fr 1fr}


/* META Mobile : .TourOverlay */
.TourTooltip{width:calc(100vw - 32px);max-width:none}


/* META Mobile : .ContextualTooltip */
.js-tooltip{max-width:calc(100vw - 32px)}

/* 2026-08-06 WCAG 2.2 AA (SC 2.5.8 Target Size Minimum) — kolon sıralama okları.
   ÖLÇÜLDÜ (onebox, 375x812, gövde Mobile): `.MicroButton.OrderBy` 22x44 — genişlik
   eşiğin 2px altında. Üstelik `opacity:.3` ve mobilde hover YOK, yani dokunulacak
   şey hem dar hem neredeyse görünmez. Gizlemek ÇÖZÜM DEĞİL: kolon başlığı hücresinin
   kendisi tıklanabilir değil (onclick yok) — sıralamanın TEK yolu bu düğme.
   ⚠️ Sayfadaki 485 "AA ihlali"nin 476'sı SAHTEYDİ: onlar liste hücrelerindeki 16px
   metin bağlantıları ve hepsi tıklanabilir satırın (39-63px) içinde — gerçek dokunma
   hedefi satır. Gerçek ihlal 9'du; bu kural 8'ini kapatır. */
body.Mobile .EntityTypeView.View_List  .ListFieldTitles td .MicroButton.OrderBy,
body.Mobile .EntityTypeView.View_Tree   .ListFieldTitles td .MicroButton.OrderBy,
body.Mobile .EntityTypeView.View_Tree2  .ListFieldTitles td .MicroButton.OrderBy {
    min-width: 24px !important;
    width: 24px !important;
    opacity: .6 !important;
}

				}

				@media only screen and (min-width: 768px) and (max-width: 1024px) {
				

/* META Tablet : .Base.Layout.Panel.PanelHeader */
.PanelHasHeader .ViewActions,
.PanelHasHeader .EntityTypeLists.ItemCount_0,
.PanelHasHeader .Actions
{
    opacity: 1.0;
}



/* META Tablet : .Base.Layout.Panel.PageZone */
.PageZones {
    height: auto;
}

.PageZone {
    height: auto !important;
}


/* META Tablet : .Base.Layout.Panel.Middle */
.Middle {
    position: relative !important;
    min-height: initial;
    top: 0 !important;
    }


/* META Tablet : .Base.Views.View.Actions */
.EntityTypeViewBody > .Center > .Top > .TopLeft .Actions a {
    min-height: 36px;
    padding: 0.6rem 0.8rem;
}


/* META Tablet : .Base.Views.View.ETWBody */
.ETWBody {

    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}


/* META Tablet : .Base.Views.BrowseFilterPanel */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}
.PageZone_LeftNavs, nav[role="navigation"] {
    width: 200px;
    min-width: 200px;
}
.MainContent {
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
}
.KanbanContainer {
    overflow-x: auto;
}
.ListBody {
    overflow-x: auto;
}
table {
    max-width: 100%;
}

				}

				@media only screen and (min-width: 1025px) {
				

/* META Desktop : .UIComponents.Specialized.Animations.Animation */
.SelectionsMenu,
.Modal,
.Dialog,
.Popup,
.Toast {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.SelectionsMenu {
    opacity: 0;
    transform: translateY(-10px);
    animation: menuSlideIn 0.2s ease forwards;
}


/* META Desktop : .UIComponents.Specialized.Animations.SelectionsMenu */
.SelectionsMenu.MenuAbove {

    animation: menuSlideUp 0.2s ease forwards;
}

.SelectionsMenu.MenuBelow {

    animation: menuSlideDown 0.2s ease forwards;
}

				}

			
/* zz-3d-viewer.css — 361 WebUI 3D CAD görüntüleyici
 * 2026-09-15 kalite turu: görünümün TEK BOĞAZI bu dosyadır — field-3d.js üst şerit, rıhtım ve menülere satır içi stil yazmaz.
 * Ölçülen kusurlar (.claude/reports/cad3d-kalite-2026-09-15/olcum):
 *   · tam ekran düğmesi metinle büyüyordu (86×43) ve mobilde kabın DIŞINA taşıyordu (x=653, kap 374)
 *   · rıhtım 849 px'te 2 satıra sarılıyordu; tuval kabın 442/520 px'ini kaplıyordu
 *   · çekmeceler rıhtımı örtüyordu (20 araca erişim kesildi); HUD ikincil metni 3.84:1
 */

.Cad3DViewerContainer {
    position: relative;
    width: 100%;
    min-height: 520px;
    background: radial-gradient(circle at 50% 30%, #0f172a 0%, #080d1a 65%, #020617 100%) !important;
    border-radius: 12px;
    border: 1px solid rgba(56, 189, 248, 0.3);
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.7), 0 12px 36px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    user-select: none;
    touch-action: none;
    color: #e2e8f0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Alan değeri kabından nowrap miras geliyordu: çekmece metinleri satır kırmadan sağdan kesiliyordu (karede ölçüldü). */
    white-space: normal;
    text-align: left;
    container-type: inline-size;
    container-name: cad3d;
    --cad3d-dock-h: 46px;
}

/* Tuval kabın TAMAMINI kaplar (height:100% min-height'lı kapta çözülmüyor, 442/520 px kalıyordu). */
.Cad3DCanvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.Cad3DField {
    width: 100% !important;
    flex: 1 1 100% !important;
}

.Cad3DViewerContainer.is-fullscreen-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    z-index: 999999 !important;
    box-shadow: none !important;
}

body.cad3d-fullscreen-active {
    overflow: hidden !important;
}

/* ── Ortak ikon düğmesi (üst şerit, rıhtım, menüler) ─────────────────────────── */
.Cad3DViewerContainer .Cad3DIconBtn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto !important;
    min-width: 36px;
    width: auto;
    height: 36px !important;
    margin: 0;
    padding: 0 9px !important;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #e2e8f0;
    font: 600 12.5px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    position: relative;
}

.Cad3DViewerContainer .Cad3DIconBtn:hover {
    background: rgba(56, 189, 248, 0.16);
    color: #bae6fd;
}

.Cad3DViewerContainer .Cad3DIconBtn.active {
    background: rgba(56, 189, 248, 0.24);
    border-color: rgba(125, 211, 252, 0.7);
    color: #e0f2fe;
}

.Cad3DViewerContainer .Cad3DIconBtn:focus-visible,
.Cad3DViewerContainer .Cad3DCatBtn:focus-visible,
.Cad3DPatlatma input[type="range"]:focus-visible,
.Cad3DStats:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

.Cad3DIkon {
    display: block;
    flex: 0 0 auto;
}

/* ── Üst şerit: kimlik · durum · tam ekran ───────────────────────────────── */
.Cad3DTopBar {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    pointer-events: none;
    z-index: 16;
    min-width: 0;
}

.Cad3DTopBar > * {
    pointer-events: auto;
}

.Cad3DTelemetryBadge {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 38%;
    height: 36px;
    box-sizing: border-box;
    padding: 0 12px;
    background: rgba(15, 23, 42, 0.92) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    border-radius: 8px;
    color: #f8fafc;
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.Cad3DDurumNokta {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

.Cad3DBadgeMetin {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* HUD kısalır, tam ekran düğmesini ASLA dışarı itmez (eski hâli: nowrap + flex-shrink:0, 468 px). */
.Cad3DStats {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    box-sizing: border-box;
    padding: 0 12px;
    line-height: 34px;
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 11.5px;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.Cad3DStats.Cad3DStatsAcik {
    height: auto;
    padding: 8px 12px;
    line-height: 1.5;
    white-space: normal;
}

.Cad3DStats a {
    color: #cbd5e1;
}

/* Yardım (?) ve tam ekran: yalnız ikon, genişlik = düğme; hover'da büyüme yok. */
.Cad3DViewerContainer .Cad3DTopBar .Cad3DFullscreenIndicator,
.Cad3DViewerContainer .Cad3DTopBar .Cad3DYardimBtn {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px;
    padding: 0 !important;
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transform: none !important;
}

.Cad3DViewerContainer .Cad3DTopBar .Cad3DYardimBtn {
    margin-left: auto;
}

.Cad3DViewerContainer .Cad3DTopBar .Cad3DFullscreenIndicator:hover,
.Cad3DViewerContainer .Cad3DTopBar .Cad3DYardimBtn:hover,
.Cad3DViewerContainer .Cad3DTopBar .Cad3DYardimBtn.active {
    background: #0369a1;
    border-color: #38bdf8;
    color: #ffffff;
}

/* ── Rıhtım ───────────────────────────────────────────────────────────── */
.Cad3DToolBar {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 15;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: max-content;
    max-width: calc(100% - 24px);
    box-sizing: border-box;
    padding: 4px 6px;
    background: rgba(15, 23, 42, 0.94) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.Cad3DSep {
    flex: 0 0 1px;
    width: 1px;
    height: 22px;
    margin: 0 4px;
    background: rgba(148, 163, 184, 0.35);
}

.Cad3DPatlatma {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    height: 36px;
    margin: 0;
    padding: 0 8px;
    color: #e2e8f0;
    cursor: pointer;
}

.Cad3DPatlatma input[type="range"] {
    width: 88px !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    accent-color: #38bdf8;
    cursor: pointer;
}

.Cad3DEksen {
    display: inline-block;
    min-width: 16px;
    padding: 2px 4px;
    box-sizing: border-box;
    border-radius: 4px;
    background: #0369a1;
    color: #ffffff;
    font: 700 11px/1.1 system-ui, -apple-system, "Segoe UI", sans-serif;
    text-align: center;
}

.Cad3DViewerContainer .Cad3DCatBtn {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto !important;
    height: 36px !important;
    margin: 0;
    padding: 0 8px 0 10px !important;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #f1f5f9;
    font: 600 12.5px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.Cad3DCatBtn .Cad3DOk {
    width: 14px;
    height: 14px;
    opacity: 0.8;
}

.Cad3DViewerContainer .Cad3DCatBtn:hover,
.Cad3DViewerContainer .Cad3DCatBtn.open {
    background: rgba(56, 189, 248, 0.18);
    border-color: rgba(125, 211, 252, 0.6);
    color: #e0f2fe;
}

.Cad3DCatBtn.open .Cad3DOk {
    transform: rotate(180deg);
}

/* Menüdeki bir araç açıksa kategori düğmesinde yeşil nokta — kapalı menüde de durum görünür. */
.Cad3DCatBtn.Cad3DKatEtkin::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 2px #0f172a;
}

.Cad3DBtnMetin {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Kategori menüleri — rıhtımın ÜSTÜNDE açılır (rıhtım sarılsa da) ─────────── */
.Cad3DFlyoutMenu {
    position: absolute;
    left: 50%;
    bottom: calc(var(--cad3d-dock-h, 46px) + 20px);
    transform: translateX(-50%);
    z-index: 30;
    width: min(600px, calc(100% - 24px));
    max-height: calc(100% - var(--cad3d-dock-h, 46px) - 84px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 8px;
    background: rgba(15, 23, 42, 0.97) !important;
    border: 1px solid rgba(56, 189, 248, 0.45) !important;
    border-radius: 12px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: #f8fafc;
    animation: cad3dFlyoutFadeIn 0.15s ease-out;
}

@keyframes cad3dFlyoutFadeIn {
    from { opacity: 0; transform: translate(-50%, 6px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.Cad3DFlyoutBaslik {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding: 0 0 6px 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    color: #bae6fd;
    font-size: 13px;
    font-weight: 700;
}

.Cad3DFlyoutSayi {
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.18);
    color: #e0f2fe;
    font-size: 11px;
    font-weight: 600;
}

.Cad3DViewerContainer .Cad3DFlyoutBaslik .Cad3DKapatBtn {
    margin-left: auto;
    color: #cbd5e1;
}

/* Kategori tek cümle açıklaması + rozet sözlüğüne bağlantı (mikro yardım). */
.Cad3DFlyoutAciklama {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    margin: 0 0 8px;
    padding: 0 6px;
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.45;
}

.Cad3DViewerContainer .Cad3DMetinBag {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: #7dd3fc;
    font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.Cad3DViewerContainer .Cad3DMetinBag:hover {
    color: #e0f2fe;
}

.Cad3DFlyoutGovde {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 6px;
}

/* Menü öğesi: ikon · (ad + durum rozeti) · tek satırlık iş. Dokunmatikte title görünmediği için metin görünür. */
.Cad3DViewerContainer .Cad3DFlyoutMenu .Cad3DMetinliBtn {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    height: auto !important;
    min-height: 58px;
    padding: 9px 10px !important;
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(148, 163, 184, 0.2);
    color: #e2e8f0;
    white-space: normal;
    text-align: left;
}

.Cad3DFlyoutMenu .Cad3DMetinliBtn > .Cad3DIkon {
    margin-top: 1px;
    color: #7dd3fc;
}

.Cad3DBtnGovde {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

.Cad3DBtnUst {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.Cad3DFlyoutMenu .Cad3DBtnMetin {
    overflow: visible;
    font-weight: 700;
    line-height: 1.25;
}

.Cad3DBtnAlt {
    color: #b4c0d0;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
}

/* Durum rozetleri — koyu zeminde metin kontrastı ≥ 4.5 (açık tonlu metin, düşük doygun zemin). */
.Cad3DRozet {
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 7px;
    box-sizing: border-box;
    border: 1px solid;
    border-radius: 10px;
    font: 700 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    white-space: nowrap;
}

.Cad3DRozet_canli { color: #6ee7b7; background: rgba(16, 185, 129, 0.14); border-color: rgba(52, 211, 153, 0.45); }
.Cad3DRozet_kayit { color: #93c5fd; background: rgba(59, 130, 246, 0.16); border-color: rgba(147, 197, 253, 0.45); }
.Cad3DRozet_temsili { color: #fcd34d; background: rgba(245, 158, 11, 0.14); border-color: rgba(252, 211, 77, 0.45); }
.Cad3DRozet_veri { color: #cbd5e1; background: rgba(148, 163, 184, 0.12); border-color: rgba(203, 213, 225, 0.45); border-style: dashed; }

.Cad3DViewerContainer .Cad3DFlyoutMenu .Cad3DMetinliBtn:hover {
    background: rgba(56, 189, 248, 0.18);
    border-color: #38bdf8;
    color: #e0f2fe;
}

.Cad3DViewerContainer .Cad3DFlyoutMenu .Cad3DMetinliBtn.active {
    background: rgba(16, 185, 129, 0.2);
    border-color: #34d399;
    color: #d1fae5;
}

/* ── Yan çekmeceler — üst şeridin altından rıhtımın üstüne kadar (asla örtmez) ──── */
.Cad3DViewerContainer > [class*="Drawer"] {
    top: 58px !important;
    max-height: calc(100% - 58px - var(--cad3d-dock-h, 46px) - 24px) !important;
    max-width: calc(100% - 24px) !important;
    overflow-y: auto !important;
    box-sizing: border-box;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    z-index: 25 !important;
}

/* Tolerans Yığını sınır girdileri (2026-09-15, sondada ölçüldü): satır içi #f8fafc genel bir girdi kuralınca ezilip
   rgb(0,0,0) hesaplanıyordu — koyu zeminde girilen 894 / 896 okunmuyordu. Kapsam yalnız bu iki girdi. */
.Cad3DViewerContainer .Cad3DToleranceStackDrawer input.tolAlt,
.Cad3DViewerContainer .Cad3DToleranceStackDrawer input.tolUst {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    background: #0f172a !important;
    caret-color: #f8fafc;
}
/* Topoloji çekmecesi seçicileri (2026-09-15, karede ölçüldü): aynı genel form kuralı satır içi açık metin rengini eziyordu —
   koyu zeminde katı / çözünürlük / yüz seçimleri okunmuyordu. Kapsam yalnız topoloji çekmecesinin select öğeleri. */
.Cad3DViewerContainer .Cad3DTopologyDrawer select {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    background: #0f172a !important;
}
.Cad3DViewerContainer .Cad3DTopologyDrawer select option {
    color: #f8fafc;
    background: #0f172a;
}
/* CMM sapma çekmecesi (2026-09-15): tarama seçici ve tolerans girdisi aynı genel form kuralına karşı korunur. */
.Cad3DViewerContainer .Cad3DCmmDrawer select,
.Cad3DViewerContainer .Cad3DCmmDrawer input.cmmTol {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    background: #0f172a !important;
    caret-color: #f8fafc;
}
.Cad3DViewerContainer .Cad3DCmmDrawer select option {
    color: #f8fafc;
    background: #0f172a;
}
/* Tersine mühendislik çekmecesi seçicileri (2026-09-16): aynı genel form kuralına karşı. */
.Cad3DViewerContainer .Cad3DReverseEngDrawer select {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    background: #0f172a !important;
}
.Cad3DViewerContainer .Cad3DReverseEngDrawer select option {
    color: #f8fafc;
    background: #0f172a;
}
/* Kinematik ve modal çekmece seçicileri (2026-09-16): genel form kuralına karşı. */
.Cad3DViewerContainer .Cad3DKinematikDrawer select,
.Cad3DViewerContainer .Cad3DModalDrawer select,
.Cad3DViewerContainer .Cad3DIkizDrawer select {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    background: #0f172a !important;
}
.Cad3DViewerContainer .Cad3DKinematikDrawer input.kinAks {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
/* ICP onay kutusu: genel girdi kuralı onu tam genişliğe yayıyor, etiket metni satırın öbür ucuna kaçıyordu (sonda karesi). */
.Cad3DViewerContainer .Cad3DCmmDrawer input.cmmIcp {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.Cad3DViewerContainer .Cad3DToleranceStackDrawer input.tolAlt:focus,
.Cad3DViewerContainer .Cad3DToleranceStackDrawer input.tolUst:focus {
    border-color: #f59e0b !important;
}

/* ── Orta mesaj: dosya yok / dosya açılamadı ─────────────────────────────── */
.Cad3DOrtaMesaj {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 60px 16px calc(var(--cad3d-dock-h, 46px) + 28px);
    background: rgba(2, 6, 23, 0.6);
}

.Cad3DOrtaMesaj.Cad3DBos {
    padding: 16px;
    background: transparent;
}

.Cad3DOrtaKart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 440px;
    box-sizing: border-box;
    padding: 22px 24px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
}

.Cad3DOrtaKart strong {
    color: #f8fafc;
    font-size: 15px;
}

.Cad3DOrtaKart .Cad3DIkonBuyuk {
    width: 40px;
    height: 40px;
    color: #7dd3fc;
}

.Cad3DOrtaDugme {
    margin-top: 6px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #38bdf8;
    border-radius: 8px;
    background: #0369a1;
    color: #ffffff;
    font: 600 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    cursor: pointer;
}

.Cad3DOrtaDugme:hover {
    background: #075985;
}

.Cad3DPartTooltip {
    position: absolute;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid #38bdf8;
    border-radius: 8px;
    padding: 8px 12px;
    color: #f8fafc;
    font-size: 12px;
    pointer-events: none;
    z-index: 20;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* ── Mikro yardım paneli (yalnız "?" ya da davete basınca açılır) ───────────── */
.Cad3DYardimPanel {
    position: absolute;
    top: 58px;
    right: 12px;
    z-index: 26;
    width: min(400px, calc(100% - 24px));
    max-height: calc(100% - 58px - var(--cad3d-dock-h, 46px) - 24px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0 16px 16px;
    background: rgba(15, 23, 42, 0.97) !important;
    border: 1px solid rgba(56, 189, 248, 0.45) !important;
    border-radius: 12px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: #e2e8f0;
    font-size: 12.5px;
    line-height: 1.5;
}

.Cad3DYardimUst {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 -16px 2px;
    padding: 8px 8px 8px 16px;
    background: #0f172a;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.Cad3DYardimUst strong {
    color: #f8fafc;
    font-size: 14px;
}

.Cad3DYardimIkon {
    display: inline-flex;
    color: #7dd3fc;
}

.Cad3DViewerContainer .Cad3DYardimUst .Cad3DKapatBtn {
    margin-left: auto;
    color: #cbd5e1;
}

.Cad3DYardimPanel h4 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 14px 0 8px;
    padding: 0;
    color: #7dd3fc;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.Cad3DYAltBaslik {
    color: #b4c0d0;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.Cad3DYardimPanel .Cad3DYTablo {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    font-size: 12px;
}

.Cad3DYardimPanel .Cad3DYTablo th,
.Cad3DYardimPanel .Cad3DYTablo td {
    padding: 7px 8px;
    border: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    background: transparent;
    color: #cbd5e1;
    text-align: left;
    vertical-align: top;
    font-weight: 500;
    line-height: 1.4;
}

.Cad3DYardimPanel .Cad3DYTablo thead th {
    border-top: 0;
    color: #e0f2fe;
    font-weight: 700;
}

.Cad3DYardimPanel .Cad3DYTablo thead th .Cad3DIkon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 5px -2px 0;
    color: #7dd3fc;
}

.Cad3DYardimPanel .Cad3DYTablo tbody th {
    width: 26%;
    color: #f8fafc;
    font-weight: 700;
}

.Cad3DGizli {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.Cad3DYNot {
    margin: 6px 0 0;
    color: #b4c0d0;
    font-size: 12px;
}

.Cad3DYNot.Cad3DYNotUst {
    margin: 0 0 8px;
}

.Cad3DYListe {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.Cad3DYListe li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
}

.Cad3DYListe li .Cad3DIkon {
    margin-top: 1px;
    color: #7dd3fc;
}

.Cad3DYListe strong,
.Cad3DYKategoriGovde strong {
    display: block;
    color: #f8fafc;
    font-weight: 700;
}

.Cad3DYListe span,
.Cad3DYKategoriGovde > span {
    color: #cbd5e1;
}

.Cad3DViewerContainer .Cad3DYKategori {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin: 0 0 6px;
    padding: 9px 10px;
    box-sizing: border-box;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    color: #e2e8f0;
    font: 500 12.5px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-align: left;
    white-space: normal;
    cursor: pointer;
}

.Cad3DViewerContainer .Cad3DYKategori:hover {
    background: rgba(56, 189, 248, 0.16);
    border-color: #38bdf8;
}

.Cad3DYKategori > .Cad3DIkon {
    margin-top: 1px;
    color: #7dd3fc;
}

.Cad3DYKategori > .Cad3DOk {
    width: 14px;
    height: 14px;
    margin: 3px 0 0 auto;
    transform: rotate(90deg);
    color: #cbd5e1;
}

.Cad3DYKategoriGovde {
    flex: 1 1 auto;
    min-width: 0;
}

.Cad3DYardimPanel em {
    margin-left: 4px;
    color: #b4c0d0;
    font-size: 11.5px;
    font-style: normal;
    font-weight: 500;
}

.Cad3DYRozetler {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 10px;
    align-items: start;
    margin: 0;
}

.Cad3DYRozetler dt,
.Cad3DYRozetler dd {
    margin: 0;
}

.Cad3DYRozetler dd {
    color: #cbd5e1;
}

.Cad3DYTerimler {
    margin: 14px 0 0;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.Cad3DYTerimler summary {
    display: flex;
    align-items: center;
    min-height: 40px;
    color: #7dd3fc;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
}

.Cad3DYTerimler dl {
    margin: 0;
}

.Cad3DYTerimler dt {
    margin: 8px 0 0;
    color: #f8fafc;
    font-weight: 700;
}

.Cad3DYTerimler dd {
    margin: 0;
    color: #cbd5e1;
}

.Cad3DYardimAlt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    color: #b4c0d0;
    font-size: 12px;
}

.Cad3DYardimAlt .Cad3DOrtaDugme {
    margin-top: 0;
}

/* ── İlk adımlar turu — modeli kilitlemez (katman tıklamayı geçirir, yalnız kart tıklanır) ── */
.Cad3DTur {
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: none;
}

.Cad3DTurHalka {
    position: absolute;
    box-sizing: border-box;
    border-radius: 12px;
    box-shadow: 0 0 0 3px #38bdf8, 0 0 0 9999px rgba(2, 6, 23, 0.45);
    transition: left 0.2s ease, top 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.Cad3DTurKart {
    position: absolute;
    width: min(320px, calc(100% - 24px));
    box-sizing: border-box;
    padding: 10px 14px 14px;
    background: #0f172a;
    border: 1px solid #38bdf8;
    border-radius: 12px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8);
    color: #e2e8f0;
    font-size: 12.5px;
    line-height: 1.5;
    pointer-events: auto;
}

.Cad3DTurUst {
    display: flex;
    align-items: center;
    gap: 8px;
}

.Cad3DTurSayac {
    color: #7dd3fc;
    font-size: 11.5px;
    font-weight: 700;
}

.Cad3DViewerContainer .Cad3DTurUst .Cad3DKapatBtn {
    margin-left: auto;
    color: #cbd5e1;
}

.Cad3DTurBaslik {
    display: block;
    color: #f8fafc;
    font-size: 14px;
}

.Cad3DTurMetin {
    margin: 4px 0 12px;
    color: #cbd5e1;
}

.Cad3DTurAlt {
    display: flex;
    gap: 8px;
}

.Cad3DViewerContainer .Cad3DTurDugme {
    flex: 1 1 0;
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 8px;
    background: transparent;
    color: #e2e8f0;
    font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    cursor: pointer;
}

.Cad3DViewerContainer .Cad3DTurDugme:disabled {
    opacity: 0.45;
    cursor: default;
}

.Cad3DViewerContainer .Cad3DTurDugme.Cad3DTurBirincil {
    border-color: #38bdf8;
    background: #0369a1;
    color: #ffffff;
}

.Cad3DViewerContainer .Cad3DTurDugme.Cad3DTurBirincil:hover {
    background: #075985;
}

/* ── İlk kullanım daveti — "?" düğmesinin altında küçük çip (12 sn etkileşimsizlikten sonra) ── */
.Cad3DDavet {
    position: absolute;
    top: 56px;
    right: 12px;
    z-index: 17;
    display: flex;
    align-items: stretch;
    border: 1px solid #38bdf8;
    border-radius: 20px;
    background: #0369a1;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    animation: cad3dDavetGir 0.25s ease-out;
}

.Cad3DDavet::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 56px;
    width: 10px;
    height: 10px;
    background: #0369a1;
    border-top: 1px solid #38bdf8;
    border-left: 1px solid #38bdf8;
    transform: rotate(45deg);
}

@keyframes cad3dDavetGir {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.Cad3DViewerContainer .Cad3DDavetAc,
.Cad3DViewerContainer .Cad3DDavetKapat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    margin: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    font: 600 12.5px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    cursor: pointer;
}

.Cad3DViewerContainer .Cad3DDavetAc {
    flex: 0 0 auto;
    max-width: none;
    padding: 0 8px 0 12px;
}

/* "Nasıl kullanılır?" iki satıra bölünüp × ayırıcısına biniyordu (kare). CDP kural kaynağı: platformun genel
   `span { white-space:normal; max-width:100% }` kuralı düğmedeki nowrap mirasını span'de geri eziyor ve düğme
   `flex:1 1 0%` ile 92 px'e daralıyordu — kural span'e DOĞRUDAN yazılır. */
.Cad3DViewerContainer .Cad3DDavetAc > span {
    white-space: nowrap;
    max-width: none;
}

.Cad3DViewerContainer .Cad3DDavetKapat {
    padding: 0 10px 0 8px;
    border-left: 1px solid rgba(186, 230, 253, 0.45);
}

.Cad3DViewerContainer .Cad3DDavetKapat .Cad3DIkon {
    width: 14px;
    height: 14px;
}

.Cad3DViewerContainer .Cad3DDavetAc:hover,
.Cad3DViewerContainer .Cad3DDavetKapat:hover {
    background: rgba(255, 255, 255, 0.12);
}

.Cad3DViewerContainer .Cad3DDavetAc:focus-visible,
.Cad3DViewerContainer .Cad3DDavetKapat:focus-visible,
.Cad3DViewerContainer .Cad3DYKategori:focus-visible,
.Cad3DViewerContainer .Cad3DTurDugme:focus-visible,
.Cad3DViewerContainer .Cad3DMetinBag:focus-visible,
.Cad3DYTerimler summary:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .Cad3DDavet,
    .Cad3DFlyoutMenu {
        animation: none;
    }
    .Cad3DTurHalka {
        transition: none;
    }
}

/* ── Dar kap (kabın kendi genişliği; yan panel ve mobil aynı kural) ─────────── */
@container cad3d (max-width: 640px) {
    .Cad3DCatBtn .Cad3DBtnMetin,
    .Cad3DCatBtn .Cad3DOk,
    .Cad3DSep {
        display: none;
    }
    .Cad3DViewerContainer .Cad3DCatBtn {
        padding: 0 9px !important;
    }
    .Cad3DPatlatma input[type="range"] {
        width: 60px !important;
    }
    .Cad3DTelemetryBadge {
        max-width: 34%;
    }
    .Cad3DFlyoutGovde {
        grid-template-columns: 1fr;
    }
    /* Dar kapta panel kabın tamamını kaplayan diyalogdur (kendi kapatma düğmesi yapışkan başlıkta).
       Ölçüldü (iPhone 13, kap 374×380): rıhtım üstünde biten panelde 1332 px içeriğin yalnız 210 px'i görünüyordu. */
    .Cad3DYardimPanel {
        top: 8px;
        right: 8px;
        bottom: 8px;
        left: 8px;
        width: auto;
        max-height: none;
    }
    /* Menü üst şeride kadar uzar (rıhtım görünür kalır, kategori düğmesiyle kapanır): 210 → ~264 px. */
    .Cad3DFlyoutMenu {
        max-height: calc(100% - var(--cad3d-dock-h, 46px) - 32px);
    }
}

@media (max-width: 600px) {
    .Cad3DViewerContainer {
        min-height: 380px !important;
    }
}

/* PLM SingleItem Actions Bar Styling */
.Form_SingleItem .FormActions a[class*="Action_"],
.Form_SingleItem .FormActions button[class*="Action_"],
a.Action_ViewIn3D, a.Action_Model3DView, a.Action_CADSectionAnalysis,
a.Action_CADHeatmapPLM, a.Action_ECRPins3D, a.Action_CAD3DWorkspace, a.Action_CAD3DExplode {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    margin: 3px 4px !important;
    background: #0f172a !important;
    border: 1px solid #1e3a8a !important;
    border-radius: 6px !important;
    color: #38bdf8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.18s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.Form_SingleItem .FormActions a[class*="Action_"]:hover,
a.Action_ViewIn3D:hover, a.Action_Model3DView:hover, a.Action_CADSectionAnalysis:hover,
a.Action_CADHeatmapPLM:hover, a.Action_ECRPins3D:hover, a.Action_CAD3DWorkspace:hover, a.Action_CAD3DExplode:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.45) !important;
}
/* ============================================================================
   zz-a11y-typography.css — OKUNABİLİRLİK TABANI (2026-08-14)

   NEDEN: finans/TaxAdvisory turunda üç kırılım × 21 ekran ölçüldü
   (.claude/scripts/finans-kirilim-turu.js). Masaüstünde 12px altı metin
   2.188 element çıktı ve kaynağı MODÜL DEĞİL, PLATFORM tabanıydı:

     sınıf                       ölçülen  kaynak
     .Suffix                      8,0px   itemstyles.css:4252  font-size:0.85em + opacity:.5
     .AggregateValue (yan ray)    9,0px   itemstyles.css:3867  (Content içinde 1.2em, ray'de değil)
     .ItemCountLabel              6,0px   views.css:81         font-size:0.5em
     .KanbanFieldLabel           11,0px   kanban.css:459       + renk #7a869a = 3,65:1 (AA altı)
     .FooterAggLabel             10,0px   Meta CSS
     .GroupColorCellText         11,0px   Meta CSS
     .ButtonTitle                 9,6px   Meta CSS
     .InsightChipStar            10,0px   zz-assistant.css:149
     .AggregateAnomalyBadge      11,0px   zz-kpi-insight.css:122 renk #10b981 = 2,54:1 (AA altı)

   NEDEN AYRI DOSYA: itemstyles/views/kanban dosyalarını yerinde değiştirmek
   92 domainde ölçülmemiş yan etki riski taşır. zz-*.css katmanı Meta'DAN SONRA
   yüklenir (Domain.vb:15783 "Post-Meta override tier") ⇒ tek dosya, kolay geri alım.

   ⛔ BU DOSYA YALNIZ TABAN YÜKSELTİR — hiçbir kuralı KÜÇÜLTMEZ. Zaten 12px+
      olan yerler etkilenmez (özgüllük 0-1-0; `.Content .Aggregate > .AggregateValue`
      gibi 0-3-0 kurallar KAZANMAYA DEVAM EDER — kokpit KPI'ları büyük kalır).

   Eşikler: WCAG 2.2 AA — normal metin ≥4,5:1. Boyut tabanı 11-12px:
   `361-ui` kalite yön politikası (MAKSİMİZE sınıfı, ekranın okunabilirliği).
   ============================================================================ */

/* ── 1) Birim/ek metni: 0.85em + opacity .5 ⇒ 8px ve yarı saydam ───────────── */
/*    ⛔ İLK SÜRÜM TUTMADI (ölçüldü: 766 element hâlâ 8px). Sebep "CSS gitmedi"
      DEĞİL — aynı dosyadaki ItemCountLabel/AggregateValue kuralları TUTTU.
      Kazanan kural `td .Suffix` (itemstyles.css:4264, özgüllük 0-1-1) benim
      0-1-0'ımı yeniyordu. Özgüllük yükseltildi (361-content KURAL 7).            */
.Suffix,
.EntityTypeView td .Suffix,
.Content td .Suffix,
.ItemView td .Suffix {
    font-size: 12px;
    opacity: 0.85;          /* 0.5 -> 0.85: opaklik da kontrast dusuruyordu (397 ihlal) */
}

/* ── 2) "N Kayıt" sayacı: 0.5em ⇒ 6px (ölçülen en küçük metin) ─────────────── */
.ItemCountLabel {
    font-size: 12px;
    opacity: 0.85;
}

/* ── 3) Yan ray / liste rozet sayıları ⇒ 9px ───────────────────────────────── */
/*    Kokpit KPI'ları `.Content .Aggregate > .AggregateValue` (0-3-0) ile
      1.2em kalır; bu kural yalnız TABANI yükseltir.                            */
.AggregateValue {
    font-size: 12px;
}

/* ── 4) Kanban kart etiketi: hem boyut hem KONTRAST (#7a869a = 3,65:1) ─────── */
.KanbanFieldLabel,
.KanbanCardField .KanbanFieldLabel {      /* 0-2-0 — kanban.css:459 (0-1-0) yenilir */
    font-size: 12px;
    color: #5a6577;          /* beyaz üzerinde ≈4,6:1 */
}

/* ── 5) Liste alt toplamı ve grup satırı ───────────────────────────────────── */
/*    Kazanan kurallar 70-list.css'te ve ÇOK özgül; aynı seçici tekrarlanır
      (bu dosya Meta'dan SONRA yüklenir ⇒ eşit özgüllükte kazanır).              */
.ButtonTitle {
    font-size: 12px;
}
.EntityTypeView .ListFooter .FooterAggLabel {          /* 70-list.css:1401 */
    font-size: 12px;
}
.EntityTypeView td.GroupColorCell .GroupColorCellText { /* 70-list.css:1381 */
    font-size: 12px;
}

/* ── 5b) Yan ray etiketleri: 9,6px ────────────────────────────────────────── */
/*    ✅ ÇÖZÜLDÜ — tahminle değil CASCADE PROBUYLA (finans-teshis-bcd.js):
      eleman `<span>` SINIFSIZ, ebeveyni `.NavTitle`, ve **hiçbir CSS kuralı ona
      font-size vermiyor** ⇒ değer MİRAS alınıyor. Bu yüzden önceki iki deneme
      (`.EntityTypeLists span:not([class])`) tutmadı: yanlış elemanı hedefliyordu.
      Doğru hedef kabın kendisidir.
      ⚠️ Üst gezinme etkilenmez: `.PageTop .SubNav .NavTitle > span` (0-3-1) ve
      `.RootHoverMenuBody .NavTitle` gibi bağlam kuralları bu 0-1-0/0-1-1'i yener. */
.NavTitle,
.NavTitle > span {
    font-size: 11px;
}

/* ── 6) Çip / rozet metinleri ──────────────────────────────────────────────── */
.InsightChipStar {
    font-size: 12px;
}
/* ⛔ 2026-08-28 — YUKARIDAKI OZGULLUK HESABI YANLISTI, KURAL HIC UYGULANMADI.
   Rakip zz-kpi-insight.css:93 de `.AggInsight .AggregateSparkDelta` yaziyor —
   yani (0,2,0) vs (0,2,0), ESIT. Esitlikte SONRA yuklenen kazanir ve zz-* alfabetik
   siralidir ("zz-a11y..." < "zz-kpi...") ⇒ 9,5px KAZANIYORDU.
   Olculdu (canli finans, 11 ekran x 3 kirilim): 9,5px rozet 25 kez cizildi, uc
   kirilimda da AYNI (punto kadrajdan bagimsiz). Bu a11y duzeltmesi aylardir OLUYDU.
   Care !important DEGIL OZGULLUK: `.Aggregate` atasi eklendi ⇒ (0,3,0), siradan
   bagimsiz kazanir. (Ayni dosya 361. satirda bu atayi zaten kullaniyor.) */
.Aggregate .AggInsight .AggregateSparkDelta {   /* (0,3,0) — siradan bagimsiz */
    font-size: 12px;
}
/* ⚠️⚠️ YUKARIDAKİ NOT 2026-08-18'DE GEÇERSİZLEŞTİ — YENİDEN ÖLÇÜLDÜ.
   Eski not: "ölçüm aracı %14 saydam yeşil zemini düz yeşil sanıp 2,16:1 demişti;
   kompozit edilince ≈7:1 çıkıyor" → bugün bu SAYI TUTMUYOR.

   İKİ BAĞIMSIZ ÖLÇÜM AYNI SONUCU VERDİ (localhost, 390x844, canlı DOM):
     axe-core                        : 3,99:1   [serious, color-contrast]
     kendi kompozit hesabım          : 4,01:1
       etkin ön plan [26,133,102] (rgb(29,134,102) × opacity .9)
       etkin zemin   [222,245,237] (rgba(16,185,129,.14) beyaz üstünde)
     kırmızı varyant (▼)             : 4,73:1  ✅ GEÇİYOR — dokunulmadı

   İki ayrı yöntem 0,02 farkla aynı sonucu veriyorsa "ölçüm aracı yanılıyor"
   açıklaması ayakta kalmaz. Eski not ya farklı bir renk sürümünde alınmıştı ya
   da kompozit yanlış yapılmıştı. ⇒ YALNIZ YEŞİL varyant düzeltildi.

   Düzeltme rengi TAHMİN EDİLMEDİ, hesaplandı: hedef ≥4,5:1 için ön plan
   luminansı ≤0,1544 olmalı. #065f46 (emerald-800), opacity .9 ile kompozit
   edildiğinde [28,110,87] → ≈5,19:1 (marjla geçer). Ton ailesi AYNI kalır,
   yalnız koyulaşır ⇒ tasarım dili bozulmaz.
   Özgüllük 0-3-0: zz-kpi-insight.css bu dosyadan SONRA yüklenir (alfabetik). */
.Aggregate .AggInsight .AggregateSparkDelta.AggregateTrendUp {
    color: #065f46;          /* ≈5,19:1 (opacity .9 kompoziti dâhil) */
}

/* ── 7) Anomali rozeti: #10b981 beyaz üzerinde 2,54:1 — GERÇEK ihlal ───────── */
/*    ⚠️ zz-kpi-insight.css bu dosyadan SONRA yüklenir (zz-* alfabetik sıralı:
      "zz-a11y…" < "zz-kpi…") ⇒ eşit özgüllükte O kazanır. Bu yüzden 0-3-0.      */
.Aggregate .AggInsight .AggregateAnomalyBadge.AggregateAnomalyUp {
    color: #047857;          /* ≈4,9:1 */
}
.Aggregate .AggInsight .AggregateAnomalyBadge.AggregateAnomalyDown {
    color: #b45309;          /* ≈4,6:1 */
}
.Aggregate .AggInsight .AggregateAnomalyBadge {
    font-size: 12px;
}

/* ── 8) Sıfır değerli sayı hücresi ─────────────────────────────────────────── */
.FieldNumber.FieldValueZero {
    color: #616161;          /* ≈5,9:1 */
}

/* ============================================================================
   SEKME BAŞLIĞI KONTRASTI (2026-08-19) — kök: RENK DEĞİL OPAKLIK
   ============================================================================
   axe-core (130 modül) kontrast bulgularının en büyük ailesi sekme başlıklarıydı
   (ölçüldü: 6 ekranda 54 düğümün 24'ü `.TabButton`).

   ⛔ TEŞHİS ÜÇ KEZ YANLIŞ YERE GİTTİ, ölçüm düzeltti:
     1. kendi zemin/ön-plan okumam  -> "siyah / beyaz" dedi (19:1, ihlal olamaz)
        çünkü metin çocuk span'de, ben kabın color'ını okuyordum.
     2. `.TabButton > span { opacity: .75 }` düzeltildi -> axe 14 -> 14 (KAZANMADI),
        çünkü onu `opacity: var(--tabspanopacity) !important` eziyor (bugün 1).
     3. `getComputedStyle(span).opacity` = 1 gösterdi -> "ihlal yok" sanıldı;
        oysa axe ATA opaklığını hesaba katar.

   GERÇEK KÖK (ata zinciri ölçüldü):
       SPAN.TabButton  opacity = 0.5     <- buradan geliyor
       kaynak kural: `.TabHeader > span, .TabHeader > a { … opacity: 0.5 }`
       (çekirdek CSS'te YOK => meta.xml ElementStyle'dan üretiliyor)

   Siyah metin, 0.5 opaklıkla #f5f7fa üzerinde efektif #7b7c7d => 3.89:1 (eşik 4.5).

   HESAP: efektif = α·0 + (1−α)·247. 4.5 için ≈107 gerekiyor => α ≥ 0.567.
   0.62 seçildi (efektif ≈94 => ~5.9:1) — rahat marj, ve HİYERARŞİ KORUNUR:
       seçili (Opacity100) 1.0  >  hover 0.75  >  taban 0.62
   Meta'dan SONRA yüklenen katmandayız; `!important` GEREKMEZ.
   ============================================================================ */
.TabHeader > span,
.TabHeader > a {
    opacity: 0.62;
}


/* ⛔⛔ İÇERİK BAŞLIĞI: MOTOR CEVABI ÜRETİYORDU, YÜZEY TÜKETMİYORDU (2026-08-20)
   `$BaslikPaleti` içerik başlığı için doğru ön planı ZATEN hesaplıyor ve
   `--contentHeaderForeground` olarak yayımlıyor (m.js:5283). Ama `.ContentHeaderTitle`
   o değişkeni KULLANMIYORDU: hiçbir CSS kuralı ona renk vermiyor, rengi MİRAS alıyordu
   ve miras gelen değer sabit BEYAZdı.
   ÖLÇÜLDÜ (/SurveyManagement): `--contentHeaderBackground: #E2C90F` (sarı),
   `--contentHeaderForeground: #16181d` (koyu, DOĞRU) — ama başlığın gerçek rengi
   `rgb(255,255,255)` ⇒ **1.67:1** (30px, eşik 3). Yani üretici çalışıyor, TÜKETİCİ yok.
   Bu, deponun tekrar eden "ölü doğum" ailesinin bir örneği: bir yeteneği YAZMAK onu
   BAĞLAMAK değildir.

   ÖLÇÜM (7 ekran, enjeksiyonla doğrulandı, her birinde düşen 1 → 0):
     /mOrgsHome 1.13 → 15.74 · /SurveyManagement 1.67 → 10.65 · /mCRM 2.80 → 6.34
     /mJobDescription · /mPolicie · /mGoal · /myPurchaseRequests  2.55 → 6.96
   Geri düşüş güvenli: değişken yoksa `inherit` ⇒ bugünkü davranış aynen sürer. */
.ContentHeaderTitle,
.ContentHeaderDescription,
.ContentHeader .SectionTitle,
.ContentHeader .SubTitle {
    color: var(--contentHeaderForeground, inherit);
}


/* ═══════════════════════════════════════════════════════════════════════════
   BASLIK AKSIYON DUGMESI — beyaz metin marka mavisi uzerinde 2.90:1 (AA 4.5 alti)
   ═══════════════════════════════════════════════════════════════════════════
   Depoda duzeltme ZATEN VARDI (`16-eksik-tokenlar.css`: `.TopLeft .Actions a
   { background-color: var(--primaryAA) !important }`) ve UYGULANMIYORDU. Kok
   OZGULLUK + SIRA: rakip kural `zz-from-361.css:212` -> `.TopLeft .Actions a
   { background-color: #009ef7 !important }`. Ikisi de `!important`, ikisi de
   (0,2,1) => ESIT; esitlikte SONRA yuklenen kazanir ve `zz-*` katmani `NN-*`
   katmanindan SONRA gelir. Yani duzeltme dogru yazilmis, YANLIS KATMANDAYDI.
   Care: bir SINIF ekle (0,3,1) -> sira ne olursa olsun kazanir.
   Zemin degeri de SABIT yazilmaz: `--color1AA` markanin tonunu koruyup
   parlakligi esige kadar kaydirir (m.js `$AAMetinRengi`); geri dusus zinciri
   elle olculmus `--primaryAA`, o da yoksa bugunku deger. */
.PanelHeader .TopLeft .Actions a {
    background-color: var(--color1AA, var(--primaryAA, #007cc2)) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ETIKET RENKLERI — iki aile, ikisi de AA alti, ikisi de OZGULLUK yuzunden acik
   ═══════════════════════════════════════════════════════════════════════════
   1) ParamLabel  #78909C / #f0f1f6 = 2.97:1
      Kazanan: `.ParameterNew .ParamLabel { color:#78909C }` (0,2,0).
      Depoda `--labelcolor: #546670` ZATEN vardi ve HIC UYGULANMADI — iki sebep:
        (a) tuketiciler `var(--labelColor)` okuyor, tanim `--labelcolor` (kucuk c);
            CSS ozel ozellikleri BUYUK/kucuk harfe DUYARLIDIR => tanim OLU.
        (b) olmasaydi bile `.ParamLabel` (0,1,0) rakibe yenilirdi.
      ⛔ Tanimi yeniden adlandirmak COZUM DEGIL: `views.css:1439` ve
         `zz-from-361.css:12` de ayni kucuk-harfli adi #78909C ile tanimliyor;
         adi duzeltmek bugun OLU olan o bildirimleri DIRILTIR ve etiketleri
         tam da kacindigimiz renge boyar. Bu yuzden dogrudan kazanan kurala
         yaziliyor. Ozgulluk: rakip (0,2,0), bu (0,2,1) => sira ne olursa olsun kazanir.
      #546670 / #f0f1f6 = 5.30:1  (deger deponun kendi olcumunden alindi)
   2) AggregateLabel  #99A1B7 / beyaz = 2.58:1
      Kazanan: `.card .AggregateLabel { color:#99A1B7 !important }` (0,2,0)+!important.
      Ayni TON korunarak esige kadar koyultuldu: #707686 = 4.54:1.
      Ozgulluk (0,3,0) + !important => kazanir. */
body .ParameterNew .ParamLabel {
    color: #546670;
}
.Panel.card .AggregateLabel {
    color: #707686 !important;
}

/* BOS DURUM METNI — `.CardEmptyText` ("Kayit bulunamadi") 2.85:1 olculdu.
   `cardview.css:338` yalniz font-size veriyor, renk DEVRALINIYOR ve devralinan
   deger acik gri. Bos durum metni tanimi geregi OKUNUR olmali: bu, kullanicinin
   "veri mi yok, sistem mi bozuk" sorusunu cevaplayan tek satirdir.
   #5f6672 / beyaz = 5.78:1 (deger deponun kendi olcumlerinden). Devralmaya karsi
   (0,1,0) yeterlidir — devralma her zaman eslesen kurala yenilir. */
.CardEmptyText {
    color: #5f6672;
}

/* MODUL TANITIM PANELI (`Panel_h`) — zemin KIRACININ modul rengi, metin SABIT BEYAZ.
   Olculdu: /mCRM #39a6cc 2.80:1 · /mCustomerSuccess #22c55e 2.28:1 ·
   /mCRMHome 2.80 · /mSalesApproval 3.19 — hepsi AA 4.5 alti.
   Panelin zemini `--contentHeaderBackground` ile BIREBIR AYNI olculdu
   (rgb(57,166,204)=#39a6cc · rgb(34,197,94)=#22c55e), yani motorun o renkten
   turettigi on plan (`--contentHeaderForeground`) tam da buraya aittir.
   Turetme AYNI renkten geldigi icin bu kural YAPISI GEREGI guvenlidir: koyu
   zeminli modulde beyaz, acik zeminlide koyu doner. `!important` sart —
   bugunku beyaz panelin KENDI bildiriminden geliyor. Geri dusus: `inherit`
   => token yoksa bugunku davranis aynen surer. */
/* KARDES SINIF: panel adlari domain XML'den gelir (`Panel Name="h"` -> `.Panel_h`,
   `Name="hdr"` -> `.Panel_hdr`). Olculdu: ayni zemin (#39a6cc), `Panel_h` duzeldi
   (rgb(22,24,29)) ama `Panel_hdr` beyaz kalmisti (rgb(255,255,255)) — kural DOGRUYDU,
   KAPSAMI dardi. Yeni bir panel adi cikarsa buraya eklenir; kalici cozum, ayni
   turetmeyi calisma aninda uygulayan bir gecis olurdu (henuz yazilmadi). */
.Panel_h,
.Panel_hdr {
    color: var(--contentHeaderForeground, inherit) !important;
}

/* ═══ KPI CIPI: SABIT BEYAZ METIN, DEGISKEN MODUL ZEMINI ═══════════════════
   OLCULDU (2026-08-20, demo.360bir.com canli, 753 ekranlik supurme):
   `span.AggregateLabel` AA-alti bulgusu 48 EKRANDA ve oran HER EKRANDA FARKLI
   (2.11 / 2.49 / 3.16 / 3.54 / 3.62 / 3.70 / 3.81 / 4.00 / 4.03) — cunku:

       .ContentHeader .Aggregate       { background: rgba(0,0,0,0.18) }   <- ORTU
       .ContentHeader .AggregateLabel  { color: rgba(255,255,255,0.92) }  <- SABIT

   Zemin = MODUL RENGI + %18 siyah ortu. Modul rengi acikken beyaz metin coker.
   Alfa BIRLESTIRMELI olculen gercek degerler:
       mLoyaltyRewards  zemin rgb(209,176,0) sari    -> 1.99:1
       mSalesOfferHome  zemin rgb(201,130,9) turuncu -> 2.91:1
       mCRMHome         zemin rgb(47,136,167) mavi   -> 3.67:1

   ⛔ RENGI DEGISTIRMEK COZUM DEGIL: zemin degiskense hicbir SABIT on plan tum
   modullerde dogru olamaz. Bu depoda kayitli sinif: "sabit on plan, degisken
   zeminde HER ZAMAN yanlistir".

   COZUM: ortuyu, zemin NE OLURSA OLSUN beyaz metnin gectigi degere cek — boylece
   degisken olan zemin KONTROL ALTINA alinir ve sabit on plan gecerli hale gelir.

   DEGER DENEYLE SECILDI (hesapla degil), sinir durum zorlanarak:
       baslik ZORLA beyaz (#fff = teorik en kotu) + ortu .18 -> 1.48:1
       ortu 0.52 -> 3.89:1  ⛔
       ortu 0.60 -> 5.16:1  ✅ AA
   Deney iki yonlu kapandi: ortu kaldirilinca her ekran KENDI tabanina dondu
   (1.99 / 2.91) — yani olcum gecerliydi.

   0.60 secildi cunku BEYAZ zeminde bile gecer => kural zemin-BAGIMSIZ olur ve
   yarin eklenecek acik renkli bir modul temasinda kendiliginden dogru kalir.
   Modul tonu hala gorunur (ortu opak degil), yalnizca parlaklik siniri var.

   Ozgulluk: rakip `.ContentHeader .Aggregate` (0,2,0); bu kural sinifi iki kez
   yazarak (0,3,0) veriyor VE zz-* katmani Meta'dan SONRA yukleniyor => iki
   nedenle birden kazanir. !important kullanilmadi (gerekmiyor; kazandigi
   OLCULDU).

   ⛔⛔ ILK COZUM DENENDI VE EKRAN GORUNTUSUYLE ELENDI: ortuyu 0.60'a cekmek
   sayisal olarak GECIYORDU (beyaz basliga zorlanmis sinir durumda 5.16:1) ama
   kare cekilince cipler CAMURLU koyu-kahve bloklara donustu ve modul tonu
   kayboldu — "premium" degil. Olcum gecti, GOZ gecmedi.

   SECILEN COZUM: cipin zeminine degil ETIKETIN RENGINE dokun.
   Isaretli 8 ekranda alfa-birlestirmeli olculdu:
       KOYU metin  8/8 AA gecti (5.21 – 9.95:1)
       BEYAZ metin 0/8 gecti    (2.11 – 4.03:1)
   En koyu zemin bile (mCRMHome, L=0.21) koyu metinle 5.21:1 veriyor.
   Deney: mLoyaltyRewards'ta mevcut 1.99 -> koyu metin 7.74:1.
   Modul tonu TAMAMEN korunuyor ve etiket, sayfa basligiyla (ayni zeminde koyu)
   TUTARLI hale geliyor.

   KAPSAM BILEREK DAR: yalniz `.AggregateLabel` (supurmede 357 bulgu, esik 4.5).
   `.AggregateValue` (21 bulgu, esik 3 — buyuk metin) ve `.AggregateSparkDelta`
   (50 bulgu) DISARIDA: delta'nin rengi SEMANTIKTIR (yukari/asagi) ve
   koyultmak anlami bozar — ayri madde. */
/* ⛔ OZGULLUK NOTU (olculdu, CDP ile): rakip kural `.ContentHeader .Aggregate
   .AggregateLabel { color:#6c757d }` AYNI ozgullukte (0,3,0) ve `domain.css`
   icinde — o dosya `core.css`'TEN SONRA yuklenir, yani esitlikte SIRA kazandirir
   ve ilk surumum SESSIZCE yenildi (kural pakette VARDI, computed hala #6c757d).
   Sinifi tekrarlayarak (0,4,0) yapiyoruz: ayni ogeleri esler, sira ne olursa
   olsun kazanir, !important gerekmez. */
/* ⛔⛔ SABIT ON PLAN, DEGISKEN ZEMINDE HER ZAMAN YANLISTIR (2026-09-06, olculdu)
   Onceki hali `--contentHeaderForeground: #f8fafc !important` ile MOTORUN CEVABINI
   EZIYORDU. Gerekcesi "Root list headers are dark panels" varsayimiydi; olculdu ki
   bu varsayim ACIK temali modullerde YANLIS:
     finans/#Persons  .PanelHeader zemini = rgb(255,131,91) (TURUNCU, acik)
     motorun `<html>`e yazdigi dogru deger  = #16181d (koyu)
     panel kapsamindaki ezilmis deger       = #f8fafc (beyaz)  -> 2.32:1  (AA 4.5)
   IKI YONLU DENEY (<style> enjeksiyonu, .claude/scripts/_baslik-onplan-deney.js):
     taban  baslik 2.32 · cip 2.32
     ezme KALDIRILINCA   7.31 · 7.31   (AA gecti)
     geri alininca       2.32 · 2.32   (deney GECERLI — tabana dondu)
   ⇒ Token EZILMEZ; `$BaslikPaleti` (m.js:226) zemini olcup on plani TURETIR ve
   KOYU panelli modulde zaten #f8fafc uretir — yani bu kural motoru yalniz
   ENGELLIYORDU. Yedek `--white`: motor henuz kosmadiysa bugunku davranis korunur. */
.Content > .EntityTypeView > .EntityTypeViewBody > .Center > .PanelHeader {
    color: var(--contentHeaderForeground, var(--white)) !important;
}

.ContentHeader .Aggregate .AggregateLabel.AggregateLabel {
    color: rgba(0, 0, 0, 0.82);
}

/* ═══ TREND ROZETI, RENKLI KPI KARTI UZERINDE ══════════════════════════════
   OLCULDU (demo.360bir.com, 753 ekranlik supurme): `.AggregateSparkDelta`
   50 kontrast bulgusu, olculen oranlar 1.09 / 1.25 / 1.34 / 1.47 / 1.48 /
   1.80 / 1.99 / 2.00 — yani rozet neredeyse GORUNMEZ.

   ⚠️ RENKLER YANLIS DEGIL: #047857 (yesil) ve #b91c1c (kirmizi) BEYAZ zeminde
   5.6:1 ve 6.4:1 verir. Kusur ZEMINDE: bu rozet `.ContentHeader` icindeki KPI
   kartinin uzerinde duruyor ve o kartin zemini MODUL RENGI. Rozetin kendi
   zemini `rgba(16,185,129,0.14)` — %14 saydam, yani modul rengini gizlemiyor.
   Koyu yesil metin + koyu mavi modul zemini = 1.09:1.

   Bu, ayni dosyadaki `.AggInsight` duzeltmesinden FARKLI bir baglamdir: o
   duzeltme BEYAZ sayfa zemininde hesaplanmisti ve orada dogru; burada zemin
   beyaz DEGIL.

   COZUM: rozete OPAK acik zemin ver, semantik rengi (yesil/kirmizi/gri) KORU.
   Boylece rozet modul renginden BAGIMSIZ hale gelir:
       #047857 / #f5f7fa  -> 5.4:1  ✅   (yukari)
       #b91c1c / #f5f7fa  -> 6.1:1  ✅   (asagi)
       #475569 / #f5f7fa  -> 7.2:1  ✅   (yatay)
   Gorsel olarak renkli kartin uzerinde kucuk beyaz bir rozet — standart ve
   okunur bir desen; kartin tonu bozulmaz (rozet kucuk bir alan kapliyor).

   Ozgulluk: rakip `.AggregateSparkDelta.AggregateTrendUp` (0,2,0)
   [zz-kpi-insight.css]; bu kural (0,3,0) => sira ne olursa olsun kazanir. */
.ContentHeader .Aggregate .AggregateSparkDelta {
    background: #f5f7fa;
}

/* ── 9z) META CSS'TEN GELEN em/% ZINCIRI: filtre seridi ve buton etiketi ──────
     OLCULDU 2026-09-08 (canli satis/#mTSInvoiceHome, 1600x950 + 390x844; kazanan
     kural CDP `CSS.getMatchedStylesForNode` ile OKUNDU, TAHMIN EDILMEDI):

       .ParamLabel               9,60px   core'da font-size kurali YOK -> devralma
       .Parameters .Text span    8,64px   Meta: `.Parameters .Text span{80%}` +
                                          `body .Parameters .Text span{90%}`
       .ButtonTitle              8,45px   Meta zinciri: `.Button`(~%70) x `1.1em`
                                          => 11 x 0,70 x 1,1 = 8,47 (olculen 8,45)

     ⚠️ KOKU `html{font-size:11px}` DEGISTIREREK cozmek YASAK — o taban TUM ekrani
        buyutur ve 92 domainde duzeni bozar; yaricap problemin boyutunu kat kat asar
        (kayitli kural: onarim aracinin yaricapi problemi asamaz). Dogru care 12px
        ALTINA DUSEN siniflara hedefli taban vermektir — bu dosyanin zaten uyguladigi desen.

     ⚠️ Rakiplerin bir kismi `!important` tasiyor (`.Button > div{1.1em !important}`,
        Meta'nin `80% !important`'i) ⇒ sinif tekrari TEK BASINA yetmez, ayni seviyede
        `!important` gerekir. `.PageZone_*Navs ... .ButtonTitle.ButtonTitle{100%}` kurali
        DAHA OZGUL oldugu icin ray etiketleri BU KURALDAN ETKILENMEZ (ray tipografisi
        ayri bir karardir ve KORUNUR).

     ⛔ `.Suffix` / `.AggregateValue::after` BILEREK DISARIDA: para birimi UST-SIMGE
        kalibidir (ayrac gizli, simge kucuk) — buyutmek kalibi bozar. */
.ParamLabel.ParamLabel {
    font-size: 12px !important;
}
.ParameterSet .Text span,
.Parameters .Text span {
    font-size: 12px !important;
}
.ButtonTitle.ButtonTitle {
    font-size: 12px !important;
}

/* ── 10) `1rem` TUZAGI: html tabani 11px oldugu icin `font-size:1rem` yazan
      her kural 11px verir ve 12px esiginin ALTINDA kalir (2026-08-28 olculdu).

      Finans Radari 10-kirilim supurmesi: tablet+ kirilimlarda ekran basina
      220+ OKUNMAZ bulgusu; kaynak MODUL DEGIL, platform tabani:

        secici                                          olculen  kaynak
        .EntityTypeLists (liste secici cipleri)          11,0px   font-size HIC set edilmemis
        .PanelHeader                                     11,0px   font-size:1rem
        .PanelHeader ... .EntityTypeViewTitleBody        11,0px   font-size:1rem

      Ozgulluk notu: asagidaki secicilerin ozgullugu kaynaktakiyle AYNI; kazanmayi
      `zz-*` katmaninin Meta'DAN SONRA yuklenmesine borcludur (esit ozgullukte
      SONRA gelen kazanir). Zinciri kisaltma — kisaltirsan ozgulluk duser ve kural
      sessizce ETKISIZ kalir.                                                       */
/* ⛔ OLCULDU: 0-1-0 YETMEDI. Hedef `<a class="EntityTypeLists Menu_Arrow_Down ...>`
      ve onu IKI rakip yeniyor (ikisi de `1em` = 11px):
        .EntityTypeLists.Menu_Arrow_Down                        0-2-0  off 831.746
        .Top > .TopCenter .EntityTypeLists.Menu_Arrow_Down      0-4-0  off 832.089
      Her rakibe AYNI ozgullukte karsilik yazilir; `zz-a11y` onlardan SONRA
      yuklendigi icin (off 1.059.800) esitlikte BU kazanir. Ayrica `.ButtonText`
      ve taban `.EntityTypeLists{80%}` icin de birer karsilik var.               */
.EntityTypeLists.EntityTypeLists,
.EntityTypeLists a,
.EntityTypeLists .ButtonText,
.EntityTypeLists.Menu_Arrow_Down,
.Top > .TopCenter .EntityTypeLists.Menu_Arrow_Down {
    font-size: 12px;
}

/* ⛔ OLCULDU: sira YETMEDI. Rakip `zz-from-361.css` icindedir ve alfabetik olarak
      `zz-a11y-*`'DEN SONRA yuklenir (offset 1.060.826 vs 1.107.576) ⇒ esit ozgullukte
      RAKIP kazanir. Care `!important` DEGIL, sinif TEKRARI: ayni elemani iki kez
      yazmak kapsami DEGISTIRMEDEN ozgullugu bir basamak yukseltir (0-1-0 -> 0-2-0). */
.PanelHeader.PanelHeader {
    font-size: 12px;
}

.PanelHeader > .TopCenter > .EntityTypeViewTitle > .EntityTypeViewTitleBody.EntityTypeViewTitleBody {
    font-size: 12px;
}


/* -- 11) LISTE HUCRESI: `.ListTable td{font-size:90%}` -> 10,8px (2026-08-28) -------
   OLCULMUS DAGILIM (Finans Radari, tablet-dikey, 363 OKUNMAZ bulgusu):

     sinif              olculen   adet   kaynak
     SPAN                10,8px    122   .ListTable td { font-size:90% }   (70-list.css)
     WholePart           10,8px     72   ayni atadan devralir
     DecimalSeperator    10,8px     72   .ListBody .DecimalSeperator{inherit}
     DecimalPart          7,56px    72   .DecimalPart{font-size:70%} x 10,8
     SPAN (baslik)       11,0px     20   liste basligi
     EntityTypeLists     11,0px      2   (yukarida 10. maddede kapatildi)

   ⛔ UC TUR YANLIS HEDEFE CALISILDI: ilk bulgu ornegi `EntityTypeLists` idi ve
      TEMSILI sanildi; dagilim olculunce payi 2/363 (%0,5) cikti. Bir bulgu
      kumesinde ORNEGE degil DAGILIMA bakilir.

   Ata zinciri 12px -> 90% -> 10,8px -> 70% -> 7,56px. Tabani yuzdeyle degil
   MUTLAK yazmak zinciri kirar; `.DecimalPart` hiyerarsisi KORUNUR (yuzde yerine
   yine mutlak, ama okunur tabanda).                                              */
.ListTable td,
.ListBody td,
.ListCompact .ListTable td {
    font-size: 12px;
}

/* Ondalik kismi: 70% x 10,8 = 7,56px -> okunmaz. Hiyerarsi KORUNUR (govdeden
   kucuk kalir) ama okunur tabana cekilir. Mutlak yazilir ki ata degisirse
   zincir yeniden kirilmasin.                                                     */
.DecimalPart,
.ListBody .DecimalPart {
    font-size: 12px;
}

/* -- 12) Kalan uc kaynak (dagilim olculdu: 95 bulgunun 95'i) ---------------------
     DecimalPart      11px x 72   yukarida 12px'e cekildi (11px esigi GECMIYORDU)
     ListFieldTitles  11px x 20   kolon basligi — hicbir kural set etmiyor, html
                                  tabanindan (11px) devraliyor
     InsightChipStar  10px x  2   benim 10. maddedeki kural KAYBEDIYOR: rakip
                                  `.InsightChipStar{10px}` off 1.080.603, benimki
                                  1.044.668 — esit ozgullukte SONRAKI kazanir.
                                  Sinif tekrari ile 0-2-0'a cikarildi.              */
.ListFieldTitles,
.ListFieldTitles td,
.ListFieldTitles span,
.ListFieldTitles a {
    font-size: 12px;
}

.InsightChipStar.InsightChipStar {
    font-size: 12px;
}


/* -- 13) `0.875rem` BUTONLAR: 11px taban x 0,875 = 9,625px (2026-08-28) ----------
   Ayni `1rem` koku (10. madde), bu kez kesirli: `0.875rem` yazan kurallar
   9,6px verir. Olculdu — ikisi de KULLANICININ ILK GORDUGU eylem yuzeyi:

     .EmptyStateActionButton    off 39.039   bos durum eylem butonu
     .ConfirmCancel/.ConfirmOk  off 72.706   onay diyalogu butonlari

   Bos durum butonu ozellikle onemli: bir ekran bosken kullanicinin TEK yolu odur.  */
.EmptyStateActionButton,
.ConfirmCancel,
.ConfirmOk {
    font-size: 12px;
}


/* -- 14) DOKUNMA HEDEFI: komut yuzeyi mobilde 44px (2026-08-28) ------------------
   OLCULDU (Finans Radari, 10 kirilim): KUCUK_HEDEF 76 bulgunun **63'u** tek sinif —
   `KOMUT` baglaminda `24x24` (Actions / MicroButton / ToggleButton), display:flex.
   Kalan 13'u `NNx32` (yukseklik 32).

   ⛔ 24x24 WCAG 2.2 AA "Target Size (Minimum)"u KARSILAR — masaustunde kusur DEGIL.
      Eksik olan DOKUNMATIK kullanim: orada 44px beklenir (AAA / Fitts).
      Bu yuzden kural `pointer: coarse` ile SINIRLI — masaustu gorunumu DEGISMEZ.

   ⛔ Neden hit-area (`::after` overlay) DEGIL, gercek boyut: `.Actions` kabinda
      `gap: 6px` olculdu (off 64.151). ±10px'lik bir overlay o 6px'lik bosluga
      tasar ve komsu dugmenin uzerine biner ⇒ YANLIS TIKLAMA. Gercek boyut
      buyumesi gap'i korur.

   Ikon 24px kalir; buyuyen yalnizca dokunulabilir kutudur (flex ortalama).        */
/* ⛔ KOSUL GENISLETILDI: yalniz `pointer: coarse` yazmak bu depoda OLCULEMEZ —
   supurme araci `newContext({viewport})` kullanir, `hasTouch`/`isMobile` VERMEZ,
   yani `pointer: coarse` HIC eslesmez ve duzeltme urun dogru oldugu halde
   olculemez kalir. Ayrica 361'in kendi mobil stratejisi GENISLIK tabanlidir
   (DirectionMobile vb.). Iki kosul birlikte: gercek dokunmatik VE dar ekran.   */
@media (pointer: coarse), (max-width: 900px) {
    .Actions a,
    .MicroButton,
    .ToggleButton,
    a.MicroButton,
    button.MicroButton {
        min-width: 44px;
        min-height: 44px;
    }
}


/* -- 15) KALAN 11px: `.ListHeader` ve `.ButtonText` (2026-08-28) -----------------
   14. maddeden sonra yeniden olculdu — OKUNMAZ 8 -> 3/4 dustu ama uc kaynak kaldi:

     SPAN 11px x3   "KPI Kategorisi" / "Esik Adi"  -> kolon basligi, `.ListHeader`
                    (14. maddedeki kural `.ListFieldTitles`i kapsiyordu, bunu DEGIL)
     ButtonText 11px x1  "Yeni Metrik"             -> yeni kayit butonunun metni

   Ikisi de ayni `1rem` kokunden geliyor (html tabani 11px).                      */
.ListHeader td,
.ListHeader td a,
.ListHeader td span,
.ListHeader th,
.ButtonText {
    font-size: 12px;
}


/* -- 16) LISTE DURUM CIPI 11px — DEVRALMAYI SPAN'DE KES (2026-08-28) -------------
   Bulgu "KPI Kategorisi 11px" KOLON BASLIGI SANILDI ve iki tur ona calisildi.
   CDP olcumu gercegi verdi: element sinifsiz bir SPAN ve ata zinciri
   `ListStateChip ListStateSort` -> `ListStateSummary` — yani LISTE DURUM CIPI
   (aktif siralama gostergesi), kolon basligi DEGIL.

   Kazanan kural: `.EntityTypeView.View_List .ListHeader td { font-size:11px !important }`
   (0-4-0 + !important). Ona karsi yazmak yerine DEVRALMAYI SPAN'DE KESIYORUM:
   rakip `td`'ye yaziyor, span devraliyor; span'e dogrudan deger vermek yeterli
   ve rakip kuralin kendi kapsamina (td) DOKUNMAZ.                                */
.ListStateChip,
.ListStateChip span,
.ListStateSummary,
.ListStateSummary span {
    font-size: 12px;
}


/* -- 17) KPI CIP ETIKETI: kutu 59px, hucre 168px (2026-08-28) --------------------
   KELIME_KIRIK'in tek kaynagi. OLCULDU (390px):

     .AggregateLabel   w=59px  display:flex  flex:0 1 auto  max-width:100%  fs:11px
     .Aggregate (kap)  w=168px display:GRID
     .Panel (cip)      w=340px

   Etiket bir GRID OGESI ve `flex:0 1 auto` onu icerik genisligine daraltiyor;
   168px'lik hucrenin 59px'ini kullaniyor ⇒ "Tanimli Metrik" / "Hesaplanan"
   iki satira boluniyor. Kutu ACILINCA metin tek satira siger.

   ⚠️ Font 11px de duzeltilir: `.AggregateLabel` probun `etiketMetin` MUAFIYETINDE
   oldugu icin OKUNMAZ sayilmiyordu — yani sayida gorunmeyen ama GERCEK bir
   okunabilirlik kusuru. Muafiyet "kusur degil" demez, "bu prob onu saymaz" der.  */
.Aggregate > .AggregateLabel,
.AggregateLabel {
    justify-self: stretch;
    width: 100%;
    font-size: 12px;
}

/* -- 18) ItemSelection cipi: chevron kirpilmasin, dokunma hedefi >=32/44px (2026-09-02) ---
   OLCULDU: `.Menu_Arrow_Down::after` chevron = line-height 1.2em + padding 8px*2
   (11px'te 29,2px; 14px'te 32,8px). Cipin yuksekligi `.ByFieldsRight .ItemSelection
   {min-height:1em}` + mobilde `--inputPadding:0!important` => chevron cipten uzun,
   `.ItemSelection{overflow:hidden}` onu KIRPIYOR (scrollHeight>clientHeight) ve
   dokunma hedefi <32px. Sinif tekrari (0,3,0) `.ByFieldsRight .ItemSelection`
   (0,2,0)'i sirada bagimsiz yener; zz-from-361.css'te yukseklik rakibi YOK.
   Form lookup'lari `30-item-forms.css:805` 33px!important ile kendi degerini korur. */
.ItemSelection.Menu_Arrow_Down.Menu_Arrow_Down {
    min-height: max(32px, calc(1.2em + 16px));
    box-sizing: border-box;
}
@media (pointer: coarse), (max-width: 900px) {
    .ItemSelection.Menu_Arrow_Down.Menu_Arrow_Down {
        min-height: 44px;
    }
}

/* -- 19) ActionPanel dokunma hedefleri 44px — TUM kadrajlar (2026-09-02, kullanici karari) --
   OLCULDU (sales, K-raporlar ekrani, iki kadraj): `.ETWClearByFields.ActionPanelButton`
   26x26px (pivot.css:510 `.PivotTable .ETWClearByFields{width/height:26px!important}`,
   zz-view-calendar.css:131 24x24px) · `.PivotHoverBtn` 30x30 (pivot.css:405) ·
   `.EmptyStateActionButton` 34px (20-uxcx-v5.css:44 padding 10px 24px).
   Content CSSText'te KANITLANMIS kural (13 ekran 78->100, ETWClearByFields 12->0,
   PivotHoverBtn 6->0; .claude/scripts/_content-css-toplu.py) platforma TASINDI —
   Content kapsami ActionPanel'e ULASMIYORDU. ⛔ `[class*=X]` attribute secici uretici
   hattinda pakete GIRMIYOR; sinif secici + sinif tekrari kullanilir.
   OZGULLUK (elde): rakipler `.PivotTable .ETWClearByFields` ve
   `.CalendarToolbarField .ETWClearByFields` (0,2,0), ilki !important ve Meta katmaninda
   (bu dosyadan ONCE), ikincisi zz-view-calendar (bu dosyadan SONRA) => ETWClearByFields
   icin UC sinif (0,3,0)+!important: siradan bagimsiz kazanir. `.PivotHoverBtn` ve
   `.EmptyStateActionButton` rakipleri (0,1,0) => cift sinif (0,2,0) yeter.
   `.ETWMenu_Open ... .ETWClearByFields` (0,5,0) yalniz width:100%; min-* ile celismez.
   Uretici: et-drilldown.js:688 · et-matrix.js:900. `pointer:coarse` SINIRI YOK (kullanici:
   tum kadrajlar); madde 14'ten farki budur. */
.ETWClearByFields.ETWClearByFields.ETWClearByFields {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.PivotHoverBtn.PivotHoverBtn {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.EmptyStateActionButton.EmptyStateActionButton {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    /* ⛔ 2026-09-05 — METIN KOYU CIKIYORDU, buton AA'yi GECMIYORDU (3.44 < 4.5).
       OLCULDU (canli satis/361Sales #mCommissionOpsHub, "Yeni Odeme Partisi"):
         zemin rgb(37,99,235) DOGRU uygulaniyor · metin rgb(22,24,29) YANLIS.
       Kok OZGULLUK + SIRA: `20-uxcx-v5.css:29` `color: var(--primaryOnPlan,#fff)`
       (0,1,0) NN katmaninda; rakip `zz-from-361.css:15` `body button{...}` (0,1,1)
       hem DAHA OZGUL hem DAHA SONRA yukleniyor => on plan kaybediliyordu.
       ⛔ `--primaryOnPlan` ayrica HAYALET TOKEN: tanim 0, kullanim 8 (hepsi
       fallback'e dusuyor) — ama fallback ZATEN `#fff`, yani kusur token DEGIL.
       Token'a DOKUNULMADI: tanimlamak degeri degistirmez (ayni deger) ama olu
       kurallari diriltme riski tasir (kayitli ders).
       ⇒ Care bu katmanin mevcut deseni: cift sinif (0,2,0) rakibin (0,1,1)'ini
       SIRADAN BAGIMSIZ yener. Zemin `#2563eb` uzerinde beyaz = **4.81** (AA gecer).
       `background` DEGISTIRILMEDI — olculdu, zaten dogru uygulaniyordu. */
    color: var(--primaryOnPlan, #fff) !important;
}

/* -- 12) ITEMVIEW KART ICI TIPOGRAFI (2026-09-04) ---------------------------
   OLCULDU (satis/SalesCommission, gercek Chrome 1440x765): sayfada 12px ALTI
   gorunur metin **207**; dagilimin %85'i IKI sinifta topLANIYOR --
       A < InputSpan            98 adet  11,55px   ("COMM-2026-011")
       SPAN < (FieldLabel ici)  78 adet   7,92px   ("MATRAH")
   Kok: html tabani 11px ve kart ici `em` carpanlari (0,66-0,9) esigin altina
   duSURUYOR. Bu katman 11 kez genisletilmisti ama ItemView kartlarindan yalniz
   `.Suffix`'i kapsiyordu -- kartlar sonradan eklendi, KAPSAM BAYATLADI.
   Yon GUVENLI: kural yalniz 12px'in ALTINI yukari ceker, hicbir seyi kucultmez.
   Ozgulluk sinif TEKRARIYLA alinir (`.X.X`) -- bu katmanin mevcut deseni. */
/* OLCULDU: rakip `.CardBox > .FieldSet_t .FieldLabel` (0-3-0)+!important
   `0.72rem` x 11px kok = 7,92px veriyor ve ESIT ozgullukte SONRA yuklendigi
   icin kazaniyordu. Care `!important` DEGIL (ikisinde de var) — bir sinif daha. */
/* OLCULDU (canli, kazanan kural + stylesheet SIRASI okundu): rakibin ikinci dali
   `.CardBox > .Line.LineBody .FieldLabel` (0,4,0) benimkiyle ESITTI ve stylesheet'te
   SONRA geliyordu (kural 7319 > 7104) ⇒ esit ozgullukte sonra gelen kazandi.
   Satir ici `!important` 12px verdi ⇒ mekanizma KASKAD, zoom/baska sey degil.
   Care: bir sinif daha — (0,5,0). */
.ItemView .FieldLabel.FieldLabel.FieldLabel.FieldLabel,
.ItemView .FieldLabel.FieldLabel.FieldLabel.FieldLabel *,
.CardBox .FieldLabel.FieldLabel.FieldLabel.FieldLabel,
.CardBox .FieldLabel.FieldLabel.FieldLabel.FieldLabel * {
    font-size: 12px !important;
}

/* `.DecimalSeperator{font-size:25%}` -> 12px x 0,25 = **3px**: ondalik virgulu
   pratikte GORUNMEZ (olculdu: 32 adet). `.DecimalPart` bu katmanda zaten 12px'e
   cekilmisti; ayrac kapsam DISINDA kalmis. */
.DecimalSeperator.DecimalSeperator {
    font-size: 12px !important;
    /* ⛔ 2026-09-05 — AYNI KURAL YARIM KALMISTI: font buyutuldu, ayrac GORUNMEZ kaldi.
       Meta (`.DecimalSeperator{opacity:0; font-size:25%; margin-top:.25em}`) bir
       UST-SIMGE MUHASEBE KALIBIDIR (`1.234`+ust simge kurus): orada ayracin gizli
       olmasi TASARIMDIR, cunku ust simge ayraci zaten ima eder.
       Bu katman o kalibi ZATEN GLOBAL OLARAK IPTAL ETTI (yukarida
       `.DecimalPart, .ListBody .DecimalPart{font-size:12px}` — kapsam YOK). Kurus
       artik normal boyutta; ayrac gizli kalinca sayi "7.200 00" diye okunuyor
       (olculdu: satis/ProductConfigurator kart yuzeyi, 10x yakin cekim — DOM'da
       eleman VAR, glif YOK; ayni kusur kontrol yuzeyinde de goruldu => platform).
       ⇒ Kalibi bozan katman, bozmayi TAMAMLAR. Kapsam bilerek GENIS: daraltma
       gerekcesi olculunce dustu (bu katman zaten kapsamsiz yaziyor).
       ⚠️ Liste yolunda GERILEME YOK: `.ListBody .DecimalSeperator` zaten
       `opacity:1; margin-top:0` istiyor — degerler BIREBIR AYNI.
       ⚠️ `vertical-align` ve kurusun `top`/`padding`'ine DOKUNULMADI (olculmedi). */
    opacity: 1;
    margin-top: 0;
}
.InputSpan.InputSpan,
.InputSpan.InputSpan > a,
.InputSpan.InputSpan > span {
    font-size: 12px !important;
}


/* -- 16) MOBIL DOKUNMA HEDEFI: madde 14'un KACIRDIGI IKI SINIF (2026-09-05) ------
   Madde 14 `.ToggleButton`'i ZATEN kapsiyor ama canli olcumde hala 26x26 cikti
   (satis/361Sales #mSalesCommission, 375x812, 443 gorunur hedef):
       A.EntityTypeLists        4 adet  128x28 / 124x28 / 112x28  (liste secici)
       A.ToggleButton.ToggleMenu 4 adet  26x26                     (gorunum menusu)
   ⇒ madde 14'un kurali RAKIBE YENILIYOR: `.ViewActions .ToggleMenu` (0,2,0) ve
   `html body.Mobile .Content.Content .PanelHeader ...{height:28px}` daha ozgul.
   Care bu katmanin mevcut deseni: SINIF TEKRARI ile ozgullugu asmak.
   ⛔ KAPSAM BILEREK DAR: maddedeki diger iki bulgu (INPUT arama 260x28 ve
   'Iceriye atla' skip link 96x35) buraya YAZILMADI — onlarin SINIF adi olculmedi,
   ve secici tahminle yazmak bu depoda kayitli bir kusur sinifidir. Onlar
   maddede ACIK kaliyor (`el.matches()` ile sinandiktan sonra eklenecek).
   ⛔ Yon GUVENLI: yalniz 44px'in ALTINI yukari ceker; hicbir seyi kucultmez.
   Kosul madde 14 ile AYNI (dokunmatik VEYA dar ekran) — masaustu DEGISMEZ.       */
@media (pointer: coarse), (max-width: 900px) {
    a.EntityTypeLists.EntityTypeLists,
    a.ToggleButton.ToggleMenu,
    .ToggleButton.ToggleMenu {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
/* -- 19) DOKUNMA HEDEFI: OLCULEN IKI SINIF (2026-09-05) ---------------------
   Madde 14/16'nin KACIRDIGI iki sinif; RAKIP KURALLAR document.styleSheets ile
   OKUNDU (tahmin degil):
     .UserToolButton  -> kazanan `.UserTools .UserToolButton{width:40px}` (min-* YOK)
                         + jenerik `[role=button]{min-*:24px}` ⇒ olculen 40x40.
                         `min-width` `width`i YENER ⇒ tek bildirim yeterli, layout bozulmaz.
     a.EntityTypeLists -> kazanan `.Content .PanelHeader .EntityTypeLists{min-width:0}`
                         ⇒ olculen 42x28. ⛔ O kural BILINCLIDIR (flex tasma onlemi:
                         min-width:auto icerik genisliginin altina inmez) — GENISLIGE
                         DOKUNULMAZ, yalniz YUKSEKLIK 28 -> 44 cekilir.
   ⛔ `.MicroButton` BILEREK DISARIDA: kazanan `a.MicroButton{min-*:24px}` yogun liste
      basligi icin yazilmis a11y tabanidir; 44'e cikarmak kirpma uretebilir (olculmedi).
      Karar backlog'a yazildi.
   Kosul madde 14 ile AYNI (dokunmatik VEYA dar ekran) — MASAUSTU DEGISMEZ.
   Yon GUVENLI: yalniz 44px'in ALTINI yukari ceker, hicbir seyi kucultmez.
   Sinif TEKRARI (0,2,0)/(0,2,1) kullanildi: `zz-a11y-*` alfabetik olarak
   `zz-from-361.css`'ten ONCE yuklenir, esit ozgullukte SONRAKI kazanir.         */
@media (pointer: coarse), (max-width: 900px) {
    .UserToolButton.UserToolButton {
        min-width: 44px;
        min-height: 44px;
    }
    /* RAKIP OLCULDU (document.styleSheets): `.PanelHeader > .TopRight
       .EntityTypeLists.ViewSwitcher` = 4 sinif, min-height:30px. Ozgulluk ELDE
       hesaplandi; asagisi 5 sinif ⇒ siradan BAGIMSIZ kazanir (!important yok). */
    a.EntityTypeLists.EntityTypeLists,
    .EntityTypeLists.EntityTypeLists.EntityTypeLists.ViewSwitcher.ViewSwitcher {
        min-height: 44px;
    }
}
/* -- 20) DOKUNMA HEDEFI: RAKIP !important — OLCULMUS BEDEL 0 (2026-09-05) ----
   Madde 19'un ViewSwitcher yarisi TUTMADI. Kazanan kural SAHIBIYLE okundu
   (document.styleSheets + priority):
     `html body.Mobile .Content.Content .PanelHeader.PanelHeader ...`
        -> min-height:28px !IMPORTANT   (mobil sikistirma, BILINCLI)
     `.PanelHeader > .TopRight .EntityTypeLists.ViewSwitcher`
        -> min-height:30px !important
   ⇒ Ozgullukle yenilemez; rakip !important tasidigi icin BURADA !important MESRUDUR.

   ⛔ ONCE BEDEL OLCULDU (Pixel 7, 412px, gercek cihaz kipi) — 'dikey alan kazanci'
      gerekcesi CURUDU: panel basligi ZATEN 44px, ViewSwitcher'i 44'e cikarmak
      sayfa yuksekligini 839 -> 839 (+0) birakiyor ve kirpik 0 -> 0.
      Yani 28px hicbir sey kazandirmiyor, yalniz dokunma hedefini WCAG altina indiriyor.

   .MicroButton: tarayicida RED/GREEN olculdu — 44px'te kirpik 3->3, ortusme 0->0,
   yatay tasma false, sayfa yuksekligi AYNI ⇒ gerileme YOK.
   Kosul madde 14 ile AYNI (dokunmatik VEYA dar ekran) — MASAUSTU DEGISMEZ.          */
@media (pointer: coarse), (max-width: 900px) {
    /* OZGULLUK ELDE HESAPLANDI (document.styleSheets, gercek eslesen alt-secici):
       RAKIP  (0,7,2) !important 28px:
         `html body.Tablet .Content.Content .PanelHeader.PanelHeader .EntityTypeLists.ViewSwitcher`
         (`body.Mobile` ikizi de var). Ilk yazdigim (0,6,3) idi -> b 6 < 7, KAYBETTI.
       Asagisi (0,7,3) ve (0,8,2): b esit/buyuk, c buyuk ⇒ KAZANIR. `body.Tablet|Mobile`
       yazilmaz — `html body` ikisini de kapsar ve kirilim kosulu medya sorgusundadir.     */
    html body .Content.Content .PanelHeader.PanelHeader a.EntityTypeLists.EntityTypeLists.EntityTypeLists,
    html body .Content.Content .PanelHeader.PanelHeader .EntityTypeLists.EntityTypeLists.EntityTypeLists.ViewSwitcher {
        min-height: 44px !important;
    }
    .MicroButton.MicroButton {
        min-height: 44px !important;
    }
    /* -- 20b) GRAFIK AYAR DUGMESI `a.MicroButton.ChartSettingsButton` 30x44 (2026-09-07) --
       Madde 20 yalniz YUKSEKLIGI aciyordu; genislik 30px kaldi (WCAG 2.5.8 alti).
       RAKIP KAYNAKTAN OKUNDU (60-chart.css:144):
         `.EntityTypeView .ViewBody_Chart.ChartPremiumHost .ChartFloatControls .ChartSettingsButton`
         { flex:0 0 30px !important; width:30px !important; min-width:30px !important }
         => ozgulluk (0,5,0) + !important. Madde 20'nin `.MicroButton.MicroButton` (0,2,0)
         kurali bu yuzden KAYBEDIYORDU (enjeksiyon deneyi 2026-09-06: 30x44 KALDI).
       CARE: rakibin secicisi + son sinif TEKRARI = (0,6,0), `!important` MESRU (rakip tasiyor).
       `min-width` TEK BASINA YETMEZ — rakip `flex:0 0 30px` ile flex-basis'i sabitliyor;
       uc bildirim birlikte yazilir. Masaustunde 30x30 WCAG 2.2 AA (24px) KARSILANIYOR,
       kural yalniz bu dokunmatik/dar-ekran blogunda (madde 14 kosulu). Komsu dugmelerle
       arasinda `gap:6px` oldugu icin `::after` hit-area REDDEDILDI (yanlis tiklama). */
    .EntityTypeView .ViewBody_Chart.ChartPremiumHost .ChartFloatControls .ChartSettingsButton.ChartSettingsButton {
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
    }
}

/* -- 21) DOKUNMA HEDEFI: skip link + liste ARAMA KUTUSU (2026-09-06) ----------
   Madde K-FE=42'nin BILEREK yazilmamis kalan 2 bulgusu. O madde soyle diyordu:
     "SINIF ADI OLCULMEDI. Secici tahminle yazmak bu depoda kayitli kusur sinifidir
      (el.matches() ile sinandiktan sonra eklenecek)."
   ⇒ Bu turda ikisi de OLCULDU ve URUNUN KENDI `el.matches()`'i ile SINANDI.

   KIMLIK (canli satis, 375x812, 2026-09-06):
     · skip link  -> sinifi YOK ama **id="__a11y_skiplink__"**, href="#PageZone_m",
                     kutu 96x35, SATIR ICI stil tasiyor:
                     `position:fixed; top:-40px; left:8px; z-index:100000; padding:8px 14px; ...`
       ⛔ Satir ici stil ozgullugu 1000'dir ve HER kurali yener — AMA yalniz KENDI yazdigi
          ozellikleri. `min-height`/`min-width` orada YAZMIYOR ⇒ ID seciciyle kazanilir.
          Bu TAHMIN degil: iki yonlu deneyle olculdu (asagida).
     · arama      -> `.ETSearch input` (adet 1, matches=true, kutu 260x28)
                     `input[type=search]` **0 dondu** (tip yoluyla bulunamaz) ve
                     `.SkipLink/.skip-link` **0** (varsayilan ad YOK) — ikisi de ELENDI.

   IKI YONLU DENEY (<style> enjeksiyonu; satir ici stili degistirmek GECERSIZ deneydir):
     TABAN        skip 96x35   ara 260x28
     CSS ENJEKTE  skip 96x44   ara 260x44        <- KAZANDI (!important GEREKMEDI)
     GERI ALINDI  skip 96x35   ara 260x28        <- sapma YOK

   BEDEL ONCE OLCULDU (madde 20'nin kendi dersi — "dikey alan kazanci" gerekcesi orada CURUMUSTU):
     sayfa yuksekligi 812 -> 812 (fark 0px) · kirpik metin 2 -> 2 · kadraj disi oge 0 -> 0
     · yatay kayma false -> false  ⇒ GERILEME YOK.

   ⛔ KAPSAM DISI (bilerek): `a.MicroButton.ChartSettingsButton` 30x44 — YALNIZ genislik
      eksik. Madde 20 `.MicroButton.MicroButton{min-height:44px}` yaziyor ama `min-width`
      YOK; enjeksiyon denendi ve KAZANAMADI (computed `min-width:30px` rakip kural daha
      ozgul, SAHIBI okunmadi). Ayri madde — tahminle yazilmaz.

   Kosul madde 14 ile AYNI (dokunmatik VEYA dar ekran) — MASAUSTU DEGISMEZ.            */
@media (pointer: coarse), (max-width: 900px) {
    /* ID secici (1,0,0); rakip yalniz satir ici `padding` — deneyle dogrulandi.
       inline-flex + center: min-height buyurken metin dikeyde ortalansin.             */
    #__a11y_skiplink__ {
        min-height: 44px;
        min-width: 44px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* 2026-09-14 (Dijital İkiz kare analizi, 390px): yukaridaki min-height:44px, satir ici `top:-40px`'ten
       BUYUK ⇒ odaksizken 4px BEYAZ SERIT her mobil sayfanin tepesinde gorunuyordu (elementFromPoint(60,1) =
       __a11y_skiplink__). Odaksizken 44px'lik kutuya uyan ofset; odakta satir ici `top:8px` gecerli kalir
       (:not(:focus) eslesmez) — connection-state.js focus/blur isleyicisi aynen calisir.                  */
    #__a11y_skiplink__:not(:focus) {
        top: -56px !important;
    }
    /* (0,1,1) yeterli — deneyde `!important` OLMADAN kazandi (28 -> 44).              */
    .ETSearch input {
        min-height: 44px;
        box-sizing: border-box;
    }
}

/* -- 22) KATMANIN YARIM BIRAKTIGI UST-SIMGE KALIBI + KALAN 12px ALTI (2026-09-06)
   Uc kalem; ucu de CANLI satis'ta IKI YONLU olculdu (taban -> enjekte -> geri al),
   iki kadrajda (1600x950 ve 390x844), iki rotada (mProductCatalog, mSalesExport).

   (a) `.ItemCountLabel` — BU DOSYANIN KENDI 2. MADDESI KALIBI YARIM BOZMUSTU.
       Kaynak kalip (views.css, Meta CssKey): etiket bir UST SIMGEDIR —
       `font-size:0.5em` (6px) + `top:0.5em` + `vertical-align:top` + `position:relative`.
       2. madde punto tabanini 12px'e cektiginde `0.5em` 3px'ten **6px**'e buyudu ve
       etiket kendi kutusunun ALTINDAN 6px tasti: `.ItemCount` sH=22 / cH=16.
       Punto artik tam boy oldugu icin oge bir ust simge DEGILDIR ⇒ ust-simge
       geometrisi de birlikte notrlenir. Bu, 2026-09-06'da `.DecimalSeperator`'da
       olculen "katman kalibi YARIM iptal etti" sinifinin AYNISIDIR.
       ⛔ Kutuyu buyutmek (min-height) CARE DEGILDIR: etiket yine 6px asagida kalir
          ve sayidan kopuk gorunur; kusur boyut degil HIZADIR.
       OLCUM: kirpik 4/4 ve 2/2 -> **0**; sH/cH 22/16 -> 16/16 (mobil 22/18 -> 18/18);
              geri alininca 22/16'ya DONDU (sapma yok, deney gecerli).

   (b) `.NavView.NavGrouped .NavGroupTitle` 9px — yan ray grup basligi.
       Kaynak kural (16-eksik-tokenlar.css) bilerek KOMPAKTTI ("ray 104px genis"),
       ama 9px bu deponun 12px esiginin cok altinda ve kullanici kurali
       "tum yazilar okunur olmali". Punto 12px'e cekilirken `letter-spacing`
       0.6px -> 0.3px indirildi ki dar rayda ayni satir butcesi korunsun.
       OLCUM: fs 9 -> 12px, baslik kirpmasi 0 -> **0** (yeni kirpma YOK),
              ray scrollHeight masaustunde 759 -> 759 (DEGISMEDI), mobil 692 -> 710
              (+18px, 5 baslik x ~3px; ray zaten kaydirilabilir cekmecede).

   (c) `.TabButton > span` 85% — 12px tabanda 10.2px veriyordu (mobilde 11.9px).
       Rakip `button.css`ta (Meta katmani, ozgulluk 0-1-1). Meta dosyasina
       DOKUNULMADI: o K-GEN'dir, MSI ile taşınır ve canliyi ezer. Bunun yerine
       sinif TEKRARI ile (0-2-1) — bu dosya Meta'dan SONRA yuklendigi icin
       `!important` GEREKMEDI.
       OLCUM: fs 10.2 -> 12px (mobil 11.9 -> 12), sekme etiketi kirpmasi 0 -> **0**.
       ⚠️ `min-height:3em`/`min-width:5em` em-turevlidir ⇒ sekme kutusu ~%18 buyur.
          Bu BILINCLIDIR (punto kucultmek bu depoda YASAK care). Kabul olcutu:
          `documentElement.scrollWidth > innerWidth` = **false** (taban da false) —
          yani kullanici hicbir icerige erisimini kaybetmiyor; sekme seridi zaten
          yatay kaydirilabilir. Kadraj disi oge sayaci 72 -> 73 (+1, ayni serit icinde).

   GERILEME KAPILARI (dordu de taban == sonra): kirpik metin 0/3 -> 0/3 ·
   sayfa yuksekligi 950/844 -> 950/844 · yatay kayma false -> false.
   NET: gorunur 12px alti metin 92/50/99/53 -> 87/44/94/47 (tam -5 ve -6, yani
   duzeltilen oge sayisiyla BIREBIR; surpriz yan etki yok).

   ⛔ KAPSAM DISI (bilerek, olculdu):
     · `.AggregateView.Aggregate > .AggregateLabel` 11.5px -> sahibi
       `zz-kpi-tile.css` ve o dosya calisma agacinda **M** (baska oturum ayni
       bilesende calisiyor). Baska dosyadan ezmek ayni bilesende IKINCI LEHCE
       uretir; kural geregi DOKUNULMADI.
     · `.NavTitle{11px}` -> bu dosyanin 5b maddesinin OLCULMUS karari; baska
       oturumun kararini sessizce cevirmek yasak.
     · SVG grafik etiketi 11px (63 oge) -> font-size SVG ozniteligiyle geliyor,
       CSS kurali eslesMIYOR; kanal K-FE/JS, core CSS DEGIL.
     · `.ButtonTitle` 9.6px -> kazanan kural `Content/@CSSText`ten enjekte
       (`... .ButtonTitle{font-size:80% !important}`) ve istemci onu core.css'ten
       SONRA yukler ⇒ core CSS'ten yenilemez. Kanal X-DOM.                        */
.ItemCountLabel.ItemCountLabel {
    top: 0;
    vertical-align: baseline;
}

.NavView.NavGrouped .NavGroupTitle.NavGroupTitle {
    font-size: 12px;
    letter-spacing: 0.3px;
}

.TabButton.TabButton > span {
    font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KULLANICI KARARI [2026-09-06] — uc kalem SORULDU (AskUserQuestion), ikisi
   onaylandi ve yazildi, ucuncusu onaylandi ama OLCULEMEDIGI icin YAZILMADI.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1) MODUL ADI (sol ust "Finans"/"Makina") — opacity .5 TAVANI AA'yi ULASILAMAZ kiliyor.
   OLCULDU (canli, CDP): kazanan kural `.Desktop .PageZone_logo span#ModuleTitle
   {opacity:.5}` ve core CSS'te de meta.xml'de de YOK => domain.css'ten geliyor.
   AMA 4/4 kiracida BIREBIR ayni 0.5 olculdu (finance·makina·OTEL·spor, ayri
   host + ayri Domain_* sinifi) => kiraciya ozel karar DEGIL, paylasilan varsayilan.
   TAVAN HESABI: opacity .5'te metin SIYAH bile olsa oran 3.92 (esik 4.5) — RENK
   degistirmek matematiksel olarak ise yaramaz, MEKANIZMA degismeli. .65 -> ~5.4.
   `!important` SART: domain.css core'dan SONRA yuklenir, ozgulluk tek basina yetmez
   (kayitli ders: "kural pakette olabilir ve yine de kaybeder"). */
.Desktop .PageZone_logo span#ModuleTitle {
    opacity: 0.65 !important;
}

/* 2) BILDIRIM ROZETI — 9px metin 16px daire icinde (kaynak: misc.css:858).
   Yazi 11px'e cikinca daire de buyumeli, yoksa rakam ("99+") kirpilir:
   min-width/height 16 -> 18px, border-radius yarisi kadar 8 -> 9px. */
.UserToolButton-badge.UserToolButton-badge {
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
}

/* 3) DUGME ALTI ETIKET ("Ana Sayfa") — computed 9.6px.
   OLCULEN ZINCIR (CDP, son kazanir):
     .ButtonTitle{12px} -> .Button > div{125%} -> {1.1em !important}
     -> .PageZone_RightNavs .Button.HasTitle .ButtonTitle{80% !important}  <- KAZANAN
   80% x 12px = 9.6px; tabani %100'e cekmek 12px verir.
   ⚠️ Rakipte `!important` VAR => sinif tekrari tek basina yetmez.
   RISK: dugme genisligi artar, dar ekranda arac cubugu SARABILIR — tasima sonrasi
   OLCULUR; sarma cikarsa bu blok GERI ALINIR. */
.PageZone_RightNavs .Button.HasTitle .ButtonTitle.ButtonTitle,
.PageZone_LeftNavs .Button.HasTitle .ButtonTitle.ButtonTitle {
    font-size: 100% !important;
}

/* ⛔ 4) SVG GRAFIK ETIKETLERI — kullanici ONAYLADI ama KURAL YAZILMADI: OLCULEMEDI.
   finans'ta kesfedilen 9 rotanin hicbirinde `svg text` bulunamadi: `svg` VAR
   (10-11 adet) ama hepsi ikon (path/circle), metin dugumu 0.
   Olcum: node .claude/scripts/_svg-metin-ara.js FINANS  -> exit 2 (OLCULEMEDI)
   Olcmedigim bir yuzeye kural yazmak calisan grafigi bozma riskidir; maddenin
   kendi notu da "eksen etiketleri sigmayabilir" diyor.
   YAPILACAK: grafik TASIYAN rotada (backlog: satis/#mSalesCommission) olcup
   ayri turda yazilacak. */

/* -- 11) `1rem` TUZAGININ IKI YENI ORNEGI + KOK 11px DEVRALMASI (2026-09-06 olculdu)

      Bolum 10 ayni sinifi PanelHeader/EntityTypeLists icin kapatmisti; asagidaki
      IKI yuzey o taramanin DISINDA kalmisti. Canli olcum (finans/#Persons, 1600x950,
      `document.fonts.ready` beklendi):

        oge                                   olculen  kaynak
        .FirstLetters > div  (A B C ... harf)  11,0px  font-size:1rem  (views.css:3573)
        .NavTitle > span     (yan ray etiketi) 11,0px  font-size HIC set edilmemis
                                                       -> kok html{font-size:11px} DEVRALINIYOR

      IKI YONLU DENEY (<style> enjeksiyonu; satir ici stil GECERSIZ deneydir):
        A) taban   : <12px = 20 oge · nav kirpik 0/8 · FL cember 22x22
        B) 12px    : <12px =  3 oge · nav kirpik 0/8 · FL cember 24x24 · yatay tasma YOK
        C) geri al : <12px = 20 oge · nav kirpik 0/8   => DENEY GECERLI

      KIRPMA RISKI OLCULDU, YOK:
      · `.FirstLetters > div` olculeri `2em`dir ve `em` ogenin KENDI font'una cozulur
        => font 11->12px olunca cember de 22->24px orantili buyur; kirpma 0/9.
      · `.NavTitle` uzerinde `-webkit-line-clamp:2` VAR (16-eksik-tokenlar.css:221);
        buyutmek clamp'i tetikleyebilirdi — olculdu, 8 etiketin 0'i kirpik.
        (Bilgi kaybi ayrica korunuyor: ebeveyn `tooltip` TAM metni tasiyor.)

      Kalan 3 oge KUSUR DEGIL: 2'si `UserToolButton-badge` (11px KULLANICI KARARI,
      2026-09-06) + 1 sinifsiz DIV (ayri olculecek).                                */
.FirstLetters > div {
    font-size: 12px;
}

#PageZone_LeftNavs .NavTitle > span,
#PageZone_RightNavs .NavTitle > span {
    font-size: 12px;
}

/* -- 11b) Content ICI NavView etiketleri 11px (2026-09-14) ---------------------------------
   Olculdu (satis #mOrgsHome, admin, 1440): `.Panel_n .Nav` etiketleri 11px < 12px taban.
   Kaynak bu dosyanin 5b tabani (`.NavTitle{11px}`, 0-1-0). Ray (PageZone) yukarida zaten 12px.
   KAPSAM BILEREK DAR: yalniz `.Content` icindeki NavView.
     · MyPage raylarinin 9.6px'i KULLANICI KARARI (pagezone.css 2026-09-11, `!important`) —
       bu kural onu EZMEZ (important yok) ve ezmemeli; ayri karar ister.
     · `.NavView_SubEntities .NavTitle` kendi 12.5px'ini (`!important`) korur.            */
.Content .NavView .NavTitle,
.Content .NavView .NavTitle > span {
    font-size: 12px;
}

/* -- 22) `.Choice > .ButtonText` 12x12'ye COKUYOR — secenek etiketi KIRPILIYOR (2026-09-07) --
   Olculdu (satis/TechnicalService mTSInvoiceHome): "Kurulum" (gerekli 49x13) kutu 12x12,
   "Arıza"/"Bakım" ayni; kap `overflow:hidden` => GERCEK kirpma, dikey yazi degil.
   KOK KAYNAKTA (itemstyles.css:3447):
     .Choice > .ButtonText { min-width:1em; text-overflow:ellipsis; overflow:hidden; max-width:100% }
   `overflow:hidden` inline-block'un min-content tabanini SIFIRA ceker (kayitli ders), `min-width:1em`
   o tabanin YERINE gecer ve icerigi DEGIL sabit 12px'i dayatir; `.Choice` (flex ogesi) o tabana
   kadar SIKISABILIR. Care `fit-content`: taban = min(metin genisligi, kullanilabilir alan)
   => etiket sigiyorsa ASLA kirpilmaz, gercekten dar kapta ellipsis DAVRANISI aynen kalir.
   GERILEME OLCUMU (OUTPUT/361.xml, 23.860 Choice/@Title_TR): tek karakterli 98 (%0,4) — fit-content
   tek harfte 1em ile AYNI; p50 8 · p90 16 · p99 27 karakter; >40 karakter 71 (%0,3) — onlar zaten
   siginca sigar, sigmayinca eskisi gibi kirpilir. Ozgulluk (0,3,0) > rakip (0,2,0); zz-* katmani
   Meta'dan sonra yuklenir. `!important` GEREKMEDI.                                             */
.Choice > .ButtonText.ButtonText {
    min-width: fit-content;
}

/* -- 23) SingleItemHeader sol etiketi 8em'e KIRILIYOR · coklu lookup cipleri USTUSTE (2026-09-14) --
   Olculdu (makina PLM, 1600x950 + 390x844):
   (a) Header L-C-R bloklarinda `LabelPosition="Left"` etiketi fields.css:864 kurali
       `width/min-width/max-width: var(--fieldLabelWidth)` (8em) ile SABIT kutuya giriyor,
       layout.css:3536 `.SingleItemHeader span { white-space:normal }` da metni sariyor =>
       "Sorumlu:" / "Toplam Maliyet:" iki satira bolunuyor, deger asagi kayiyor.
       Care: yalniz Header kapsaminda etiket icerik kadar genis ve tek satir; form etiketleri DEGISMEZ.
   (b) `MultipleChoice="True"` lookup alanlari (field-default.js) tum secenekleri `.Choices` icine
       dugme olarak basiyor; components.css:2 `.Choices > a { flex:1 }` ile sikisip ustuste biniyordu.
       Care: satir sarar, cip icerik kadar yer alir (hicbir secenek dusurulmez).                   */
.SingleItemHeader .Field.LabelPositionLeft > .FieldLabel {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}
.SingleItemHeader .Field.LabelPositionLeft > .FieldLabel a,
.SingleItemHeader .Field.LabelPositionLeft > .FieldLabel a span {
    white-space: nowrap !important;
}
.FieldValue.MultipleChoices > .Choices {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.FieldValue.MultipleChoices > .Choices > .Choice {
    flex: 0 0 auto !important;
    max-width: 100%;
}

/* -- 24) Az alanli formda ETIKETLI TextArea bos yuksekligi YUTUYOR (2026-09-14) --
   Olculdu (makina #PLMLifecycleTemplate/.../LCT001, 1600x950): 3 alanli Detail formunda tek satirlik
   Aciklama kutusu 437 px. Kural zinciri (getComputedStyle + eslesen kurallar): fields.css:1329
   `.FieldTextArea { flex:1 }` + `.Field > .FieldValue { flex:1 1 0% }` + `.SingleItem > .ItemBody > .Fields`
   flex:1 -> kalan tum dikey alan TextArea'ya gidiyor; XML min-height:72px yalniz TABAN.
   Tam boy not editoru bilerek `LabelPositionNone` + height:100% kullaniyor (fields.css:486) -> o yol DISARIDA.
   Care: etiketli TextArea icerik + 7 satir tabaninda durur, kullanici yeniden boyutlandirabilir; metin DUSMEZ. */
.SingleItem .Field.FieldTextArea:not(.LabelPositionNone) {
    flex: 0 0 auto !important;
}
.SingleItem .Field.FieldTextArea:not(.LabelPositionNone) > .FieldValue {
    flex: 0 0 auto !important;
}
.SingleItem .Field.FieldTextArea:not(.LabelPositionNone) > .FieldValue textarea {
    min-height: 7.5em;
    height: auto;
    resize: vertical;
}

/* -- 25) Kokpit kare turunda olculen dort kabuk kusuru (2026-09-15, makina canli, TG 390x844 + 1600x950) --
   (a) Ust modul cipi: #DigitalTwinHeaderTrigger `position:absolute; right:8px` ve 30-44 px genislikte, ama
       `.EntitySelector > .Button` sag payi 2em (mobilde 21 px). Olculdu: ButtonText x154-237, ikon x216-240
       -> "SERVIS VE YEDEK PARCA" ikonun altina giriyor, her sayfada. Care: tetik varken sag pay ikon + bosluk.
   (b) Mobil KPI serit: 17-content-ritmi.css `justify-content:flex-end !important` mobilde de kaziyor; kiraci
       domain.css'inin mobil `center` niyeti ozgullukte kaybediyor -> kartlar saga yasli, solda bos serit.
   (c) Mobil gorunum basligi uc noktayla kesiliyor ("TAKIP EDILEN PARCALARIN KALAN O..."). BURADA COZULMEDI:
       zz-mobil-baslik-ortala.css basligi 15 px yukseklikte mutlak ortaliyor; A/B'de sarma verilince iki satir
       ustten KIRPILDI (kare ile goruldu). Yer acmak baslik bandini yeniden tasarlamak demek ve o dosya ailesi
       (zz-panelheader-esnek.css) su an baska oturumda degisiyor -> backlog K-FE.
   (d) Mobil DashboardFlow: her listenin NewItemFAB'i viewport'a sabit; kokpitte 4 FAB ayni noktada ust uste ve
       ustteki gezinme kutularini/"Yanlis mi?" dugmesini ortuyor. Care: FAB kendi gorunumunun sag-altina iner.
   A/B (canliya yazmadan addStyleTag, 4 mobil + 3 masaustu ekran): KPI sol/sag bosluk 106/5 -> 53/58 px,
   FAB altinda kalan tiklanabilir 2 -> 0, masaustu olcumleri degismedi. */
.EntitySelector > .Button:has(> #DigitalTwinHeaderTrigger) {
    padding-right: 58px !important;
}
@media (max-width: 767px) {
    html body.Mobile .EntitySelector > .Button:has(> #DigitalTwinHeaderTrigger) {
        padding-left: 10px !important;
        padding-right: 54px !important;
    }
    html body.Mobile .EntitySelector > .Button:has(> #DigitalTwinHeaderTrigger) > .ButtonText {
        font-size: 11px !important;
        line-height: 1.15 !important;
    }
    html body .Content .ContentHeader .Panel_kpis,
    html body .Content .ContentHeader > .Panel:has(> .AggregateView),
    html body .Content .ContentHeader > .DirectionFloat:has(> .AggregateView),
    html body .Content .ContentHeader .DirectionFloat:has(> .AggregateView) {
        justify-content: center !important;
    }
    html body.Mobile .Content.DashboardFlow .EntityTypeView:has(> .NewItemFAB) {
        position: relative;
    }
    html body.Mobile .Content.DashboardFlow .EntityTypeView > .NewItemFAB {
        position: absolute !important;
        bottom: 12px !important;
        right: 12px !important;
    }
}
/* zz-ai-inbox.css — Agent Inbox (Onay Kutusu) SidePanel body (#35, T22)
 * Post-Meta core tier (zz-*): loads AFTER Meta so the ✦ premium surface beats
 * default ElementStyles. Scoped entirely under .AInbox — no global bleed. Uses
 * platform tokens (var(--primaryAA)/var(--...)) with safe fallbacks so it
 * degrades in any domain and follows light/dark automatically. */

/* ⛔⛔ SIDEPANEL GIZLEME KURALI GERI KAZANILIR (2026-09-07, kullanici bildirimi:
 *    "Sidepanel de tum tablara tikla oncekiler kaliyor, ekran bozuluyor").
 *
 *    OLCULEN KOK: gorunurluk CSS ile yonetilir —
 *      misc.css:773  .SidePanel-content         { display: none }   (0,1,0)
 *      misc.css:774  .SidePanel-content.active  { display: flex }
 *    Asagidaki `.AInbox { display:flex }` de (0,1,0) ve `zz-*` katmani Meta'dan
 *    SONRA yuklendigi icin ESIT ozgullukte KAZANIYOR => Onay Kutusu pane'i
 *    `active` OLMADAN da gorunur kaliyordu. Sonuc: agentinbox'tan sonraki HER
 *    sekmede (notification/rtc/guide/search) IKI pane ust uste — olculdu:
 *      "paneGorunur": 2, "gorunurKimlikler": [SidePanelPane_agentinbox, ...]
 *
 *    Care `!important` DEGIL OZGULLUK: `:not(.active)` bir sinif sayilir ⇒ (0,2,0)
 *    ve pane sinifi ne olursa olsun yener. Kural BILEREK GENEL yazildi (yalniz
 *    .AInbox degil): gelecekte pane sinifina `display` yazan her arac ayni
 *    sekilde sizardi — kapsam tek tek yamanmaz, sinif kapatilir.
 *    ⚠️ Sinif taramasi: bugun `display` yazan TEK pane sinifi .AInbox'ti
 *    (.AiP dahil digerleri yazmiyor) — yani bu kural bugun yalniz onu duzeltir,
 *    yarin dogacak olani da onler. */
.SidePanel-content:not(.active) { display: none; }

.AInbox {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--PageBackColor, #f7f8fa);
}

/* ── header ── */
.AInbox_Head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(180deg, rgba(0, 124, 194, 0.06), rgba(0, 124, 194, 0));
}
.AInbox_HeadSpark {
    font-size: 18px;
    line-height: 1;
    color: var(--primaryAA, #007cc2);
    filter: drop-shadow(0 0 6px rgba(0, 124, 194, 0.35));
}
.AInbox_HeadText { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.AInbox_HeadTitle { font-size: 15px; font-weight: 700; color: var(--TextColor, #1f2330); letter-spacing: -0.01em; }
.AInbox_HeadSub { font-size: 12px; color: rgba(0, 0, 0, 0.45); }

/* ── scroll body ── */
.AInbox_Body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }

/* ── loading ── */
.AInbox_Loading { display: flex; justify-content: center; align-items: center; padding: 48px 0; }
/* Self-contained spinner (does not depend on misc.css's .NP_Spinner being served). */
.AInbox_Loading .NP_Spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(0, 124, 194, 0.2);
    border-top-color: var(--primaryAA, #007cc2);
    animation: ai-inbox-spin 0.8s linear infinite;
}
@keyframes ai-inbox-spin { to { transform: rotate(360deg); } }

/* ── card ── */
.AInbox_Card {
    position: relative;
    display: flex;
    background: var(--CardBackColor, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.AInbox_Card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); border-color: rgba(0, 124, 194, 0.28); }
.AInbox_CardRail { width: 4px; flex: 0 0 4px; background: linear-gradient(180deg, var(--primaryAA, #007cc2), rgba(0, 124, 194, 0.4)); }
.AInbox_CardMain { flex: 1; min-width: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }

.AInbox_Card-open { border-color: rgba(0, 124, 194, 0.4); }
.AInbox_Card-approved { border-color: rgba(16, 185, 129, 0.5); background: linear-gradient(180deg, rgba(16, 185, 129, 0.05), transparent); }
.AInbox_Card-approved .AInbox_CardRail { background: linear-gradient(180deg, #10b981, rgba(16, 185, 129, 0.4)); }
.AInbox_Card-undone { opacity: 0.6; }

/* ── card head ── */
.AInbox_CardHead { display: flex; align-items: baseline; gap: 8px; cursor: pointer; }
.AInbox_Spark { font-size: 12px; color: var(--primaryAA, #007cc2); flex: 0 0 auto; }
.AInbox_CardTitle { flex: 1; min-width: 0; font-size: 14px; font-weight: 650; color: var(--TextColor, #1f2330); line-height: 1.3; }
.AInbox_CardTime { flex: 0 0 auto; font-size: 11px; color: rgba(0, 0, 0, 0.4); white-space: nowrap; }

/* ── meta chips ── */
.AInbox_CardMeta { display: flex; flex-wrap: wrap; gap: 6px; }
.AInbox_Chip {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    line-height: 1.6;
    white-space: nowrap;
}
.AInbox_Chip-et { background: rgba(0, 124, 194, 0.12); color: var(--primaryAA, #007cc2); }
.AInbox_Chip-conf { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.AInbox_Chip-ops { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.55); }

/* ── detail ── */
.AInbox_CardDetail {
    border-top: 1px dashed rgba(0, 0, 0, 0.09);
    padding-top: 10px;
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.AInbox_DetailLabel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(0, 0, 0, 0.4); }
.AInbox_RationaleBody { font-size: 13px; color: var(--TextColor, #333); line-height: 1.5; white-space: pre-wrap; }
.AInbox_OpsRaw { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; white-space: pre-wrap; word-break: break-all; color: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.03); border-radius: 8px; padding: 8px; }
.AInbox_OpsEmpty, .AInbox_OpKVEmpty { font-size: 12px; color: rgba(0, 0, 0, 0.4); font-style: italic; }

.AInbox_OpsList { display: flex; flex-direction: column; gap: 8px; }
.AInbox_Op { background: rgba(0, 124, 194, 0.04); border: 1px solid rgba(0, 124, 194, 0.12); border-radius: 10px; padding: 8px 10px; }
.AInbox_OpHead { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.AInbox_OpDot { font-size: 10px; color: var(--primaryAA, #007cc2); }
.AInbox_OpTitle { font-size: 12.5px; font-weight: 700; color: var(--TextColor, #2a2f3c); }
.AInbox_OpKV { display: flex; flex-direction: column; gap: 3px; }
.AInbox_KVRow { display: flex; gap: 8px; font-size: 12px; line-height: 1.5; }
.AInbox_KVKey { flex: 0 0 40%; max-width: 40%; color: rgba(0, 0, 0, 0.5); font-weight: 600; word-break: break-word; }
.AInbox_KVVal { flex: 1; min-width: 0; color: var(--TextColor, #222); word-break: break-word; }

/* ── actions ── */
.AInbox_CardActions { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.AInbox_Btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 650;
    padding: 7px 14px;
    border-radius: 9px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.15s ease, opacity 0.15s ease, background 0.15s ease;
    line-height: 1;
}
.AInbox_Btn svg { flex: 0 0 auto; }
.AInbox_Btn.is-busy { opacity: 0.55; pointer-events: none; }
.AInbox_Btn:disabled { opacity: 0.55; cursor: default; }

.AInbox_Btn-approve { background: var(--primaryAA, #007cc2); color: #fff; }
.AInbox_Btn-approve:hover { filter: brightness(1.08); }
.AInbox_Btn-reject { background: transparent; color: rgba(0, 0, 0, 0.55); border-color: rgba(0, 0, 0, 0.14); }
.AInbox_Btn-reject:hover { background: rgba(239, 68, 68, 0.08); color: #dc2626; border-color: rgba(239, 68, 68, 0.3); }
.AInbox_Btn-undo { background: transparent; color: var(--primaryAA, #007cc2); border-color: rgba(0, 124, 194, 0.35); }
.AInbox_Btn-undo:hover { background: rgba(0, 124, 194, 0.08); }

.AInbox_ApprovedTag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #059669;
    background: rgba(16, 185, 129, 0.12);
    padding: 5px 10px;
    border-radius: 8px;
}

/* ── empty / error ── */
.AInbox_Empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px 24px; gap: 8px; margin: auto; }
.AInbox_EmptyIcon { color: var(--primaryAA, #007cc2); }
.AInbox_EmptyTitle { font-size: 15px; font-weight: 700; color: var(--TextColor, #333); }
/* #45v2 — SABIT alfa 3.32:1 veriyordu (olculdu 2026-09-07, canli satis, iki
   temada da). Token + OLCULMUS sonumleme her iki temada dogru yonde calisir ve
   ayri bir koyu-tema kuralina gerek BIRAKMAZ. */
.AInbox_EmptyDesc { font-size: 13px; color: var(--textColor); opacity: .84; line-height: 1.5; max-width: 260px; }

/* ── dark theme ── */
.dark-theme .AInbox { background: var(--PageBackColor, #14161c); }
.dark-theme .AInbox_Head { border-bottom-color: rgba(255, 255, 255, 0.08); }
.dark-theme .AInbox_HeadTitle { color: var(--TextColor, #e8eaf0); }
.dark-theme .AInbox_HeadSub, .dark-theme .AInbox_CardTime { color: rgba(255, 255, 255, 0.45); }
.dark-theme .AInbox_Card { background: var(--CardBackColor, #1c1f27); border-color: rgba(255, 255, 255, 0.08); }
.dark-theme .AInbox_CardTitle, .dark-theme .AInbox_OpTitle, .dark-theme .AInbox_KVVal, .dark-theme .AInbox_RationaleBody, .dark-theme .AInbox_EmptyTitle { color: #e8eaf0; }
.dark-theme .AInbox_Chip-ops { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); }
.dark-theme .AInbox_KVKey { color: rgba(255, 255, 255, 0.5); }
.dark-theme .AInbox_CardDetail { border-top-color: rgba(255, 255, 255, 0.1); }
.dark-theme .AInbox_OpsRaw { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.6); }
.dark-theme .AInbox_Btn-reject { color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.16); }
/* Koyu tema override'i KALDIRILDI: `--textColor` zaten temayla doner; sabit
   alfa burada da 3.32:1 veriyordu. */

/* Kart çıkış animasyonu — _animateOut sınıf tabanlı (no-CSS-in-JS, review fix 2026-07-02) */
.AInbox_Card-leaving {
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(100%);
    max-height: var(--ainbox-card-h, 200px);
}
.AInbox_Card-collapsed {
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-width: 0 !important;
    overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
    .AInbox_Card-leaving { transition: none; }
}
/* ================================================================
   T18b (2026-07-02) — App-switcher mega-menu type-to-filter.

   Styles the search box injected at the top of the top-center app
   switcher hover menu (RootHoverMenu) by c.js AppSwitcherFilter(), and
   the .NavFilterHidden class that JS toggles to hide non-matching apps.

   Post-Meta zz-* tier: loads AFTER Meta CSS so .NavFilterHidden reliably
   beats any Meta/domain display rule on .Nav items.
   ================================================================ */

/* Sticky search header pinned to the top of the mega-menu. */
.RootHoverMenu .RootHoverMenuFilter {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 8px 10px;
    background: var(--backColor, #fff);
    border-bottom: 1px solid rgba(var(--shadowRGB, 0, 0, 0), 0.08);
}

.RootHoverMenu .RootHoverMenuFilterInput {
    box-sizing: border-box;
    width: 100%;
    min-width: 180px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--textColor, #222);
    background: var(--backColor2, rgba(127, 127, 127, 0.08));
    border: 1px solid rgba(var(--shadowRGB, 0, 0, 0), 0.18);
    border-radius: 8px;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.RootHoverMenu .RootHoverMenuFilterInput::placeholder {
    color: rgba(var(--textRGB, 34, 34, 34), 0.5);
}

.RootHoverMenu .RootHoverMenuFilterInput:focus {
    border-color: var(--primaryColor, #3b82f6);
    box-shadow: 0 0 0 3px rgba(var(--primaryColorRGB, 59, 130, 246), 0.18);
}

/* JS toggles this class on non-matching .Nav entries (leaves + empty
   category rows). !important so it wins regardless of a .Nav's own
   display rule from Meta/domain layers. */
.RootHoverMenu .NavFilterHidden {
    display: none !important;
}
/* ============================================================================
   zz-assistant.css — P5 proaktif asistan katmanı (2026-07-02)

   Post-Meta core tier: loads AFTER Meta ElementStyles, so plain-specificity
   rules win with NO !important. Owns the ✦ AI/assistant surfaces added in P5:
     • T26  boş-durum asistanı  (.EmptyStateAssist*)
     • T27  liste içgörü çipleri (.InsightChip*, .InsightPopover*, tr.InsightRowHighlight)
     • T28  mükerrer-kayıt uyarı bandı (.DupWarnBand*)

   TASARIM: AI/asistan öğeleri ✦ ile işaretli ve AYRIŞAN bir vurgu tonu (mor/violet)
   taşır — böylece platformun mavi info tonundan görsel olarak ayrılır (plan §2b).
   Düşük gürültü: çipler/bantlar yalnız güven eşiği aşılınca çizilir (JS tarafı).
   ============================================================================ */

:root {
    --assist-accent: #7c3aed;          /* violet — AI/asistan ayrışan tonu (TEK kaynak) */
    --assist-accent-rgb: 124, 58, 237;
    --assist-accent-strong: #5b3ec8;   /* koyu başlık metni (light tema) */
    --assist-accent-soft: #b9a6f5;      /* açık başlık metni (dark tema) */
    --assist-warn: #b45309;            /* amber-700 — mükerrer uyarı metni */
    --assist-warn-bg: #fef3c7;         /* amber-100 — sarı band zemini */
    --assist-warn-border: #f59e0b;     /* amber-500 */
}

/* ── T26: boş-durum asistanı ─────────────────────────────────────────────── */
.EmptyStateAssist {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 10px auto 2px;
    padding: 8px 14px;
    max-width: 460px;
    border-radius: 10px;
    background: rgba(var(--assist-accent-rgb), 0.06);
    border: 1px solid rgba(var(--assist-accent-rgb), 0.18);
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}
.EmptyStateAssistStar {
    color: var(--assist-accent);
    font-size: 12px;
    margin-right: 4px;
}
.EmptyStateAssistText { color: var(--textColor, #374151); opacity: 0.9; }
.EmptyStateAssistActions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    margin-top: 2px;
}
.EmptyStateAssistLink {
    background: transparent;
    border: 0;
    padding: 2px 4px;
    color: var(--assist-accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.EmptyStateAssistLink:hover { background: rgba(var(--assist-accent-rgb), 0.10); text-decoration: none; }
.EmptyStateAssistAlt { color: var(--assist-warn); }

/* ── T27: liste içgörü çipleri — ALT-ORTA yüzen InsightDock (2026-07-02).
   SIFIR-LAYOUT: dock akışta DEĞİL — host'a relative, dock absolute alt-orta.
   Ne chip header'ı sıkıştırır ne gövdeye yükseklik ekler → scroll üretmez. */
.InsightDockHost { position: relative; }

/* ⛔⛔ 2026-08-10 — DOCK, LİSTENİN SON SATIRLARINI ÖRTÜYORDU (mobilde gövdenin %16'sı).
   ÖLÇÜLDÜ (localhost/Maya, OrgPersonsHome, 375px): `.ListBody` y 488..733 · dock y 823..860
   ⇒ 37px örtülüyor; mobilde gövde zaten yalnız 234px olduğu için kayıp oransal olarak büyük.

   ⛔ NAİF ÇÖZÜM ÖLÇÜLDÜ VE ELENDİ: dock'u `position:static` yapmak (akışa sokmak) mobilde
   `ActiveContent` içinde **101px'lik İKİNCİ KAYDIRICI** doğurdu (önce 0'dı). Dosyanın kendi
   "SIFIR-LAYOUT" gerekçesi MEŞRU — dock akışta olmamalı.

   DOĞRU ÇARE: dock akışta KALMAZ, ama altındaki kaydırılabilir gövdeye onun kadar YER AYRILIR.
   Padding kaydırıcının İÇİNDEdir ⇒ yeni kaydırıcı doğmaz, yalnız son satır dock'un altından
   çıkar. Değer ölçümden: dock yüksekliği ~37px + 10px alt boşluk ⇒ 48px güvenli.
   ⚠️ YALNIZ dock GERÇEKTEN VARKEN uygulanır (`.InsightDockHost` sınıfı host'a dock çizilince
   ekleniyor) — dock yoksa boşluk da yok, yani dock'suz ekranlarda hiçbir şey değişmez. */
.InsightDockHost .ListBody,
.InsightDockHost .ETWBody { padding-bottom: 48px; }

/* ⛔ DUZELTME 2026-08-20 — "masaustunde dock daha kisa duruyor" VARSAYIMI OLCULDU VE
   CURUDU. Masaustunde (1600x950) dock yuksekligi **38px** ve `bottom:10px` ile
   yerlesiyor => kabin altindan **48px** yer gerekiyor. 28px BU YUZDEN YETMIYORDU:
     /mOvertimeRequests  .ListBody pad-bottom=28px · dock h=38 top=871 · ORTULEN SATIR 2
   Deger mobildekiyle AYNI olmali; ayri bir masaustu degeri tutmanin olculmus bir
   gerekcesi YOK. (Medya sorgusu, gelecekte gercek bir fark olcusulurse diye duruyor.)
   ⚠️ `.InsightDockHost .ETWBody` secicisi bu yerlesimde HIC eslesmiyor: host'un
   KENDISI `.ETWBody` (torun degil). Zararsiz ama olu — kayda geciriliyor. */
@media (min-width: 768px) {
    .InsightDockHost .ListBody,
    .InsightDockHost .ETWBody { padding-bottom: 48px; }
}

/* ⛔⛔ 2026-08-28 — REZERV, DOCK'UN **KALDIRILDIGI** HALI ICIN HIC GUNCELLENMEMISTI.
   `70-list.css` (2026-08-20) footer'li listede dock'u `bottom:10px` -> `bottom:46px`
   yukari aldi (alt toplam satirini ortmesin diye) ama bu dosyadaki REZERV `48px`'te
   kaldi. Iki mekanizma AYRI dosyada yasadigi icin biri degisince digeri bayatladi:
   dock 36px yukari cikti, govdeye ayrilan yer 0px arti.

   OLCULDU (localhost/maya `#myTasks`, 1600x950, gercek dock enjekte edilerek):
     host `.ETWBody`   945..1127
     dock              1043..1081  (h=38, computed bottom:46px)
     `.ListBody`        987..1100  (padding-bottom 48px => icerik kutusu 1052'de biter)
     SON SATIR         1020..1052  "Cevaplaniyor 2025-2026 1. Donem..."  <- ORTULUYOR (9px)
   Gereken rezerv = listBody.bottom - dock.top = 1100 - 1043 = **57px** > 48px.

   DEGER TAHMIN DEGIL TURETME: dock host'un ALTINDAN `46px (kaldirma) + 38px (dock)`
   = **84px** yer ister. `.ListBody`'nin alt kenari host'un alt kenarindan ASLA asagida
   olamayacagi icin (footer arada) 84px HER footer yuksekliginde YETERLIDIR — bu ekranda
   27px pay birakir. Fazla rezerv zararsizdir (kaydiricinin ICINDE, yeni kaydirici
   dogurmaz*), eksik rezerv VERIYI ORTER.
   *tek yan etki: bu ekranda liste tam sigiyordu (scrollH==clientH); 84px ile 36px'lik
    kaydirma paylari dogar — son satir dock'un altindan CIKARILABILIR hale gelir, ki
    zaten mekanizmanin amaci budur.

   ⛔ KOSUL, KALDIRMA KURALIYLA BIREBIR AYNI (`:has(.ListFooter)`, ayni uc ViewType):
   footer yoksa dock 10px'te kalir ve 48px'lik rezerv DOGRUDUR — o ekranlar degismez.
   `:has()` desteklenmeyen motorda kural sessizce duser ve bugunku davranis korunur.
   ⚠️ SINIR: dock cipleri SARARSA (flex-wrap) yuksekligi 38px'i asar ve 84px yetmez;
   bu CSS'in olcemeyecegi bir durumdur — cip sayisi artarsa YENIDEN OLCULMELI. */
.EntityTypeView.View_List:has(.ListFooter) .InsightDockHost .ListBody,
.EntityTypeView.View_Tree:has(.ListFooter) .InsightDockHost .ListBody,
.EntityTypeView.View_Tree2:has(.ListFooter) .InsightDockHost .ListBody {
    padding-bottom: 84px;
}
.InsightDock {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 12px;
    width: max-content;
    max-width: min(92%, 720px);
    border-radius: 999px;
    border: 1px solid rgba(var(--assist-accent-rgb), 0.18);
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(var(--assist-accent-rgb), 0.05));
    box-shadow: 0 3px 14px rgba(20, 20, 50, 0.12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.InsightDock:empty { display: none; }         /* boş dock sıfır iz → reveal'ı geciktirmez */
html.dark-theme .InsightDock {
    background: linear-gradient(180deg, rgba(36,36,54,0.92), rgba(var(--assist-accent-rgb), 0.10));
    border-color: rgba(var(--assist-accent-rgb), 0.30);
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
/* eski header slotu kalıntısı görünmesin */
.InsightChips { display: none !important; }

.InsightChip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 340px;
    padding: 3px 12px;
    height: 24px;
    border-radius: 12px;
    border: 1px solid rgba(var(--assist-accent-rgb), 0.30);
    background: rgba(var(--assist-accent-rgb), 0.08);
    color: var(--assist-accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.InsightChip:hover {
    background: rgba(var(--assist-accent-rgb), 0.16);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--assist-accent-rgb), 0.18);
}
.InsightChipStar { font-size: 10px; opacity: 0.95; flex: 0 0 auto; }
.InsightChipLabel { overflow: hidden; text-overflow: ellipsis; }
/* outlier çipi amber tonda ayrışır (kalite mor) — iki analiz görsel ayrık */
.InsightChip_outlier {
    border-color: rgba(245, 158, 11, 0.40);
    background: rgba(245, 158, 11, 0.10);
    color: var(--assist-warn);
}
.InsightChip_outlier:hover { background: rgba(245, 158, 11, 0.18); }

/* içgörü popover (body'ye eklenir; fixed konumlanır) */
.InsightPopover {
    z-index: 100000;
    min-width: 240px;
    max-width: 360px;
    max-height: 60vh;
    overflow: auto;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--panelColor, #fff);
    color: var(--textColor, #1f2937);
    border: 1px solid rgba(var(--assist-accent-rgb), 0.25);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
    font-size: 13px;
}
.InsightPopHead { font-weight: 700; font-size: 13.5px; margin-bottom: 3px; }
.InsightPopSub { font-size: 12px; opacity: 0.72; margin-bottom: 8px; line-height: 1.4; }
.InsightPopList { display: flex; flex-direction: column; }
.InsightPopRow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 6px;
    border-radius: 6px;
    border-top: 1px solid rgba(127, 127, 127, 0.12);
}
.InsightPopRow:first-child { border-top: 0; }
.InsightPopRowClick { cursor: pointer; }
.InsightPopRowClick:hover { background: rgba(var(--assist-accent-rgb), 0.08); }
.InsightPopRowName { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.InsightPopRowVal { flex: 0 0 auto; opacity: 0.78; font-variant-numeric: tabular-nums; }
.InsightPopAction {
    margin-top: 10px;
    width: 100%;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid rgba(245, 158, 11, 0.40);
    background: rgba(245, 158, 11, 0.12);
    color: var(--assist-warn);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.InsightPopAction:hover { background: rgba(245, 158, 11, 0.20); }

/* outlier satır vurgusu (kısa süreli, kendiliğinden söner) */
.ListAll tr.InsightRowHighlight > td {
    background: rgba(245, 158, 11, 0.16);
    box-shadow: inset 0 0 0 9999px rgba(245, 158, 11, 0.04);
    transition: background 0.4s ease;
}
.ListAll tr.InsightRowHighlight {
    animation: insightRowPulse 1s ease 0s 2;
}
@keyframes insightRowPulse {
    0%, 100% { outline-color: rgba(245, 158, 11, 0.0); }
    50% { outline-color: rgba(245, 158, 11, 0.9); }
}

/* ── T28: mükerrer-kayıt uyarı bandı (yeni kayıt formu üstünde) ───────────── */
.DupWarnBand {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0 0 10px;
    padding: 9px 14px;
    border-radius: 10px;
    background: var(--assist-warn-bg);
    border: 1px solid var(--assist-warn-border);
    color: var(--assist-warn);
    font-size: 13px;
    line-height: 1.4;
    animation: dupBandIn 0.22s ease;
}
@keyframes dupBandIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
.DupWarnStar { color: var(--assist-accent); font-size: 13px; flex: 0 0 auto; }
.DupWarnText { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.DupWarnActions { display: flex; gap: 8px; flex: 0 0 auto; }
.DupWarnOpen,
.DupWarnDismiss {
    padding: 5px 12px;
    border-radius: 7px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--assist-warn-border);
}
.DupWarnOpen { background: var(--assist-warn-border); color: #fff; }
.DupWarnOpen:hover { filter: brightness(0.94); }
.DupWarnDismiss { background: transparent; color: var(--assist-warn); }
.DupWarnDismiss:hover { background: rgba(245, 158, 11, 0.18); }

/* reduced-motion: hareketi kapat */
@media (prefers-reduced-motion: reduce) {
    .DupWarnBand, .ListAll tr.InsightRowHighlight { animation: none; }
}

/* ── GenUiInvite DAVET CIPI — alt-sag KENAR BOSLUGU (2026-09-02, kullanici karari (a)) ──────
   OLCULDU (backlog, localhost/maya 1600x950): `.GenUiInvite` 148x38 @ y 456-494 (dikey orta,
   right:112px) 8 icerik kabiyla kesisiyordu (View_ItemView 2.927 px2, paneller 3,4-4,2k px2).
   `position:fixed` bir cip icin 0 px2 kesisim CSS ile GARANTI EDILEMEZ; garanti IKI parcali:
     (1) CSS: cip icerik AKISININ ustunde degil, alt-sag KENAR BOSLUGUNDA durur;
     (2) JS (a.js `ShowInviteIndicator`): bosluk yoksa (icerikle kesisirse) `hidden` — eylem
         PageZone menusunde erisilebilir kalir, kaldirma DEGIL.
   OZGULLUK (elde): 76-genui.css `body:has(.PageZone_RightNavs .Nav) .GenUiInvite` = (0,3,1)
   (:has en ozgul argumani (0,2,0) + body + sinif) ⇒ DORT sinif (0,4,0) siradan bagimsiz kazanir.
   Z MERDIVENI degismedi: InsightDock 6 < cip 99997 < GenUiPanel 99999 < InsightPopover 100000.
   Ray (`.PageZone_RightNavs .Nav`) artik CSS sabitiyle degil OLCUMLE kacinilir (Nav = icerik).
   640px alti `display:none` (76-genui) aynen durur — mobilde davet zaten gosterilmez.  */
.GenUiInvite.GenUiInvite.GenUiInvite.GenUiInvite {
    top: auto;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: none;
    border-right: 1px solid var(--borderColor, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
    max-width: min(46vw, 320px);
    animation-name: GenUiInviteInKose;
}
/* UA `[hidden]{display:none}` yazar-kurali `.GenUiInvite{display:flex}`e YENILIR — acik yaz. */
.GenUiInvite.GenUiInvite.GenUiInvite.GenUiInvite[hidden] { display: none; }
@keyframes GenUiInviteInKose {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .GenUiInvite.GenUiInvite.GenUiInvite.GenUiInvite { animation: none; }
}
/* zz-briefing.css — Home "✦ Bugün" briefing strip (P5, T23)
 * Post-Meta core tier (zz-*): loads AFTER Meta so these class rules win.
 * Filled by js/assistant-briefing.js on the SISHome .AssistantBriefing panel.
 * SILENCE: when the panel has no items it stays empty → removed with zero trace. */

.AssistantBriefing:empty { display: none !important; }

.AssistantBriefing {
    display: block;
    margin: 10px 0 4px;
}

.AB_Strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(var(--assist-accent-rgb), 0.16);
    background:
        linear-gradient(180deg, rgba(var(--assist-accent-rgb), 0.06), rgba(var(--assist-accent-rgb), 0.02));
    box-shadow: 0 1px 2px rgba(20, 20, 50, 0.04);
}

.AB_Head {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-right: 6px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.01em;
    color: var(--assist-accent-strong);
    white-space: nowrap;
}

.AB_HeadSpark {
    font-size: 14px;
    line-height: 1;
    color: var(--assist-accent);
    filter: drop-shadow(0 0 4px rgba(var(--assist-accent-rgb), 0.45));
}

.AB_List {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    flex: 1;
    min-width: 0;
}

.AB_Item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid rgba(var(--assist-accent-rgb), 0.14);
    background: rgba(255, 255, 255, 0.7);
    color: #2c2c40;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.AB_Item:hover {
    background: #fff;
    border-color: rgba(var(--assist-accent-rgb), 0.42);
    box-shadow: 0 2px 8px rgba(var(--assist-accent-rgb), 0.14);
    transform: translateY(-1px);
}

.AB_Item:focus-visible {
    outline: 2px solid rgba(var(--assist-accent-rgb), 0.55);
    outline-offset: 2px;
}

.AB_Spark {
    font-size: 13px;
    line-height: 1;
    color: var(--assist-accent);
    flex: 0 0 auto;
}

.AB_Text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.AB_Chev {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    color: rgba(var(--assist-accent-rgb), 0.7);
    transition: transform 0.12s ease;
}

.AB_Item:hover .AB_Chev { transform: translateX(2px); }

/* ---- dark theme (html.dark-theme, set by dark-mode.js) ---- */
html.dark-theme .AB_Strip {
    border-color: rgba(var(--assist-accent-rgb), 0.24);
    background: linear-gradient(180deg, rgba(var(--assist-accent-rgb), 0.12), rgba(var(--assist-accent-rgb), 0.04));
    box-shadow: none;
}
html.dark-theme .AB_Head { color: var(--assist-accent-soft); }
html.dark-theme .AB_Item {
    background: rgba(40, 40, 58, 0.7);
    border-color: rgba(var(--assist-accent-rgb), 0.2);
    color: #e6e6f0;
}
html.dark-theme .AB_Item:hover {
    background: rgba(52, 50, 78, 0.9);
    border-color: rgba(var(--assist-accent-rgb), 0.5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* ---- mobile ---- */
@media (max-width: 640px) {
    .AB_Strip { flex-direction: column; align-items: stretch; gap: 8px; }
    .AB_List { flex-direction: column; align-items: stretch; }
    .AB_Item { width: 100%; }
    .AB_Text { white-space: normal; }
}
/* zz-command-palette.css — Ctrl+K intent-type badges (T25)
 * The base palette styles live in css/core/misc.css; this post-Meta tier only
 * adds the intent-type chip (Sayfa / Aksiyon / AI) shown on each result row. */

.cmd-palette-item-kind {
    flex: 0 0 auto;
    align-self: center;
    margin-left: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 16px;
    padding: 0 6px;
    border-radius: 5px;
    border: 1px solid currentColor;
    opacity: .7;
    white-space: nowrap;
}

.cmd-kind-Sayfa   { color: var(--accent, #4b7bec); }
.cmd-kind-Aksiyon { color: #2fb380; }
.cmd-kind-AI      { color: var(--assist-accent, #7b61ff); opacity: .9; }

.cmd-palette-item.active .cmd-palette-item-kind { opacity: 1; }
/* ================================================================
   zz-confirm-dialog.css — onay diyalogu: AA kontrast + tek tasarim dili
   ----------------------------------------------------------------
   OLCULDU 2026-09-06 (canli satis, servis edilen /core.css uzerinden,
   `_onplan-gerileme-kapisi.js` ile GERCEK ata zincirinde):

     .ConfirmOk      bg=limegreen(50,205,50)  fg=#fff  ->  2.12   (AA 4.5)
     .ConfirmCancel  bg=red(255,0,0)          fg=#fff  ->  4.00   (AA 4.5)

   KIRMIZI ZEMINDE AA MATEMATIKSEL OLARAK ULASILAMAZ: beyazla 4.00, en
   koyu murekkeple 4.44 — TAVAN 4.44 < 4.5. Renk secerek cozulemez;
   ZEMIN degismek zorundadir. (Kayitli ders: "once TAVANI hesapla".)

   KOK — kusur bu iki kuralda DEGIL, onlari EZEN katmanda:
   `30-item-forms.css` (2026-09-02, "WCAG AA kontrast: birincil dugme")
   ikisini de ZATEN modern token cifti ile yeniden yazmisti:
        .ConfirmOk     { background: var(--primaryColor,#2563eb);
                         color:      var(--primaryOnPlan,#fff); }
        .ConfirmCancel { background: rgba(127,127,127,.1);
                         color:      var(--textColor,#303030); }
   ama canli Meta CSS katmani (meta.xml ElementStyle "Confirm";
   servis edilen /core.css ofs 912690, META baslikli blok)
   DAHA SONRA yuklenir ve ozgullugu ESITTIR (0,1,0) ⇒ o kurallari
   SESSIZCE eziyordu. Yani 2026-09-02 duzeltmesi OLU idi.
   KANIT: `.ConfirmOk:hover` (0,2,0) Meta'yi ZATEN yeniyor — buton
   normalde YESIL, ustune gelince MAVI oluyordu (tutarsizlik, kusur).

   Legacy katman kaynakta ZATEN emekliye ayrilmis: yerel OUTPUT/Meta.xml
   icinde CSSText 2/497 (commit 980def8f2, "externalize meta.xml
   ElementStyle CSS"); blok yalniz CANLIDA kosuyor. Meta CSS bolmesinin
   yarim kalmasi ayri bir backlog maddesidir.

   CARE: `zz-*` (post-Meta) katmaninda 2026-09-02 kurallarini GERI
   KAZANDIR. Ozgulluk SINIF TEKRARIYLA yukseltilir (0,1,0 -> 0,2,0),
   `!important` ile DEGIL — kayitli ders: "ozgullukte care kaliba
   katilmaktir". Boylece kural katman sirasindan BAGIMSIZ kazanir ve
   Meta blogu MSI ile kalktiginda da AYNI sonucu verir (gerileme yok).

   SOZLESME (2026-09-06 dersi): zemin ve on plan AYNI kuralda, AYNI
   kaynaktan; yedek cifti de senkron olmali.
     #2563eb uzerinde #fff = 5.17  (platformun diger birincil dugmeleri
     ile ayni zincir: EmptyStateActionButton 5.17 / NewItemFAB 5.32)
     rgba(127,127,127,.1) beyaz ConfirmWindow uzerinde ~#e8e8e8;
     --textColor #303030 ile ~9.9

   KAPSAM DAR — yalniz RENK. Legacy Meta blogu ayrica YERLESIM de veriyor
   (position:absolute; left:60%; width:7em). Ona DOKUNULMADI: gorsel kayma
   riski AA kusurundan bagimsizdir ve ayrica olculmelidir.
   ================================================================ */

.ConfirmOk.ConfirmOk {
    background: var(--primaryColor, #2563eb);
    color: var(--primaryOnPlan, #fff);
}

.ConfirmOk.ConfirmOk:hover {
    background: var(--primaryColor, #1d4ed8);
}

.ConfirmCancel.ConfirmCancel {
    background: rgba(127, 127, 127, 0.1);
    color: var(--textColor, #303030);
}

.ConfirmCancel.ConfirmCancel:hover {
    background: rgba(127, 127, 127, 0.2);
}
/* zz-copilot.css — End-user Copilot panel + field-level ✦ affordance styles.
 * Moved out of js/copilot.js injectStyles() (2026-07-02) to honour the
 * "NO CSS in .js files" rule — copilot.js now only toggles classes.
 * Post-Meta core tier (css/core/zz-*.css) so it loads for every domain;
 * the rules are inert until copilot.js renders its panel / field button. */

/* IMPORTANT: only lay out the pane when ACTIVE. SidePanel shows/hides panes
 * by toggling the "active" class; an unconditional display:flex would leave
 * Copilot visible behind other tabs. */
.CopilotPanel { flex-direction: column; height: 100%; min-height: 0; }
.SidePanel-content.CopilotPanel.active { display: flex; }

.CopilotIntro { padding: 14px 14px 6px; flex: 0 0 auto; }
.CopilotIntro h3 { margin: 0 0 4px; font-size: 1.05em; }
.CopilotIntro p { margin: 0 0 10px; opacity: .7; font-size: .88em; line-height: 1.4; }

.CopilotBriefing {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 10px;
}
.CopilotBriefCard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
    min-height: 68px;
    padding: 8px 9px;
    border: 1px solid rgba(91, 108, 255, .18);
    border-radius: 8px;
    background: rgba(91, 108, 255, .055);
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: background .15s, border-color .15s, transform .12s;
}
.CopilotBriefCard:hover {
    background: rgba(91, 108, 255, .11);
    border-color: rgba(91, 108, 255, .38);
}
.CopilotBriefCard:active { transform: scale(.985); }
/* #45 — IKI kusur birden: SABIT `#5b6cff` (tema bilmez, koyu temada da ayni)
   ve **8.6px** yazi (okunabilirlik tabani 11.5px'in ALTINDA) ⇒ olculen 3.90:1.
   Renk AA-yetkin platform token'ina baglanir (`--primaryAA` emsali), boyuta
   TABAN konur. Kirpma davranisi (ellipsis) AYNEN korunur — gorunur bir isarettir. */
.CopilotBriefTitle {
    max-width: 100%;
    font-size: max(11.5px, .72em);
    font-weight: 700;
    /* #45 (2. tur) — `--primaryAA` OLCULDU ve **AA DEGIL**: `#007cc2`, uygulama
       zemininde (240,241,246) **3.99:1**. Adi "AA" olan bir token'in AA oldugunu
       VARSAYMAK bu bulguyu uretti. Olculen AA-yetkin token `--labelColor`
       (`#3d5986`, **6.27:1**) — vurgu rengi kalir, metin OKUNUR olur. */
    color: var(--labelColor, #3d5986);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.CopilotBriefText {
    display: -webkit-box;
    /* 2 -> 3 satir (2026-09-07, backlog K-FE): "Özet, eksik bilgi ve aksiyon önerisi iste."
       ve "Sayfadaki veri ve uyarıları proaktif tara." dar panelde 3. satira sarip uc noktayla
       KESILIYORDU (kare kaniti; karnenin kirpma yuklemi line-clamp bicimini GORMUYOR).
       Kayitli kural: care ellipsis DEGIL, yer acmak. Kart metinleri en fazla 3 satir. */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .75em;
    line-height: 1.28;
    opacity: .72;
}

.CopilotChips { display: flex; flex-wrap: wrap; gap: 6px; }
.CopilotChip {
    border: 1px solid rgba(128, 128, 128, .35);
    background: rgba(128, 128, 128, .06);
    border-radius: 14px; padding: 5px 11px; font-size: .82em;
    cursor: pointer; line-height: 1.2;
    transition: background .15s, border-color .15s;
}
.CopilotChip:hover { background: rgba(120, 130, 255, .14); border-color: rgba(120, 130, 255, .55); }

.CopilotQuery { display: flex; gap: 6px; margin: 0 0 10px; }
/* input dominates the row; the "Sor/Ask" button stays compact */
.CopilotQueryInput {
    flex: 1; min-width: 0; padding: 9px 12px;
    border: 1px solid rgba(128, 128, 128, .35);
    border-radius: 8px; font-size: .9em; outline: none;
}
.CopilotQueryBtn {
    /* #45 — SABIT `#5b6cff` zeminde beyaz metin **4.17:1** (AA alti) ve `.8em`
       yazi **9.6px** (okunabilirlik tabani 11.5px'in altinda). `--primaryAA`
       (`#007cc2`) ZEMIN olarak beyazla **4.53:1** verir ⇒ AA'yi gecer; token
       oldugu icin tema ile doner (sabit hex donmez). */
    flex: 0 0 auto; border: 0; background: var(--primaryAA, #007cc2); color: #fff;
    border-radius: 8px; padding: 0 12px; font-size: max(11.5px, .8em); cursor: pointer; align-self: stretch;
}

.CopilotChatHost { flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column; }
/* #45 — `opacity: .55` TEK BASINA AA'yi olduruyordu (olculdu: 3.00:1 @12px).
   Sonumleme korunur ama okunur seviyeye cekilir; yazi boyutuna da TABAN konur
   (kucultmek okunaksizligi "cozum" saymaktir). */
.CopilotCtx { margin: 8px 14px 0; font-size: max(11.5px, .74em); opacity: .8; }

/* the embedded AiChat draws its own "Copilot" header + tabs; hide the
 * duplicate header inside our panel (our intro already titles it). */
.CopilotChatHost .AiChat-header { display: none; }

/* field-level ✦ copilot: floating affordance + action menu */
.CopilotFieldBtn {
    position: fixed; z-index: 99999; width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid rgba(120, 130, 255, .5); background: #fff; color: #5b6cff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18); font-size: 14px; line-height: 1; padding: 0;
}
.CopilotFieldBtn:hover { background: rgba(120, 130, 255, .12); }
.CopilotFieldBtn[disabled] { opacity: .6; cursor: default; }

.CopilotFieldMenu {
    position: fixed; z-index: 99999; background: #fff;
    border: 1px solid rgba(128, 128, 128, .3); border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .2); padding: 6px; min-width: 160px;
}
.CopilotFieldMenu button {
    display: block; width: 100%; text-align: left; border: 0; background: none;
    padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: .86em; color: inherit;
}
.CopilotFieldMenu button:hover { background: rgba(120, 130, 255, .12); }

.CopilotFieldUndo {
    position: fixed; z-index: 99999;
    border: 1px solid rgba(120, 130, 255, .5); background: #5b6cff; color: #fff;
    border-radius: 14px; padding: 5px 11px; font-size: .8em; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

@media (max-width: 520px) {
    .CopilotBriefing { grid-template-columns: 1fr; }
    .CopilotBriefCard { min-height: 54px; }
}

/* #74 — KAYITLI LISTE SUZGECI (F6). ⛔ `CopilotChip` ile AYNI gorunmemeli:
   cip sohbete METIN gonderir, bu LISTEYI SUZER — ayni gorunen iki farkli eylem
   kullaniciyi yanlis tiklamaya iter. Bu yuzden ayri renk + kaldirma dugmesi. */
.CopilotSavedQBar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
/* #45 — KENDI #74 etiketim: `opacity:.62` -> **4.02:1** (esik 4.5). Sonumleme
   korunur, okunur seviyeye cekilir. Kendi urettigim kusuru kendi karnem yakaladi. */
.CopilotSavedQLbl { font-size: .78rem; opacity: .8; margin-right: 2px; }
.CopilotSavedQ {
    display: inline-flex; align-items: center; gap: 2px;
    border: 1px solid rgba(120, 200, 160, .55); border-radius: 999px;
    background: rgba(120, 200, 160, .12);
}
.CopilotSavedQGo {
    border: 0; background: transparent; cursor: pointer; color: inherit;
    font: inherit; font-size: .8rem; padding: 4px 4px 4px 10px;
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.CopilotSavedQDel {
    border: 0; background: transparent; cursor: pointer; color: inherit;
    font: inherit; line-height: 1; opacity: .55; padding: 4px 8px 4px 2px;
}
.CopilotSavedQDel:hover { opacity: 1; }
.CopilotSavedQ:hover { background: rgba(120, 200, 160, .22); }

/* ══ #45 — AI YUZEYLERINDE AA KONTRAST + DOKUNMA HEDEFI (olculdu, tahmin degil) ══
   Kaynak: `.claude/scripts/ai-yuzey-karne.js` (5 yuzey x 2 kadraj x 2 tema).
   ⛔ Bu blok `zz-` katmanindadir CUNKU hedef kurallar `misc.css` (Meta CSS) icinde
      ve Meta, `NN-*.css`ten SONRA yuklenir. `79-ai-gorunurluk.css`e yazsaydim
      kural OLU DOGARDI (bu depoda ayni sinif daha once olculdu).
   ⛔ Ozgulluk sinif TEKRARIYLA yukseltilir (0,2,0), `!important` ILE DEGIL. */

/* (1) Sohbet listesi zaman damgasi: siyah + `opacity:.4` = 2.81:1 @11px.
       Sonumleme KORUNUR (ikincil bilgi) ama okunur seviyeye cekilir. */
.AiChat-conv-time.AiChat-conv-time {
    color: var(--textColor);
    opacity: .72;
}

/* (2) Baglam cipi: SABIT `#3b82f6` (tema bilmez) = 3.00:1 @12px.
       AA-yetkin platform token'ina baglanir; koyu temada da doner. */
.AiChat-context-chip.AiChat-context-chip {
    /* `--primaryAA` 3.99:1 (AA DEGIL) — olculmus AA token'i `--labelColor` 6.27:1 */
    color: var(--labelColor, #3d5986);
}

/* (3) DOKUNMA HEDEFI — YALNIZ dar kadraj / kaba isaretci.
       Olculdu: `.CopilotSavedQGo` 20px · `.CopilotSavedQDel` 20px (ikisi de #74
       ciplerim) · `.AiChat-context-chip-x` 14px. Masaustunde 44px dayatmak
       tasarimi bozar ve orada bir kusur YOKTUR. */
@media (max-width: 767px), (pointer: coarse) {
    .CopilotSavedQ { min-height: 44px; }
    .CopilotSavedQGo.CopilotSavedQGo,
    .CopilotSavedQDel.CopilotSavedQDel { min-height: 44px; display: inline-flex; align-items: center; }
    .CopilotSavedQDel.CopilotSavedQDel { min-width: 44px; justify-content: center; }
    .AiChat-context-chip-x.AiChat-context-chip-x {
        min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .CopilotQueryBtn.CopilotQueryBtn { min-height: 44px; }
}

/* ══ #45 (3. tur) — KOYU TEMA: opak ACIK zeminler ══════════════════════════════
   OLCULDU: gomulu sohbetin koku `.AiChat { --chat-bg: var(--backColor, #f5f7fa) }`
   ve `--backColor` KOYU TEMADA DONMUYOR (rgb(240,241,246), iki temada da). Metin
   dogru donuyor (`--chat-text` -> #e0e0e0) ⇒ ACIK zemin + ACIK metin = **1.04:1**,
   yani sohbet listesi ve brief kartlari GORUNMEZ oluyordu.
   ⛔ `--backColor`i platform capinda yeniden tanimlamak BU MADDENIN KAPSAMI DEGIL
      (depo genelinde kullaniliyor; olculmemis yuzeyleri degistirir) — burada YALNIZ
      AI yuzeylerinin kendi degiskeni gecersiz kilinir. Deger uydurma DEGIL: koyu
      temada `.SidePanel` OLCULEN zemini rgb(42,46,56) = #2a2e38.
   ⛔ Kural `zz-` katmanindadir; `misc.css` (Meta CSS) ondan ONCE yuklenir. */
html.dark-theme .AiChat {
    --chat-bg: #2a2e38;
    --chat-border: rgba(255, 255, 255, .14);
}
/* Sabit `#fff` tasiyan iki Copilot yuzeyi — token degil, HEX'ti (tema bilmez). */
html.dark-theme .CopilotFieldBtn,
html.dark-theme .CopilotFieldMenu {
    background: #2a2e38;
    color: var(--textColor);
}
html.dark-theme .CopilotFieldBtn { border-color: rgba(255, 255, 255, .22); }

/* ══ #45 (4. tur) — TEK BASKIN KOK: panel metin rengi TEMA-DUYARLI DEGILDI ═════
   Kalan 231 bulgunun zemin zinciri okundu (tek olcum, tek tek iterasyon YOK):
     `.AiChat-conv-preview` fg **rgb(0,0,0)** @ bg rgb(42,46,56) -> 1.38  (x198)
     `.CopilotSavedQLbl` · `(P)` · `.CopilotCtx` · `(H3)` -> hepsi fg SIYAH
   Yani panel KOYU zemine geciyor ama metin rengini kimse kurmadigi icin
   tarayicinin siyah varsayilanini devraliyor. Tek kural bu ailenin TAMAMINI cozer;
   cocuklar `inherit` ile duzelir (oge oge yama YAZILMAZ).
   ⛔ Renk TOKEN'a baglanir; sabit hex tema donunce donmez. */
.CopilotPanel { color: var(--textColor); }
html.dark-theme .AiChat-conv-preview,
html.dark-theme .AiChat-conv-title { color: var(--textColor); }

/* Secili sekme: `--primaryAA` (#007cc2) KOYU zeminde **3.01:1** — acik zeminde
   yeterliydi, koyuda DEGIL. Koyu temada AA-yetkin olan `--labelColor` (#8ab4f8). */
/* `.AiP_Tab_Sel` koyu tema kurali 79-ai-gorunurluk.css'e TASINDI (2026-09-07):
   AI paneli sekmeleri AI gorunurluk katmanina aittir, Copilot'a degil. Capraz
   dosya sahipligi bir sonraki bakimda kaybolur — nitekim bu kural CANLIDA HIC
   SERVIS EDILMIYORDU (zz-copilot.css bayat) ve sekme koyu temada 3.01:1 kaldi. */

/* OKUNABILIRLIK TABANI — olculen boyutlar: `.CopilotSavedQLbl` 8.6px ·
   `.CopilotBriefText` 9px · `.CopilotChip` 9.8px. Hepsi 11.5px tabanin altinda.
   ⛔ Kucultmek "cozum" degildir; taban KONUR (kayitli kural: yer ac, kucultme). */
.CopilotSavedQLbl { font-size: max(11.5px, .78em); }
.CopilotBriefText { font-size: max(11.5px, .78em); }
.CopilotChip      { font-size: max(11.5px, .8em); }

/* ══ #45 (5. tur) — IKI OLCULMUS KOK ═══════════════════════════════════════════
   1. `<button>` RENGI DEVRALMAZ: tarayici `color: buttontext` dayatir. Bu yuzden
      `.CopilotPanel { color: var(--textColor) }` kurali chip'lere ULASMIYORDU ve
      koyu temada chip metni SIYAH kaliyordu (olculdu 1.04:1). Devralmayi ACIKCA
      kurmak gerekir — "ata rengi verdim, cocuk alir" varsayimi dugmelerde YANLIS.
   2. `.AiChat-conv-preview` `opacity:.6` tasiyor ve rengi DEVRALIYOR. Panelin
      metin rengini token'a baglayinca ACIK temada 3.64:1'e dustu — yani ONCEKI
      turda ACIK temada 398 GERILEME URETTIM. Sonumleme korunur ama AA'yi gececek
      seviyeye cekilir (.6 -> .78). Ders: bir devralma kuralini degistirmek, o
      renkten SONUMLENEREK turetilen her ogeyi de degistirir. */
.CopilotChip { color: var(--textColor); }
.AiChat-conv-preview { opacity: .78; }

/* BOS DURUM METNI — AA altinda kaliyordu ve kok RENK DEGIL ATA OPACITY'siydi.
   OLCULDU 2026-09-07 (canli satis, CDP kazanan kural okumasi):
     ham renk  light 12.30 / dark 10.29  (ikisi de MUKEMMEL)
     ata `.AiChat-empty` opacity .5  =>  efektif light 2.83 / dark 3.78
   TAVAN: opacity .5 ile metin siyah bile olsa light 3.99, beyaz bile olsa
   dark 4.47 -- yani hicbir renk secimi AA'yi gecemez. Sonumleme opakliktan
   RENGE tasinmaz; burada opakligin KENDISI AA gecen bir degere cekilir
   (.78 = bu dosyanin conv-preview icin zaten kullandigi deger):
     light 5.71  |  dark 6.95
   Ikon inline `opacity:.2` tasir, kompozit .156 kalir: ikon fisildar, metin
   okunur. Sinif tekrari (0,2,0) kurali yukleme sirasindan BAGIMSIZ kilar. */
.AiChat-empty.AiChat-empty { opacity: .78; }
/*
 * DashboardFlow is an explicit Content opt-in for analytical dashboards.
 *
 * A dashboard owns one vertical scrollport: the active Content. Summary
 * surfaces must grow into that scrollport; they never create a second scroll
 * region merely because their ItemView has more content than its first paint.
 * Data-dense views keep their responsive flex allocation and internal scrolling.
 * Neither Content XML nor this stylesheet assigns them a fixed height budget.
 */
.Content.DashboardFlow {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

/* Do not let the inherited flex: 1 / height: 100% contract compress a page
 * taller than the viewport into nested scrollbars.
 * Headers (.ContentHeader / .Panel_h) and subnavs (.Panel_n) are excluded — they must NEVER grow vertically. */
.Content.DashboardFlow > .Panel:not(.ContentHeader):not(.Panel_h):not(.FieldSet_h):not(.Panel_n),
.Content.DashboardFlow .Panel_b,
.Content.DashboardFlow .Panel_b > .Panel,
.Content.DashboardFlow .Panel_b > .Panel > .PanelBody {
    height: auto !important;
    flex: 1 0 auto !important;
    align-self: stretch;
    min-width: 0;
    min-height: 0 !important;
}

/* ContentHeader and Nav strips must NEVER grow vertically (flex: 0 0 auto HARD RULE) */
.Content.DashboardFlow > .Panel.ContentHeader,
.Content.DashboardFlow > .Panel_h,
.Content.DashboardFlow > .FieldSet_h,
.Content.DashboardFlow > .ContentHeader,
.Content.DashboardFlow .ContentHeader,
.Content.DashboardFlow > .Panel_n,
.Content.DashboardFlow > .NavView,
.Content.DashboardFlow > .Panel:has(> .NavView),
.Content.DashboardFlow > .QuickActionsBar {
    height: auto !important;
    min-height: auto !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

/* ContentHeader Desktop: Title (Panel_hl) on Left, KPIs (Panel_kpis) on Right — YAN YANA (flex-direction: row HARD RULE) */
.Content.DashboardFlow .ContentHeader .Panel_hl,
.Content.DashboardFlow #Panel_hl {
    height: auto !important;
    min-height: auto !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.Content.DashboardFlow .ContentHeader .Panel_hl > *,
.Content.DashboardFlow .ContentHeaderTitle,
.Content.DashboardFlow .ContentHeaderDescription {
    height: auto !important;
    min-height: auto !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

@media (min-width: 768px) {
    .Content.DashboardFlow .ContentHeader .DirectionVer,
    .Content.DashboardFlow .Panel.ContentHeader > .DirectionVer,
    .Content.DashboardFlow .Panel_h.DirectionVerBody > .DirectionVer,
    .Content.DashboardFlow .ContentHeader:has(> .Panel_kpis),
    .Content .ContentHeader:has(> .Panel_kpis),
    .Content .ContentHeader .DirectionVer {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 24px !important;
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
    }

    .Content.DashboardFlow .ContentHeader .DirectionVer > .Panel_hl,
    .Content .ContentHeader .DirectionVer > .Panel_hl,
    .Content.DashboardFlow .ContentHeader > .Panel_hl,
    .Content .ContentHeader > .Panel_hl,
    .Content.DashboardFlow .ContentHeader:has(> .Panel_kpis) > .Panel_hl,
    .Content .ContentHeader:has(> .Panel_kpis) > .Panel_hl,
    .Content.DashboardFlow .ContentHeader .DirectionVer > :first-child:not(.Panel_kpis),
    .Content .ContentHeader .DirectionVer > :first-child:not(.Panel_kpis) {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        flex: 1 1 240px !important;
        min-width: 240px !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
    }

    .Content.DashboardFlow .ContentHeader .DirectionVer > .Panel_kpis,
    .Content .ContentHeader .DirectionVer > .Panel_kpis,
    .Content.DashboardFlow .ContentHeader > .Panel_kpis,
    .Content .ContentHeader > .Panel_kpis,
    .Content.DashboardFlow .ContentHeader:has(> .Panel_kpis) > .Panel_kpis,
    .Content .ContentHeader:has(> .Panel_kpis) > .Panel_kpis,
    .Content.DashboardFlow .ContentHeader .DirectionVer > :last-child.Panel_kpis,
    .Content .ContentHeader .DirectionVer > :last-child.Panel_kpis {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 3 1 auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
    }

    .Content.DashboardFlow .ContentHeader .DirectionVer > .Panel_kpis > .AggregateView,
    .Content .ContentHeader .DirectionVer > .Panel_kpis > .AggregateView,
    .Content.DashboardFlow .ContentHeader > .Panel_kpis > .AggregateView,
    .Content .ContentHeader > .Panel_kpis > .AggregateView {
        flex: 0 0 148px !important;
        width: 148px !important;
        max-width: 152px !important;
        height: 96px !important;
        margin: 0 !important;
    }

    /* 5+ KPIs Exception: Stack cleanly, Title on Top (left-aligned), KPIs on Bottom, NO gaps! */
    .Content.DashboardFlow .ContentHeader:has(.AggregateView:nth-of-type(5)),
    .Content.DashboardFlow .ContentHeader:has(.AggregateView:nth-of-type(5)) .DirectionVer,
    .Content.DashboardFlow .ContentHeader .DirectionVer:has(.AggregateView:nth-of-type(5)),
    .Content.DashboardFlow .ContentHeader:has(> .Panel_kpis > :nth-child(5)),
    .Content.DashboardFlow .ContentHeader .DirectionVer:has(> .Panel_kpis > :nth-child(5)) {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 14px !important;
    }

    .Content.DashboardFlow .ContentHeader:has(.AggregateView:nth-of-type(5)) > .Panel_hl,
    .Content.DashboardFlow .ContentHeader:has(.AggregateView:nth-of-type(5)) .DirectionVer > .Panel_hl,
    .Content.DashboardFlow .ContentHeader .DirectionVer:has(.AggregateView:nth-of-type(5)) > .Panel_hl,
    .Content.DashboardFlow .ContentHeader:has(> .Panel_kpis > :nth-child(5)) > .Panel_hl,
    .Content.DashboardFlow .ContentHeader:has(> .Panel_kpis > :nth-child(5)) .DirectionVer > .Panel_hl,
    .Content.DashboardFlow .ContentHeader .DirectionVer:has(> .Panel_kpis > :nth-child(5)) > .Panel_hl,
    /* hl adı taşımayan başlık paneli (ör. Panel_t) — 17-content-ritmi.css §5b ile aynı gerekçe */
    .Content.DashboardFlow .ContentHeader:has(.AggregateView:nth-of-type(5)) .DirectionVer > :first-child:not(.Panel_kpis),
    .Content.DashboardFlow .ContentHeader .DirectionVer:has(.AggregateView:nth-of-type(5)) > :first-child:not(.Panel_kpis),
    .Content.DashboardFlow .ContentHeader .DirectionVer:has(> .Panel_kpis > :nth-child(5)) > :first-child:not(.Panel_kpis) {
        width: 100% !important;
        flex: 0 0 auto !important;
        align-items: flex-start !important;
        height: auto !important;
    }

    .Content.DashboardFlow .ContentHeader:has(.AggregateView:nth-of-type(5)) > .Panel_kpis,
    .Content.DashboardFlow .ContentHeader:has(.AggregateView:nth-of-type(5)) .DirectionVer > .Panel_kpis,
    .Content.DashboardFlow .ContentHeader .DirectionVer:has(.AggregateView:nth-of-type(5)) > .Panel_kpis,
    .Content.DashboardFlow .ContentHeader:has(> .Panel_kpis > :nth-child(5)) > .Panel_kpis,
    .Content.DashboardFlow .ContentHeader:has(> .Panel_kpis > :nth-child(5)) .DirectionVer > .Panel_kpis,
    .Content.DashboardFlow .ContentHeader .DirectionVer:has(> .Panel_kpis > :nth-child(5)) > .Panel_kpis {
        width: 100% !important;
        flex: 0 0 auto !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        height: auto !important;
    }
}

/* Panel collision prevention: Panel_b children must stack vertically with 24px gap */
.Content.DashboardFlow .Panel_b {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.Content.DashboardFlow .Panel_b > * {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.Content.DashboardFlow .Panel_b > .EntityTypeView {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 380px !important;
    box-sizing: border-box !important;
}

.Content.DashboardFlow .Panel_b > .EntityTypeView > .EntityTypeViewBody > .Center > .Middle {
    min-height: 280px !important;
}

.Content.DashboardFlow .View_ItemView .Middle {
    min-height: 320px !important;
}

/* Card view header suppression: Cards are self-contained and must not render floating table column headers */
.View_ItemView .ItemsTitles,
.View_ItemView_Card .ItemsTitles,
.View_ItemView .CenterTop.ETWTop,
.View_ItemView_Card .CenterTop.ETWTop {
    display: none !important;
}

/* DashboardFlow KPI: enforce universal 152px max-width contract across all DashboardFlow KPI panels */
.Content.DashboardFlow .ContentHeader .Panel_kpis > .AggregateView,
.Content.DashboardFlow .ContentHeader .Panel_kpis > .AggregateView.Aggregate,
.Content.DashboardFlow .Panel_kpis > .AggregateView,
.Content.DashboardFlow .Panel_kpis > .AggregateView.Aggregate,
.Content.DashboardFlow .Panel_hdrkpi > .AggregateView,
.Content.DashboardFlow .Panel_hdrkpi > .AggregateView.Aggregate,
.Content.DashboardFlow .DashboardGrid_kpis > .AggregateView,
.Content.DashboardFlow .DashboardGrid_kpis > .AggregateView.Aggregate {
    max-width: 152px !important;
    max-height: 150px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.Content.DashboardFlow .ContentHeader .Panel_kpis > .AggregateView.Aggregate > .AggregateValue,
.Content.DashboardFlow .Panel_kpis > .AggregateView.Aggregate > .AggregateValue,
.Content.DashboardFlow .Panel_hdrkpi > .AggregateView.Aggregate > .AggregateValue {
    font-size: clamp(17.5px, 1.55em, 23px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.Content.DashboardFlow .Panel_kpis > .AggregateView.Aggregate.AggType_Money > .AggregateValue,
.Content.DashboardFlow .Panel_kpis > .AggregateView.Aggregate > .AggregateValue.AggValLong,
.Content.DashboardFlow .Panel_kpis > .AggregateView.Aggregate > .AggregateValue[suffix*='₺'],
.Content.DashboardFlow .Panel_kpis > .AggregateView.Aggregate > .AggregateValue[suffix*='TL'],
.Content.DashboardFlow .Panel_kpis > .AggregateView.Aggregate > .AggregateValue[suffix*='$'],
.Content.DashboardFlow .Panel_kpis > .AggregateView.Aggregate > .AggregateValue[suffix*='€'],
.Content.DashboardFlow .ContentHeader .Panel_kpis > .AggregateView.Aggregate.AggType_Money > .AggregateValue,
.Content.DashboardFlow .Panel_hdrkpi > .AggregateView.Aggregate.AggType_Money > .AggregateValue {
    font-size: clamp(15px, 1.38em, 18px) !important;
    letter-spacing: -0.03em;
}

.Content.DashboardFlow .Panel_kpis > .AggregateView.Aggregate > .AggregateValue.AggValXLong,
.Content.DashboardFlow .ContentHeader .Panel_kpis > .AggregateView.Aggregate > .AggregateValue.AggValXLong,
.Content.DashboardFlow .Panel_hdrkpi > .AggregateView.Aggregate > .AggregateValue.AggValXLong {
    font-size: clamp(14px, 1.25em, 16.5px) !important;
    letter-spacing: -0.035em;
}

/* Para Alan Tipleri — Koyu Para Yeşili (#047857) (kullanıcı kuralı 2026-09-07) */
.Content.DashboardFlow .Panel_kpis > .AggregateView.Aggregate.AggType_Money > .AggregateValue,
.Content.DashboardFlow .Panel_kpis > .AggregateView.Aggregate > .AggregateValue[suffix*='₺'],
.Content.DashboardFlow .Panel_kpis > .AggregateView.Aggregate > .AggregateValue[suffix*='TL'],
.Content.DashboardFlow .Panel_kpis > .AggregateView.Aggregate > .AggregateValue[suffix*='$'],
.Content.DashboardFlow .Panel_kpis > .AggregateView.Aggregate > .AggregateValue[suffix*='€'],
.Content.DashboardFlow .ContentHeader .Panel_kpis > .AggregateView.Aggregate.AggType_Money > .AggregateValue,
.Content.DashboardFlow .Panel_hdrkpi > .AggregateView.Aggregate.AggType_Money > .AggregateValue {
    color: #047857 !important;
}


/* Full-bleed is a DashboardFlow invariant, not a phone-only repair. Without
 * this contract the inherited intrinsic flex width can stop well before the
 * opposite navigation rail on wide screens and leave an unowned blank band. */
.Content.DashboardFlow > .Panel,
.Content.DashboardFlow > .Panel > .Panel,
.Content.DashboardFlow .Panel_b,
.Content.DashboardFlow .Panel_b > .Panel,
.Content.DashboardFlow .Panel_b > .Panel > .PanelBody,
.Content.DashboardFlow .ContentHeader {
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
}

/* Multi-column grid containers inside DashboardFlow:
 * First-class CSS Grid classes that protect cards and panels from 100% flex stacking. */
.Content.DashboardFlow .DashboardGrid,
.Content.DashboardFlow .GridAutoFit,
.Content.DashboardFlow .CardGrid,
.DashboardGrid,
.GridAutoFit,
.CardGrid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

/* TO DO slayt 6 (09/09/2026): ikinci secici ONEKSIZDI — `zz-dashboard-flow.css` icinde
 * olmasina ragmen kural GLOBALDI ve DashboardFlow DISINDAKI ekranlarin MASAUSTU
 * gorunumunu de grid'e zorluyordu. OLCULDU (canli sales): DashboardGrid_kpis panel 32,
 * bunun 29'u ZATEN DashboardFlow icinde ⇒ oneksiz kural yalniz 3 paneli etkiliyor.
 * Bildirimin kendi onerisi uygulandi: global bicim @media ile MOBILE kisitlandi. */
.Content.DashboardFlow .DashboardGrid_kpis {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

@media (max-width: 720px) {
    .DashboardGrid_kpis {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        align-items: stretch !important;
    }
}

/* Also protect flex DirectionFloat items inside DashboardFlow if explicit flex sizing or auto width is needed */
.Content.DashboardFlow .DirectionFloat > .Panel:not(.Panel_b) {
    width: auto !important;
    max-width: 100% !important;
    flex: 1 1 200px !important;
}


/* Cards, gauges and compact ItemViews are summary surfaces. Their body stays
 * in normal flow so that its measured content contributes to the dashboard's
 * one main scrollport. */
.Content.DashboardFlow .EntityTypeView {
    inline-size: 100%;
    width: 100%;
    height: auto !important;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
}


.Content.DashboardFlow .View_ItemView.EntityTypeView {
    contain: none;
}

.Content.DashboardFlow .View_ItemView > .EntityTypeViewBody,
.Content.DashboardFlow .View_ItemView > .EntityTypeViewBody > .Center,
.Content.DashboardFlow .View_ItemView > .EntityTypeViewBody > .Center > .Middle,
.Content.DashboardFlow .View_ItemView .ETWBody,
/* ⛔ 2026-09-05 OPT-IN: kart genislik sistemi (zz-itemview-kart.css) bu kural
   tarafindan EZILIYORDU. Ilk dort hedef KAP'tir ve orada width:100% DOGRUDUR;
   besincisi KARTIN KENDISI ve orada flex:0 0 auto + max-inline-size:none kart
   izgarasini oldurur. CDP ile kazanan kural okundu; tek degiskenli deney:
   DF kalkinca kart 1318px -> 480px, satirda 1 -> 2 kart.
   `Card_N` YAZMAYAN kartlar (bugun 1807/1844) AYNEN eskisi gibi davranir;
   `CardBox` sinifi `Card_` icermez. Gerileme deneyi 3 gercek ekranda 0. */
.Content.DashboardFlow .View_ItemView .ItemView:not([class*="Card_"]):not([class*="_Card"]):not(.CardBox) {
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: none !important;
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    contain: none;
}

/* Kanban View in DashboardFlow aligns with global ViewBody absolute 100% height contract */
.Content.DashboardFlow .View_Kanban {
    min-height: 500px !important;
}

.Content.DashboardFlow .View_Kanban .ETWBody {
    justify-content: flex-start;
}

.Content.DashboardFlow .View_Kanban .KanbanContainer {
    position: relative !important;
    inline-size: 100%;
    width: 100%;
    max-inline-size: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100% !important;
    min-height: 100% !important;
    flex: 1 1 auto;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.Content.DashboardFlow .View_Kanban .KanbanColumn {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 100% !important;
    min-width: 300px !important;
    flex: 1 1 0 !important;
}

.Content.DashboardFlow .View_Kanban .KanbanColumnBody {
    flex: 1 1 auto !important;
    height: 100% !important;
    overflow-y: auto !important;
    padding: 8px !important;
}

.Content.DashboardFlow .KanbanCard.KanbanCard {
    flex-shrink: 0 !important;
    height: auto !important;
    min-height: auto !important;
    margin-bottom: 12px !important;
    padding: 14px !important;
    border-radius: 8px !important;
}

.Content.DashboardFlow .KanbanCardTitle.KanbanCardTitle {
    white-space: normal !important;
    overflow: visible !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
}

/* Virtualized List/Tree inside a dashboard card: `.ListAll` sizes itself with
 * `height: 100%` (20-uxcx-v5.css, 70-list.css). A DashboardFlow column is
 * `height: auto`, so the ETWBody's used height comes only from `min-height`
 * and that percentage cannot resolve -- the list collapses to 1px and the card
 * paints an empty box while the record counter still reads N. Making the card's
 * own chain definite restores the percentage base WITHOUT assigning a fixed
 * height budget: the allocation still comes from the view's min/max-height.
 * The internal scroll contract is untouched (.ListAll keeps overflow:hidden,
 * .ListBody keeps its scrollport).
 *
 * Measured live (satis/SalesFlowHome, 2026-09-05): ListAll 0 -> 297..319,
 * ListBody 84 -> 203..253, visible rows 0 -> 3..8, 5/5 lists; two-way (rule
 * removed -> baseline returns); control group unchanged (Kanban 478, Chart 320,
 * Content scrollHeight 2447); 1600x950 and 768x1024 both 5/5, 390x844 already
 * healthy via the .Mobile min-height:280px path and does not regress.
 * View_Tree/View_Tree2 are included because they share the identical
 * `.ListAll { height: 100% }` contract; they had no instance on the measured
 * dashboard and are covered by inference, not by measurement. */
.Content.DashboardFlow .EntityTypeView.View_List > .EntityTypeViewBody,
.Content.DashboardFlow .EntityTypeView.View_List > .EntityTypeViewBody > .Center,
.Content.DashboardFlow .EntityTypeView.View_List > .EntityTypeViewBody > .Center > .Middle,
.Content.DashboardFlow .EntityTypeView.View_List .ETWBody,
.Content.DashboardFlow .EntityTypeView.View_Tree > .EntityTypeViewBody,
.Content.DashboardFlow .EntityTypeView.View_Tree > .EntityTypeViewBody > .Center,
.Content.DashboardFlow .EntityTypeView.View_Tree > .EntityTypeViewBody > .Center > .Middle,
.Content.DashboardFlow .EntityTypeView.View_Tree .ETWBody,
.Content.DashboardFlow .EntityTypeView.View_Tree2 > .EntityTypeViewBody,
.Content.DashboardFlow .EntityTypeView.View_Tree2 > .EntityTypeViewBody > .Center,
.Content.DashboardFlow .EntityTypeView.View_Tree2 > .EntityTypeViewBody > .Center > .Middle,
.Content.DashboardFlow .EntityTypeView.View_Tree2 .ETWBody {
    height: 100% !important;
}

/* Dashboard Chart Views: Chart body must expand to fill the entire EntityTypeView card without empty bottom space */
.Content.DashboardFlow .View_Chart.EntityTypeView {
    display: flex !important;
    flex-direction: column !important;
}
.Content.DashboardFlow .View_Chart .EntityTypeViewBody {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
}
.Content.DashboardFlow .View_Chart .EntityTypeViewBody > .Center {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
}
.Content.DashboardFlow .View_Chart .Middle {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
}
.Content.DashboardFlow .View_Chart .ViewBody_Chart {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
}
.Content.DashboardFlow .View_Chart .ChartBody {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 320px !important;
}

@media (max-width: 720px) {
    .Content.DashboardFlow {
        overscroll-behavior-y: auto;
    }

    .Content.DashboardFlow .ContentHeader,
    .Content.DashboardFlow .ContentHeader > .Panel {
        block-size: auto !important;
        height: auto !important;
        flex: 0 0 auto !important;
    }

    /* KPI cards remain scannable in two columns; their desktop minimum width
     * must not force a hidden horizontal canvas on a phone. */
    .Content.DashboardFlow .ContentHeader .Panel_kpis {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem;
        flex: 0 0 auto !important;
    }

    .Content.DashboardFlow .ContentHeader .Panel_kpis > .AggregateView {
        inline-size: auto !important;
        width: auto !important;
        min-inline-size: 0 !important;
        min-width: 0 !important;
        max-inline-size: 152px !important;
        max-width: 152px !important;
    }

    /* Dashboard titles are decision labels, not single-line marquees. A long
     * localized title must wrap inside the mobile header instead of extending
     * beyond its panel and losing its leading words. */
    .Content.DashboardFlow .ContentHeaderTitle {
        min-inline-size: 0 !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-wrap: balance !important;
    }

    /* The New action wraps below a long left title while the selector remains
     * in the following grid row. Reserve its measured control-row clearance;
     * the grid then grows in normal flow and the two hit targets never overlap. */
    .Content.DashboardFlow .PanelHeader.TitleLeft > .TopCenter,
    .Content.DashboardFlow .PanelHeader.TitleLeft > .TopRight {
        margin-top: 16px;
    }

    /* The compact switcher keeps its leading context visible. Centering an
     * over-wide flex child clipped the first character before its ellipsis
     * behavior could communicate the remaining text. */
    .Content.DashboardFlow .PanelHeader.TitleLeft > .TopCenter .EntityTypeLists.Menu_Arrow_Down.ViewSwitcher {
        justify-content: flex-start;
    }

    .Content.DashboardFlow .PanelBody,
    .Content.DashboardFlow .EntityTypeViewBody,
    .Content.DashboardFlow .Center,
    .Content.DashboardFlow .Middle {
        min-inline-size: 0 !important;
        max-inline-size: 100% !important;
    }
}

/* --- 11. Action Cards Architecture (ItemView Card & ActionQueue) --- */
.ViewBody_ItemView_Card,
.ActionQueue_View .ViewBody_ItemView,
.ActionQueue_View .ETWBody {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    /* TO DO slayt 5 (09/09/2026): bu olculer GENEL kullanimda sorun uretiyordu.
     * Kapsami daraltmak GERILEME olurdu — olculdu (canli sales): ItemView='Card' ETV
     * 5312, bunun yalniz 166'si DashboardFlow icinde (%97'si DISARIDA) ⇒ bu kurallari
     * `.Content.DashboardFlow` onegine almak 5146 gorunumu stilsiz birakirdi.
     * CARE: olcu DEGISKENE baglandi. Degisken TANIMSIZ oldugu surece fallback bugunku
     * degerdir ⇒ GERILEME MATEMATIKSEL OLARAK 0. Kullanildigi yere gore Content/Panel
     * `Style` ile ozellestirilir: --itemCardGap / --itemCardBasis / --itemCardMax /
     * --itemCardMin. */
    gap: var(--itemCardGap, 16px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.Content.DashboardFlow .ViewBody_ItemView_Card > .ItemView,
.ViewBody_ItemView_Card > .ItemView,
.ActionQueue_View .ViewBody_ItemView > .ItemView {
    flex: 1 1 var(--itemCardBasis, 360px) !important;
    max-width: var(--itemCardMax, 480px) !important;
    min-width: var(--itemCardMin, 280px) !important;
    width: auto !important;
    height: auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
}

@media (max-width: 720px) {
    .ViewBody_ItemView_Card > .ItemView,
    .ActionQueue_View .ViewBody_ItemView > .ItemView {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

.ItemView_Card .CardBox,
.ActionQueue_View .CardBox,
.ViewBody_ItemView_Card .CardBox {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    background: var(--Card-Background, #ffffff) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.ItemView.Clickable:hover .CardBox,
.ItemView_Card.Clickable:hover .CardBox,
.ActionQueue_View .ItemView.Clickable:hover .CardBox {
    border-color: var(--Primary, #2563eb) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    transform: translateY(-2px) !important;
}

.CardBox > .FieldSet_h,
.CardBox > .Line.LineHeader {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding-bottom: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
}
.CardBox > .FieldSet_h .FieldView:first-child,
.CardBox > .Line.LineHeader .FieldView:first-child {
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: #0f172a !important;
}

.CardBox .Field_AIPacingStatus,
.CardBox .Field__State,
.CardBox .Field_ConfidenceLevel,
.CardBox .Field_TerritoryType,
.CardBox .BadgePacing,
.CardBox .BadgeState,
.CardBox .BadgeConfidence,
.CardBox .BadgeSentiment,
.CardBox .BadgeCategory,
.CardBox .BadgePriority,
.CardBox .BadgeAuth,
.CardBox .BadgeActive,
.CardBox .BadgeScope {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
}
.CardBox .Field_AIPacingStatus,
.CardBox .BadgePacing,
.CardBox .BadgeActive {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border-color: #bbf7d0 !important;
}
.CardBox .Field__State,
.CardBox .BadgeState {
    background: #eff6ff !important;
    color: #1e40af !important;
    border-color: #bfdbfe !important;
}
.CardBox .Field_ConfidenceLevel,
.CardBox .BadgeConfidence {
    background: #fefce8 !important;
    color: #854d0e !important;
    border-color: #fef08a !important;
}
.CardBox .BadgeSentiment {
    background: #fdf2f8 !important;
    color: #9d174d !important;
    border-color: #fbcfe8 !important;
}
.CardBox .BadgeCategory {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
}
.CardBox .BadgePriority {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-color: #fecaca !important;
}
.CardBox .BadgeAuth {
    background: #faf5ff !important;
    color: #6b21a8 !important;
    border-color: #e9d5ff !important;
}
.CardBox .BadgeScope {
    background: #f0f9ff !important;
    color: #075985 !important;
    border-color: #bae6fd !important;
}

.CardBox > .Line:not(.LineHeader):not(.LineBody):not(.LineSub):not(.LineFooter) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.88rem !important;
    color: #475569 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.CardBox > .FieldSet_t,
.CardBox > .Line.LineBody {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important;
    gap: 8px 12px !important;
    background: #f8fafc !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    border: 1px solid #f1f5f9 !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.CardBox > .FieldSet_t .FieldView,
.CardBox > .Line.LineBody .FieldView {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-width: 0 !important;
}
.CardBox > .FieldSet_t .FieldLabel,
.CardBox > .Line.LineBody .FieldLabel {
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #64748b !important;
    margin-bottom: 2px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.CardBox > .FieldSet_t .FieldValue,
.CardBox > .Line.LineBody .FieldValue {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
}

.CardBox > .FieldSet_b,
.CardBox > .Line.LineSub {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    font-size: 0.85rem !important;
    color: #64748b !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
}

.CardBox > .FieldSet_f,
.CardBox > .Line.LineFooter {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding-top: 8px !important;
    border-top: 1px dashed #e2e8f0 !important;
    font-size: 0.82rem !important;
    color: #64748b !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* --- 12. DashboardFlow ViewBody Absolute & 100% Height Contract (2026-09-13) ---
 * Universally enforces the 361 core layout contract (views.css):
 * 1) .EntityTypeView:not(.DisableOverflow) bounds the view height (min-height or explicit height)
 * 2) .Middle is position: relative !important; flex: 1 1 auto !important; min-height: 0 !important; height: 100% !important;
 *    (2026-09-14: `min-height: inherit` -> 0 — inherit ETV'nin min-height'ini Body/Center/Middle'da tekrar aliyor,
 *    baslik yuksekligini iki kez sayip grafik/listeyi kartindan tasiriyordu; yukseklik yalniz ETV'de yasar)
 * 3) .ETWBody, .MiddleCenter, .ViewBody is position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
 * 4) Local CSS overrides (on .EntityTypeView or specific classes) naturally flow down to .Middle without being crushed.
 */
.Content.DashboardFlow .EntityTypeView:not(.DisableOverflow) {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.Content.DashboardFlow .EntityTypeView:not(.DisableOverflow) > .EntityTypeViewBody,
.Content.DashboardFlow .EntityTypeView:not(.DisableOverflow) > .EntityTypeViewBody > .Center {
    position: relative !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

.Content.DashboardFlow .EntityTypeView:not(.DisableOverflow) > .EntityTypeViewBody > .Center > .Middle {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.Content.DashboardFlow .EntityTypeView:not(.DisableOverflow) .ETWBody,
.Content.DashboardFlow .EntityTypeView:not(.DisableOverflow) .MiddleCenter,
.Content.DashboardFlow .EntityTypeView:not(.DisableOverflow) .ViewBody {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

/* List Views Contract in DashboardFlow */
.Content.DashboardFlow .EntityTypeView.View_List {
    min-height: 420px !important;
}

.Content.DashboardFlow .EntityTypeView.View_List.NoItems {
    min-height: 140px !important;
}

.Content.DashboardFlow .EntityTypeView.View_List .ListAll {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
}

.Content.DashboardFlow .EntityTypeView.View_List .ListLeft,
.Content.DashboardFlow .EntityTypeView.View_List .ListMiddle {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 100% !important;
}

.Content.DashboardFlow .EntityTypeView.View_List .ListMiddle .ListBody,
.Content.DashboardFlow .EntityTypeView.View_List .ListLeft .ListBody {
    flex: 1 1 auto !important;
    height: 100% !important;
    overflow-y: auto !important;
}

/* Card View Ghost Header Suppression */
.View_ItemView .ItemsTitles,
.View_ItemView_Card .ItemsTitles,
.View_ItemView .CenterTop.ETWTop,
.View_ItemView_Card .CenterTop.ETWTop {
    display: none !important;
}

/* Aggregate Delta Badge & Value Vertical Separation (Zero Overlap Invariant) */
.AggregateView.Aggregate.hasDelta {
    min-height: 7em !important;
    padding: 0.65em 0.8em !important;
    justify-content: space-between !important;
    gap: 0 !important;
}

.AggregateView.Aggregate.hasDelta > .AggregateValue {
    margin-top: auto !important;
    margin-bottom: 2px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

.AggregateView.Aggregate.hasDelta .AggInsight .AggregateSparkDelta,
.Content.DashboardFlow .AggInsight .AggregateSparkDelta,
.AggInsight .AggregateSparkDelta {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    /* 2026-09-08 — 9.5px -> 12px (WCAG). Bu kural KONUMLANDIRMA icin yazilmisti
       (position/left/bottom/flex) ama `font-size` de `!important` ile kopyalanmis ve
       `zz-a11y-typography.css:102`nin `.Aggregate .AggInsight .AggregateSparkDelta{12px}`
       (0,3,0) kuralini EZIYORDU — o a11y duzeltmesi 2026-08-28'de bir kez yapilmisti ve
       `!important` tasiyan bu rakip onu TEKRAR olu birakmisti (kayitli sinif: a11y
       katmaninin kendisi a11y'yi bozabilir).
       SATIR KALDIRILMADI, 12px YAPILDI: kaldirmak `.Content.DashboardFlow .AggInsight`
       kapsamini a11y'nin `.Aggregate` atasi disinda birakip `zz-kpi-insight.css:98`in
       9.5px'ine dusurebilirdi.
       IKI YONLU CANLI A/B (.claude/scripts/_sparkdelta-ab.js, satis, 1600x950,
       document.fonts.ready beklendi, <style> ENJEKSIYONU — satir ici stil gecersiz deney):
         3 rota / 15 rozet · A(taban) 9.5px · B(12px) · C(geri al) 9.5px => DENEY GECERLI
         GERILEME 0: kirpik 0->0 · kabindan tasan 0->0 · sayfa yatay kayma false->false */
    font-size: 12px !important;
    line-height: 1.2 !important;
    padding: 1px 5px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

/* --- 13. DashboardFlow DirectionVer Column & Chart Stack Fix (2026-09-06) ---
   ContentHeader (.Panel_h) is excluded — on desktop it is always side-by-side (row). */
.Content.DashboardFlow .Panel_b .DirectionVer,
.Content.DashboardFlow .Panel_b .DirectionVertical,
.Content.DashboardFlow .Panel_b > .Panel.DirectionVerBody > .DirectionVer,
.Content.DashboardFlow > .Panel:not(.ContentHeader):not(.Panel_h):not(:has(.ContentHeader)) .DirectionVer:not(.ContentHeader *):not(.Panel_h *),
.Content.DashboardFlow > .Panel:not(.ContentHeader):not(.Panel_h):not(:has(.ContentHeader)) .DirectionVertical:not(.ContentHeader *):not(.Panel_h *) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 20px !important;
}

.Content.DashboardFlow .DirectionVer > .Panel[class*="chart_row"],
.Content.DashboardFlow .DirectionVer > [id*="chart_row"],
.Content.DashboardFlow .DirectionVer > [class*="chart_row"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    gap: 16px !important;
}

/* --- 14. DashboardFlow FlowCard, FlowRow & PanelHeader Transparency Policy (2026-09-07) --- */
.Content.DashboardFlow .EntityTypeView.FlowCard,
.Content .EntityTypeView.FlowCard,
.Content.DashboardFlow .Panel.FlowCard,
.Content .Panel.FlowCard {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* FlowCard icindeki Center Panel: cift border ve golgeyi sifirla */
.EntityTypeView.FlowCard > .EntityTypeViewBody > .Center.Panel,
.EntityTypeView.FlowCard > .EntityTypeViewBody > .Center,
.EntityTypeView.FlowCard .Center.Panel {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* FlowCard icindeki PanelHeader: Seffaf, temiz ve sifir gurultulu */
.Content.DashboardFlow .FlowCard .Top.PanelHeader,
.Content .FlowCard .Top.PanelHeader,
.Content.DashboardFlow .PanelHeader.Header_Transparent,
.Content .PanelHeader.Header_Transparent {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 12px 16px !important;
    min-height: 46px !important;
}

/* Miras kalan ::after renk ortusunu iptal et */
.Content.DashboardFlow .FlowCard .Top.PanelHeader::after,
.Content .FlowCard .Top.PanelHeader::after,
.Content.DashboardFlow .PanelHeader.Header_Transparent::after,
.Content .PanelHeader.Header_Transparent::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
}

/* FlowCard Baslik Metni */
.Content.DashboardFlow .FlowCard .Top.PanelHeader .EntityTypeViewTitleBody,
.Content.DashboardFlow .FlowCard .Top.PanelHeader .PanelHeaderTitle,
.Content .FlowCard .Top.PanelHeader .EntityTypeViewTitleBody,
.Content .FlowCard .Top.PanelHeader .PanelHeaderTitle {
    color: #0f172a !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
}

.Content.DashboardFlow .FlowCard .Top.PanelHeader .TopLeft,
.Content .FlowCard .Top.PanelHeader .TopLeft {
    gap: 8px !important;
}

/* Liste Degistirici Buton (TopRight) */
.Content.DashboardFlow .FlowCard .Top.PanelHeader .TopRight .EntityTypeLists,
.Content .FlowCard .Top.PanelHeader .TopRight .EntityTypeLists {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
}

/* Cok Kolonlu Satir Duzeni */
.Content.DashboardFlow .FlowRow,
.Content .FlowRow,
.Content.DashboardFlow .DirectionVer.FlowRow,
.Content.DashboardFlow .Panel.FlowRow > .DirectionVer,
.Content.DashboardFlow .Panel.DirectionVerBody > .DirectionVer.FlowRow {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 16px !important;
    box-sizing: border-box !important;
}

.Content.DashboardFlow .FlowRow > .FlowCard,
.Content .FlowRow > .FlowCard,
.Content.DashboardFlow .FlowRow_2Col > *,
.Content .FlowRow_2Col > * {
    flex: 1 1 0% !important;
    min-width: 0 !important;
}

.Content.DashboardFlow .FlowRow_3Col > *,
.Content .FlowRow_3Col > * {
    flex: 1 1 0% !important;
    min-width: 0 !important;
}

@media (max-width: 768px) {
    .Content.DashboardFlow .FlowRow,
    .Content .FlowRow,
    .Content.DashboardFlow .DirectionVer.FlowRow {
        flex-direction: column !important;
    }
}

/* ViewType Tasma Korumalari */
.Content.DashboardFlow .FlowCard.View_Kanban .Middle,
.Content.DashboardFlow .FlowCard.View_Kanban {
    overflow-x: auto !important;
}
.Content.DashboardFlow .FlowCard.View_Kanban .KanbanColumn {
    min-width: 260px !important;
    flex: 0 0 280px !important;
}

/* Kanban Column Header Flex-Wrap & Title Fix (WIP Bar satira duserek basligi sikistirmasin) */
.KanbanColumnHeader {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
}

.KanbanColumnHeader > .KanbanWIPProgressBar {
    flex-basis: 100% !important;
    width: 100% !important;
    margin-top: 4px !important;
}

.KanbanColumnTitle {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.Content.DashboardFlow .FlowCard.View_Chart,
.Content.DashboardFlow .FlowCard.View_Chart .Middle {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}

.Content.DashboardFlow .FlowCard.View_List .Middle {
    overflow-x: auto !important;
    min-width: 0 !important;
}

/* ==========================================================================
   15. CONTENTHEADER KPI RIBBON & AGGREGATEVIEW ANTI-SQUISH CONTRACT
   (1700+ Legacy Content ekranında 19px'e çöken KPI kartlarını kurtarır)
   ========================================================================== */
.Content .ContentHeader > .Panel:has(> .AggregateView),
.Content .ContentHeader > .DirectionFloat:has(> .AggregateView),
.Content .ContentHeader > .DirectionFloat,
.Content .ContentHeader .Panel[name="kpis"],
.Content .ContentHeader .Panel_kpis {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-top: 14px !important;
    box-sizing: border-box !important;
}

.Content .ContentHeader .AggregateView,
.Content .ContentHeader .AggregateView.Aggregate,
.Content .ContentHeader .DirectionFloat > .AggregateView,
.Content .ContentHeader > .Panel:has(> .AggregateView) > .AggregateView,
.Content .Panel_kpis > .AggregateView {
    flex: 0 1 148px !important;
    width: 148px !important;
    min-width: 120px !important;
    max-width: 152px !important;
    min-height: 7em !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   16. DASHBOARDFLOW ENTITYTYPEVIEW & QUEUE PANELS FULL-WIDTH CONTRACT
   (EntityTypeView ve iç ızgaralarının ortada dar sütun olarak sıkışmasını önler;
    tam konteyner genişliğine yayılmasını (align-self: stretch) sağlar)
   ========================================================================== */
.Content.DashboardFlow .Panel_queues,
.Content.DashboardFlow .Panel_queues > .Panel,
.Content.DashboardFlow .EntityTypeView,
.Content.DashboardFlow .EntityTypeView.View_List,
.Content.DashboardFlow .EntityTypeView > .EntityTypeViewBody,
.Content.DashboardFlow .EntityTypeViewBody > .Center,
.Content.DashboardFlow .EntityTypeViewBody > .Center > .Middle,
.Content.DashboardFlow .ETWBody,
.Content.DashboardFlow .ListAll {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
}

.Content.DashboardFlow .EntityTypeView .PanelHeader {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* --- 13. DashboardFlow BOS ETV: 380px sozlesmesi bos duruma UYGULANMAZ (2026-09-09) --- */
/* OLCULDU (satis/ChequeNoteAnalysis, 1200x800): iki bos `.EntityTypeView.NoItems`
 * ~434 CSS px yer kapliyordu — dolu bir listeymis gibi. KOK: yukaridaki 12. blogun
 * `.MiddleCenter{height:380px}` + `.ListAll{min-height:380px}` sozlesmesi BOS duruma da
 * uygulaniyor ve `70-list.css:931-935`'teki 140px'lik bos-durum kurali ONU YENEMIYOR:
 *   zz  `.Content.DashboardFlow .EntityTypeView.View_List .MiddleCenter` = (0,4,0)
 *   70  `.EntityTypeView.NoItems .MiddleCenter`                          = (0,3,0)
 * Esit `!important`'ta daha ozgul olan kazanir ⇒ 380px.
 * CARE: `!important` yarisi DEGIL — `.NoItems`'i zincire katarak (0,5,0) yapmak.
 * (2026-09-14: bu yorum `*` + `/` ile KAPANMIYORDU — asagidaki iki kural paketlenmis core.css'te yorumun icinde OLUYDU;
 *  kapi: .claude/scripts/css-yorum-yutma-kapisi.cjs) */
.Content.DashboardFlow .EntityTypeView.View_List.NoItems {
    min-height: 140px !important;
}
.Content.DashboardFlow .EntityTypeView.View_List.NoItems .ListAll {
    min-height: 140px !important;
}
/* ============================================================================
   DOKUNMATIKTE "HOVER ILE ACILAN" DENETIMLER KALICI OLARAK OKUNMAZ (2026-09-03)

   OLCULDU (yerel maya, #MyPersons, gercek tarayici):
     `.EntityTypeView .Paging { opacity: .1 }` + `.EntityTypeView:hover .Paging { opacity: 1 }`
     => masaustunde BILINCLI bir soluk-ac tasarimi (dogru calisiyor, dokunulmuyor).
     Ama DOKUNMATIK cihazda `:hover` YOKTUR ⇒ sayfalama denetimi %10 opaklikta KALIR.
     Olculen kontrast: 1.18 (esik 4.5) — metin fiilen gorunmez, kontrol kullanilamaz.

   CARE: yalniz `hover: none` (dokunmatik) kirilimda soluklastirma kaldirilir.
   Masaustu davranisi BIREBIR AYNI kalir — kural o kirilimda hic uygulanmaz.
   ============================================================================ */

@media (hover: none) {
    .EntityTypeView .Paging {
        opacity: 1;
    }
}

/* ---------------------------------------------------------------------------
   LISTE CIPI ("Hepsi" / "Aktifler") — KESIN VE EVRENSEL KONTRAST GUENCESI (2026-09-03)
   Zemin tek basina karanlik yapildiginda (`rgba(0,0,0,0.55)`), acik basliklarda
   koyu renkli metinle (#303030) birleserek 1.28:1 - 2.6:1 felaket kontrast kaybi
   üretiyordu (kullanici tespiti: "EntityTypeLists buttonda contrast problemi var").
   
   COZUM: Cipin zemin ve yazi rengi BIRBIRINE BAGLI yuksek kontrastli bir tasarim ciftidir:
   - Acik zeminli baslikta: Beyaz kart cipi (#ffffff), koyu slate yazi (#0f172a) -> 18.2:1 (WCAG AAA)
   - Koyu zeminli baslikta: Beyaz/opak kart cipi (#ffffff), koyu slate yazi (#0f172a) -> 18.2:1 (WCAG AAA)
   - Ok ikonu (::after) icin yeterli sag bosluk (padding-right: 28px) verilerek
     metinle ikonun ("Aktifler✔") ust uste binmesi (collision) onlenir.
   --------------------------------------------------------------------------- */
html body.Mobile .Content.Content .PanelHeader.PanelHeader .EntityTypeLists.ViewSwitcher,
html body.Tablet .Content.Content .PanelHeader.PanelHeader .EntityTypeLists.ViewSwitcher,
html body.Mobile .Content .PanelHeader .EntityTypeLists.ViewSwitcher,
html body .Top > .TopCenter .EntityTypeLists.Menu_Arrow_Down.ViewSwitcher,
.Content .PanelHeader .EntityTypeLists.Menu_Arrow_Down,
.Top > .TopCenter .EntityTypeLists.Menu_Arrow_Down {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.16) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
    padding: 5px 28px 5px 12px !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.3 !important;
    min-height: 28px !important;
}

html body.Mobile .Content.Content .PanelHeader.PanelHeader .EntityTypeLists.ViewSwitcher::after,
html body.Tablet .Content.Content .PanelHeader.PanelHeader .EntityTypeLists.ViewSwitcher::after,
html body.Mobile .Content .PanelHeader .EntityTypeLists.ViewSwitcher::after,
html body .Top > .TopCenter .EntityTypeLists.Menu_Arrow_Down.ViewSwitcher::after,
.Content .PanelHeader .EntityTypeLists.Menu_Arrow_Down::after,
.Top > .TopCenter .EntityTypeLists.Menu_Arrow_Down::after {
    color: #475569 !important;
    right: 9px !important;
    opacity: 0.8 !important;
}

html body.Mobile .Content.Content .PanelHeader.PanelHeader .EntityTypeLists.ViewSwitcher:hover,
html body.Tablet .Content.Content .PanelHeader.PanelHeader .EntityTypeLists.ViewSwitcher:hover,
html body.Mobile .Content .PanelHeader .EntityTypeLists.ViewSwitcher:hover,
html body .Top > .TopCenter .EntityTypeLists.Menu_Arrow_Down.ViewSwitcher:hover,
.Content .PanelHeader .EntityTypeLists.Menu_Arrow_Down:hover,
.Top > .TopCenter .EntityTypeLists.Menu_Arrow_Down:hover {
    background: #f8fafc !important;
    color: #020617 !important;
    border-color: rgba(15, 23, 42, 0.28) !important;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.12) !important;
}

/* ---------------------------------------------------------------------------
   ROZET DEGERI KIL PAYI AA ALTINDA — `.Aggregate{opacity:.75}` (2026-09-03)
   --------------------------------------------------------------------------- */
.Aggregate {
    opacity: 0.88;
}

/* ---------------------------------------------------------------------------
   MOBIL BASLIK VE CIP CAKISMASIZLIGI (COLLISION PREVENTION - 2026-09-03)
   Mobilde baslik iki satira kirildiginda, alttaki ciple ust uste biniyordu.
   Baslik tek satirda kesilmeli (nowrap + ellipsis) ve PanelHeader yuksekligi
   ferahlatilarak (min-height: 56px) baslik ile cip arasinda tam Gestalt
   ayrimi saglanmalidir.
   ⛔ 2026-09-15 GUNCELLEME (backlog 20260914T235843Z): "cip" TopCenter bolgesiydi ve AYNI GUN (09-03)
   et-preview-header.js'te KALDIRILDI (liste secici artik TopRight'ta). Ellipsis gerekcesi dustu; kilit
   ise uzun basliklari kesiyordu (TG makina: "ENDUSTRIYEL MAKINA YASAM DONGUSU…" 367/228px). Basligin
   GOVDESI asagidaki blokla en cok 2 satira acilir (56px bant, top 6px -> 6+30 < 56).
   --------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
    html body.Mobile .Content.Content .Panel.Panel > .PanelHeader.PanelHeader,
    html body.Mobile .Content .PanelHeader,
    body.Mobile .PanelHeader {
        min-height: 56px !important;
        height: 56px !important;
    }
    html body.Mobile .Content .PanelHeader .EntityTypeViewTitle,
    body.Mobile .PanelHeader .EntityTypeViewTitle {
        top: 6px !important;
        height: 18px !important;
        max-width: calc(100% - 100px) !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    html body.Mobile .Content .PanelHeader .EntityTypeViewTitleBody,
    html body.Mobile .Content .PanelHeader .EntityTypeViewTitle,
    html body.Mobile .Content .PanelHeader .PanelHeaderTitle,
    html body.Mobile .Content .PanelHeader > .TopLeft :not(button):not(select):not([class*="Action_"]):not(.MicroButton):not(.ToggleButton) {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 18px !important;
        height: 18px !important;
        font-size: 12px !important;
    }
    /* 2026-09-15: basligi EN COK 2 SATIRA ac. Ustteki joker kural (:not zinciri) ozgullugu (0,7,4) — bu blok
       (0,9,2) ile onu ve zz-mobil-baslik-ortala / zz-panelheader-esnek (0,6,2) nowrap+15px kilitlerini yener.
       TG A/B (ENJEKTE_CSS, iPhone 13): makina PLMServiceHome+PLMHome kirpik 5 -> 0, satis SalesHome/
       SessionManagement/mCRMHome kirpik 0, dugme kesisimi 0, gorunur TopCenter 0. Masaustu dokunulmaz. */
    html body.Mobile .Content.Content .PanelHeader.PanelHeader > .TopLeft .EntityTypeViewTitle.EntityTypeViewTitle.EntityTypeViewTitle {
        height: auto !important;
        max-height: 36px !important;
    }
    html body.Mobile .Content.Content .PanelHeader.PanelHeader > .TopLeft .EntityTypeViewTitleBody.EntityTypeViewTitleBody.EntityTypeViewTitleBody {
        white-space: normal !important;
        height: auto !important;
        max-height: 30px !important;
        line-height: 15px !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
    }
    html body.Mobile .Content .PanelHeader > .TopCenter,
    body.Mobile .PanelHeader > .TopCenter {
        bottom: 5px !important;
        top: auto !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    html body.Mobile .Content .PanelHeader .EntityTypeLists.ViewSwitcher,
    body.Mobile .PanelHeader .EntityTypeLists.ViewSwitcher {
        height: 22px !important;
        min-height: 22px !important;
        line-height: 20px !important;
        font-size: 11px !important;
        padding: 0 24px 0 10px !important;
    }
}
/* zz-from-361.css - core-override CSSSelectors promoted from OUTPUT/361.xml.
   Faithful Domain.vb AppendSelectorCSS port; MOVE only when EVERY class is a core class
   (domain-specific-scoped rules e.g. .Panel_kpis stay in 361.xml). Post-Meta tier.
   base=216 mobile=10 tablet=0 desktop=0. Do not hand-edit. */

html { background-color: var(--backColor); }
body { margin-left: auto;
margin-right: auto;

background-color: var(--backColor); }
body .Parameters .Text { color: gray; }
body .Parameters .Text span { --labelcolor: #78909C;
font-size: 90%;
color: var(--labelColor); }
body button { background-color: white;
color: #303030; }
body button:hover { box-shadow: unset !important; }
body .ItemSelection { width: 100%;
font-weight: 500;
background-clip: padding-box;
appearance: none; }
body .ItemSelection:focus { color: #5e6278 !important;
background-color: #fff !important;
border-color: #b5b5c3 !important;
outline: 0 !important;
box-shadow: 0 0 0 !important;
color: #5e6278;
background-color: #fff;
border: 1px solid;
border-color: var(--activeBorderColor) !important;
outline: 0; }
body .Choice { background-color: white;
color: #303030; }
body .Choices >a { background-color: white;
color: #303030; }
body .ViewActions.Choices >a { background-color: transparent; }
body .ViewActions .ToggleMenu { color: #0068bb; }
body #ModuleImage { padding: 5px; }
body .NumericKeyPad { max-width: 360px;
margin: 0 auto; }
body .NumericKeyPad td { background-color: #666666;
color: white;
border: solid 1px white; }
body .SameItem { color: black;
font-weight: bold;
outline: 0;
border: 0; }
body .SameItem a { textshadow: 0 0 1px black; }
body .FirstCol .ToggleButton >span:before { position: absolute;
top: 0px;
left: 0;
right: 0;
bottom: 0; }
body .TopLeft .Actions a { /*background-color: transparet;
color: var(--textColor);*/
/*border: solid 2px #80808080;*/ }
body .TopLeft .Actions a:hover { background-color: #303030;
color: white;
box-shadow: 0 0 5px white;
font-weight: normal;
text-shadow: 0 0 5px white; }
body .AutoHideOn #ModuleImage { padding: 1px; }
body .AutoHideOn .AutoHideTopLeftHandle,body .AutoHideOn  .AutoHideTopRightHandle,body .AutoHideOn  .AutoHideBottomRightHandle,body .AutoHideOn  .AutoHideBottomLeftHandle { color: black; }
body #DomainVersion { display: none; }
body .SelectionsMenuOpen .Menu_Arrow_Down { outline: none !important; }
body .SelectionItem:hover { background-color: #009ef7;
color: white;
text-decoration: none; }
body .ParamValue select { line-height: 1; }
body .Button { box-shadow: unset !important; }
body .Button:hover { z-index: 1000;
outline: 0 !important;
opacity: 1.0; }
body .Button:active { outline: unset; }
body .Button >div { font-size: 1.1em !important; }
body .InputSpan { max-width: 100%;
min-width: 100%; }
body .AddGroupField >a { font-size: 90%; }
body .Header >.Center { width: 34%; }
body .DeleteButton { position: absolute;
top: 0em;
font-size: 2em;
right: 0.1em; }
body .LabelActions { bottom: auto !important; }
body .Middle:has(.ViewBody_Chart) { overflow: hidden !important; }
body .FieldLabel { font-weight: 300 !important; }
body .SingleItem .FieldSetPanel { margin-bottom:unset !important; }
body .Choice:hover { border-color: var(--choiceSelectedColor, rgb(9 62 115)) !important;
    background-color: rgb(89 156 223) !important;
    color: #fff !important; }
.Desktop #ModuleImage { padding: 4px 8px; }
.SearchTitle { display: none; }
.Search #SearchInput { padding: 0.35em 1em;
border: solid 1px #d7d7d7;
background-color: transparent;
font-size: 1.25em; }
.Search #SearchInput:valid { background-color: rgba(255,255,255,0.8); }
.SearchZoneTitle { color: silver; }
.Search:active #SearchInput { background-color: rgba(255,255,255,0.8); }
.SearchResultEntityType >.ToggleHeader:before { left: -1em !important; }
.Page { background-color: #0e2343;
background-color: transparent; }
.PageTop { z-index: 100;
box-shadow: 0 0 0 #c0c0c08a; }
.PageTop #SearchInput:valid { color: #303030; }
.NavigationButtons .LeafNav { border: 0 !important;
background: transparent !important;
box-shadow: 0 0 0 !important;
border-radius: 0px;
border: 0 !important;
margin: 0 !important; }
.NavigationButtons .LeafNav .NavTitle { font-size: 120%; }
.NavigationButtons .LeafNav .NavTitle:hover { background-color: white !important;
transform: scale(1.0);
box-shadow: 0 0 0 !important;
background-color: transparent !important; }
.NavigationButtons .LeafNav .NavImage { background: var(--bg);
box-shadow: var(--neoShadow);
border-radius: 40%; }
.NavigationButtons .Nav360 .LeafNav .NavTitle { width: 8em; }
.NavigationButtons .Nav.NavBranch { border-radius: 10em;
padding: 0.5em;
border-radius: 1em; }
.NavigationButtons >.Aggregate { right: 5px;
top: 0;
background-color: #2a2a36;
min-width: 2em;
border-radius: 2em;
color: #ffffff; }
.SubNav .Selected { text-shadow: unset;
background-color: #dadff5;
border-bottom: 2px solid #0068bb;
color: #0068bb; }
.SubNav #PeerNavs .Selected .NavTitle { border-bottom: 0 !important; }
.Nav.Max1200 { max-width: max-content !important; }
.Nav:hover { text-shadow: unset !important; }
.NavButton.SelectionsMenuOpen { text-shadow: unset !important;
font-weight: 400 !important; }
.NavButton.NavHoverMenu::after { content: "";
display: none !important; }
.LeafNav > .NavButton > .NavTitle { font-weight: 400 !important; }
.RootHoverMenuBody >.Nav.LeafNav:first-child { position: absolute;
left: 0;
right: 0;
top: 0;
max-width: 100%; }
.RootHoverMenuBody .NavButton:hover { color: yellow; }
.RootHoverMenuBody .NavBranch >.NavButton { text-transform: uppercase; }
.RootHoverMenu .SelectionsMenu { background-color: #1a1a27;
color: white;
box-shadow: 0 0 1px white;
padding-top: 3em; }
.CurrentEntityNavigation .NavigationButtons .LeafNav .NavImage { letter-spacing: 0; }
.CurrentEntityNavigation .NavigationButtons .LeafNav .NavImage:hover .NavImage { box-shadow: 0 0 5px black; }
.CurrentEntityNavigation .NavigationButtons .NoImage.LeafNav .NavTitle >span:first-child { box-shadow: 2px 2px 5px gray;
letter-spacing: 0; }
.CurrentEntityNavigation .NavigationButtons .Nav.LeafNav:active .NavImage { box-shadow: 0px 0px 1px gray; }
.ItemSubmit a { opacity: 1 !important; }
.ItemSubmit a:hover { opacity: 1.0;
text-shadow: 0 0 0 !important; }
.ItemHeader { padding: 0; }
.ItemHeader .SaveButton { visibility: unset !important;
color: #7e8299;
background-color: transparent;
opacity: 1 !important; }
.ItemHeader .SaveButton .icon-Save { color: darkgreen; }
.ItemHeader .CancelButton .icon-Cancel { color: darkred; }
.ItemStates .Transition { padding: 0rem 0; }
.ItemStates .Transition:hover { text-shadow: unset; }
.Item.SelectedItem { position: relative; }
.Item.SelectedItem:after { content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,255,0,0.25);
pointer-events: none;
z-index: 0; }
.ItemRight.SubItems .SingleItem.ActiveContent { padding-top: 10px !important; }
.SingleItem_Subscriber_Request { font-size: 120%;
border-radius: 1em;
max-width: 360px; }
.SingleItem_Subscriber_Request .Transition { background-color: #35b335;
color: white; }
.SingleItem_RightOpen >.ItemBody >.ItemRight { border: 1px solid #eaeefd;
box-shadow: -7px 0px 14px 0px rgb(69 90 100 / 5%);
width: var(--subItemsWidth) !important;
position: absolute;
padding-right: 0; }
.SingleItem >.ItemBody >.SubItemButtons { display: none; }
.SingleItem .FieldTextArea.Mode_Display >.FieldLabel >a { padding-top: 1.5em; }
.SingleItem .FieldValue { font-size: 1.1em;
line-height: var(--lineHeight) }
.SingleItem .ItemView .FieldValue { font-size: 1em;
line-height: 1em; }
.SingleItem .ItemView .LookupField .ItemSelection { min-width: 3em !important; }
.SingleItem .SubItemButton.Active { background-color: #e6f6ff; }
.SingleItem .LookupField .ItemSelection { min-width: 10em !important; }
.SingleItemHeader { --gap: 0;
--fieldPadding: 0;
--inputBorder: 0;
--inputPadding: 4px;
--fieldLabelPadding: 0 6px;
border: var(--border1);
border-radius: var(--inputRadius) var(--inputRadius) 0 0 ; }
.SingleItemHeader .FieldSet_c { border-left: var(--border1);
border-right: var(--border1);
padding: 8px; }
.SingleItemHeader .FieldSet_l { padding: 8px; }
.ItemView .Mode_Display .Field >.InputSpan >a:empty:before { content: "\00a0"; }
.TopLeft .Actions a { background-color: #009ef7;
    color: #ffffff;
    z-index: 99;
    border-radius: 8px;
    padding: 4px 8px; }
.TopLeft .Actions a:hover { background-color: #50cd89;
color: #ffffff;
box-shadow: unset;
font-weight: normal;
text-shadow: unset; }
.Actions a:hover { opacity: 1.0;
box-shadow: unset !important; }
.OkButton { background-color: #00a74e;
border: 0;
color: #ffffff; }
.OkButton:hover { color: #ffffff !important; }
.Choices .Choice:hover { border-color: var(--bs-green);
color: var(--bs-green); }
.Choices > a:hover { border-color: var(--bs-green);
color: var(--bs-green); }
.InvalidField .Choices a { background-color: rgba(var(--bs-danger-rgb), 0.1);
border-color: rgba(var(--bs-danger-rgb), 0.3); }
.InvalidField input { background-color: rgba(var(--bs-danger-rgb), 0.1);
border-color: rgba(var(--bs-danger-rgb), 0.3); }
.InvalidField textarea { background-color: rgba(var(--bs-danger-rgb), 0.1);
border-color: rgba(var(--bs-danger-rgb), 0.3); }
.InvalidField select { background-color: rgba(var(--bs-danger-rgb), 0.1);
border-color: rgba(var(--bs-danger-rgb), 0.3); }
.InvalidField .ItemSelection { background-color: rgba(var(--bs-danger-rgb), 0.1);
border-color: rgba(var(--bs-danger-rgb), 0.3); }
.Panel.TogglePanel { flex: 0;
 border: 1px solid #78909c47 !important;
 border-radius: var(--gap); }
.Panel.TogglePanel.Toggle_Closed { flex: 0 !important;
 border: 1px solid #78909c47;
 border-radius: var(--gap); }
.Panel.TogglePanel.Toggle_Closed.Box { flex: 0 !important; }
.Panel.TogglePanel.Toggle_Closed >.PanelHeader.ToggleHeader { background-color: #ffffffab !important;
border-bottom: 0 !important;
border-radius: 8px; }
.Panel.TogglePanel.Toggle_Closed.AccordionSelected { flex: 1 !important; }
.Panel.TogglePanel .ToggleHeader:before { left: 0.5em !important; }
.Panel.TogglePanel >.PanelHeader.ToggleHeader { border-bottom: 0 !important;
background-color: transparent !important; }
.Panel.PanelHasHeader .EntityTypeView .Panel .PanelHeader { font-size: 1rem;
color: #546E7A; }
.Panel.PanelHasHeader .EntityTypeView .Panel .PanelHeader >.TopCenter >.EntityTypeViewTitle >.EntityTypeViewTitleBody { font-size: 1rem;     
font-weight: 400; }
.TabBody .TabHeader { font-size: 90%;
padding: 0;
border-radius: 0 !important;
gap: 0; }
.TabBody .TabHeader >.TabButton { border-radius: 0 !important; }
.TabPanel.AnyTabSelected.Selected >.Selected { background-color: transparent !important; }
.TabPanel.AnyTabSelected .TabBody >.TabPanel >.TabBody { padding: 0; }
.TabPanel.AnyTabSelected >.TabBody >.Selected { background-color: transparent;
padding: 0; }
.TabPanel.AnyTabSelected >.TabBody >.Selected:is(.Panel.DirectionVerBody) { background-color: transparent !important; }
.TabPanel.AnyTabSelected >.TabBody.DirectionTab:has(>.Panel.DirectionVerBody.Selected) { background-color: transparent !important; }
.TabPanel_Tab .TabBody { padding: 0 var(--gap); }
.TabPanel .TabHeader { padding-bottom: 0;
max-width: 100%;
min-width: 50%;
overflow: auto;
padding-bottom: 0;
margin: var(--gap);
max-width: 100%;
overflow: auto;
/*box-shadow: var(--BoxShadow);*/
padding: 0 !important;
/*border-radius: var(--gap);*/
gap: 0;
margin-top: var(--gap);
margin-bottom: var(--gap);
/*border-radius: 2em;*/
min-height: 3em;
justify-content: center;
margin: 0; }
.TabPanel >.TabBody { flex: 1 1 0; }
.TabButton > span { opacity: var(--tabspanopacity) !important;
/*letter-spacing: 1px;*/ }
.TabButton >.Aggregate { padding: 0 !important; }
.TabHeader .TabButton { border-radius: 0;
text-shadow: unset !important;
font-weight: var(--tabfontweight);
background-color: var(--tabbg);
border: var(--tabborder) !important;
color: var(--tabfontcolor);
padding: 1px;
box-shadow: 0 0 0 white !important;
width: 100%;
flex: 1;
display: flex;
justify-content: center;
max-width:200px; }
.TabHeader .TabButton.Selected { text-shadow: unset !important;
font-weight: var(--tabfontweight);
background-color: var(--tabselectedbg);
border-top: var(--border1) !important;
border-left: var(--border1) !important;
border-right: var(--border1) !important;
color: var(--tabselectedfontcolor) !important;
box-shadow: 0 0 0; }
.GroupByTitle.ToggleHeader { background-color: var(--backColor);
z-index: 99; }
.GroupByMode_Ver { display: flex;
overflow: auto;
padding: var(--gap); }
.GroupByMode_Ver .FolderGroupBy { margin: 4px; }
.DirectionVer,.DirectionVertical { gap: var(--gap); }
.LoginForm { background-color: #ffffff;
color: #303030;
box-shadow: 0 0 20px rgb(64 58 92 / 8%); }
.LoginForm >form { font-size: 120%;
border-radius: 1em;
max-width: 360px; }
.LoginForm .Login { background-color: #35b335;
color: white; }
.LoginForm .UserImage { color: #7e8299; }
.LoginForm .UserImage:hover { color: #009ef7; }
.LoginForm div.UserPassword >a.PasswordIcon { color: #7e8299; }
.LoginForm div.UserPassword >a.PasswordIcon:hover { color: #009ef7; }
.LoginPanelTitle { font-size: 150%;
padding: 1em 1em 0.5em 1em;
font-weight: bold;
display: block;
text-align: center; }
.ItemView .ReadOnly .InputSpan a { background-color: rgb(236 239 241 / 0%) !important; }
.ItemView .ReadOnly .InputSpan a:hover { background-color: rgb(236 239 241 / 0%) !important; }
.ItemView .ReadOnly >.InputSpan >a { border: 0 !important; }
.SiteMapBody >.SiteMapBlock >.SiteMapItem { font-size: 100%; }
.SiteMapBody >.SiteMapBlock:nth-child(odd) >.SiteMapItem { background-color: #eceff1; }
.SiteMapItem:hover a { color: #e64a19; }
.EntityTypeView { box-sizing: border-box; }
.ETWMenu { background-color: #f8faff !important;
box-shadow: -7px 0px 14px 0px rgb(69 90 100 / 5%); }
.ETWMenu_Over >.ETWMenu { border: 1px solid #e4e6ef; }
.ETWMenu_Open >.ETWMenu { border: 1px solid #B0BEC5;; }
.ETWMenu_Open .EntityTypeViewBody { width: calc(100% - 200px) !important; }
.ListMiddle { bottom: 0; }
.ListLeft { bottom: 0; }
.ButtonGroup .Selected { color: #ffffff;
background-color: #ef5350;
box-shadow: 0 !important; }
.ButtonGroup a { background-color: #eff2f5;
color: #455a64; }
.ButtonGroup a:hover { color: #272830; }
.DateModes .Selected { box-shadow: 0 0 0 #ffffff !important; }
.DayBody >.CalendarItem { box-shadow: 0 0 0 #ffffff; }
.SelectionsMenu >.ItemImage >img { max-height: 24px; }
.SelectionsMenu .sun-editor .se-container { max-height: 70vh; }
.RatingStars div.Selected:before { text-shadow: 0 0 1px #B2DFDB !important;
color: #00897B !important; }
.RatingStars .Selected div:before { text-shadow: 0 0 1px #B2DFDB !important;
color: #00897B !important; }
.CalendarBody { background-color: white;
height: calc(100% - 3.5em);
min-height: 200px; }
.CalendarBody .DayOfMonth { background-color: transparent;
border: 0;
border-left: solid 1px rgb(176 194 195); }
.CalendarItem .FieldValue .InputSpan  a { padding: 0 2px !important;
border: 0 !important;
line-height: 1; }
.FilesDisplay >.FileDisplay { border-radius: 4px;
color: #5e6278;
font-weight: normal;
margin: 4px; }
.FilesButtons { position: absolute;
z-index: 100;
top: 50%;
left: 50%;
transform: translateY(-50%);
font-size: 3vh; }
.FileDisplay { background-color: white;
color: #303030; }
.OneByOnePanelBody >div { padding: 5px;
overflow: hidden; }
.CardItem { width: 320px;
margin: 0;
background-color: white;
padding: var(--gap);
background-color: #FFFFFF; }
.CardItem .InputSpan > a { padding: 4px; }
.Report .ReportBody { background-color: white;
border: solid 1px #80808040;
box-shadow: 0 0 3p silver;
margin: 0 auto;
max-width: 21cm;
padding: 1in;
font-size: 16px; }
.NewWindow_PrintPreview .Report .ReportBody { padding: 0;
border: 0;
box-shadow: 0 0 0; }
.EntityTypeLists a .Aggregate { border: unset !important;
opacity: 1; }
.EntityTypeLists a .Aggregate .AggregateValue { justify-content: center !important; }
.EntityTypeLists a.Selected .Aggregate {
opacity: 1;
background-color: #009ef7 !important;
color: var(--white); }
.EntityTypeLists a.Selected .Aggregate .AggregateValue { justify-content: center !important; }
/* OLU SATIR KALDIRILDI (2026-08-18). Burada `.EntityTypeLists a:hover` kurali
   `backgraund-color` diye YAZILMISTI ve hic calismiyordu (denetim SINIF-3).
   ⛔ ONEMLI: bu kusur ZATEN duzeltilmis — `16-eksik-tokenlar.css` ayni seciciye
   marka tonuyla (`rgba(0,158,247,.12)`) hover veriyor ve gerekcesini yaziyor.
   Ilk denememde yazim hatasini duzeltip NOTR GRI bir deger koydum; olctum ki o
   kural cascade'de DAHA SONRA geldigi icin mevcut MARKA TONUNU EZIYORDU — yani
   olculmus bir karari sessizce geri aliyordu. Dogru hamle: olu satiri KALDIR,
   rakip kural YAZMA. Tek sahip: 16-eksik-tokenlar.css. */
.Content ContentPanel { flex: 1;
background: var(--white);
border-radius: 8px;
padding: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin: 0; }
.ContentHeaderTitle { font-size: 2.5em; 
font-weight: bold;
flex: 1;
align-items: flex-start; }
#LoginForm .UserName .UserImage { position: absolute;
  right: 36px;
  display: flex;
  justify-content: center;
  align-items: anchor-center;
  padding-top: 8px;
  font-size: 10px; }
#LoginForm .UserPassword { display: flex;
  flex-direction: row-reverse; }
#LoginForm .UserPassword .PasswordIcon { position: absolute;
  left: auto;
  bottom: 0;
  top: 3px;
  padding: 0 ;
  font-size: 1.5em;
  right: 36px; }
#LoginForm .UserPassword input { padding-left:1em; }
.ItemStates { gap:4px;
padding: 2px; }
.ItemStates .Left { gap: 4px; }
.ItemStates .Left .Transition { margin: 0 -12px 0 0;
clip-path: polygon(15px 0%, 100% 0%, calc(100% - 15px) 50%, 100% 100%, 15px 100%, 0% 50%);
z-index: 2; }
.ItemStates .Left .Transition > span { height: 2em !important;
font-size: 11px;
width: fit-content;
max-width: fit-content;
font-weight: 600;
letter-spacing: 0.6px;
padding: 0 4px;
color: #263238; }
.ItemStates .Left .Transition:last-child { clip-path: polygon(15px 0%, 100% 0%, 100% 100%, 15px 100%, 0% 50%);
margin-right: 0; }
.ItemStates .Center { background-color: rgba(255,255,255,0.9) !important;
border-radius:0 !important;
border-bottom:0 !important; }
.ItemStates .Center .Transition { margin: 0; }
.ItemStates .Center .Transition > span { height: 2em !important; }
.ItemStates .Right { gap: 4px; }
.ItemStates .Right .Transition { margin: 0 0 0 -12px;
clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%, 15px 50%);
z-index: 2; }
.ItemStates .Right .Transition > span { height: 2em !important;
font-size: 11px;
width: fit-content;
max-width: fit-content;
font-weight: 600;
letter-spacing: 0.6px;
padding: 0 4px;
color: #263238; }
.ItemStates .Right .Transition:first-child { clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 0% 100%);
margin-left: 0; }
.TabPanel_TabVer { display: flex !important;
    flex-direction: row !important; }
.TabPanel_TabVer >.TabHeader { flex: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: fit-content;
    min-width: 100px; }
.TabPanel_TabVer >.TabHeader span.Selected { box-shadow: 0 0 0;
    border-radius: 0;
    text-shadow: 0 0 0;
    border-color: #005e89;
    background-color: #03A9F4;
    color: #ffffff;
    opacity: 1.0;
    width:100% }
.TabPanel_TabVer >.TabHeader span.Selected::after { color: #bfe8ff; }
.TabPanel_TabVer >.TabHeader >.TabButton { min-height: 4rem;
min-width: 100%;
border-bottom: 1px solid #CFD8DC; }
.TabPanel_TabVer >.TabHeader span { opacity: 1 !important;
    letter-spacing: 1px;
    font-size: 100%;
    font-weight: 600 !important; }
.EntityAiBtn { padding:0; }
.EntityAiBtn::before { content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238A2BE2'%3E%3Cpath d='M19 10.5l-1.2-2.8L15 6.5l2.8-1.2L19 2.5l1.2 2.8L23 6.5l-2.8 1.2L19 10.5zm-5 4L12 9l-2 5.5L4.5 17l5.5 2 2 5.5 2-5.5 5.5-2-5.5-2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain; }
.EntityTypeView .Center > .Paging { opacity: 1 !important; }
.EntityTypeView .Center > .Paging .FieldHasSelect > select { background-color: #044a83;
color: #ffffff !important; }
.EntityTypeView .Center > .Paging .FieldHasSelect::after { color:#ffffff !important; }
.EntityTypeView .Center > .Paging > a { border: solid 1px #164279;
background-color: #9ac0ef; }
.FieldMultipleChoice .FieldValue { gap:6px; }
.FieldMultipleChoice .FieldValue .Choices { position: relative;
display: flex;
top: unset;
font-size:10px; }
.FieldMultipleChoice .FieldValue .Choices > .Choice { padding: 4px !important;
    border-radius: 2px; }
.FieldMultipleChoice .FieldValue .Choices > .Choice.Selected { background-color: #CFD8DC;
color:#607d8b; }
.FieldMultipleChoice .FieldValue .ChoiceTitles .Choice { background-color: #FFE0B2; }

.SingleItemHeader .FieldSet > .DirectionVer > div {
    display: inherit !important;
}


@media only screen and (max-width: 767px) {
.ItemHeader { padding: 4px; }
.SingleItem_Subscriber_Request { font-size: 100%;
padding: 0.5em 1.5rem; }



.SingleItemHeader { --inputPadding: 0; }
.SingleItemHeader .FieldSet_c { border-left: 0;
border-right: 0;
padding: 1px; }
.SingleItemHeader .FieldSet_l { padding: 1px; }
.TabPanel_Tab .TabBody { padding: 0; }
.TabPanel .TabHeader { border-radius: 0;
justify-content: flex-start;
margin: 0;
padding: 0; }
.LoginForm >form { font-size: 100%; }
.FilesDisplay >.FileDisplay { margin: 4px 0; }
.ContentHeaderTitle { font-size: 2em; }
}

/* 2026-08-07 — D2: Kullanıcı Tipi 18 buton compact */
.FieldUserType .FieldValue .Choices {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    font-size: 11px;
}
.FieldUserType .FieldValue .Choices > .Choice {
    padding: 3px 8px !important;
    border-radius: 6px;
    font-size: 11px;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
}
.FieldUserType .FieldValue .Choices > .Choice.Selected {
    background-color: var(--activeColor, #0a6eb9);
    color: #fff;
}
/* zz-graph.css — my.GRAPH renderer chrome + "Bağlantılar" hub'ı (post-Meta core tier).
 * 2026-07-06 REDESIGN: eski drawer / sekme / nav-block / KPI-şeridi / fullarea-bar
 * blokları KALDIRILDI (tek yüzey ilkesi); yerine ferah iki-kolonlu hub geldi:
 * sol insan-dili bağlantı grupları + sağ KARE küme-balonlu harita + mini kayıt kartı.
 * JS yalnız class toggle eder — CSS burada yaşar (hard rule). */

:root {
    --graph-border: rgba(120, 120, 130, 0.28);
    --graph-bg: rgba(255, 255, 255, 0.6);
    --graph-chip-bg: rgba(120, 120, 130, 0.10);
    --graph-chip-bg-active: #5b8def;
    --graph-chip-fg-active: #ffffff;
    --graph-accent: #5b8def;
}

/* ══ my.GRAPH temel iskeleti (diğer tüketiciler: ai-manager semantic graph,
      NetworkDiagram göçü, modül haritası API'si) ══ */
.graph-root {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 320px;
}

.graph-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--graph-border);
    background: var(--graph-bg);
    font-size: 12px;
    flex-shrink: 0;
}
.graph-toolbar-group { display: flex; align-items: center; gap: 4px; }

.graph-btn {
    appearance: none;
    border: 1px solid var(--graph-border);
    background: transparent;
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    color: inherit;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.graph-btn:hover { background: var(--graph-chip-bg); }
.graph-btn.active {
    background: var(--graph-chip-bg-active);
    border-color: var(--graph-chip-bg-active);
    color: var(--graph-chip-fg-active);
}

.graph-layout-switch { border-right: 1px solid var(--graph-border); padding-right: 10px; }
.graph-depth-stepper { border-right: 1px solid var(--graph-border); padding-right: 10px; }
.graph-depth-label, .graph-dir-label { font-size: 11px; opacity: 0.7; margin-right: 2px; white-space: nowrap; }
.graph-depth-dec, .graph-depth-inc { width: 22px; height: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.graph-depth-value { min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; }

.graph-filters { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.graph-filter-chip {
    appearance: none;
    border: 1px solid var(--graph-border);
    background: var(--graph-chip-bg);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    cursor: pointer;
    color: inherit;
    opacity: 0.55;
    transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}
.graph-filter-chip.active {
    opacity: 1;
    background: var(--graph-chip-bg-active);
    border-color: var(--graph-chip-bg-active);
    color: var(--graph-chip-fg-active);
}
.graph-filters-dir { display: flex; align-items: center; gap: 4px; }
.graph-dir-select { border: 1px solid var(--graph-border); border-radius: 6px; background: transparent; color: inherit; font-size: 12px; padding: 3px 6px; }
.graph-actions { margin-left: auto; display: flex; gap: 4px; }

.graph-canvas { position: relative; flex: 1 1 auto; min-height: 240px; width: 100%; }

/* Çip/lejant taşma katlama (2026-07-17): 8+ ilişki türünde fazlası gizli, +N ile açılır */
.graph-filters .graph-chip-overflow,
.graph-legend-section .graph-chip-overflow { display: none; }
.graph-filters.expanded .graph-chip-overflow { display: inline-flex; }
.graph-legend-section.expanded .graph-chip-overflow { display: inline-flex; }
.graph-chip-more {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    color: var(--graph-accent);
    border: 1px dashed var(--graph-accent);
    background: transparent;
    cursor: pointer;
}
.graph-chip-more:hover { background: rgba(91, 141, 239, 0.10); }
.graph-legend-more { align-self: center; }

.graph-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 6px 10px; border-top: 1px solid var(--graph-border); font-size: 11px; flex-shrink: 0; }
.graph-legend-section { display: flex; flex-wrap: wrap; gap: 10px; }
.graph-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.graph-legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--graph-border); }
.graph-legend-line { display: inline-block; width: 18px; height: 0; border-top: 2px solid; }
.graph-legend-line-dashed { border-top-style: dashed; }
.graph-legend-label { opacity: 0.85; text-transform: capitalize; }

/* genel yükleniyor/boş durumları */
.graph-panel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 120px;
    font-size: 12px;
    opacity: 0.7;
}
.graph-panel-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    font-size: 12px;
    opacity: 0.6;
}
.state-hidden { display: none !important; }
.state-visible { display: flex; }

.graph-hub-state {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: min(560px, calc(100% - 32px));
    margin: auto;
    padding: 18px;
    border: 1px solid var(--graph-border);
    border-radius: 12px;
    background: var(--SurfaceColor, #fff);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
    text-align: left;
    opacity: 1;
}
.graph-hub-stateicon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--graph-chip-bg);
    color: var(--graph-accent);
    font-size: 13px;
    font-weight: 800;
}
.graph-hub-state-error .graph-hub-stateicon { color: #b83a3a; background: rgba(184, 58, 58, 0.10); }
.graph-hub-statetext { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.graph-hub-statetitle { font-size: 14px; font-weight: 800; color: var(--Text, #26314a); }
.graph-hub-statebody { font-size: 13px; line-height: 1.45; color: var(--Text, #26314a); opacity: 0.78; }
.graph-hub-stateactions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ── A1 (2026-07-06): progresif yükleme — skeleton + spinner + adım metni ──
 * Hub artık boş-beyaz beklemiyor: sol kolonda shimmer satırları, tuvalde
 * spinner + "Bağlantılar alınıyor… / Harita çiziliyor…" adımı. Veri geldikçe
 * bölümler BAĞIMSIZ dolar (Promise.all kapısı kalktı). */
@keyframes graph-skel-kf {
    0% { background-position: -160px 0; }
    100% { background-position: 160px 0; }
}
.graph-hub-skelrow {
    height: 14px;
    border-radius: 7px;
    margin: 10px 12px;
    background: linear-gradient(90deg, var(--graph-border) 25%, rgba(128,128,128,0.08) 50%, var(--graph-border) 75%);
    background-size: 320px 100%;
    animation: graph-skel-kf 1.1s linear infinite;
    opacity: 0.55;
}
.graph-hub-skelrow.is-head { width: 46%; height: 11px; margin-top: 18px; opacity: 0.8; }
.graph-hub-skelrow.is-w60 { width: 60%; }
.graph-hub-skelrow.is-w80 { width: 80%; }
.graph-hub-canvasload {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 3;
    pointer-events: none;
}
.graph-hub-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--graph-border);
    border-top-color: var(--graph-accent, #e8862c);
    animation: graph-spin-kf 0.9s linear infinite;
}
@keyframes graph-spin-kf { to { transform: rotate(360deg); } }
.graph-hub-loadstep { font-size: 12px; opacity: 0.75; }
.AsstSuggestSkel .graph-hub-skelrow { margin: 8px 4px; }

/* ══════════════════════════════════════════════════════════════════════
 *  "BAĞLANTILAR" HUB'ı — tek yüzey (atom.js ItemBody case Record_Connections)
 *  Sol: insan-dili gruplar (≈340px) · Sağ: KARE harita (72vh'e kadar).
 * ════════════════════════════════════════════════════════════════════════ */
.graph-hub {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 215px);
    min-height: 500px;
    padding: 0;
    box-sizing: border-box;
}

/* iki kolon — orta tam yükseklik */
.graph-hub-grid {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    width: 100%;
    height: 100%;
    flex: 1 1 100%;
    min-height: 0;
    box-sizing: border-box;
}

/* ── SOL kolon (içten kaydırılabilir, tam yükseklik) ── */
.graph-hub-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    box-sizing: border-box;
}

/* Sol panel başlık + insan-dili özet kartı */
.graph-hub-head {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px;
    border: 1px solid var(--graph-border, rgba(120, 120, 130, 0.2));
    border-radius: 12px;
    background: var(--SurfaceColor, #fff);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    flex: 0 0 auto;
}
.graph-hub-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--graph-accent, #2563eb);
}
.graph-hub-record {
    color: var(--Text, #1e293b);
    opacity: 0.9;
    font-weight: 700;
    font-size: 13.5px;
}
.graph-hub-summary {
    font-size: 12px;
    line-height: 1.45;
    color: #64748b;
    font-weight: 500;
}

.graph-hub-sidebody {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.graph-hub-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--graph-border);
    border-radius: 12px;
    background: var(--SurfaceColor, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.graph-hub-section.state-hidden { display: none !important; }
.graph-hub-sectionhead {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.72;
}

/* ── akordeon bölüm: tıkla-aç/kapat başlık + kaydırılabilir gövde ──
   (uzun ET listeleri — ör. "Bunu kullananlar" 28 grup — sol kolonu şişirmez) */
.graph-hub-acchead { display: flex; align-items: center; gap: 8px; }
.graph-hub-acctoggle {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
    text-align: left;
}
.graph-hub-acctitle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.graph-hub-accchev { flex: 0 0 auto; opacity: 0.5; font-size: 15px; line-height: 1; transition: transform 120ms ease; }
.graph-hub-accchev.open { transform: rotate(90deg); }
.graph-hub-acc-row .graph-hub-managelink { flex: 0 0 auto; }
.graph-hub-sectionbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
}
.graph-hub-section.is-collapsed .graph-hub-sectionbody { display: none; }
/* yol bölümü kısa ama içinde absolute autocomplete var → kırpma yok, scroll gereksiz */
.graph-hub-path .graph-hub-sectionbody { max-height: none; overflow: visible; }
.graph-hub-empty {
    padding: 14px;
    border: 1px dashed var(--graph-border);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.75;
}

/* grup satırı (ET grubu: başlık + sayı + ›) */
.graph-hub-group { display: flex; flex-direction: column; }
.graph-hub-grouphead {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    color: inherit;
    font-size: 13.5px;
    text-align: left;
}
.graph-hub-grouphead:hover { background: var(--graph-chip-bg); }
.graph-hub-grouplabel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.graph-hub-groupcount {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--graph-chip-bg);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.graph-hub-groupchev { flex: 0 0 auto; opacity: 0.5; font-size: 15px; transition: transform 120ms ease; }
.graph-hub-groupchev.open { transform: rotate(90deg); }
.graph-hub-groupbody { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 2px 6px; }

/* kayıt/dosya satırı */
.graph-hub-item { display: flex; align-items: center; gap: 4px; }
.graph-hub-itemmain {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 34px;
    padding: 5px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    color: inherit;
    text-align: left;
}
.graph-hub-itemmain:hover { background: var(--graph-chip-bg); }
.graph-hub-itemlabel { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.graph-hub-itemsub { font-size: 11px; opacity: 0.6; }
.graph-hub-itemopen {
    appearance: none;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid var(--graph-border);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    color: inherit;
    font-size: 13px;
    opacity: 0.7;
}
.graph-hub-itemopen:hover { opacity: 1; background: var(--graph-chip-bg-active); color: var(--graph-chip-fg-active); border-color: var(--graph-chip-bg-active); }
.graph-hub-morebtn {
    appearance: none;
    align-self: flex-start;
    margin: 4px 0 2px 8px;
    padding: 4px 10px;
    border: 1px dashed var(--graph-border);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    color: inherit;
    font-size: 12px;
    opacity: 0.75;
}
.graph-hub-morebtn:hover { opacity: 1; background: var(--graph-chip-bg); }

/* yol bölümü */
.graph-hub-pathwrap { position: relative; display: flex; flex-direction: column; }
.graph-hub-pathnote { font-size: 12.5px; line-height: 1.45; opacity: 0.8; overflow-wrap: anywhere; }
.graph-hub-pathnote:empty { display: none; }

/* ── SAĞ: GENİŞLETİLMİŞ TAM YÜKSEKLİK HARİTA (2026-09-12 CX Redesign) ── */
.graph-hub-canvaswrap {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 480px;
    flex: 1 1 100%;
    border: 1px solid var(--graph-border);
    border-radius: 16px;
    background: var(--graph-bg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* Tuval: Üst araç çubuğunun altındaki alanı tam kaplar */
.graph-hub-canvas {
    position: relative;
    width: 100%;
    height: calc(100% - 48px);
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    z-index: 1;
    background: #fafbfc;
    border-radius: 0 0 15px 15px;
}
.graph-hub-canvas .graph-root {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}
.graph-hub .graph-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    z-index: 1;
}

/* ── Üst Araç Çubuğu (Top Dedicated Header Bar) ── */
.graph-hub-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    min-height: 48px;
    padding: 0 16px;
    background: #ffffff;
    border-bottom: 1px solid rgba(120, 120, 130, 0.18);
    border-radius: 15px 15px 0 0;
    z-index: 25;
    flex: 0 0 48px;
    gap: 12px;
    box-sizing: border-box;
}

.graph-hub-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.graph-hub-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Arama çubuğu — kompakt arama kutusu */
.graph-hub-search {
    position: relative;
    width: 220px;
}
.graph-hub-searchin {
    width: 100%;
    height: 32px;
    padding: 0 12px 0 32px;
    border: 1px solid rgba(120, 120, 130, 0.22);
    border-radius: 8px;
    background: #f8fafc;
    color: inherit;
    font-size: 12px;
    box-sizing: border-box;
    transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.graph-hub-searchin:focus {
    outline: none;
    border-color: var(--graph-accent, #3b82f6);
    background: #ffffff;
    width: 260px;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}
.graph-hub-search::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}

.graph-hub-searchdrop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow: auto;
    border: 1px solid rgba(120, 120, 130, 0.28);
    border-radius: 12px;
    background: #ffffff !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}
.graph-hub-searchopt {
    appearance: none;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
    font-size: 13px;
    text-align: left;
    transition: background 100ms ease;
}
.graph-hub-searchopt:hover { background: var(--graph-chip-bg); }
.graph-hub-searchopt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.graph-hub-searchopt span { margin-left: auto; flex: 0 0 auto; font-size: 11px; opacity: 0.6; }
.graph-hub-searchhint { padding: 10px 12px; font-size: 12px; opacity: 0.7; }

/* Görünüm ve Rehber Açılırları */
.graph-hub-gear { position: relative; flex: 0 0 auto; }
.graph-hub-gearpop {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--graph-border);
    border-radius: 14px;
    background: var(--SurfaceColor, #fff);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
    min-width: 240px;
}
.graph-hub-gearpop.state-hidden { display: none !important; }
.graph-hub-gearpop .graph-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 220px;
    padding: 8px 12px;
    text-align: left;
    border-radius: 10px;
}
.graph-hub-gearpop-title { font-size: 12.5px; font-weight: 800; }
.graph-hub-gearpop-hint { font-size: 11px; line-height: 1.35; opacity: 0.65; }

/* Kapsam / Görünüm Butonu — Zarif Buton */
.graph-hub-gearbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(120, 120, 130, 0.22);
    background: #ffffff;
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    transition: all 140ms ease;
    white-space: nowrap;
    box-sizing: border-box;
}
.graph-hub-gearbtn:hover {
    background: #f8fafc;
    border-color: rgba(120, 120, 130, 0.38);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.graph-hub-gearbtn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    line-height: 1;
}
.graph-hub-gearbtn-icon svg {
    display: block;
}
.graph-hub-gearbtn-prefix {
    color: #64748b;
    font-weight: 500;
    font-size: 11.5px;
}
.graph-hub-gearbtn-label {
    font-weight: 600;
    color: #0f172a;
}
.graph-hub-gearbtn-chev {
    color: #94a3b8;
    font-size: 10px;
    margin-left: 2px;
}
.graph-hub-gearpop .graph-btn.active { background: var(--graph-chip-bg-active); border-color: var(--graph-chip-bg-active); }
.graph-hub-gearpop .graph-btn.active .graph-hub-gearpop-title,
.graph-hub-gearpop .graph-btn.active .graph-hub-gearpop-hint { color: var(--graph-chip-fg-active); }
.graph-hub-gearpop .graph-btn.active .graph-hub-gearpop-title::before { content: "✓ "; }

/* 360° Dijital İkiz Butonu — Kompakt Rozet Buton */
.graph-hub-twinbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(14, 165, 233, 0.32);
    background: rgba(14, 165, 233, 0.08);
    color: #0284c7;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 140ms ease;
    white-space: nowrap;
    box-sizing: border-box;
}
.graph-hub-twinbtn:hover {
    background: rgba(14, 165, 233, 0.16);
    border-color: #0284c7;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.18);
}
.graph-hub-twinbtn svg {
    flex-shrink: 0;
    display: block;
}

/* Rehber Butonu — Kompakt İkon ve Etiket Buton */
.graph-hub-guidebtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(120, 120, 130, 0.22);
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 140ms ease;
    white-space: nowrap;
    box-sizing: border-box;
}
.graph-hub-guidebtn:hover {
    background: #f8fafc;
    border-color: rgba(120, 120, 130, 0.38);
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.graph-hub-guidebtn svg {
    flex-shrink: 0;
    display: block;
    color: #64748b;
}

.graph-hub-tbbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--graph-border);
    background: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    white-space: nowrap;
}
.graph-hub-tbbtn:hover {
    background: var(--graph-chip-bg);
    border-color: var(--graph-accent);
}
.graph-hub-tbbtn.active {
    background: var(--graph-chip-bg-active);
    color: var(--graph-chip-fg-active);
    border-color: var(--graph-chip-bg-active);
}

/* ── Açılır Rehber Kartı (Floating Popover Guide Card) ── */
.graph-hub-guide {
    position: absolute;
    top: 54px;
    right: 16px;
    z-index: 95;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
    padding: 14px 16px;
    border: 1px solid rgba(120, 120, 130, 0.22);
    background: #ffffff !important;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    animation: graph-guide-in 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes graph-guide-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.graph-hub-guide.state-hidden { display: none !important; }
.graph-hub-guide-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.graph-hub-guide-main b {
    font-size: 12.5px;
    color: var(--graph-accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.graph-hub-guide-close {
    appearance: none;
    border: 0;
    background: transparent;
    font-size: 15px;
    cursor: pointer;
    opacity: 0.6;
    padding: 0 4px;
    line-height: 1;
}
.graph-hub-guide-close:hover { opacity: 1; color: #d9534f; }
.graph-hub-guide-main span {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--Text, #26314a);
    opacity: 0.8;
}
.graph-hub-guide-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
}
.graph-hub-guide-steps span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 1px 8px;
    border: 1px solid var(--graph-border);
    border-radius: 999px;
    background: var(--SurfaceColor, #fff);
    color: var(--Text, #26314a);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* ── Tuval Üzeri Yüzen Kompakt Kontrol Rıhtımı (.graph-toolbar) — Ultimate Spatial Dock ── */
.graph-hub .graph-toolbar {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 22;
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(120, 120, 130, 0.24);
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 999px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
    white-space: nowrap;
    box-sizing: border-box;
    overflow: hidden;
    transition: opacity 160ms ease, transform 160ms ease;
}
.graph-hub .graph-toolbar.is-collapsed {
    display: none !important;
}
.graph-hub .graph-toolbar .graph-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
}
/* Gruplar arası zarif dikey ayırıcı çizgi */
.graph-hub .graph-toolbar .graph-toolbar-group + .graph-toolbar-group::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 18px;
    background: rgba(120, 120, 130, 0.22);
    margin: 0 4px 0 2px;
}

/* Düzen Butonları (Layout Buttons) */
.graph-hub .graph-toolbar .graph-layout-btn {
    height: 26px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #475569;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 120ms ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.graph-hub .graph-toolbar .graph-layout-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #0f172a;
}
.graph-hub .graph-toolbar .graph-layout-btn.active {
    background: #2563eb;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}
.graph-hub .graph-toolbar .graph-layout-btn[data-layout="force"]::before { content: "⑂"; font-size: 11px; opacity: 0.85; }
.graph-hub .graph-toolbar .graph-layout-btn[data-layout="hier"]::before { content: "⑃"; font-size: 11px; opacity: 0.85; }
.graph-hub .graph-toolbar .graph-layout-btn[data-layout="circular"]::before { content: "◯"; font-size: 9px; opacity: 0.85; }

/* Derinlik Stepper (Depth Stepper) */
.graph-hub .graph-toolbar .graph-depth-stepper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.graph-hub .graph-toolbar .graph-depth-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-right: 2px;
}
.graph-hub .graph-toolbar .graph-depth-dec,
.graph-hub .graph-toolbar .graph-depth-inc {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(120, 120, 130, 0.24);
    border-radius: 50%;
    background: #ffffff;
    color: #1e293b;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 100ms ease;
}
.graph-hub .graph-toolbar .graph-depth-dec:hover,
.graph-hub .graph-toolbar .graph-depth-inc:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}
.graph-hub .graph-toolbar .graph-depth-value {
    min-width: 14px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 800;
    color: #0f172a;
}

/* Filtre Çipleri (Filter Chips) */
.graph-hub .graph-toolbar .graph-filter-chip {
    height: 24px;
    padding: 0 8px;
    border: 1px solid rgba(120, 120, 130, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    font-size: 10.5px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 120ms ease;
}
.graph-hub .graph-toolbar .graph-filter-chip:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}
.graph-hub .graph-toolbar .graph-filter-chip.active {
    background: #0ea5e9;
    color: #ffffff;
    border-color: #0ea5e9;
    font-weight: 700;
}

/* Yön Seçici (Direction Select) */
.graph-hub .graph-toolbar .graph-filters-dir {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.graph-hub .graph-toolbar .graph-dir-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}
.graph-hub .graph-toolbar .graph-dir-select {
    height: 24px;
    padding: 0 6px;
    border: 1px solid rgba(120, 120, 130, 0.24);
    border-radius: 6px;
    background: #ffffff;
    color: #1e293b;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}

/* Aksiyon Butonları (Actions: Sığdır & Sıfırla) */
.graph-hub .graph-toolbar .graph-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.graph-hub .graph-toolbar .graph-fit-btn,
.graph-hub .graph-toolbar .graph-reset-btn {
    height: 24px;
    padding: 0 8px;
    border: 1px solid rgba(120, 120, 130, 0.22);
    border-radius: 6px;
    background: #ffffff;
    font-size: 11px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 120ms ease;
}
.graph-hub .graph-toolbar .graph-fit-btn:hover,
.graph-hub .graph-toolbar .graph-reset-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}
.graph-hub .graph-toolbar .graph-fit-btn::before { content: "⛶ "; font-size: 10px; margin-right: 2px; opacity: 0.75; }
.graph-hub .graph-toolbar .graph-reset-btn::before { content: "↺ "; font-size: 11px; margin-right: 2px; opacity: 0.75; }

/* Çift arama ve çip kirliliğini engelle: İlişki filtreleri sol panelde, arama üstte yaşar */
.graph-hub .graph-search,
.graph-hub .graph-toolbar .graph-filters {
    display: none !important;
}

/* Yüzen Lejant Rozeti (Sol Alt, dock ile çakışmayacak zarif yükseklik) */
.graph-hub .graph-legend {
    position: absolute;
    bottom: 58px;
    left: 14px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 4px 12px;
    border: 1px solid rgba(120, 120, 130, 0.20);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.90);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    font-size: 11px;
}

/* Zoom Butonları (Sağ Alt) */
.graph-hub .orb-zoombar {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.graph-hub .orb-zbtn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(120, 120, 130, 0.22);
    background: rgba(255, 255, 255, 0.90);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 100ms ease, background 120ms ease;
}
.graph-hub .orb-zbtn:hover {
    background: #fff;
    transform: scale(1.05);
}

/* Sol Panel: Görünüm Seçici (Kompakt ve Şık Segmented Control) */
.graph-hub-side-viewctrl {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px 12px 14px;
    border-bottom: 1px solid rgba(120, 120, 130, 0.15);
    background: #ffffff;
}
.graph-hub-side-viewlabel {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
}
.graph-hub-side-viewctrl .is-view-group {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 8px;
}
.graph-hub-side-viewctrl .is-view-group .graph-btn {
    flex: 1 1 50%;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 140ms ease;
    white-space: nowrap;
}
.graph-hub-side-viewctrl .is-view-group .graph-btn:hover {
    color: #0f172a;
}
.graph-hub-side-viewctrl .is-view-group .graph-btn.active {
    background: #ffffff;
    color: #1e293b;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* mini kayıt kartı (tuval üstü popover — tek küçük overlay, yöntem değil) */
.graph-nodecard {
    position: absolute;
    top: var(--card-y, 60px);
    left: var(--card-x, 20px);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
    max-width: 280px;
    padding: 12px;
    border: 1px solid var(--graph-border);
    border-radius: 12px;
    background: var(--SurfaceColor, #fff);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}
.graph-nodecard-title { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.graph-nodecard-meta { display: flex; align-items: center; gap: 6px; }
.graph-nodecard-type {
    display: inline-flex;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--graph-chip-bg);
    font-size: 11px;
    font-weight: 600;
}
.graph-nodecard-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════
 *  my.ORBIT — platform-içi SVG yörünge haritası (x-orbit.js; hub'ın motoru)
 *  Keskin yazı, hover figür-zemin, foto/harf avatar, pasif ayrımı, hayalet öneri.
 * ════════════════════════════════════════════════════════════════════════ */
.orb-host { position: relative; width: 100%; height: 100%; }
.orb-svg { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.orb-panning .orb-svg { cursor: grabbing; }

.orb-edge {
    fill: none;
    stroke: rgba(120, 126, 140, 0.42);
    stroke-width: 1.1;
    transition: opacity 140ms ease, stroke-width 140ms ease;
}
.orb-edge-main { stroke: currentColor; opacity: 0.55; }
.orb-edge-member { stroke: rgba(120, 126, 140, 0.35); }
.orb-edge-ghost { stroke: rgba(120, 126, 140, 0.55); stroke-dasharray: 5 4; }
.orb-edge-hot { opacity: 1 !important; stroke-width: 2.4; stroke: var(--graph-accent); }
.orb-edge-path { stroke: #ff8c42 !important; stroke-width: 3 !important; opacity: 1 !important; }

.orb-node { cursor: pointer; }
.orb-node .orb-ring { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 2; }
.orb-node .orb-body { stroke: rgba(0, 0, 0, 0.14); stroke-width: 1; transition: transform 120ms ease; }
.orb-node text { user-select: none; pointer-events: none; }
.orb-ini { fill: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.orb-count { fill: #fff; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.orb-emoji { font-size: 13px; }
.orb-plus { fill: var(--graph-accent); font-size: 16px; font-weight: 800; }
.orb-label {
    fill: var(--Text, #2a3040);
    font-size: 11.5px;
    paint-order: stroke;
    stroke: var(--SurfaceColor, #fff);
    stroke-width: 3px;
    stroke-linejoin: round;
}
.orb-label2 { font-size: 10px; opacity: 0.65; }
.orb-balloon .orb-label { font-weight: 700; font-size: 12.5px; }
.orb-balloon .orb-ring { stroke: rgba(0, 0, 0, 0.10); }
.orb-balloon-open .orb-count { font-size: 10px; }
.orb-center .orb-ring { stroke: var(--graph-accent); stroke-width: 3; }
.orb-center .orb-label { font-weight: 800; font-size: 13px; }
.orb-more .orb-body { fill: var(--graph-chip-bg) !important; stroke-dasharray: 3 3; }
.orb-more .orb-label { opacity: 0.7; }
.orb-sat .orb-label { font-size: 10px; opacity: 0.8; }

/* AKTİF/PASİF ayrımı — pasif: soluk + kesik halka; silinmiş zaten gelmez ama emniyet */
.orb-passive { opacity: 0.5; }
.orb-passive .orb-ring { stroke-dasharray: 4 3; stroke: rgba(120, 126, 140, 0.8); }
.orb-deleted { opacity: 0.3; }
.orb-deleted .orb-ring { stroke-dasharray: 2 3; stroke: #d05252; }

/* hayalet öneri düğümü */
.orb-ghostnode .orb-body { stroke: var(--graph-accent); stroke-dasharray: 4 3; stroke-width: 1.6; }
.orb-ghostnode .orb-label { fill: var(--graph-accent); font-weight: 600; }

/* hover figür-zemin: sıcak düğüm büyür, kalanlar hafif söner */
.orb-node.orb-hot .orb-body { transform: scale(1.12); }
.orb-node.orb-hot .orb-label { font-weight: 700; }
.orb-hovering .orb-node:not(.orb-hot) { opacity: 0.45; }
.orb-hovering .orb-edge:not(.orb-edge-hot):not(.orb-edge-path) { opacity: 0.16; }

/* yol modu: zincir dışı sönük */
.orb-haspath .orb-node:not(.orb-onpath) { opacity: 0.3; }
.orb-haspath .orb-node.orb-onpath .orb-ring { stroke: #ff8c42; stroke-width: 3; }
.orb-haspath .orb-edge:not(.orb-edge-path) { opacity: 0.12; }

/* odak flaşı */
@keyframes orb-flash-kf {
    0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); }
}
.orb-flash .orb-body { animation: orb-flash-kf 650ms ease; }

/* tooltip (HTML overlay) */
.orb-tip {
    position: absolute;
    top: var(--tip-y, 12px);
    left: var(--tip-x, 12px);
    z-index: 35;
    max-width: 240px;
    padding: 8px 10px;
    border: 1px solid var(--graph-border);
    border-radius: 10px;
    background: var(--SurfaceColor, #fff);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    pointer-events: none;
    font-size: 12px;
}
.orb-tip-title { font-weight: 700; margin-bottom: 3px; overflow-wrap: anywhere; }
.orb-tip-meta { display: flex; gap: 6px; align-items: center; margin-bottom: 3px; }
.orb-tip-kind { padding: 0 7px; border-radius: 999px; background: var(--graph-chip-bg); font-size: 10.5px; font-weight: 600; }
.orb-tip-state { padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.orb-tip-state.is-active { color: #2f9e6b; background: rgba(47, 158, 107, 0.12); }
.orb-tip-state.is-passive { color: #9aa1ac; background: rgba(154, 161, 172, 0.16); }
.orb-tip-hint { opacity: 0.6; font-size: 11px; }

/* zoom bar (harita köşesi) */
.orb-zoombar {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.orb-zbtn {
    appearance: none;
    width: 32px;
    height: 32px;
    border: 1px solid var(--graph-border);
    border-radius: 8px;
    background: var(--SurfaceColor, #fff);
    color: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.orb-zbtn:hover { background: var(--graph-chip-bg-active); color: var(--graph-chip-fg-active); border-color: var(--graph-chip-bg-active); }

/* Dosyalar başlığındaki "Belgeler'de yönet →" köprüsü */
.graph-hub-sectionhead-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-transform: none; }
.graph-hub-sectionhead-row > span { text-transform: uppercase; }
.graph-hub-managelink {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--graph-accent);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
    text-transform: none;
    letter-spacing: 0;
}
.graph-hub-managelink:hover { background: var(--graph-chip-bg); }

/* dar ekran: dikey istif (liste üstte, kare harita altta) */
@media (max-width: 900px) {
    .graph-hub-grid { grid-template-columns: 1fr; }
    /* 2026-09-16 ölçüldü (dt-baglantilar-islev-sonda mobil): tuval 370 px kalıyordu, 40 düğümlük graf sığmıyor; dokunulamayan düğümlerin hepsi "pencere dışı".
       Dar ekranda tuval görünür alana yayılır (üst başlık ~180 px + alt sabit çubuklar ~120 px payı düşülür), ölçek okunur kalır ve kalan düğümler kaydırılarak gezilir. */
    .graph-hub-canvaswrap { min-height: min(620px, calc(100dvh - 300px)); max-height: none; }
    /* tam ekran graf (kullanıcı kararı 2026-09-16): dar ekranda 314 px'lik banda sıkışan graf sayfanın üstüne çıkar */
    /* ölçüldü: platform ItemCenter'a satır içi height veriyor (500px) — fixed + inset yetmedi, yükseklik/genişlik AÇIKÇA zorlanır */
    .graph-hub.is-tamekran { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; min-height: 0 !important; z-index: 100000 !important; margin: 0 !important; padding: 8px !important; background: var(--graph-bg, #ffffff) !important; overflow: hidden !important; box-sizing: border-box !important; }
    .graph-hub.is-tamekran .graph-hub-grid { height: 100% !important; grid-template-columns: 1fr !important; }
    .graph-hub.is-tamekran .graph-hub-side { display: none !important; }
    .graph-hub.is-tamekran .graph-hub-canvaswrap { height: 100% !important; min-height: 0 !important; }
    /* A/B ile ölçüldü (dt-tamekran-contain-ab): ata `.ActiveContent.SingleItem` üzerindeki `contain: layout style` sabit konumu ÇAPALIYOR —
       kap 59 px aşağıda başlıyordu; contain gevşetilince 0 px. Yalnız tam ekran AÇIKKEN ve yalnız bu atalarda gevşetilir. */
    body.graph-hub-tamekran .ActiveContent.SingleItem,
    body.graph-hub-tamekran .MainContentDIV,
    body.graph-hub-tamekran .PageZone { contain: none !important; }
    body.graph-hub-tamekran .ItemBottom,
    body.graph-hub-tamekran .PageZone_footer,
    body.graph-hub-tamekran .MobileBottomBar { display: none !important; }
    .graph-hub-bar { flex-wrap: wrap; }
    .graph-hub-search { flex: 1 1 100%; }
    .graph-hub-guide { align-items: flex-start; flex-direction: column; }
    .graph-hub-guide-steps { flex-wrap: wrap; }
}

/* ══ AI Manager — Semantic Graph tab (ai-manager.js, B1.6) — DEĞİŞMEDİ ══ */
.aim-semgraph { display: flex; flex-direction: column; gap: 12px; }
.aim-semgraph-hint { margin: 0; font-size: 12px; opacity: 0.7; }
.aim-semgraph-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.aim-semgraph-agent-select {
    border: 1px solid var(--border-color, var(--graph-border));
    border-radius: 8px;
    background: var(--card-bg, transparent);
    color: inherit;
    font-size: 13px;
    padding: 6px 10px;
    min-width: 200px;
}
.aim-semgraph-search { display: inline-flex; align-items: center; gap: 4px; flex: 1 1 240px; min-width: 200px; }
.aim-semgraph-search input {
    flex: 1 1 auto;
    border: 1px solid var(--border-color, var(--graph-border));
    border-radius: 8px;
    background: var(--card-bg, transparent);
    color: inherit;
    font-size: 13px;
    padding: 6px 10px;
}
.aim-semgraph-stats { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; opacity: 0.85; }
.aim-semgraph-stat b { font-variant-numeric: tabular-nums; margin-right: 3px; }
.aim-semgraph-mount {
    position: relative;
    width: 100%;
    height: 480px;
    border: 1px solid var(--border-color, var(--graph-border));
    border-radius: 12px;
    overflow: hidden;
    background: var(--card-bg, transparent);
}
.aim-semgraph-loading, .aim-semgraph-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 8px;
    text-align: center;
    padding: 24px;
    opacity: 0.6;
    font-size: 13px;
}
.aim-semgraph-empty i { font-size: 32px; opacity: 0.4; }
.aim-semgraph-info { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.aim-semgraph-info-head { font-size: 13px; }
.aim-semgraph-info-kind { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--graph-chip-bg); font-size: 11px; text-transform: capitalize; }
.aim-semgraph-info-rel, .aim-semgraph-info-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.aim-semgraph-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--graph-border); background: var(--graph-chip-bg); font-size: 11px; }
.aim-semgraph-fact { padding: 6px 10px; border-radius: 8px; background: var(--graph-chip-bg); font-size: 12px; }

/* G6 — tag (frontmatter) filter chips, node search, saved views */
.graph-filter-chip-tag { font-family: var(--font-mono, monospace); }
.graph-search-input {
    min-width: 140px;
    padding: 3px 8px;
    border: 1px solid var(--border-color, rgba(148,163,184,.35));
    border-radius: 12px;
    background: var(--input-bg, transparent);
    color: inherit;
    font-size: 12px;
}
.graph-views { display: flex; gap: 4px; align-items: center; }
.graph-view-select {
    padding: 3px 6px;
    border: 1px solid var(--border-color, rgba(148,163,184,.35));
    border-radius: 6px;
    background: var(--input-bg, transparent);
    color: inherit;
    font-size: 12px;
}
.graph-view-del[disabled] { opacity: .45; cursor: default; }

/* ══════════════════════════════════════════════════════════════════════════
   361 KURUMSAL DİJİTAL İKİZ: MEKÂNSAL GEZGİN & DEĞER AKIŞI (2026-09-11)
   Enterprise Digital Twin Spatial Navigator & Industrial Analogy Standard
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Header Symmetrical Trigger (Inside .EntitySelector) ─────────────── */
.PageZone_headercenter .EntitySelector,
.EntitySelector {
    position: relative !important;
}

.PageZone_headercenter .EntitySelector .Button,
.PageZone_headercenter .EntitySelector .Button:hover,
.PageZone_headercenter .EntitySelector .Button:focus,
.PageZone_headercenter .EntitySelector .Button:active,
.EntitySelector .Button,
.EntitySelector .Button:hover,
.EntitySelector .Button:focus,
.EntitySelector .Button:active {
    transform: none !important;
}

#DigitalTwinHeaderTrigger.digital-twin-trigger,
.digital-twin-trigger {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 6px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #94a3b8;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
    z-index: 9999 !important;
    pointer-events: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

#DigitalTwinHeaderTrigger.digital-twin-trigger:hover,
#DigitalTwinHeaderTrigger.digital-twin-trigger:focus,
.digital-twin-trigger:hover,
.digital-twin-trigger:focus {
    transform: translateY(-50%) !important;
    top: 50% !important;
    bottom: auto !important;
    margin: 0 !important;
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.18) !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.35) !important;
}

#DigitalTwinHeaderTrigger.digital-twin-trigger:active,
.digital-twin-trigger:active {
    transform: translateY(-50%) scale(0.92) !important;
}

.digital-twin-trigger svg,
.twin-trigger-svg {
    display: block;
    width: 24px !important;
    height: 24px !important;
    stroke: currentColor;
    overflow: visible;
}

/* ── 2. Full-Viewport Digital Twin Workspace Shell ────────────────────── */
.digital-twin-workspace {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: #070a13;
    color: #f8fafc;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    animation: twinFadeIn 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.digital-twin-workspace.state-hidden {
    display: none !important;
}


@keyframes twinFadeIn {
    from { opacity: 0; transform: scale(0.99); }
    to { opacity: 1; transform: scale(1); }
}

/* ── 3. Topbar (Streamlined Executive) ────────────────────────────────── */
.digital-twin-topbar {
    position: relative;
    height: 48px;
    background: rgba(13, 18, 30, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    flex-shrink: 0;
    z-index: 50;
    box-sizing: border-box;
}

.twin-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: default;
    user-select: none;
    flex-shrink: 0;
}

.twin-brand-icon {
    font-size: 20px;
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.6));
}

.twin-brand-meta {
    display: flex;
    flex-direction: column;
}

.twin-brand-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #f8fafc;
    line-height: 1.2;
}

.twin-brand-sub {
    font-size: 9.5px;
    color: #64748b;
    letter-spacing: 0.2px;
    line-height: 1.1;
}

.twin-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: start;
    min-width: 0;
}

.twin-topbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 100%;
    max-width: 440px;
    min-width: 180px;
}

.twin-topbar-right,
.twin-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-self: end;
    min-width: 0;
    z-index: 52;
}

.twin-search-wrap {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    z-index: 55;
}

.twin-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #94a3b8;
    pointer-events: none;
}

.twin-search-input {
    width: 100%;
    height: 32px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    padding: 0 12px 0 32px;
    color: #f8fafc;
    font-size: 12px;
    outline: none;
    transition: all 140ms ease;
    box-sizing: border-box;
}

.twin-search-input:focus {
    border-color: #38bdf8;
    background: rgba(15, 23, 42, 0.9);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

.twin-search-drop {
    position: absolute;
    top: calc(100% + 6px);
    /* Liste genişliğini arama KUTUSUNDAN almaz: kutu masaüstünde 191 px kalıyordu ve öneri adları
       kırpılıyordu (ölçüldü canlı satis: "Alper Dereli", "Alper Yalçın", "Satış Fırsatları",
       mobilde ayrıca "DSR-26-00071"). Liste kutuya ortalanır, kendi okunur genişliğini alır ve
       dar ekranda görünüm alanının %92'sini aşmaz. */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: max(100%, 420px);
    max-width: min(92vw, 560px);
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
}

.twin-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #e2e8f0;
    transition: background 100ms ease;
}

.twin-search-row:hover {
    background: rgba(56, 189, 248, 0.15);
    color: #ffffff;
}

/* Öneri satırının BAŞLIĞI da tek satıra zorlanmaz: dar ekranda kırpılan metinler ("Entegre Yönetim
   Sistemi", "Omni Kanal Satış") ikincil satır değil başlıktı — ölçüm bunu gösterdi. İki satıra sarar. */
.twin-search-title {
    font-weight: 700;
    color: #f8fafc;
    font-size: 12.5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

/* Öneri satırının ikincil metni (modül • kayıt türü) tek satıra ZORLANMAZ: dar ekranda liste
   359 px'e kadar açılsa bile uzun adlar kırpılıyordu (ölçüldü: "Entegre Yönetim Sistemi",
   "Omni Kanal Satış"). Kırpmak yer açmak değildir — metin iki satıra kadar sarar. */
.twin-search-sub {
    font-size: 11px;
    color: #94a3b8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.twin-search-tag {
    font-size: 11px;   /* 10 px okunurluk eşiğinin altındaydı (ölçüldü: iki kadrajda da 10 px) */
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.twin-top-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.twin-btn-action {
    appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 120ms ease;
}

.twin-btn-action:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.twin-top-actions .twin-btn-action {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.twin-top-actions .twin-btn-action:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: rgba(148, 163, 184, 0.35);
}

.twin-btn-action.twin-btn-close {
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
}

.twin-btn-action.twin-btn-close:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #ffffff;
    border-color: rgba(239, 68, 68, 0.5);
}

/* ── 4. Main Stage & Left Panel (Overlay Architecture) ─────────────────── */
.digital-twin-stage {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: calc(100vh - 56px);
    display: block;
}

.twin-side-panel {
    position: absolute;
    left: 14px;
    top: 68px;
    bottom: 60px;
    width: 360px;
    max-width: calc(100vw - 28px);
    background: rgba(13, 18, 30, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 14px;
    overflow-y: auto;
    z-index: 40;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    transition: transform 220ms ease, opacity 220ms ease;
}

.twin-side-sec {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.twin-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #94a3b8;
    text-transform: uppercase;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.twin-side-pill {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.25);
}

.twin-center-chips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.twin-center-chip {
    appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(30, 41, 59, 0.5);
    color: #cbd5e1;
    font-size: 11.5px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 120ms ease;
}

.twin-center-chip:hover {
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.4);
    color: #ffffff;
}

.twin-artery-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.twin-artery-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.1);
    font-size: 11px;
    color: #cbd5e1;
}

.twin-artery-row > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}

.twin-artery-btn {
    appearance: none;
    border: 1px solid rgba(56, 189, 248, 0.3);
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 120ms ease;
}

.twin-artery-btn:hover {
    background: #0284c7;
    color: #ffffff;
}


/* ── 5. Canvas Stage & Bottom HUD ─────────────────────────────────────── */


.twin-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.twin-layer.state-hidden {
    display: none !important;
}

.twin-layer canvas {
    display: block;
    width: 100%;
    height: 100%;
}


/* ── 8. Slide-Over Inspector Drawer (Digital Twin Inspector) ──────────── */


@keyframes twinSlideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}


/* ── 9. Tier 2: Collective Workspace (Toplu Kütük Görünümü) ──────────── */


.twin-status-pill {
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-block;
}

.twin-status-pill.status-draft { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
.twin-status-pill.status-approved { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.twin-status-pill.status-shipped { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.twin-status-pill.status-risk { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

/* ── 10. Tier 3: Mobil Genişliğinde Canlı Form Paneli (Floating Overlay Pane) ──── */
.digital-twin-vs-pane {
    position: absolute;
    top: 68px;
    right: 14px;
    bottom: 14px;
    width: 340px !important;
    min-width: 260px !important;
    max-width: 360px !important;
    background: rgba(11, 15, 25, 0.95);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75);
    display: flex;
    flex-direction: column;
    z-index: 45;
    box-sizing: border-box;
    transition: width 140ms cubic-bezier(0.16, 1, 0.3, 1), transform 220ms ease, opacity 220ms ease;
    animation: twinSlideIn 200ms ease-out;
    overflow: hidden;
    font-size: 10.5px !important;
}

.digital-twin-vs-pane.state-hidden {
    display: none !important;
}

.digital-twin-vs-pane.is-maximized {
    width: 360px !important;
    max-width: 360px !important;
}

.twin-vs-splitter {
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    z-index: 50;
    background: transparent;
    transition: background 120ms ease;
}

.twin-vs-splitter:hover,
.twin-vs-splitter.is-dragging {
    background: rgba(56, 189, 248, 0.6);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.9);
}

.twin-vs-header {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    background: rgba(15, 23, 42, 0.92);
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    flex-shrink: 0;
}

.twin-vs-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
}

.twin-vs-brand-icon {
    font-size: 13px;
}

.twin-vs-title-wrap {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
}

.twin-vs-badge-small {
    font-size: 8px;
    font-weight: 700;
    color: #38bdf8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.twin-vs-heading {
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.twin-vs-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.twin-vs-iconbtn {
    appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    font-size: 14px;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 120ms ease;
    box-sizing: border-box;
    padding: 0;
}

.twin-vs-iconbtn:hover {
    color: #ffffff;
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
}

/* Mobil-First Form Alanı (Mobile-Ergonomic Form Host) */
/* Mobil-First Form Alanı (Mobile-Ergonomic Form Host) */
.twin-mob-form-host {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: 64px; /* Gestalt: sayfa sonu alt navigasyon boşluğu >= 48dp */
    display: flex;
    flex-direction: column;
    gap: 16px; /* Gestalt Proximity: >= 16dp dikey boşluk */
    box-sizing: border-box;
}

/* The platform owns fields, validation and actions; the shell owns its viewport. */
#DigitalTwinWorkspace #twin-vs-pane {
    width: 390px !important;
    min-width: 320px !important;
    max-width: min(100vw - 24px, 420px) !important;
    font-size: 13px !important;
    z-index: 65;
    box-sizing: border-box !important;
}
#DigitalTwinWorkspace #twin-vs-pane.is-maximized {
    width: 420px !important;
    max-width: min(100vw - 24px, 420px) !important;
}
#DigitalTwinWorkspace #twin-mob-form-host {
    min-height: 0;
    padding: 12px 14px;
    background: transparent;
    color: #f8fafc;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
}
.twin-platform-host {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    color: #f8fafc;
    font-size: 13px;
    box-sizing: border-box;
}
.twin-platform-host .SingleItem {
    background: transparent !important;
    color: #f8fafc !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.twin-platform-host label {
    color: #94a3b8 !important;
}
.twin-platform-host input,
.twin-platform-host select,
.twin-platform-host textarea {
    background: rgba(15, 23, 42, 0.75) !important;
    color: #f8fafc !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
    box-sizing: border-box !important;
}
.twin-platform-host > .SingleItem {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    color: #f8fafc !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}
.twin-platform-host .ItemBody,
.twin-platform-host .ItemCenter {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}
.twin-platform-host .ItemBody { display: block !important; }
.twin-platform-host .ItemCenter .AutoVertical > .DirectionVer:has(> .FieldSet),
.twin-platform-host .ItemCenter .AutoVertical,
.twin-platform-host .ItemCenter .DirectionVer {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 12px;
}
.twin-platform-host .ItemCenter .DirectionVer > .FieldSet,
.twin-platform-host .ItemCenter .FieldSet {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
}
.twin-platform-host .ItemCenter .Field:not(.LabelHidden) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 4px;
    margin-bottom: 8px !important;
    box-sizing: border-box !important;
}
.twin-platform-host .ItemCenter .Field > .FieldLabel,
.twin-platform-host .ItemCenter .Field > .FieldValue {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    box-sizing: border-box !important;
}
.twin-platform-host .ItemCenter .FieldLabel {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}
.twin-platform-host .ItemCenter input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.twin-platform-host .ItemCenter select,
.twin-platform-host .ItemCenter textarea {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    color: #f8fafc !important;
}
.twin-platform-host .ItemFooter,
.twin-platform-host .ItemFooter > .Left,
.twin-platform-host .ItemFooter > .Right,
.twin-platform-host .ItemActions,
.twin-platform-host .ItemSubmit {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 1 auto !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px;
    box-sizing: border-box !important;
    width: 100% !important;
}
.twin-platform-host .ItemFooter {
    position: static !important;
    padding: 10px 12px !important;
    background: rgba(15, 23, 42, 0.95) !important;
    border-top: 1px solid rgba(148, 163, 184, 0.15) !important;
    color: #f8fafc !important;
    z-index: 3;
    border-radius: 0 0 10px 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
.twin-platform-host .ItemFooter a,
.twin-platform-host .ItemFooter button {
    height: auto !important;
    min-height: 40px !important;
    width: auto !important;
    flex: 1 1 auto !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
}
.twin-platform-host .ItemFooter .ButtonText { color: inherit; }
.twin-platform-host :focus-visible { outline: 2px solid #0369a1; outline-offset: 2px; }

#DigitalTwinWorkspace #twin-mob-form-footer .twin-mob-btn-action,
#DigitalTwinWorkspace #twin-mob-form-footer #twin-mob-btn-save,
#DigitalTwinWorkspace #twin-mob-form-footer #twin-mob-btn-web,
#DigitalTwinWorkspace #twin-mob-btn-web {
    flex: 1 1 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
@container (max-width: 480px) {
    .twin-platform-host .ItemCenter > .FieldSet {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

.twin-mob-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    padding: 14px 16px; /* Gestalt: 14-16dp iç dolgu */
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
}

.twin-mob-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.twin-mob-card-title {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.twin-mob-field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


/* Dinamik FieldSet ve Çok Kolonlu Form Mimarisi (Gestalt Flat Card) */


/* Tipli Kontroller: Para Birimi Kapsayıcısı */


/* Tipli Kontroller: Modern Neon Boolean Switch */


/* Mobil Alt Aksiyon Çubuğu (>= 48dp Ergonomik Dokunma Hedefleri) */
.twin-mob-form-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
    background: rgba(15, 23, 42, 0.95);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}


.twin-mob-btn-action {
    flex: 1;
    min-height: 48px; /* Ergonomik Dokunma Hedefi: >= 48dp */
    border-radius: 10px;
    background: #0284c7;
    color: #ffffff;
    border: 1px solid #38bdf8;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35);
    transition: all 120ms ease;
}

.twin-mob-btn-action:hover {
    background: #0369a1;
}

.twin-mob-btn-action.is-approve {
    background: #10b981;
    border-color: #34d399;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.twin-mob-btn-action.is-approve:hover {
    background: #059669;
}

/* ── 12. Kampüs İçi Gezinme & Drilldown Rozetleri & Breadcrumb ──────────────── */
.twin-campus-nav-bar {
    position: absolute;
    top: 10px;
    left: 10px;
    max-width: calc(100% - 440px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 55;
    background: rgba(13, 18, 30, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 3px 8px;
    border-radius: 8px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.twin-campus-level-pill {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 800;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.35);
    padding: 2px 6px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.twin-campus-breadcrumb {
    font-size: 11px;
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.twin-breadcrumb-step {
    appearance: none;
    border: none !important;
    background: transparent !important;
    font-family: inherit;
    font-size: 11px;
    line-height: 1.2;
    cursor: pointer;
    padding: 2px 4px !important;
    border-radius: 4px;
    transition: all 120ms ease;
    color: #94a3b8;
    user-select: none;
    white-space: nowrap !important;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}

.twin-breadcrumb-step:hover:not(.is-active) {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
}

.twin-breadcrumb-step.is-active {
    color: #ffffff !important;
    font-weight: 700;
    cursor: default;
    background: transparent !important;
}

.twin-breadcrumb-sep {
    color: #475569;
    font-size: 11px;
    user-select: none;
    margin: 0 1px;
}

.twin-campus-level-pill.level-0 {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.35);
}

.twin-campus-level-pill.level-1 {
    color: #34d399;
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(52, 211, 153, 0.35);
}

.twin-campus-level-pill.level-2 {
    color: #a78bfa;
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(167, 139, 250, 0.4);
}

.twin-campus-level-pill.level-3 {
    color: #f472b6;
    background: rgba(236, 72, 153, 0.18);
    border-color: rgba(244, 114, 182, 0.4);
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.3);
}

/* ── EntityTypeList Metrik ve Filtre Çipleri ───────────────────────── */
.twin-et-lists-shelf {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#twin-station-lists-bar {
    position: absolute;
    top: 48px;
    left: 10px;
    z-index: 54;
    background: rgba(13, 18, 30, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 3px 8px;
    border-radius: 8px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    margin: 0;
    gap: 5px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.25);
}


/* ── 11. Orta Tuval: 3D/2D İntegratif Dünya (Full Background Canvas & Overlay Shelf) ─── */
.twin-center-split {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    background: radial-gradient(circle at 50% 30%, #0d1527 0%, #060913 95%);
    z-index: 1;
}

.twin-canvas-viewport {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.twin-isometric-canvas {
    cursor: grab;
    width: 100%;
    height: 100%;
    display: block;
}

.twin-isometric-canvas.is-panning {
    cursor: grabbing;
}

/* 3D Üzerinde Yüzen Kamera & Odaklanma Kontrolleri */
.twin-canvas-controls {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 30;
}

.twin-cam-btn {
    appearance: none;
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(10px);
    color: #f8fafc;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 120ms ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.twin-cam-btn:hover {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
}

/* Orta Alt Raf: EntityTypeView & Canlı Kartlar Rafı (Floating Bottom Overlay) */
.twin-entityview-shelf {
    position: absolute;
    bottom: 58px;
    left: 20px;
    right: 20px;
    height: 330px;
    max-height: 52vh;
    background: rgba(13, 18, 30, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    z-index: 38;
    box-sizing: border-box;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75);
    overflow: hidden;
    transition: transform 220ms ease, opacity 220ms ease;
}

.twin-shelf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.7);
    flex-shrink: 0;
}

.twin-shelf-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.twin-shelf-title {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
}

.twin-shelf-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.twin-shelf-chip {
    appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 120ms ease;
}

.twin-shelf-chip:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.twin-shelf-chip.is-active {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    font-weight: 600;
}

/* Raf Gövdesi ve İki-Modlu Görünüm (Kartlar + $_EntityTypeView) */
.twin-shelf-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.twin-shelf-view-toggle {
    display: inline-flex;
    align-items: center;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
    margin-left: 10px;
}

.twin-shelf-vbtn {
    appearance: none;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 11.5px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 120ms ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.twin-shelf-vbtn:hover {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.06);
}

.twin-shelf-vbtn.is-active {
    background: #0284c7;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(2, 132, 199, 0.4);
}

.twin-shelf-action-btn {
    appearance: none;
    border: 1px solid rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 120ms ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.twin-shelf-action-btn:hover {
    background: rgba(16, 185, 129, 0.3);
    color: #ffffff;
    border-color: #34d399;
}

.twin-shelf-etw-host {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: auto;
    padding: 8px 14px 14px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.75) !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    border-radius: 8px;
    margin: 8px 14px 14px;
}

/* 2026-09-14 (Dalga 4l): açık yazı yalnız koyu çizilen görünümlere (liste/ağaç). Açık kart (grafik, infografik, Kanban…) platformun kendi
   yazı renklerini korur — ölçüldü (satis İnfografik): bu kural kartın içine de basıyordu, 22/22 metin 4.5 altı (beyaz kartta 1.05). */
.twin-shelf-etw-host,
.twin-shelf-etw-host *:not(.twin-shelf-light-card):not(.twin-shelf-light-card *) {
    color: #f1f5f9 !important;
}

.twin-shelf-etw-host .EntityTypeViewBody,
.twin-shelf-etw-host .Center,
.twin-shelf-etw-host .Middle,
.twin-shelf-etw-host .MiddleCenter,
.twin-shelf-etw-host .ListAll,
.twin-shelf-etw-host .ListLeft,
.twin-shelf-etw-host .ListRight,
.twin-shelf-etw-host .ListTable,
.twin-shelf-etw-host .DataRows {
    background: transparent !important;
    border: none !important;
}

.twin-shelf-etw-host .ListHeader {
    background: rgba(30, 41, 59, 0.9) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 6px 6px 0 0;
}

/* 2026-09-14 (Dalga 4f): yalnız RENK — punto/kalınlık/dolgu platformun kendi başlık ölçüsüne bırakılır. Ölçüldü: bu geçersiz kılmalar
   dar sütunda etiketi 2 satıra kırıp başlık hücresini 105px (1600) / 131px (390) yapıyordu; kap 32–61px olduğu için etiket KIRPILIYORDU
   (aynı liste platform sayfasında hücre 34px, etiket kabın içinde). */
.twin-shelf-etw-host .ListFieldTitles td,
.twin-shelf-etw-host .ListFieldTitles th,
.twin-shelf-etw-host th {
    background: rgba(30, 41, 59, 0.9) !important;
    color: #38bdf8 !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.3) !important;
}

.twin-shelf-etw-host .ListFieldTitles * {
    color: #38bdf8 !important;
}

.twin-shelf-etw-host table {
    width: 100%;
    border-collapse: collapse;
}

.twin-shelf-etw-host .ListTable,
.twin-shelf-etw-host .ListTable tr,
.twin-shelf-etw-host .ListTable td,
.twin-shelf-etw-host .ListRow,
.twin-shelf-etw-host .DataRow {
    background: #0f172a !important;
    color: #f8fafc !important;
}

.twin-shelf-etw-host .ListTable tr:nth-child(even) td,
.twin-shelf-etw-host .ListTable tr:nth-child(even) {
    background: #1e293b !important;
}

/* 2026-09-14 (Dalga 4e): dolgu ve kenarlık yalnız HÜCREYE — "td *" her iç öğeye 7/10px dolgu + alt kenarlık veriyordu
   (ölçüldü: 70px Kodu sütununda "00014" → "0|001|4", satır 95px; aynı liste Twin dışı kontrol kabında tek satır). */
/* Dalga 4f: dolgu ve punto da platformun (--listPadding) — başlık tablosu da .ListTable olduğu için bu kural başlığı uzatıyordu. */
.twin-shelf-etw-host .ListTable td {
    color: #f8fafc !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15) !important;
}
.twin-shelf-etw-host .ListTable td * {
    color: #f8fafc !important;
}

.twin-shelf-etw-host .ListTable tr:hover td,
.twin-shelf-etw-host .ListTable tr:hover td *,
.twin-shelf-etw-host .ListRow:hover td {
    background: #0284c7 !important;
    color: #ffffff !important;
}

.twin-shelf-etw-host a:not(.twin-shelf-light-card *) {
    color: #60a5fa !important;
    text-decoration: none;
}
.twin-shelf-etw-host a:not(.twin-shelf-light-card *):hover {
    color: #93c5fd !important;
    text-decoration: underline;
}

.twin-shelf-etw-host .Pagination,
.twin-shelf-etw-host .EntityTypeViewFooter,
.twin-shelf-etw-host .ListFooter {
    background: rgba(15, 23, 42, 0.9) !important;
    border-top: 1px solid rgba(148, 163, 184, 0.2) !important;
    padding: 6px 12px;
    color: #94a3b8 !important;
    border-radius: 0 0 6px 6px;
    margin-top: 6px;
}

.twin-shelf-cards-wrap {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 18px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    box-sizing: border-box;
}

.twin-etv-card {
    background: rgba(30, 41, 59, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 140ms ease;
}

.twin-etv-card:hover {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.twin-etv-card.is-selected {
    background: rgba(2, 132, 199, 0.22);
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

.twin-etv-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.twin-etv-card-code {
    font-size: 11px;
    font-weight: 700;
    color: #38bdf8;
}

.twin-etv-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
}

.twin-etv-card-row {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: #cbd5e1;
}

/* Focus Ripple Animasyonu */
@keyframes twinPulseRing {
    0% { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* ── 2. Glassmorphic Peek Card ("Peek & Hop") ─────────────────────────── */
.graph-peek-card {
    position: fixed;
    width: 260px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(56, 189, 248, 0.4);
    box-shadow: 0 16px 32px -4px rgba(0, 0, 0, 0.6), 0 0 16px rgba(56, 189, 248, 0.2);
    padding: 12px;
    z-index: 10000;
    animation: peekFadeIn 140ms ease-out;
}

@keyframes peekFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.peek-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.peek-card-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
}

.peek-ghost-tag {
    font-size: 10px;
    font-weight: 700;
    color: #fbbf24;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.peek-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 6px;
    line-height: 1.35;
}

.peek-card-reason {
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 10px;
    font-style: italic;
}

.peek-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.peek-btn {
    flex: 1;
    appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: all 120ms ease;
}

.peek-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.peek-btn.is-primary {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
}

.peek-btn.is-primary:hover {
    background: #0369a1;
}

/* ── 3. Hierarchical Tree Graph, Sunburst & 3D Cone Tree ─────────────── */
.tree-graph-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 400px;
    background: var(--backColor, #f8fafc);
    border-radius: 12px;
    overflow: hidden;
}

.tree-graph-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--borderColor, rgba(120, 120, 130, 0.2));
    background: var(--card-bg, #ffffff);
}

.tree-graph-modegroup {
    display: flex;
    gap: 6px;
}

.tree-mode-btn {
    appearance: none;
    border: 1px solid var(--borderColor, rgba(120, 120, 130, 0.2));
    background: transparent;
    color: var(--textColor, #334155);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 120ms ease;
}

.tree-mode-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

.tree-mode-btn.is-active {
    background: var(--graph-accent, #5b8def);
    border-color: var(--graph-accent, #5b8def);
    color: #ffffff;
}

.tree-graph-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.tree-bc-sep {
    color: #94a3b8;
}

.tree-bc-item {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--graph-accent, #0284c7);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}

.tree-bc-item.is-current {
    font-weight: 700;
    color: var(--textColor, #0f172a);
    cursor: default;
}

.tree-graph-stage {
    flex: 1 1 auto;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.tree-dag-scrollwrap {
    padding: 16px;
}

.tree-dag-node {
    margin-bottom: 8px;
}

.tree-dag-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--borderColor, rgba(120, 120, 130, 0.2));
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.tree-dag-toggle {
    appearance: none;
    border: 1px solid var(--borderColor, rgba(120, 120, 130, 0.3));
    background: transparent;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
}

.tree-dag-toggle.is-leaf {
    opacity: 0.3;
    cursor: default;
}

.tree-dag-name {
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.tree-dag-name:hover {
    color: var(--graph-accent, #0284c7);
}

.tree-dag-code {
    font-family: monospace;
    font-size: 11px;
    background: rgba(0,0,0,0.06);
    padding: 2px 5px;
    border-radius: 4px;
}

.tree-dag-val {
    font-size: 11px;
    font-weight: 700;
    color: #059669;
    background: rgba(16, 185, 129, 0.12);
    padding: 2px 6px;
    border-radius: 999px;
}

.tree-dag-children {
    padding-left: 24px;
    border-left: 2px dashed var(--borderColor, rgba(120, 120, 130, 0.2));
    margin-left: 10px;
    margin-top: 6px;
}

/* Sunburst SVG */
.tree-sunburst-svg {
    display: block;
    margin: 0 auto;
}

.sunburst-center-circle {
    fill: #0284c7;
    cursor: pointer;
}

.sunburst-center-text {
    fill: #ffffff;
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
}

.sunburst-slice {
    stroke: #ffffff;
    stroke-width: 1.5;
    cursor: pointer;
    transition: opacity 120ms ease;
}

.sunburst-slice:hover {
    opacity: 0.82;
}

.sunburst-slice-text {
    fill: #ffffff;
    font-size: 10px;
    font-weight: 600;
    pointer-events: none;
}

/* Cone Tree Canvas */
.cone-tree-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}

.cone-tree-canvas:active {
    cursor: grabbing;
}

/* ── 4. Value Stream Subway Map ───────────────────────────────────────── */
.subway-map-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: rgba(15, 23, 42, 0.9);
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #ffffff;
}

.subway-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.subway-tab-btn {
    appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 120ms ease;
}

.subway-tab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line-color, #38bdf8);
}

.subway-tab-btn.is-active {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--line-color, #38bdf8);
    color: #ffffff;
    font-weight: 700;
}

.subway-track-stage {
    position: relative;
    padding: 24px 10px;
    overflow-x: auto;
}

.subway-stations {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 650px;
    position: relative;
}

.subway-stations::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 20px;
    right: 20px;
    height: 4px;
    background: var(--line-color, #38bdf8);
    border-radius: 2px;
    z-index: 1;
}

.subway-station {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    z-index: 2;
    transition: transform 120ms ease;
}

.subway-station:hover {
    transform: translateY(-4px);
}

.subway-station-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0f172a;
    border: 3px solid var(--line-color, #38bdf8);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    box-shadow: 0 0 12px var(--line-color, #38bdf8);
    transition: background 120ms ease;
}

.subway-station:hover .subway-station-circle {
    background: var(--line-color, #38bdf8);
    color: #0f172a;
}

.subway-station-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.subway-station-name {
    font-size: 12px;
    font-weight: 600;
    color: #f8fafc;
}

.subway-station-module {
    font-size: 10px;
    color: #94a3b8;
}

/* Teleport flash */
.teleport-flash-overlay {
    position: fixed;
    inset: 0;
    background: rgba(56, 189, 248, 0.25);
    backdrop-filter: blur(8px);
    pointer-events: none;
    z-index: 99999;
    animation: flashFade 400ms ease-out forwards;
}

@keyframes flashFade {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0; }
}

/* Traversal Ribbon */
#nav-traversal-ribbon {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    font-size: 11px;
    color: #cbd5e1;
    overflow-x: auto;
}

.ribbon-label {
    font-weight: 700;
    color: #38bdf8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ribbon-arrow {
    color: #64748b;
}

.ribbon-item {
    appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 120ms ease;
}

.ribbon-item:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    color: #38bdf8;
}

.ribbon-item.is-current {
    font-weight: 700;
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
}

/* ── Peek & Hop Mini 360 Card ── */
.graph-peek-card {
    position: fixed;
    z-index: 100000;
    width: 250px;
    background: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8), 0 0 15px rgba(56, 189, 248, 0.2);
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: peekFadeIn 150ms ease-out;
    pointer-events: auto;
}

@keyframes peekFadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.peek-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.peek-card-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.peek-ghost-tag {
    font-size: 10px;
    font-weight: 700;
    color: #f59e0b;
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(245, 158, 11, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.peek-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #f8fafc;
    line-height: 1.3;
}

.peek-card-reason {
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
}

.peek-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.peek-btn {
    flex: 1;
    appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: all 120ms ease;
}

.peek-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.peek-btn.is-primary {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
}

.peek-btn.is-primary:hover {
    background: #0369a1;
}

/* ── 14. 361 Kurumsal Dijital İkiz — Kenar Dock & Indicator Barları (Extensible Spatial Shell) ── */
.twin-side-panel.state-hidden {
    display: none !important;
}

.twin-entityview-shelf.state-hidden {
    display: none !important;
}

/* Nav uses one component catalog and the platform's own view controls. */
.twin-nav-back { display: none; }


.twin-nav-description { padding: 12px; color: #e2e8f0; font-size: 15px; line-height: 1.5; }


.twin-dock-bar {
    background: transparent;
    user-select: none;
    box-sizing: border-box;
}

.twin-dock-left {
    position: absolute;
    left: 14px;
    top: 68px;
    width: auto;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 8px;
    z-index: 35;
    pointer-events: auto;
}

.twin-dock-right {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 8px;
    z-index: 40;
    pointer-events: auto;
    transition: right 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.twin-dock-right .twin-dock-btn {
    width: 36px;
    height: 48px;
    border-radius: 10px 0 0 10px;
    border-right: none;
    background: rgba(15, 23, 42, 0.94);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-right: none;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 150ms ease;
}

.twin-dock-right .twin-dock-btn:hover {
    background: rgba(30, 41, 59, 0.98);
    border-color: #38bdf8;
    box-shadow: -6px 0 20px rgba(56, 189, 248, 0.3);
}

#DigitalTwinWorkspace:has(#twin-vs-pane:not(.state-hidden)) .twin-dock-right,
#DigitalTwinWorkspace.has-right-pane .twin-dock-right,
.digital-twin-workspace:has(.digital-twin-vs-pane:not(.state-hidden)) .twin-dock-right,
.digital-twin-workspace.has-right-pane .twin-dock-right {
    right: 390px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

#DigitalTwinWorkspace:has(#twin-vs-pane.is-maximized:not(.state-hidden)) .twin-dock-right,
.digital-twin-workspace:has(.digital-twin-vs-pane.is-maximized:not(.state-hidden)) .twin-dock-right {
    right: 420px !important;
}

.twin-dock-bottom {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(13, 18, 30, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    gap: 12px;
    z-index: 35;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.twin-dock-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.twin-dock-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.03);
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: all 140ms ease;
}

.twin-dock-btn:hover {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    transform: scale(1.05);
}

.twin-dock-btn.is-active {
    background: rgba(56, 189, 248, 0.22);
    border-color: #38bdf8;
    color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

.twin-dock-btn-icon {
    font-size: 15px;
    line-height: 1;
}

.twin-dock-btn-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #0284c7;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    line-height: 1;
}

.twin-dock-bottom-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.twin-dock-bottom-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.twin-dock-pill-btn {
    appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 140ms ease;
}

.twin-dock-pill-btn:hover {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.4);
    color: #38bdf8;
}

.twin-dock-pill-btn.is-active {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    color: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

.twin-dock-btn-arrow {
    font-size: 9px;
    opacity: 0.75;
    transition: transform 140ms ease;
}


.twin-panel-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    margin-bottom: 4px;
}

.twin-panel-top-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    flex: 1 1 auto;
    min-width: 0;
}

.twin-panel-close-btn {
    appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 8px;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 120ms ease;
    box-sizing: border-box;
    padding: 0;
}

.twin-panel-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
}

/* ══════════════════════════════════════════════════════════════════════════════
   361 DİJİTAL İKİZ — ÇOKLU-CİHAZ, MOBİL, FOLD & DOKUNMATİK EKRAN DUYARLILIK
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Dokunmatik Yüzey ve Tuval Optimizasyonu ──────────────────────────── */
.twin-isometric-canvas {
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ── 2. Dokunmatik Cihazlar İçin Ergonomik Dokunma Hedefleri (Coarse Pointer) ─ */
@media (hover: none) and (pointer: coarse) {
    .twin-vs-iconbtn {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
    .twin-panel-close-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .twin-shelf-chip {
        min-height: 38px;
        padding: 6px 14px;
    }
    
}

/* ── 3. Tablet ve Orta Ölçekli Ekranlar (<= 1024px) ───────────────────────── */
@media (max-width: 1024px) {
    .digital-twin-topbar {
        padding: 0 12px;
        gap: 8px;
    }
    .twin-brand-sub {
        display: none;
    }
    .twin-search-wrap {
        width: 240px;
        max-width: 28vw;
    }
    .digital-twin-vs-pane {
        width: 340px !important;
        max-width: 360px !important;
        right: 10px;
        top: 58px;
        bottom: 10px;
    }
    
}

/* ── 4. Standart Mobil Cihazlar ve Fold Açık Ekranlar (<= 768px) ─────────── */
@media (max-width: 768px) {
    .digital-twin-workspace {
        overflow: hidden;
    }

    /* Topbar Akışı: Esnek ve Çarpışmasız */
    .digital-twin-topbar {
        height: 48px;
        padding: 0 10px;
        gap: 6px;
    }
    .twin-brand-icon {
        font-size: 18px;
    }
    .twin-brand-title {
        font-size: 11.5px;
        letter-spacing: 0.4px;
    }
    .twin-search-wrap {
        position: static;
        transform: none;
        width: auto;
        flex: 1 1 auto;
        max-width: 220px;
        margin: 0 6px;
    }
    .twin-search-input {
        height: 30px;
        font-size: 12px;
        padding: 0 8px 0 26px;
    }
    .twin-search-icon {
        left: 8px;
        font-size: 11px;
    }
    .twin-head-right {
        gap: 6px;
    }
    .twin-time-travel-wrap {
        display: none !important;
    }
    .twin-top-actions button:not(#twin-btn-close):not(#twin-btn-fit) {
        display: none !important;
    }
    .twin-btn-action {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    /* Tablet (641px - 1024px) Docked VS Pane */
    .digital-twin-vs-pane {
        position: absolute !important;
        top: 58px !important;
        right: 14px !important;
        bottom: 14px !important;
        width: 340px !important;
        max-width: 360px !important;
        min-width: 320px !important;
        border-radius: 12px !important;
        z-index: 45 !important;
    }
}

/* ── 4b. Akıllı Telefonlar & Dar Mobil Cihazlar (<= 640px) ────────────────── */
@media (max-width: 640px) {
    /* Tier 3: Mobilde Canlı Form — Tam Ekran Overlay (100vw x 100vh) */
    .digital-twin-vs-pane {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: 100vh !important;
        border-radius: 0 !important;
        border: none !important;
        z-index: 9999 !important;
        box-shadow: none !important;
    }
    .twin-vs-splitter {
        display: none !important;
    }
    .twin-vs-header {
        height: 52px;
        padding: 0 16px;
        background: rgba(15, 23, 42, 0.98);
        border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    }
    .twin-vs-heading {
        font-size: 14px;
    }
    .twin-vs-badge-small {
        font-size: 10px;
    }
    .twin-vs-controls {
        gap: 8px;
    }
    .twin-vs-iconbtn {
        width: 44px;
        height: 44px;
        font-size: 18px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.08);
        color: #f1f5f9;
    }
    .twin-campus-nav-bar {
        max-width: calc(100vw - 80px) !important;
        overflow: hidden;
        flex-wrap: nowrap;
    }
    .twin-campus-breadcrumb {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .twin-campus-breadcrumb::-webkit-scrollbar {
        display: none;
    }
    .twin-dock-bottom-right {
        display: none !important;
    }
    .twin-dock-bottom {
        justify-content: center !important;
    }

    /* Form Gövdesi: Gestalt Proximity & Okunabilirlik */
    .twin-mob-form-host {
        padding: 16px 16px 54px 16px; /* Sayfa sonu alt navigasyon boşluğu >= 48px */
        gap: 18px; /* Kartlar arası dikey boşluk >= 16-20px */
    }
    .twin-mob-card {
        padding: 16px 16px; /* Kart içi dolgular >= 14-16px */
        border-radius: 12px;
        gap: 12px;
    }
    
    
    

    /* Sol Panel (Entity Ağacı): Tam Ekran Mobilde Rahat İnceleme */
    
    
    .twin-panel-close-btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
        border-radius: 8px;
    }

    /* Alt Raf (EntityTypeView Kütük Rafı): Esnek Yükseklik */
    
    .twin-shelf-header {
        height: 46px;
        padding: 0 14px;
    }
    .twin-shelf-chip {
        min-height: 38px;
        padding: 6px 12px;
        font-size: 12px;
    }

    /* Yüzen Pencereler (Ontoloji Etki) */
    .twin-impact-overlay {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        transform: none !important;
        border-radius: 12px !important;
    }
    .twin-impact-overlay {
        top: 54px !important;
        padding: 14px 16px !important;
    }
}

/* ── 5. Galaxy Fold Cover & Ultra Dar Ekranlar (<= 340px / 280px-320px) ───── */
@media (max-width: 340px) {
    .digital-twin-topbar {
        height: 44px;
        padding: 0 6px;
        gap: 4px;
    }
    .twin-brand-meta {
        display: none !important;
    }
    .twin-brand-icon {
        font-size: 20px;
    }
    .twin-search-wrap {
        max-width: 120px;
        margin: 0 2px;
    }
    .twin-search-input {
        height: 28px;
        font-size: 11px;
        padding: 0 4px 0 22px;
    }
    .twin-search-icon {
        left: 5px;
        font-size: 10px;
    }
    .twin-top-actions button:not(#twin-btn-close) {
        display: none !important;
    }
    .twin-campus-level-pill {
        display: none !important;
    }
    .twin-campus-nav-bar {
        max-width: calc(100vw - 64px) !important;
        padding: 2px 6px !important;
    }
    .twin-breadcrumb-step {
        font-size: 10.5px !important;
        padding: 1px 4px !important;
    }
    .twin-mob-form-host {
        padding: 12px 10px 48px 10px;
        gap: 14px;
    }
    .twin-mob-card {
        padding: 12px 10px;
        border-radius: 10px;
    }
    .twin-vs-header {
        height: 48px;
        padding: 0 10px;
    }
    .twin-vs-heading {
        font-size: 12.5px;
    }
    .twin-vs-iconbtn {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }
    .twin-impact-overlay {
        left: 6px !important;
        right: 6px !important;
        max-width: calc(100vw - 12px) !important;
        padding: 10px 12px !important;
    }
}

/* ── 44. Birleşik Mekânsal Bağlantılar & 2D/3D Navigasyon Stilleri ────────── */
/* ── Sol Alt HUD: 2D/3D Boyut Seçici ve Zamanda Yolculuk Çubuğu ──────────── */
.twin-hud-bottom-left {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
}
.twin-time-travel-wrap {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 2px 6px;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    user-select: none;
}
.twin-time-icon {
    font-size: 11px;
    color: #94a3b8;
    margin-left: 2px;
}
/* N12 (2026-09-16): dört zaman düğmesi tek seçici */
.twin-time-select {
    background: transparent;
    color: #e2e8f0;
    border: none;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 4px;
    cursor: pointer;
    color-scheme: dark;
}
.twin-time-select:hover { color: #f8fafc; }
.twin-time-select:focus-visible { outline: 2px solid #38bdf8; outline-offset: 1px; }
.twin-time-select option { background: #0f172a; color: #e2e8f0; }

.twin-nav-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #38bdf8;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: all 160ms ease;
    flex-shrink: 0;
}
.twin-nav-back-btn:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    color: #ffffff;
    transform: translateX(-1px);
}
.twin-nav-back-btn.state-hidden {
    display: none !important;
}

/* Yüzen Mini Kayıt / Uydu Kartı (Satellite Popover Card) */
.twin-node-card {
    position: absolute;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.97);
    border: 1px solid rgba(56, 189, 248, 0.45);
    border-radius: 14px;
    padding: 14px 16px;
    min-width: 250px;
    max-width: 340px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.75), 0 0 16px rgba(56, 189, 248, 0.2);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: #f8fafc;
    font-family: inherit;
    pointer-events: auto;
    transition: opacity 160ms ease, transform 160ms ease;
    animation: twinPopIn 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.twin-node-card.state-hidden {
    display: none !important;
}
@keyframes twinPopIn {
    from { opacity: 0; transform: scale(0.92) translateY(6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.twin-nodecard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.twin-nodecard-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 6px;
    text-transform: uppercase;
}
.twin-nodecard-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}
.twin-nodecard-close:hover {
    color: #ffffff;
}

.twin-nodecard-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.35;
    margin-bottom: 4px;
    word-break: break-word;
}
.twin-nodecard-meta {
    font-size: 11.5px;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}
.twin-nodecard-state {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.twin-nodecard-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.twin-nodecard-btn {
    flex: 1;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 140ms ease;
    border: none;
}
.twin-nodecard-btn-primary {
    background: #0284c7;
    color: #ffffff;
}
.twin-nodecard-btn-primary:hover {
    background: #0369a1;
}
.twin-nodecard-btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.twin-nodecard-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}
.twin-nodecard-btn-accent {
    background: #10b981;
    color: #ffffff;
}
.twin-nodecard-btn-accent:hover {
    background: #059669;
}
.twin-nodecard-btn-warning {
    background: #f59e0b;
    color: #ffffff;
}
.twin-nodecard-btn-warning:hover {
    background: #d97706;
}

/* ── Simbiyotik Çift Yönlü Köprü: Klasik Form Üst Bar Dijital İkiz Butonu ── */
.graph-hub-twinbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(16, 185, 129, 0.15));
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 8px;
    color: var(--theme-primary, #0284c7);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.graph-hub-twinbtn:hover {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(16, 185, 129, 0.25));
    border-color: #38bdf8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
}

/* ── Dijital İkiz: Level 3 Kategori Filtre Hapları (Satellites Filter Bar) ── */
.twin-sat-filter-bar {
    position: absolute;
    top: 10px;
    right: 56px;
    left: auto;
    transform: none;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
}
.twin-sat-filter-bar.state-hidden {
    display: none !important;
}
.digital-twin-workspace:has(.digital-twin-vs-pane:not(.state-hidden)) .twin-sat-filter-bar {
    right: 376px;
}
.twin-sat-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}
.twin-sat-filter-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
}
.twin-sat-filter-chip.is-active {
    background: rgba(56, 189, 248, 0.25);
    border-color: rgba(56, 189, 248, 0.55);
    color: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}
.twin-sat-filter-count {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    color: #e2e8f0;
}
.twin-sat-filter-chip.is-active .twin-sat-filter-count {
    background: rgba(56, 189, 248, 0.35);
    color: #ffffff;
}

/* ── Dijital İkiz Level 3: Klasik Bağlantılar Listesine Dönüş Butonu ── */
.twin-btn-classic-connections {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}
.twin-btn-classic-connections:hover {
    background: rgba(56, 189, 248, 0.18);
    border-color: #38bdf8;
    color: #f8fafc;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

/* ── Yan Yana Alan Karşılaştırma Modalı (Twin Compare Modal) ── */
.twin-compare-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.twin-compare-modal {
    width: 90%;
    max-width: 760px;
    max-height: 85vh;
    background: #0f172a;
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(56, 189, 248, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #f1f5f9;
}
.twin-compare-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}
.twin-compare-title {
    font-size: 14px;
    font-weight: 700;
    color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.twin-compare-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #94a3b8;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    flex: 0 0 28px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-sizing: border-box;
}
.twin-compare-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
}
.twin-compare-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}
.twin-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.twin-compare-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
    color: #94a3b8;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
}
.twin-compare-table td {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}
.twin-compare-table tr.is-diff td.col-diff {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    font-weight: 600;
}
.twin-compare-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

/* Dijital İkiz Düğüm Sağ Tık & Uzun Basma Bağlam Menüsü (Spatial Node Context Menu) */
.twin-context-menu {
    position: fixed;
    z-index: 100050;
    min-width: 220px;
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 20px rgba(56, 189, 248, 0.2);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transform-origin: top left;
    animation: twinContextMenuIn 0.15s ease-out;
}

@keyframes twinContextMenuIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.twin-context-menu.state-hidden {
    display: none !important;
}

.twin-context-head {
    padding: 6px 10px 8px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    margin-bottom: 4px;
}

.twin-context-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.twin-context-subtitle {
    font-size: 10.5px;
    color: #38bdf8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.twin-context-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
    min-height: 38px;
    box-sizing: border-box;
}

.twin-context-item:hover,
.twin-context-item:focus {
    background: rgba(56, 189, 248, 0.16);
    color: #ffffff;
}

.twin-context-item.is-primary {
    color: #38bdf8;
}

.twin-context-item.is-primary:hover {
    background: rgba(56, 189, 248, 0.25);
    color: #ffffff;
}

.twin-context-item.is-success {
    color: #34d399;
}

.twin-context-item.is-success:hover {
    background: rgba(52, 211, 153, 0.22);
    color: #ffffff;
}

/* ── 2026-09-14 Dijital İkiz Dalga 3 (plan T20 T21 T22 T24): katman sözleşmesi, dokunma hedefleri, mobil taşma menüsü ──
   Ölçüm tabanı (tur2/dalga2): konum↔liste çubuğu, alt dock↔HUD↔2D/3D, konum↔uydu filtre çubuğu örtüşmeleri;
   <32px hedefler: üst araç 28, 2D/3D 21, zaman 16, yol adımı 24, filtre çipi 23. Kural: örtüşme 0, hedef ≥32px (dokunmatik ≥40px). */

/* T20 — liste çubuğu konum çubuğunun altında başlar (top:48 ↔ konum çubuğu 10+40px) */
#DigitalTwinWorkspace #twin-station-lists-bar { top: 60px; }

/* T56 — kısıtlı kullanıcıda başlık orta bölgesi (EntitySelector) gizli: tetikleyici logo bölgesinin sağında (JS _tetikYeriniDenetle);
   yedek yer açık başlık zemininde — koyu kabuk stiliyle kontrast yetersizdi */
#DigitalTwinWorkspace ~ * .PageZone_headerleft.twin-tetik-yedek,
.PageZone_headerleft.twin-tetik-yedek { position: relative; }
#DigitalTwinHeaderTrigger.digital-twin-trigger.is-yedek {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #334155;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
#DigitalTwinHeaderTrigger.digital-twin-trigger.is-yedek:hover,
#DigitalTwinHeaderTrigger.digital-twin-trigger.is-yedek:focus { background: #f1f5f9; color: #0f172a; border-color: #94a3b8; }

/* Dokunma hedefleri ≥32px */
#DigitalTwinWorkspace .twin-top-actions .twin-btn-action { width: 32px; height: 32px; }
/* temel kural min-width:0 !important taşıyor — ölçüldü: mobil "…" adımı 16px kaldı */
#DigitalTwinWorkspace .twin-breadcrumb-step { min-height: 32px; min-width: 32px !important; justify-content: center; }
#DigitalTwinWorkspace .twin-time-select { min-height: 32px; min-width: 96px; }
#DigitalTwinWorkspace .twin-sat-filter-chip,
#DigitalTwinWorkspace .twin-dock-pill-btn,
#DigitalTwinWorkspace .twin-shelf-dive-btn,
#DigitalTwinWorkspace .twin-shelf-action-btn,
#DigitalTwinWorkspace .twin-shelf-vbtn { min-height: 32px; }
#DigitalTwinWorkspace .twin-dock-bottom { height: auto; min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
#DigitalTwinWorkspace .twin-artery-btn { min-height: 32px; padding: 4px 10px; }
#DigitalTwinWorkspace .twin-center-chip { min-height: 32px; min-width: 32px; }
#DigitalTwinWorkspace .twin-btn-classic-connections { min-height: 32px; }

/* T24 — taşma menüsü: masaüstünde gizli, dar ekranda gizlenen araçları toplar */
#DigitalTwinWorkspace .twin-top-actions button#twin-btn-more { display: none !important; }
#DigitalTwinWorkspace .twin-more-menu {
    position: absolute;
    top: 52px;
    right: 8px;
    z-index: 120;
    min-width: 220px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
}
#DigitalTwinWorkspace .twin-more-menu.state-hidden { display: none !important; }
#DigitalTwinWorkspace .twin-more-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
#DigitalTwinWorkspace .twin-more-item:hover,
#DigitalTwinWorkspace .twin-more-item:focus-visible { background: rgba(56, 189, 248, 0.15); outline: none; }
#DigitalTwinWorkspace .twin-more-item.is-active { color: #38bdf8; font-weight: 700; }
#DigitalTwinWorkspace .twin-more-icon { width: 22px; text-align: center; flex: 0 0 auto; }

@media (max-width: 768px) {
    #DigitalTwinWorkspace .twin-top-actions button#twin-btn-more { display: inline-flex !important; }
}

@media (max-width: 640px) {
    /* T21 — üst çubuk: marka simgesi + esnek arama + araçlar; arama markayı/kapat düğmesini örtmez (E30) */
    #DigitalTwinWorkspace .digital-twin-topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; padding: 0 8px; }
    #DigitalTwinWorkspace .twin-brand-meta { display: none !important; }
    #DigitalTwinWorkspace .twin-btn-classic-connections { display: none !important; }
    #DigitalTwinWorkspace .twin-topbar-center { min-width: 0; max-width: none; }
    #DigitalTwinWorkspace .twin-search-wrap { position: relative; width: 100%; max-width: none; margin: 0; transform: none; }
    /* E56 — uydu filtre çubuğu konum çubuğunun altına iner */
    #DigitalTwinWorkspace .twin-sat-filter-bar { top: 60px; right: 60px; }
    /* E29 — sol alt HUD alt dock'un üstüne çıkar */
    #DigitalTwinWorkspace .twin-hud-bottom-left { left: 12px; bottom: 64px; }
    /* Sayfalama şeridi HUD'un üstünde (ölçüldü: HUD yukarı alınınca liste seviyesinde şerit 2D/3D'yi örtüyordu) */
    #DigitalTwinWorkspace #twin-record-data-state { bottom: 116px !important; }
    /* Dar ekranda liste çubuğu kırılabilir */
    #DigitalTwinWorkspace #twin-station-lists-bar { flex-wrap: wrap !important; }
}

@media (hover: none) and (pointer: coarse) {
    #DigitalTwinWorkspace .twin-top-actions .twin-btn-action,
    #DigitalTwinWorkspace .twin-breadcrumb-step,
    #DigitalTwinWorkspace .twin-cam-btn { min-height: 40px; min-width: 40px; }
    #DigitalTwinWorkspace .twin-sat-filter-chip,
    #DigitalTwinWorkspace .twin-dock-pill-btn { min-height: 40px; }
}

/* ── 2026-09-14 Dijital İkiz Dalga 4 (plan T26 T27): platform formu Twin'in koyu panelinde platformun KENDİ koyu tema token'larıyla ──
   Platform koyu teması html.dark-theme KÖK sınıfına bağlı (misc.css:93). Twin açık temalı sayfanın üstünde koyu bir kaplama olduğu için
   paneldeki form açık temayla çiziliyordu (ölçüldü: başlık "KİŞİ" kontrast 1.05, 5 kat kutu, beyaz seçim/foto/çoklu seçim kutuları,
   mobil eylem çubuğu açık gri). Değerler misc.css:93'ten BİREBİR alınır; oradaki koyu tema değişirse burası da güncellenir. */
#DigitalTwinWorkspace #twin-vs-pane {
    color-scheme: dark;
    --backColor: #1a1d23;
    --backColor2: #22262e;
    --backColor3: #2a2e38;
    --textColor: #e0e0e0;
    --multiItemBackColor: #22262e;
    --singleItemBackColor: #2a2e38;
    --menuBackColor: #14161a;
    --menuSelectedBackColor: #2a2e38;
    --labelColor: #8ab4f8;
    --border1: solid 1px rgba(255,255,255,0.08);
    --border2: solid 1px rgba(255,255,255,0.12);
    --border3: solid 1px rgba(255,255,255,0.18);
    --inputBorder: solid 1px rgba(255,255,255,0.15);
    --borderColor: rgba(255,255,255,0.12);
    --shadow1: 0 0 1px rgba(255,255,255,0.1);
    --shadowColor: rgba(0,0,0,0.4);
    --iconBackColor: #2a2e38;
    --iconColor: #b0b8d0;
    --iconShadow: 1px 1px 3px rgba(0,0,0,0.5);
    --footerBackColor: #14161a;
    --headerBackColor: #1a1d23;
    --footerTextColor: #e0e0e0;
    --headerTextColor: #e0e0e0;
    --inputBackColor: #2a2e38;
    --inputTextColor: #e0e0e0;
    --panelHeaderTextColor: #8ab4f8;
    --panelHeaderBackColor: rgba(255,255,255,0.04);
    --hoverBackColor: rgba(255,255,255,0.06);
    --selectionColor: rgba(59,130,246,0.3);
    --scrollbarThumbColor: rgba(255,255,255,0.2);
    --scrollbarTrackColor: rgba(255,255,255,0.03);
    --itemBack: #262a35;
    --surfaceColor: #262a35;
    --BgColor1: 30, 33, 41;
    --ReadOnlyColor: 180, 180, 200;
    --textRGB: 200, 205, 220;
    --shadowRGB: 0, 0, 0;
    --buttonBackColor: #404558;
    --buttonBackColorHover: #505570;
    --buttonTextColor: #e0e0e0;
    --buttonBoxShadow: 0 0 1px rgba(255,255,255,0.1);
    --buttonBoxShadowHover: 0 0 4px rgba(255,255,255,0.15);
    --primaryButtonBackColor: #5a9e0e;
    --disabledColor: #666;
    --linkColor: #5b9cef;
    --focusColor: rgb(80,140,220);
    --activeBorderColor: rgb(80,140,220);
    --inputFocusBorderColor: rgb(80,140,220);
    --contentHeaderBackground: linear-gradient(135deg, rgba(30,35,50,0.95), rgba(25,30,45,0.95));
    --color1: #3b8df0;
    --color2: #555;
    --color4: #e05545;
    /* layout.css SingleItemHeader başlık kartı bu token'ları okur (varsayılan #fff / #e2e8f0) */
    --Card-Background: #22262e;
    --border-color: rgba(255,255,255,0.12);
}

/* ── 2026-09-14 Dijital İkiz Dalga 4b (plan T26 T27): token OKUMAYAN sabit renkler — kaynaklar CSSOM ile ölçüldü (dt-form-kural-kaynak.cjs) ──
   Özgüllük: kaynak kural !important veya kiracı domain.css (core.css'ten SONRA yüklenir) olduğu için panel önekli + !important. */
/* core.css ".SingleItem .SingleItemHeader, .Fields_Header.ItemHeader" → rgba(255,255,255,.5) */
#DigitalTwinWorkspace #twin-vs-pane .SingleItem .SingleItemHeader,
#DigitalTwinWorkspace #twin-vs-pane .Fields_Header.ItemHeader { background-color: #22262e !important; }
/* domain.css ".SingleItem .FieldSet_m .SingleItemHeaderTitle" → #fff (ölçüldü: "KİŞİ" kontrast 1.05) */
#DigitalTwinWorkspace #twin-vs-pane .SingleItem .FieldSet_m .SingleItemHeaderTitle { background: transparent !important; color: #f8fafc !important; }
/* 2026-09-16 — PANELDE BAŞLIK BANDI TEK KOLON (ui-cx §15 yan panel tek kolon). layout.css L-C-R üç kolonu pencere genişliğine göre
   yan yana tutar; panel masaüstünde de 390 px olduğu için kolonlar 111/74/68 px'e sıkışıyordu (dt-panel-baslik-sonda STU012:
   "STD-25-00012" ve "2025-2026" satıra bölünmüş, ad "Yusuf Aks…" kırpık — masaüstü 5, mobil 5). Panelde kolonlar alt alta,
   orta/sağ kolon alanları yan yana sarılır; 140 px tavan kalkar (panel kendi içinde kayar). Ana sayfa başlığı değişmez. */
#DigitalTwinWorkspace #twin-vs-pane .SingleItemHeader,
#DigitalTwinWorkspace #twin-vs-pane .SingleItemHeader .FieldSet_m { max-height: none !important; overflow: visible !important; }
#DigitalTwinWorkspace #twin-vs-pane .SingleItemHeader .FieldSet_m,
#DigitalTwinWorkspace #twin-vs-pane .SingleItemHeader .FieldSet_m > .DirectionVer { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 8px !important; }
#DigitalTwinWorkspace #twin-vs-pane .SingleItemHeader .FieldSet_m { padding: 10px 14px !important; min-height: 0 !important; }
#DigitalTwinWorkspace #twin-vs-pane .SingleItemHeader .FieldSet_l,
#DigitalTwinWorkspace #twin-vs-pane .SingleItemHeader .FieldSet_c,
#DigitalTwinWorkspace #twin-vs-pane .SingleItemHeader .FieldSet_r { flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; align-items: flex-start !important; text-align: left !important; }
#DigitalTwinWorkspace #twin-vs-pane .SingleItemHeader .FieldSet_c,
#DigitalTwinWorkspace #twin-vs-pane .SingleItemHeader .FieldSet_r { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; column-gap: 14px !important; row-gap: 4px !important; }
/* tek kolonda satır genişliği yeter: değer tireden bölünmez ("2025-2026" 58 px'te iki satırdı), sığmazsa üç noktayla biter */
#DigitalTwinWorkspace #twin-vs-pane .SingleItemHeader .FieldValue,
#DigitalTwinWorkspace #twin-vs-pane .SingleItemHeader .InputSpan,
#DigitalTwinWorkspace #twin-vs-pane .SingleItemHeader a { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; }
/* satır içi XML genişliği (ör. %31) tek kolonda alanı 58 px'e daraltıyordu ("2025-2026" kırpık) → alan içeriği kadar */
#DigitalTwinWorkspace #twin-vs-pane .SingleItemHeader .Field { width: auto !important; flex: 0 1 auto !important; min-width: 0 !important; }
/* Durum şeridi panelin koyu temasında (dt-panel-baslik-sonda kontrast ölçümü STU012): durum başlığı "AKTİF" koyu zeminde #222 → 1.32;
   mobil geçiş düğmeleri (.Transactions) pastel zeminde beyaz yazı → 1.21 / 1.35. Masaüstündeki koyu yazı rengi (#263238, 9–10) iki kadrajda da. */
#DigitalTwinWorkspace #twin-vs-pane .ItemStates .StateTitle,
#DigitalTwinWorkspace #twin-vs-pane .ItemStates .StateTitle * { color: #f8fafc !important; }
#DigitalTwinWorkspace #twin-vs-pane .ItemStates .Transition,
#DigitalTwinWorkspace #twin-vs-pane .ItemStates .Transition span { color: #263238 !important; }
/* zorunlu alan hapı panelde açık temayla çiziliyordu (#fff8e6 zemin); platformun koyu tema değerleri 30-item-forms.css html.dark-theme'den BİREBİR */
#DigitalTwinWorkspace #twin-vs-pane .RequiredMeter { color: #ffcf70 !important; background: #3a2f14 !important; border-color: rgba(255, 193, 7, 0.45) !important; }
#DigitalTwinWorkspace #twin-vs-pane .RequiredMeter:hover { background: #4a3c1a !important; }
/* Panel her kadrajda dar (≤420 px): 30-item-forms.css'in ≤768px "hap akışa girer" davranışı panelde iki kadrajda. atom.js satır içi
   bottom yazdığı için oradaki bottom:auto ezilemiyor, relative hap şeridin üstüne kayıyordu (mobil "DONDUR" ile 450 px² örtüşme) → !important.
   relative korunur: içindeki .RequiredMeterBar absolute'tur. */
#DigitalTwinWorkspace #twin-vs-pane .RequiredMeter.RequiredMeterPos_AboveFooter { position: relative !important; top: auto !important; bottom: auto !important; right: auto !important; left: auto !important; display: flex !important; width: fit-content !important; max-width: calc(100% - 24px) !important; margin: 8px 12px 4px auto !important; box-shadow: none !important; }
/* core.css ".SingleItem > .ItemBody" → rgba(255,255,255,.5) */
#DigitalTwinWorkspace #twin-vs-pane .SingleItem > .ItemBody { background-color: transparent !important; }
/* core.css ".FileDisplay" → white / #303030 · ".UploadImage" → rgba(255,255,255,.75) */
#DigitalTwinWorkspace #twin-vs-pane .FileDisplay { background-color: #2a2e38 !important; color: #e0e0e0 !important; border-color: rgba(255, 255, 255, 0.15) !important; }
#DigitalTwinWorkspace #twin-vs-pane .UploadImage { background-color: #2a2e38 !important; }
/* core.css "body .Choice" · "body .Choices > a" → white / #303030 (seçili Choice platform vurgusunu korur) */
#DigitalTwinWorkspace #twin-vs-pane .Choice:not(.Selected),
#DigitalTwinWorkspace #twin-vs-pane .Choices > a:not(.Selected) { background-color: #2a2e38 !important; color: #e0e0e0 !important; border-color: rgba(255, 255, 255, 0.15) !important; }
/* core.css ".CancelButton" → #4f4f52 (kontrast 2.07–2.19) */
#DigitalTwinWorkspace #twin-vs-pane .CancelButton { color: #e2e8f0 !important; }
/* core.css ".ItemFooter .Center a" → #fff / #334155 !important · "a.IAQ_Chip, a.IAQ_More" → #4f4f52 / #475569 !important */
#DigitalTwinWorkspace #twin-vs-pane .ItemFooter .Center a,
#DigitalTwinWorkspace #twin-vs-pane .ItemFooter .Center .ItemQuickBar a.IAQ_Chip,
#DigitalTwinWorkspace #twin-vs-pane .ItemFooter .Center .ItemQuickBar a.IAQ_More { background-color: transparent !important; color: #cbd5e1 !important; border-color: rgba(255, 255, 255, 0.18) !important; }
/* core.css ".ItemFooter .ItemActionLauncher, .ItemBottom .ItemActionLauncher" → #fff / #0f172a / #cbd5e1 !important ("Düzenle" kontrast 1.0) */
#DigitalTwinWorkspace #twin-vs-pane .ItemFooter .ItemActionLauncher,
#DigitalTwinWorkspace #twin-vs-pane .ItemBottom .ItemActionLauncher { background: #2a2e38 !important; background-color: #2a2e38 !important; color: #e2e8f0 !important; border-color: rgba(255, 255, 255, 0.18) !important; }
#DigitalTwinWorkspace #twin-vs-pane .ItemActionLauncher .IAL_Text { color: #e2e8f0 !important; }
/* Salt-okunur değer bağlantısı rgb(90,102,117) (kontrast 2.5) — CSSOM kaynağı ölçülemedi; değer katmanında sabitlenir, sonra yeniden ölçülür */
#DigitalTwinWorkspace #twin-vs-pane .FieldValue.ReadOnly,
#DigitalTwinWorkspace #twin-vs-pane .FieldValue.ReadOnly a { color: #cbd5e1 !important; }
/* İç içe kutu: Twin'in kendi ".twin-platform-host .ItemCenter .FieldSet" kuralı HER kata zemin + kenarlık veriyordu (ölçüldü: 5 kat).
   Yalnız üst bölüm kutu kalır; iç bölümler düz (flat kart mimarisi). */
#DigitalTwinWorkspace .twin-platform-host .ItemCenter .FieldSet .FieldSet { background: transparent !important; background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; }
/* T26 mobil eylem çubuğu burada YAZILMAZ: platformun kendisi 30-item-forms.css (febfbded6 + dde77ab4f) ile body.Mobile .ItemBottom
   düzenini genel olarak düzeltti; Twin içinde yalnız o düzen ölçülür, ikinci bir yerleşim kuralı çakışma üretir. */

/* ── 2026-09-14 Dijital İkiz Dalga 4c (plan T26 T27): form yerleşim kusurları — kaynaklar dt-form-yerlesim-sonda.cjs ile ölçüldü ── */
/* (1) core.css ".SingleItem .FieldSet_m .SingleItemHeaderTitle > span" → background-color:white !important; panel metni açık → "KİŞİ" beyaz üstüne beyaz */
#DigitalTwinWorkspace #twin-vs-pane .SingleItem .FieldSet_m .SingleItemHeaderTitle > span { background-color: rgba(96, 165, 250, 0.16) !important; color: #bfdbfe !important; border: 1px solid rgba(96, 165, 250, 0.35); }
/* (2) core.css ".ItemView, .SingleItem .FieldSetPanel" başlık bandının iç FieldSet_m'ine zemin + kenarlık + 12px köşe + gölge veriyordu → bant içinde ikinci kutu */
#DigitalTwinWorkspace #twin-vs-pane .ItemHeader .FieldSetPanel { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
/* (3) Twin'in ".twin-platform-host .ItemCenter .FieldSet" kuralı 14px dolgu + 1px kenarlığı HER iç içe kata veriyordu:
   4 kat × 15px = 60px sol girinti (ölçüldü: ilk girdi 1600'de 206px, 390'da 176px genişlik). Dış bölüm kutu kalır, iç katlar dolgusuz. */
#DigitalTwinWorkspace .twin-platform-host .ItemCenter .FieldSet .FieldSet { padding: 0 !important; border-width: 0 !important; border-radius: 0 !important; margin-bottom: 0 !important; }

@media (max-width: 640px) {
    /* (4) mobil başlatıcı 86px'e sıkışıyordu (ikon 2px, "Düzenle" 8px — "D 13"). Panel yan dolgusu 14→6, SingleItem yan dolgusu 8→0 (+32px),
       başlatıcı iç boşlukları daralır, dekoratif ▴ gizlenir; eylem, etiket ve sayaç korunur. Gönder düğmeleri platformun 68px düzeninde kalır. */
    #DigitalTwinWorkspace #twin-mob-form-host { padding-left: 6px; padding-right: 6px; }
    #DigitalTwinWorkspace .twin-platform-host > .SingleItem { padding-left: 0 !important; padding-right: 0 !important; }
    #DigitalTwinWorkspace #twin-vs-pane .ItemBottom .ItemActionLauncher { gap: 4px !important; padding: 0 8px !important; }
    #DigitalTwinWorkspace #twin-vs-pane .ItemBottom .ItemActionLauncher .IAL_Icon { flex: 0 0 16px !important; min-width: 16px !important; }
    #DigitalTwinWorkspace #twin-vs-pane .ItemBottom .ItemActionLauncher .IAL_Chevron { display: none !important; }
    /* (5) panel 390px ekranda 366px (kural: min(100vw - 24px, 420px)); kalan 24px şeritte arkadaki üst çubuk ve tuval düğmeleri YARIM görünüyordu → açık panelin dışı karartılır */
    #DigitalTwinWorkspace #twin-vs-pane:not(.state-hidden) { box-shadow: 0 0 0 100vmax rgba(3, 6, 12, 0.72) !important; }
}

/* ── 2026-09-14 Dijital İkiz Dalga 4d (plan T26 T27): 4c karelerinde görülen kalanlar — dt-form-yerlesim-sonda.cjs (bant/karartma/yapiskan) ── */
/* (1) core.css + domain.css ".SingleItem .FieldSet_m .SingleItemHeaderTitle → position:absolute; top:-1.2em" tür rozetini kartın ÜSTÜNE taşır;
   panelde bandın hemen üstü panel başlığı → rozet bant kenarını örtüyordu (1600: rozet y=160, bant y=170). Platformun kendi mobil çözümüyle aynı: akışa al. */
#DigitalTwinWorkspace #twin-vs-pane .SingleItem .FieldSet_m .SingleItemHeaderTitle { position: relative !important; top: 0 !important; margin-top: 2px !important; transform: none !important; }
@media (max-width: 640px) {
    /* (2) body.Mobile .ItemBottom sticky bottom:0 — kabın 12px alt dolgusu çubuğun ALTINDA şerit bırakıyordu (çubuk altı 583, kap altı 595); kayan içerik oradan görünüyordu */
    #DigitalTwinWorkspace #twin-mob-form-host { padding-bottom: 0; }
    /* (3) 4c'deki gölge karartması dokunmayı YAKALAMIYORDU: karartılmış alana dokunuş arkadaki #twin-btn-close'a gidiyordu (Twin'in tamamı kapanır).
       Gölge kaldırılır; yerine dokunmayı yakalayan katman. Koşul panelin görünür durumu (sınıf değil) — dokunuş paneli kapatır (x-digital-twin.js toggleRightPane). */
    #DigitalTwinWorkspace #twin-vs-pane:not(.state-hidden) { box-shadow: none !important; }
    #DigitalTwinWorkspace:has(#twin-vs-pane:not(.state-hidden))::after { content: ''; position: fixed; inset: 0; z-index: 9998; background: rgba(3, 6, 12, 0.72); cursor: pointer; }
    /* (4) mobil başlık bandı 146px (tavan 140): değeri boş başlık alanı <a class="InputSpan"><a></a></a> olarak çiziliyor; içteki boş
       bağlantı 0px ama DIŞ kap "body [class*=Field] > a { min-height:24px }" ile iki boş satır tutuyordu (ölçüldü: dt-form-yerlesim-sonda bosBaglantilar).
       Yalnız tek çocuğu boş bir bağlantı olan dış kap gizlenir; değer taşıyan alan (iç bağlantıda metin) etkilenmez. */
    #DigitalTwinWorkspace #twin-vs-pane .ItemHeader a.InputSpan:has(> a:empty:only-child) { display: none !important; }
}

/* ── 2026-09-14 Dijital İkiz Dalga 4e (plan T29 T43): alt raftaki platform görünümü — dt-raf-sonda + dt-raf-tablo-sonda (Twin dışı KONTROL kabıyla kıyas) ── */
/* (1) Aynı liste kontrol kabında 0/209, rafta 209/209 düşük kontrast: Twin'in koyu kuralları (.twin-shelf-etw-host .ListTable td, 0,2,1)
   platformun açık tema kurallarına (.EntityTypeView.View_List .ListHeader td → rgb(51,65,85) / .ListBody tbody > tr → #fff, 0,4,x !important)
   yeniliyordu: hücre zemini koyu (Twin) + metin koyu gri (platform). Yapı (94px dondurulmuş sol tablo + kayan tablo, hiza farkı 0) kontrolle
   BİREBİR aynı olduğu için yerleşime dokunulmaz; yalnız renk katmanı kimlik önekiyle kazanır. */
#DigitalTwinWorkspace #twin-shelf-etw-host .ListAll,
#DigitalTwinWorkspace #twin-shelf-etw-host .ListBody,
#DigitalTwinWorkspace #twin-shelf-etw-host .ListBody tbody > tr,
#DigitalTwinWorkspace #twin-shelf-etw-host .ListBody tbody > tr > td { background: #0f172a !important; background-color: #0f172a !important; }
#DigitalTwinWorkspace #twin-shelf-etw-host .ListBody tbody > tr:nth-child(2n),
#DigitalTwinWorkspace #twin-shelf-etw-host .ListBody tbody > tr:nth-child(2n) > td { background: #1e293b !important; background-color: #1e293b !important; }
#DigitalTwinWorkspace #twin-shelf-etw-host .ListBody tbody > tr:hover > td { background: #0c4a6e !important; background-color: #0c4a6e !important; }
#DigitalTwinWorkspace #twin-shelf-etw-host .ListHeader,
#DigitalTwinWorkspace #twin-shelf-etw-host .ListHeader td { background: #1e293b !important; background-color: #1e293b !important; color: #7dd3fc !important; }
#DigitalTwinWorkspace #twin-shelf-etw-host .ListHeader td * { color: #7dd3fc !important; }
#DigitalTwinWorkspace #twin-shelf-etw-host .ListBody td,
#DigitalTwinWorkspace #twin-shelf-etw-host .ListBody td * { color: #f1f5f9 !important; }
#DigitalTwinWorkspace #twin-shelf-etw-host .ListBody td a,
#DigitalTwinWorkspace #twin-shelf-etw-host .ListBody td a * { color: #93c5fd !important; }
/* (2) Grafik AÇIK kart olarak kalır: eksen/değer yazıları açık zemin için çizilir (fill #6b7280 / #374151) — koyu zemine çevirmek değerleri okunmaz yapar. */
/* (3) Görünüm açıkken kap içeriği kesiyordu (grafik 1600: 324>247px, 390: 352>258px; tablo 390: 280>260px) → raf görünümle birlikte büyür
   (sınıf: x-digital-twin.js mountStationView / openNavView). */
#DigitalTwinWorkspace .twin-entityview-shelf.is-native-view { height: min(460px, 62vh); max-height: none; }
@media (max-width: 640px) {
    #DigitalTwinWorkspace .twin-entityview-shelf.is-native-view { top: 64px; height: auto; max-height: none; }
    /* (4) raf başlığı: sağdaki düğmeler sol bloğu 0px'e itiyordu (başlık 4 satır, üstten kesik) → başlık kendi satırında, tek satır */
    #DigitalTwinWorkspace .twin-shelf-header { flex-wrap: wrap; height: auto; row-gap: 6px; padding: 8px 12px; }
    #DigitalTwinWorkspace .twin-shelf-header .twin-shelf-left { flex: 1 1 100%; min-width: 0; }
    #DigitalTwinWorkspace #twin-shelf-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ── 2026-09-14 Dijital İkiz Dalga 4f (plan T29 T43): raf — platform sayfasındaki aynı görünümle kıyas (dt-raf-platform-kiyas) ── */
/* (1) sütun toplam satırı: platform ".EntityTypeView.View_List .ListFooter → #f8fafc !important" (0,4,x) Twin kuralını yeniyordu — tablonun altında beyaz şerit */
#DigitalTwinWorkspace #twin-shelf-etw-host .ListFooter { background: #1e293b !important; background-color: #1e293b !important; border-top: 1px solid rgba(148, 163, 184, 0.2) !important; }
#DigitalTwinWorkspace #twin-shelf-etw-host .ListFooter * { color: #cbd5e1 !important; }
/* (2) grafik AÇIK kart kalır; Twin'in ".twin-shelf-etw-host * { color:#f1f5f9 !important }" kuralı kartın kontrollerine de açık yazı veriyordu
   ("Kolon" kontrast 1.1; platform sayfasında 17.85) → kart içi kontroller platformun koyu yazısına döner */
#DigitalTwinWorkspace #twin-shelf-etw-host .ViewBody_Chart.ChartPremiumHost .ChartFloatControls,
#DigitalTwinWorkspace #twin-shelf-etw-host .ViewBody_Chart.ChartPremiumHost .ChartFloatControls * { color: #0f172a !important; }
/* (3) raftaki rozetler tek satır ("12 Kayıt" 390'da 2.7 satır, "Canlı Görünüm" 1.6 satır) */
#DigitalTwinWorkspace .twin-shelf-header .twin-side-pill { white-space: nowrap; flex: 0 0 auto; }
/* (4) raf başlık denetimleri dokunma hedefi: "Tümü" 21px, Kartlar/Tablo 34px (Dalga 3 sözleşmesi ≥32, dokunmatik ≥40) */
#DigitalTwinWorkspace .twin-shelf-header .twin-shelf-chip,
#DigitalTwinWorkspace .twin-shelf-header .twin-shelf-vbtn,
#DigitalTwinWorkspace .twin-shelf-header .twin-shelf-action-btn { min-height: 32px; }
@media (pointer: coarse) {
    #DigitalTwinWorkspace .twin-shelf-header .twin-shelf-chip,
    #DigitalTwinWorkspace .twin-shelf-header .twin-shelf-vbtn,
    #DigitalTwinWorkspace .twin-shelf-header .twin-shelf-action-btn,
    #DigitalTwinWorkspace .twin-shelf-header .twin-panel-close-btn { min-height: 40px; min-width: 40px; }
}
@media (min-width: 641px) {
    /* (5) sağ panel açıkken raf panelin ALTINA giriyordu (1600: raf sağ kenarı 1580, panel sol kenarı 1196 → grafiğin sağ üçte biri görünmez).
       Raf panelin solunda biter: panel 390px + sağ 14px + 12px boşluk; büyütülmüş panel 420px. Koşul panelin görünür durumu (sınıf değil). */
    #DigitalTwinWorkspace:has(#twin-vs-pane:not(.state-hidden)) .twin-entityview-shelf { right: 416px; }
    #DigitalTwinWorkspace:has(#twin-vs-pane.is-maximized:not(.state-hidden)) .twin-entityview-shelf { right: 446px; }
}
@media (max-width: 640px) {
    /* (6) raf arama kutusu satır içi 170px ile yer bulamayıp yer tutucuyu kesiyordu ("Kayıtlarda f…") → kalan genişliği alır */
    #DigitalTwinWorkspace #twin-shelf-search { width: auto !important; flex: 1 1 120px; min-width: 0; }
}

/* ── 2026-09-14 Dijital İkiz Dalga 4g (plan T29 T43): raf — sayfalama zemini ve dokunmatik kapat düğmesi (dt-raf-platform-kiyas) ── */
/* (1) raftaki görünüm kökü (yeni hedef div, platform ona .EntityTypeView sınıflarını ekler) platformdan rgba(255,255,255,.5) zemin alıyordu:
   sayfalama çubuğu gri, üstündeki metin soluk ("Kayıt / Sayfa" ata zinciri: PagingLabel → Paging → Right → Bottom → Center → ETVBody → hedef). */
#DigitalTwinWorkspace #twin-shelf-etw-host .twin-shelf-etw-target { background: transparent !important; background-color: transparent !important; }
/* (2) Twin'in kendi ".twin-panel-close-btn → 32px !important" (width/height/min/max) kuralı yine Twin'in 640px altı 44px kuralını ve
   dokunmatik 40px sözleşmesini eziyordu (ölçüldü: pointer coarse, 390px → 32×32) → dokunmatikte 40px, aynı özgüllük yarışını kimlik önekiyle kazanır. */
@media (pointer: coarse) {
    #DigitalTwinWorkspace .twin-panel-close-btn { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; max-width: 40px !important; max-height: 40px !important; flex: 0 0 40px !important; }
}

/* ── 2026-09-14 Dijital İkiz Dalga 4h (plan T29): raf liste başlığı — dt-raf-baslik-deney (aday A seçildi) ── */
/* .ListHeader sütun yönlü flex kapta küçülüyordu (flex: 0 1 auto → 55px); etiketler kabın dışında kırpılıyordu. Küçülmez, içeriğe göre yükseklik.
   Taşma/kaydırma mekanizmasına dokunulmaz (deneyde başlık↔gövde sütun hizası 0). */
#DigitalTwinWorkspace #twin-shelf-etw-host .ListHeader { height: auto !important; max-height: none !important; min-height: 0 !important; flex: 0 0 auto !important; }

/* ── 2026-09-14 Dijital İkiz Dalga 4i (plan T29): raf görünümünün yerel kaydırma çubukları koyu temada ── */
#DigitalTwinWorkspace #twin-shelf-etw-host { color-scheme: dark; }

/* ── 2026-09-14 Dijital İkiz Dalga 4j (plan T29): raf sayfalama çubuğu yazıları (dt-raf-test: kontrast 1.51) ── */
#DigitalTwinWorkspace #twin-shelf-etw-host .Paging,
#DigitalTwinWorkspace #twin-shelf-etw-host .Paging *,
#DigitalTwinWorkspace #twin-shelf-etw-host .PagingLabel { color: #cbd5e1 !important; }

/* ── 2026-09-14 Dijital İkiz Dalga 4k (plan T29): raf sayfalama çubuğu (dt-sayfalama-sonda: 1.19 / 1.09 / 4.15 / 1.17) ── */
/* sayfalama bölgesi her kadrajda tam opak ve görünür (dokunmatikte üzerine gelme yok; masaüstünde 0.08 opaklıkla neredeyse görünmezdi) */
#DigitalTwinWorkspace #twin-shelf-etw-host .Center > .Bottom,
#DigitalTwinWorkspace #twin-shelf-etw-host .Center > .Bottom .Left,
#DigitalTwinWorkspace #twin-shelf-etw-host .Center > .Bottom .Right,
#DigitalTwinWorkspace #twin-shelf-etw-host .Paging,
#DigitalTwinWorkspace #twin-shelf-etw-host .Paging > a,
#DigitalTwinWorkspace #twin-shelf-etw-host .Paging .MicroButton { opacity: 1 !important; visibility: visible !important; }
/* sayfa ve ok düğmeleri: platformun açık mavi zemini koyu panelde açık yazıyla okunmuyordu */
#DigitalTwinWorkspace #twin-shelf-etw-host .Center > .Paging > a,
#DigitalTwinWorkspace #twin-shelf-etw-host .Paging > a { background-color: #1e293b !important; border: 1px solid rgba(148, 163, 184, 0.35) !important; color: #e2e8f0 !important; }
#DigitalTwinWorkspace #twin-shelf-etw-host .Paging > a * { color: #e2e8f0 !important; }
#DigitalTwinWorkspace #twin-shelf-etw-host .Paging > a.Selected { background-color: #0369a1 !important; border-color: #38bdf8 !important; }
#DigitalTwinWorkspace #twin-shelf-etw-host .Paging > a.Selected * { color: #ffffff !important; }
/* sayfa ve sayfa başı seçicileri: genel "select { color:black !important }" kuralı koyu zeminde okunmuyordu */
#DigitalTwinWorkspace #twin-shelf-etw-host .Paging select { color: #f1f5f9 !important; background-color: #0f172a !important; border: 1px solid rgba(148, 163, 184, 0.35) !important; }
#DigitalTwinWorkspace #twin-shelf-etw-host .Paging select option { color: #f1f5f9; background-color: #0f172a; }

/* ── 2026-09-14 Dijital İkiz Dalga 4l (plan T43): raftaki liste dışı görünümler AÇIK KART (dt-raf-gorunum-sonda: satis İnfografik 22/22 metin 4.5 altı) ── */
/* Platformun açık tasarlanmış görünümleri koyu rafta yarı saydam beyaz zeminle griye karışıyordu; kart opak açık zeminde, kendi yazı renkleriyle çizilir. */
#DigitalTwinWorkspace #twin-shelf-etw-host > .twin-shelf-light-card {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    color: #0f172a;
    color-scheme: light;
    border-radius: 10px;
    overflow: hidden;
}

/* ── 2026-09-14 Dijital İkiz Dalga 4m (plan T43/T29): raf başlığı tek satır · rıhtımlar rafa binmez · açık kartta infografik içerik boyunda (dt-raf-baslik-ortus-sonda) ── */
@media (max-width: 640px) {
    /* (A) Dalga 4e başlığı kendi satırına almıştı; kapat düğmesi (kap 44px) başlık satırında kalır, arama/Yeni Ekle görünürse kap yine alt satıra geçer */
    #DigitalTwinWorkspace .twin-shelf-header .twin-shelf-left { flex: 1 1 calc(100% - 48px); }
    /* (B) raf kanvası örten alt çekmece: kanvas rıhtımları raf açıkken görünmez ve dokunulmaz (raf #twin-center-split yığın bağlamında z=1, rıhtımlar z=35/40) */
    #DigitalTwinWorkspace:has(#twin-entityview-shelf.is-native-view:not(.state-hidden)) #twin-dock-left,
    #DigitalTwinWorkspace:has(#twin-entityview-shelf.is-native-view:not(.state-hidden)) #twin-dock-right,
    #DigitalTwinWorkspace:has(#twin-entityview-shelf.is-native-view:not(.state-hidden)) #twin-hud-bottom-left { visibility: hidden; pointer-events: none; }
    /* (B3) 2D/3D ve zaman düğmeleri (#twin-hud-bottom-left, 390: 557–597) rafın (112–590) altında kalıyordu — kanvas kipi düğmeleri, kanvası örten çekmece açıkken aynı kuralla gizlenir */
    /* (B2) ters yön: alt geçiş düğmesinin "N Bileşen" rozeti (598–611) raf alt kenarının (606) altında kalıyordu → raf rozetin 8px üstünde biter (58 → 74px) */
    #DigitalTwinWorkspace .twin-entityview-shelf { bottom: 74px; }
}
@media (min-width: 641px) {
    /* (B) masaüstü: raf sağ rıhtımın (36px) solunda biter. Rıhtım panel açıkken panele kenetlenir (right:390px, büyütülmüş 420px) —
       Dalga 4f'nin 416/446px'i rıhtımın altında kalıyordu (1600: #twin-dock-btn-form rafın üstünde, dt-raf-test) */
    #DigitalTwinWorkspace .twin-entityview-shelf { right: 56px; }
    #DigitalTwinWorkspace:has(#twin-vs-pane:not(.state-hidden)) .twin-entityview-shelf { right: 438px; }
    #DigitalTwinWorkspace:has(#twin-vs-pane.is-maximized:not(.state-hidden)) .twin-entityview-shelf { right: 468px; }
    /* (C2) içerik boyundaki infografik sabit rafa (460px, kap 385) sığmayınca iç kaydırma doğuyordu (satış 1600: 406/385) → raf görünümle büyür;
       tavan konum çubuğunun altında kalır. Liste görünümleri etkilenmez (ETV'leri kabın yüksekliğine dayanır). */
    #DigitalTwinWorkspace .twin-entityview-shelf.is-native-view:has(.twin-shelf-light-card .InfographicViewBody) { height: auto; min-height: 240px; max-height: calc(100% - 120px); }
}
/* (C) açık kartta infografik içerik boyunda çizilir (platform sayfasındaki gibi); taşan yükseklik raf kabında kaydırılır. Grafik (ECharts) kabı yükseklik ister — kapsam yalnız İnfografik. */
/*     Açık kart ETV'nin KENDİSİDİR (Preview hedef div'e EntityTypeView sınıfı ve etvig_ kimliği verir). Tek halka yeter: yüksekliği auto olan dikey flex
       kabında "flex:1 1 0%" taşıyan iç halkalar (EntityTypeViewBody → … → rc-gi-blok) içerik boyunda çizilir — ölçüldü: blok 490/308 → 490/490; iç halka seçicileri eşleşmediği için yazılmadı. */
#DigitalTwinWorkspace #twin-shelf-etw-host > .twin-shelf-light-card:has(.InfographicViewBody) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
}

/* ── 2026-09-15 Dijital İkiz Dalga 5 (plan T39 T40): tipografi alt sınırı 10px · dokunma hedefi ≥32px (dokunmatik ≥40px) ── */
#DigitalTwinWorkspace .twin-brand-sub,
#DigitalTwinWorkspace .twin-vs-badge-small,
#DigitalTwinWorkspace .twin-campus-level-pill,
#DigitalTwinWorkspace .twin-dock-btn-badge,
#DigitalTwinWorkspace .twin-dock-btn-arrow { font-size: 10px; }
#DigitalTwinWorkspace .twin-time-select { font-size: 11px; }
/* Tetikleyici platform başlığında 30×30 (!important) — boyutu değiştirmeden etkin dokunma alanı genişler (katman düğmenin kendisidir) */
/* ::after dolgu kutusuna göre yerleşir — 1px kenarlıkta -1px kazanç sıfırdı (dt-dalga5-sonda 1600: sağ/alt nokta atası a.Button); -2px → 32×32 */
#DigitalTwinHeaderTrigger.digital-twin-trigger::after { content: ""; position: absolute; inset: -2px; }
#DigitalTwinWorkspace .twin-nodecard-close { min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
#DigitalTwinWorkspace .twin-compare-close { width: 32px; height: 32px; min-width: 32px; min-height: 32px; flex: 0 0 32px; }
#DigitalTwinWorkspace .twin-nodecard-btn,
#DigitalTwinWorkspace .twin-search-input,
#DigitalTwinWorkspace #twin-shelf-search { min-height: 32px; }
@media (pointer: coarse) {
    #DigitalTwinHeaderTrigger.digital-twin-trigger::after { inset: -6px; }
    #DigitalTwinWorkspace .twin-time-select,
#DigitalTwinWorkspace .twin-nodecard-btn,
#DigitalTwinWorkspace .twin-search-input,
#DigitalTwinWorkspace #twin-shelf-search,
#DigitalTwinWorkspace .twin-artery-btn,
#DigitalTwinWorkspace .twin-center-chip { min-height: 40px; }
    #DigitalTwinWorkspace .twin-nodecard-close,
    #DigitalTwinWorkspace .twin-dock-btn,
    #DigitalTwinWorkspace .twin-nav-back-btn { min-width: 40px; min-height: 40px; }
    #DigitalTwinWorkspace .twin-compare-close { width: 40px; height: 40px; min-width: 40px; min-height: 40px; flex-basis: 40px; }
    /* temel kural 32px !important (max-height dahil) — önceki dokunmatik kurallar bu yüzden etkisizdi */
    #DigitalTwinWorkspace .twin-vs-iconbtn { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; max-height: 40px !important; }
}

/* ── 2026-09-15 Dijital İkiz Dalga 5b (plan T37): kabuk düğmeleri satır içi SVG ikon — işletim sisteminden bağımsız, her işe tek ikon ── */
#DigitalTwinWorkspace .twin-ico {
    /* dt-dalga5-sonda: em ölçüsü küçük fontlu düğmelerde 6–13px'e iniyordu, global svg max-width:100% dolgulu düğmede içeriği daraltıyordu */
    width: max(14px, 1.15em);
    height: max(14px, 1.15em);
    min-width: max(14px, 1.15em);
    max-width: none;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: -0.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
#DigitalTwinWorkspace .twin-ico [fill="currentColor"] { stroke: none; }
/* simge + metin: metinle aynı hizada, arada nefes payı */
#DigitalTwinWorkspace .twin-shelf-vbtn .twin-ico,
#DigitalTwinWorkspace .twin-shelf-action-btn .twin-ico,
#DigitalTwinWorkspace .twin-nodecard-btn .twin-ico,
#DigitalTwinWorkspace .twin-context-item .twin-ico,
#DigitalTwinWorkspace .twin-btn-classic-connections .twin-ico,
#DigitalTwinWorkspace #twin-side-drilldown-btn .twin-ico,
#DigitalTwinWorkspace #twin-side-focus-btn .twin-ico { margin-right: 6px; }
/* yalnız simgeli düğmeler: simge ortalı, biraz daha belirgin */
#DigitalTwinWorkspace .twin-btn-action > .twin-ico:only-child,
#DigitalTwinWorkspace .twin-cam-btn > .twin-ico,
#DigitalTwinWorkspace .twin-vs-iconbtn > .twin-ico,
#DigitalTwinWorkspace .twin-panel-close-btn > .twin-ico,
#DigitalTwinWorkspace .twin-nav-back-btn > .twin-ico { width: max(16px, 1.25em); height: max(16px, 1.25em); vertical-align: middle; }
/* kare 1600: rıhtım/kamera/geri ikonları küçük font yüzünden ~10px'e iniyordu */
#DigitalTwinWorkspace .twin-dock-btn-icon > .twin-ico,
#DigitalTwinWorkspace .twin-shelf-icon > .twin-ico { width: max(18px, 1.15em); height: max(18px, 1.15em); }
#DigitalTwinWorkspace .twin-dock-btn-arrow .twin-ico { width: 14px; height: 14px; min-width: 14px; stroke-width: 2.5; }
/* simge kapları esnek başlıklarda küçülmez (mobil raf simgesi 4.8px'e iniyordu) */
#DigitalTwinWorkspace .twin-search-icon,
#DigitalTwinWorkspace .twin-shelf-icon,
#DigitalTwinWorkspace .twin-dock-btn-icon,
#DigitalTwinWorkspace .twin-dock-btn-arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
#DigitalTwinWorkspace .twin-cam-btn > .twin-ico,
#DigitalTwinWorkspace .twin-nav-back-btn > .twin-ico,
#DigitalTwinWorkspace .twin-dock-btn-icon > .twin-ico { min-width: max(16px, 1.25em); }

/* ── 2026-09-15 Dijital İkiz N10 kontrast (dt-sikayet-olcum S6: 13 metin eşik altı; ölçüt dt-n10-kontrast-sonda) ── */
#DigitalTwinWorkspace .twin-breadcrumb-sep { color: #94a3b8; }
#DigitalTwinWorkspace .twin-brand-sub { color: #94a3b8; }
#DigitalTwinWorkspace .twin-dock-btn-badge,
#DigitalTwinWorkspace .twin-shelf-vbtn.is-active { background: #0369a1 !important; color: #ffffff !important; }

/* ── 2026-09-15 Dijital İkiz N10 dilim 2: vurgu rengi metin değil işaret taşır (dt-n10-kontrast-sonda C2) ── */
#DigitalTwinWorkspace .twin-renk-nokta { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: 1px; box-shadow: 0 0 0 1.5px rgba(226, 232, 240, 0.85); }
#DigitalTwinWorkspace .twin-side-pill.twin-pill-vurgu { color: #e2e8f0; border-width: 1px; border-style: solid; }

/* ── 2026-09-15 Dijital İkiz N10 dilim 3: sağ paneldeki platform formu koyu temada okunur (dt-n10-kontrast-sonda C4) ── */
#DigitalTwinWorkspace .AsstStateBadge.AsstState-active { color: #6ee7b7; }
#DigitalTwinWorkspace .AsstSuggestBtn:not(.AsstSuggestBtn-ghost) { background: #1d4ed8; border-color: #1d4ed8; color: #ffffff; }
#DigitalTwinWorkspace #twin-vs-pane .ItemActionLauncher .IAL_Chevron { color: #94a3b8 !important; }

/* ── 2026-09-15 Dijital İkiz N10 dilim 4: sağ paneldeki platform formu — seçili seçenek, oluşturma/değişiklik satırı, Kaydet (dt-n10-form-oge-tani) ── */
#DigitalTwinWorkspace .twin-platform-host .Choices > a.Choice.Selected { background-color: #0369a1 !important; border-color: #0369a1 !important; color: #ffffff !important; }
#DigitalTwinWorkspace .twin-platform-host .Choices > a.Choice.Selected .ButtonText { color: #ffffff !important; }
#DigitalTwinWorkspace .twin-platform-host .ItemMetaStrip .ByUserDate,
#DigitalTwinWorkspace .twin-platform-host .ItemMetaStrip .ByUserDate span { color: #94a3b8 !important; }
#DigitalTwinWorkspace .twin-platform-host .ItemSubmit a.OkButton { background-color: #047857 !important; border-color: #047857 !important; }
#DigitalTwinWorkspace .twin-platform-host .ItemSubmit a.OkButton .ButtonText { color: #ffffff !important; }

/* ── N1 S1 (Dijital İkiz): kayıt seviyesi vis-network kabı — Twin tuvalinin kutusunda, DOM kaplamalarının (konum yolu, filtre çubuğu, rıhtım) altında ── */
#twin-layer-3d .twin-vis-host { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 2; }
#twin-layer-3d .twin-vis-host .graph-root { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; background: transparent; }
#twin-layer-3d .twin-vis-host .graph-canvas { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
#twin-layer-3d .twin-vis-host .vis-network:focus { outline: none; }

/* ── N1 S2 mobil liste yer kazanımı (2026-09-15): liste çubuğu 131→~52 px, sayfa çubuğu 87→~52 px; vis kabına kart sığar ── */
@media (max-width: 640px) {
    #DigitalTwinWorkspace #twin-station-lists-bar { flex-wrap: nowrap !important; left: 64px !important; right: 60px !important; max-width: none !important; padding: 4px 6px !important; }
    #DigitalTwinWorkspace #twin-station-lists-bar > label { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
    #DigitalTwinWorkspace #twin-station-lists-bar > select { min-height: 40px !important; flex: 1 1 0 !important; min-width: 0 !important; font-size: 14px !important; }
    #DigitalTwinWorkspace #twin-station-lists-bar > select + select { flex: 0 0 auto !important; }
    #DigitalTwinWorkspace #twin-record-data-state { bottom: 70px !important; flex-wrap: nowrap !important; justify-content: space-between !important; padding: 4px 6px 4px 10px !important; font-size: 12px !important; line-height: 1.3 !important; text-align: left !important; }
    #DigitalTwinWorkspace #twin-record-data-state > button { min-height: 40px !important; flex: 0 0 auto !important; }
}
/* Unified per-item right-click action menu — TAB redesign (2026-07-07).
   Rendered by $_EntityTypeView.ShowItemActionsMenu (et.js) as a
   .SelectionsMenu.SelectionsMenu_ItemActions:
       Title
       .ItemActionsTabs      (tablist: Formlar · Otomasyon · Analiz · Yönetici)
       .ItemActionsTabBodies (one .ItemActionsTabPanel per tab, only .state-active shown)
   Each former stacked group is now a tab; the clicked tab reveals that group's
   FULL item list. Post-Meta tier so it layers over base .SelectionsMenu styling. */

.SelectionsMenu.SelectionsMenu_ItemActions {
    width: min(336px, calc(100vw - 16px)) !important;
    min-width: min(284px, calc(100vw - 16px)) !important;
    max-width: min(336px, calc(100vw - 16px)) !important;
    max-height: calc(100vh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
    padding: 0;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.25;
    border: 1px solid rgba(15,23,42,0.10);
    background: #ffffff !important;
    box-shadow: 0 18px 44px rgba(2,6,23,0.22), 0 2px 10px rgba(2,6,23,0.10) !important;
    overscroll-behavior: contain;
    box-sizing: border-box;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    z-index: 2147483000 !important;
    font-size: 13.5px;
}

/* Title row: record title + type icon */
.SelectionsMenu_ItemActions .ItemActionsTitle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 11px 8px;
    font-weight: 680;
    font-size: 14px;
    line-height: 1.2;
    color: var(--text-strong, #16182a);
}
.SelectionsMenu_ItemActions .ItemActionsTitle > .ImageSpan,
.SelectionsMenu_ItemActions .ItemActionsTitle > img,
.SelectionsMenu_ItemActions .ItemActionsTitle svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    opacity: 0.7;
}
.SelectionsMenu_ItemActions .ItemActionsTitle > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
.SelectionsMenu_ItemActions .ItemActionsTabs {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
    padding: 0 6px;
    border-bottom: 1px solid rgba(15,23,42,0.09);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.SelectionsMenu_ItemActions .ItemActionsTabs::-webkit-scrollbar { height: 0; }
/* Single group → no tabs needed, hide the bar entirely */
.SelectionsMenu_ItemActions.state-single-tab .ItemActionsTabs { display: none; }

.SelectionsMenu_ItemActions .ItemActionsTab {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 4px 8px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--text-muted, #6f7584);
    font: inherit;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.15;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}
.SelectionsMenu_ItemActions .ItemActionsTab:hover {
    background: rgba(0,120,212,0.06);
    color: var(--text, #24243a);
}
.SelectionsMenu_ItemActions .ItemActionsTab.state-active {
    color: var(--primaryColor, #0078d4);
    border-bottom-color: var(--primaryColor, #0078d4);
}
.SelectionsMenu_ItemActions .ItemActionsTab:focus-visible {
    outline: 2px solid rgba(0,120,212,0.5);
    outline-offset: -2px;
}
.SelectionsMenu_ItemActions .ItemActionsTabIcon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}
.SelectionsMenu_ItemActions .ItemActionsTabIcon svg { width: 20px; height: 20px; }
.SelectionsMenu_ItemActions .ItemActionsTabLabel {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* Count → notification badge in the tab's top-right corner (mobile app-icon feel) */
.SelectionsMenu_ItemActions .ItemActionsTabCount {
    position: absolute;
    top: 3px;
    right: 6px;
    min-width: 15px;
    padding: 1px 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: rgba(15,23,42,0.10);
    color: var(--text-muted, #6f7584);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
}
.SelectionsMenu_ItemActions .ItemActionsTabCount:empty { display: none; }
.SelectionsMenu_ItemActions .ItemActionsTab.state-active .ItemActionsTabCount {
    background: rgba(0,120,212,0.16);
    color: var(--primaryColor, #0078d4);
}

/* Admin (Yönetici) tab — power surface, purple accent */
.SelectionsMenu_ItemActions .ItemActionsTab[data-tab-group="design"].state-active {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
}
.SelectionsMenu_ItemActions .ItemActionsTab[data-tab-group="design"].state-active .ItemActionsTabCount {
    background: rgba(124,58,237,0.14);
    color: #7c3aed;
}

/* ── Tab bodies (only the active panel is shown; it scrolls internally) ────── */
.SelectionsMenu_ItemActions .ItemActionsTabBodies {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px 6px 6px;
}
.SelectionsMenu_ItemActions .ItemActionsTabPanel { display: none; }
.SelectionsMenu_ItemActions .ItemActionsTabPanel.state-active { display: block; }
.SelectionsMenu_ItemActions .ItemActionsGuide {
    margin: 0 2px 8px;
    padding: 8px 9px;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.18);
    color: #475569;
    font-size: 11.5px;
    line-height: 1.35;
}

/* Slim, unobtrusive scrollbar for tall panels */
.SelectionsMenu_ItemActions .ItemActionsTabBodies::-webkit-scrollbar { width: 8px; }
.SelectionsMenu_ItemActions .ItemActionsTabBodies::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.16); border-radius: 8px; border: 2px solid transparent; background-clip: content-box;
}
.SelectionsMenu_ItemActions .ItemActionsTabBodies::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.28); background-clip: content-box; }

/* ── Button rows ─────────────────────────────────────────────────────────── */
.SelectionsMenu_ItemActions .ItemActions {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.SelectionsMenu_ItemActions .ItemActions > a {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 9px;
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text, #24243a);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: background-color 0.12s ease, padding-left 0.12s ease, color 0.12s ease;
    white-space: nowrap;
    text-align: left;
}
.SelectionsMenu_ItemActions .ItemActions > a:hover {
    background-color: rgba(0,120,212,0.10);
    padding-left: 10px;
}
.SelectionsMenu_ItemActions .ItemActions > a:active {
    background-color: rgba(0,120,212,0.16);
}
.SelectionsMenu_ItemActions .ItemActions > a > .ImageSpan,
.SelectionsMenu_ItemActions .ItemActions > a > [class*="icon-"],
.SelectionsMenu_ItemActions .ItemActions > a svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.82;
}
/* NOTE: a global `.ItemActions a .ButtonText { display:flex; justify-content:center }`
   makes this a FLEX box, so text-align is inert — the label is centered by
   justify-content. Override justify-content (not just text-align) to force left. */
.SelectionsMenu_ItemActions .ItemActions > a > .ButtonText {
    flex: 1 1 auto;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    padding: 0 !important;
    margin-right: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Icon-less actions fall back to icon-Dot — render it as a small, muted alignment
   bullet so the row still lines up with icon rows without a heavy black dot. */
.SelectionsMenu_ItemActions .ItemActions > a > .icon-Dot {
    font-size: 0 !important;
    position: relative;
    opacity: 1;
}
.SelectionsMenu_ItemActions .ItemActions > a > .icon-Dot::before {
    content: "";
    display: block;
    width: 5px; height: 5px;
    margin: auto;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.28;
}
.SelectionsMenu_ItemActions .ItemActions > a > .icon-Dot svg { width: 5px !important; height: 5px !important; opacity: 0.3; }

/* Admin (Yönetici) panel rows — subtle purple hover to match the tab accent */
.SelectionsMenu_ItemActions .ItemActionsTabPanel[data-tab-group="design"] .ItemActions > a:hover {
    background-color: rgba(124,58,237,0.10);
    color: #6d28d9;
}

/* ── Dark theme ──────────────────────────────────────────────────────────── */
.Theme_Dark .SelectionsMenu.SelectionsMenu_ItemActions {
    border-color: rgba(255,255,255,0.10);
    background: #1e1f2a !important;
}
.Theme_Dark .SelectionsMenu_ItemActions .ItemActionsTitle {
    color: #ececf5;
}
.Theme_Dark .SelectionsMenu_ItemActions .ItemActionsTabs {
    border-bottom-color: rgba(255,255,255,0.10);
}
.Theme_Dark .SelectionsMenu_ItemActions .ItemActionsTab {
    color: #9a9ab0;
}
.Theme_Dark .SelectionsMenu_ItemActions .ItemActionsTab:hover {
    background: rgba(90,160,255,0.10);
    color: #ececf5;
}
.Theme_Dark .SelectionsMenu_ItemActions .ItemActionsTab.state-active {
    color: #6db0ff;
    border-bottom-color: #6db0ff;
}
.Theme_Dark .SelectionsMenu_ItemActions .ItemActionsTabCount {
    background: rgba(255,255,255,0.10);
    color: #b7b8c8;
}
.Theme_Dark .SelectionsMenu_ItemActions .ItemActionsTab.state-active .ItemActionsTabCount {
    background: rgba(90,160,255,0.20);
    color: #9cc7ff;
}
.Theme_Dark .SelectionsMenu_ItemActions .ItemActionsTab[data-tab-group="design"].state-active {
    color: #b794f6;
    border-bottom-color: #b794f6;
}
.Theme_Dark .SelectionsMenu_ItemActions .ItemActionsTab[data-tab-group="design"].state-active .ItemActionsTabCount {
    background: rgba(183,148,246,0.20);
    color: #d6bcfa;
}
.Theme_Dark .SelectionsMenu_ItemActions .ItemActions > a {
    color: #d6d6e6;
}
.Theme_Dark .SelectionsMenu_ItemActions .ItemActions > a:hover {
    background-color: rgba(90,160,255,0.16);
}
.Theme_Dark .SelectionsMenu_ItemActions .ItemActionsTabPanel[data-tab-group="design"] .ItemActions > a:hover {
    background-color: rgba(183,148,246,0.16);
    color: #e9d8fd;
}
.Theme_Dark .SelectionsMenu_ItemActions .ItemActionsTabBodies::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); background-clip: content-box; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .SelectionsMenu.SelectionsMenu_ItemActions {
        width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 16px) !important;
        border-radius: 10px;
    }
    .SelectionsMenu_ItemActions .ItemActionsTab {
        font-size: 12px;
        padding: 9px 7px 10px;
    }
    .SelectionsMenu_ItemActions .ItemActions > a { min-height: 40px; font-size: 14.5px; }
}
/* ============================================================================
   ITEMVIEW KART SISTEMI  —  post-Meta katman (zz-*)
   2026-08-26
   ============================================================================
   NEDEN BU DOSYA VAR (olculdu: OUTPUT/361.xml + Framework/css + Framework/js):

     EntityTypeView[@ItemView]            6.102   kart her yerde
     EntityTypeView[@ItemFlow]                9   akis mekanizmasi KULLANILMIYOR
     Action[@Width] / Action[@Height]         0   ve JS'te TUKETICISI de 0 (olu oznitelik)
     361pro.css icinde .ItemView_* blogu    584   96'si elle "width: 300px" gibi SABIT px

   Yani kart boyutlandirmasinin SISTEMI yok: her kart tipi ilgili modulun CSS
   dosyasina elle yazilmis, duyarli olmayan, sabit piksel bir kuralla boyutlanmis.
   Sonuc: butun ItemView'ler pratikte TAM GENISLIK cizilir.

   KOK NEDEN (Meta katmani):  .ItemView { width: 100%; min-width: 64px }
   Kap ise ZATEN sarmali bir flex satiri:
        .ViewBody { display:flex; flex-direction:row; flex-wrap:wrap }
   => Kaba dokunmaya GEREK YOK. Kartin width:100% kurali kalkinca izgara kendiliginden olusur.

   TASARIM KARARLARI
     1. TAMAMEN OPT-IN. Bu dosya .ItemView varsayilanini DEGISTIRMEZ; sinif yazilmayan
        6.102 mevcut kullanim birebir eskisi gibi cizilir (sifir regresyon).
     2. Kanal = Action/@Class (olculdu: et.js:5073 + m.js action.Class -> kart div'ine yazilir).
        Action/@Width ve @Height KULLANILMAZ — tuketicisi yok, olu oznitelik.
     3. Kart ICI yerlesim = FieldSet/FieldView'in kendi Atom ozellikleri
        (Class · Alignment · VAlignment · Size · Height · StyleField — atom.js:600-660).
     4. Olcu birimi MOBIL GENISLIKTIR. Kart adindaki sayi = "kac tanesi bir mobil
        genislige yan yana sigar". Card_2 = MobilWidth/2, Card_2x = MobilWidth*2.
     5. flex-grow:1 — satirdaki son kart yetim kalmaz, sagda sahipsiz bosluk olusmaz
        (platformun olculmus sozlesmesi: zz-mobil-kpi-izgara.css "yetim kart uzar").
        Sabit boyut isteyen katalog icin opt-out: .CardFixed
     6. Is mantigi YOK: sektor/kiraci/modul adi bu dosyada gecmez.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKENLAR */
:root {
    /* Mobil referans genisligi — tum kart paylarinin taban birimi */
    --kartMobil: 390px;
    --kartAralik: var(--space-2);          /* 8px  — kartlar arasi */
    --kartDolgu: var(--space-3);           /* 12px — kart ici nefes */
    --kartRadius: var(--radius-lg);        /* 12px */
    --kartGolge: var(--shadow-sm);
    --kartGolgeHover: var(--shadow-md);
    --kartZemin: var(--singleItemBackColor, #ffffff);
    --kartKenar: var(--border1, solid 1px rgba(127, 127, 127, .18));
    --kartVurgu: var(--primaryAA, #007cc2);

    /* Paylar: mobil genislik / N  (aralik dusulmus) */
    --kart-4:  calc(var(--kartMobil) / 4 - var(--kartAralik));
    --kart-3:  calc(var(--kartMobil) / 3 - var(--kartAralik));
    --kart-2:  calc(var(--kartMobil) / 2 - var(--kartAralik));
    --kart-1:  calc(var(--kartMobil)     - var(--kartAralik));
    --kart-2x: calc(var(--kartMobil) * 2 - var(--kartAralik));
}

@media (max-width: 767px) {
    :root {
        /* Mobilde referans = gercek kadraj; boylece Card_2 tam olarak yarim ekrandir */
        --kartMobil: calc(100vw - var(--space-4));
    }
}

/* ------------------------------------------------- 2. IZGARA KABI (opt-in) */
/* EntityTypeView/@Class="ItemGrid"  ->  et.js:13638 AddClass(container, OBJECT.Class) */
/* ⛔⛔ KAP ICIN **YON DAYATMASI YAZILMAZ** — AKIS PLATFORMUNDUR.
   Olculmus ders (361-content/references/fieldset-itemview-policy.md §4a, dort turluk
   bedel): `.ViewBody` ZATEN `display:flex; flex-direction:row; flex-wrap:wrap;
   align-content:flex-start`. Bunlari yeniden ilan etmek en iyi ihtimalle ETKISIZDIR
   (ve etkisiz kural, kotu kuraldan farksizdir); `flex-direction:column` dayatmasi ise
   platformun `wrap`'iyle carpisip SUTUN SARMASI uretir (olculdu: 4. kart x=1474, ekran disi).
   ⇒ Burada YALNIZ platform varsayilanindan AYRILAN uc bildirim var. */
.ViewBody.ItemGrid,
.ViewBody_ItemView.ItemGrid,
.EntityTypeView.ItemGrid > .ViewBody,
.EntityTypeView.ItemGrid .ViewBody_ItemView {
    /* Kart izgarasi SOLDAN hizalanir: okuma sirasi + Gestalt sureklilik.
       (Platform varsayilani `center` — tek kart ortada asili kalir, solda sahipsiz bosluk.) */
    justify-content: flex-start;
    gap: var(--kartAralik);
    padding: var(--kartAralik);
    box-sizing: border-box;
}

/* Kartlar arasi bosluk gap ile verilir; eski margin cift bosluk uretmesin */
.ItemGrid > .ItemView { margin: 0; }

/* --------------------------------------------------------- 3. PAY (SPAN) */
/* Sayi = kac tanesi BIR MOBIL GENISLIGE yan yana sigar */
.ItemView.Card_4,
.ItemView.Card_3,
.ItemView.Card_2,
.ItemView.Card_1,
.ItemView.Card_2x {
    width: auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.ItemView.Card_4  { flex: 1 1 var(--kart-4); }
.ItemView.Card_3  { flex: 1 1 var(--kart-3); }
.ItemView.Card_2  { flex: 1 1 var(--kart-2); }
.ItemView.Card_1  { flex: 1 1 var(--kart-1); }
.ItemView.Card_2x { flex: 1 1 var(--kart-2x); }

/* Mobilde 2x bir mobil genisligi asamaz — yatay tasma = ULASILAMAZ icerik */
@media (max-width: 767px) {
    .ItemView.Card_2x { flex-basis: var(--kart-1); }
}

/* Sabit boyut (katalog kartlari): satirdaki son kart BUYUMEZ */
.ItemView.CardFixed { flex-grow: 0; }

/* --------------------------------------------- 4. YUKSEKLIK / EN-BOY ORANI */
.ItemView.CardR_1_1  { aspect-ratio: 1 / 1; }
.ItemView.CardR_4_3  { aspect-ratio: 4 / 3; }
.ItemView.CardR_3_4  { aspect-ratio: 3 / 4; }
.ItemView.CardR_16_9 { aspect-ratio: 16 / 9; }
.ItemView.CardR_2_1  { aspect-ratio: 2 / 1; }

/* Oran verilmis kartta icerik tasarsa kart buyumez; ic yuva kaydirir */
.ItemView[class*="CardR_"] { overflow: hidden; }

/* Sabit yukseklik basamaklari — bosluk merdiveniyle uyumlu */
.ItemView.CardH_XS { min-height: 3rem; }
.ItemView.CardH_S  { min-height: 5rem; }
.ItemView.CardH_M  { min-height: 8rem; }
.ItemView.CardH_L  { min-height: 12rem; }
.ItemView.CardH_XL { min-height: 16rem; }

/* ------------------------------------------------- 5. KABUK (M3 uc varyant) */
.ItemView.CardElevated,
.ItemView.CardFilled,
.ItemView.CardOutlined {
    border-radius: var(--kartRadius);
    padding: var(--kartDolgu);
    box-sizing: border-box;
    transition: box-shadow var(--transition-fast);
}

.ItemView.CardElevated { background: var(--kartZemin); border: 0; box-shadow: var(--kartGolge); }
.ItemView.CardFilled   { background: rgba(127, 127, 127, .10); border: 0; box-shadow: none; }
.ItemView.CardOutlined { background: var(--kartZemin); border: var(--kartKenar); box-shadow: none; }

.ItemView.CardElevated:hover { box-shadow: var(--kartGolgeHover); }
.ItemView.CardOutlined:hover { border-color: var(--kartVurgu); }

/* Tiklanabilir kart parmak isareti — dokunma hedefi >=44px */
.ItemView.CardClickable { cursor: pointer; min-height: 44px; }
.ItemView.CardClickable:focus-visible { outline: 2px solid var(--kartVurgu); outline-offset: 2px; }

/* -------------------------------------------------------- 6. YOGUNLUK KIPI */
.ItemView.CardMini  { --kartDolgu: var(--space-2); font-size: var(--text-sm); }
.ItemView.CardMicro { --kartDolgu: var(--space-1); font-size: var(--text-xs); --kartRadius: var(--radius-sm); }

/* ------------------------------------------- 7. KART ANATOMISI (FieldSet/@Class) */
/* Dikey kart iskeleti: medya -> ustyazi -> baslik -> meta -> gosterge -> aksiyon */
.ItemView.CardStack { flex-direction: column; align-items: stretch; gap: var(--space-1); }

.ItemView .CardMedia {
    width: 100%;
    overflow: hidden;
    border-radius: calc(var(--kartRadius) - 2px);
    background: rgba(127, 127, 127, .12);
    flex: 0 0 auto;
}
.ItemView .CardMedia img,
.ItemView .CardMedia .FieldValue img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ItemView .CardMedia_16_9 { aspect-ratio: 16 / 9; }
.ItemView .CardMedia_4_3  { aspect-ratio: 4 / 3; }
.ItemView .CardMedia_1_1  { aspect-ratio: 1 / 1; }

/* Ustyazi: kategori / tur / kod — kucuk, sakin, harf arali */
.ItemView .CardOverline {
    font-size: var(--text-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    /* ⛔ opacity ILE sonumleme yok — AA'yi matematiksel olarak ulasilamaz kilar
       (olculdu: 6.96:1 -> 2.38:1). Ikincillik boyut + buyuk harf + harf araligi ile. */
    line-height: 1.3;
}

/* Baslik: kartin TEK birincil metni; iki satirda kesilir */
.ItemView .CardTitle {
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ItemView .CardSubtitle { font-size: var(--text-sm); line-height: 1.35; }

/* Meta satiri: tarih / sahip / birim — yan yana, sarmali */
.ItemView .CardMeta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-xs);
    align-items: center;
}

/* Kartin sayisal kahramani (metrik / fiyat) */
.ItemView .CardValue {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Gostergeler: durum cipleri, rozetler, ilerleme */
.ItemView .CardIndicators { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }

/* Aksiyonlar: mini butonlar — kartin ALTINDA, saga hizali, dokunulabilir */
.ItemView .CardActions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: flex-end;
    margin-top: auto;                 /* her zaman kartin dibine oturur */
    padding-top: var(--space-2);
}
.ItemView .CardActions .Button,
.ItemView .CardActions button {
    min-height: 32px;
    min-width: 32px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
}
/* Yalniz ikonlu mini buton — dokunma hedefi korunur */
.ItemView .CardActions.IconOnly .Button { min-width: 44px; min-height: 44px; padding: 0; }

/* Sol renk seridi: durum/onem — semantik renk StyleField ile veriden gelir */
.ItemView.CardStripe { border-left: 4px solid var(--kartVurgu); padding-left: var(--space-3); }

/* ------------------------------------------ 8. KOSE YERLESIMI (3x3 alan izgarasi) */
/* "Field'lar kosede, ortada, farkli alignmentlarla olabilir." */
.ItemView.CornerCard {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "tl tc tr"
        "ml mc mr"
        "bl bc br";
    gap: var(--space-1);
    padding: var(--kartDolgu);
    box-sizing: border-box;
}
.ItemView.CornerCard > .At_TL { grid-area: tl; justify-self: start;  align-self: start;  }
.ItemView.CornerCard > .At_TC { grid-area: tc; justify-self: center; align-self: start;  }
.ItemView.CornerCard > .At_TR { grid-area: tr; justify-self: end;    align-self: start;  }
.ItemView.CornerCard > .At_ML { grid-area: ml; justify-self: start;  align-self: center; }
.ItemView.CornerCard > .At_MC { grid-area: mc; justify-self: center; align-self: center; }
.ItemView.CornerCard > .At_MR { grid-area: mr; justify-self: end;    align-self: center; }
.ItemView.CornerCard > .At_BL { grid-area: bl; justify-self: start;  align-self: end;    }
.ItemView.CornerCard > .At_BC { grid-area: bc; justify-self: center; align-self: end;    }
.ItemView.CornerCard > .At_BR { grid-area: br; justify-self: end;    align-self: end;    }

/* Bos kose yuvasi yer kaplamasin (yukseklik 0 gap'i durdurmaz — olculmus kural) */
.ItemView.CornerCard > [class*="At_"]:empty { display: none; }

/* Medya tum karti kaplasin, kose yuvalari UZERINE binsin */
.ItemView.CornerCard.CardMediaFill { position: relative; }
.ItemView.CornerCard.CardMediaFill > .CardMedia {
    grid-area: 1 / 1 / 4 / 4;
    height: 100%;
    border-radius: inherit;
}
.ItemView.CornerCard.CardMediaFill > [class*="At_"] {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    color: #fff;
}

/* ======================================================================== */
/*  9. KART TIPI HAZIR AYARLARI — Action/@Class'a TEK SINIF yazilir.        */
/*     Her tip: pay + kabuk + ic yerlesim. Modifierlarla ezilebilir.        */
/* ======================================================================== */

/* 9.1  RowCard — liste satirinin kart karsiligi; tekduze kayit, hizli tarama */
.ItemView.RowCard {
    flex: 1 1 var(--kart-1);
    width: auto; min-width: 0; max-width: 100%;
    flex-direction: row; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--kartDolgu);
    border-bottom: var(--kartKenar);
    box-sizing: border-box;
}
.ItemView.RowCard .CardTitle { -webkit-line-clamp: 1; }

/* 9.2  ProductCard — katalog / pazaryeri: gorsel -> baslik -> fiyat -> aksiyon */
.ItemView.ProductCard {
    flex: 1 1 var(--kart-2);
    width: auto; min-width: 0; max-width: 100%;
    flex-direction: column; align-items: stretch; gap: var(--space-2);
    background: var(--kartZemin); border: var(--kartKenar);
    border-radius: var(--kartRadius); padding: var(--kartDolgu);
    box-sizing: border-box;
}
.ItemView.ProductCard .CardMedia { aspect-ratio: 4 / 3; }
.ItemView.ProductCard .CardValue { font-size: var(--text-xl); }

/* 9.3  MediaCard — gorsel baskin icerik (haber, galeri, egitim) */
.ItemView.MediaCard {
    flex: 1 1 var(--kart-2);
    width: auto; min-width: 0; max-width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    border-radius: var(--kartRadius); overflow: hidden;
    background: var(--kartZemin); box-shadow: var(--kartGolge);
    box-sizing: border-box;
}
.ItemView.MediaCard .CardMedia { aspect-ratio: 16 / 9; border-radius: 0; }
.ItemView.MediaCard > *:not(.CardMedia) { padding: 0 var(--kartDolgu); }
.ItemView.MediaCard > *:last-child { padding-bottom: var(--kartDolgu); }

/* 9.4  MetricCard — tek sayi + etiket + trend (AggregateView varsa ONU kullan) */
.ItemView.MetricCard {
    flex: 1 1 var(--kart-2);
    width: auto; min-width: 0; max-width: 100%;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: var(--space-1); min-height: 5rem;
    background: var(--kartZemin); border: var(--kartKenar);
    border-radius: var(--kartRadius); padding: var(--kartDolgu);
    box-sizing: border-box;
}
.ItemView.MetricCard .CardValue { font-size: var(--text-3xl); }

/* 9.5  PersonCard — rehber, ekip, atama: avatar + ad + rol + iletisim */
.ItemView.PersonCard {
    flex: 1 1 var(--kart-2);
    width: auto; min-width: 0; max-width: 100%;
    flex-direction: row; align-items: center; gap: var(--space-3);
    background: var(--kartZemin); border: var(--kartKenar);
    border-radius: var(--kartRadius); padding: var(--kartDolgu);
    box-sizing: border-box;
}
.ItemView.PersonCard .CardMedia {
    width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: var(--radius-full); aspect-ratio: 1 / 1;
}
.ItemView.PersonCard .CardTitle { -webkit-line-clamp: 1; }

/* 9.6  TaskCard — is/gorev: Kanban ve "islerim" listelerinin kart govdesi */
.ItemView.TaskCard {
    flex: 1 1 var(--kart-1);
    width: auto; min-width: 0; max-width: 100%;
    flex-direction: column; align-items: stretch; gap: var(--space-2);
    background: var(--kartZemin); border: var(--kartKenar);
    border-left: 4px solid var(--kartVurgu);
    border-radius: var(--kartRadius); padding: var(--kartDolgu);
    box-sizing: border-box;
}

/* 9.7  StatusTile — kare durum karesi: ikon + sayi + durum, hizli filtre girisi */
.ItemView.StatusTile {
    flex: 1 1 var(--kart-3);
    width: auto; min-width: 0; max-width: 100%;
    aspect-ratio: 1 / 1;
    flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-1); text-align: center;
    background: var(--kartZemin); border: var(--kartKenar);
    border-radius: var(--kartRadius); padding: var(--space-2);
    box-sizing: border-box;
}
.ItemView.StatusTile .CardValue { font-size: var(--text-2xl); }
.ItemView.StatusTile .CardTitle { font-size: var(--text-xs); font-weight: 500; -webkit-line-clamp: 2; }

/* 9.8  ChipCard — mikro kart: etiket, secim, alt menu ogesi */
.ItemView.ChipCard {
    flex: 0 1 auto;
    width: auto; min-width: 0; max-width: 100%;
    flex-direction: row; align-items: center; gap: var(--space-1);
    min-height: 32px; padding: 0 var(--space-3);
    border-radius: var(--radius-full); border: var(--kartKenar);
    background: var(--kartZemin); font-size: var(--text-xs); white-space: nowrap;
    box-sizing: border-box;
}

/* 9.9  HeroCard — one cikan tek kayit: solda gorsel, sagda icerik */
.ItemView.HeroCard {
    flex: 1 1 var(--kart-2x);
    width: auto; min-width: 0; max-width: 100%;
    flex-direction: row; align-items: stretch; gap: var(--kartDolgu);
    background: var(--kartZemin); border-radius: var(--kartRadius);
    box-shadow: var(--kartGolge); overflow: hidden; padding: 0;
    box-sizing: border-box;
}
.ItemView.HeroCard .CardMedia { flex: 0 0 40%; border-radius: 0; height: auto; }
.ItemView.HeroCard > *:not(.CardMedia) { padding: var(--kartDolgu) var(--kartDolgu) var(--kartDolgu) 0; }
@media (max-width: 767px) {
    .ItemView.HeroCard { flex-direction: column; flex-basis: var(--kart-1); }
    .ItemView.HeroCard .CardMedia { flex: 0 0 auto; aspect-ratio: 16 / 9; }
    .ItemView.HeroCard > *:not(.CardMedia) { padding: 0 var(--kartDolgu) var(--kartDolgu); }
}

/* 9.10 ApprovalCard — bekleyen onay: ozet + Onayla/Reddet (Tespit -> Tedavi) */
.ItemView.ApprovalCard {
    flex: 1 1 var(--kart-1);
    width: auto; min-width: 0; max-width: 100%;
    flex-direction: column; align-items: stretch; gap: var(--space-2);
    background: var(--kartZemin); border: var(--kartKenar);
    border-radius: var(--kartRadius); padding: var(--kartDolgu);
    box-sizing: border-box;
}
.ItemView.ApprovalCard .CardActions { justify-content: flex-end; border-top: var(--kartKenar); }

/* 9.11 EventCard — zaman cizelgesi ogesi: solda tarih rayi */
.ItemView.EventCard {
    flex: 1 1 var(--kart-1);
    width: auto; min-width: 0; max-width: 100%;
    flex-direction: row; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-2) 0; box-sizing: border-box;
}
.ItemView.EventCard > *:first-child {
    flex: 0 0 4.5rem; text-align: right;
    font-size: var(--text-xs); font-variant-numeric: tabular-nums;
}

/* 9.12 CalendarChip — gun hucresine sigan mikro kart */
.ItemView.CalendarChip {
    flex: 1 1 100%;
    width: auto; min-width: 0; max-width: 100%;
    flex-direction: row; align-items: center; gap: var(--space-1);
    min-height: 20px; padding: 1px var(--space-1);
    font-size: var(--text-xs); line-height: 1.2;
    border-radius: var(--radius-sm); border-left: 3px solid var(--kartVurgu);
    background: rgba(127, 127, 127, .10);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    box-sizing: border-box;
}

/* 9.13 FileCard — dosya/ek izgarasi: tur ikonu + ad + boyut */
.ItemView.FileCard {
    flex: 1 1 var(--kart-3);
    width: auto; min-width: 0; max-width: 100%;
    flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-1); text-align: center; min-height: 7rem;
    background: var(--kartZemin); border: var(--kartKenar);
    border-radius: var(--kartRadius); padding: var(--space-2);
    box-sizing: border-box;
}
.ItemView.FileCard .CardTitle { font-size: var(--text-xs); -webkit-line-clamp: 2; word-break: break-word; }

/* 9.14 MapCard — harita baloncugu: dar, kompakt, tek aksiyon */
.ItemView.MapCard {
    flex: 0 0 auto;
    width: auto; min-width: 0; max-width: min(280px, 80vw);
    flex-direction: column; align-items: stretch; gap: var(--space-1);
    background: var(--kartZemin); border-radius: var(--kartRadius);
    box-shadow: var(--kartGolgeHover); padding: var(--space-2);
    box-sizing: border-box;
}

/* 9.15 SpecCard — etiket/deger ciftleri: karsilastirma ve teknik ozellik */
.ItemView.SpecCard {
    flex: 1 1 var(--kart-2);
    width: auto; min-width: 0; max-width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--kartZemin); border: var(--kartKenar);
    border-radius: var(--kartRadius); padding: var(--space-2) var(--kartDolgu);
    box-sizing: border-box;
}
.ItemView.SpecCard .Field {
    display: flex; justify-content: space-between; gap: var(--space-2);
    padding: var(--space-1) 0; border-bottom: 1px dashed rgba(127, 127, 127, .20);
}
.ItemView.SpecCard .Field:last-child { border-bottom: 0; }

/* 9.16 ProgressCard — hedefe gore ilerleme (FieldView ViewType=HBar/Gauge180 ile) */
.ItemView.ProgressCard {
    flex: 1 1 var(--kart-2);
    width: auto; min-width: 0; max-width: 100%;
    flex-direction: column; align-items: stretch; gap: var(--space-2);
    background: var(--kartZemin); border: var(--kartKenar);
    border-radius: var(--kartRadius); padding: var(--kartDolgu);
    box-sizing: border-box;
}

/* 9.17 AlertCard — dikkat isteyen kayit: renk seridi + tek net aksiyon */
.ItemView.AlertCard {
    flex: 1 1 var(--kart-1);
    width: auto; min-width: 0; max-width: 100%;
    flex-direction: row; align-items: center; gap: var(--space-3);
    background: var(--kartZemin);
    border: var(--kartKenar); border-left: 4px solid var(--kartVurgu);
    border-radius: var(--kartRadius); padding: var(--kartDolgu);
    box-sizing: border-box;
}

/* 9.18 GalleryTile — yalniz gorsel; baslik uzerine biner */
.ItemView.GalleryTile {
    flex: 1 1 var(--kart-3);
    width: auto; min-width: 0; max-width: 100%;
    aspect-ratio: 1 / 1; position: relative; padding: 0;
    border-radius: var(--kartRadius); overflow: hidden;
    box-sizing: border-box;
}
.ItemView.GalleryTile .CardMedia { position: absolute; inset: 0; height: 100%; border-radius: 0; }
.ItemView.GalleryTile .CardTitle {
    position: absolute; inset: auto 0 0 0; z-index: 1;
    padding: var(--space-4) var(--space-2) var(--space-2);
    color: #fff; font-size: var(--text-xs);
    background: linear-gradient(to top, rgba(0, 0, 0, .68), rgba(0, 0, 0, 0));
}

/* ------------------------------------------------------ 10. ORTAK GUVENLIKLER */
/* Kart tipi verilmis her ItemView, kap disina TASMAZ (ULASILAMAZ icerik yasagi) */
.ItemView[class*="Card"] > * { min-width: 0; }

/* Bos yuva bosluk uretmesin — yukseklik 0 gap'i durdurmaz (olculmus kural) */
.ItemView[class*="Card"] .CardMedia:empty,
.ItemView[class*="Card"] .CardMeta:empty,
.ItemView[class*="Card"] .CardIndicators:empty,
.ItemView[class*="Card"] .CardActions:empty { display: none; }

/* Kartta etiket degil DEGER okunur; istisna icin FieldView/@HideLabel="False" */
.ItemView.CardStack .CardTitle > .FieldLabel,
.ItemView.CardStack .CardValue > .FieldLabel { display: none; }

/* Yazdirmada golge ve hover yok */
@media print {
    .ItemView[class*="Card"] { box-shadow: none !important; border: 1px solid #ccc !important; }
}


/* ========================================================================== */
/*  10. KART ICI ALAN YERLESIMI  —  OPT-IN (2026-08-27)                       */
/*                                                                            */
/*  NEDEN: gercek ekran kareleriyle olculdu — kart sistemine katilan kartlar   */
/*  dogru genislikte ve dogru sayida ciziliyordu ama ICLERI FORM gibiydi:      */
/*     · her `.Field` `border-bottom: dashed 1px` tasiyor -> tek kartta 4      */
/*       anlamsiz ayrac                                                       */
/*     · `.FieldLabel` 26 px + `.FieldValue` 32 px = alan basina 70 px         */
/*       (gerekli ~34 px) -> kart iki katina cikiyor                          */
/*     · Choice degeri duz metin -> durum/kategori goruntude kayboluyor        */
/*                                                                            */
/*  ⛔ KAPSAM BILEREK DAR: yalnizca bir `Card_*` PAY SINIFI yazmis kartlar.    */
/*     Sinif yazmayan 6.102 mevcut kullanim BIREBIR eskisi gibi cizilir        */
/*     (dosyanin 1. tasarim karari: sifir regresyon). Karta pay sinifi yazmak  */
/*     "bu bir KARTTIR" beyanidir; kart-grade ic yerlesim onunla gelir.        */
/* ========================================================================== */

/* 10.1 Alan kabi: ayrac YOK, nefes 2 px. Ayrac kart ICINDE ancak iki farkli
       bilgi KUMESINI ayirmak icin kullanilir (baslik / meta / ozet) — her
       alanin altina cizgi koymak gurultudur. */
.ItemView[class*="Card_"] .Field {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    gap: 2px;
}

/* 10.2 Etiket: ustyazi karakteri — kucuk, sakin, TEK satir yuksekliginde.
       Platform varsayilani etiketi deger kadar buyutup alani iki katina cikarir. */
.ItemView[class*="Card_"] .FieldLabel,
.ItemView[class*="Card_"] .FieldLabel > a {
    min-height: 0;
    padding: 0;
    margin: 0;
    line-height: 1.25;
    font-size: var(--text-xs);
    letter-spacing: .02em;
    text-transform: uppercase;
    /* ⛔ OPAKLIK ILE SONUMLEME YASAK (olculmus regresyon 2026-08-27): `opacity:.72`
       etiketi 6.96:1'den **2.38:1**'e dusurdu ve tek turda 230 WCAG bulgusu uretti.
       Opaklik ATA zincirinde carpilir ve AA matematiksel olarak ulasilamaz hale gelir.
       Ikincillik zaten BOYUT (xs) + BUYUK HARF + harf araligi ile veriliyor; sonumleme
       gerekiyorsa RENKLE yapilir, opaklikla DEGIL. */
}

/* 10.3 Choice degeri = ROZET.
       ⛔ OLCULDU (2026-08-27): `.Choices` sinifi YALNIZ **MultiChoice** dalinda eklenir
       (field-edit.js:1137). DUZ `Choice` degeri `<a class="InputSpan"><a>Deger</a></a>`
       olarak cizilir — canli DOM'da `.Choices` sayisi 0'di. Kanal bu yuzden `.InputSpan`.
       Semantik renk gerekiyorsa `Choice/@Class` (Bool/default dalinda
       AddClass(fieldvalue, c.Class)) ile verilir; yeni sinif icat edilmez. */
.ItemView[class*="Card_"] .FieldChoice .FieldValue > .InputSpan,
.ItemView[class*="Card_"] .FieldChoice .FieldValue .Choices {
    display: inline-flex;
    align-items: center;
    /* ⛔ ROZET ICERIGE GORE DARALIR: `.FieldValue` bir flex kabidir; taban `flex:1`
       rozeti KOLON GENISLIGI kadar uzatir (olculdu: 390 px'lik "Yuksek" hapi).
       align-self + flex:0 0 auto rozeti kendi metnine oturtur. */
    align-self: flex-start;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    gap: var(--space-1);
    padding: 2px 9px;
    border-radius: var(--radius-full);
    background: rgba(127, 127, 127, .12);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

/* 10.4 Bool degeri de bir rozettir (Choices ile tanimlanmissa ayni yolu izler). */
.ItemView[class*="Card_"] .FieldBool .FieldValue > .InputSpan,
.ItemView[class*="Card_"] .FieldBoolean .FieldValue > .InputSpan {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    flex: 0 0 auto;
    width: auto;
    gap: var(--space-1);
    padding: 2px 9px;
    border-radius: var(--radius-full);
    background: rgba(127, 127, 127, .12);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.5;
}

/* 10.5 Sayisal degerler hizali okunur (tabular) — para/yuzde sutunlari zipzip olmasin. */
.ItemView[class*="Card_"] .FieldNumber .FieldValue,
.ItemView[class*="Card_"] .FieldMoney .FieldValue { font-variant-numeric: tabular-nums; }

/* 10.6 Meta satiri: alanlar ESIT paya boluner — yetim alan (saginda 500 px bosluk)
       yerlesim hatasidir. FieldSet FlexRow zaten flex; burada yalniz taban pay verilir. */
.ItemView[class*="Card_"] .FieldSet[class*="DirectionFlexRow"] > .Field { flex: 1 1 0; min-width: 0; }
/* ============================================================================
   GENUI T29 — KPI içgörü kartı (AggregateView hero chip'leri)
   post-Meta zz-* tier'da yüklenir (Meta varsayılanlarını geçebilsin diye).
   JS: a-aggregate.js ($DrawAggregate + _updateAggregateSparkline). Bu dosya
   yalnız SINIF'ları stiller — JS asla inline CSS enjekte etmez.

   Üç parça:
     1) Skeleton yükleme  — .AggregateValueLoading (değer gelene dek pulse)
        + .AggregateValueReveal (ilk değer geldiğinde hafif fade)
     2) Sparkline/trend   — .AggregateSpark / .AggregateSparkDelta
     3) ✦ anomali notu    — .Aggregate.hasAnomaly > .AggregateAnomaly
   ============================================================================ */

/* ── 1) Skeleton yükleme ─────────────────────────────────────────────────── */
/* "-" metni DOM'da kalır ama saydamlaşır; ::before bir skeleton bar boyar.
   (Bu dosya canlı değilse chip yine "-" gösterir — regresyon yok.) */
.AggregateValue.AggregateValueLoading {
    color: transparent !important;
    position: relative;
    min-width: 2.2em;
    min-height: 0.95em;
    border-radius: 5px;
    overflow: hidden;
}
.AggregateValue.AggregateValueLoading::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background: linear-gradient(90deg,
        rgba(148, 163, 184, 0.16) 0%,
        rgba(148, 163, 184, 0.34) 50%,
        rgba(148, 163, 184, 0.16) 100%);
    background-size: 200% 100%;
    animation: aggSkeletonShimmer 1.15s ease-in-out infinite;
}
@keyframes aggSkeletonShimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* İlk gerçek değer geldiğinde hafif yukarı-fade. */
.AggregateValue.AggregateValueReveal {
    animation: aggValueReveal 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes aggValueReveal {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: none; }
}

/* ── 2) Sparkline + dönem-değişim oku — SIFIR-LAYOUT overlay (2026-07-02) ──
   Kullanıcı bulgusu: akış-içi spark/anomali chip boyutunu değiştirip sayfayı
   kaydırıyordu. Artık tüm içgörü tek absolute .AggInsight katmanında yaşar:
   ev sahibi kutunun ölçüsüne SIFIR etki, taşma yok, scroll yok. */
.AggInsightHost { position: relative; }
.AggInsight {
    position: absolute;
    inset: 0;
    pointer-events: none;        /* sayı/ok tıklanabilirliğini bozmaz */
    overflow: hidden;
    border-radius: inherit;
}
.AggregateSparkSvg {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 2px;
    width: 84%;
    height: 12px;
    display: block;
    opacity: 0.55;               /* arka katman — değerin altında kalır */
}
.AggregateSparkLine {
    fill: none;
    stroke: var(--ColorPrimary, #3b82f6);
    stroke-width: 1.4;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.AggregateSparkArea {
    fill: var(--ColorPrimary, #3b82f6);
    opacity: 0.12;
    stroke: none;
}
.AggregateSparkDot {
    fill: var(--ColorPrimary, #2563eb);
    stroke: var(--BackgroundColor, #fff);
    stroke-width: 0.8;
}

/* Dönem-değişim oku — overlay içinde sol-alt köşe rozeti (sayı sağa dayalı olduğu için rozet sol-altta, sıfır çakışma). */
.AggInsight .AggregateSparkDelta {
    position: absolute;
    bottom: 8px;
    left: 8px;
    pointer-events: auto;        /* tooltip için */
    /* 2026-09-08 — 9,5px -> 12px (WCAG). Ayni sinifin UCUNCU kaynagi; ilk ikisi
       zz-dashboard-flow.css (ee6650f5a) ve zz-kpi-tile.css`te kapatildi. */
    font-size: 12px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.4;
    opacity: 0.95;
    z-index: 2;
}
.Aggregate.hasAnomaly .AggInsight .AggregateSparkDelta {
    left: 24px;
}
.AggregateSparkDelta.AggregateTrendUp   { color: #047857; background: rgba(16, 185, 129, 0.14); }
.AggregateSparkDelta.AggregateTrendDown { color: #b91c1c; background: rgba(239, 68, 68, 0.14); }
.AggregateSparkDelta.AggregateTrendFlat { color: #475569; background: rgba(148, 163, 184, 0.18); }

/* ── 3) ✦ Anomali — sol-alt köşede minik rozet; açıklama tooltip'te ──────── */
/* Metin satırı YOK (chip'i büyütüp sardırıyordu); yalnız pulse'lı ✦ işareti. */
.AggInsight .AggregateAnomalyBadge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    pointer-events: auto;
    font-size: 11px;
    line-height: 1;
    cursor: help;
    animation: aggAnomPulse 2.4s ease-in-out infinite;
    z-index: 2;
}
.AggregateAnomalyBadge.AggregateAnomalyUp   { color: #10b981; }
.AggregateAnomalyBadge.AggregateAnomalyDown { color: #f59e0b; }
@keyframes aggAnomPulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* Anomali rozeti varken değerin rozet üzerine binmesini önle */
.Aggregate.hasAnomaly > .AggregateValue {
    margin-left: 16px !important;
}

/* ── Erişilebilirlik: hareket azalt tercihi ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .AggregateValue.AggregateValueLoading::before { animation: none; }
    .AggregateValue.AggregateValueReveal { animation: none; }
}
/* ============================================================================
   zz-kpi-tile.css — HERO KPI KUTUCUĞU (AggregateView)
   2026-08-18 · ölçüme dayalı · kullanıcı onaylı (çekirdek kapsam)

   NEDEN VAR: `AggregateView` hero KPI'ı ile nav rozeti AYNI `.Aggregate` sınıfını
   paylaşıyor ve çekirdekte yalnız rozete uygun kurallar var. Ölçüldü (makina/PLM,
   3 kırılım, `_scripts/olc-aggregate-tasarim.js`):

     · `itemstyles.css:3941` → `.Aggregate { opacity: .75 }`  ⇒ hero kart zemine
       karışıyor; etiket kontrastı 3.24:1 (WCAG AA eşiği 4.5) — ASIL SEBEP BUDUR.
     · değer 22.2px = 16.6pt; sektör ölçütü 28–44pt ⇒ hiyerarşi ~2× zayıf.
       değer/etiket oranı 1.93× (ölçüt ~3×) — kart "cevap" değil "paragraf" okunuyor.
     · kart 120×82px sabit; uzun Türkçe etiket (`CBAM KAPSAMINDA ÜRÜN`) kutuya
       sığmıyor (ölçüldü: scrollHeight > clientHeight).
     · etiket 82px kartın 35px'ini yiyor (satır tavanı yok).
     · dinlenme gölgesi `rgb(128,128,128) 0 0 4px` — kaydırmasız gri parıltı;
       tasarlanmamış, devralınmış.

   ⛔ KAPSAM — `.AggregateView.Aggregate` (İKİ yönlü ölçüldü):
        hero  9/9 taşıyor · nav rozeti 0/9 taşıyor
      `AggInsightHost` KULLANILMADI: hero'nun yalnız 6/9'unda vardı (ölçüldü) —
      ayırt edici sanılırsa kartların üçte biri kuralın dışında kalırdı.

   ⛔ BU DOSYA RENK KARARI VERMEZ. Zemin/marka rengi kiracıya ve banda göre değişir;
      kontrast düzeltmesi zemini bilen katmanda yapılır
      (`//Entity[@Name='<Modül>']/CSSSelectors`). Burada yalnız ŞEFFAFLIK, ÖLÇÜ,
      TİPOGRAFİ ÖLÇEĞİ, TAŞMA ve ERİŞİLEBİLİRLİK yapısı vardır — hepsi her
      kiracıda aynı yönde doğrudur.

   GERİ ALMA: bu dosyayı SİL + `rebuild_css`. Ekleyici (additive) bir katmandır,
   hiçbir mevcut kuralı değiştirmez.

   Yükleme sırası: `Domain.vb/BuildCoreRaw` → `zz-*.css` alfabetik.
   `zz-kpi-insight.css` (i) < `zz-kpi-tile.css` (t) ⇒ bu dosya İÇGÖRÜ katmanından
   SONRA yüklenir ve onun ölçülerini düzeltebilir.
   ============================================================================ */

/* ── 1) ŞEFFAFLIĞI KALDIR ────────────────────────────────────────────────────
   `.Aggregate { opacity: .75 }` bir NAV ROZETİ kuralıdır (soluk sayaç doğrudur).
   Hero KPI'da aynı değer metni de zemini de zemine karıştırır ve kontrastı
   ölçülebilir biçimde düşürür. */
.AggregateView.Aggregate {
    opacity: 1;
}

/* ── 2) SABİT GENİŞLİK YERİNE AKIŞKAN KUTU ───────────────────────────────────
   `.DirectionFloat > div { width: auto !important; flex: unset }` (layout.css:555)
   `!important` taşır ⇒ yenmesi için hem `!important` hem daha yüksek özgüllük
   gerekir: `.AggregateView.Aggregate` (0,2,0) > `.DirectionFloat > div` (0,1,1). */
.AggregateView,
.AggregateView.Aggregate {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 152px !important;
    max-height: 150px !important;
    flex: 1 1 auto !important;
    width: auto !important;
    padding: 0.65em 0.8em !important;
    min-height: 7em !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
    white-space: normal;
}

/* ── 3) DEĞER — başlığın altında, sağa dayalı (kullanıcı emri: sayı sonuçta) ─── */
.AggregateView.Aggregate > .AggregateValue {
    order: 2 !important;
    font-size: clamp(17.5px, 1.55em, 23px) !important;
    font-weight: 800 !important;
    line-height: 1.2em !important;
    min-height: 1.4em !important;
    letter-spacing: -0.02em;
    padding: 0 !important;
    margin: auto 0 2px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: right !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    box-sizing: border-box !important;
}
.AggregateView.Aggregate.AggregateLink > .AggregateLabel {
    padding-right: 14px !important; /* sag ustteki chevron icin koruma alani */
}

/* ── 3b) PARA ALAN TİPLERİ — KOYU PARA YEŞİLİ (#047857) (kullanıcı kuralı 2026-09-07) ─── */
.AggregateView.Aggregate.AggType_Money > .AggregateValue,
.AggregateView.Aggregate > .AggregateValue[suffix*='₺'],
.AggregateView.Aggregate > .AggregateValue[suffix*='TL'],
.AggregateView.Aggregate > .AggregateValue[suffix*='$'],
.AggregateView.Aggregate > .AggregateValue[suffix*='€'] {
    color: #047857 !important;
}

/* ── 4) ETİKET — üstte, sola dayalı, tam genişlikte (hiçbir nesne ezmez) ──────── */
.AggregateView.Aggregate > .AggregateLabel {
    order: 1 !important;
    margin: 0 0 0.35em 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.25em !important;
    min-height: 2.5em !important;
    max-height: 2.5em !important;
    flex: 0 0 2.5em !important;
    letter-spacing: 0.01em;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ── 4b) TREND — varsa değerin altında, boşsa gizli ───────────────────────── */
.AggregateView.Aggregate > .AggregateTrend {
    order: 3 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 1px 6px !important;
    border-radius: 999px !important;
    margin-top: 2px !important;
    align-self: flex-start !important;
    white-space: nowrap !important;
}
.AggregateView.Aggregate > .AggregateTrend:empty {
    display: none !important;
}

/* ── 5) SUFFIX — değerin altında, sağa dayalı, onhover korumalı ──────────── */
.AggregateView.Aggregate > .AggregateValue::after,
.AggregateView.Aggregate > .AggregateValue:hover::after,
.AggregateView.Aggregate:hover > .AggregateValue::after {
    content: attr(suffix) !important;
    display: block !important;
    font-size: clamp(9.5px, 0.72em, 11px) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    opacity: 0.72 !important;
    text-align: right !important;
    align-self: flex-end !important;
    margin-top: 1px !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    position: static !important;
    transform: none !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    z-index: auto !important;
}

.AggregateView.Aggregate > .AggregateValue:not([suffix])::after,
.AggregateView.Aggregate > .AggregateValue[suffix=""]::after {
    display: none !important;
    content: none !important;
}

/* ── 5b) AGGINSIGHT — her kartta ilk andan itibaren sabit 18px yükseklik slotu ── */
.AggregateView.Aggregate > .AggInsight {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    width: 100% !important;
    min-height: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    margin-top: auto !important;
    order: 3 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    overflow: visible !important;
}

.AggregateView.Aggregate > .AggInsight .AggregateSparkDelta {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    /* 2026-09-08 — 9,5px -> 12px (WCAG). Bu kural KONUMLANDIRMA icin yazilmis
       (position/left/bottom) ama font-size de `!important` ile kopyalanmis ve
       zz-a11y-typography.css'in `.Aggregate .AggInsight .AggregateSparkDelta{12px}`
       kuralini EZIYORDU. Ayni gun zz-dashboard-flow.css`te AYNI kusur duzeltildi
       (ee6650f5a) ama SINIF ARANMADIGI icin bu kaynak ve zz-kpi-insight.css:98
       ACIKTA KALMISTI — CDP ile okunan kazanan kural hala 9,5px gosteriyordu. */
    font-size: 12px !important;
    line-height: 1.2 !important;
    padding: 1px 5px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

.AggregateView.Aggregate > .AggInsight .AggregateSparkSvg {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 1px !important;
    width: 100% !important;
    height: 14px !important;
    opacity: 0.45 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* ── 6) DOKUNMA/KLAVYE ERİŞİMİ ───────────────────────────────────────────────
   KPI tıklanabilir (`AggregateLink` → `Nav`) ama klavye göstergesi yoktu.
   `currentColor` kullanılır: koyu bantta beyaz, açık bantta koyu halka çıkar —
   yani bu kural zemin bilmeden de doğru davranır. */
.AggregateView.Aggregate.AggregateLink {
    cursor: pointer;
}
.AggregateView.Aggregate.AggregateLink:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: inherit;
}

/* ── 7) MOBİL — şerit yeniden aksın ──────────────────────────────────────────
   Ölçüldü (Pixel 7 gerçek cihaz kipi): kart 106×58px, etiket 23px ⇒ değere
   ~27px kalıyor. Dar ekranda kart SAYISI değil kart BOYU küçültülmemeli. */
@media (max-width: 560px) {
    .AggregateView.Aggregate {
        min-width: calc(50% - 8px) !important;
        max-width: 152px !important;
        padding: 0.65em 0.8em !important;
    }
    .AggregateView.Aggregate > .AggregateValue {
        font-size: clamp(13px, 1.2em, 16px) !important;
    }
}

/* ── 8) HAREKET AZALTMA ──────────────────────────────────────────────────────
   `zz-kpi-insight.css` iskelet shimmer'ı ve değer-belirme animasyonu basıyor;
   vestibüler duyarlılığı olan kullanıcıda sürekli hareket üretir. */
@media (prefers-reduced-motion: reduce) {
    .AggregateView.Aggregate,
    .AggregateView.Aggregate * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}
/* ============================================================================
   zz-kpi-tile2-align.css — KPI HİZALAMA KATMANI (bağlam + öznitelik)
   2026-08-18 · kullanıcı sorusu: "AggregateValue niye sola dayalı? Count ortada,
   Number/Money sağa dayalı olsa? Ayrıca attribute'lerle kontrol edilebilmeli."

   AYRI DOSYA ÇÜNKÜ: bağımsız geri alınabilir olsun — bu dosya silinince kart
   tasarımı (zz-kpi-tile.css) olduğu gibi kalır, yalnız hizalama varsayılana döner.
   Yükleme sırası: "zz-kpi-tile.css" < "zz-kpi-tile2-align.css" (ordinal) ⇒ sonra.
   ============================================================================ */

/* ── 3b) HİZALAMA — BAĞLAM BİRİNCİ, ÖZNİTELİK HER ŞEYİN ÜSTÜNDE ──────────────
   ⛔ TEK TİP HİZALAMA YANLIŞTIR. Doğru hizalama, motorun ZATEN BİLDİĞİ bağlamdan
      türetilir; kullanıcı ayrıca ayar yazmak zorunda kalmaz.

     `Label="Top"`  (6.026 kullanım) → dikey kart: değer etiketle AYNI SOL KENARI
                                       paylaşır (Gestalt hizalama). ⇒ SOLA
     `Label="Left"` (233)            → "etiket … değer" satırı: değer sağ kenarda
                                       biter, göz tarar. ⇒ SAĞA
     `Label="None"` (36) / rozet     → sayı tek başına, kutunun ortası. ⇒ ORTAYA

   ⛔ SAYI = SAĞA kuralı bir TABLO kuralıdır: basamakların ALT ALTA hizalanması
      içindir. Yan yana duran KPI kartlarında dikey bir basamak sütunu YOKTUR ⇒
      sağa yaslamak sayıyı etiketinden uzaklaştırmaktan başka bir iş görmez.
      Bu yüzden birincil sinyal TİP değil BAĞLAM'dır; tip biçimlendirmeyi
      (tabular-nums, NumberFormat, Suffix) belirler, hizalamayı değil.

   ⚠️ `Alignment`/`VAlignment` öznitelikleri ZATEN ÇALIŞIYOR: `atom.js` onları
      `AlignRight`/`AlignCenter`/`AlignLeft` sınıfına çevirir. Ama CSS karşılığı
      yalnız `.Field` için yazılmıştı ⇒ 26 `AggregateView` `Alignment="Center"`
      yazmış ve HİÇBİRİNDE bir şey olmamıştı. Aşağısı o bağı kurar. */

/* varsayılan: bağlamdan türetilir */
/* 2026-09-06 KULLANICI EMRI: "AggregateValue right align olmalı sayı sonucta" */
.AggregateView.Aggregate.AggregateLabelTop > .AggregateValue {
    justify-content: flex-end;
    text-align: right;
}
.AggregateView.Aggregate.AggregateLabelTop > .AggregateLabel {
    justify-content: flex-start;
    text-align: left;
}
.AggregateView.Aggregate.AggregateLabelBottom > .AggregateValue {
    justify-content: center;
}
.AggregateView.Aggregate.AggregateLabelLeft > .AggregateValue,
.AggregateView.Aggregate.AggregateLabelRight > .AggregateValue {
    justify-content: flex-end;
}
.AggregateView.Aggregate.AggregateLabelNone > .AggregateValue {
    justify-content: center;
}
/* ⛔ BURADA `.NavButton > .AggregateView.Aggregate` ve `.TabButton > …` YAZILMIŞTI
   ve İKİSİ DE ÖLÜYDÜ: nav/tab rozetleri `AggregateView` sınıfını TAŞIMAZ
   (ölçüldü: hero 9/9 taşıyor, rozet 0/9). 0 element eşleşen kural yazılmamış
   sayılır (`361-content` KURAL 8) ⇒ düşürüldü.
   Rozetler bugünkü `flex-end` davranışını KORUR: ortalanmaları için ölçülmüş bir
   gerekçe yok ve çalışanı gerekçesiz değiştirmek yasak. */

/* öznitelik: ne yazıldıysa O kazanır — varsayılanı ezer */
.AggregateView.Aggregate.AlignLeft > .AggregateValue   { justify-content: flex-start !important; }
.AggregateView.Aggregate.AlignCenter > .AggregateValue { justify-content: center !important; }
.AggregateView.Aggregate.AlignRight > .AggregateValue  { justify-content: flex-end !important; }
/* etiket de aynı eksende hizalanır — yoksa kart kendi içinde çelişir */
.AggregateView.Aggregate.AlignCenter > .AggregateLabel { text-align: center; width: 100%; }
.AggregateView.Aggregate.AlignRight > .AggregateLabel  { text-align: right;  width: 100%; }

/* dikey hizalama — `VAlignment` (bugün 1 kullanım, karşılığı yoktu) */
.AggregateView.Aggregate.VAlignTop    { justify-content: flex-start; }
.AggregateView.Aggregate.VAlignMiddle { justify-content: center; }
.AggregateView.Aggregate.VAlignBottom { justify-content: flex-end; }

/* 2026-09-06: AggregateLabelTop için sola dayalı hiza */
.AggregateView.Aggregate.AggregateLabelTop {
    align-items: flex-start;
    text-align: left;
}
.AggregateView.Aggregate.AggregateLabelBottom,
.AggregateView.Aggregate.AggregateLabelNone {
    align-items: center;
    text-align: center;
}
.AggregateView.Aggregate.AggregateLabelLeft,
.AggregateView.Aggregate.AggregateLabelRight {
    align-items: flex-end;
}
/* oznitelik ebeveyn ekseninde de son sozu soyler */
.AggregateView.Aggregate.AlignLeft   { align-items: flex-start !important; }
.AggregateView.Aggregate.AlignCenter { align-items: center !important; }
.AggregateView.Aggregate.AlignRight  { align-items: flex-end !important; }
/* ============================================================================
   zz-kpi-tile3-smart.css — AKILLI VARSAYILANLAR (motorun bastığı semantikten)
   2026-08-18 · kullanıcı kuralı: "her varsayılan seçim akıllı mantıklı hale
   getirilse baya iş azalır"

   Bu dosya, `a-aggregate.js`'in AYNI TURDA eklenen üç sinyalini tüketir:
     · `AggFn_<Count|Sum|Avg|…>`   — toplama fonksiyonu
     · `AggType_<Money|Number|…>`  — alan tipi (yalnız FIELD çözülebildiğinde)
     · `data-digits` + `AggValLong` / `AggValXLong` — BASAMAK SAYISI

   ⛔ NEDEN MOTOR GEREKTİ: CSS karakter SAYAMAZ ve alan tipini GÖREMEZ. Bu üç
      sinyal DOM'a basılmadan "uzun sayı küçülsün", "para farklı biçimlensin"
      gibi hiçbir varsayılan türetilemez — her KPI'ya elle ayar yazmak gerekirdi.
      Ölçülmüş karşı-örnek: `Style` özniteliği 1.049 KPI'da yazılı ve motor onu
      HİÇ okumuyor. Yazdırılan ayar ölçeklenmez; türetilen varsayılan ölçeklenir.

   AYRI DOSYA: bağımsız geri alınabilir. Sil + `rebuild_css` ⇒ kart tasarımı ve
   hizalama olduğu gibi kalır, yalnız akıllı ölçü varsayılana döner.
   Sıra: zz-kpi-tile.css < zz-kpi-tile2-align.css < zz-kpi-tile3-smart.css
   ============================================================================ */

/* ── 1) ÖLÇÜ, EKRANA DEĞİL KARTA GÖRE ────────────────────────────────────────
   `vw` şeridin kaç KPI taşıdığını bilmez: 4 kartlık şeritte de 12 kartlık
   şeritte de aynı puntoyu verir. `cqi` kartın KENDİ genişliğine oranlar —
   şerit kalabalıklaşınca sayı kendiliğinden küçülür.
   ⚠️ `container-type: inline-size` kapsama getirir; kartın genişliği artık
      içeriğinden BAĞIMSIZ hesaplanır. Bu turda ölçülerek kabul edildi;
      genişlik dağılımı bozulursa bu dosya silinir (tek adımda geri alma). */
@supports (container-type: inline-size) {
    .AggregateView.Aggregate {
        container-type: inline-size;
    }
    .AggregateView.Aggregate > .AggregateValue {
        font-size: clamp(20px, 16cqi, 27.5px) !important;
    }

    /* ── 2) BASAMAK SAYISINA GÖRE — taşmayı İMKÂNSIZ kılar ───────────────────
       Ölçülmüş vaka: `244065` (6 basamak) ile `4` (1 basamak) aynı puntoda
       çiziliyordu; uzun olan kartı zorluyor, kısa olan kartı boş bırakıyordu. */
    .AggregateView.Aggregate > .AggregateValue.AggValLong {
        font-size: clamp(16px, 12.5cqi, 20px) !important;
        letter-spacing: -0.025em;
    }
    .AggregateView.Aggregate > .AggregateValue.AggValXLong {
        font-size: clamp(14.5px, 11cqi, 17px) !important;
        letter-spacing: -0.035em;
    }

    /* ── 2b) PARA & KOKPİT METRİKLERİ (1 Milyar sığmalı - kullanıcı kuralı 2026-09-07) ── */
    .AggregateView.Aggregate.AggType_Money > .AggregateValue,
    .AggregateView.Aggregate.AggType_Decimal > .AggregateValue,
    .AggregateView.Aggregate > .AggregateValue[suffix*='₺'],
    .AggregateView.Aggregate > .AggregateValue[suffix*='$'],
    .AggregateView.Aggregate > .AggregateValue[suffix*='€'],
    .AggregateView.Aggregate > .AggregateValue[suffix*='TL'] {
        font-size: clamp(15.5px, 12cqi, 18px) !important;
        letter-spacing: -0.03em;
    }
    .AggregateView.Aggregate.AggType_Money > .AggregateValue.AggValLong,
    .AggregateView.Aggregate > .AggregateValue[suffix*='₺'].AggValLong,
    .AggregateView.Aggregate > .AggregateValue[suffix*='TL'].AggValLong {
        font-size: clamp(15px, 11.5cqi, 17.5px) !important;
        letter-spacing: -0.03em;
    }
    .AggregateView.Aggregate.AggType_Money > .AggregateValue.AggValXLong,
    .AggregateView.Aggregate > .AggregateValue[suffix*='₺'].AggValXLong,
    .AggregateView.Aggregate > .AggregateValue[suffix*='TL'].AggValXLong {
        font-size: clamp(14px, 10.5cqi, 16.5px) !important;
        letter-spacing: -0.035em;
    }

    /* ── 2c) PARA ALAN TİPLERİ — KOYU PARA YEŞİLİ (#047857) (kullanıcı kuralı 2026-09-07) ── */
    .AggregateView.Aggregate.AggType_Money > .AggregateValue,
    .AggregateView.Aggregate > .AggregateValue[suffix*='₺'],
    .AggregateView.Aggregate > .AggregateValue[suffix*='TL'],
    .AggregateView.Aggregate > .AggregateValue[suffix*='$'],
    .AggregateView.Aggregate > .AggregateValue[suffix*='€'] {
        color: #047857 !important;
    }
}

/* ── 2b) DOLGU & EŞİT YÜKSEKLİK — VEKTÖREL EM BİRİMLERİ İLE ─────────────────── */
.Panel .AggregateView.Aggregate {
    padding: 0.65em 0.8em !important;
    min-height: 7em !important;
}

/* ── 3) TİP İNCELİĞİ — BİÇİM belirler, HİZALAMA belirlemez ───────────────────
   Hizalama bağlamdan gelir (zz-kpi-tile2-align.css). Tipin işi biçimdir:
   para ve ondalıklı sayıda basamaklar sabit genişlikte olmalı ki canlı KPI
   güncellendiğinde sayı yatay ZIPLAMASIN. */
.AggregateView.Aggregate.AggType_Money > .AggregateValue,
.AggregateView.Aggregate.AggType_Number > .AggregateValue,
.AggregateView.Aggregate.AggType_Decimal > .AggregateValue {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Sayım bir BÜYÜKLÜK değil bir ADETtir: ondalık/binlik inceliğine ihtiyacı yok,
   ama en güçlü hiyerarşiyi o hak eder — kokpitte en çok bakılan sayı odur. */
.AggregateView.Aggregate.AggFn_Count > .AggregateValue {
    font-weight: 700;
}

/* ── 3b) HİZALAMA — TİP/FONKSİYON EKSENİ (kullanıcı kararı 2026-08-18) ────────
   Bağlam ekseni (zz-kpi-tile2-align.css) `Label="Top"` için SOL diyordu ve kokpit
   KPI'larının hepsi `Top` olduğu için dokuzu da sola dayanıyordu. Kullanıcı bunu
   iki kez sordu ⇒ tercih TİP/FONKSİYON ekseni:

     ADET (Count/DistinctCount)      → ORTAYA — sayı bir büyüklük değil bir adettir,
                                       kıyas eksenine ihtiyacı yok, kartın merkezinde durur
     ÖLÇÜM (Sum/Avg/Min/Max, Money,  → SAĞA   — birimiyle okunan bir büyüklüktür;
            Number, Decimal)           sağ kenarda bitmesi basamak/birim okumasını sabitler

   ÖNCELİK SIRASI KORUNUR: bu kurallar tile2'nin BAĞLAM varsayılanını ezer (aynı
   özgüllük, sonra yüklenen dosya kazanır), ama `Alignment` özniteliğini EZEMEZ —
   o tile2'de `!important` ile yazılıdır. Yani: tip < öznitelik. Açık söz son sözdür.

   ⚠️ Etiket de aynı eksene çekilir; yoksa kart kendi içinde çelişir (etiket solda,
      sayı ortada). */
/* 2026-09-06 KULLANICI EMRI: "AggregateValue right align olmalı sayı sonucta" */
.AggregateView.Aggregate > .AggregateValue {
    justify-content: flex-end !important;
    text-align: right !important;
}
.AggregateView.Aggregate > .AggregateLabel {
    text-align: left !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

.AggregateView.Aggregate.AggFn_Count > .AggregateValue,
.AggregateView.Aggregate.AggFn_Distinctcount > .AggregateValue,
.AggregateView.Aggregate.AggType_Integer > .AggregateValue,
.AggregateView.Aggregate.AggType_Counter > .AggregateValue {
    justify-content: flex-end !important;
    text-align: right !important;
}
.AggregateView.Aggregate.AggFn_Count > .AggregateLabel,
.AggregateView.Aggregate.AggFn_Distinctcount > .AggregateLabel,
.AggregateView.Aggregate.AggType_Integer > .AggregateLabel,
.AggregateView.Aggregate.AggType_Counter > .AggregateLabel {
    text-align: left !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

.AggregateView.Aggregate.AggFn_Sum > .AggregateValue,
.AggregateView.Aggregate.AggFn_Avg > .AggregateValue,
.AggregateView.Aggregate.AggFn_Min > .AggregateValue,
.AggregateView.Aggregate.AggFn_Max > .AggregateValue,
.AggregateView.Aggregate.AggType_Money > .AggregateValue,
.AggregateView.Aggregate.AggType_Number > .AggregateValue,
.AggregateView.Aggregate.AggType_Decimal > .AggregateValue {
    justify-content: flex-end !important;
    text-align: right !important;
}
.AggregateView.Aggregate.AggFn_Sum > .AggregateLabel,
.AggregateView.Aggregate.AggFn_Avg > .AggregateLabel,
.AggregateView.Aggregate.AggFn_Min > .AggregateLabel,
.AggregateView.Aggregate.AggFn_Max > .AggregateLabel,
.AggregateView.Aggregate.AggType_Money > .AggregateLabel,
.AggregateView.Aggregate.AggType_Number > .AggregateLabel,
.AggregateView.Aggregate.AggType_Decimal > .AggregateLabel {
    text-align: left !important;
    justify-content: flex-start !important;
    width: 100% !important;
}
/* Toplam/ortalama bir ÖLÇÜMdür: birimiyle birlikte okunur, birim görünür kalmalı. */
.AggregateView.Aggregate.AggFn_Sum > .AggregateValue::after,
.AggregateView.Aggregate.AggFn_Avg > .AggregateValue::after {
    opacity: 0.85;
    font-size: 0.46em;
}

/* ── 4) MOBİL — bu dosya en sonda yüklendiği için mobil kuralı TEKRAR eder ───
   Yoksa `zz-kpi-tile.css`'teki mobil override'ı buradaki cq kuralı ezerdi. */
@media (max-width: 560px) {
    .AggregateView.Aggregate > .AggregateValue {
        font-size: clamp(14px, 12cqi, 18px) !important;
    }
    .AggregateView.Aggregate > .AggregateValue.AggValLong {
        font-size: clamp(12.5px, 10cqi, 15px) !important;
    }
    .AggregateView.Aggregate > .AggregateValue.AggValXLong,
    .AggregateView.Aggregate.AggType_Money > .AggregateValue,
    .AggregateView.Aggregate > .AggregateValue[suffix*='₺'],
    .AggregateView.Aggregate > .AggregateValue[suffix*='TL'] {
        font-size: clamp(11.5px, 8.5cqi, 13px) !important;
    }
}
/* ============================================================================
   zz-kpi-tile4-eksen.css — TİP/FONKSİYON HİZALAMASI, DOĞRU EKSENDE
   2026-08-18
   ============================================================================
   NEDEN AYRI DOSYA: `zz-kpi-tile3-smart.css` tip/fonksiyon hizalamasını
   `justify-content` ile yazıyor. CDP ile ÖLÇÜLDÜ ki o EKSEN YANLIŞ:

       .AggregateView.Aggregate { align-items: flex-start }   ← KAZANAN

   Ebeveyn bir FLEX SÜTUN; çocuğun YATAY yerini `align-items` belirler.
   `justify-content` yalnız değer span'inin KENDİ içindekini dizer, span'in
   kart içindeki yerini DEĞİŞTİRMEZ. Bu yüzden tile3'ün "Money/Number → SAĞA"
   kuralları canlıda görsel olarak HİÇ ÇALIŞMIYORDU.

   tile3'ü yeniden yazmak yerine ayrı katman: bağımsız geri alınabilir ve
   tile3'ün biçim kuralları (tabular-nums, suffix) olduğu gibi kalır.
   Yükleme sırası: tile2 < tile3 < tile4 (ordinal) ⇒ bu dosya SONRA.

   KULLANICI KURALI:
     "Integer ise Center, Sayı/Para ise Sağa dayalı. Sola dayalı bir şey
      söylemedim, varsayılan da ortada olsun."
   ============================================================================ */

/* ADET = ORTAYA — Count/DistinctCount ve tam sayı tipleri */
.AggregateView.Aggregate.AggFn_Count,
.AggregateView.Aggregate.AggFn_Distinctcount,
.AggregateView.Aggregate.AggType_Integer,
.AggregateView.Aggregate.AggType_Counter {
    align-items: center;
    text-align: center;
}

/* ÖLÇÜM = SAĞA — toplam/ortalama/min/maks ve para/ondalık tipleri */
.AggregateView.Aggregate.AggFn_Sum,
.AggregateView.Aggregate.AggFn_Avg,
.AggregateView.Aggregate.AggFn_Min,
.AggregateView.Aggregate.AggFn_Max,
.AggregateView.Aggregate.AggType_Money,
.AggregateView.Aggregate.AggType_Number,
.AggregateView.Aggregate.AggType_Decimal {
    align-items: flex-end;
    text-align: right;
}

/* ⛔ ÖZNİTELİK HER ŞEYİN ÜSTÜNDE — açık söz son sözdür.
   tile2'de `!important` ile yazılı; burada tekrar edilir ki bu dosya tek başına
   yüklendiğinde de öznitelik tip eksenini ezsin. */
.AggregateView.Aggregate.AlignLeft   { align-items: flex-start !important; text-align: left !important; }
.AggregateView.Aggregate.AlignCenter { align-items: center !important;     text-align: center !important; }
.AggregateView.Aggregate.AlignRight  { align-items: flex-end !important;   text-align: right !important; }
/* ============================================================================
   MASAÜSTÜ — YATAY TAŞMA · DOKUNMA HEDEFİ · ÖRTÜŞME
   ============================================================================
   NEDEN BU DOSYA VAR: karne 2026-08-18'e kadar YALNIZ mobil (390x844) ölçüyordu.
   Kullanıcı "hem mobil hem desktop'ta da çalış" deyince kapsam 1440x900'e
   genişletildi ve ürünün yarısının DENETİMSİZ olduğu görüldü:

       kadraj      PUAN     D2 yatay taşma   D3 dokunma   D4 axe   D9 örtüşme
       mobil       82/90          0              0           3         0
       MASAÜSTÜ    43/90          9 ⛔          21          11         9

   Yani mobil neredeyse hedefteyken masaüstü yarı yoldaydı ve hiçbir kapı
   bunu görmüyordu. "Kapı yeşil" ile "ürün sağlam" arasındaki fark KAPSAMDIR.

   ── 1) YATAY TAŞMA (mandalsız, 9/9 ekranda) ────────────────────────────────
   ÖLÇÜLDÜ: tek suçlu sınıf, her ekranda aynı öğe —
       .Mode_Edit.Logon.Logon_n   left=1326  width=124  right=1450   (kadraj 1440)
       ebeveyn: .PageZone.PageZone_prf   position: static
   Profil/oturum bloğu kadrajın 10px dışına taşıyor ve TÜM SAYFAYI yatay
   kaydırılabilir yapıyor. Mobilde görünmüyor çünkü orada blok gizli/farklı.

   Çare kadrajı kısıtlamak DEĞİL (içerik gizlenir), bloğun kendi kabına
   SIĞMASINI sağlamak: profil bölgesi kadrajı aşamaz ve içindeki blok
   küçülebilir hâle gelir (`min-width:0` olmadan flex çocuk küçülemez).      */

.PageZone_prf {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.PageZone_prf > .Mode_Edit,
.Mode_Edit.Logon {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* ── 2) DOKUNMA HEDEFİ — WCAG 2.2 AA (2.5.8): 24x24 CSS px ─────────────────
   ÖLÇÜLDÜ: `.MicroButton` varyantları 30x30 · 24x24 · **22x24** karışık.
   22px'lik varyantta `min-width: 22px` yazan DAHA ÖZGÜL bir kural,
   15-akilli-varsayilanlar.css'teki `[role="button"] { min-width:24px }`
   varsayılanını yeniyordu (0-1-0 kaybediyor).
   Bu bir DÜZELTMEDİR (varsayılan değil) ⇒ zz- katmanı + yeterli özgüllük.
   `!important` KULLANILMADI: önce özgüllük doğru kurulur.                    */

a.MicroButton,
.MicroButton[role="button"],
.Actions a.MicroButton,
.Top a.MicroButton {
    min-width: 24px;
    min-height: 24px;
}

/* Kazanan kural ÖLÇÜLDÜ (CDP getMatchedStylesForNode):
       menu.css  .ListFieldTitles td .MicroButton {
           width: 22px !important; height: 22px !important; min-width: 22px !important }
   Bilinçli bir stil (liste başlığı içi kolon yönetimi düğmeleri) ama WCAG 2.2 AA
   2.5.8'in 24px eşiğinin **2px** altında kalıyor — 12 düğümde ölçüldü.
   `!important` burada GEREKÇELİ: kaynak kural da `!important` kullanıyor, eşit
   silahla ve daha yüksek özgüllükle (0-3-1 > 0-2-1) yenilir. 22→24 görsel olarak
   ihmal edilebilir, uyum ise ikili (geçer/kalır). Tasarım dili korunur. */
.EntityTypeView .ListFieldTitles td .MicroButton,
.ListAll .ListFieldTitles td .MicroButton {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
}

/* ── 3) ÖRTÜŞME — .GenUiInvite kendi kendini örtüyor (8 örnek) ─────────────
   ÖLÇÜLDÜ: D9 bulgularının 8'i `GenUiInvite <- GenUiInvite`, yani AYNI sınıftan
   iki katman üst üste biniyor. Bu, "yardımcı yüzey kendiliğinden açılmaz,
   DAVET EDER" kuralının ihlalidir: davet katmanı içeriği örtüyor.
   Kök neden (birden çok örnek çizilmesi) İSTEMCİ MANTIĞINDA olabilir; burada
   yalnız GÖRSEL zarar kesiliyor — üst üste binen davet katmanları tıklamayı
   ve okumayı engellemesin diye ikinciden itibaren akıştan çıkarılır.
   ⚠️ Bu bir SEMPTOM kesmesidir; kök neden ölçülüp ayrıca ele alınmalı.        */

.GenUiInvite ~ .GenUiInvite {
    display: none;
}

/* ── 4) ULAŞILAMAZ içerik — MASAÜSTÜ (D1, mandalsız) ───────────────────────
   ÖLÇÜLDÜ (1440x900, 2 rota): mobildekiyle AYNI SINIF — liste/form başlık
   hücreleri dikeyde kırpılıyor:
       TD.FieldDate  "Oluşturma Tarihi"   overflow:hidden, kaydıran ata YOK
       TD.FieldText  "Görev Tanımı" · "Cep Telefonu" · "Soyadınız" · "Şifreniz"
       TD.FieldEmail "E-Postanız"
   Mobil düzeltmesi `@media (max-width:767px)` ile sınırlıydı, masaüstü açıkta
   kalmıştı — kapsam bayatlamasının aynısı, bir kadraj ötede.

   ⛔ MOBİLDEN FARKI: burada `white-space: normal` VERİLMİYOR. Masaüstünde
   sütun genişliği yeterli; sarmayı açmak tablo düzenini gereksizce değiştirir.
   Yalnız KIRPMA kaldırılır (`overflow: visible` + `height: auto`) — içerik
   erişilebilir olur, yerleşim aynı kalır. En dar müdahale. */
.ListAll .ListFieldTitles > td,
.ListAll .ListFieldTitles > th,
.ListFieldTitles > td,
.ListFieldTitles > th {
    overflow: visible;
    height: auto;
}

/* ── 5) D1 son sınıf — başlık hücresi İÇİNDEKİ span (her iki kadraj) ───────
   ÖLÇÜLDÜ: kalan 5 ULAŞILAMAZ bulgusunun HEPSİ aynı desen —
       SPAN  overflow:hidden  @#mPersonSingUp
       "Şifre Geçerli mi ?" · "Prev Mail Count" · "Sistem Kullanım Sözl…"
   Bir önceki tur `td`'nin kırpmasını kaldırmıştı ama İÇİNDEKİ span'in kendi
   `overflow:hidden`'ı var — kap açıldı, içerik hâlâ kırpık. Aynı kusurun bir
   katman içerisi (kapsam dersinin dördüncü tekrarı).
   Yalnız KIRPMA kaldırılır; sarma/yerleşim değişmez. */
/* ⛔ SECICI DUZELTILDI (olculdu): span dogrudan td'nin cocugu DEGIL, bir <a>
   icinde ve `.ListAll` atasi da YOK. Gercek zincir:
       SPAN  <  A  <  TD.FieldBool.ListHeaderTooltip  <  TR.ListFieldTitles
   Ilk secici (`> td > span` + `.ListAll ...`) bu yuzden hic eslesmedi. */
.ListFieldTitles td span,
.ListFieldTitles td a,
.ListFieldTitles th span,
.ListFieldTitles th a {
    overflow: visible;
    height: auto;
}

/* ── 6) YAN RAYLAR (PageZone_LeftNavs / PageZone_RightNavs) ────────────────
   Kullanıcı bildirimi üzerine ÖLÇÜLDÜ (localhost):

     kadraj 1440:  Left  104x840  nav=2  ofY=visible  kaydirirY=FALSE
                   Right 104x840  nav=6  ofY=visible  kaydirirY=FALSE
     kadraj  390:  Left  260px çekmece (left:-260) nav=8 ofY=auto ✅ kaydırıyor
                   Right display:none  →  6 nav ÇEKMECEYE birleşiyor (2+6=8) ✅

   ✅ ERİŞİM KAYBI YOK: mobilde sağ ray gizli ama içeriği sol çekmecede.
      ("gizlemek ≠ erişilemez kılmak" kuralı sağlanıyor.)

   ⛔ GİZLİ RİSK: masaüstünde iki ray da `overflow-y: visible` ve KAYDIRMIYOR.
      Bugün taşma yok (sh==ch==840) ama nav sayısı artarsa ya da ekran kısalırsa
      (900px'ten küçük pencere, 125% ölçek, tarayıcı çubukları) alttaki nav'lar
      HİÇBİR YOLDAN erişilemez olur — tam olarak D1/D11 sınıfı.
      Bu, "kusuru düzeltme, DOĞMASINI engelle" ilkesinin ray karşılığı:
      taşma OLUŞMADAN kaydırma verilir.

   En dar müdahale: yalnız DİKEY kaydırma + dokunma davranışı. Genişlik,
   konum, görünürlük DEĞİŞMEZ. */
#PageZone_LeftNavs,
#PageZone_RightNavs {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

/* ── 7) LİSTE KAPLARI HER KADRAJDA KAYDIRIR (D11/D1 masaüstü) ──────────────
   ÖLÇÜLDÜ (1440x900): kalan mandalsız bulguların HEPSİ `.ListHeader` —
       cw=172 sw=182 (10px) · cw=746 sw=806 (60px) · cw=127 sw=137 (10px)
       + D1'de `.ListHeader` dikey taşma 8px
   Mobil düzeltmesi `@media (max-width:767px)` ile sınırlıydı; masaüstü açıkta
   kalmıştı. Bu, "kapsam mobille sınırlı" hatasının BEŞİNCİ tekrarı — bu yüzden
   kural artık KADRAJDAN BAĞIMSIZ yazılıyor.

   `overflow-x: auto` yalnız içerik gerçekten taştığında kaydırma çubuğu üretir;
   taşmayan kapta HİÇBİR görsel etkisi yoktur. Bu yüzden geniş kadrajda da
   güvenlidir ve "taşma oluşmadan önlem" ilkesine uyar. */
.ListHeader,
.ListFooter,
.ListAll,
.ListBody {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
.ListHeader {
    height: auto;
}

/* ============================================================================
   TABLET: SAYFA KAYDIRMIYORDU — kadrajın altındaki içerik ERİŞİLEMEZDİ
   ============================================================================
   Kullanıcı bildirimi (2026-08-19): "scroll problemleri var."

   ÖLÇÜLDÜ (localhost, 1024×768, 3 kadraj × 20 modül taraması):
     /mBusinessManagement  SOL son öğe altı 949 · SAG 1001   (kadraj 768)
     /SurveyManagement     SAG 1001
     documentElement       scrollH=1001  clientH=768   ⇒ 233px GİZLİ
     window.scrollTo(0,9999) → scrollY = 0             ⇒ sayfa KAYDIRMIYOR
     kaydırabilen ata                                   ⇒ YOK
     scrollIntoView()                                   ⇒ öğeyi getirmiyor

   ⛔ ÜÇ HİPOTEZ DENEYLE ELENDİ (hiçbiri kaydırmayı açmadı):
        body{overflow:visible} · html+body{overflow:visible} · ikisi de auto
      ⇒ engel `overflow` DEĞİL.

   NEDEN BU KADRAJDA: ray çocukları `NavGroup` olduğunda (gruplu nav) her grup
   402px'lik DİKEY yığın olur; yatay şerit 402px'e çıkar, üstündeki içerikle
   birlikte sayfa 1001px eder ve kadrajı 233px aşar. Düz `Nav` öğeli ekranlarda
   (50px) sorun yok — bu yüzden BAZI ekranlarda görünüyor, hepsinde değil.

   ÜÇ ADAY ÖLÇÜLDÜ (son öğe altı, hedef ≤768):
       ray max-height:40vh + kaydır   -> 906   ⛔ yetmiyor
       NavGroup max-height:180px      -> 780   ⛔ kıl payı yetmiyor
       .Page max-height:100dvh + auto -> 768   ✅ ÇÖZÜYOR
   Kullanıcı kararı: çözen yol UYGULANIR, ama YALNIZ bu kadraj bandında —
   masaüstü ve mobil davranışı DEĞİŞMEZ.
   ============================================================================ */
@media (max-width: 1024px) {
    body .Page {
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
}

/* ============================================================================
   .DisableOverflow — kullanıcının verdiği kural (2026-08-19)
   ============================================================================
   Bu sınıf `EntityTypeView` ayarlarındaki "Overflow Gizle" seçeneğiyle
   veriliyor (`et-viewsettings.js:37`) ve iç kaplarda kaydırmayı kapatıyor:
       .DisableOverflow .ListBody   { position: static; height: auto; overflow-y: hidden }
       .DisableOverflow .ListMiddle { position: static; height: auto }
       .DisableOverflow .ListLeft   { display: none !important }
   Yani içerideki kaydırıcılar kalkıyor ama KABIN KENDİSİ için bir kural yoktu.

    Kullanıcının verdiği kural kabı konumlandırılabilir yapar ve yüksekliği
    içeriğe bırakır (2026-08-19). `min-height: 15em` tabanı KALDIRILDI
    (2026-08-29, kullanıcı kararı): kısa/boş görünümlerde 15em boş alan
    üretiyordu; `height: auto` içeriğe göre boyutlandığı için kabın çökmesi
    zaten olmuyor.
    ============================================================================ */
.DisableOverflow {
    position: relative !important;
    height: auto !important;
    z-index: 0;
}


/* ⛔⛔ SEV-5 ULAŞILAMAZ YATAY İÇERİK — YAN YANA KAP DAR KADRAJDA SARMIYORDU (2026-08-20)
   `.DirectionVertical, .DirectionVer` (FieldSetMode="Ver" = yan yana yerleşim) kuralı
   `flex-wrap: nowrap !important` taşıyor. Masaüstünde doğru; 390px'te çocuklar sığmıyor
   ve kadrajın DIŞINA çıkıyor — hiçbir ata yatay kaydırmadığı için içerik ULAŞILAMAZ.

   ⛔ BU DÜZELTME BİR KEZ YANLIŞ ÖLÇÜTLE REDDEDİLDİ. "Taşan KAP sayısı" ölçütü
   `/mProductionPlanningByStockLevels`te 23 → 63 gösteriyordu ve "üç katına çıkarıyor"
   diye elendi. Doğru ölçüt KABI değil KULLANICININ KAYBETTİĞİ METNİ sayar:
     kap sayısı        23 → 63   (sarma taşmayı ebeveynden çocuklara DAĞITIR)
     ULAŞILAMAZ METİN 136 →  0   (en uzak 219px → 0px)
   Aynı ölçütle altı ekranın ALTISI sıfırlandı:
     /mProductionPlanningByStockLevels 136→0 · /OBHome 11→0 · /SISHome 8→0
     /mContractsHome 3→0 · /PayeeRegistryHome 3→0 · /PPHome 1→0
   (kap ölçütü /PPHome'u "değişmedi" diyordu — iki yönde de yanılmıştı.)

   KAPSAM ≤1024px, GEREKÇESİYLE: `nowrap` geniş kadrajda bilinçli bir yerleşim
   semantiğidir ve orada içerik zaten sığıyor. Masaüstünde ölçüm YAPILMADI, o yüzden
   oraya genişletilmedi (bir masaüstü bulgusu duruyor: /PaySupplementCutTypes 14px).
   `:has()` ile "yalnız en içteki kap" varyantı da denendi: SONUÇ BİREBİR AYNI ⇒
   tarayıcı desteği bağımlılığı gereksiz, sade kural seçildi. */
@media (max-width: 1024px) {
    .DirectionVertical,
    .DirectionVer {
        flex-wrap: wrap !important;
    }
}
/* --- 5) MOBİL TEK SATIR MİMARİSİ (ORTALANMIŞ BAŞLIK & EN ALTTA LİSTE SEÇİCİ — 2026-08-28) ---

   - SOLDA: Yeni Düğmesi (+ / Aksiyonlar)

   - ORTA ÜSTTE: Başlık (İkonsuz, 12.5px, top: 6px, height: 15px)

   - ORTA ALTTA: EntityTypeLists (Kompakt Floating Pill, bottom: 5px, height: 16px)

   - SAĞDA: Arama & Hamburger Menü

   ============================================================================ */

@media only screen and (max-width: 768px), body.Mobile {

  html body.Mobile .Content.Content .Panel.Panel > .PanelHeader.PanelHeader,

  html body.Mobile .Content.Content .PanelHeader.PanelHeader.TitleLeft,

  html body.Mobile .Top.PanelHeader.PanelHeader,

  body.Mobile.Mobile .PanelHeader.PanelHeader,

  .Panel > .PanelHeader,

  .Panel > .PanelHeader.TitleLeft,

  .PanelHeader.TitleLeft,

  .Top.PanelHeader,

  .Content .PanelHeader {

    position: relative !important;

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 0 !important;

    min-height: 48px !important;

    height: 48px !important;

    box-sizing: border-box !important;

  }



  /* .TopLeft display: contents ile içerisindeki .Actions ve .EntityTypeViewTitle ayrılır */

  html body.Mobile .Content .PanelHeader > .TopLeft,

  body.Mobile .PanelHeader > .TopLeft,

  .PanelHeader > .TopLeft,

  .Top.PanelHeader > .TopLeft,

  .Content .PanelHeader > .TopLeft {

    display: contents !important;

  }



  /* 1) KESİNLİKLE SOLDA: Yeni Butonu / Sol Aksiyonlar */

  html body.Mobile .Content.Content .PanelHeader.PanelHeader .Actions,

  html body.Mobile .Content .PanelHeader .Actions,

  body.Mobile .PanelHeader .Actions,

  .PanelHeader > .TopLeft .Actions,

  .PanelHeader .Actions {

    position: absolute !important;

    left: 8px !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    z-index: 10 !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

    margin: 0 !important;

  }



  html body.Mobile .Content .PanelHeader .Actions > a,

  body.Mobile .PanelHeader .Actions > a,

  .PanelHeader > .TopLeft .Actions > a,

  .PanelHeader > .TopLeft .Actions > button,

  .PanelHeader .Actions > a,

  .PanelHeader .Actions > button,

  .PanelHeader [class*="Action_"] {

    min-width: 26px !important;

    min-height: 26px !important;

    width: 26px !important;

    height: 26px !important;

    padding: 0 !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 4px !important;

    background: rgba(255, 255, 255, 0.22) !important;

    color: #ffffff !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    text-decoration: none !important;

  }



  /* 2) TAM ORTA ÜSTTE: Başlık */

  html body.Mobile .Content.Content .PanelHeader.PanelHeader .EntityTypeViewTitle,

  html body.Mobile .Content .PanelHeader .EntityTypeViewTitle,

  body.Mobile .PanelHeader .EntityTypeViewTitle,

  .PanelHeader > .TopLeft .EntityTypeViewTitle,

  .PanelHeader .EntityTypeViewTitle {

    position: absolute !important;

    left: 50% !important;

    top: 6px !important;

    transform: translateX(-50%) !important;

    width: auto !important;

    max-width: calc(100% - 110px) !important;

    height: 15px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    margin: 0 auto !important;

    z-index: 5 !important;

  }



  /* Mobilde Title İkonu Kesinlikle Gizli */

  html body.Mobile .Content .PanelHeader .EntityTypeViewTitleIcon,

  body.Mobile .PanelHeader .EntityTypeViewTitleIcon,

  .PanelHeader .EntityTypeViewTitleIcon {

    display: none !important;

    width: 0 !important;

    height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

  }



  html body.Mobile .Content.Content .PanelHeader.PanelHeader .EntityTypeViewTitleBody,

  html body.Mobile .Content .PanelHeader .EntityTypeViewTitleBody,

  body.Mobile .PanelHeader .EntityTypeViewTitleBody,

  .PanelHeader .EntityTypeViewTitleBody,

  .PanelHeader .PanelHeaderTitle,

  .Content .PanelHeader .PanelHeaderTitle {

    font-size: 12px !important;

    font-weight: 700 !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    line-height: 15px !important;

    height: 15px !important;

    letter-spacing: 0.3px !important;

    text-align: center !important;

  }



  /* SAĞDA: Arama + Hamburger */

  html body.Mobile .Content .PanelHeader > .TopRight,

  body.Mobile .PanelHeader > .TopRight,

  .PanelHeader > .TopRight,

  .Top.PanelHeader > .TopRight,

  .Content .PanelHeader > .TopRight {

    position: absolute !important;

    right: 8px !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    z-index: 6 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    gap: 5px !important;

    margin: 0 !important;

  }



  html body.Mobile .Content .PanelHeader .ETSearch,

  body.Mobile .PanelHeader .ETSearch,

  .PanelHeader .ETSearch {

    max-width: none !important;

  }



  html body.Mobile .Content .PanelHeader .ToggleButton,

  html body.Mobile .Content .PanelHeader .MicroButton,

  body.Mobile .PanelHeader .ToggleButton,

  body.Mobile .PanelHeader .MicroButton,

  .PanelHeader > .TopRight .ToggleButton,

  .PanelHeader > .TopRight .MicroButton,

  .PanelHeader > .TopRight a,

  .PanelHeader > .TopRight button {

    min-width: 26px !important;

    min-height: 26px !important;

    width: 26px !important;

    height: 26px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 4px !important;

    background: rgba(255, 255, 255, 0.22) !important;

    color: #ffffff !important;

    text-decoration: none !important;

    padding: 0 !important;

  }



  /* ORTA ALTTA: EntityTypeLists (Kompakt Floating Pill, bottom: 5px, height: 16px) */

  html body.Mobile .Content .PanelHeader > .TopCenter,

  body.Mobile .PanelHeader > .TopCenter,

  body.Mobile .PanelHeader.PanelHeader > .TopCenter,

  body.Mobile .Top.PanelHeader > .TopCenter,

  html body.Mobile .Content .PanelHeader > .TopCenter {

    position: absolute !important;

    bottom: 5px !important;

    top: auto !important;

    height: 16px !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    z-index: 5 !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    margin: 0 auto !important;

    width: auto !important;

    max-width: 70% !important;

  }



  html body.Mobile .Content.Content .PanelHeader.PanelHeader .EntityTypeLists,

  html body.Mobile .Content .PanelHeader .EntityTypeLists.ViewSwitcher,

  html body.Mobile .Content .PanelHeader .EntityTypeLists,

  body.Mobile .PanelHeader .EntityTypeLists.ViewSwitcher,

  body.Mobile .PanelHeader .EntityTypeLists,

  body.Mobile .Top > .TopCenter .EntityTypeLists.Menu_Arrow_Down.ViewSwitcher,

  body.Mobile .PanelHeader > .TopCenter .EntityTypeLists,

  body.Mobile .PanelHeader > .TopCenter .ViewSwitcher,

  body.Mobile .PanelHeader > .TopCenter a,

  html body.Mobile .Content .PanelHeader .TopCenter a {

    font-size: 10px !important;

    font-weight: 600 !important;

    padding: 0 13px 0 7px !important;

    min-height: 16px !important;

    height: 16px !important;

    line-height: 16px !important;

    border-radius: 8px !important;

    background: rgba(0, 0, 0, 0.28) !important;

    color: #ffffff !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    white-space: nowrap !important;

    text-decoration: none !important;

    box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;

    box-sizing: border-box !important;

    border: 0 !important;

    overflow: visible !important;

    width: auto !important;

    min-width: 40px !important;

    max-width: 180px !important;

    text-align: center !important;

    position: relative !important;

    top: 0 !important;

    margin: 0 !important;

    transform: none !important;

  }



  html body.Mobile .Content .PanelHeader .EntityTypeLists.Menu_Arrow_Down::after,

  body.Mobile .PanelHeader .EntityTypeLists.Menu_Arrow_Down::after,

  .PanelHeader > .TopCenter .EntityTypeLists.Menu_Arrow_Down::after {

    content: "▾" !important;

    position: absolute !important;

    right: 3px !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    font-size: 7.5px !important;

    line-height: 1 !important;

    opacity: 0.9 !important;

    margin: 0 !important;

    display: block !important;

  }

}



/* ============================================================================

   SELECTIONSMENU_ENTITYSELECTOR MOBIL RESPONSIVE (2026-08-28)

   - Mobilde 800px sabit genişliği engelle: width: 100%, max-width: 100vw, min-width: 0

   ============================================================================ */

@media only screen and (max-width: 768px), body.Mobile {

  html body.Mobile .SelectionsMenu_EntitySelector,

  body.Mobile .SelectionsMenu_EntitySelector,

  .SelectionsMenu_EntitySelector {

    width: 100% !important;

    max-width: 100vw !important;

    min-width: 0 !important;

    left: 0 !important;

    right: 0 !important;

    box-sizing: border-box !important;

  }

}



/* ============================================================================

   MOBIL ITEMHEADER & SINGLEITEM COMPACT & VISIBLE MİMARİSİ (2026-08-28)

   - SingleItemHeaderTitle ASLA kesilmez (top: 0, margin: 2px auto 6px auto)

   - ItemHeader / Fields_Header gereksiz dikey boşluklardan arındırılmış, ultra kompakt

   ============================================================================ */

@media only screen and (max-width: 768px), body.Mobile {

  html body.Mobile .SingleItem,

  body.Mobile .SingleItem,

  .SingleItem {

    padding-top: 8px !important;

  }



  html body.Mobile .SingleItem .SingleItemHeaderTitle,

  html body.Mobile .SingleItem .FieldSet_m .SingleItemHeaderTitle,

  body.Mobile .SingleItem .SingleItemHeaderTitle,

  body.Mobile .SingleItem .FieldSet_m .SingleItemHeaderTitle,

  .SingleItem .SingleItemHeaderTitle,

  .SingleItem .FieldSet_m .SingleItemHeaderTitle {

    position: relative !important;

    top: 0 !important;

    left: auto !important;

    right: auto !important;

    bottom: auto !important;

    margin: 2px auto 6px auto !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    z-index: 3 !important;

    width: auto !important;

    text-align: center !important;

    transform: none !important;

  }



  html body.Mobile .SingleItem .SingleItemHeaderTitle > span,

  body.Mobile .SingleItem .SingleItemHeaderTitle > span,

  .SingleItem .SingleItemHeaderTitle > span {

    border-radius: 12px !important;

    padding: 2px 12px !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    letter-spacing: 0.5px !important;

    text-transform: uppercase !important;

    display: inline-block !important;

    box-sizing: border-box !important;

  }



  html body.Mobile .SingleItem .SingleItemHeader,

  html body.Mobile .Fields_Header.ItemHeader,

  html body.Mobile .ItemHeader,

  body.Mobile .SingleItem .SingleItemHeader,

  body.Mobile .Fields_Header.ItemHeader,

  body.Mobile .ItemHeader,

  .SingleItem .SingleItemHeader,

  .Fields_Header.ItemHeader,

  .ItemHeader {

    padding: 8px 10px !important;

    min-height: auto !important;

    height: auto !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    gap: 3px !important;

    box-sizing: border-box !important;

  }



  html body.Mobile .SingleItemHeader .Field,

  html body.Mobile .Fields_Header .Field,

  html body.Mobile .ItemHeader .Field,

  body.Mobile .SingleItemHeader .Field,

  body.Mobile .Fields_Header .Field,

  body.Mobile .ItemHeader .Field,

  .SingleItemHeader .Field,

  .Fields_Header .Field,

  .ItemHeader .Field {

    padding: 1px 0 !important;

    margin: 0 !important;

    min-height: auto !important;

    height: auto !important;

    line-height: 1.25 !important;

    width: 100% !important;

    text-align: center !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    --fieldPadding: 1px 0 !important;

    --inputPadding: 0 !important;

  }



  html body.Mobile .ItemHeader .SingleItemHeaderName,

  body.Mobile .ItemHeader .SingleItemHeaderName,

  .ItemHeader .SingleItemHeaderName {

    margin-bottom: 2px !important;

  }



  html body.Mobile .ItemHeader .SingleItemHeaderName a,

  html body.Mobile .Fields_Header .Field_Name a,

  html body.Mobile .Fields_Header .Field_Person a,

  body.Mobile .ItemHeader .SingleItemHeaderName a,

  body.Mobile .Fields_Header .Field_Name a,

  body.Mobile .Fields_Header .Field_Person a,

  .ItemHeader .SingleItemHeaderName a,

  .Fields_Header .Field_Name a,

  .Fields_Header .Field_Person a {

    font-size: 15px !important;

    font-weight: 700 !important;

    line-height: 1.3 !important;

    text-decoration: none !important;

  }



  html body.Mobile .ItemHeader .Field_CorporateTitle,

  html body.Mobile .ItemHeader .Field_Organization,

  body.Mobile .ItemHeader .Field_CorporateTitle,

  body.Mobile .ItemHeader .Field_Organization,

  .ItemHeader .Field_CorporateTitle,

  .ItemHeader .Field_Organization {

    font-size: 11.5px !important;

    line-height: 1.3 !important;

  }



  html body.Mobile .ItemHeader .FieldSet_cc,

  html body.Mobile .ItemHeader .FieldSet_l,

  body.Mobile .ItemHeader .FieldSet_cc,

  body.Mobile .ItemHeader .FieldSet_l,

  .ItemHeader .FieldSet_cc,

  .ItemHeader .FieldSet_l {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    gap: 2px !important;

    width: 100% !important;

    padding: 0 !important;

    margin: 0 !important;

  }



  html body.Mobile .ItemHeader .Field_CellPhone,

  html body.Mobile .ItemHeader .Field_email,

  body.Mobile .ItemHeader .Field_CellPhone,

  body.Mobile .ItemHeader .Field_email,

  .ItemHeader .Field_CellPhone,

  .ItemHeader .Field_email {

    font-size: 11.5px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 4px !important;

  }

}







/* ============================================================================
   MOBİL — BAŞLIK ÇÖKMESİ ve METİN KIRPILMASI DÜZELTMESİ
   ============================================================================
   Katman gerekçesi: bu bir VARSAYILAN değil, bir DÜZELTMEDİR. Meta CSS'in
   yazdığı değerleri yenmesi gerekir ⇒ `zz-*` katmanı (Meta'dan SONRA yüklenir).
   Varsayılanlar `15-akilli-varsayilanlar.css` içindedir (Meta'dan ÖNCE).

   ÖLÇÜLDÜ (demo.360bir.com, 390x844 gerçek cihaz kipi, 2026-08-18):

     .EntityTypeViewTitleBody   width=16px   scrollWidth=165px
                                white-space:nowrap · overflow:hidden
                                text-overflow:ellipsis · flex:0 1 auto · min-width:0
     .EntityTypeViewTitle       width=55px

   Yani "KİŞİ LİSTELERİ" başlığı 165px istiyor, 16px alıyor — ekranda pratikte
   YALNIZCA ÜÇ NOKTA görünüyor. Kullanıcı hangi ekranda olduğunu okuyamıyor.

   Karnede ölçülen etki: 8 ekranda `EntityTypeViewTitleBody` kırpılması
   (68px · 124px · 137px · 148px · 149px · 150px · 166px · 180px) + `ListBody`
   ve başlık `FieldText`lerinde ULAŞILAMAZ içerik.

   KÖK NEDEN: `flex: 0 1 auto` + `min-width: 0` ⇒ başlık, kardeş aksiyon
   düğmeleri alanı aldığında SIFIRA KADAR çökebiliyor. Dar kadrajda tam bu oluyor.

   ⛔ KAPSAM BİLEREK MOBİL: masaüstünde başlık zaten sığıyor ve orada davranışı
   değiştirmek gereksiz risk olur. Bu yüzden yalnız `max-width: 767px`.
   ============================================================================ */

@media (max-width: 767px) {

    /* Başlık kabı büyüyebilsin; kardeşleri sıkıştırmadan payını alsın. */
    .EntityTypeViewTitle {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Başlık metni: çökmesin, sarsın, kadraja göre ölçeklensin.
       `min-width` bir TABANDIR — üç noktadan ibaret kalmayı imkânsız kılar.
       `clamp` ile akışkan tipografi: dar ekranda küçülür ama okunur kalır.

       ⛔ ÖZGÜLLÜK DÜZELTMESİ (2026-08-18, CDP ile ölçüldü): ilk sürüm yalnız
       `.EntityTypeViewTitleBody` (0-1-0) yazıyordu ve HİÇ UYGULANMIYORDU. Kazanan
       kural ölçümle bulundu:
           .PanelHeader.TitleLeft > .TopLeft .EntityTypeViewTitle
             .EntityTypeViewTitleBody   { white-space: nowrap; min-width: 0 }   (0-5-0)
       Bir kuralın tutmama sebebi ÜÇ sınıftandır — özgüllük · seçici 0 element ·
       katman hiç yüklenmemiş. Buradaki ÖZGÜLLÜKTÜ (katman ve seçici doğruydu).
       `!important` KULLANILMADI: önce özgüllük doğru kurulur, o son çaredir. */
    .PanelHeader.TitleLeft > .TopLeft .EntityTypeViewTitle .EntityTypeViewTitleBody,
    .Top .EntityTypeViewTitle .EntityTypeViewTitleBody,
    .EntityTypeViewTitleBody {
        flex: 1 1 auto;
        min-width: 10ch;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: break-word;
        word-break: break-word;
        font-size: clamp(15px, 4.2vw, 21px);
        line-height: 1.25;
        text-wrap: balance;
    }

    /* Sekme/liste seçici şeridi ("Genel Bakış" 23px kırpılıyordu).
       Kazanan kural ölçüldü: `.Top > .TopCenter .EntityTypeLists.Menu_Arrow_Down
       .ViewSwitcher { white-space: nowrap }` ⇒ özgüllük eşitlendi. */
    .Top > .TopCenter .EntityTypeLists.Menu_Arrow_Down.ViewSwitcher,
    .Top .TopCenter .EntityTypeLists,
    .EntityTypeLists {
        min-width: 0;
        font-size: clamp(13px, 3.4vw, 21px);
    }
    /* ⛔⛔ REGRESYON GERI ALINDI (2026-08-18, ekran goruntusuyle bulundu):
       burada `white-space: normal` + `overflow-wrap: anywhere` vardi ve
       "Yeniler" secicisi DAR dairesel kabinda HARF HARF dikey kirildi
       (Y/e/n/i/l/e/r alt alta). Kirpilma bir OKUNABILIRLIK kusuruydu; harf
       harf kirilma KULLANILAMAZLIK. Ikincisi agir => geri alindi.
       DERS: `overflow-wrap: anywhere` yalniz kabin GENISLEYEBILDIGI yerde
       guvenlidir. Sabit/dar kapta `break-word` bile riskli, `anywhere` YASAK. */

    /* ── LİSTE KOLON BAŞLIĞI HÜCRELERİ — ULAŞILAMAZ içeriğin ASIL kaynağı ──────
       ÖLÇÜLDÜ (localhost, 390x844): kusurlu öğelerin hepsi `.ListFieldTitles`
       içindeki `<td>`'ler:
           TD.FieldText "Adınız Soyadınız"  h=34  scrollHeight=62  taşma 28px
           TD.FieldChoice "Durum"           h=34  scrollHeight=44  taşma 10px
           (+ Adınız · Soyadınız · E-Postanız · Başlık … aynı desen)
       hepsinde white-space:nowrap + overflow:hidden + kaydıran ata YOK
       ⇒ başlık metni DİKEYDE kırpılıyor ve kullanıcı ulaşamıyor.

       İlk sürüm yanlış kapları hedefliyordu (`.ListBody`/`.ListHead`/`th`);
       gerçek kap `.ListFieldTitles`tır — ölçüm bunu gösterdi, tahmin değil.
       Çare: dar kadrajda başlık SARSIN ve yükseklik İÇERİĞE göre büyüsün. */
    /* ⛔ ÖZGÜLLÜK (2026-08-18, CDP ile ölçüldü): kazanan kural
           `.ListAll .ListBody td, .ListAll .ListHeader td { white-space:nowrap;
            overflow:hidden }`  [only screen and (max-width:767px)]  → 0-2-1
       Benim `.ListFieldTitles > td` (0-1-1) kuralım kaybediyordu. Eşitlemek için
       `.ListAll` atası eklendi; zz- katmanı daha SONRA yüklendiği için eşit
       özgüllükte benimki kazanır. `!important` gerekmedi. */
    .ListAll .ListFieldTitles > td,
    .ListAll .ListFieldTitles > th,
    .ListAll .ListHeader .ListFieldTitles td,
    .ListFieldTitles > td,
    .ListFieldTitles > th,
    .ListBody .FieldText,
    .ListHead .FieldText,
    th.FieldText {
        white-space: normal;
        height: auto;
        overflow: visible;
        overflow-wrap: break-word;
        word-break: break-word;
        line-height: 1.25;
    }
}

/* ── D11: YATAY ULAŞILAMAZ (mobil) ─────────────────────────────────────────
   ÖLÇÜLDÜ (390x844): 51 bulgu. Suçlu sınıflar —
       UserTable 9 · Mode_Edit 9 · ImageSpan 9 · EntityTypeViewTitle 8 · ListHeader 1
   Tetikleyici vaka: liste 14 kolon / 1066px içerik, kadraj 390px, kap yatay
   KAYDIRMIYOR ⇒ kolonların %71'i hiçbir yoldan görülemiyor.

   D1/D2 bunu görmüyordu (biri dikey, öteki gövde kayması) — bu yüzden D11
   boyutu eklendi ve bu kural onun karşılığıdır.

   ⛔ EN DAR MÜDAHALE: yalnız TABLO KAPLARINA yatay kaydırma verilir. Kolonları
   gizlemek ya da kart düzenine geçmek AYRI ve büyük bir tasarım kararıdır
   (7.8'in (b) ve (c) şıkları) — veriyi erişilebilir kılmak için gerekli değil.
   `overscroll-behavior-x: contain` sayfa kaymasını tetiklemez. */
@media (max-width: 767px) {
    /* ⛔ `.UserTable` BU LISTEDEN CIKARILDI (2026-08-18, kendi hatam — olculdu):
       ad "UserTable" olmasina ragmen bir VERI IZGARASI DEGIL, 32px'lik bir
       KULLANICI CIPI:  w=32 · clientWidth=32 · scrollWidth=56 · metin "admin"
       Ona yatay kaydirma vermek 32 piksellik bir kaydirma alani yaratti ve
       axe'in `scrollable-region-focusable` bulgusunu URETTI. 32px'lik bir cipi
       kaydirtmak absurt; oradaki tasma bir METIN KIRPILMASI sorunudur (D5),
       "kaydirilabilir veri bolgesi" degil.
       DERS: sinifi ADINDAN sinıflandirma — `UserTable` tablo degildi. */
    .ListHeader,
    .ListFooter,
    .ListAll,
    .ListBody {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
}
/* ============================================================================
   MOBİL — SOL ÇEKMECE: KARTLAR EKRAN KENARINA YAPIŞIK
   2026-08-18 · kullanıcı bildirdi: "menü açılınca sol bok gibi gözüküyor"
   ============================================================================
   ÖLÇÜLDÜ (390x844 gerçek cihaz kipi, canlı DOM, menü AÇIKKEN):
       #PageZone_LeftNavs çocukları:
         .Button_HomeButton         x=102  w=56
         .NavView.NavGroup_Left     x=0    w=104   ← masaüstü RAY genişliği
         .DrawerSep                 x=0    w=0
         .NavView.NavGroup_Right    x=0    w=104
       ekran dışına taşan eleman sayısı: 0

   ⇒ Kartlar KESİK DEĞİL — `x=0`da, yani ekranın SOL KENARINA YAPIŞIK ve
     hiç boşluk yok. Kartın gölgesi/kenarı kadraj sınırında kaldığı için
     "kesilmiş" görünüyor. Ayrıca kaplar 104px (masaüstü ray ölçüsü) kalmış,
     içindeki kartlar ~208px çiziliyor.

   ⛔ TEŞHİS TARİHÇESİ (bugün iki kez yanıldım, kayda geçiyor):
     1) "benim overflow kuralım kırpıyor" → geri alındı, HİÇBİR ŞEY DEĞİŞMEDİ
     2) ölçüm gösterdi ki taşma yok, sorun BOŞLUK yokluğu
   DERS: "kesik görünüyor" iki bambaşka sebepten olur — kırpılma (overflow) ya
   da SIFIR KENAR BOŞLUĞU. İkisi ekranda AYNI görünür, çözümleri zıttır.

   ⛔ EN DAR MÜDAHALE: yalnız çekmeceye iç boşluk + çocuklara tam genişlik.
   Konum, genişlik, açılma animasyonu, z-index, arka plan DEĞİŞTİRİLMEZ.
   ============================================================================ */

@media (max-width: 767px) {
    #PageZone_LeftNavs {
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }
    /* Kaplar masaüstü ray ölçüsünde (104px) kalmıştı; çekmecede tam genişlik */
    #PageZone_LeftNavs > .NavView {
        width: 100%;
        box-sizing: border-box;
    }
}
/* ============================================================================
   MOBİL — ÇEKMECE BİR PANEL OLMALI (öğeler havada duruyordu)
   2026-08-18 · kullanıcı: "menü açılınca sol bok gibi gözüküyor"
   ============================================================================
   ÖLÇÜLDÜ (390x844 gerçek cihaz kipi, canlı DOM, menü AÇIKKEN):
       #PageZone_LeftNavs   w = 260px   background = rgba(0, 0, 0, 0)  ← SAYDAM
       body                 background = rgb(240, 241, 246)
       kart (.Aggregate)    background = rgb(255,255,255) · radius 8px
                            shadow = rgb(128,128,128) 0 0 4px
       CSS değişkeni        --bg = #f8faff

   ⇒ Çekmece DOĞRU GENİŞLİKTE (260px) ama ARKA PLANI YOK. Kartlar ve ikonlar
     bulanıklaştırılmış sayfa içeriğinin ÜSTÜNDE havada duruyor; göz nerede
     bittiğini anlayamıyor. Gestalt: ortak bölge (common region) yok.

   ⛔ RENK TAHMİN EDİLMEDİ — DOM'dan ÖLÇÜLDÜ. `var(--bg)` tema değişkeni
     kullanılır (koyu temada da doğru kalır), ölçülen değer yalnız YEDEK.
     Gölge kartların kendi gölge dilinden türetildi (aynı gri, daha geniş).

   ⛔ EN DAR MÜDAHALE: yalnız zemin + gölge + kenar. Genişlik, konum, açılma
     animasyonu, z-index, içerik dizilimi DEĞİŞTİRİLMEZ.
   ============================================================================ */

@media (max-width: 767px) {
    #PageZone_LeftNavs {
        background: var(--bg, #f8faff);
        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.18);
        border-right: 1px solid rgba(0, 0, 0, 0.08);
    }
}

/* Araç ikonlarının yerleşim sahibi artık `zz-mobile-drawer.css` içindeki
   `.DrawerUtilityDock` sözleşmesidir. Burada UserTools'a padding/wrap yazılmaz:
   zone bazlı sarma, ikonları içerik boyunca farklı yüksekliklere dağıtır ve
   aramayı tek başına orta alanda bırakır. Bu dosya yalnız panel zemini içindir. */
/* ============================================================================
   MOBIL DOKUNMA ERGONOMISI + ARAMA KUTUSU (2026-09-03, KULLANICI KARARI)

   Iki ayri kusur, iki ayri karar — ikisi de OLCULDU, ikisi de kullaniciya soruldu.

   ---------------------------------------------------------------------------
   (1) ARAMA KUTUSU PANEL BASLIGINI ORTUYOR   [TO DO S3 + mobil ortusme maddesi]
   ---------------------------------------------------------------------------
   OLCULDU (yerel maya, #MyPersons, 390x844, gercek tarayici):
     .ETSearch 125x28 @200 · .ETSearchPlace 33x48 · .TopRight 72x48 (ABSOLUTE)
     -> baslik "KİŞİLER" (44x15 @173) ile 17px ORTUSME; "Hepsi" cipi de kapaniyor.
     Kare: .claude/reports/etsearch-mobil-baslik.png · masaustunde ortusme YOK.
   KOK: Meta katmani mobil/tablette girdiyi HER ZAMAN genis birakiyor
        (`.Mobile .ETSearch input {width:10em}`, 2026-08-29 "karar A"), `.ETSearch`
        ise `position:absolute` — akistan cikip yuvasindan SOLA aciliyor.
   ⛔ UC YAMA DENENDI VE UCU DE GORSELI DEGISTIRMEDI (hepsi geri alindi):
        kaba padding (sonraki `!important` duzen kurallari eziyor) · yuvayi
        genisletmek (.TopRight absolute oldugu icin akista yer ayrilmiyor) ·
        .TopRight'i akisa almak (kutu tiklanabilir oldu, ortusme SURDU).
   KULLANICI KARARI: "Mobilde ikona kapat, dokununca ac."
   ⇒ Varsayilan DURUM dar (ikon) — statik ortusme YAPISAL olarak kalkar.
     Odaklanildiginda arama BILINCLI bir durum olarak genisler ve OPAK zemin +
     ust katman alir; bu gecici bir arama kipidir, statik carpisma degildir.
     Dolu arama (`.NotEmpty`) dar kirilimda da genis kalir — kullanici ne
     aradigini gormeye devam eder (icerik GIZLENMEZ).

   ---------------------------------------------------------------------------
   (2) DOKUNMA HEDEFLERI 24x24                [platform kromu, kiraci geneli]
   ---------------------------------------------------------------------------
   OLCULDU: ToggleButton.Value_False 24x24 · MicroButton (OrderBy/ChartSettings)
     24x24 · Toggle 25x32 — 40/42 CRM rotasinda, rota basina ort. 41 bulgu.
     WCAG 2.5.8 asgarisi (24x24) SINIRINDA, 44x44 onerisinin ALTINDA.
   KULLANICI KARARI: "Gorunmez alan genislet" — ikonun GORSEL boyutu AYNI kalir.
   ⇒ Yerlesimi ETKILEMEYEN bir dokunma alani serilir (`::after`, mutlak konum).
     Satir yukseklikleri DEGISMEZ, hicbir kayit ekrandan dusmez.
   ⚠️ Yatay genisleme BILEREK DAR (±6px): bitisik toggle sutunlarinda alanlarin
     birbirine girmesi "yanlis hucreye dokunma" riskini ARTIRIR — dikeyde 44'e
     cikilir, yatayda hucre sinirinda kalinir.

   Katman: `zz-*` Meta CSS'ten SONRA yuklenir (CLAUDE.md "Core layer build").
   ============================================================================ */

/* ---------- (1) arama: mobil/tablette varsayilan DAR ---------------------- */
/* ⛔ OZGULLUK OLCULDU (kural gorunmuyorsa once KAZANANI bul):
   ilk yazdigim `.Mobile .ETSearch input:not(...)` ESLESTI (matches -> true) ama
   hesaplanan genislik 115px kaldi. Kazanan kural:
     `html body.Mobile .Content .PanelHeader .ETSearch input` -> width:10em !important
     (@media max-width:768px) — ozgulluk ~(0,5,2), benimki (0,4,1) idi.
   ⇒ Ayni tabani alip :not() ile UZERINE cikiyoruz. Medya sorgusu ozgullugu
   DEGISTIRMEZ; onemli olan secici agirligi. */
html body.Mobile .Content .PanelHeader .ETSearch input:not(:focus):not(.NotEmpty),
html body.Tablet .Content .PanelHeader .ETSearch input:not(:focus):not(.NotEmpty),
body.Mobile .PanelHeader .ETSearch input:not(:focus):not(.NotEmpty),
body.Tablet .PanelHeader .ETSearch input:not(:focus):not(.NotEmpty) {
    width: 2.5em !important;
}

/* odaklaninca genisler — opak zemin + ust katman, ki altindaki baslik
   "yarim gorunen metin" olarak sizmasin (okunaksiz karisim ortusmeden kotudur) */
html body.Mobile .Content .PanelHeader .ETSearch input:focus,
html body.Tablet .Content .PanelHeader .ETSearch input:focus,
body.Mobile .PanelHeader .ETSearch input:focus,
body.Tablet .PanelHeader .ETSearch input:focus,
body.Mobile .PanelHeader .ETSearch input.NotEmpty,
body.Tablet .PanelHeader .ETSearch input.NotEmpty {
    width: 10em !important;
    background-color: var(--singleItemBackColor, #fff) !important;
    position: relative;
    z-index: 5;
}

/* ---------- (2) dokunma alani: gorsel boyut AYNI, hedef 44px -------------- */
/* ⛔ KAPSAM OLCULDU — ilk listem eksikti, ama GENISLETMEK de yanlis olurdu:
   390x844 #MyPersons'ta 44px alti 32 hedefin dagilimi:
     A.InputSpan < .Field < .Mode_Display   15 adet  118x24  <- DIKEY SIRALI alan
     A.(sinifsiz) < A.InputSpan             15 adet  118x24  <- ayni ogenin cocugu
     A.EntityTypeLists (liste cipi)          1 adet   48x16
     A.ToggleButton                          1 adet   26x26
   Yani cogunluk bir IKON degil, alt alta dizili ALAN DEGERI baglantisi ve yalniz
   YUKSEKLIGI (24px) dusuk. Onlara ±10px dokunma alani sermek KOMSU SATIRIN alanina
   girer ve "yanlis alana dokunma" riskini ARTIRIR — kullanicinin sectigi carenin
   amaci bunun TERSI. ⇒ Genisletme yalniz LISTE DENETIMLERINE uygulanir; alan
   deger baglantilari BILEREK disarida birakildi (ayri madde: satir yuksekligi). */
/* --------------------------------------------------------------------------
   2026-09-08 — `RowActionsKebab` LISTEDE YOKTU: OLCULEN TEK AA IHLALI BUYDU
   --------------------------------------------------------------------------
   Canli olcum (satis, 390x844, #mCRMAccountsHome, ::after katmani DAHIL etkin
   alan): aday 705 · <44px 677 (%96) · **<24px 14**.
   ⇒ 44px yuklemi SISKIN — mevcut ::after katmani hedeflerin ezici cogunlugunu
     ZATEN AA'nin (WCAG 2.5.8 = 24x24) uzerine cikarmis (Toggle 43x62 ·
     ToggleButton 42x54 · MicroButton 42x54). Gercek ihlal DAR ve tekti:
     `RowActionsKebab` **26x20** — YALNIZ YUKSEKLIK (20px) esigin altinda.
   Kok: kebab bu listede HIC yoktu, yani ::after katmani ona serilmiyordu.
   Care ayni desen: gorsel boyut AYNI kalir, yerlesim DEGISMEZ (mutlak ::after);
   dikeyde -10/-10 ile etkin alan 20 -> 40px olur (>=24 AA).
   ⚠️ Kapsam BILEREK dar: `InputSpan` (alan degeri baglantilari) yukarida
     gerekcesiyle DISARIDA birakildi ve o karar DEGISMEDI — onlara alan sermek
     komsu satirin alanina girer.
   Kabul olcutu: ayni prob, ayni kadraj, `<24px` **14 -> 0**; `aday` sayisi
     DEGISMEMELI (705) — payda dusuyorsa yuzey olculmemis demektir.
   -------------------------------------------------------------------------- */
.Mobile .ToggleButton,
.Mobile .MicroButton,
.Mobile .Toggle,
.Mobile .EntityTypeLists,
/* --------------------------------------------------------------------------
   2026-09-08 (2. olcum) — KEBAB KAPANDI, KALAN TEK SINIF `FieldBool > a`
   --------------------------------------------------------------------------
   Duzeltme sonrasi ayni prob/kadraj: aday 722 · <44px 678 · **<24px 13**
   ve 13'un 13'u de AYNI sinif: `<a>` (sinifsiz) ebeveyni `.FieldBool`, **23x24**.
   ⇒ `RowActionsKebab` listeden DUSTU (duzeltme tuttu); kalan ihlal YALNIZ
     GENISLIK ve yalnizca **1px**: 23 < 24 (WCAG 2.5.8).
   Care yine ayni desen — gorsel boyut AYNI, yerlesim DEGISMEZ; ::after yatayda
   -6/-6 verdigi icin etkin genislik 23 -> 35px olur.
   ⚠️ Yatay genisleme bu dosyada BILEREK dar (±6px) tutulur: bool isaretcisi
     satirin kendi hucresindedir, komsu tiklanabilir hedefe 6px'te ulasilmaz.
   Kabul olcutu: `<24px` 13 -> 0 · `aday` ~722 SABIT.
   -------------------------------------------------------------------------- */
.Mobile .RowActionsKebab,
.Mobile .FieldBool > a,
.Tablet .ToggleButton,
.Tablet .MicroButton,
.Tablet .Toggle,
.Tablet .EntityTypeLists,
.Tablet .RowActionsKebab,
.Tablet .FieldBool > a {
    position: relative;
}

.Mobile .ToggleButton::after,
.Mobile .MicroButton::after,
.Mobile .Toggle::after,
.Mobile .EntityTypeLists::after,
.Mobile .RowActionsKebab::after,
.Mobile .FieldBool > a::after,
.Tablet .ToggleButton::after,
.Tablet .MicroButton::after,
.Tablet .Toggle::after,
.Tablet .EntityTypeLists::after,
.Tablet .RowActionsKebab::after,
.Tablet .FieldBool > a::after {
    content: "";
    position: absolute;
    /* dikeyde 44'e cikar, yatayda hucre sinirinda kalir (komsu hedefe girmesin) */
    top: -10px;
    bottom: -10px;
    left: -6px;
    right: -6px;
    /* gorunmez: yalnizca dokunma alani */
    background: transparent;
    pointer-events: auto;
}

/* ⛔ UCUNCU OLCUM — kural GIRDIYE degil KAPSAYICIYA yazilmali.
   Kontrol deneyi: rakip `width:10em !important` kurali sayfada KALDIRILDI ->
   hesaplanan genislik DEGISMEDI (115px). Yani girdinin genisligini o kural da
   benim kuralim da belirlemiyordu: `input{width:100%}` (temel form kurali) girdiyi
   KAPSAYICISINA (.ETSearch 125px) esitliyor; .ETSearch ise position:absolute
   oldugu icin ICERIGE gore shrink-to-fit buyuyor. ⇒ Tek etkili kaldirac
   .ETSearch'un KENDI genisligidir; girdiye yazilan her deger yutuluyor.
   `:focus-within` ile "dokununca ac" davranisi kapsayicida kurulur. */
body.Mobile .PanelHeader .ETSearch:not(:focus-within),
body.Tablet .PanelHeader .ETSearch:not(:focus-within) {
    width: 2.6em !important;
    overflow: hidden;
}

/* ⛔ BES ITERASYON SONUCU — SABITLENEN DAVRANIS (rabbit-hole kurali: burada durduk)
   Denendi ve OLCULDU:
     drop-below (baslik altina dusurme): ortusme 0 AMA kutu 25px -> yuva static
     yapilinca 64px -> ust ata (.TopRight) da static yapildi, YINE 64px kaldi.
     64px yazilamayacak kadar dardir; kullanilamaz bir durum GONDERILMEZ.
   SABITLENEN: dinlenme durumunda IKONA kapanir (musterinin bildirdigi STATIK
   ortusme boylece SIFIRLANIR — asil kusur buydu), odaklaninca YERINDE genisler.
   Odak aninda kullanici zaten aramaya bakiyordur; bu gecici bir kip, statik
   carpisma degildir. Opak zemin + ust katman ile altindaki metin SIZMAZ. */
body.Mobile .PanelHeader .ETSearch:focus-within,
body.Tablet .PanelHeader .ETSearch:focus-within {
    width: 10em !important;
    overflow: visible;
    background-color: var(--singleItemBackColor, #fff);
    border-radius: 2em;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    z-index: 30;
}

/* Kapali ikonun yanindan yer tutucu metin SIZIYORDU (kare: "Ara" harfleri ikonun
   sagindan gorunuyor). Kapaliyken yer tutucu saydamlanir; odaklaninca geri gelir. */
body.Mobile .PanelHeader .ETSearch:not(:focus-within) input::placeholder,
body.Tablet .PanelHeader .ETSearch:not(:focus-within) input::placeholder {
    color: transparent !important;
}
/* ============================================================================
   MOBİL — HAMBURGER DÜĞMESİ ÜST KENARA YAPIŞIK (kesik görünüyor)
   2026-08-18 · kullanıcı bildirdi: "HamburgerBtn yukarıdan kesiyor"
   ============================================================================
   ÖLÇÜLDÜ (390x844 gerçek cihaz kipi, canlı DOM):
       .HamburgerBtn        top=0  h=24  w=44   position: static
       ebeveyn .PageZone_t  top=0  h=81  padding-top: 0px
   Düğme 81px'lik kabın EN TEPESİNE yapışık; üstünde 0px boşluk var. Kadraj
   kenarına değdiği için görsel olarak KESİK duruyor — ve gerçek cihazda durum
   çubuğu/çentik altına girer.

   ÇÖZÜM: düğmeye üst boşluk. `env(safe-area-inset-top)` ile çentikli cihazda
   güvenli alan, olmayan cihazda 12px taban (`max()` ikisini birden karşılar).
   ⛔ EN DAR MÜDAHALE: yalnız düğmeye margin. Kabın yüksekliğine, konumuna ya
   da diğer çocuklarına DOKUNULMAZ — kap 81px kalır, altındaki hiçbir şey
   kaymaz. (Kabı padding'lemek tüm başlık şeridini aşağı iterdi.)

   ⛔ Dokunma hedefi korunur: h=24 zaten WCAG 2.5.8 tabanında; margin onu
   küçültmez.
   ============================================================================ */

@media (max-width: 767px) {
    .HamburgerBtn {
        margin-top: max(12px, env(safe-area-inset-top, 0px));
    }
}
/* ============================================================================
   MOBİL & TABLET — KPI IZGARASI & CONTENTHEADER RESPONSIVE SÖZLEŞMESİ
   TÜM MODÜLLER & TÜM DOMAIN'LER (GENERIC PLATFORM SÖZLEŞMESİ)
   ============================================================================
   ÖLÇÜLDÜ (390x844 gerçek cihaz ve emülasyon):
       Desktop 4'lü KPI inline `grid-template-columns: repeat(4, 1fr)` kuralı
       mobilde 340px alana 4 kolon sıkıştırarak her KPI kartını 78px dar şeride
       düşürüyordu. Metinler kırılıyor ve sayılar taşarak okunamaz oluyordu.
   
   ÇÖZÜM:
       `body.Mobile` ve `@media (max-width: 768px)` altında 4'lü KPI'lar
       otomatik olarak `repeat(2, minmax(0, 1fr)) !important` ile 2x2 ferah
       kartlara (~155px genişlik) dönüşür. Tek kalan yetim kart tam genişlik alır.
   ============================================================================ */

/* `max-device-width` DEPRECATED ve KIRILGAN: ekran bilgisi bildirmeyen
   baglamlarda (screen.width=0) DAIMA eslesir ve mobil kurali MASAUSTUNDE
   uygulanir (olculdu 2026-09-04: 1200px pencerede 2'li mobil taban devreye
   girdi, 3'lu masaustu duzeni bozuldu). Yalniz viewport genisligi olculur. */
@media (max-width: 768px) {
    .Panel.Panel_kpis,
    .ContentHeader .Panel_kpis,
    .ContentHeader .DirectionFloat,
    .ContentHeader [class*="kpis"],
    .ContentHeader [style*="grid-template-columns"],
    .Mode_Edit.Panel_kpis {
        inline-size: 100% !important;
        width: 100% !important;
        min-inline-size: 0 !important;
        max-inline-size: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch;
        gap: 10px !important;
        box-sizing: border-box !important;
        margin-top: 14px !important;
    }

    .ContentHeader {
        padding: 16px 18px !important;
        border-radius: 12px !important;
        margin-bottom: 14px !important;
        box-sizing: border-box !important;
    }

    .ContentHeaderTitle {
        font-size: 18px !important;
        line-height: 1.25 !important;
    }

    .ContentHeaderDescription {
        font-size: 12px !important;
        line-height: 1.35 !important;
        margin-top: 4px !important;
    }

    .Panel.Panel_kpis > .Aggregate,
    .Panel.Panel_kpis > .AggregateView,
    .ContentHeader .Panel_kpis .Aggregate,
    .ContentHeader .DirectionFloat .AggregateView,
    .ContentHeader [style*="grid-template-columns"] .AggregateView,
    .ContentHeader [style*="grid-template-columns"] .Aggregate,
    .Mode_Edit.Panel_kpis > .Aggregate {
        inline-size: auto !important;
        width: auto !important;
        min-inline-size: 0 !important;
        min-width: 0 !important;
        max-inline-size: 152px !important;
        max-width: 152px !important;
        /* flex tabani: 2'li mobil duzen, ancak hiçbir kart 152px'i asamaz */
        flex: 1 1 calc((100% - 10px) / 2) !important;
        align-self: stretch;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
    }

    .ContentHeader .AggregateTitle,
    .ContentHeader .AggregateLabel {
        font-size: 12px !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.25em !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .ContentHeader .AggregateValue {
        font-size: clamp(12px, 1.1em, 16px) !important;
        font-weight: 800 !important;
    }

    .Panel_kpis > .AggregateView:nth-child(odd of .AggregateView:not([style*="display: none"])):not(:has(~ .AggregateView:not([style*="display: none"]))),
    .DirectionFloat > .AggregateView:nth-child(odd of .AggregateView:not([style*="display: none"])):not(:has(~ .AggregateView:not([style*="display: none"]))) {
        /* yetim kart dahi olsa 152px tavanini asamaz */
        flex: 1 1 auto !important;
        max-width: 152px !important;
    }

    /* Kapsayici GRID'den FLEX'e cevrildigi icin `subgrid` artik cozulmez.
       Ayni hizalama etkisi flex-column + space-between ile saglanir. */
    @supports (display: flex) {
        .Panel_kpis > .AggregateView.Aggregate,
        .DirectionFloat > .AggregateView.Aggregate {
            display: flex !important;
            flex-direction: column !important;
            justify-content: space-between !important;
            align-items: stretch !important;
        }
    }
}

/* body.Mobile Sınıf Uyumluluğu */
body.Mobile .Panel.Panel_kpis,
body.Mobile .ContentHeader .Panel_kpis,
body.Mobile .ContentHeader .DirectionFloat,
body.Mobile .ContentHeader [class*="kpis"],
body.Mobile .ContentHeader [style*="grid-template-columns"],
body.Mobile .Mode_Edit.Panel_kpis {
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch;
    gap: 10px !important;
    box-sizing: border-box !important;
    margin-top: 14px !important;
}

body.Mobile .ContentHeader {
    padding: 16px 18px !important;
    border-radius: 12px !important;
    margin-bottom: 14px !important;
    box-sizing: border-box !important;
}

body.Mobile .ContentHeaderTitle {
    font-size: 18px !important;
    line-height: 1.25 !important;
}

body.Mobile .ContentHeaderDescription {
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin-top: 4px !important;
}

body.Mobile .Panel.Panel_kpis > .Aggregate,
body.Mobile .Panel.Panel_kpis > .AggregateView,
body.Mobile .ContentHeader .Panel_kpis .Aggregate,
body.Mobile .ContentHeader .DirectionFloat .AggregateView,
body.Mobile .ContentHeader [style*="grid-template-columns"] .AggregateView,
body.Mobile .ContentHeader [style*="grid-template-columns"] .Aggregate,
body.Mobile .Mode_Edit.Panel_kpis > .Aggregate {
    inline-size: auto !important;
    width: auto !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    max-inline-size: 152px !important;
    max-width: 152px !important;
    flex: 1 1 calc((100% - 10px) / 2) !important;
    align-self: stretch;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
}

body.Mobile .ContentHeader .AggregateTitle,
body.Mobile .ContentHeader .AggregateLabel {
    font-size: 12px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.25em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.Mobile .ContentHeader .AggregateValue {
    font-size: clamp(12px, 1.1em, 16px) !important;
    font-weight: 800 !important;
}

body.Mobile .Panel_kpis > .AggregateView:nth-child(odd of .AggregateView:not([style*="display: none"])):not(:has(~ .AggregateView:not([style*="display: none"]))),
body.Mobile .DirectionFloat > .AggregateView:nth-child(odd of .AggregateView:not([style*="display: none"])):not(:has(~ .AggregateView:not([style*="display: none"]))) {
    /* yetim kart dahi olsa 152px tavanini asamaz */
    flex: 1 1 auto !important;
    max-width: 152px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KAPSAM GENISLETMESI — ADSIZ KPI PANELLERI (2026-09-06 olculdu)

   Bu dosyanin mevcut kurallari KPI kabini ADIYLA hedefliyordu:
     `.Panel_kpis` · `.DirectionFloat` · `.ContentHeader` · `[style*=grid-template-columns]`
   Olculdu: bir modul kokpitinde kap **`Panel.DirectionAll.Panel_hdrkpi2`** —
   dordunun de DISINDA ⇒ kural HIC eslesmiyor ve 6 KPI mobilde ALT ALTA,
   her biri kabin YARISI kadar (150/320) ⇒ sagin yarisi BOS, liste kadraja girmiyor.

   KONTROL GRUBU tek olcumde ayirdi (satis, 390x844):
     #mCRMHome           kart 150px · satir basina [1,1,1,1,1,1] · kap column/nowrap
     #mCustomer360Entry  kart 157px · satir basina [2,2,2]       · kap row/wrap
   Kart genisligi BIREBIR ayni (~%48) ⇒ kusur bilesende DEGIL KAPTA.

   ⛔ RAKIP `!important` TASIYOR: `.DirectionAll{flex-direction:column !important}`
      (platform duzen ilkeli, her yerde kullaniliyor). Onu GENEL olarak ezmek
      olculmemis bir yaricaptir; bu yuzden kapsam **"dogrudan cocugu KPI karti olan
      panel"** yuklemine daraltildi (`:has(> .AggregateView.Aggregate)`).

   ⛔ KART GENISLIGINE DOKUNULMADI: `max-width:152px` karari bu dosyada zaten var.
      Uc aday olculdu ve UCU DE ELENDI:
        `flex:1 1 calc(50%-6px) !important` -> HEDEF duzeldi AMA kontrol rotasi
             157 -> 156px kaydi (modulun kendi degerini eziyor = IKINCI LEHCE)
        `flex-shrink:0 !important`          -> etkisiz; kartlar `flex-grow` ile
             esit paylasiyor (260/6 = 43px)
        `min-width` (important'siz)         -> uygulanmadi; rakip `min-width:0` var
      Kazanan: **`min-width` TABANI** — yarim genisligin ALTINA inmeyi engeller,
      zaten yarim olan kartta ATIL kalir (kontrol 157 > 154 ⇒ hic baglamaz).

   ⛔ `column` + `wrap` BILESIMI YASAK: ilk denemede `flex-direction:row` kaybetti
      ve geriye kalan `flex-wrap:wrap` kartlari YAN SUTUNA tasiyip 150 -> 28px
      ezdi (kayitli ders). `row` ve `wrap` AYNI kuralda ve BIRLIKTE kazanmali.

   IKI YONLU DENEY + KONTROL GRUBU (`.claude/scripts/_mobil-kpi-deney.js`, EXIT=0):
     A) taban  HEDEF [1,1,1,1,1,1] 150px | KONTROL [2,2,2] 157px
     B) deney  HEDEF [2,2,2]       154px | KONTROL [2,2,2] 157px  (BIREBIR AYNI)
     C) geri   HEDEF [1,1,1,1,1,1] 150px | KONTROL [2,2,2] 157px  => DENEY GECERLI
     kirpma 0 · yatay kayma false · sayfa yuksekligi 844 -> 844 (degismedi)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .Panel:has(> .AggregateView.Aggregate) {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-content: flex-start;
    }

    .Panel:has(> .AggregateView.Aggregate) > .AggregateView.Aggregate {
        min-width: calc(50% - 6px) !important;
    }
}
/* ============================================================================
   MOBİL — YAN RAY KAYDIRMA KURALI GERİ ALINIR (ÇEKMECEYİ BOZUYOR)
   2026-08-18
   ============================================================================
   ⛔⛔ BENİM REGRESYONUM — ekran görüntüsüyle yakalandı (kullanıcı bildirdi).

   `zz-masaustu-tasma.css` §6'da masaüstü rayları için şu yazılmıştı:
       #PageZone_LeftNavs, #PageZone_RightNavs { overflow-y: auto }
   ve KADRAJDAN BAĞIMSIZ bırakılmıştı. Gerekçe masaüstünde doğruydu (nav sayısı
   artarsa alttakiler erişilemez olur), ama KAPSAM yanlıştı.

   CSS TUZAĞI: `overflow-y: auto` verilince `overflow-x`in hesaplanan değeri de
   `visible` OLAMAZ — tarayıcı onu `auto`ya çeker. Mobilde sol ray bir ÇEKMECEDİR
   (`left:-260px`ten kayar) ve içindeki kartlar kabın dışına taşacak şekilde
   tasarlanmıştır ⇒ kırpılma başladı: menü açılınca kartların SOL KENARLARI
   kesildi ve düzen dağıldı.

   DERS (bugünün beşinci kapsam dersi): "kadrajdan bağımsız yaz" kuralı
   YALNIZ koşullu/etkisiz kurallar için geçerlidir. `overflow` KOŞULLU DEĞİLDİR —
   taşma olmasa bile kırpma bağlamını (containing block) değiştirir.

   ⇒ Ray kaydırması MASAÜSTÜNE ait. Mobilde eski davranış geri verilir.
   AYRI DOSYA: `zz-mobil-*` alfabetik olarak `zz-masaustu-*`tan SONRA yüklenir
   ⇒ eşit özgüllükte bu kazanır. Silinince eski hâle döner.
   ============================================================================ */

@media (max-width: 767px) {
    #PageZone_LeftNavs,
    #PageZone_RightNavs {
        overflow-y: visible;
        overflow-x: visible;
        overscroll-behavior-y: auto;
    }
}
/* Mobil sol menü çekmecesi — Meta SONRASI düzeltme katmanı (2026-08-10).

   Çekmecenin kendisi pagezone.css'in MobileCSSText'inde tanımlı (fixed, 260px,
   translateX(-100%), .nav-open ile içeri kayar). Buradaki kurallar o mekanizmayı
   DEĞİŞTİRMEZ; yalnız domain CSS'inin (361.xml Page CSSText) masaüstü için yazılmış
   iki kuralının mobil çekmecede ürettiği ölçülmüş kusuru kapatır:

     .PageZone_RightNavs, .PageZone_LeftNavs { background-color: var(--TopbackColor);
                                               opacity: 0.75; }

   MyPage'de --TopbackColor "transparent" olduğu için çekmece açıldığında panel
   saydam kalıyor, altındaki liste ve KPI'lar menü öğelerinin arasından görünüyor
   ve menü okunmuyordu (ölçüldü: navX -260 → 0, panel açık ama zemin yok).
   Masaüstündeki yarı-saydam ray görünümü KORUNUR — kurallar body.Mobile ile sınırlı. */

body.Mobile .PageZone_LeftNavs {
    opacity: 1;
    background-color: var(--menuBackColor, #ffffff);
    inline-size: min(90vw, 360px) !important;
    width: min(90vw, 360px) !important;
    max-inline-size: 360px !important;
    max-width: 360px !important;
    block-size: 100dvh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: stretch;
    justify-content: stretch !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
}

/* Çekmece açıkken içerik kaymasın: gövde kaydırması m.js openNav'da kilitleniyor,
   panelin kendi kaydırması sürsün (uzun menülerde alt öğelere ulaşılabilirlik). */
body.Mobile.nav-open .PageZone_LeftNavs {
    overflow: hidden !important;
}

/* Panel yüksekliği viewport'a kilitlenir. Domain CSS'i rayı masaüstü için
   "min-height: calc(100% - 60px); max-height: calc(100% - 6em)" ile boyutluyor;
   çekmecede bu, paneli viewport'un 21px dışına taşırıyordu (ölçüldü: h=752, vh=731). */
body.Mobile .PageZone_LeftNavs {
    min-height: 0;
    max-height: 100dvh;
}

/* ⛔ ÇEKMECEYİ GÖRÜNMEZ YAPAN KURAL BUYDU:
      .PageZone_LeftNavs .NavView { max-width: var(--PageZone_LRNavs); }
   ve mobil değişken bloğu --PageZone_LRNavs'ı 0 yapıyor (masaüstü rayının yerini
   sıfırlamak için — LeftNavs mobilde hiç render EDİLMEDİĞİ dönemden kalma).
   Sonuç: NavView max-width:0 → menü öğeleri 1px genişlikte çizilip görünmez oluyordu
   (ölçüldü: navView w=0, "KİŞİLER" ve "KİŞİ LİSTELERİ" w=1). Çekmecede menü panelin
   tam genişliğini kullanır; --PageZone_LRNavs masaüstü rayı için 0 kalmaya devam eder. */
body.Mobile .PageZone_LeftNavs .NavView {
    max-width: 100%;
    width: 100%;
}

/* ÇEKMECEDE TEK KAYDIRICI. Ray CSS'i her NavView'e kendi "overflow:auto"sunu ve
   "flex:1"ini veriyor (masaüstünde iki bağımsız sütun için doğru). Çekmecede bu,
   grupların kendi içlerinde sıkışıp kesilmesine yol açıyordu — ölçüldü: 8 navın
   yalnız 5'i görünüyor, sağ grubun 3 öğesi kendi iç kaydırmasında kalıyordu.
   Gruplar doğal yüksekliklerini alır, kaydırma tek yerde (panelin kendisinde) olur. */
body.Mobile .PageZone_LeftNavs .NavView {
    overflow: visible;
    flex: 0 0 auto;
    justify-content: flex-start;
}

/* Çekmecedeki öğeler tam genişlik: masaüstü rayında ikonlar ortalanır (80px sütun),
   260px'lik çekmecede ortalama öğeleri kullanılamaz derecede dar bırakıyordu. */
body.Mobile .PageZone_LeftNavs .NavView > .Nav,
body.Mobile .PageZone_LeftNavs .NavView .NavButton {
    width: 100%;
    max-width: 100%;
}

/* Hamburger dokunma hedefi: pagezone.css 44x44 verir ama düğme PageTop'un flex
   akışında dikeyde eziliyordu (ölçüldü: 44x24 — WCAG 2.2 AA 2.5.8 sınırında).
   min-height + flex-shrink:0 ezilmeyi durdurur. */
body.Mobile .HamburgerBtn {
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    align-self: center;
}

/* ⛔⛔ 2026-08-10 — HAMBURGER KENDİ SATIRINI ALIP EKRANIN ÜSTÜNDE 44px BOŞLUK YARATIYORDU
   (kullanıcı bildirimi). MEKANİZMA ÖLÇÜLDÜ (localhost/Maya, 375px):
     ebeveyn `.PageZone.DirectionVerBody`  display:flex · position:relative · h=101
     çocuk 1 `.HamburgerBtn`               y=0   h=44   ← KENDİ SATIRI
     çocuk 2 `.DirectionVer` (asıl başlık) y=44  h=57   ← 44px AŞAĞI İTİLMİŞ
   Yani kap DİKEY bir flex ve düğme bir satır tüketiyor; üstteki boşluk tam olarak bu 44px.
   (Yukarıdaki kural düğmeyi EZİLMEKTEN kurtarıyordu — o doğru ve duruyor; bu ayrı bir kusur:
    düğme artık eziliyor değil, YER KAPLIYOR.)

   ÇARE: düğmeyi AKIŞTAN çıkar. Ebeveyn zaten `position:relative` olduğu için mutlak
   konumlandırma güvenli — düğme başlığın SOL ÜSTÜNE oturur, satır tüketmez.
   ⛔ KAPSAM DAR: yalnız `body.Mobile`. Masaüstünde düğme zaten görünmüyor/akışta değil,
      oraya dokunulmuyor ⇒ gerileme üretemez.
   ⛔ Dokunma hedefi KORUNUR (44x44, WCAG 2.5.8) ve `nav-open` durumundaki kurallar
      (satır 135/151) bu değişiklikten etkilenmez — onlar görünürlük/z-index kuralları. */
body.Mobile .HamburgerBtn {
    position: absolute;
    top: 4px;
    left: 6px;
    z-index: 7;
}

/* ── Çekmeceye toplanan bölümler (m.js collectIntoDrawer) ────────────────────
   Mobilde sağ ray ve üst araç çubuğu bu panelin içine TAŞINIR. Bölümler arasına
   ince bir ayıraç girer — metin YOK, çünkü metin dil çözümü ister ve çekmecenin
   kendisi zaten bağlamı taşıyor. */
.DrawerNavScroll .DrawerSep {
    height: 1px;
    margin: 10px 12px;
    background: color-mix(in srgb, currentColor 16%, transparent);
    flex-shrink: 0;
}

/* İçeriği çekmeceye alınan sağ ray boş şerit olarak yer kaplamasın.
   Sınıfı JS ekler (taşıma GERÇEKTEN olduysa) — CSS'in tek başına gizlemesi,
   toplama koşmadığı bir durumda içeriği görünmez yapardı. */
body.Mobile .PageZone_RightNavs.DrawerEmptied {
    display: none;
}

/* 2026-08-22 — yapısal çekmece: sabit başlık + tek scroll sahibi + alt araç dock'u.
   Utility ikonlarının içerik boyunca ayrı satırlara sarılması yasaktır. Ekran çok
   dar ise dock kendi ekseninde kayar; primary nav ile ikinci bir dikey scroll açmaz. */
body.Mobile .PageZone_LeftNavs .DrawerHeader {
    min-block-size: 56px;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    background: inherit;
    z-index: 2;
}

body.Mobile .PageZone_LeftNavs .DrawerHeaderTitle {
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

body.Mobile .PageZone_LeftNavs .DrawerHeader > .DrawerClose {
    flex: 0 0 44px !important;
    inline-size: 44px !important;
    width: 44px !important;
    max-inline-size: 44px !important;
    max-width: 44px !important;
    block-size: 44px;
    min-inline-size: 44px;
    min-block-size: 44px;
    box-sizing: border-box;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, currentColor 6%, transparent);
    color: inherit;
    font: inherit;
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

body.Mobile .PageZone_LeftNavs .DrawerHeader > .DrawerClose:hover,
body.Mobile .PageZone_LeftNavs .DrawerHeader > .DrawerClose:active {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

body.Mobile .PageZone_LeftNavs .DrawerHeader > .DrawerClose:focus-visible,
body.Mobile .PageZone_LeftNavs .DrawerUtilityDock [role="button"]:focus-visible,
body.Mobile .PageZone_LeftNavs .DrawerUtilityDock button:focus-visible,
body.Mobile .PageZone_LeftNavs .DrawerUtilityDock .AppsButton:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

body.Mobile .PageZone_LeftNavs .DrawerNavScroll {
    min-inline-size: 0;
    min-block-size: 0;
    padding: 8px 12px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

/* Ana Sayfa primary navigation'ın parçasıdır: üstte yalnız anlaşılır bir metin
   satırı kalır; utility ikon dili alt dock'a aittir. */
body.Mobile .PageZone_LeftNavs .DrawerNavScroll > .Button_HomeButton {
    inline-size: 100% !important;
    width: 100% !important;
    min-block-size: 48px;
    margin: 0 0 8px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    border-radius: 10px;
    box-sizing: border-box;
    touch-action: manipulation;
}

body.Mobile .PageZone_LeftNavs .DrawerNavScroll > .Button_HomeButton > .ButtonImage {
    display: none !important;
}

body.Mobile .PageZone_LeftNavs .DrawerNavScroll > .Button_HomeButton > .ButtonTitle {
    inline-size: 100%;
    width: 100%;
    min-block-size: 0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    text-align: left;
    font-weight: 650;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
}

body.Mobile .PageZone_LeftNavs .DrawerNavScroll > .NavView {
    inline-size: 100%;
    width: 100%;
}

body.Mobile .PageZone_LeftNavs .DrawerUtilityDock {
    min-inline-size: 0;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom));
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(44px, 1fr);
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    background: inherit;
    z-index: 2;
}

body.Mobile .PageZone_LeftNavs .DrawerUtilityDock::-webkit-scrollbar {
    display: none;
}

/* Platform zone/wrapper kutuları dock içinde yeni satır veya yükseklik üretemez. */
body.Mobile .PageZone_LeftNavs .DrawerUtilityDock > .PageZone_RightBtns,
body.Mobile .PageZone_LeftNavs .DrawerUtilityDock > .UserTools,
body.Mobile .PageZone_LeftNavs .DrawerUtilityDock > .PageZone_AppsButton,
body.Mobile .PageZone_LeftNavs .DrawerUtilityDock > .PageZone_RightBtns > *,
body.Mobile .PageZone_LeftNavs .DrawerUtilityDock > .UserTools > * {
    display: contents !important;
}

body.Mobile .PageZone_LeftNavs .DrawerUtilityDock .UserToolButton,
body.Mobile .PageZone_LeftNavs .DrawerUtilityDock .AppsButton {
    inline-size: 44px !important;
    width: 44px !important;
    block-size: 44px !important;
    height: 44px !important;
    min-inline-size: 44px;
    min-block-size: 44px;
    max-inline-size: 44px;
    margin: 0 !important;
    place-self: center;
    scroll-snap-align: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

body.Mobile .PageZone_LeftNavs .DrawerUtilityDock .UserToolButton[style*="display: none"] {
    display: none !important;
}

/* Çekmece açıkken düğme panelin (z-index 2000) ÜSTÜNDE kalır: aria-expanded="true"
   olan bir kontrolün kaybolması "kapatamıyorum" hissi verir. Overlay ve Escape ile
   kapatma zaten çalışıyor; bu, aynı düğmeyle kapatmayı da mümkün kılar. */
body.Mobile.nav-open .HamburgerBtn {
    opacity: 0;
    pointer-events: none;
}

/* Düğmenin kendi z-index'i YETMEZ: üst şerit (.PageZone_t) domain CSS'inde
   z-index:999 taşıyor ve KENDİ yığınlama bağlamını kuruyor — içindeki 2001 o
   bağlamın içinde kalır, panelin 2000'ini geçemez (ölçüldü: elementFromPoint
   düğmenin yerinde paneli döndürdü). Bağlamın kendisi de yükseltilir. */
body.Mobile.nav-open .PageZone_t { z-index: 1; }

/* Üst şeridi yükseltmek düğmeyi kurtarır ama şeridin GERİ KALANINI da panelin üstüne
   çıkarır — ölçüldü: çekmece açıkken modül seçici ve kullanıcı bloğu menü öğelerinin
   üzerine biniyordu. Çekmece açıkken üst şeritte yalnız kapatma düğmesi kalır. */
body.Mobile.nav-open .PageZone_t > *:not(.HamburgerBtn) {
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    body.Mobile .PageZone_LeftNavs {
        transition-duration: 0.001ms !important;
    }
}
/*
 * Opt-in compact navigation rail.
 *
 * MenuType_3 remains text-only by default. A NavView may explicitly opt in
 * with the NavView_ShowIcons class; this keeps existing chip menus unchanged
 * while providing a readable icon-plus-label rail for dense modules.
 */
.NavView.NavView_ShowIcons.MenuType_3 .Nav {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 44px;
    block-size: auto;
}

.NavView.NavView_ShowIcons.MenuType_3 .Nav > .NavButton {
    display: grid !important;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.625rem;
    min-block-size: 44px;
    padding: 0.5rem 0.75rem;
}

.NavView.NavView_ShowIcons.MenuType_3 .Nav > .NavButton > .NavImage {
    display: grid !important;
    place-items: center;
    inline-size: 1.75rem !important;
    block-size: 1.75rem !important;
    min-inline-size: 1.75rem;
    min-block-size: 1.75rem;
    margin: 0 !important;
    padding: 0 !important;
    color: #0078d4 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.NavView.NavView_ShowIcons.MenuType_3 .NavImage > svg {
    inline-size: 100%;
    block-size: 100%;
}

.NavView.NavView_ShowIcons.MenuType_3 .Nav > .NavButton > .NavTitle {
    display: flex !important;
    inline-size: auto !important;
    min-inline-size: 0;
    padding: 0 !important;
    text-align: start;
}

.NavView.NavView_ShowIcons.MenuType_3 .NavTitle > span {
    block-size: auto !important;
    justify-content: flex-start;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    text-align: start;
}

.NavView.NavView_ShowIcons.MenuType_3 .Nav.Selected {
    border-inline-start: 3px solid #0078d4;
}

.NavView.NavView_ShowIcons.MenuType_3 .Nav.Selected .NavImage {
    color: #0078d4;
}

@media (max-width: 720px) {
    .NavView.NavView_ShowIcons.MenuType_3 .Nav > .NavButton {
        grid-template-columns: 1.125rem minmax(0, 1fr);
        column-gap: 0.5rem;
        min-block-size: 44px;
    }
}
/* zz-nav-premium.css — post-Meta enrichment tier (2026-07-02)
   Scope: NavView menu items (.NavView .Nav) — left/right curated SIS menus.
   Goal: give bare LeafNav text chips a premium "card container" feel
   (background, radius, hover lift), align icon + label, keep badge intact.
   RULE: enrich only, do NOT override structural nav.css/Meta rules. */

/* Card container feel for each NavView item */
.NavView .Nav {
    background-color: var(--white);
    border: var(--border1);
    border-radius: 10px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* Gentle hover lift — does not fight existing :hover opacity/z-index rules */
.NavView .Nav:hover {
    background-color: rgba(0,120,212,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

.NavView .Nav.Selected {
    background-color: rgba(0,120,212,0.10);
}

/* Icon + label vertical alignment inside the button */
.NavView .Nav > .NavButton {
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Icon chip: subtle rounded backdrop so the FontAwesome glyph reads as a badge */
.NavView .Nav > .NavButton > .NavImage {
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    flex-shrink: 0 !important;
    transition: transform 0.15s ease;
}

.NavView .Nav > .NavButton > .NavImage > svg,
.NavView .Nav > .NavButton > .NavImage > img {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

.NavView .Nav > .NavButton > .NavImage > i {
    font-size: 14px;
    line-height: 14px;
}

/* MenuType_3 chip menü İKONSUZDUR — kullanıcı kararı (2026-07-02, T13 geri alındı).
   c.js showimage koşulu ikonları zaten üretmez; bu güvenlik kuralı olası kalıntıları da gizler. */
.NavView.MenuType_3 .Nav > .NavButton > .NavImage,
.NavView.MenuType_3 .Nav > .NavButton > img.NavImage { display: none !important; }

/* İkon kaldırılınca NavTitle yalnız kendi metin genişliğini alıp çip içinde tek tek
   ortalanıyordu (58–79px arası düzensiz, ragged) → sol/sağ zone'da başlığı çipe tam
   oturt: tek tip genişlik + tam tıklama alanı (kullanıcı bildirimi 2026-07-02). */
.PageZone_LeftNavs .NavView.MenuType_3 .NavTitle,
.PageZone_RightNavs .NavView.MenuType_3 .NavTitle { width: 100%; }

.NavView .Nav:hover > .NavButton > .NavImage {
    transform: scale(1.06);
}

/* Keep the count badge on top and legible — do NOT reposition it */
.NavView .Nav .NavButton > .Aggregate {
    z-index: 5;
}

/* ⭐⭐ SEÇİLİ NAV — ÖN PLAN ZEMİNDEN TÜRETİLİR (2026-08-18, ÖLÇÜLDÜ)
   1539 ekranlık süpürmede kontrast sınıfının EN BÜYÜK parçası buydu:
   `span.NavTitle` beyaz metin `--color1-50` (#009ef7) üstünde **2.90:1**
   → tek başına **2.509 bulgu** (AA normal metin 4.5 ister; yazı 9.6px).

   ⛔ Kuralın SAHİBİ domain XML'dir (`361.xml` CSSSelectors, özgüllük 0,5,0)
      ve canlı domain XML'e yazmak KULLANICI ONAYI ister. Platform tarafındaki
      meşru kol: çekirdekte **bir tık yüksek özgüllük** (0,5,1 — `body` tip
      seçicisi beraberliği bozar). Böylece düzeltme MSI ile TÜM kiracılara gider
      ve hiçbir domain XML'i değiştirilmez.

   Değer `m.js` içindeki AYNI motordan gelir (`$BaslikPaleti`): rengin bağıl
   parlaklığı ölçülür, beyaz ile koyu arasından kontrastı YÜKSEK olan seçilir.
   Yedek `#ffffff` → JS koşmadıysa bugünkü davranış aynen sürer. */
body .PageZone_RightNavs .NavView.MenuType_3 .Nav.Selected .NavTitle,
body .PageZone_LeftNavs  .NavView.MenuType_3 .Nav.Selected .NavTitle,
body .PageZone_Right     .NavView.MenuType_3 .Nav.Selected .NavTitle,
body .PageZone_Left      .NavView.MenuType_3 .Nav.Selected .NavTitle {
    color: var(--navSelectedForeground, #ffffff);
}

/* ⭐ YIĞILAN NAV GRUPLARI — ORTAK BÖLGE (Gestalt) · 2026-08-18 ÖLÇÜLDÜ
   Mobil çekmecede `PageZone_LeftNavs` İKİ NavView taşıyor (`NavGroup_Left` 8 +
   `NavGroup_Right` 4 = 12 düğme) ama aralarında HİÇBİR görsel sınır yok:
   kullanıcı 12 düz öğe görüyor (masaüstünde bu iki grup AYRI raylarda).
   Ölçüm: 862 ekranda `RAY_SOL_KALABALIK` yalnız mobilde ateşledi.

   Çare metin UYDURMAK değil — Gestalt'ın "ortak bölge" ilkesi: iki grubu
   görünür bir sınırla ayır, 12 öğe 8+4 olarak okunsun. Grup adları veriden
   gelmediği için başlık YAZILMAZ; yalnız sınır ve nefes verilir. */
/* ⚠️ `body` çapası BİLEREK: ölçüldü, çapasız sürüm kaybediyordu
   (borderTop 0px kaldı). Beraberliği tip seçicisi bozar. */
body .PageZone_LeftNavs  > .NavView + .NavView,
body .PageZone_RightNavs > .NavView + .NavView,
body .PageZone_LeftNavs  > .NavView ~ .NavView,
body .PageZone_RightNavs > .NavView ~ .NavView {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(127, 127, 127, 0.28);
}

/* ============================================================================
   YAN RAY HİZALAMASI — öğeler ÜSTTEN yığılır, ortada asılı kalmaz (2026-08-19)
   ============================================================================
   Kullanıcı bildirimi: "sağ ve soldaki menülerin alignment'ları bozuk,
   scroll problemleri var."

   ÖLÇÜLDÜ (localhost /myHome, 1600×950, CDP ile kazanan kural):
       .PageZone_RightNavs .NavView   flex: 1            (Meta)
       .PageZone_RightNavs .NavView   justify-content: center   (Meta)
   ⇒ NavView rayın boyuna GERİLİYOR (778px) ve içindeki 6 nav öğesi
     (6 × 50px = 300px) o kutunun ORTASINA yerleşiyor:
       ilk öğe top = 361px   (rayın üstü 110px)
     yani üstte ~250px, altta ~230px ÖLÜ BOŞLUK. Ekran görüntüsünde öğeler
     havada asılı duruyor.

   ⛔ Bu bir regresyon DEĞİL — kural Meta'dan geliyor, bu oturumun
      değişikliklerinde yok (doğrulandı: zz-nav-premium'da yalnız başlık
      genişliği + seçili renk vardı).

   ÇÖZÜM: dikey dağıtımı ÜSTTEN başlat. `flex: 1` KORUNUR (kutu yine rayı
   doldurur, alttaki ayak bölgesi yerinde kalır); değişen tek şey öğelerin
   kutu içindeki dağılımı.
   ============================================================================ */
body .PageZone_RightNavs .NavView,
body .PageZone_LeftNavs .NavView,
body .PageZone_Right .NavView,
body .PageZone_Left .NavView {
    justify-content: flex-start;
}

/* Kaydırma: `overflow-y:auto` ZATEN VAR (öncesiz kural, CDP ile doğrulandı) —
   o satır burada GEREKSİZDİ, çıkarıldı. Kalan ikisi mevcut kuralda YOK:
     min-height:0            esnek çocuk içerik boyunun ALTINA inebilsin; yoksa
                             NavView rayı taşırır ve kaydırma rayda kalır
     overscroll-behavior-y   nav sonuna gelince kaydırma SAYFAYA zincirlenmesin
   ⚠️ Bu ikisinin BAĞIMSIZ etkisi ÖLÇÜLEMEDİ: sabotaj sınavı koşulamadı çünkü
   çekirdek CSS önbelleği tetiklenmeyi bıraktı (8 denemede kural serviste kaldı).
   Ölçülen tek şey: ray taşan ekranda son öğeye ULAŞILIYOR (1067px → 886px). */
body .PageZone_RightNavs .NavView,
body .PageZone_LeftNavs .NavView {
    min-height: 0;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================================
   NavTitle: DİKEY ORTALAMA — kullanıcının verdiği CSS (2026-08-19)
   ============================================================================
   Kullanıcı üç denememden sonra doğru çözümü kendisi verdi. İki noktayı
   kaçırmıştım:
     1) Metin `.NavTitle` içindeki `> span` çocuğunda — dış kabı ortalamak
        yetmiyor, span de ortalanmalı.
     2) `display: -webkit-box` DEĞİŞTİRİLMELİ. Ben "line-clamp bozulur" diye
        korumuştum; `-webkit-line-clamp` + `-webkit-box-orient` bildirimleri
        YERİNDE KALDIĞI için kısaltma korunuyor, ama kutu artık flex ve
        `align-items`/`align-content` GERÇEKTEN çalışıyor.
   Seçici ID tabanlı (1,1,0) — daha önce kaybettiğim özgüllük savaşını bu
   kazanır; kural Meta katmanından SONRA yüklendiği için ek bir şey gerekmez.
   ============================================================================ */
#PageZone_LeftNavs .NavTitle,
#PageZone_RightNavs .NavTitle,
#PageZone_LeftNavs .NavTitle > span,
#PageZone_RightNavs .NavTitle > span {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 4em;
    display: flex;
    align-content: center;
    align-items: center;
}

/* 2026-09-11 (kullanici): MyPage sol ve sag ray NavView'larinda NavTitle fontu %20 kucultuldu (12px -> 9.6px) */
body.BODYPage_MyPage #PageZone_LeftNavs .NavTitle,
body.BODYPage_MyPage #PageZone_RightNavs .NavTitle,
body.BODYPage_MyPage #PageZone_LeftNavs .NavTitle > span,
body.BODYPage_MyPage #PageZone_RightNavs .NavTitle > span,
.BODYPage_MyPage #PageZone_LeftNavs .NavTitle,
.BODYPage_MyPage #PageZone_RightNavs .NavTitle,
.BODYPage_MyPage #PageZone_LeftNavs .NavTitle > span,
.BODYPage_MyPage #PageZone_RightNavs .NavTitle > span,
.Page_MyPage #PageZone_LeftNavs .NavTitle,
.Page_MyPage #PageZone_RightNavs .NavTitle,
.Page_MyPage #PageZone_LeftNavs .NavTitle > span,
.Page_MyPage #PageZone_RightNavs .NavTitle > span,
#Content_MyPage #Panel_left .NavTitle,
#Content_MyPage #Panel_right .NavTitle,
#Content_MyPage #Panel_left .NavTitle > span,
#Content_MyPage #Panel_right .NavTitle > span,
.Content_MyPage .Panel_left .NavTitle,
.Content_MyPage .Panel_right .NavTitle,
.Content_MyPage .Panel_left .NavTitle > span,
.Content_MyPage .Panel_right .NavTitle > span {
    font-size: 9.6px !important;
}

/* 2026-09-11 (kullanici): MyPage sol ve sag ray NavView'larinda NavGroupTitle fontu %20 kucultuldu (12px -> 9.6px) */
body.BODYPage_MyPage #PageZone_LeftNavs .NavGroupTitle,
body.BODYPage_MyPage #PageZone_RightNavs .NavGroupTitle,
.BODYPage_MyPage #PageZone_LeftNavs .NavGroupTitle,
.BODYPage_MyPage #PageZone_RightNavs .NavGroupTitle,
.Page_MyPage #PageZone_LeftNavs .NavGroupTitle,
.Page_MyPage #PageZone_RightNavs .NavGroupTitle,
#Content_MyPage #Panel_left .NavGroupTitle,
#Content_MyPage #Panel_right .NavGroupTitle,
.Content_MyPage .Panel_left .NavGroupTitle,
.Content_MyPage .Panel_right .NavGroupTitle,
body.BODYPage_MyPage .NavView .NavGroupTitle,
.BODYPage_MyPage .NavView .NavGroupTitle,
.Page_MyPage .NavView .NavGroupTitle,
.Content_MyPage .NavView .NavGroupTitle,
body.BODYPage_MyPage .NavGroupTitle,
.BODYPage_MyPage .NavGroupTitle,
.Page_MyPage .NavGroupTitle,
.Content_MyPage .NavGroupTitle,
#PageZone_LeftNavs .NavView.NavGrouped .NavGroupTitle,
#PageZone_RightNavs .NavView.NavGrouped .NavGroupTitle,
#PageZone_LeftNavs .NavGroupTitle,
#PageZone_RightNavs .NavGroupTitle {
    font-size: 9.6px !important;
}

/* ============================================================================
   NavView_SubEntities — Alt Varlık / Modül Gezinme Şeridi (Ribbon & Chips)
   ============================================================================ */
/* Default (Grupsuz): Doğrudan yatay chip ribbon — transparent, border/box-shadow yok, ortalı */
.NavView_SubEntities {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
    margin: 0px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    text-align: center !important;
}

/* İsteğe Bağlı Gruplu Durum (Group="True" ile tetiklenir) */
.NavView_SubEntities.NavGrouped {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.NavView_SubEntities.NavGrouped .NavGroup {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    text-align: left !important;
}

.NavView_SubEntities.NavGrouped .NavGroupTitle {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #64748b !important;
    padding: 0 4px !important;
    margin: 4px 0 2px 0 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    border-top: 0 !important;
    opacity: 0.85 !important;
}

.NavView_SubEntities.NavGrouped .NavGroupBody {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    text-align: left !important;
}

/* Tekil Nav Chip Butonları (Hem gruplu hem grupsuz) */
.NavView_SubEntities .Nav {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    height: auto !important;
    min-height: 38px !important;
    padding: 6px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    cursor: pointer !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

.NavView_SubEntities .Nav:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04) !important;
}

.NavView_SubEntities .Nav.Selected {
    background: #eff6ff !important;
    border-color: #93c5fd !important;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.12) !important;
}

.NavView_SubEntities .Nav > .NavButton {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* İkon Rozeti — Kullanıcı İsteği: background transparent */
.NavView_SubEntities .Nav > .NavButton > .NavImage {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #0284c7 !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    transition: transform 0.15s ease !important;
}

.NavView_SubEntities .Nav:hover > .NavButton > .NavImage {
    background: transparent !important;
    background-color: transparent !important;
    transform: scale(1.1) !important;
}

.NavView_SubEntities .Nav.Selected > .NavButton > .NavImage {
    background: transparent !important;
    background-color: transparent !important;
    color: #2563eb !important;
}

.NavView_SubEntities .Nav > .NavButton > .NavImage > svg,
.NavView_SubEntities .Nav > .NavButton > .NavImage > img {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    object-fit: contain !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
}

.NavView_SubEntities .Nav.Selected > .NavButton > .NavImage > svg {
    fill: #2563eb !important;
}

.NavView_SubEntities .Nav > .NavButton > .NavImage > i {
    font-size: 14px !important;
    line-height: 14px !important;
}

/* Başlık */
.NavView_SubEntities .NavTitle {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    letter-spacing: -0.1px !important;
    text-align: left !important;
    padding: 0 !important;
    height: auto !important;
    width: auto !important;
}

.NavView_SubEntities .Nav:hover .NavTitle {
    color: #0f172a !important;
}

.NavView_SubEntities .Nav.Selected .NavTitle {
    color: #1d4ed8 !important;
    font-weight: 700 !important;
}

.NavView_SubEntities .Nav.NoImage > .NavButton > .NavImage {
    display: none !important;
}

/* Panel .Panel nested margin-bottom reset */
.Panel .Panel {
    margin-bottom: 0 !important;
}
/* ============================================================================
   zz-nav-rozet-ve-etl-kenarlik.css — 2026-08-25 (kullanıcı isteği)

   İKİ İŞ:
   1) Nav içindeki Aggregate rozetleri ŞEFFAF olsun (zemin + kenarlık kalksın).
   2) EntityTypeView içindeki EntityTypeLists kenarlığı normalde GÖRÜNMESİN,
      EntityTypeView'e gelince görünsün — ve daha "premium" olsun (şu an kaba).

   ⛔ KATMAN: bu dosya `zz-*` önekli olduğu için `/core.css` içinde META'DAN SONRA
      yüklenir. Ezilecek kurallar Meta'dan geliyor, bu yüzden buraya yazılmak
      ZORUNDA — `NN-*` katmanına yazılsaydı Meta onu ezerdi (kayıtlı ders).
   ⚠️ Yeni bir `zz-*` dosyası eklemek çekirdeği TEK BAŞINA yeniden derletmez;
      bir `NN-*.css` dosyasına dokunmak gerekir (aynı turda yapıldı).
   ============================================================================ */

/* ── 1) NAV ROZETİ: şeffaf ────────────────────────────────────────────────────
   ÖLÇÜLEN mevcut kurallar (servis edilen core.css'ten, 2026-08-25):
     .Content .NavigationButtons .NavButton > .Aggregate  (0,4,0)
         background-color: var(--textColor); color: var(--backColor)
     .NavigationButtons > .Aggregate                       (0,2,0)
         background-color: #2a2a36; color: #ffffff

   ⛔⛔ ZEMİNİ KALDIRAN KURAL ÖN PLANI DA DEVRETMELİDİR (kayıtlı ders, 2026-08-20):
      Rozetin yazı rengi `var(--backColor)` — yani SAYFA ZEMİNİNİN rengi. Bu, koyu
      rozet üstünde okunur çünkü zemin koyu. Zemini şeffaf yaparsak yazı, sayfa
      zeminiyle AYNI renge düşer ve rozet GÖRÜNMEZ olur. Bu yüzden `color` de
      birlikte devredilir: metin artık ana yazı rengini alır.
   ⚠️ `AggregateEmpty` gizleme kuralına DOKUNULMUYOR: o `visibility:hidden`
      olmalı (2026-08-24 dersi — `display:none` IntersectionObserver'ı öldürüp
      rozetlerin hiç dolmamasına yol açmıştı). */
.Content .NavigationButtons .NavButton > .Aggregate,
.NavigationButtons > .Aggregate,
.RootHoverMenuBody .NavButton > .Aggregate,
.NavigationButtons .NavBranch > .NavButton > .Aggregate,
.Nav .Aggregate,
.SearchNavs .Aggregate {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    /* zemin gitti ⇒ ön plan devredildi (yoksa metin sayfa zeminine karışır) */
    color: var(--textColor) !important;
    /* ⛔ 2026-09-04 KÖK ÇÖZÜM: Dashboard KPI kartları için yazılan .Aggregate kuralları
     * (min-width: 190px, padding: 16px) menü rozetlerini 190px genişletip menü butonlarını
     * kilitliyordu. Rozetin boyutunu ve tıklama engellemesini tamamen sıfırla: */
    min-width: unset !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* ── 2) EntityTypeLists KENARLIĞI: normalde yok, EntityTypeView hover'ında var ──
   HEDEF (kaynaktan türetildi, tahmin değil): `et-preview-header.js:351`
       AddClass(etlbutton, "EntityTypeLists Menu_Arrow_Down ItemCount_N")
   yani EntityTypeView başlığındaki LİSTE SEÇİCİ butonu.
   ⚠️ Açılır menü/yönetici varyantları KAPSAM DIŞI bırakıldı — onların kenarlığı
      işlevseldir (kutu sınırını gösterir): `.ETLDisplayMode`, `.ETLViewManager`,
      `.SelectionsMenu*`. Bu yüzden seçici `.EntityTypeView` ile KÖKLENDİ. */
.EntityTypeView .EntityTypeLists.Menu_Arrow_Down,
.EntityTypeView .PanelHeader .EntityTypeLists {
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    /* renk/gölge geçişi yumuşak olsun; genişlik DEĞİŞMEZ (1px hep duruyor) ⇒
       hover'da düzen KAYMAZ. Kenarlığı `border-width` ile açıp kapatmak
       elemanın kutu boyutunu oynatır ve komşu öğeleri titretir. */
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

/* PREMIUM kenarlık: sert gri çizgi yerine düşük opaklıklı nötr ton + çok hafif
   yükselti. Ölçülen eski hâl kabaydı (`1px solid #e6ecf3` gibi düz gri).
   Renk sabit değil, koyu-nötr üzerinden ALFA ile türetiliyor: hem açık hem koyu
   yüzeyde aynı yumuşaklıkta durur. */
.EntityTypeView:hover .EntityTypeLists.Menu_Arrow_Down,
.EntityTypeView:hover .PanelHeader .EntityTypeLists {
    border-color: rgba(15, 23, 42, .12) !important;
    background: rgba(15, 23, 42, .015) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
}

/* Doğrudan üzerine gelince biraz daha belirgin (ama hâlâ ince). */
.EntityTypeView .EntityTypeLists.Menu_Arrow_Down:hover,
.EntityTypeView .PanelHeader .EntityTypeLists:hover {
    border-color: rgba(15, 23, 42, .2) !important;
    background: rgba(15, 23, 42, .035) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08) !important;
}

/* Klavye erişilebilirliği: hover'a bağlı bir görünürlük, klavyeyle gezen
   kullanıcıyı dışarıda bırakır. Odakta kenarlık HER ZAMAN görünür. */
.EntityTypeView .EntityTypeLists.Menu_Arrow_Down:focus-visible,
.EntityTypeView .PanelHeader .EntityTypeLists:focus-visible {
    border-color: rgba(15, 23, 42, .28) !important;
    outline: 2px solid rgba(59, 130, 246, .5) !important;
    outline-offset: 1px !important;
}

/* -- 6) RAY ROZETI NAV BASLIGININ USTUNE BINIYOR (2026-09-05, olculdu) ------
   OLCULDU (1600x950, dort rota, Range.getClientRects ile METIN kutulari -
   kutu kesisimi DEGIL, gercek satir kutulari):
       #navTSDispatch          13 nav -> 9'unda metin-rozet kesisimi 2506-3211 px2
       #mTechnicalServiceHome  13 nav -> 9
       #myPersons (TS DISI)    13 nav -> 9   => kusur PLATFORM GENELI
   Rozetin hesaplanan olcusu 55x49 px (padding 16px 20px), nav karti ~100x56 px
   ve baslik 3 satira boluniyor; rozet ilk iki satiri ortuyor.

   KOK (CDP CSS.getMatchedStylesForNode ile okundu, TAHMIN DEGIL):
       .Aggregate.Aggregate { min-width:124px|190px; padding:16px 20px!important;
                              border-radius:14px!important }
   Bu kural Content/@CSSText icinde yasiyor (olculdu: 109 Content) ve istemci
   tarafindan enjekte ediliyor (c.js setCSSText) -> HER ZAMAN core.css'ten SONRA
   yuklenir. `.Aggregate` HEM hero KPI karti HEM nav rozeti sinifi oldugu icin
   KPI icin yazilmis olcu nav rozetini de sisiriyor.

   NEDEN 109 Content DUZELTILMEDI: kusur tek bir yerde degil, KAPSAMSIZ bir
   secicide; ayni kural bugun 109 ekranda, yarin yeni ekranda yeniden dogar.
   Ray baglaminda karsi kural, kaynaktan bagimsiz olarak korur.
   ⛔ SINIF TEKRARI TEK BASINA YETMEZ: rakip (0,2,0)+!important. Esit ozgullukte
      sonra yuklenen kazanir ve rakip DAIMA sonra gelir (istemci enjeksiyonu).
      Bu yuzden ozgulluk (0,3,0)/(1,2,0) VE !important birlikte gerekli.
   ⛔ KAPSAM BILEREK DAR: yalniz sol/sag ray. `.Panel_kpis` hero KPI karti
      ETKILENMEZ (iki yonlu kanit: rozet kucuk + hero karti AYNI olcude kalir). */
#PageZone_LeftNavs .NavButton > .Aggregate,
#PageZone_RightNavs .NavButton > .Aggregate,
.NavGroup_Left .NavButton > .Aggregate,
.NavGroup_Right .NavButton > .Aggregate {
    min-width: 18px !important;
    width: auto !important;
    height: auto !important;
    padding: 1px 6px !important;
    border-radius: 999px !important;
    line-height: 15px !important;
    font-size: 11px !important;
}

/* ⛔⛔ BASLIK DOLGUSU DENENDI VE GERI ALINDI (2026-09-05, olculdu).
   `padding-right:32px` -> cakisan nav 6, `40px` -> 1 (kazanc gercek).
   AMA ayni koside KIRPMA 0 -> 8 oldu (`overflow:hidden` + scrollWidth>clientWidth,
   nav basligindaki span'lar). Yani cakismayi cozerken BILGI KAYBI urettim:
   nav karti ~102px ve basliklar 2-3 satir; 40px dolgu metin alanini 62px'e
   dusurunce uzun basliklar kirpildi.
   ⇒ Kayitli kural: "care font kucultmek ya da ellipsis DEGILDIR — o, kusuru
      okunaksizliga cevirir". Kirpma (bilgi kaybi) cakismadan (estetik) AGIRDIR.
   ⇒ Dolgu KALDIRILDI. Rozet kucultmesi TEK BASINA cakismayi 9 -> 6/4/1/0'a
      indiriyor ve kirpma URETMIYOR — net kazanc orada.
   KALAN IS: nav karti dar oldugu icin uzun baslik + rozet ayni satirda
      sigmiyor; gercek care rozeti akisa sokmak (position:static + margin-left:auto)
      ya da kart genisligini artirmak. Ikisi de RAY DUZENINI degistirir ve ayri
      bir karar/olcum turu ister -> backlog. */

/* ⛔⛔ ROZETIN static OLMASI EKRANI BOZDU (2026-09-05, kullanici uyarisi + satis olcumu):
   Sol/sag raydaki NavButton dikey duzendedir (flex-direction:column); rozet static
   yapildiginda sutun elemani haline gelip buton yerlesimini (ikon/yazi) asagi itti
   ve ekrani bozdu. Rozet position:absolute (top:0, right:0, nav.css:1193) olmalidir.
   position:static kaldirildi. */
#PageZone_LeftNavs .NavButton > .Aggregate,
#PageZone_RightNavs .NavButton > .Aggregate,
.NavGroup_Left .NavButton > .Aggregate,
.NavGroup_Right .NavButton > .Aggregate {
    margin-left: auto !important;
    flex: 0 0 auto !important;
}
#PageZone_LeftNavs .NavView .NavButton > .NavTitle,
#PageZone_RightNavs .NavView .NavButton > .NavTitle {
    min-width: 0 !important;
}
/* ============================================================================
   zz-notification-panel.css — T20 notification-panel polish (2026-07-02)

   Post-Meta core tier: loads AFTER misc.css (@meta CssKey=1), so plain
   specificity overrides win with NO !important. Owns ONLY the T20 additions:
   category visual language (unread left accent bar + severity color parity),
   row-click affordances (link / expandable), and expand-in-place. Base panel
   styles still live in the Meta tier (misc.css .NP_* rules).
   ============================================================================ */

/* Express read/unread accent in ONE place: drop the Meta severity border-left
   and draw a rounded ::before bar on UNREAD rows only. Read rows stay quiet
   (opacity is handled in the Meta tier). */
.SidePanel .NP_Card { border-left: 0; }

.SidePanel .NP_Card:not(.read)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--np-accent, #3b82f6);
}

/* Severity color parity — the icon chip and the accent bar/tint share a hue. */
.SidePanel .NP_Sev_Error:not(.read)   { --np-accent: #ef4444; background: rgba(239, 68, 68, 0.035); }
.SidePanel .NP_Sev_Warning:not(.read) { --np-accent: #f59e0b; background: rgba(245, 158, 11, 0.035); }
.SidePanel .NP_Sev_Info:not(.read)    { --np-accent: #3b82f6; background: rgba(59, 130, 246, 0.03); }

/* Unread rows read heavier than read rows. */
.SidePanel .NP_Card:not(.read) .NP_CardTitle { font-weight: 700; }

/* Row affordances: URL-bearing rows navigate; description-only rows expand. */
.SidePanel .NP_Card-link,
.SidePanel .NP_Card-expandable { cursor: pointer; }
.SidePanel .NP_Card-link:hover { background: rgba(var(--primaryColorRGB, 59, 130, 246), 0.06); }
.SidePanel .NP_Card-expandable:hover { background: rgba(var(--shadowRGB, 0, 0, 0), 0.03); }

/* Expand-in-place — reveal the full title + description (drop the line clamp). */
.SidePanel .NP_Card-expanded .NP_CardTitle,
.SidePanel .NP_Card-expanded .NP_CardDesc {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}

/* ============================================================================
   ✦ Özet digest (T30) — deterministic unread-backlog summary, shown only when
   unread >= 10. Consistent premium accent (--np-digest-accent) on the ✦ spark
   + header; each headline row carries its severity hue on a left accent bar.
   ============================================================================ */
.SidePanel .NP_Digest {
    --np-digest-accent: rgb(var(--primaryColorRGB, 99, 102, 241));
    margin: 8px 10px 4px;
    border: 1px solid rgba(var(--primaryColorRGB, 99, 102, 241), 0.22);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(var(--primaryColorRGB, 99, 102, 241), 0.07), rgba(var(--primaryColorRGB, 99, 102, 241), 0.02));
    box-shadow: 0 1px 3px rgba(var(--shadowRGB, 0, 0, 0), 0.05);
    overflow: hidden;
}

.SidePanel .NP_Digest-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px 7px 12px;
}
.SidePanel .NP_Digest-title {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
}
.SidePanel .NP_Digest-spark {
    color: var(--np-digest-accent);
    font-size: 15px;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(var(--primaryColorRGB, 99, 102, 241), 0.35));
}
.SidePanel .NP_Digest-titleText {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--np-digest-accent);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.SidePanel .NP_Digest-close {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 17px;
    line-height: 1;
    color: rgba(var(--shadowRGB, 0, 0, 0), 0.45);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.SidePanel .NP_Digest-close:hover {
    background: rgba(var(--shadowRGB, 0, 0, 0), 0.07);
    color: rgba(var(--shadowRGB, 0, 0, 0), 0.75);
}

.SidePanel .NP_Digest-rows {
    padding: 2px 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.SidePanel .NP_Digest-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 9px;
    border-left: 3px solid var(--np-row-accent, #6366f1);
    background: rgba(var(--shadowRGB, 0, 0, 0), 0.025);
}
.SidePanel .NP_Digest-sev1 { --np-row-accent: #ef4444; }
.SidePanel .NP_Digest-sev2 { --np-row-accent: #f59e0b; }
.SidePanel .NP_Digest-sev3 { --np-row-accent: #3b82f6; }
.SidePanel .NP_Digest-sev0 { --np-row-accent: #94a3b8; }

.SidePanel .NP_Digest-count {
    flex: 0 0 auto;
    min-width: 22px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: var(--np-row-accent, #6366f1);
    font-variant-numeric: tabular-nums;
}
.SidePanel .NP_Digest-label {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(var(--shadowRGB, 0, 0, 0), 0.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.SidePanel .NP_Digest-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 5px;
}
.SidePanel .NP_Digest-action {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    border: 1px solid rgba(var(--primaryColorRGB, 99, 102, 241), 0.3);
    color: rgb(var(--primaryColorRGB, 99, 102, 241));
    background: rgba(var(--primaryColorRGB, 99, 102, 241), 0.06);
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.SidePanel .NP_Digest-action:hover {
    background: rgba(var(--primaryColorRGB, 99, 102, 241), 0.16);
    border-color: rgba(var(--primaryColorRGB, 99, 102, 241), 0.5);
}
.SidePanel .NP_Digest-action-read {
    border-color: rgba(var(--shadowRGB, 0, 0, 0), 0.15);
    color: rgba(var(--shadowRGB, 0, 0, 0), 0.6);
    background: rgba(var(--shadowRGB, 0, 0, 0), 0.03);
}
.SidePanel .NP_Digest-action-read:hover {
    background: rgba(var(--shadowRGB, 0, 0, 0), 0.09);
    border-color: rgba(var(--shadowRGB, 0, 0, 0), 0.28);
    color: rgba(var(--shadowRGB, 0, 0, 0), 0.85);
}

.SidePanel .NP_Digest-more {
    padding: 3px 10px 1px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(var(--shadowRGB, 0, 0, 0), 0.5);
}

/* ============================================================================
   ✦ Decision Hub Action Buttons (2026-08-08)
   ============================================================================ */
.NP_DecisionOptions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed rgba(var(--shadowRGB, 0, 0, 0), 0.1);
}
.NP_DecisionBtn {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.NP_DecisionBtn-primary {
    background: #3b82f6;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
}
.NP_DecisionBtn-primary:hover {
    background: #2563eb;
}
.NP_DecisionBtn-warning {
    background: #f59e0b;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3);
}
.NP_DecisionBtn-warning:hover {
    background: #d97706;
}
.NP_DecisionBtn-danger {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3);
}
.NP_DecisionBtn-danger:hover {
    background: #dc2626;
}
.NP_DecisionSuccess {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #10b981;
    padding: 4px 8px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 6px;
}


/* ============================================================================
   ✦ Kaynak çipi + kaynak-bazlı toplu işlem (2026-08-20)

   Ölçülen ihtiyaç: canlıda 725 bildirimin 696'sı (%96) TEK kaynaktan geliyordu.
   Kullanıcının o kaynağı topluca kapatma yolu YOKTU — 696 kartı tek tek okundu
   işaretlemesi gerekiyordu.

   Etkileşim HOVER'a DEĞİL TIKLAMAYA bağlı: `.NP_CardActions` opacity:0 + hover
   ile beliriyor ve dokunmatikte hover yoktur ⇒ o desen kopyalanmadı. Çip her
   zaman görünür, aksiyonlar tıklamayla açılır — masaüstü ve dokunmatikte AYNI.

   Kontrast hesabı (beyaz zemin, opaklık yok):
     çip metni  rgba(0,0,0,.62) → efektif rgb(97,97,97)  = 6.19:1  ✓ AA
     çip zemini rgba(0,0,0,.045) üstünde                 = 5.63:1  ✓ AA
   ⚠️ `.NP_Card.read` ata opaklığı 0.55 uygular; o durumda TÜM kart metinleri
   (başlık/açıklama/zaman dahil) sönümlenir — bu platformun mevcut görsel
   kararıdır, bu blok onu değiştirmez.
   ============================================================================ */

/* Çip: sessiz bir üstveri etiketi, ama TIKLANABİLİR olduğunu söylemeli. */
.NP_CardSource {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 3px 9px 3px 8px;
    max-width: 100%;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    color: rgba(var(--shadowRGB, 0, 0, 0), 0.62);
    background: rgba(var(--shadowRGB, 0, 0, 0), 0.045);
    border: 1px solid rgba(var(--shadowRGB, 0, 0, 0), 0.07);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Tıklanabilirlik işareti — metin değil, ÇİZİM (çeviriye ihtiyaç duymaz). */
.NP_CardSource::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(var(--shadowRGB, 0, 0, 0), 0.3);
}
.NP_CardSource:hover {
    color: rgb(var(--primaryColorRGB, 59, 130, 246));
    background: rgba(var(--primaryColorRGB, 59, 130, 246), 0.09);
    border-color: rgba(var(--primaryColorRGB, 59, 130, 246), 0.28);
}
.NP_CardSource:hover::before {
    background: rgb(var(--primaryColorRGB, 59, 130, 246));
}
.NP_CardSource:focus-visible {
    outline: 2px solid rgb(var(--primaryColorRGB, 59, 130, 246));
    outline-offset: 1px;
}

/* Aksiyon şeridi — `.NP_DecisionOptions` ile AYNI dil (kesikli ayraç + sarma). */
.NP_SourceActions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px dashed rgba(var(--shadowRGB, 0, 0, 0), 0.1);
}

/* Düğmeler — `.NP_Digest-action` hap dili. `min-width:0` + sarma: dar panelde
   uzun kaynak adı taşırıp ULAŞILAMAZ içerik üretmesin. */
.NP_SourceBtn {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid rgba(var(--primaryColorRGB, 59, 130, 246), 0.3);
    color: rgb(var(--primaryColorRGB, 59, 130, 246));
    background: rgba(var(--primaryColorRGB, 59, 130, 246), 0.06);
    transition: background 0.15s ease, border-color 0.15s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.NP_SourceBtn:hover:not(:disabled) {
    background: rgba(var(--primaryColorRGB, 59, 130, 246), 0.16);
    border-color: rgba(var(--primaryColorRGB, 59, 130, 246), 0.5);
}
.NP_SourceBtn:disabled {
    cursor: default;
    opacity: 0.6;
}

/* Susturma yıkıcı değil ama geri alınabilir bir TERCİHTİR — nötr ton. */
.NP_SourceBtn-mute {
    border-color: rgba(var(--shadowRGB, 0, 0, 0), 0.16);
    color: rgba(var(--shadowRGB, 0, 0, 0), 0.62);
    background: rgba(var(--shadowRGB, 0, 0, 0), 0.035);
}
.NP_SourceBtn-mute:hover:not(:disabled) {
    background: rgba(var(--shadowRGB, 0, 0, 0), 0.09);
    border-color: rgba(var(--shadowRGB, 0, 0, 0), 0.3);
    color: rgba(var(--shadowRGB, 0, 0, 0), 0.85);
}

/* ── XML'den yapilandirilmis EK ALAN satirlari (TO DO S6 — ikinci yari) ──────
   Notification ET'sinde `SidePanel` adli EntityTypeList tanimliysa, alanlari
   karta etiket/deger satiri olarak cizilir (m-notification.js `_notifPanelFields`).
   Liste yoksa bu dugumler HIC uretilmez — kural olu kalir, gerileme yaricapi 0.
   Olculer kayitli kurallara gore: metin 12px (a11y esigi), etiket AA kontrast
   (rgba .62 beyaz uzerinde ~6.2:1), satirlar sarar — kirpma YOK. */
.NP_CardMeta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
}
.NP_CardMetaRow {
    display: flex;
    flex-wrap: wrap;          /* dar panelde ALT SATIRA gecer, kirpilmaz */
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.NP_CardMetaLabel {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(var(--shadowRGB, 0, 0, 0), 0.62);
    flex: 0 0 auto;
}
.NP_CardMetaLabel::after { content: ":"; }
.NP_CardMetaValue {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(var(--shadowRGB, 0, 0, 0), 0.88);
    flex: 1 1 auto;
    min-width: 0;             /* esnek ogeyi icerik genisliginin altina indirir */
    overflow-wrap: anywhere;  /* uzun deger TASMAZ, sarar */
}
/* ============================================================================
   PANELHEADER YERLESIM SOZLESMESI — GENERIC, TUM MODULLER

   ⛔ KULLANICI EMRI (2026-08-27):
      "sistemde fixed pixel height istemiyorum"
      "mobil panelheader da hamburger menu ve search saga dayali,
       list selector merkezde olmali"
      "ultimate olarak coz, tek tek mi tarif edecek"

   ANATOMI (platformun kendi yapisi):
      .PanelHeader.TitleLeft
        ├─ .TopLeft    ikon + BASLIK          (kimlik)
        ├─ .TopCenter  LISTE SECICI           (baglam: hangi liste)
        └─ .TopRight   arama · hamburger · eylemler (komut)

   OLCULMUS KUSUR ENVANTERI (canli finance, mobil 390x844, 29 baslik):
      tasma 15 · kucukHedef 21 · kelimeKirik 5 · kirpik 3 · sabitYuk 3   = 47

   Hepsinin KOKU IKI TANE:
     (K1) Baslik bir FLEX OGESIDIR ve `flex: 0 1 auto` ile SIKISTIRILIYOR.
          Grid satiri icerige uymustu (grid-template-rows: 91.56px) ama kap
          48px'te kaldi -> icerik ALTTAKI liste/suzgeclerin USTUNE bindi.
          `height:auto` TEK BASINA YETMEZ; `flex-shrink:0` da gerekir.
     (K2) Bolgelere genislik PAYI verilmemis. `min-width:0` ile TopCenter
          64px'e iniyor ve metin KELIME KELIME kiriliyor:
             "Gecerli Aktif Senaryolar" -> 5 satir / 64px
             "Dogrulanmis Senaryo Etkileri" -> 8 satir / 84px
          Kap da bunu tasiyamayinca 2px alta tasiyor.

   ⚠️ DOM YUKLEMI BU SINIFI GORMEZ: `overflow:visible` oldugu icin
      scrollWidth/clientWidth kiyasi "kirpik yok" der. Yakalayan olcum:
      cocugun alt kenari kabi ASIYOR mu + KARE.
      Denetim araci: `_scripts/fr-hdr-anatomi.js` (6 kusur sinifi, iki kadraj).
   ============================================================================ */

/* --- 1) KAP: SABIT YUKSEKLIK YOK (GENERIC TUM MODULLER) ---------------- */
.Panel > .PanelHeader,
.PanelHeader.TitleLeft,
.Top.PanelHeader {
  height: auto;
  min-height: 40px;
  flex-shrink: 0;          /* K1: sikistirilamaz — baslik icerigin altina inmez */
  align-items: center;
  box-sizing: border-box;
}

body.Mobile .Panel > .PanelHeader,
body.Mobile .PanelHeader.TitleLeft,
body.Mobile .Top.PanelHeader {
  min-height: 48px !important;
}

/* ⛔ 2026-09-04 KÖK ÇÖZÜM: Mobilde EntityTypeView başlık metni ve liste değiştirici
 * (TopCenter ViewSwitcher) çakışması — uzun başlıklarda dikey boşluk güvencesi */
@media (max-width: 768px) {
  body.Mobile .PanelHeader.TitleLeft > .TopCenter,
  body.Mobile .Top.PanelHeader > .TopCenter {
    margin-top: 4px !important;
  }
}

/* ============================================================================
   DESKTOP & LAPTOP (1 SATIR GRID MİMARİSİ):
   - Sol (1fr): Title Left'te (ve + Yeni)
   - Merkez (auto): List Seçimi tam ortada / merkezde
   - Sağ (1fr): Hamburger ve Search vs. Sağa dayalı
   ============================================================================ */
.Panel > .PanelHeader,
.Panel > .PanelHeader.TitleLeft,
.PanelHeader.TitleLeft,
.Top.PanelHeader,
.Content .PanelHeader {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  column-gap: 8px !important;
  /* 2026-08-29 (kullanıcı): "padding: 4px yap — çok sol sağ geniş oluyor": 12px yatay
     boşluk dar panellerde başlığı 3 harfe sıkıştırıyordu; tüm kenarlar 4px'e indirildi. */
  padding: 4px !important;
  height: auto !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
}

/* 1) TOPLEFT (Sol): Başlık, İkon & Eylemler — 1fr ile sola dayalı */
.PanelHeader > .TopLeft,
.Top.PanelHeader > .TopLeft,
.Content .PanelHeader > .TopLeft {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.PanelHeader > .TopLeft .Actions,
.Content .PanelHeader > .TopLeft .Actions {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.PanelHeader > .TopLeft .Actions > a,
.PanelHeader > .TopLeft .Actions > button,
.PanelHeader > .TopLeft [class*="Action_"] {
  min-width: 28px !important;
  min-height: 28px !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 28px !important;
}

.PanelHeader > .TopLeft .EntityTypeViewTitle,
.Content .PanelHeader > .TopLeft .EntityTypeViewTitle {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.PanelHeader > .TopLeft .EntityTypeViewTitleIcon {
  width: 1.3em !important;
  height: 1.3em !important;
  margin-right: 0.3em !important;
  flex: 0 0 1.3em !important;
}

.PanelHeader > .TopLeft .EntityTypeViewTitleBody,
.PanelHeader .PanelHeaderTitle,
.Content .PanelHeader .PanelHeaderTitle,
.Content .PanelHeader .EntityTypeViewTitleBody {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* 2) TOPCENTER (Merkez): Liste Seçici TAM ORTADA / MERKEZDE */
.PanelHeader > .TopCenter,
.Top.PanelHeader > .TopCenter,
.Content .PanelHeader > .TopCenter {
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  min-width: 0 !important;
  margin: 0 auto !important;
}

.Top > .TopCenter .EntityTypeLists.Menu_Arrow_Down.ViewSwitcher,
.PanelHeader > .TopCenter .EntityTypeLists,
.PanelHeader > .TopCenter .ViewSwitcher,
.PanelHeader > .TopCenter a,
.Content .PanelHeader .TopCenter a {
  font-size: 12px !important;
  padding: 4px 14px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* 3) TOPRIGHT (Sağ): Arama, Menü & Butonlar — 1fr ile sağa dayalı */
.PanelHeader > .TopRight,
.Top.PanelHeader > .TopRight,
.Content .PanelHeader > .TopRight {
  grid-column: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  justify-self: end !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin-left: auto !important;
}

.PanelHeader .ETSearch {
  max-width: none !important;
}

.PanelHeader .ETSearch input {
  width: 60px !important;
  min-width: 36px !important;
  max-width: 120px !important;
  font-size: 11.5px !important;
  padding: 2px 6px !important;
  height: 26px !important;
  transition: width 0.2s ease, max-width 0.2s ease !important;
}

.PanelHeader .ETSearch input:focus {
  width: 120px !important;
  max-width: 160px !important;
}

/* --- 4) DOKUNMA HEDEFI (Fitts) ------------------------------------------ */
.PanelHeader a,
.PanelHeader button,
.PanelHeader select,
.PanelHeader .MicroButton,
.PanelHeader .ToggleButton,
.PanelHeader [class*="Action_"] {
  min-height: 44px;
}

/* Ikonun kendisi buyumesin — kutu buyur, glif ayni kalir. */
.PanelHeader .MicroButton > svg,
.PanelHeader .MicroButton > img,
.PanelHeader a > svg,
.PanelHeader a > img {
  flex: 0 0 auto;
}

/* --- 5) MOBİL TEK SATIR MİMARİSİ (ORTALANMIŞ BAŞLIK & EN ALTTA LİSTE SEÇİCİ — 2026-08-28) ---
   - SOLDA: Yeni Düğmesi (+ / Aksiyonlar)
   - ORTA ÜSTTE: Başlık (İkonsuz, 12.5px, top: 6px, height: 15px)
   - ORTA ALTTA: EntityTypeLists (Kompakt Floating Pill, bottom: 5px, height: 16px)
   - SAĞDA: Arama & Hamburger Menü
   ============================================================================ */
@media only screen and (max-width: 768px), body.Mobile {
  html body.Mobile .Content.Content .Panel.Panel > .PanelHeader.PanelHeader,
  html body.Mobile .Content.Content .PanelHeader.PanelHeader.TitleLeft,
  html body.Mobile .Top.PanelHeader.PanelHeader,
  body.Mobile.Mobile .PanelHeader.PanelHeader,
  .Panel > .PanelHeader,
  .Panel > .PanelHeader.TitleLeft,
  .PanelHeader.TitleLeft,
  .Top.PanelHeader,
  .Content .PanelHeader {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    box-sizing: border-box !important;
  }

  /* .TopLeft display: contents ile içerisindeki .Actions ve .EntityTypeViewTitle ayrılır */
  html body.Mobile .Content .PanelHeader > .TopLeft,
  body.Mobile .PanelHeader > .TopLeft,
  .PanelHeader > .TopLeft,
  .Top.PanelHeader > .TopLeft,
  .Content .PanelHeader > .TopLeft {
    display: contents !important;
  }

  /* 1) KESİNLİKLE SOLDA: Yeni Butonu / Sol Aksiyonlar */
  html body.Mobile .Content.Content .PanelHeader.PanelHeader .Actions,
  html body.Mobile .Content .PanelHeader .Actions,
  body.Mobile .PanelHeader .Actions,
  .PanelHeader > .TopLeft .Actions,
  .PanelHeader .Actions {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  html body.Mobile .Content .PanelHeader .Actions > a,
  body.Mobile .PanelHeader .Actions > a,
  .PanelHeader > .TopLeft .Actions > a,
  .PanelHeader > .TopLeft .Actions > button,
  .PanelHeader .Actions > a,
  .PanelHeader .Actions > button,
  .PanelHeader [class*="Action_"] {
    min-width: 26px !important;
    min-height: 26px !important;
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }

  /* 2) TAM ORTA ÜSTTE: Başlık */
  html body.Mobile .Content.Content .PanelHeader.PanelHeader .EntityTypeViewTitle,
  html body.Mobile .Content .PanelHeader .EntityTypeViewTitle,
  body.Mobile .PanelHeader .EntityTypeViewTitle,
  .PanelHeader > .TopLeft .EntityTypeViewTitle,
  .PanelHeader .EntityTypeViewTitle {
    position: absolute !important;
    left: 50% !important;
    top: 6px !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: calc(100% - 110px) !important;
    height: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    z-index: 5 !important;
  }

  /* Mobilde Title İkonu Kesinlikle Gizli */
  html body.Mobile .Content .PanelHeader .EntityTypeViewTitleIcon,
  body.Mobile .PanelHeader .EntityTypeViewTitleIcon,
  .PanelHeader .EntityTypeViewTitleIcon {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.Mobile .Content.Content .PanelHeader.PanelHeader .EntityTypeViewTitleBody,
  html body.Mobile .Content .PanelHeader .EntityTypeViewTitleBody,
  body.Mobile .PanelHeader .EntityTypeViewTitleBody,
  .PanelHeader .EntityTypeViewTitleBody,
  .PanelHeader .PanelHeaderTitle,
  .Content .PanelHeader .PanelHeaderTitle {
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 15px !important;
    height: 15px !important;
    letter-spacing: 0.3px !important;
    text-align: center !important;
  }

  /* SAĞDA: Arama + Hamburger */
  html body.Mobile .Content .PanelHeader > .TopRight,
  body.Mobile .PanelHeader > .TopRight,
  .PanelHeader > .TopRight,
  .Top.PanelHeader > .TopRight,
  .Content .PanelHeader > .TopRight {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    margin: 0 !important;
  }

  html body.Mobile .Content .PanelHeader .ETSearch,
  body.Mobile .PanelHeader .ETSearch,
  .PanelHeader .ETSearch {
    max-width: none !important;
  }

  /* 2026-08-29: MOBİLDE ARAMA INPUTU DAİMA GENİŞ (10em) — eski Meta kuralındaki
     malformasyonlu selector yüzünden asla uygulanamayan davranış geri getirildi.
     Yeni görünürlük sözleşmesi (karar A): arama List/ItemView'da her zaman görünür;
     mobilde dokunmatikte hover olmadığından kutu geniş ve placeholder görünür olmalı.
     Bu blok 60px !important'lı üstteki desktop kuralını Mobile'da ezer (aynı tier, sonra gelir). */
  html body.Mobile .Content .PanelHeader .ETSearch input,
  body.Mobile .PanelHeader .ETSearch input {
    width: 10em !important;
    max-width: none !important;
    min-width: 10em !important;
    opacity: 1 !important;
    background-color: white !important;
    color: #303030 !important;
    outline: 1px solid #d7dae1 !important;
  }

  html body.Mobile .Content .PanelHeader .ETSearch input::placeholder,
  body.Mobile .PanelHeader .ETSearch input::placeholder {
    opacity: 1 !important;
  }

  html body.Mobile .Content .PanelHeader .ToggleButton,
  html body.Mobile .Content .PanelHeader .MicroButton,
  body.Mobile .PanelHeader .ToggleButton,
  body.Mobile .PanelHeader .MicroButton,
  .PanelHeader > .TopRight .ToggleButton,
  .PanelHeader > .TopRight .MicroButton,
  .PanelHeader > .TopRight a,
  .PanelHeader > .TopRight button {
    min-width: 26px !important;
    min-height: 26px !important;
    width: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 0 !important;
  }

  /* ORTA ALTTA: EntityTypeLists (Kompakt Floating Pill, bottom: 5px, height: 16px) */
  html body.Mobile .Content .PanelHeader > .TopCenter,
  body.Mobile .PanelHeader > .TopCenter,
  body.Mobile .PanelHeader.PanelHeader > .TopCenter,
  body.Mobile .Top.PanelHeader > .TopCenter,
  html body.Mobile .Content .PanelHeader > .TopCenter {
    position: absolute !important;
    bottom: 5px !important;
    top: auto !important;
    height: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    width: auto !important;
    max-width: 70% !important;
  }

  html body.Mobile .Content.Content .PanelHeader.PanelHeader .EntityTypeLists,
  html body.Mobile .Content .PanelHeader .EntityTypeLists.ViewSwitcher,
  html body.Mobile .Content .PanelHeader .EntityTypeLists,
  body.Mobile .PanelHeader .EntityTypeLists.ViewSwitcher,
  body.Mobile .PanelHeader .EntityTypeLists,
  body.Mobile .Top > .TopCenter .EntityTypeLists.Menu_Arrow_Down.ViewSwitcher,
  body.Mobile .PanelHeader > .TopCenter .EntityTypeLists,
  body.Mobile .PanelHeader > .TopCenter .ViewSwitcher,
  body.Mobile .PanelHeader > .TopCenter a,
  html body.Mobile .Content .PanelHeader .TopCenter a {
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 0 13px 0 7px !important;
    min-height: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.28) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
    box-sizing: border-box !important;
    border: 0 !important;
    overflow: visible !important;
    width: auto !important;
    min-width: 40px !important;
    max-width: 180px !important;
    text-align: center !important;
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body.Mobile .Content .PanelHeader .EntityTypeLists.Menu_Arrow_Down::after,
  body.Mobile .PanelHeader .EntityTypeLists.Menu_Arrow_Down::after,
  .PanelHeader > .TopCenter .EntityTypeLists.Menu_Arrow_Down::after {
    content: "▾" !important;
    position: absolute !important;
    right: 3px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 7.5px !important;
    line-height: 1 !important;
    opacity: 0.9 !important;
    margin: 0 !important;
    display: block !important;
  }
}

/* ============================================================================
   6) KART ICI SATIR — CAKISMAYI KOKTEN KAPATIR (2026-08-28)
   ============================================================================ */
.FieldSet[class*="DirectionFlexRow"] > .Field,
.FieldSet[class*="DirectionAll"] > .Field {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}

/* ============================================================================
   7) DOKUNMA HEDEFI — KOMUT yuzeyleri (2026-08-28)
   ============================================================================ */
select,
.Actions > a,
.Actions > button,
[class*="Action_"] {
  min-height: 38px;
  min-width: 38px;
}

/* 2026-09-15 kullanıcı: "PageByField'lara min-height px verme, responsive olmalı". Liste başlığı filtre kutusu
   bir KOMUT yüzeyi değil, form alanıdır: yukarıdaki px taban + kiracı domain.css `.Content select{min-height:44px
   !important}` + mobil @media 44px onu şişiriyordu (ölçüldü satis #mFinanceSalesInvoices 1600x950: select 44px,
   alan 63px). Yazı boyuyla ölçeklenir (em); `.Content .PageByField > select` kiracı kuralını özgüllükle geçer. */
.PageByField > select,
.Content .PageByField > select {
  min-height: 2.5em !important;
  min-width: 0 !important;
  height: auto !important;
}

/* ============================================================================
   8) SELECTIONSMENU_ENTITYSELECTOR MOBIL RESPONSIVE (2026-08-28)
   - Mobilde 800px sabit genişliği engelle: width: 100%, max-width: 100vw, min-width: 0
   ============================================================================ */
@media only screen and (max-width: 768px), body.Mobile {
  html body.Mobile .SelectionsMenu_EntitySelector,
  body.Mobile .SelectionsMenu_EntitySelector,
  .SelectionsMenu_EntitySelector {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================================
   9) MOBIL ITEMHEADER & SINGLEITEM COMPACT & VISIBLE MİMARİSİ (2026-08-28)
   - SingleItemHeaderTitle ASLA kesilmez (top: 0, margin: 2px auto 6px auto)
   - ItemHeader / Fields_Header gereksiz dikey boşluklardan arındırılmış, ultra kompakt
   ============================================================================ */
@media only screen and (max-width: 768px), body.Mobile {
  html body.Mobile .SingleItem,
  body.Mobile .SingleItem,
  .SingleItem {
    padding-top: 8px !important;
  }

  html body.Mobile .SingleItem .SingleItemHeaderTitle,
  html body.Mobile .SingleItem .FieldSet_m .SingleItemHeaderTitle,
  body.Mobile .SingleItem .SingleItemHeaderTitle,
  body.Mobile .SingleItem .FieldSet_m .SingleItemHeaderTitle,
  .SingleItem .SingleItemHeaderTitle,
  .SingleItem .FieldSet_m .SingleItemHeaderTitle {
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 2px auto 6px auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 3 !important;
    width: auto !important;
    text-align: center !important;
    transform: none !important;
  }

  html body.Mobile .SingleItem .SingleItemHeaderTitle > span,
  body.Mobile .SingleItem .SingleItemHeaderTitle > span,
  .SingleItem .SingleItemHeaderTitle > span {
    border-radius: 12px !important;
    padding: 2px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    box-sizing: border-box !important;
  }

  html body.Mobile .SingleItem .SingleItemHeader,
  html body.Mobile .Fields_Header.ItemHeader,
  html body.Mobile .ItemHeader,
  body.Mobile .SingleItem .SingleItemHeader,
  body.Mobile .Fields_Header.ItemHeader,
  body.Mobile .ItemHeader,
  .SingleItem .SingleItemHeader,
  .Fields_Header.ItemHeader,
  .ItemHeader {
    padding: 8px 10px !important;
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 3px !important;
    box-sizing: border-box !important;
  }

  html body.Mobile .SingleItemHeader .Field,
  html body.Mobile .Fields_Header .Field,
  html body.Mobile .ItemHeader .Field,
  body.Mobile .SingleItemHeader .Field,
  body.Mobile .Fields_Header .Field,
  body.Mobile .ItemHeader .Field,
  .SingleItemHeader .Field,
  .Fields_Header .Field,
  .ItemHeader .Field {
    padding: 1px 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    height: auto !important;
    line-height: 1.25 !important;
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    --fieldPadding: 1px 0 !important;
    --inputPadding: 0 !important;
  }

  html body.Mobile .ItemHeader .SingleItemHeaderName,
  body.Mobile .ItemHeader .SingleItemHeaderName,
  .ItemHeader .SingleItemHeaderName {
    margin-bottom: 2px !important;
  }

  html body.Mobile .ItemHeader .SingleItemHeaderName a,
  html body.Mobile .Fields_Header .Field_Name a,
  html body.Mobile .Fields_Header .Field_Person a,
  body.Mobile .ItemHeader .SingleItemHeaderName a,
  body.Mobile .Fields_Header .Field_Name a,
  body.Mobile .Fields_Header .Field_Person a,
  .ItemHeader .SingleItemHeaderName a,
  .Fields_Header .Field_Name a,
  .Fields_Header .Field_Person a {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
  }

  html body.Mobile .ItemHeader .Field_CorporateTitle,
  html body.Mobile .ItemHeader .Field_Organization,
  body.Mobile .ItemHeader .Field_CorporateTitle,
  body.Mobile .ItemHeader .Field_Organization,
  .ItemHeader .Field_CorporateTitle,
  .ItemHeader .Field_Organization {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
  }

  html body.Mobile .ItemHeader .FieldSet_cc,
  html body.Mobile .ItemHeader .FieldSet_l,
  body.Mobile .ItemHeader .FieldSet_cc,
  body.Mobile .ItemHeader .FieldSet_l,
  .ItemHeader .FieldSet_cc,
  .ItemHeader .FieldSet_l {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body.Mobile .ItemHeader .Field_CellPhone,
  html body.Mobile .ItemHeader .Field_email,
  body.Mobile .ItemHeader .Field_CellPhone,
  body.Mobile .ItemHeader .Field_email,
  .ItemHeader .Field_CellPhone,
  .ItemHeader .Field_email {
    font-size: 11.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }
}

/* ============================================================================
   10) IKI BOLGELI BASLIK + ALT BOLGE ARAMASI — KULLANICI KARARI (2026-09-03)

   "EntityTypeView'da TopCenter'i kaldiralim. TopCenter'daki EntityTypeLists
    butonunu TopRight'a alalim, ETSearchPlace yerine. ETSearchPlace'i Bottom
    Center'da Paging'in ustune tasiyalim. Bottom Hover'da gozuksun, ekranda yer
    kaplamasin. TopLeft: flex:1, TopRight: flex:auto — mobilde de ayni tecrube."

   NEDEN BU DOSYANIN SONUNA (yeni zz-* dosyasi DEGIL): yeni bir zz-* dosyasi
   cekirdegi YENIDEN DERLETMEZ ve manifeste kayitli olmadan CANLIYA HIC GITMEZ
   (ikisi de bu depoda olculmus sinif). Mevcut, kayitli ve servis edilen dosyanin
   SONU hem servisi hem sirayi garanti eder — esit ozgullukte SONRA gelen kazanir.
   ============================================================================ */

.PanelHeader > .TopCenter,
.Top.PanelHeader > .TopCenter,
.Content .PanelHeader > .TopCenter,
html body.Mobile .Content .PanelHeader > .TopCenter,
body.Mobile .PanelHeader > .TopCenter { display: none !important; }

.Panel > .PanelHeader,
.Panel > .PanelHeader.TitleLeft,
.PanelHeader.TitleLeft,
.Top.PanelHeader,
.Content .PanelHeader {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 8px !important;
}

.PanelHeader > .TopLeft,
.Top.PanelHeader > .TopLeft,
.Content .PanelHeader > .TopLeft {
  flex: 1 !important;
  grid-column: auto !important;
  min-width: 0 !important;
  width: auto !important;
}

.PanelHeader > .TopRight,
.Top.PanelHeader > .TopRight,
.Content .PanelHeader > .TopRight {
  /* kullanici (2026-09-04): "TopRight size auto olmali" — BUYUMEZ, icerigi kadar yer
     kaplar; kalan TUM genislik TopLeft'e gider => dar ekranda BASLIK OKUNUR. */
  flex: 0 1 auto !important;
  grid-column: auto !important;
  min-width: 0 !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
}

/* Liste secici: kenarlik NORMALDE GORUNMEZ (kullanici: "border cok baskin, hover'da mi
   gozukse"). Hover/odakta belirir — durum geri bildirimi korunur, sukunet kazanilir. */
.PanelHeader > .TopRight .EntityTypeLists {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  /* ⛔ YUZDE KULLANMA: kap (.TopRight) artik ICERIK BOYUTLU (flex:0 1 auto) — yuzde
     dongusel cozulup pill'i 52px'e kistiriyordu; metin 33px + dolgu 32px = 65px
     gerekiyordu, chevron metne BINIYORDU (yakin cekimde olculdu). Px tavan koyuyoruz. */
  max-width: 260px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  position: relative !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  border-radius: 14px !important;
  /* SAG dolgu = chevron'un KENDI seridi; kullanici: "chevron metin icine giriyor" */
  padding: 3px 22px 3px 10px !important;
  transition: background-color .15s ease, border-color .15s ease !important;
}

/* `.ViewSwitcher` sinifi (beyaz zemin + 0.16 kenarlik + 28px sag dolgu) benim
   kuralimi yeniyordu — OLCULDU. Sinifi ACIKCA hedefleyip ozgullugu yukseltiyorum
   (0-4-0). Kullanici: "border cok baskin, hover'da mi gozukse". */
.PanelHeader > .TopRight .EntityTypeLists.ViewSwitcher {
  border: 1px solid transparent !important;
  background: transparent !important;
  /* Renk BASLIKTAN devralinir: acik/koyu tema fark etmeksizin dogru kontrast. */
  color: inherit !important;
  box-shadow: none !important;
  padding: 4px 22px 4px 10px !important;
  min-height: 30px !important;
  height: auto !important;
}

.PanelHeader > .TopRight .EntityTypeLists.ViewSwitcher:hover,
.PanelHeader > .TopRight .EntityTypeLists.ViewSwitcher:focus-visible,
.PanelHeader > .TopRight .EntityTypeLists.ViewSwitcher.Menu_Open {
  border-color: rgba(255, 255, 255, 0.6) !important;
  background: rgba(255, 255, 255, 0.18) !important;
}
.PanelHeader > .TopRight .EntityTypeLists:hover,
.PanelHeader > .TopRight .EntityTypeLists:focus-visible,
.PanelHeader > .TopRight .EntityTypeLists.Menu_Open {
  border-color: rgba(255, 255, 255, 0.55) !important;
  background: rgba(255, 255, 255, 0.16) !important;
}

/* Chevron MUTLAK: sag dolgunun icine oturur, metne ASLA binmez. */
.PanelHeader > .TopRight .EntityTypeLists.Menu_Arrow_Down::after {
  content: "▾" !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  opacity: 0.85 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

@media only screen and (max-width: 768px), body.Mobile {
  html body.Mobile .Content.Content .Panel.Panel > .PanelHeader.PanelHeader,
  html body.Mobile .Content.Content .PanelHeader.PanelHeader.TitleLeft,
  body.Mobile.Mobile .PanelHeader.PanelHeader,
  .Panel > .PanelHeader,
  .PanelHeader.TitleLeft,
  .Top.PanelHeader,
  .Content .PanelHeader {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 8px !important;
    height: auto !important;
    min-height: 44px !important;
  }

  html body.Mobile .Content .PanelHeader > .TopLeft,
  body.Mobile .PanelHeader > .TopLeft,
  .PanelHeader > .TopLeft {
    display: flex !important;
    flex: 1 !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  html body.Mobile .Content.Content .PanelHeader.PanelHeader .Actions,
  html body.Mobile .Content .PanelHeader .Actions,
  body.Mobile .PanelHeader .Actions,
  .PanelHeader .Actions {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
  }

  html body.Mobile .Content.Content .PanelHeader.PanelHeader .EntityTypeViewTitle,
  html body.Mobile .Content .PanelHeader .EntityTypeViewTitle,
  body.Mobile .PanelHeader .EntityTypeViewTitle,
  .PanelHeader .EntityTypeViewTitle {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  html body.Mobile .Content .PanelHeader > .TopRight,
  body.Mobile .PanelHeader > .TopRight,
  .PanelHeader > .TopRight {
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    flex: 0 1 auto !important;   /* icerigi kadar — kalan genislik BASLIGA */
    justify-content: flex-end !important;
  }

  /* Dar ekranda liste secici basligi bogmasin: kucululr, ELLIPSIS ile kirpilir.
     Dokunmatikte HOVER YOKTUR — kenarligi tamamen gizlemek affordance'i oldururdu;
     bu yuzden beyaz-baskin pill yerine EN HAFIF saydam hali kullanilir
     (kullanici: "border cok baskin"). */
  html body.Mobile .Content.Content .PanelHeader.PanelHeader > .TopRight .EntityTypeLists,
  html body.Mobile .Content .PanelHeader > .TopRight .EntityTypeLists.ViewSwitcher,
  body.Mobile .PanelHeader > .TopRight .EntityTypeLists.ViewSwitcher,
  html body.Mobile .Content .PanelHeader > .TopRight .EntityTypeLists,
  body.Mobile .PanelHeader > .TopRight .EntityTypeLists,
  .PanelHeader > .TopRight .EntityTypeLists {
    max-width: 34vw !important;
    font-size: 11px !important;
    padding: 3px 18px 3px 9px !important;
    /* 2026-09-06 OLCULDU: bu blok KOYU baslik seridi VARSAYIYORDU (beyaz on plan +
       beyaz-baskin katman). Gercek etkin zemin ACIK cikti — ata zinciriyle kompozit
       edildi: [251,252,253] — yani beyaz metin beyaz zemine dustu ve "Hepsi" / "Aktifler"
       cipi mobilde 1.03 kontrastla TAMAMEN GORUNMEZDI (esik 4.5). Ayni cip masaustunde
       20.28, tablette 17.85 ile saglamdi; kusur yalniz bu medya blogunun VARSAYIMINDAYDI.
       SOZLESME: her yuzeyin ON PLAN yedegi, KENDI ZEMIN yedegine gore secilir. Ucu de
       ayni varsayimdan (acik zemin) turetiliyor ve bu dosyanin kanitlanmis desenine
       hizalaniyor: koyu-notr ALFA, hem acik hem koyu yuzeyde ayni yumusaklikta durur.
       Token tanimliysa motor UCUNU birden devralir (bugun ucu de TANIMSIZ, yedek kosar). */
    border: 1px solid var(--baslikCipKenar, rgba(15, 23, 42, 0.22)) !important;
    background: var(--baslikCipZemin, rgba(15, 23, 42, 0.05)) !important;
    color: var(--baslikCipRenk, #0f172a) !important;
    box-shadow: none !important;
  }
}

/* ---- ARAMA: GORUNUM KOKUNDE MUTLAK (kullanici duzeltmesi 2026-09-03) ----------
   "bottom'a tasimak zorunda degilsin, EntityTypeViewBody icinde absolute daha mantikli"
   Mutlak konum akistan CIKARIR => ekranda YER KAPLAMAZ ve footer'in her cizimde
   yeniden kurulmasindan (RemoveChildNodes) TAMAMEN bagimsizdir.
   Kap `.EntityTypeView` ZATEN `position:relative` (views.css:1304 olculdu) — yeni
   capalama getirmedigi icin mevcut mutlak cocuklar ETKILENMEZ.
   Paging'in USTUNDE durur (bottom: 34px ~ footer yuksekligi). */
/* SÖZLEŞME (2026-09-13 KULLANICI EMRİ):
   - Kayıt yoksa (.NoItems) ETSearch KESİNLİKLE gizlenir (display:none ve opacity:0).
   - Kayıt varsa varsayılan durumda gizlidir (opacity:0, pointer-events:none).
   - EntityTypeView onhover VE kayıt varsa ETSearch gözükür (opacity:1, pointer-events:auto).
   - Kullanıcı arama kutusuna odaklandığında (:focus-within) veya arama metni varken (.NotEmpty) kutu açık kalır. */

/* 1. Kayıt yoksa (.NoItems) ETSearchPlace KESİNLİKLE gizlenir — hover olsa dahi gizli kalır */
.EntityTypeView.NoItems > .ETSearchPlace:not(:focus-within):not(.NotEmpty):not(:has(input.NotEmpty)),
.EntityTypeView.NoItems .ETSearchPlace:not(:focus-within):not(.NotEmpty):not(:has(input.NotEmpty)),
.EntityTypeView.NoItems .ETSearch:not(:focus-within):not(.NotEmpty):not(:has(input.NotEmpty)),
.Panel .EntityTypeView.NoItems > .ETSearchPlace:not(:focus-within):not(.NotEmpty):not(:has(input.NotEmpty)),
.PanelHasHeader .EntityTypeView.NoItems > .ETSearchPlace:not(:focus-within):not(.NotEmpty):not(:has(input.NotEmpty)) {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 2. Varsayılan (idle) durumda ETSearchPlace gizlidir (opacity: 0, pointer-events: none) */
.EntityTypeView > .ETSearchPlace,
.Panel .EntityTypeView > .ETSearchPlace,
.PanelHasHeader .EntityTypeView > .ETSearchPlace {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  /* 48px: footer 40px — 34px'te kutu footer'a 21px BINIYORDU (olculdu: arama 900-930,
     footer 909). Ortusme SIFIR toleranslidir. */
  bottom: 48px !important;
  /* ⛔ views.css `.ETSearchPlace{width:3em;height:100%}` DEVRALINIR: kutu 36x874 olur,
     `bottom` ile birlikte `top:-34px` cikar ve mutlak kutu TUM gorunumu kaplar; icerik
     dikeyde ortalanip EKRANIN ORTASINDA yuzer (karede olculdu). Bu yuzden top/height/width
     ACIKCA notrlenir — `bottom` tek basina YETMEZ. */
  top: auto !important;
  height: auto !important;
  /* KESIN genislik: cocugun `100%`'i cozulebilsin diye (auto -> auto dongusu
     kutuyu 161px'te takiyordu). Dar gorunumde `min()` ile kap kadar kalir. */
  width: min(260px, 92%) !important;
  display: flex !important;
  align-items: center !important;
  z-index: 6 !important;
  max-width: 92% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .16s ease !important;
}

/* 3. Kayıt varken (.HasItems veya :not(.NoItems)) VE onhover olduğunda ETSearch gözükür.
   Ayrıca odaklanıldığında (:focus-within) veya aktif arama varken (.NotEmpty) görünür kalır. */
.EntityTypeView:not(.NoItems):hover > .ETSearchPlace,
.EntityTypeView.HasItems:hover > .ETSearchPlace,
.Panel .EntityTypeView:not(.NoItems):hover > .ETSearchPlace,
.PanelHasHeader .EntityTypeView:not(.NoItems):hover > .ETSearchPlace,
.EntityTypeView:not(.NoItems) > .ETSearchPlace:focus-within,
.EntityTypeView:not(.NoItems) > .ETSearchPlace.NotEmpty,
.EntityTypeView:not(.NoItems) > .ETSearchPlace:has(input.NotEmpty),
.EntityTypeView.HasItems > .ETSearchPlace:focus-within,
.EntityTypeView.HasItems > .ETSearchPlace.NotEmpty,
.EntityTypeView.HasItems > .ETSearchPlace:has(input.NotEmpty) {
  opacity: 1 !important;
  pointer-events: auto !important;
  display: flex !important;
}

/* Dokunmatikte hover YOKTUR: kayıt varsa daima açık tutulur, kayıt yoksa (.NoItems) yine gizlidir */
@media (hover: none) {
  .EntityTypeView:not(.NoItems) > .ETSearchPlace,
  .EntityTypeView.HasItems > .ETSearchPlace {
    opacity: 1 !important;
    pointer-events: auto !important;
    bottom: 72px !important;
  }
  .EntityTypeView.NoItems > .ETSearchPlace,
  .EntityTypeView.NoItems .ETSearchPlace,
  .EntityTypeView.NoItems .ETSearch {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* 2026-09-14 — MOBIL LISTE: ARAMA + FAB, FOOTER ('Kayit / Sayfa 100') METNININ USTUNE BINIYORDU.
   Olculdu (makina #PLMManufacturingHome, Pixel 7 390px, 3 listenin 3'u; e082fec21 yalniz BOS
   listeyi kapsiyordu): arama `bottom:72px` (hover:none), FAB `bottom:20px` — ikisi de ETV'nin
   ALTINA mutlak capali (`.EntityTypeView{contain:layout}` fixed FAB'i da ETV kutusuna baglar),
   footer (.Center > .Bottom) yuksekligi ise mobilde sayfalama satiriyla DEGISKEN. Sabit `bottom`
   hicbir degerde carpismamayi GARANTI ETMEZ.
   Care YER ACMAK: footer'in ALTINA 58px'lik ayrilmis bant (padding-bottom). Arama bandin SOLUNDA,
   FAB SAGINDA, ayni satirda ve dikey ortali (tek el: eylem altta). Footer metni bandin USTUNDE
   kalir — footer kac satir olursa olsun carpisma YAPISAL olarak yok.
   Kapsam: <768px + kaydi olan + footer'i olan gorunum. Footer'siz gorunumler (Calendar/Kanban)
   ve masaustu yerlesimi DEGISMEZ. `:has(.Center > .Bottom)` ozgullugu (0-5-0) yukaridaki
   hover:none kuralini (0-3-0) sira farkina bakmadan yener. */
@media (max-width: 767px) {
  .EntityTypeView:not(.NoItems):has(> .ETSearchPlace, > .NewItemFAB) .Center > .Bottom {
    padding-bottom: 58px !important;
    box-sizing: border-box !important;
  }
  .EntityTypeView:not(.NoItems):has(.Center > .Bottom) > .ETSearchPlace {
    left: 12px !important;
    right: auto !important;
    transform: none !important;
    bottom: 15px !important;
    /* sagda FAB (50px) + 12px kenar + 22px nefes */
    width: calc(100% - 96px) !important;
    max-width: 260px !important;
  }
  .EntityTypeView:not(.NoItems):has(.Center > .Bottom) > .NewItemFAB {
    bottom: 4px !important;
    right: 12px !important;
  }
  /* 2026-09-14 — FAB SABIT ALT CUBUGUN ARKASINDA (%84 ortulu). Olculdu (satis #mOrgsHome, 375x812
     Mobile): FAB `position:fixed` ve konum kabi YOK (contain/transform tasiyan ata 0) ⇒ `bottom`
     ETV'ye degil EKRANA gore; `.PageZone_footer.PageFooter` sticky, top 766 · 46px · z-index 999;
     FAB 758-808 z-index 100 ⇒ kesisim 2100/2500 px2, FAB merkezine dokunus alt cubuk ikonuna gidiyor.
     Care YER ACMAK: sabit alt cubuk olan sayfada FAB cubugun yuksekligi kadar yukari alinir
     (z-index yukseltmek FAB'i cubuk ikonunun USTUNE bindirirdi — ortusme yine olur). */
  body:has(.PageZone_footer.PageFooter) {
    --mobilAltCubukH: 46px;
  }
  /* ⛔ 2026-09-14 GERILEME DUZELTMESI: kaydirma YALNIZ FAB'in EKRANA bagli oldugu listelere.
     Taban `.EntityTypeView{contain:layout}` (views.css:1309) fixed FAB'i LISTE KUTUSUNA baglar; liste
     alt cubugun ustunde biter ⇒ orada bottom:4px dogrudur. Olculdu (satis #MyPersons 390x844):
     +46px kaydirma FAB'i aramadan koparip "Kayit / Sayfa" satirinin 2px altina tasiyordu
     (bildirim: localhost maya liste, sayfalama metniyle ortusme). Konum kabini YALNIZ
     `.Content.DashboardFlow .View_ItemView.EntityTypeView{contain:none}` (zz-dashboard-flow.css:365)
     kaldirir ⇒ kaydirma o secicide. Ozgulluk 0-6-0 > bant kurali 0-5-0 (ikisi de !important). */
  .Content.DashboardFlow .View_ItemView.EntityTypeView:not(.NoItems) > .NewItemFAB {
    bottom: calc(4px + var(--mobilAltCubukH, 0px)) !important;
  }
  body.Mobile .Content.DashboardFlow .View_ItemView.EntityTypeView > .NewItemFAB {
    bottom: calc(12px + var(--mobilAltCubukH, 0px));
  }
}

/* 2026-09-14 — LISTE HARF ATLAMA SERIDI (.FirstLetters) SAHIBI GORUNUMUN DISINA TASIP KOMSULARI ORTUYORDU.
   Kok: et.js:5444 seridi liste govdesine (.ETWBody) ekler, views.css:3589 ise `position:fixed; top:40%`
   ile EKRANA baglar (mobil @media: `top:auto; bottom:15vh`; domain CSS `.Page .FirstLetters{top:50%|25%}`).
   Olculdu (satis #MyPersons, 1600x500): serit 149-565, liste 364-443 ⇒ ContentHeader + KPI ustunde.
   Care (JS'siz, kullanici karari): serit liste govdesinin (flex-wrap, overflow:auto) ILK sirasina alinir,
   YUKSEKLIGI 0 tam satir olur (kartlari itmez), harfler saga dayali tasar, `sticky` ile liste kaydikca ust
   kenarda kalir; liste kutusu disina CIKAMAZ (overflow kirpar) ⇒ komsu ortusmesi yapisal olarak yok.
   Iki yonlu <style> deneyi: 1600x950 harf 15/15 · ilk kart konumu degismedi · 300px kaydirmada sabit ·
   stil kaldirilinca eski konum geri geldi. Dokunmatik harf kaydirma (checkTouch, elementFromPoint) aynen. */
.ETWBody > .FirstLetters {
    position: sticky !important;
    top: 8px !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    order: -1;
    flex: 0 0 100%;
    width: 100% !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 4px 0 0 !important;
    box-sizing: border-box;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    z-index: 5;
    pointer-events: none;
}
.ETWBody > .FirstLetters > div {
    pointer-events: auto;
    flex: 0 0 auto;
}
/* Mobil: liste gorunen alani kisa (390x844: 316px); 15 harf 2em+4px aralikla 420px tutup 4'u kirpiliyordu.
   Harfler sikisir (surukleme kaydiricisi — dokunma hedefi sutunun kendisi) ⇒ 15 × ~20px = 303px sigar. */
@media (max-width: 767px) {
    .ETWBody > .FirstLetters {
        gap: 1px;
    }
    .ETWBody > .FirstLetters > div {
        width: 1.6em;
        height: 1.6em;
    }
}

/* ⛔ KOK (kullanici: "sola dogru ve hatta tasiyor, dar EntityTypeView'larda"):
   views.css `.ETSearch{position:absolute; right:0}` — sarmalayici benim
   `width/height:auto` duzeltmemle 0x0'a inince MUTLAK cocuk SAG KENARDAN sola
   dogru uzuyordu; dar gorunumde kabin disina TASIYORDU. Cozum: akisa geri al
   (`position:relative` — `::after` arama ikonunun capasi KORUNUR, `right:0`
   goreli konumda 0 kaydirma demektir). Boylece sarmalayici GERCEK olcu kazanir
   ve `left:50% + translateX(-50%)` gercekten ORTALAR. */
.EntityTypeView > .ETSearchPlace .ETSearch {
  position: relative !important;
  right: auto !important;
  left: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  /* KABI DOLDUR: `auto` (kucul-sig) olunca cocugun `100%`'i DONGUSEL cozulup
     input 161px'te takiliyor ve 260px'lik sarmalayicinin SOLUNA dayaniyordu
     (mobil karede olculdu: sarmalayici merkezde, input solda). */
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
}
/* Sinif TEKRARI (0-3-0): `!important` ile ayni tier'daki rakipleri sira farkina
   BAKMADAN yener — views.css `.ETSearch input{width:2.5em;opacity:.5}` kutuyu
   hayalet gosteriyordu (karede yalniz buyutec ikonu goruluyordu). */
/* Kutu zaten YALNIZ hover/odakta gorunuyor — o anda placeholder da GORUNMELI,
   yoksa kullanici bos bir hapin ne oldugunu bilemez (views.css onu 0 opaklikta
   birakiyor ve ancak `.ETSearch:hover`'da aciyor). */
.EntityTypeView > .ETSearchPlace.ETSearchPlace .ETSearch input::placeholder {
  opacity: 0.75 !important;
}
.EntityTypeView > .ETSearchPlace.ETSearchPlace .ETSearch input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  font-size: 12px !important;
  opacity: 1 !important;
  border-radius: 14px !important;
  padding: 0 12px !important;
  /* ⚠️ --panelBackColor platformda TANIMSIZ (olculmus hayalet token) — kullanma. */
  background: var(--singleItemBackColor, #ffffff) !important;
  color: var(--textColor, #303030) !important;
  border: 1px solid var(--border1, #d7dae1) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
}

/* MODUL HAPI x DIJITAL IKIZ TETIGI (2026-09-15, TG olcumu satis #SessionManagement)
   x-digital-twin.js tetigi hap dugmesinin ICINE `position:absolute; right:8px` ile koyar
   (zz-graph.css: 30px; dokunmatik/<=900px a11y kurali 44px). Dugme dolgusu ise
   layout.css `padding: 1em 2em !important` (mobil font 10.5px -> 21px) — tetigin 44px'ini
   tasimaz: 390x844'te "Toplanti" metni tetigin 17px ALTINA giriyordu (1600'de 0).
   Cozum yer ACMAK: tetik varken sag dolgu = tetik + sag bosluk + nefes. Font kucultme / ellipsis YOK.
   Ozgulluk (1,2,0) layout.css (0,2,0) !important'i yener; !important o rakip yuzunden. */
.EntitySelector > .Button:has(> #DigitalTwinHeaderTrigger) {
  padding-right: calc(30px + 8px + 0.5em) !important;
}
@media (pointer: coarse), (max-width: 900px) {
  .EntitySelector > .Button:has(> #DigitalTwinHeaderTrigger) {
    padding-right: calc(44px + 8px + 0.5em) !important;
  }
}

/* MOBIL BASLIK BOLGELERI x MODUL HAPI (2026-09-15, TG olcumu iPhone 13, satis+makina, kfe7-hap-baslik-tarama.cjs)
   Baslik uc esit bolge (flex 1 1 0%, her biri 125px) — hap metne ~60px birakiyordu: 564 benzersiz modulun
   479'unda baslik 3+ satira kiriliyor ya da ikona biniyordu. Logo bolgesi icerik kadar (logo 80px),
   kullanici bolgesi sabit 112px (avatar + ad + ok; 110px'te ad oka 1px biniyordu), hap kalan alani alir.
   Sol ikon hapin 8-19px'inde mutlak durur, metin 10px'ten basliyordu (tek satirlik uzun basliklarda
   ikonla ortusme) — sol dolgu 26px. Sonuc: tasan 479 -> 29 (satis 29/404, hepsi 3 satir, ortusme 0).
   Kullanici adi korunur (karar F). Masaustu dokunulmaz (yalniz body.Mobile). */
body.Mobile #PageZone_headerleft { flex: 0 0 auto !important; }
body.Mobile #PageZone_headerright { flex: 0 0 112px !important; }
body.Mobile #PageZone_headercenter { flex: 1 1 0% !important; min-width: 0 !important; }
body.Mobile #PageZone_headercenter .EntitySelector,
body.Mobile #PageZone_headercenter .EntitySelector > .Button { max-width: 100% !important; }
body.Mobile #PageZone_headerleft img { max-width: 80px !important; height: auto !important; }
body.Mobile #PageZone_headercenter .EntitySelector.EntitySelector > .Button.Button:has(> .ImageSpan) { padding-left: 26px !important; }
/* ============================================================================
   ROZET · NAV KARTI · İKON ŞERİDİ · ORANSIZ AKSİYON
   ============================================================================
   Kullanıcı bildirimi (2026-08-18): "Menü açılınca sol bok gibi gözüküyor",
   "120 ikonun üstünde zeminsiz duruyor", "+ düğmesi orantısız".

   ⛔ HİÇBİRİ TAHMİN DEĞİL — dördü de ölçüldü (localhost, 390x844, gerçek cihaz
   kipi isMobile+hasTouch) ve ekran görüntüsüyle gözle doğrulandı.

   ── 1) ROZET ZEMİNSİZ — ve bu TEK ÖRNEK DEĞİL, SINIF ────────────────────────
   ÖLÇÜLDÜ: 20 rozet, hepsi aynı imza —
       .Aggregate_Persons  14-21 x 17  position:absolute  top:0 right:0
       background: rgba(0,0,0,0)   ← ZEMİN YOK
       color:      rgb(0,0,0)      ← saf siyah
       border-radius: 0px          ← rozet gibi görünmüyor
       ebeveyn .NavButton          ← ebeveyn de saydam
   Sonuç: sayı, kartın/ikonun üstünde havada duran bir işaret gibi okunuyor.
   Ekran görüntüsünde en çok göze batan şey buydu.

   ⚠️ SEÇİCİ ÖLÇÜMDEN GELDİ, TAHMİNDEN DEĞİL: nav rozetleri `AggregateView`
      sınıfını **TAŞIMAZ** (ölçüldü: hero 9/9 taşıyor, rozet 0/9). Bu yüzden
      `.NavButton > .AggregateView.Aggregate` yazmak 0 element eşler = kural
      hiç yazılmamış sayılır (`361-content` KURAL 8). Doğrusu `.NavButton > .Aggregate`.

   ⚠️ NEDEN NÖTR PİLL, NEDEN VURGU RENGİ DEĞİL: rozetlerin bir kısmı "-" taşıyor
      ve "-" bir KUSUR DEĞİL, **ÖLÇÜLEMEDİ**dir (veri yok). Vurgu renkli dolu bir
      pill "-" içinde yanlış bir aciliyet duygusu üretir. Nötr pill ikisini de
      dürüstçe taşır: "93" okunur, "-" sakin durur.
      CSS içeriğe göre seçemez ⇒ tek biçim İKİSİNE DE yakışmalı.               */

.NavButton > .Aggregate,
.Nav > .Aggregate,
.Button.HasImage > .Aggregate,
.TabButton > .Aggregate {
    /* konum DEĞİŞMEZ (top:0/right:0 motorun kararı) — yalnız görsel kimlik */
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .07);
    color: #334155;
    font-size: 11px;
    font-weight: 600;
    line-height: 15px;
    text-align: center;
    box-sizing: border-box;
    /* rozet, örttüğü içerikten AYRIŞSIN */
    box-shadow: 0 0 0 2px var(--bg, #fff);
}


/* ── 1b) ROZETIN BOS DURUMU — ici "-" olan pill, hic pill olmamasindan KOTU ──
   OLCULDU (canli onebox + localhost, 30 sn oturma beklenerek): cekmecedeki 8 nav
   rozetinin 8'i de "-" gosteriyordu ve motor HIC durum sinifi yaymiyordu
   (AggregateZero=false · AggregateValueLoading=false · title bos · dataset yalniz
   action=event) ⇒ CSS "93" ile "-" arasini AYIRT EDEMIYORDU.
   Motora `AggregateEmpty` sinyali eklendi (a-aggregate.js): yer tutucu yazilirken
   KONUR, gercek deger gelince KALKAR.

   ⛔ KAPSAM BILEREK DAR — YALNIZ nav/tab rozeti:
      Hero KPI'da (`AggregateView`) "-" ANLAMLIDIR — yaninda iskelet-pulse calisir
      ve kullanici "bu sayi henuz olculemedi"yi gormelidir. Nav rozetinde ise "-"
      SIFIR bilgi tasir; etiketin kendisi zaten dogruyu soyluyor.
   ⛔⛔ `display:none` YANLIS CIKTI — TAVUK-YUMURTA OLDU (2026-08-24 olculdu).
      Ilk surum `display:none` idi ve "deger gelince sinif kalkar, rozet geri
      gelir" varsayimina dayaniyordu. Olcum tersini soyledi: rozetin ILK cizimi
      `LazyLoader.observe` -> IntersectionObserver'a emanet (a-aggregate.js:467)
      ve `display:none` oge HIC KESISMEZ ⇒ `$ReDraw` hic kosmaz ⇒ deger hic
      gelmez ⇒ sinif hic kalkmaz. Sonuc: TUM nav rozetleri kalici oldu
      (localhost #Persons: 9/9 rozet `$hasDrawn:false`, rect 0x0, metin "-").
      Kullanici bildirimi: "Nav'larin Aggregate'leri calismiyor."
   ⇒ Care `visibility:hidden`: IO GEOMETRIYE bakar, gorunmez ama YER KAPLAYAN
      kutu kesisir ve cizim dogar; rozet `position:absolute` oldugu icin yer
      kaplamasi hicbir seyi kaydirmaz. Goz yine "-" gormez; deger gelince
      `AggregateEmpty` kalkar ve rozet gorunur. */
.NavButton > .Aggregate.AggregateEmpty,
.Nav > .Aggregate.AggregateEmpty,
.Button.HasImage > .Aggregate.AggregateEmpty,
.TabButton > .Aggregate.AggregateEmpty {
    visibility: hidden;
}

/* ── 2) NAV KARTININ ORTASI BOŞ ────────────────────────────────────────────
   ÖLÇÜLDÜ: kart yüksekliği 56-58px, etiket tek satır 14px (~20px).
   Etiket DİKEYDE ORTALI DEĞİL — ekran görüntüsünde alta yakın duruyor ve
   üstte ~30px boşluk kalıyor; kullanıcı bunu "boşluklar geniş" diye bildirdi.

   ⛔ YÜKSEKLİĞE DOKUNULMUYOR. 56px dokunma hedefi olarak DOĞRU (WCAG 2.5.8
      tabanı 24px, rahat hedef 44px+) ve kısaltmak erişilebilirliği düşürür.
      Düzeltilen şey boşluğun KENDİSİ değil, DAĞILIMI: içerik ortalanınca
      üstteki tek büyük boşluk, altta ve üstte eşit iki küçük boşluğa dönüşür
      ve kart "dolu" okunur. Yerleşim ölçüsü değişmez ⇒ hiçbir şey kaymaz.   */
.NavButton,
.Nav > a,
#PageZone_LeftNavs .NavButton {
    display: flex;
    align-items: center;
}

/* ── 3) İKON ŞERİDİ 4+2 VE İKİNCİ SATIR ORTALANMIŞ ─────────────────────────
   ÖLÇÜLDÜ (mobil, çekmece içi .PageZone_usertools):
       kap w=235  flex-wrap: wrap  satır=2  çocuk=6
       satır 1: x = -219 · -169 · -119 · -69   (4 ikon, 44px, sol kenardan)
       satır 2: x = -123 · -69                (2 ikon, ORTALANMIŞ)
   6 x 44px + boşluklar = ~294px > 235px ⇒ **sarma KAÇINILMAZ**, kusur o değil.
   Kusur, ikinci satırın birinciyle AYNI SOL KENARI paylaşmaması: göz iki satırı
   tek ızgara olarak okuyamıyor (Gestalt hizalama ihlali) ve düzen kaza gibi
   görünüyor — kullanıcının "bok gibi" dediği şey tam olarak bu.

   ⛔ ÜÇ ALTERNATİF ÖLÇÜLDÜ VE ELENDİ:
      (a) `nowrap` + küçült → 6 ikon 235px'e sığması için ~36px olurdu;
          WCAG tabanını (24px) geçer ama mevcut 44px hedefi KÜÇÜLTÜR = gerileme.
      (b) `nowrap` + `overflow-x:auto` → çekmecede yatay kaydırma, keşfedilemez.
      (c) ölçülmüş geçmiş: `wrap` KALDIRILDIĞINDA Drive ikonu kırpılıyordu (x=-5).
      ⇒ Sarma KORUNUR, yalnız hizası düzeltilir. En dar müdahale.              */
/* ⛔⛔ VE BURADA KENDI OLCUM ALETIM YANILDI — DUZELTME GERI ALINDI.
   Ilk yazdigim kural `justify-content: flex-start` idi. Sonra kazanan degeri
   olctum: kap `flex-end`. Yuklemim satirlarin SOL kenarini kiyasliyordu ve
   `flex-end` bir kapta sol kenarlar DOGAL OLARAK farklidir:
       satir 1: solX= 41 + 4x44 + 3x6 boskuk = 235  (sag kenar)
       satir 2: solX=137 + 2x44 + 1x6 boskuk = 231  (sag kenar)
   ⇒ Iki satir ZATEN HIZALI — yalnizca SAG kenarda. Kusur yoktu; `hizali:false`
   sonucunu ureten sey benim yanlis eksenimdi (bugun ucuncu kez: yorumda token
   sayan grep · styleSheets'in ilk eslesmesi · ve bu).
   `flex-start` uygulanabilseydi tutarli sag hizayi BOZACAKTI ⇒ kaldirildi.
   Yalniz `row-gap` KALIR: sarilan iki satir arasi bosluk gercek bir iyilestirme
   ve tek basina hiza degistirmez. */
.PageZone_usertools,
.PageZone.PageZone_usertools.UserTools {
    row-gap: 6px;
}

/* ── 4) ORANSIZ AKSİYON — `Action_New` 44x80 ───────────────────────────────
   ÖLÇÜLDÜ: A.Action_New  44 x 80  @13,565  en/boy oranı **1.83**
            ebeveyn .Actions  display:flex
   Sebep: flex kabın varsayılanı `align-items: stretch`; kabın en uzun kardeşi
   ne kadarsa "+" düğmesi de o kadar UZUYOR. Yani düğmenin kendi ölçüsü değil,
   komşusunun ölçüsü çiziyor — ikon kare olduğu için sonuç oransız görünüyor.

   ⛔ KAPSAM BİLEREK KADRAJDAN BAĞIMSIZ. Masaüstünde bugün bulgu YOK
      (oransız: 0) ama sebep kadraja değil **kardeşin yüksekliğine** bağlı:
      herhangi bir kadrajda uzun bir kardeş doğduğunda aynı kusur üretilir.
      Bu depoda "kapsamı mobile daraltma" hatası ÖLÇÜLMÜŞ ŞEKİLDE 5 KEZ
      tekrarlandı ⇒ gerekçesiz daraltma yapılmıyor.
   `align-self:center` zaten doğru boyda olan düğmede GÖRSEL ETKİ ÜRETMEZ —
   yalnız gereksiz uzamayı keser ("taşma oluşmadan önlem").                  */
.Actions > a.Action_New,
.Actions > a[class*="Action_"],
.Top .Actions > a {
    align-self: center;
}

/* ── 5) SEÇİM KOLONU 10px TAŞIYOR ─────────────────────────────────────────
   ÖLÇÜLDÜ: td.FirstCol  w=24  clientWidth=22  scrollWidth=32  ⇒ taşma 10px
   İçerik metin DEĞİL: 24px'e çekilmiş `.MicroButton` (WCAG 2.5.8 düzeltmesi,
   zz-masaustu-tasma.css §2). Yani kolon, kendi içindeki uyumlu düğmeye
   yetmiyor. Taban 32px'e çekilir — düğme + kenar payı.
   ⚠️ Yalnız `FirstCol`: ölçülen tek taşan hücre bu. Diğer başlıklara taban
      genişlik VERİLMEDİ — ölçülmemiş bir kurala müdahale, çalışanı bozar.    */
/* ⛔⛔ KURAL KALDIRILDI — IKI SEBEPTEN, IKISI DE OLCULDU.
   (1) NO-OP: `.ListTable` ve `table` uzerinde `table-layout: fixed` var
       (servis edilen pakette @109524 ve @211052). Sabit yerlesimde kolon
       genisligini ILK SATIRIN hucre genislikleri belirler ve `td`ye verilen
       `min-width` YOK SAYILIR. Olculdu: kural uygulandi (`minWidth: 32px`)
       ama tasma AYNEN 10px kaldi (cw=22 sw=32). Etkisiz kural yazilmamis
       sayilir — dosyada birakmak gurultudur.
   (2) BULGU DEGIL: hucrenin `overflow` degeri **visible** (@520763). Yani
       icerik KIRPILMIYOR, bilgi kaybi YOK; denetimin A3 yuklemi
       (`overflow:hidden` + tasma) burada saglanmiyor. Kolonu 24px'e sabitleyen
       kural da `!important` ile BILINCLI yazilmis (@886033, mobil).
   ⇒ Olculmemis bir kusuru `!important` ile dovmek yerine kural kaldirildi. */
/* zz-search-groups.css — Hybrid grouped search dropdown (T24)
 * Header "Arama" panel (js/m-search.js). Post-Meta tier (zz-*) so it wins over
 * the generic Navigation defaults. AI rows are visually distinct (✦ accent). */

.SearchNavs {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.SearchGroup {
    display: flex;
    flex-direction: column;
    margin-top: 6px;
}

.SearchGroupTitle {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted, #8a94a6);
    padding: 4px 10px 2px;
    opacity: .85;
}

.SearchGroupBody {
    display: flex;
    flex-direction: column;
}

.SearchGroupItem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text, inherit);
    text-decoration: none;
    transition: background-color .12s ease;
}

.SearchGroupItem > i.fa {
    width: 16px;
    text-align: center;
    opacity: .7;
}

.SearchItemLabel {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Right-aligned EntityType / source chip */
.SearchItemET {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--text-muted, #8a94a6);
    background: var(--surface-2, rgba(127, 127, 127, .12));
    border-radius: 6px;
    padding: 1px 7px;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Intent-type badge (Sayfa / Aksiyon / Kayıt / AI) */
.SearchKind {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--accent, #4b7bec);
    border: 1px solid var(--accent, #4b7bec);
    border-radius: 5px;
    padding: 0 5px;
    line-height: 15px;
    opacity: .75;
}

.SearchGroupItem:hover,
.SearchGroupItem.SearchItemActive {
    background: var(--surface-hover, rgba(75, 123, 236, .12));
}

.SearchGroupLoading {
    padding: 7px 10px;
    font-size: 12px;
    color: var(--text-muted, #8a94a6);
    font-style: italic;
}

/* ── AI escalation row + semantic group (✦) ─────────────────────────── */
.SearchAIRow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 9px 10px;
    border-radius: 9px;
    cursor: pointer;
    text-decoration: none;
    background: linear-gradient(90deg, rgba(123, 97, 255, .12), rgba(75, 123, 236, .10));
    border: 1px solid rgba(123, 97, 255, .30);
    color: var(--text, inherit);
    transition: filter .12s ease;
}

.SearchAIRow:hover,
.SearchAIRow.SearchItemActive {
    filter: brightness(1.06);
    border-color: rgba(123, 97, 255, .55);
}

.SearchAIStar {
    color: #7b61ff;
    font-size: 14px;
    line-height: 1;
}

.SearchAIText {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.SearchGroupAI .SearchGroupTitle {
    color: #7b61ff;
    opacity: 1;
}

.SearchSemanticItem .SearchItemLabel {
    white-space: normal;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--text-muted, #6b7280);
}
/* zz-selfdocs.css — Guide panel "Bu Ekran / This Screen" Self-Docs section.
 * Auto page documentation (screen purpose + field dictionary) generated from
 * live, Security-XSLT-filtered metadata by js/c-guide.js. CSS lives here, not
 * in the .js file (NO-CSS-in-JS rule); scoped to .SelfDocsPanel so it never
 * bleeds into authored Guide content. Post-Meta core tier (css/core/zz-*.css). */

.SelfDocsPanel .guide-hero { margin-bottom: 14px; }
.SelfDocsPanel .SelfDocsSection { margin-top: 4px; }
.SelfDocsPanel .SelfDocsSection h2 { font-size: 1em; margin: 0 0 8px; opacity: .85; }

.SelfDocsTable { width: 100%; border-collapse: collapse; font-size: .86em; }
.SelfDocsTable th,
.SelfDocsTable td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.SelfDocsTable thead th { font-weight: 600; color: #64748b; border-bottom: 1px solid rgba(0, 0, 0, .14); }
.SelfDocsTable tbody tr:hover { background: rgba(0, 0, 0, .03); }
.SelfDocsTable td:last-child,
.SelfDocsTable th:last-child { text-align: center; white-space: nowrap; }
/* zz-suggest.css — Ontoloji Proaktif Asistan öneri yüzeyleri (post-Meta core tier).
 * Loads AFTER Meta so these rules win without !important. Every suggestion surface
 * (Drive upload card, İlişkiler "Önerilen dosyalar", empty-FK form chip, briefing/
 * InsightChip ontology signals, Öneri Merkezi grouping, NBA chips, "neden?" popover)
 * shares this ONE class vocabulary. JS only toggles/sets these classes — never inline
 * CSS (hard rule feedback_no_css_in_js_files). Reuses the --graph-* tokens from
 * zz-graph.css so the assistant reads as one system with the İlişkiler graph. */

:root {
    --asst-accent: var(--graph-accent, #5b8def);
    --asst-border: var(--graph-border, rgba(120, 120, 130, 0.28));
    --asst-bg: var(--graph-bg, rgba(255, 255, 255, 0.6));
    --asst-chip-bg: var(--graph-chip-bg, rgba(120, 120, 130, 0.10));
    --asst-active: #2f9e6b;
    --asst-passive: #9aa1ac;
    --asst-deleted: #d05252;
}

/* ── generic card (Drive upload / graph-panel "Önerilen dosyalar" rows) ── */
.AsstSuggestCard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(91, 141, 239, 0.30);
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(91, 141, 239, 0.08), rgba(47, 158, 107, 0.04));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.AsstSuggestCard.state-hidden { display: none !important; }
.AsstSuggestCardHead {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--asst-accent);
}
.AsstSuggestCardHead .AsstSpark { opacity: 0.9; }
.AsstSuggestList {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── one suggestion row (title + meta + actions) ── */
.AsstSuggestRow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--asst-border);
    border-radius: 10px;
    background: var(--SurfaceColor, #fff);
}
.AsstSuggestRowMain { flex: 1 1 auto; min-width: 0; }
.AsstSuggestTitle {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.AsstSuggestMeta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 11px;
    opacity: 0.72;
    flex-wrap: wrap;
}
.AsstSuggestScore {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--asst-chip-bg);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    opacity: 1;
}
.AsstSuggestActions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* ── state badges (ACTIVE-FIRST rule made visible) ── */
.AsstStateBadge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.AsstState-active { color: var(--asst-active); background: rgba(47, 158, 107, 0.12); }
.AsstState-passive { color: var(--asst-passive); background: rgba(154, 161, 172, 0.14); }
.AsstState-deleted { color: var(--asst-deleted); background: rgba(208, 82, 82, 0.12); }

/* ── buttons ── */
.AsstSuggestBtn {
    appearance: none;
    border: 1px solid var(--asst-accent);
    background: var(--asst-accent);
    color: #fff;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 120ms ease, background 120ms ease;
}
.AsstSuggestBtn:hover { filter: brightness(1.06); }
.AsstSuggestBtn[disabled] { opacity: 0.5; cursor: default; }
.AsstSuggestBtn-ghost {
    border: 1px solid var(--asst-border);
    background: transparent;
    color: inherit;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.AsstSuggestBtn-ghost:hover { background: var(--asst-chip-bg); }

/* ── "neden?" trigger + popover ── */
.AsstSuggestWhy {
    appearance: none;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--asst-border);
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: 0.6;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.AsstSuggestWhy:hover { opacity: 1; background: var(--asst-chip-bg); }
.AsstSuggestWhyPop {
    position: absolute;
    z-index: 100000;
    min-width: 200px;
    max-width: 300px;
    padding: 10px 12px;
    border: 1px solid var(--asst-border);
    border-radius: 10px;
    background: var(--SurfaceColor, #fff);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    font-size: 12px;
}
.AsstWhyHead { font-weight: 800; color: var(--asst-accent); margin-bottom: 6px; }
.AsstWhyRow {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
}
.AsstWhyRow span { opacity: 0.7; }
.AsstWhyRow b { font-weight: 700; }
.AsstWhyDetail { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--asst-border); opacity: 0.8; line-height: 1.4; }

/* ── empty-FK inline field chip (SIFIR-LAYOUT: absolute overlay, no flow height) ── */
.AsstFieldChipHost { position: relative; }
.AsstFieldChip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 3px 8px;
    border: 1px dashed rgba(91, 141, 239, 0.5);
    border-radius: 999px;
    background: rgba(91, 141, 239, 0.06);
    font-size: 11px;
    line-height: 1.4;
    max-width: 100%;
}
.AsstFieldChip.state-hidden { display: none !important; }
.AsstFieldChip .AsstSpark { color: var(--asst-accent); flex: 0 0 auto; }
.AsstFieldChipText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.AsstFieldChip .AsstSuggestBtn { padding: 2px 8px; }
.AsstFieldChip .AsstSuggestBtn-ghost { padding: 2px 6px; }

/* ── briefing / InsightChip ontology signal flavour (reuse host classes; just tint) ── */
.InsightChip_ontology .InsightChipStar,
.AB_Item.AB_ontology .AB_Text { color: var(--asst-accent); }

/* ── Öneri Merkezi (ai-inbox v2) group header ── */
.AInbox_Group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.AInbox_GroupHead {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    opacity: 0.82;
}
.AInbox_GroupHead .AInbox_GroupCount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--asst-chip-bg);
    font-size: 11px;
    font-weight: 700;
}
.AInbox_GroupBulk { margin-left: auto; }

/* ── similar / merge compare panel ── */
.AsstCompare {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.AsstCompareGrid {
    display: grid;
    grid-template-columns: minmax(90px, 0.8fr) 1fr 1fr;
    gap: 1px;
    border: 1px solid var(--asst-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--asst-border);
}
.AsstCompareCell {
    padding: 6px 10px;
    background: var(--SurfaceColor, #fff);
    font-size: 12px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.AsstCompareCell.AsstCompareHead { font-weight: 700; opacity: 0.8; background: var(--asst-chip-bg); }
.AsstCompareCell.AsstDiff { background: rgba(217, 119, 6, 0.10); }

@media (max-width: 640px) {
    .AsstSuggestRow { flex-wrap: wrap; }
    .AsstSuggestActions { width: 100%; }
    .AsstCompareGrid { grid-template-columns: 1fr; }
}
/* ================================================================
   Progressive form validation — pristine required fields stay NEUTRAL.

   Problem (validation-before-interaction anti-pattern): on a brand-new
   SingleItem record (e.g. #SISStudents "Yeni Öğrenci") the platform adds
   the .InvalidField class to every required-but-empty field at render
   time (field-edit.js: AddClass(fielddiv,"InvalidField") when isValid is
   false). The Meta ElementStyles + the promoted zz-from-361 CSSSelectors
   then paint a red input border and a pink control background BEFORE the
   user has touched anything.

   Fix: while a field is pristine (never focused, no save attempt) we
   suppress those error visuals so required fields show only the neutral
   "required" hint (the "*" asterisk / grey border). Error visuals return
   only once the field is interacted with:
       .FieldTouched  — added on blur in m.js (user focused then left it)
       .FieldError    — added by atom.js on a save attempt

   The "N required fields left" RequiredMeter (driven by .FieldIsEmpty) is
   untouched. This file is a post-Meta zz-* tier (loads AFTER Meta CSS and
   AFTER zz-from-361.css), so its neutralisation beats both origins by
   specificity + cascade order. When the field IS touched / errored the
   :not() guards fail here, so the original Meta / zz-from-361 error
   visuals apply unchanged.
   ================================================================ */

/* Pristine required-empty: neutralise the reddish --inputBorder the Meta
   rule (.Field.Mode_Edit.Required.FieldIsEmpty) sets, back to the same
   grey used by an ordinary empty field. */
.SingleItem .Field.Required.FieldIsEmpty.Mode_Edit:not(.FieldTouched):not(.FieldError) {
    --inputBorder: solid 1px rgba(128,128,128,0.25);
}

/* Pristine empty: keep the LABEL neutral too. The Meta "traffic light" rule
   (.Field.Mode_Edit.FieldIsEmpty AND .Required.FieldIsEmpty, itemstyles.css)
   turns EVERY empty label dark-red at render time, so a brand-new record read
   as an all-red form before the user typed anything (B6 — measured live:
   --labelColor was rgba(64,0,0,0.75) on pristine required fields). Neutralise
   only while pristine; a filled field still goes green (not .FieldIsEmpty), and
   a touched/save-errored required field still goes red (:not guards fail). */
.SingleItem .Field.FieldIsEmpty.Mode_Edit:not(.FieldTouched):not(.FieldError) {
    --labelColor: rgba(90,99,120,0.85);
}

/* Pristine: strip the InvalidField pink background + red border/box-shadow
   from the actual text/number/date/select controls (base SingleItem
   control background is rgba(255,255,255,0.95); see fields.css). */
.SingleItem .Field.InvalidField:not(.FieldTouched):not(.FieldError) input,
.SingleItem .Field.InvalidField:not(.FieldTouched):not(.FieldError) textarea,
.SingleItem .Field.InvalidField:not(.FieldTouched):not(.FieldError) select {
    background-color: rgba(255,255,255,0.95);
    border-color: rgba(128,128,128,0.25);
    box-shadow: none;
}

/* Pristine: strip the InvalidField tint from choice chips / selection
   controls (their default background is transparent). */
.SingleItem .Field.InvalidField:not(.FieldTouched):not(.FieldError) .Choices a,
.SingleItem .Field.InvalidField:not(.FieldTouched):not(.FieldError) .ItemSelection {
    background-color: transparent;
    border-color: rgba(128,128,128,0.25);
    box-shadow: none;
}
/* =====================================================================
   CALENDAR VIEW — PREMIUM SHEET (post-Meta zz tier)
   Moved from 40-calendar.css (NN/pre-Meta) → zz-view-calendar.css so it
   loads AFTER the legacy meta-tier ElementStyles (CssKey 283/377/378/379/380)
   that were OVERRIDING the premium look (blue #3b82f6 events, block DateModes,
   relative DayBody). Now premium wins at equal specificity by source order.
   Loads after zz-from-361.css too (v > f). FE-only; no meta.xml / rebuild.
   ===================================================================== */
/* ---- Calendar Premium Toolbar ---- */
.CalendarToolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid rgba(127,127,127,0.15);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    flex-wrap: nowrap;
    min-height: 44px;
}
.CalendarToolbarLeft,
.CalendarToolbarCenter,
.CalendarToolbarRight {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    /* Equal thirds so the center DateDisplay is truly centered and the three
       zones line up symmetrically regardless of left/right content width. */
    flex: 1 1 0;
}
.CalendarToolbarLeft {
    justify-content: flex-start;
}
.CalendarToolbarCenter {
    justify-content: center;
}
.CalendarToolbarRight {
    justify-content: flex-end;
}
.CalendarToolbarField {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 220px;
}
.CalendarToolbarField .ByFieldsRight,
.CalendarToolbarField .ByFieldsRightItem {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}
.CalendarToolbarField .ByFieldsRightItem > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.CalendarToolbarField .ByFieldsRightItem .ItemSelection {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 0.74rem;
    font-weight: 500;
    color: rgba(var(--textRGB, 48,48,48), 0.75);
    background: rgba(127,127,127,0.05);
    border: 1px solid rgba(127,127,127,0.12);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.CalendarToolbarField .ByFieldsRightItem .ItemSelection:hover {
    background: rgba(127,127,127,0.09);
    border-color: rgba(127,127,127,0.2);
}
.CalendarToolbarField .ByFieldsRightItem .MicroButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: rgba(var(--textRGB, 48,48,48), 0.72);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.CalendarToolbarField .ByFieldsRightItem .MicroButton:hover {
    background: rgba(220,53,69,0.08);
    color: #dc3545;
}
.CalendarToolbarField .ByFieldsRightItem .MicroButton .ImageClass {
    font-size: 0.68rem;
}
.CalendarToolbarField .ETWClearByFields {
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(var(--textRGB, 48,48,48), 0.55);
    background: transparent;
    border: 1px solid rgba(127,127,127,0.15);
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.CalendarToolbarField .ETWClearByFields:hover {
    background: rgba(127,127,127,0.06);
    border-color: rgba(127,127,127,0.25);
}
.CalendarToolbarField .AddGroupField {
    font-size: 0.7rem;
    color: rgba(var(--textRGB, 48,48,48), 0.55);
    white-space: nowrap;
}
.CalendarToolbarField .AddGroupField a {
    /* Marka rengi METIN olarak beyaz uzerinde 2.29:1. Tonu KORUYUP parlakligi
       esige kadar kaydiran turetilmis token (m.js `$AAMetinRengi`): #1ec46d -> #15874b
       (4.57:1). Kiracinin markasi degismez; geri dusus bugunku deger. */
    color: var(--primaryMetinAA, var(--primaryColor, #1ec46d));
    font-weight: 500;
}
/* Compact "clear selection" — icon-only micro-button so it stops hogging toolbar width.
   The "Seçimi Temizle" text is hidden visually (font-size:0) but stays in the DOM for SR. */
.CalendarToolbarField .ETWClearByFields {
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    font-size: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    overflow: hidden;
}
.CalendarToolbarField .ETWClearByFields::before {
    content: "\00D7";
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
}
.CalendarToolbarField .ETWClearByFields:hover {
    background: rgba(220,53,69,0.08);
    border-color: rgba(220,53,69,0.3);
    color: #dc3545;
}
/* Empty-state hint removed in the dense calendar toolbar — it hogged a whole row
   and added no value next to the always-visible "+Tarih/Grup Ekle" add buttons. */
.CalendarToolbarField .ETWEmptyHint {
    display: none !important;
}

.DateDisplay {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(127,127,127,0.05);
    border-radius: 999px;
    padding: 4px 8px;
    border: 1px solid rgba(127,127,127,0.1);
    white-space: nowrap;
}
.DateDisplay .MicroButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: rgba(var(--textRGB, 48,48,48), 0.7);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.DateDisplay .MicroButton:hover {
    background: rgba(30,196,109,0.12);
    color: var(--primaryColor, #1ec46d);
}
.DateDisplay .MicroButton .ImageClass {
    font-size: 0.8rem;
}
.DateTitle {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(var(--textRGB, 48,48,48), 0.9);
    min-width: 5.5em;
    max-width: 12em;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.TodayButton {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primaryColor, #1ec46d);
    /* 2026-08-19 · axe: acik zeminde 2.03 — marka TONU korunur, koyulastirilir.
       color-mix yoksa ustteki fallback gecerli kalir (bozulma yok). */
    background: rgba(30,196,109,0.08);
    padding: 3px 8px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.TodayButton:hover {
    background: rgba(30,196,109,0.18);
}

.DateModes,
.HourModes {
    display: inline-flex;
    align-items: center;
    background: rgba(127,127,127,0.06);
    border: 1px solid rgba(127,127,127,0.12);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
    flex-shrink: 0;
}
.HourModes { margin-right: 6px; }
.DateModes a,
.HourModes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(var(--textRGB, 48,48,48), 0.72);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    min-width: 2.2em;
}
.DateModes a:hover,
.HourModes a:hover {
    color: rgba(var(--textRGB, 48,48,48), 0.9);
    background: rgba(127,127,127,0.06);
}
.DateModes .Selected,
.HourModes .Selected {
    background: #fff;
    color: rgba(var(--textRGB, 48,48,48), 0.95);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    font-weight: 600;
}

/* Stack into rows only on genuinely narrow / mobile widths. On normal
   desktop+tablet (incl. the ~837px content column left by the side rails) the
   toolbar stays a single compact full-width row. */
@media (max-width: 760px) {
    .CalendarToolbar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .CalendarToolbarLeft,
    .CalendarToolbarCenter,
    .CalendarToolbarRight {
        flex: 1 1 100%;
        justify-content: center;
    }
    .CalendarToolbarLeft { order: 2; }
    .CalendarToolbarCenter { order: 1; }
    .CalendarToolbarRight { order: 3; }
}

/* ---- Calendar Resource View (#21) ---- */
.CalendarResourceRow {
    background: rgba(0,0,0,0.02);
}
.CalendarResourceLabel {
    padding: 6px 12px !important;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.CalendarResourceColor {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.CalendarResourceName {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Calendar Body (premium grid) ---- */
.CalendarBody {
    flex: 1 1 auto;
    min-height: 200px;
    background-color: #fff;
    border: 1px solid rgba(127,127,127,0.15);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    overflow: auto;
    display: flex;
    flex-direction: column;
}
.CalendarBody > table {
    width: 100%;
    min-height: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}
.CalendarBody .DayNames {
    background: rgba(127,127,127,0.03);
    border-bottom: 1px solid rgba(127,127,127,0.12);
}
.CalendarBody .DayNames > td {
    padding: 8px 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(var(--textRGB, 48,48,48), 0.55);
    text-align: center;
    border-bottom: 1px solid rgba(127,127,127,0.08);
}
.CalendarBody .DayNames > td.WeekNumber {
    width: 2.4em;
    font-weight: 700;
    color: rgba(var(--textRGB, 48,48,48), 0.72);
    background: rgba(127,127,127,0.03);
    border-right: 1px solid rgba(127,127,127,0.08);
}
.CalendarBody .DayNames .DayOfWeekName {
    display: block !important;
    margin-bottom: 2px;
}
.CalendarBody .DayNames .DayOfMonth {
    display: block !important;
    position: static !important;
    height: auto !important;
    margin-left: 0;
    font-weight: 700;
    font-size: 0.9rem;
    color: rgba(var(--textRGB, 48,48,48), 0.75);
}

.CalendarBody .Days > td,
.CalendarBody .FullDay > td {
    position: relative;
    vertical-align: top;
    border-right: 1px solid rgba(127,127,127,0.08);
    border-bottom: 1px solid rgba(127,127,127,0.08);
    min-height: 80px;
}
.CalendarBody .Days > td.WeekNumber,
.CalendarBody .FullDay > td.WeekNumber {
    width: 2.4em;
    text-align: center;
    vertical-align: middle;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(var(--textRGB, 48,48,48), 0.72);
    background: rgba(127,127,127,0.03);
    border-right: 1px solid rgba(127,127,127,0.08);
    cursor: pointer;
}
.CalendarBody .Days > td.WeekNumber:hover {
    color: var(--primaryColor, #1ec46d);
    background: rgba(30,196,109,0.06);
}

.DayTitle {
    text-align: left;
    padding: 4px 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(var(--textRGB, 48,48,48), 0.72);
    background: rgba(127,127,127,0.03);
    border-bottom: 1px solid rgba(127,127,127,0.08);
}
.DayBody {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    left: 0;
    right: 0;
    top: 1.7em;
    bottom: 0;
}
.DayBody > .Item { border: solid 1px #c0c0c0; }

.OtherDay { background: rgba(127,127,127,0.02); }
.OtherDay .DayTitle { color: rgba(var(--textRGB, 48,48,48), 0.4); }
.Today {
    background: rgba(30,196,109,0.04);
}
.Today .DayTitle {
    color: var(--primaryColor, #1ec46d);
    font-weight: 700;
    background: rgba(30,196,109,0.08);
}

.CalendarItem {
    cursor: pointer;
    padding: 4px 6px;
    margin: 2px 4px;
    border-radius: 5px;
    background: rgba(30,196,109,0.08);
    border-left: 3px solid #1ec46d;
    font-size: 0.76rem;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
.CalendarItem:hover {
    background: rgba(30,196,109,0.15);
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    transform: translateY(-1px);
    z-index: 1;
}
.CalendarItemHour {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--primaryColor, #1ec46d);
    margin-right: 4px;
}
.CalendarItemTitle {
    display: inline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.CalendarSelectedItem {
    background: var(--primaryColor, #1ec46d);
    color: #fff;
}
.CalendarSelectedItem .CalendarItemHour {
    color: rgba(255,255,255,0.85);
}
.CalendarItemConflict {
    border-left-color: #f59e0b !important;
    background: rgba(245,158,11,0.08) !important;
}
.CalendarItemConflict:hover {
    background: rgba(245,158,11,0.14) !important;
}

.AllDays td { vertical-align: top; }
.AllDayBody {
    min-height: 2em;
    padding: 4px;
    border-bottom: 1px solid rgba(127,127,127,0.08);
}
.HourBlock {
    position: absolute;
    left: 0;
    right: 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    pointer-events: none;
}
.HourBlock span {
    font-size: 0.68rem;
    color: rgba(var(--textRGB, 48, 48, 48), 0.72);
    padding: 2px 6px;
}

/* Business-hours marker */
.CalendarBody.HourMode_Display .DayBody,
.CalendarBody.HourMode_Only .DayBody {
    scroll-behavior: smooth;
}
.CalendarBody .BusinessHoursBand {
    position: absolute;
    left: 0;
    right: 0;
    top: 35.42%; /* 08:30 */
    height: 41.67%; /* 08:30-18:30 */
    background: rgba(30,196,109,0.03);
    border-top: 1px solid rgba(30,196,109,0.08);
    border-bottom: 1px solid rgba(30,196,109,0.08);
    pointer-events: none;
    z-index: 0;
}

.CalendarLoading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.85);
    z-index: 10;
}
.CalendarSpinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(30,196,109,0.2);
    border-top-color: #1ec46d;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.CalendarFooter {
    padding: 6px 12px;
    font-size: 0.72rem;
    color: rgba(var(--textRGB, 48,48,48), 0.72);
    text-align: right;
    background: rgba(127,127,127,0.02);
    border-top: 1px solid rgba(127,127,127,0.08);
}

/* Compound selector (.ViewBody.ViewBody_Calendar) so this beats the generic
   `.ViewBody { flex-direction: row }` rule that wins on cascade order otherwise.
   Column direction lets the toolbar/main/footer stack and CalendarMain consume
   the remaining height instead of overflowing (footer was clipped before). */
/* Column-child sizing: the toolbar + helper strips (legend/footer) size to their
   OWN content and never shrink below it — so when the toolbar wraps to multiple
   rows at narrow widths it pushes the grid DOWN instead of overflowing on top of
   it (fixes a toolbar↔grid overlap at <760px). The grid takes the rest + scrolls. */
.ViewBody_Calendar > .CalendarToolbar,
.ViewBody_Calendar > .CalendarLegend,
.ViewBody_Calendar > .CalendarFooter {
    flex: 0 0 auto;
}
.ViewBody_Calendar > .CalendarMain {
    flex: 1 1 auto;
    min-height: 0;
}

.ViewBody.ViewBody_Calendar {
    display: flex;
    flex-direction: column;
    /* Generic .ViewBody sets justify-content:center + can wrap (fine for the old
       row layout, but in a column that vertically bunches/wraps toolbar/body/footer
       and hides the grid). Stack from the top, no wrap, children keep own height. */
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
    height: 100%;
    overflow: hidden;
}

/* Calendar Year View */
.YearRow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
    align-items: stretch;
}
.YearMonth {
    flex: 1 1 calc(25% - 12px);
    min-width: 180px;
    border: 1px solid rgba(127,127,127,0.1);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
}
.YearMonthHeader {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 0.85rem;
    background: rgba(30,196,109,0.06);
    border-bottom: 1px solid rgba(127,127,127,0.08);
    cursor: pointer;
    text-align: center;
}
.YearMonthHeader:hover { background: rgba(30,196,109,0.12); }
.YearMonthGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 6px;
    flex: 1;
}
.YearDayNames {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 4px 6px 0;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(var(--textRGB, 48, 48, 48), 0.5);
    text-align: center;
}
.YearDaysGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 2px 6px 6px;
}
.YearDay {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.72rem;
    position: relative;
}
.YearDay:hover { background: rgba(30,196,109,0.12); }
.YearDay.Today { background: rgba(30,196,109,0.15); font-weight: 700; color: var(--primaryColor, #1ec46d); }
.YearDay.HasEvents::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primaryColor, #1ec46d);
}
.YearDayEmpty { opacity: 0; pointer-events: none; }

/* ---- Calendar Agenda side panel ---- */
.CalendarAgenda {
    flex: 0 0 240px;
    min-width: 0;
    background: #fff;
    border-left: 1px solid rgba(127,127,127,0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: flex-basis 0.2s ease;
}
.CalendarAgenda.Collapsed {
    flex: 0 0 34px;
}
.CalendarAgenda.Collapsed .CalendarAgendaBody,
.CalendarAgenda.Collapsed .CalendarAgendaTitle {
    opacity: 0;
    pointer-events: none;
}
.CalendarAgendaHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(127,127,127,0.08);
    background: rgba(127,127,127,0.02);
}
.CalendarAgendaTitle {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(var(--textRGB, 48,48,48), 0.75);
}
.CalendarAgendaToggle {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: rgba(var(--textRGB, 48,48,48), 0.55);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
}
.CalendarAgendaToggle:hover {
    background: rgba(127,127,127,0.1);
}
.CalendarAgendaBody {
    flex: 1;
    overflow: auto;
    padding: 8px;
}
.CalendarAgendaItem {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 4px;
}
.CalendarAgendaItem:hover {
    background: rgba(127,127,127,0.06);
}
.CalendarAgendaDot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}
.CalendarAgendaMeta {
    min-width: 0;
    flex: 1;
}
.CalendarAgendaDateTime {
    font-size: 0.65rem;
    color: rgba(var(--textRGB, 48,48,48), 0.5);
    margin-bottom: 2px;
}
.CalendarAgendaItemTitle {
    font-size: 0.74rem;
    font-weight: 500;
    color: rgba(var(--textRGB, 48,48,48), 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.CalendarAgendaEmpty {
    padding: 12px;
    text-align: center;
    font-size: 0.72rem;
    color: rgba(var(--textRGB, 48,48,48), 0.72);
}

/* Body + agenda share a horizontal flex row; the agenda docks as a real
   column beside the grid (no absolute overlap). Body keeps full width when
   the agenda isn't rendered (no events in range). */
.CalendarMain {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    min-height: 0;
    min-width: 0;
}
.CalendarMain > .CalendarBody {
    flex: 1 1 auto;
    min-width: 0;
}
/* Agenda now sits as the body's adjacent sibling, so this :has() matches:
   square the shared edge so body + agenda read as one rounded card. */
.CalendarMain > .CalendarBody:has(+ .CalendarAgenda) {
    border-bottom-right-radius: 0;
}
.CalendarAgenda {
    border-bottom-right-radius: 8px;
}

/* Calendar view mode - day names header */
.CalendarViewDayNames {
    display: grid;
    grid-template-columns: 2em repeat(7, 1fr);
    padding: 4px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(0,0,0,0.5);
    text-align: center;
}
.CalendarViewDayBody { display: contents; }
a.CalendarViewItem {
    display: block;
    padding: 2px 4px;
    margin: 1px;
    border-radius: 3px;
    font-size: 0.78rem;
    background: rgba(30,196,109,0.08);
    border-left: 3px solid #1ec46d;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.CalendarViewItem:hover { background: rgba(30,196,109,0.18); }


@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Tanımsız bileşen uyarı çipi — yalnız admin'e render edilir (atom.js SubObjects fallback) */
.UnknownElementChip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin: 2px;
    border: 1px dashed #d97706;
    border-radius: 6px;
    background: #fffbeb;
    color: #92400e;
    font-size: 11px;
    line-height: 1.4;
    cursor: help;
}

/* ── Generic boş-kayıt placeholder'ları (ItemView kartları) ──
   Başlığı boş kayıt bembeyaz kart olarak görünmez kalıyordu; kullanıcı kaydı
   göremiyor/açamıyordu. Dar kapsamlı kural: yalnız ItemView içindeki gizli-etiketli
   boş başlık alanı. */
.ItemView .FieldText.LabelHidden.FieldIsEmpty .InputSpan a:empty::before {
    content: "(Untitled)";
    color: #94a3b8;
    font-style: italic;
    font-size: 12px;
}
:lang(tr) .ItemView .FieldText.LabelHidden.FieldIsEmpty .InputSpan a:empty::before {
    content: "(İsimsiz)";
}

/* Boş resim alanı: görünmez empty.gif yerine nötr zemin + silüet */
.ItemView .FieldImage.FieldIsEmpty img.EmptyImage {
    background-color: #eef2f7;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c3ccd9' d='M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z'/%3E%3C/svg%3E");
    background-position: center;
    background-size: 55%;
    background-repeat: no-repeat;
    border-radius: 12px;
}

/* ── Dar pencere (desktop, <768px): yardımcı rail'ler HER ZAMAN görünür ──
   Eski davranış rail'leri opacity:0.30'a kısıp yalnız hover/focus'ta gösteriyordu
   ("Display Helpers onhover, does not Display Normally" bug'ı). Kullanıcı kuralı:
   yardımcı elemanlar sticky/always-on, Normal görünümlerde tam görünür olmalı —
   hover-gizleme YOK. İçeriğe yer açmak için MainContent tam genişlik; fixed rail'ler
   üstte ve tam opak (saydam değil) kalır. Gerçek mobil (body.Mobile) ayrı yoldan. */
@media (max-width: 767px) {
    body.Desktop .MainContent {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    body.Desktop .PageZone_LeftNavs,
    body.Desktop .PageZone_RightNavs {
        opacity: 1;          /* her zaman görünür — hover-reveal kaldırıldı */
        z-index: 200;
    }
}

/* ── Tarih alanı: tıklanabilir takvim bölgesi ──
   field-date.js tasarımı "input'a tık = yaz, span'ın input-dışı bölgesine
   tık = takvim" der; ancak input span'ı %100 kapladığından takvim bölgesi
   fiziken yoktu — takvim grid'i hiçbir tıkla açılamıyordu. Input daraltılır,
   sağdaki 24px'lik şerit gerçek (tıklanabilir) takvim ikonu olur. */
span.DatePicker {
    display: inline-flex !important;
    align-items: center;
}
span.DatePicker > input.DatePicker {
    width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important;
    /* min-width:0 collapsed the input below the date text in narrow SingleItem
       field areas → "08.09.2025" rendered as "08.09.202". Floor it at a full
       localized date width; the 24px ::after strip stays clickable for the
       calendar grid. (DateTime adds separate hour/minute spans, unaffected.) */
    min-width: 8.5em !important;
}
span.DatePicker::after {
    content: var(--icon-Calendar, "\1F4C5") !important;
    font-family: "361";
    width: 24px;
    min-width: 24px;
    text-align: center;
    cursor: pointer;
    opacity: 0.6;
    line-height: 1;
}
span.DatePicker:hover::after {
    opacity: 1;
}

/* =====================================================================
   LEGACY META-TIER NEUTRALIZATION (blue→green) + PREMIUM POLISH
   The legacy calendar ElementStyles (meta.xml CssKey 283/377/378/379/380)
   carry #3b82f6/#667eea accents at .CalendarBody-scoped (0,2,0+) specificity
   that the premium 0,1,0 rules can't beat by source-order alone. These
   counters match/exceed that specificity so the premium GREEN identity wins
   consistently. FE-only; no meta.xml edit.
   ===================================================================== */

/* Event time chip — legacy `.CalendarItem .CalendarItemHour {color:#3b82f6}` */
.CalendarBody .CalendarItem .CalendarItemHour,
.ViewBody_Calendar .CalendarItemHour {
    color: var(--primaryColor, #1ec46d);
}
/* Event title legibility (legacy `.CalendarItem .CalendarItemTitle {color:#334155}`) */
.CalendarBody .CalendarItem .CalendarItemTitle {
    color: rgba(var(--textRGB, 48,48,48), 0.85);
}
/* Selected event keeps white text over the solid primary fill */
.CalendarBody .CalendarSelectedItem,
.ViewBody_Calendar .CalendarSelectedItem {
    background: var(--primaryColor, #1ec46d) !important;
    /* on plan ZEMINDEN turetilir (m.js --primaryOnPlan): beyaz 2.29 / koyu 7.47 */
    color: var(--primaryOnPlan, #16181d) !important;   /* geri dusus ZEMININ geri dususune gore: #1ec46d uzerinde koyu 7.76 (beyaz 2.29) */
}
.CalendarBody .CalendarSelectedItem .CalendarItemHour,
.CalendarBody .CalendarSelectedItem .CalendarItemTitle {
    color: rgba(255,255,255,0.92) !important;
}

/* Today cell + its date badge — legacy paints these blue (#3b82f6) at 0,2,0/0,3,0 */
.CalendarBody .Days td.Today,
.CalendarBody .FullDay > td.Today {
    background: rgba(30,196,109,0.05) !important;
    border-color: rgba(30,196,109,0.35) !important;
}
.CalendarBody .Days td.Today .DayTitle,
.CalendarBody .FullDay > td.Today .DayTitle {
    background: var(--primaryColor, #1ec46d) !important;
    /* Zemin KIRACININ marka rengi; sabit beyaz metin onun uzerinde 2.29:1 veriyordu.
       On plan ZEMINDEN turetilir (m.js `--primaryOnPlan`, `$BaslikPaleti`): #1ec46d
       icin beyaz 2.29 / koyu 7.47 -> koyu secilir. Geri dusus bugunku deger. */
    color: var(--primaryOnPlan, #16181d) !important;   /* geri dusus ZEMININ geri dususune gore: #1ec46d uzerinde koyu 7.76 (beyaz 2.29) */
    font-weight: 700;
}
/* Year-view today + event dot — legacy `.CalendarBody .YearDay.Today {background:#3b82f6}` */
.CalendarBody .YearDay.Today,
.ViewBody_Calendar .YearDay.Today {
    background: var(--primaryColor, #1ec46d) !important;
    /* on plan ZEMINDEN turetilir (m.js --primaryOnPlan): beyaz 2.29 / koyu 7.47 */
    color: var(--primaryOnPlan, #16181d) !important;   /* geri dusus ZEMININ geri dususune gore: #1ec46d uzerinde koyu 7.76 (beyaz 2.29) */
}
.CalendarBody .YearDay.HasEvents::after {
    background: var(--primaryColor, #1ec46d) !important;
}
.CalendarBody .YearMonthHeader:hover,
.ViewBody_Calendar .YearMonthHeader:hover {
    color: var(--primaryColor, #1ec46d);
}

/* Drop target while dragging an event — legacy `.DayBody.DragOver {blue dashed}` */
.CalendarBody .DayBody.DragOver,
.ViewBody_Calendar .DayBody.DragOver {
    background: rgba(30,196,109,0.10) !important;
    box-shadow: inset 0 0 0 2px var(--primaryColor, #1ec46d) !important;
    border: 0 !important;
}
.CalendarItem.Dragging { opacity: 0.5; }

/* =====================================================================
   D1 — "NOW" current-time indicator (day/week hour timeline)
   A thin primary line + dot positioned by the renderer via inline `top`.
   ===================================================================== */
.CalendarNowLine {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px solid var(--dangerColor, #ef4444);
    z-index: 6;
    pointer-events: none;
}
.CalendarNowLine::before {
    content: "";
    position: absolute;
    left: -1px;
    top: -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dangerColor, #ef4444);
}

/* =====================================================================
   D5 — Color legend (resource / state colors) — sticky helper strip
   ===================================================================== */
.CalendarLegend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 5px 12px;
    background: rgba(127,127,127,0.03);
    border-top: 1px solid rgba(127,127,127,0.08);
    font-size: 0.7rem;
    color: rgba(var(--textRGB, 48,48,48), 0.6);
}
.CalendarLegendItem {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.CalendarLegendSwatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.CalendarLegendCount {
    margin-left: 4px;
    font-weight: 600;
    color: rgba(var(--textRGB, 48,48,48), 0.5);
}

/* Per-cell event count badge (month/week) — at-a-glance density (D5) */
.CalendarDayCount {
    position: absolute;
    top: 3px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: rgba(30,196,109,0.12);
    color: var(--primaryColor, #1ec46d);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

/* =====================================================================
   D2 — drag-to-resize handle on timed events (day/week hour view)
   ===================================================================== */
.CalendarItem .CalendarResizeHandle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    cursor: ns-resize;
    opacity: 0;
    transition: opacity 0.12s;
}
.CalendarItem:hover .CalendarResizeHandle {
    opacity: 1;
    background: linear-gradient(transparent, rgba(0,0,0,0.12));
}
.CalendarItem.Resizing { box-shadow: 0 0 0 2px var(--primaryColor, #1ec46d); z-index: 5; }

/* =====================================================================
   C4 — toolbar overflow menu (export / ICS / print) micro-button + menu
   ===================================================================== */
.CalendarToolMenuWrap { position: relative; display: inline-flex; }
.CalendarToolMenuBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: rgba(var(--textRGB, 48,48,48), 0.72);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.CalendarToolMenuBtn:hover { background: rgba(127,127,127,0.1); color: rgba(var(--textRGB, 48,48,48), 0.95); }
.CalendarToolMenu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 190px;
    background: #fff;
    border: 1px solid rgba(127,127,127,0.18);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.14);
    padding: 5px;
    z-index: 40;
    display: none;
}
.CalendarToolMenu.Open { display: block; }
.CalendarToolMenuItem {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 0.78rem;
    color: rgba(var(--textRGB, 48,48,48), 0.85);
    cursor: pointer;
    transition: background 0.12s;
}
.CalendarToolMenuItem:hover { background: rgba(30,196,109,0.08); color: var(--primaryColor, #1ec46d); }
.CalendarToolMenuItem .ImageClass { font-size: 0.9rem; width: 1.1em; text-align: center; }

/* =====================================================================
   C5 — Responsive: tablet + phone refinements (the renderer also flags
   body.Mobile; these target narrow viewports regardless of device class).
   ===================================================================== */
@media (max-width: 1024px) {
    .CalendarAgenda { flex-basis: 200px; }
}
@media (max-width: 760px) {
    /* Agenda docks below the grid as a bottom sheet instead of a side rail */
    .CalendarMain { flex-direction: column; }
    .CalendarAgenda,
    .CalendarMain > .CalendarAgenda {
        flex: 0 0 auto;
        max-height: 38vh;
        border-left: 0;
        border-top: 1px solid rgba(127,127,127,0.12);
        border-radius: 0 0 8px 8px;
    }
    .CalendarToolbarField { max-width: none; flex: 1 1 100%; }
    .DateTitle { max-width: none; flex: 1 1 auto; }
    .CalendarLegend { font-size: 0.66rem; gap: 4px 10px; }
}
@media (max-width: 480px) {
    /* Collapse DateModes labels to first letter to save width */
    .DateModes a { min-width: 1.9em; padding: 4px 7px; }
}



/* ============================================================================
   TAKVİM KONTRAST (2026-08-19) — axe-core WCAG 2.2 AA ölçümü
   "Bugün" düğmesi marka renginde açık zeminde 2.03:1 ölçüldü. Marka tonu
   KORUNUR, yalnız koyulaştırılır; color-mix desteklenmiyorsa fallback durur.
   ============================================================================ */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .TodayButton {
        color: color-mix(in srgb, var(--primaryColor, #1ec46d) 60%, #000);
    }
}


/* ⛔⛔ KOMŞU AY GÜNLERİ OKUNMUYORDU — 1.17:1 (2026-08-20, ÖLÇÜLDÜ)
   İKİ KAT SÖNÜMLEME çarpılıyordu: `.DayTitle` rengi zaten açık (#cbd5e1) ve ata
   `.OtherDay` ayrıca `opacity: .5` uyguluyordu. Ata opaklığı `getComputedStyle`
   ile görünmez — ata zinciri çarpılarak ölçüldü (çarpım 0.5).

   ⚠️ ÖNEMLİ KISIT: `opacity: .5` ile AA'ya ULAŞMAK İMKÂNSIZDIR. Metin SİYAH bile
   olsa efektif renk ≈ rgb(124,125,126) olur ⇒ 3.96:1 (eşik 4.5). Yani rengi
   koyultmak TEK BAŞINA yetmez; opaklık kalkmalı ve sönümleme RENKLE yapılmalı.

   ÖLÇÜLEN ADAYLAR (komşu-ay günlerinin en düşük oranı, zemin #f8fafc):
     #6b7280 → 4.48  ✗ (kıl payı)     #5b6472 → 5.54  ✓     #4b5563 → 7.00 (fazla koyu)
   AA'yı geçen EN AÇIK ton seçildi: sönümleme korunur, okunabilirlik sağlanır.
   Sonuç: düşen 12 → 1 (kalan 1 = `.Today` rozeti, ayrı kök — aşağıdaki nota bak). */
/* ⚠️ ÖZGÜLLÜK: rakip kural `.CalendarBody .Days td.OtherDay .DayTitle` = (0,4,1).
   Bu blok İKİ KEZ ETKİSİZ YAZILDI: önce `.CalendarBody` öneki yanlışlıkla kaldırıldı,
   sonra `!important`siz (0,2,0) yazıldı — ikisinde de rakip kazandı ve ölçüm 12 → 12
   kaldı. Deneyde `!important` ile ölçülmüştü; DOSYAYA yazılan farklıydı.
   Çare `!important` değil AYNI ÖZGÜLLÜK: aynı (0,4,1) ve DAHA SONRA geldiği için kazanır. */
.CalendarBody .Days td.OtherDay {
    opacity: 1;
}
.CalendarBody .Days td.OtherDay .DayTitle {
    color: #5b6472;
}

/* ✅ `.Today` rozeti (2.29:1) KAPANDI — 2026-08-20.
   Onceki notta "aynı ozgullukte yazilan kural uygulanmadi (3 deneme); kok olculmedi"
   yaziyordu. KOK BULUNDU ve kusur URUNDE DEGIL OLCUMDEYDI: bu yuzeylerde
   `transition: background .15s` var ve `getComputedStyle` gecis SURERKEN ESKI degeri
   dondurur — satir ici `!important` yazip ANINDA okuyan probum "degisiklik yok" diyordu.
   400ms bekleyen prob ile deney iki yonlu dogrulandi (geri alma tabana dondu).
   Care rengi sabitlemek degil TURETMEK: zemin kiracinin marka rengi oldugu icin
   on plan ondan hesaplanir (`--primaryOnPlan`), marka rengi METIN olarak kullanildigi
   yerde ise ton korunup parlaklik kaydirilir (`--primaryMetinAA`). */