/* ===========================================================================
   GLOBAL SHELL FOUNDATION (v5 / RC3)
   ===========================================================================
   Base typography + body color/background come from default-fuib.css (linked
   first in App.razor). This block only owns the document HEIGHT so the
   FluentLayout shell ("Height=100vh") fills the viewport, and a couple of
   global niceties. Colors here ALWAYS go through Fluent design tokens
   (var(--colorNeutral*)), never hardcoded hex, so light AND dark themes both
   render with correct contrast automatically.
   --------------------------------------------------------------------------- */
html,
body {
    height: 100%;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   BRAND / ACCENT COLOR — single source of truth
   ---------------------------------------------------------------------------
   The brand/accent is generated as a full, coherent Fluent brand ramp
   (--colorBrandBackground, --colorBrandForegroundLink, --colorCompoundBrand*,
   etc.) by IThemeService from ONE hex. That hex lives in exactly one place:

       Components/Layout/ThemeController.razor  →  BrandColorHex = "#0F6CBD"

   To recolor the whole app later, change that single constant — do NOT scatter
   --colorBrand* overrides across components. (0F6CBD is Fluent's default
   professional blue; kept as the clean default per diary 0030.)

   This CSS block is intentionally the fallback-only escape hatch: if you ever
   need a pure-CSS brand override instead of the JS ramp, set it here once.
   Leaving it commented keeps IThemeService as the authoritative single source.
   :root {
       --colorBrandBackground: #0F6CBD;
   }
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   FluentDataGrid full-width convention (v5 / RC3)
   ---------------------------------------------------------------------------
   In v5 the grid renders in DisplayMode.Grid (display:grid) and the upstream
   stylesheet sets `.fluent-data-grid { width: auto; }`, so the table shrinks to
   its content width and leaves empty space on the right of the page.

   `.data-grid-fullwidth` overrides that so the grid spans the full content
   column. The grid <table> is also a flex item (flex: 1 1 0%) and a FluentUI
   LIBRARY rule of element+class specificity (e.g. `table.fluent-data-grid`,
   ~(0,1,1)) BEATS a plain single-class `.data-grid-fullwidth { width: 100% }`
   (0,1,0), so on narrow grids the table would still size to its content. We win
   the cascade cleanly by MATCHING that specificity: the selector below is
   `table.data-grid-fullwidth` (also (0,1,1)) and, because app.css loads AFTER
   the library bundle, it wins on the tie — no `min-width` hack needed. Apply it
   via `Class="data-grid-fullwidth"`.

   Auto-fit columns: pair this class with a `GridTemplateColumns` on the grid
   using `1fr` fractions for the data columns (and a fixed track such as `160px`
   for a narrow actions column). Do NOT also set column-level `Width=` — v5
   throws if both `GridTemplateColumns` and a column `Width` are supplied.
   Do NOT set `AutoFit="true"` — it makes JS compute pixel widths from content,
   which fights full-width and re-introduces the right-hand gap.

       <MercuryDataGrid Items="@data.AsQueryable()"
                        ResizableColumns="true"
                        Class="data-grid-fullwidth"
                        GridTemplateColumns="160px 1fr 1fr 1fr"
                        Pagination="@paginationState">
--------------------------------------------------------------------------- */
table.data-grid-fullwidth {
    /* A plain `.data-grid-fullwidth { width: 100% }` (specificity 0,1,0) is NOT
       enough. The v5 grid <table> is a flex item (flex: 1 1 0%) and a FluentUI
       LIBRARY rule of element+class specificity (e.g. `table.fluent-data-grid`,
       0,1,1) OVERRIDES our single-class rule, so the table sizes to its CONTENT.
       On WIDE grids content ≈ container so it looks full; on NARROW grids (e.g.
       /admin/kategoriler, /admin/kdv) the table is visibly short of the
       container. We beat the library rule by MATCHING its specificity: the
       `table.` prefix makes this `table.data-grid-fullwidth` (0,1,1 too), and
       because app.css loads AFTER the library bundle it wins on the tie. So a
       single clean `width: 100%` fills the container — NO `min-width` hack. Only
       then does the `datagrid-fullwidth.js` `1fr` resize-filler have slack to
       flex into, so the grid stays 100% wide on column resize. */
    width: 100%;
}

/* ---------------------------------------------------------------------------
   Global row/cell vertical spacing for our grids.
   ---------------------------------------------------------------------------
   In v5 the grid renders as display:grid with rows as `display: contents`, so
   the grid items are the cells (`td`/`th`), not the rows. Upstream gives data
   cells `padding: 0 18px` (zero vertical) which makes rows feel cramped — the
   inline action buttons (Düzenle/Sil) end up squished with no margin above or
   below. We add vertical breathing room here, scoped to `.data-grid-fullwidth`
   so other Fluent tables are untouched. min-height targets a ~44px row; the
   vertical padding gives buttons margin; align-content/items center keeps the
   content vertically centred. Horizontal padding (18px) is preserved.
   Do NOT set per-page row heights — this is the single source of truth.
   Need taller rows? Use the modifiers below (data-grid-images / data-grid-two-line). */
.data-grid-fullwidth td,
.data-grid-fullwidth th {
    min-height: 44px;
    padding-top: 6px;
    padding-bottom: 6px;
    align-content: center;
    align-items: center;
}

/* ---------------------------------------------------------------------------
   Taller rows for grids that show product image thumbnails (#0052).
   ---------------------------------------------------------------------------
   The standard ~44px row above is too short for a ~60px image thumbnail. This
   modifier raises the row min-height to ~72px (plus a little extra vertical
   padding) so thumbnails sit comfortably. Apply it ALONGSIDE
   `.data-grid-fullwidth` (e.g. Class="data-grid-fullwidth data-grid-images").

   Why app.css (global) and NOT a scoped *.razor.css rule: v5 renders rows as
   `display: contents`, so the grid items are the internally-generated cells
   (td/th). Blazor CSS isolation only stamps the scope attribute (b-xxxxx) on
   elements authored in .razor MARKUP — the grid's own row/cell DOM gets no
   scope attribute, so a scoped rule would never match it (DESIGN-GUIDELINES
   §9, trap 2). A global rule reaches those cells; a scoped one cannot. Per the
   DataGrid §5 rule "do NOT set per-page row heights", this is a dedicated,
   reusable modifier class rather than an inline per-row hack.

   `.data-grid-two-line` shares the same metrics for grids whose cells stack
   TWO lines of text (e.g. bold computer name over username, or a badge over
   its annotation — RelayDetailPage). Distinct name so intent stays readable
   at the call site; same rule so the heights never drift apart. */
.data-grid-images td,
.data-grid-images th,
.data-grid-two-line td,
.data-grid-two-line th {
    min-height: 72px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* NOTE(#0094): a `.data-grid-actions-right` content-alignment modifier briefly lived here — it
   right-aligned only the header text (the RowActions stack fills its cell, so cell-level
   justify-content had nothing to push). Replaced by the real fix: an `auto` action TRACK, enabled
   by datagrid-fullwidth.js placing its resize-filler on the last `1fr` track instead of blindly
   the last track. See that file's header comment. */

/* ---------------------------------------------------------------------------
   No resizer on the LAST column (#0094).
   ---------------------------------------------------------------------------
   v5 puts a `.resize-handle` drag strip at the right edge of EVERY header cell,
   including the last one — but the last column's width is never the user's to
   set: it is either the resize filler (minmax(80px,1fr)) or a content-sized
   `auto` action column, and dragging it just fights the datagrid-fullwidth.js
   write-back (visible as a broken/jumpy layout). Hide that one handle; interior
   dividers keep working. display:none also removes its pointer events, so the
   library's drag code never even starts. Global app.css because the handle DOM
   is library-generated (no Blazor scope attribute — §9 trap 2). */
.data-grid-fullwidth th:last-child .resize-handle {
    display: none;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ───────────────────────── Veri İçe Aktarma (Import) ─────────────────────────
   Ported from v4 ImportPage.razor.css. Global (not scoped) so the shell + both
   sections + the progress component all share it. v4 design-token CSS vars are
   replaced with v5 tokens + literal fallbacks (a wrong var fails silently). */
.import-container { display: flex; flex-direction: column; gap: 20px; }
.tab-content { margin-top: 16px; }
.import-section { display: flex; flex-direction: column; gap: 20px; }

.info-section {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; border-radius: 6px;
    background: rgba(15, 108, 189, 0.1); border-left: 3px solid #0F6CBD;
    font-size: 14px; line-height: 1.5;
}
.info-section a { color: #0F6CBD; text-decoration: underline; }

.format-section { display: flex; flex-direction: column; gap: 12px; }
.format-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.format-table th, .format-table td {
    padding: 8px 12px; text-align: left;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
}
.format-table th { background: var(--colorNeutralBackground2, #f5f5f5); font-weight: 600; }
.format-table tr:nth-child(even) td { background: var(--colorNeutralBackground1, #fff); }

.upload-section { display: flex; flex-direction: column; gap: 12px; }
.upload-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.upload-button-section { margin-top: 4px; }

.file-input-label {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 4px; cursor: pointer;
    background: var(--colorNeutralBackground2, #f5f5f5);
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    transition: all 0.15s ease; font-size: 14px; min-width: 200px;
    position: relative; overflow: hidden;
}
.file-input-label:hover {
    background: var(--colorNeutralBackground3, #ebebeb);
    border-color: var(--colorBrandBackground, #0F6CBD);
}
.file-input-label input[type="file"] {
    position: absolute; left: -9999px; opacity: 0; width: 0; height: 0;
}
.file-info { color: var(--colorNeutralForeground3, #707070); font-size: 12px; }

.progress-section { display: flex; flex-direction: column; gap: 16px; }
.status-badge { display: inline-block; padding: 6px 16px; border-radius: 16px; font-weight: 500; width: fit-content; }
.status-idle { background: var(--colorNeutralStroke1, #d1d1d1); color: var(--colorNeutralForeground1, #242424); }
.status-queued { background: #6366f1; color: #fff; }
.status-running { background: #0F6CBD; color: #fff; }
.status-completed { background: #22c55e; color: #fff; }
.status-failed { background: #ef4444; color: #fff; }
.status-cancelled { background: #f59e0b; color: #000; }

.progress-bar-container { display: flex; flex-direction: column; gap: 8px; }
.import-progress-track { width: 100%; height: 8px; border-radius: 4px; background: var(--colorNeutralBackground3, #ebebeb); overflow: hidden; }
.import-progress-fill { height: 100%; background: #0F6CBD; transition: width 0.3s ease; }

.statistics {
    display: flex; gap: 24px; flex-wrap: wrap; padding: 12px; border-radius: 8px;
    background: var(--colorNeutralBackground2, #f5f5f5);
}
.stat-item { display: flex; align-items: center; gap: 6px; font-size: 14px; }

.error-section {
    display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 8px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    background: var(--colorNeutralBackground1, #fff);
}
.error-header { display: flex; justify-content: space-between; align-items: center; }
.error-list {
    max-height: 300px; overflow-y: auto; font-size: 12px; font-family: monospace;
    background: var(--colorNeutralBackground2, #f5f5f5); border-radius: 4px;
}
.error-item { padding: 6px 10px; border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0); }
.error-item:last-child { border-bottom: none; }
.timestamp { color: var(--colorNeutralForeground3, #707070); font-size: 12px; }

.danger-section { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.danger-controls { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.danger-warning { color: var(--colorNeutralForeground3, #707070); font-size: 12px; font-style: italic; }

/* Paylaşılan modal overlay (Takviye + Çapraz Öneri bileşenleri). Global — birden çok bileşen kullanır. */
.supp-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.supp-modal { background: var(--colorNeutralBackground1, #fff); border-radius: 8px; width: min(520px, 92vw); max-height: 90vh; overflow: auto; padding: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.25); }

/* Ürün Ekle / Güncelle formu — responsive 2 kolon (masaüstü), mobilde tek kolon. Global çünkü iki sayfa
   paylaşır ve FluentUI custom element'lerini (::deep gerektirmeden) alan genişliğine zorlar. */
.product-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; max-width: 920px; align-items: start; }
.product-form .pf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.product-form .pf-field > label { font-size: 12px; font-weight: 600; color: var(--colorNeutralForeground2, #424242); }
.product-form .pf-full { grid-column: 1 / -1; }
.product-form .pf-actions { display: flex; gap: 10px; margin-top: 8px; }
/* İki sütunu kaplayan tam genişlik kaydet butonu (Set/ödeme formları). FluentButton'ın shadow
   max-width sınırını + iç genişliğini kaldırıp .pf-actions'ı (pf-full) tam doldurur. */
.product-form fluent-button.pf-btn-full { width: 100%; max-width: none !important; --inline-size: 100%; }
/* Kontroller alanın tamamını doldursun. NB: gerçek custom-element adları — FluentSelect=<fluent-dropdown>,
   FluentTextArea=<fluent-textarea> (tiresiz). Yanlış adla (fluent-select/fluent-text-area) eşleşmez. */
/* NB: FluentUI kontrollerinin shadow DOM :host kuralında max-width:400px var → alanı tam dolduramıyor
   ve native datetime (sınırsız) yanında dar/eşitsiz kalıyor. max-width sınırını kaldırıyoruz (!important
   ile shadow :host'u geçer). */
/* --inline-size: FluentUI kontrolün iç genişliğini var(--inline-size)=18rem'e sabitler; width:100%
   host'a verilse de iç kontrol 18rem'de kalır. 100%'e çekerek iç kontrol kolonu tam doldursun. */
.product-form fluent-text-input,
.product-form fluent-textarea { width: 100%; max-width: none !important; --inline-size: 100%; display: block; box-sizing: border-box; }
.product-form fluent-dropdown,
.product-form fluent-select { width: 100%; max-width: none !important; --inline-size: 100%; box-sizing: border-box; display: block; }
.product-form fluent-textarea::part(control),
.product-form fluent-select::part(control),
.product-form fluent-dropdown::part(control) { width: 100%; box-sizing: border-box; }
.product-form .pf-preview { max-height: 120px; margin-top: 8px; border-radius: 6px; border: 1px solid var(--colorNeutralStroke2, #e0e0e0); }
/* Native datetime input'a FluentUI'nin .my-3-o class'ı dikey margin (var(--spacingVerticalM)) ekleyip
   diğer kontrollerle hizayı bozuyor — form içinde bu margin'i sıfırla. Kütüphane kuralı bazen aynı
   özgüllükte olduğundan !important ile kesinleştiriyoruz. */
.product-form input[type="datetime-local"] { margin: 0 !important; }
.product-form .my-3-o { margin-top: 0 !important; margin-bottom: 0 !important; }
.product-form .pf-field > .my-3-o,
.product-form .pf-field input { margin: 0 !important; }

/* Label kullanan Fluent kontroller (FluentSelect/FluentDatePicker/FluentTextInput+Label …) kök olarak
   <fluent-field class="my-3-o"> render eder; FluentUI .my-3-o ile dikey margin (var(--spacingVerticalM))
   ekler. Bu, gap-tabanlı düzenlerde (FluentStack boşluğu flexbox row-gap/column-gap ile verir — .my-3-o
   ile DEĞİL) gereksiz ve alanları birbirinden/harici-label'lı alanlardan hizasız bırakıyor. v5 GENELİNDE
   bu dikey margin'i sıfırlıyoruz; FluentStack spacing'i flexbox gap ile sağladığından bozulmaz. */
.my-3-o { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Ödeme Bilgileri formu — Havale + Taksit textarea'ları eşit boy + tam genişlik (FluentUI shadow
   max-width:400px kaldırılır), seçenekler (switch) yan yana, Kaydet tam genişlik. */
.payment-form { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.payment-form fluent-textarea { width: 100%; max-width: none !important; --inline-size: 100%; display: block; box-sizing: border-box; }
.payment-form fluent-button { width: 100%; max-width: none !important; }
.payment-toggles { display: flex; gap: 32px; flex-wrap: wrap; align-items: center; }

/* VPN "Hedefi Düzenle" popup'ı — Tip/Değer/Etiket/Not kontrolleri eşit (hepsi modal genişliğinde);
   FluentUI shadow max-width:400px + --inline-size:18rem sınırlarını kaldır. Popup genişliği içeriğe
   göre (markup'ta width:min(400px,94vw)). */
.vpn-target-modal fluent-text-input,
.vpn-target-modal fluent-textarea,
.vpn-target-modal fluent-select,
.vpn-target-modal fluent-dropdown { width: 100%; max-width: none !important; --inline-size: 100%; display: block; box-sizing: border-box; }
.vpn-target-modal fluent-select::part(control),
.vpn-target-modal fluent-dropdown::part(control) { width: 100%; box-sizing: border-box; }
/* Özel Uyarılı İlaç ekle/güncelle — Barkod (text-input) ve Uyarı (textarea) eşit genişlik;
   FluentUI shadow max-width:400px + --inline-size:18rem sınırlarını kaldır. */
.special-drug-form fluent-text-input,
.special-drug-form fluent-textarea { width: 100%; max-width: none !important; --inline-size: 100%; display: block; box-sizing: border-box; }
.special-drug-form fluent-textarea::part(control) { width: 100%; box-sizing: border-box; }

/* Müşteri Tarifi güncelle — tüm text-input + textarea'lar eşit (konteyner) genişlikte;
   FluentUI shadow max-width:400px + --inline-size:18rem sınırlarını kaldır. */
.recipe-form fluent-text-input,
.recipe-form fluent-textarea { width: 100%; max-width: none !important; --inline-size: 100%; display: block; box-sizing: border-box; }
.recipe-form fluent-textarea::part(control) { width: 100%; box-sizing: border-box; }

/* Şifreli Reçete Gönder (/recete-gonder) — Reçete JSON + Public Key textarea'ları tam genişlik;
   FluentUI shadow max-width:400px + --inline-size:18rem sınırlarını kaldır. Kutucuk minicik kalıp
   seçim sırasında kayıyordu (#772); yükseklik markup'ta Height= ile (rc.4'te Rows yok). */
.prescription-send-form fluent-textarea { width: 100%; max-width: none !important; --inline-size: 100%; display: block; box-sizing: border-box; }
.prescription-send-form fluent-textarea::part(control) { width: 100%; box-sizing: border-box; }

/* #774: Reçete JSON renkli önizleme — kütüphanesiz (span'lar server-side System.Text.Json ile
   üretiliyor, Utils/JsonPretty). Kutu textarea gibi resize:both ile serbestçe boyutlandırılır.
   Renk paleti VS/VS Code light JSON şemasını izler. */
.json-preview {
    width: 100%;
    height: 320px;
    resize: both;
    overflow: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 10px;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.5;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    background: #fff;
    white-space: pre;
}
.json-preview .json-key { color: #0451a5; font-weight: 600; }
.json-preview .json-string { color: #a31515; }
.json-preview .json-number { color: #098658; }
.json-preview .json-literal { color: #0000ff; }

/* Pagination nav butonları çok geniş — FluentButton :host min-width:96px'i ok/ilk-son butonları için
   daralt (ikon-only olduklarından kareye yakın dursunlar). */
.fluent-paginator fluent-button { min-width: 32px !important; }
/* Elle yapılmış sayfa gezinme pager'ları (« ‹ › » butonları) — aynı şekilde daralt. */
.mini-pager fluent-button { min-width: 32px !important; }

/* Teknik Destek Listesi — üst özet kartları + durum pill'leri. Global çünkü pill'ler DataGrid
   hücresi içinde (grid-generated td'ler Blazor scope attribute'u taşımaz → scoped .razor.css ulaşmaz). */
.td-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; width: 100%; }
.td-stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px; border: 1px solid #e5e7eb; border-left-width: 4px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.td-stat-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.td-stat-icon svg, .td-stat-icon svg path { fill: currentColor !important; width: 22px; height: 22px; }
.td-stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: #1f2937; }
.td-stat-label { font-size: 0.8rem; color: #6b7280; font-weight: 500; margin-top: 2px; }
.td-stat-pending { border-left-color: #d97706; }
.td-stat-pending .td-stat-icon { background: #fff7ed; color: #b45309; }
.td-stat-done { border-left-color: #107c10; }
.td-stat-done .td-stat-icon { background: #f0fdf4; color: #107c10; }
.td-stat-added { border-left-color: #0f6cbd; }
.td-stat-added .td-stat-icon { background: #eff6ff; color: #1d4ed8; }
/* İşlemdeki satırın arka planı = işi alan kişinin profil rengi (RowStyle --td-row-bg custom property'si
   ile gelir; satır display:contents olduğundan hücrelere uygulanır). Diğer satırlarda değer yok → şeffaf. */
.td-colored-rows tbody td { background-color: var(--td-row-bg, transparent); }

.td-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.td-pill-waiting { background: #fff7ed; color: #b45309; }
.td-pill-working { background: #eff6ff; color: #1d4ed8; }

/* FluentUI'nin td.multiline-text kuralı overflow:auto verir → uzun yorumda hücre içinde KAYDIRMA
   çubuğu çıkar. Biz satırın içeriğe göre UZAMASINI istiyoruz: taşmayı görünür yapınca hücrenin
   yüksekliği içeriğe göre belirlenir ve grid satırı (auto track) onunla birlikte büyür.
   Yalnızca Teknik Destek grid'ine scope'lu (.td-colored-rows), diğer tablolar etkilenmez. */
.td-colored-rows td.multiline-text { overflow: visible; }
/* FluentDataGrid satır yüksekliğini RowSize'a göre SABİTLER (td'ye height:32px verir) — sabit yükseklik
   olduğu sürece hücre içeriğe göre uzayamaz. Grid'e MultiLine="true" verdik; bu override ise sabit
   yüksekliğin (inline stil de olabilir, o yüzden !important) kalıntısını temizler: yükseklik içeriğe
   göre belirlensin, .data-grid-fullwidth'in min-height:44px tabanı yine geçerli kalsın. */
.td-colored-rows td {
    height: auto !important;
    /* Kütüphane grid'e align-items:center veriyor → hücreler ESNEMEZ, kendi doğal yüksekliğinde
       ortalanır. Yükseklikler sabitken (32px) fark etmiyordu; artık serbest olduğu için her hücre
       ayrı yükseklik alıp alt çizgileri kaymış görünüyordu. stretch ile satırdaki TÜM hücreler en
       yüksek olana eşitlenir (grid satır track'i zaten en yükseğe göre boyutlanır). */
    align-self: stretch;
    /* Satır metni Son Yorum ile aynı puntoda (telefonlar, tarih, ekleyen vb. dahil). */
    font-size: 12px;
    /* İçeriğin DİKEY ORTALANMASI. Kütüphane bunu `align-content` ile yapıyor
       (td:not(.col-select){align-content:center}, td.multiline-text{align-content:start}) —
       yani BLOK yerleşiminde hizalama; hücre içeriğe göre uzayınca bu bizde çalışmadı,
       içerik hücrenin üstüne yapışık kaldı. Hücreyi dikey flex kabına çevirip ortalıyoruz:
       • column   → çocuklar blok akışındaki gibi alt alta kalır (davranış değişmez)
       • justify-content:center → dikey eksende ortalar (align-content'e bağlı değil)
       • align-items:stretch    → yatayda tam genişlik, metin normal sarmalanır */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

/* ── İKİ SATIRLI DÜZEN (.td-two-row): Son Yorum kaydın altında tam genişlik ────────────────────
   FluentDataGrid'de detay-satırı yok; grid `display:grid`, satırlar `display:contents` olduğundan
   Son Yorum hücresine grid-column:1/-1 verince auto-placement onu bir alt grid satırına (tüm izleri
   kaplayacak şekilde) taşır. Üst satırın 8 hücresi izleri doldurur, 9. hücre (Son Yorum) sığmayıp
   alta iner. Başlığını (th) gizliyoruz ki üst iz sayısı (8) bozulmasın. */
/* !important ŞART: FluentDataGridCell her hücreye INLINE `grid-column: N` basıyor (GridColumn
   param'ı). Inline stil normalde class kuralını ezer; stylesheet'teki !important ise inline'ı
   geçen TEK durumdur. Bu olmadan Son Yorum kendi sütun indeksinde (sağda) kalıyordu — alt satıra
   inmiyordu. 1/-1 + otomatik satır yerleşimi → hücre bir sonraki tam-genişlik grid satırına iner. */
.td-two-row td.td-comment-fullrow { grid-column: 1 / -1 !important; }
.td-two-row th.td-comment-fullrow { display: none; }

/* Kaydı TEK BLOK gibi göstermek için: üst satır hücrelerinin alt çizgisini kaldır, ayırıcı çizgiyi
   yalnızca tam-genişlik Son Yorum hücresine bırak (kayıtlar arası gerçek ayraç odur). Başlık <th>
   çizgisi etkilenmez (td değil).
   !important ŞART: kütüphanenin `.fluent-data-grid td { border-bottom }` kuralı EŞİT özgüllükte
   olduğundan yükleme sırasına göre kazanabiliyor ve üst satır ile kendi Son Yorum'u ARASINA çizgi
   koyuyordu (yorum ayrı bir kayıtmış gibi görünüyordu). !important ile üst hücrelerin çizgisi kesin
   kalkar; ayraç yalnızca Son Yorum hücresinde kalır → üst satır + yorum tek blok okunur. */
.td-two-row td { border-bottom: none !important; }
.td-two-row td.td-comment-fullrow { border-bottom: var(--strokeWidthThin, 1px) solid var(--colorNeutralStroke2) !important; }

/* Son Yorum alt satırı 2 sütunlu grid: sol=etiket (auto), sağ=içerik (1fr). Yorum metni ve yorum
   input'u AYNI sağ sütunda (2. iz) olduğundan başlangıçları aynı hizada. Etiket 1. satır 1. izde. */
.td-comment-row { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 8px; width: 100%; padding: 4px 0; align-items: start; }
/* "Son Yorum:" etiketi — sol sütun, ilk satır, kalın. */
.td-comment-label { grid-column: 1; grid-row: 1; font-weight: 600; color: var(--colorNeutralForeground3); }
/* Yorum input'u + Ekle YAN YANA — sağ sütun, ikinci satır (yorumla aynı x'te başlar). */
.td-comment-input { grid-column: 2; grid-row: 2; display: flex; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Yorum metni — sağ sütun ilk satır; çok satırlı, tamamı görünür (kırpma yok), seçilebilir. */
.td-comment-cell { grid-column: 2; grid-row: 1; white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.5; user-select: text; -webkit-user-select: text; }
/* Telefon numarasının yanındaki kopyala butonu (ve aynı stili paylaşan WhatsApp/Ara linkleri). */
.td-comment-copy { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin: 0 2px; padding: 1px 3px; border: none; background: transparent; color: #0f6cbd; cursor: pointer; border-radius: 3px; line-height: 1; user-select: none; text-decoration: none; }
.td-comment-copy:hover { background: #e5f1fb; }
/* WhatsApp linki — yeşil. wa.me → WhatsApp Web/uygulama. */
.td-comment-wa { color: #25d366; }
.td-comment-wa:hover { background: #e6f9ec; }
/* Ara linki — mavi. tel: → stopphone / varsayılan telefon uygulaması. */
.td-comment-call { color: #0f6cbd; }
.td-comment-call:hover { background: #e5f1fb; }
/* Yorumdaki saat ibaresi. td-blink (JS ekler): hedefe 5 dk kala / geçmişse kırmızı yanıp söner. */
.td-comment-time { font-weight: 600; }
.td-comment-time.td-blink { color: #cf222e; animation: td-time-blink 1s steps(1, end) infinite; }
@keyframes td-time-blink { 50% { opacity: 0.15; } }

/* Müşteri Geçmişi grid'i (CustomerDetailPage) — Açıklama sütunu multiline: uzun metin satıra sığmazsa
   ALT SATIRA sarar ve TAMAMI görünür (kaydırma çubuğu yok). FluentUI'nin td.multiline-text kuralı
   overflow:auto verir (kaydırma) — visible'a çeviriyoruz; ayrıca RowSize kaynaklı sabit yüksekliği
   (td'ye height:32px) kaldırıyoruz ki satır içeriğe göre büyüsün. Yalnızca .history-comments'a scope'lu. */
.history-comments td { height: auto !important; }
.history-comments td.multiline-text { overflow: visible; white-space: pre-wrap; word-break: break-word; align-content: start; }

@media (max-width: 720px) { .product-form { grid-template-columns: 1fr; } }