/* =============================================================
   PERIPLUS — Fluent kabuğu (ortak)
   Başlık çubuğu, ribbon (Fluent sekmeleri + tek satır komut kartı) ve
   durum çubuğu için ortak kurallar. Tüm sayfalar kullanır.

   Yalnız html.ui-fluent (assets/js/ui-secim.js) ve fareli geniş ekranda
   geçerlidir; mobil/tablet katmanına ve klasik arayüze etki etmez.
   Renkler Fluent 2 tokenlarından gelir (Fluent.setTheme ile yüklenir);
   token henüz yüklenmemişse yanındaki webLightTheme değeri kullanılır.
   Gradyan ve süs gölgesi yok (logo hariç).
   ============================================================= */

@media (hover: hover) and (pointer: fine) {

  html.ui-fluent {
    --fx-font: var(--fontFamilyBase, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif);
    --fx-zemin: var(--colorNeutralBackground3, #f5f5f5);
    --fx-yuzey: var(--colorNeutralBackground1, #ffffff);
    --fx-yuzey-hover: var(--colorNeutralBackground1Hover, #f5f5f5);
    --fx-yuzey-2: var(--colorNeutralBackground2, #fafafa);
    --fx-cizgi: var(--colorNeutralStroke2, #e0e0e0);
    --fx-cizgi-1: var(--colorNeutralStroke1, #d1d1d1);
    --fx-cizgi-alt: var(--colorNeutralStrokeAccessible, #616161);
    --fx-metin: var(--colorNeutralForeground1, #242424);
    --fx-metin-2: var(--colorNeutralForeground2, #424242);
    --fx-metin-3: var(--colorNeutralForeground3, #616161);
    --fx-metin-4: var(--colorNeutralForeground4, #707070);
    --fx-marka: var(--colorBrandBackground, #0f6cbd);
    --fx-marka-hover: var(--colorBrandBackgroundHover, #115ea3);
    --fx-marka-metin: var(--colorBrandForeground1, #0f6cbd);
    --fx-marka-zemin: var(--colorBrandBackground2, #ebf3fc);
    --fx-kose: var(--borderRadiusMedium, 4px);
    --fx-kose-b: var(--borderRadiusLarge, 6px);
    --fx-golge-menu: var(--shadow16, 0 0 2px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.14));
    --fx-baslik-h: 48px;
    --fx-durum-h: 28px;
    --fx-serit-h: 44px;
  }

  html.ui-fluent body { font-family: var(--fx-font) !important; color: var(--fx-metin); }

  /* Fluent bileşenleri tanımlanana kadar ham metin görünmesin */
  html.ui-fluent fluent-tablist:not(:defined),
  html.ui-fluent fluent-button:not(:defined),
  html.ui-fluent fluent-toggle-button:not(:defined) { visibility: hidden; }

  /* Bazı sayfalardaki "* { padding: 0 }" sıfırlaması Fluent bileşenlerinin iç boşluğunu ezer;
     Fluent'in kendi değerleri (ana ekrandan ölçüldü) geri verilir. */
  html.ui-fluent fluent-tab { padding: 6px; }
  html.ui-fluent fluent-button,
  html.ui-fluent fluent-toggle-button,
  html.ui-fluent fluent-menu-button { padding: 0 8px; }
  html.ui-fluent fluent-button > [slot="start"],
  html.ui-fluent fluent-toggle-button > [slot="start"],
  html.ui-fluent fluent-menu-button > [slot="start"] { margin-inline-end: 4px; }

  /* ---- İkon (ikonlar.css .fi) ---- */
  html.ui-fluent .fi { width: 16px; height: 16px; }
  html.ui-fluent .fi.fi-20 { width: 20px; height: 20px; }

  /* ---- Ribbon ---- */
  html.ui-fluent .fx-serit {
    box-sizing: border-box;
    min-height: var(--fx-serit-h);
    background: var(--fx-zemin);
    padding: 0 8px 6px;
    font-family: var(--fx-font);
  }
  html.ui-fluent .fx-serit-ust { display: flex; align-items: center; height: 32px; gap: 4px; }
  /* Ana ekranda sekmeler başlık çubuğuna taşınır; ribbon yalnız komut kartıdır */
  html.ui-fluent header .fx-serit-ust { flex: 0 0 auto; height: 100%; padding-left: 8px; }
  html.ui-fluent .fx-serit-ust fluent-tab { user-select: none; -webkit-user-select: none; }
  html.ui-fluent .fx-serit-ust fluent-tablist { flex: 1; min-width: 0; }
  html.ui-fluent .fx-serit-ust fluent-tab.fx-baglamsal { color: var(--fx-marka-metin); }
  /* Seçili sekme çizgisi: Fluent bazı durumlarda pasif rengine düşürüyor; marka rengine sabitlenir */
  html.ui-fluent .fx-serit-ust fluent-tab[aria-selected="true"]::before { background: var(--fx-marka) !important; }
  html.ui-fluent .fx-serit-kart {
    display: flex; align-items: center;
    height: 38px; box-sizing: border-box;
    padding: 0 4px;
    background: var(--fx-yuzey);
    border: 1px solid var(--fx-cizgi);
    border-radius: var(--fx-kose-b);
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin;
  }
  html.ui-fluent .fx-serit-grup { display: flex; align-items: center; gap: 1px; padding: 0 4px; flex: none; position: relative; }
  html.ui-fluent .fx-serit-grup + .fx-serit-grup { padding-left: 8px; margin-left: 4px; }
  html.ui-fluent .fx-serit-grup + .fx-serit-grup::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
    border-left: 1px solid var(--fx-cizgi);
  }
  html.ui-fluent .fx-serit-kart fluent-button,
  html.ui-fluent .fx-serit-kart fluent-toggle-button { font-weight: 400; white-space: nowrap; }
  html.ui-fluent .fx-serit-sag { margin-left: auto; display: flex; align-items: center; padding-left: 8px; flex: none; }
  /* Şeridin sağ ucu: seçili parsel bağlamı */
  html.ui-fluent .fx-baglam { font-weight: 600; max-width: 360px; }
  html.ui-fluent .fx-baglam[hidden] { display: none; }
  html.ui-fluent .fx-baglam-yer { margin-left: 6px; font-weight: 400; color: var(--fx-metin-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.ui-fluent .fx-serit.gizli { min-height: 0; padding-bottom: 2px; }
  html.ui-fluent .fx-serit.gizli .fx-serit-kart { display: none; }

  /* ---- Fluent görünümlü yerel girdiler (ID bağları korunur) ---- */
  html.ui-fluent .fx-girdi,
  html.ui-fluent .fx-alan select,
  html.ui-fluent .fx-alan input[type="search"],
  html.ui-fluent .fx-alan input[type="text"] {
    box-sizing: border-box;
    height: 30px !important;
    padding: 0 8px !important;
    border: 1px solid var(--fx-cizgi-1) !important;
    border-bottom-color: var(--fx-cizgi-alt) !important;
    border-radius: var(--fx-kose) !important;
    background: var(--fx-yuzey) !important;
    color: var(--fx-metin) !important;
    font: 400 13px/18px var(--fx-font) !important;
    box-shadow: none !important;
  }
  html.ui-fluent .fx-girdi:focus,
  html.ui-fluent .fx-alan select:focus,
  html.ui-fluent .fx-alan input:focus {
    outline: none !important;
    border-bottom: 2px solid var(--fx-marka) !important;
  }
  html.ui-fluent .fx-alan select:disabled,
  html.ui-fluent .fx-alan input:disabled {
    background: var(--fx-zemin) !important;
    border-color: var(--fx-cizgi) !important;
    color: var(--fx-metin-4) !important;
  }

}

/* Ribbon ve tutamaçlar yalnız Fluent masaüstünde vardır; ekran daralırsa gizlenir. */
@media not all and (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .fx-serit, .fx-durum-ek { display: none !important; }
}