/* ============================================================================
   Satın Alma (Procurement) modülü — tek stil kaynağı
   ----------------------------------------------------------------------------
   Bu dosya, daha önce 28 ayrı .razor dosyasının içinde dağınık duran <style>
   bloklarının birleştirilmiş halidir. Sayfa içine yeni <style> bloğu EKLEMEYİN;
   yeni kural gerekiyorsa buraya, ilgili bölümün altına ekleyin.

   Tasarım kuralı — YOĞUNLUK:
   Modül "tiny" ekran anlayışıyla çalışır. Başlık / KPI / araç çubuğu gibi
   listenin ÜSTÜNDE duran her şey mümkün olan en ince haliyle tutulur; amaç
   %100 zoom'da listenin ilk satırının ekranın üst üçte birinde başlamasıdır.
   Aşağıdaki --proc-h-* ve --proc-fs-* değerleri bu bütçeyi tanımlar,
   tek tek sayfalarda ezilmez.

   Bölümler:
     01 Tokenlar            08 Tablolar (native + Radzen)
     02 Taban               09 Rozetler
     03 Uygulama kabuğu     10 Yan panel / sekme / zaman çizelgesi
     04 Navigasyon          11 Diyaloglar
     05 Sayfa iskeleti      12 Durumlar (boş / hata / yükleniyor)
     06 Butonlar & form     13 Yardımcı sınıflar
     07 Panel & araç çubuğu 14 Erişilebilirlik
                            15 Duyarlı (responsive) kurallar
   ========================================================================== */

/* == 01 Tokenlar ========================================================== */

:root {
    /* Mürekkep ve yüzeyler */
    --proc-ink: #111827;
    --proc-ink-soft: #34414b;
    --proc-muted: #6b7280;
    --proc-line: #d5dbe3;
    --proc-line-soft: #e8edf1;
    --proc-canvas: #f5f7fb;
    --proc-surface: #ffffff;
    --proc-surface-soft: #f4f7fa;
    --proc-surface-alt: #fbfcfd;

    /* Tek birincil renk.
       Eskiden modülde üç ayrı "primary" vardı: #2563eb (modern ekranlar),
       #0b6e99 (workspace ekranları) ve #177b78 (ödeme / yönetim panelleri).
       Kabuk ve navigasyon zaten mavi olduğu için mavi kanonik kabul edildi. */
    --proc-accent: #2563eb;
    --proc-accent-strong: #1d4ed8;
    --proc-accent-soft: #dbeafe;
    --proc-accent-wash: #eff6ff;

    /* Anlamsal tonlar — rozet, uyarı ve metin renkleri buradan türer */
    --proc-good: #15803d;
    --proc-good-soft: #dcfce7;
    --proc-warning: #92400e;
    --proc-warning-soft: #fef3c7;
    --proc-danger: #b91c1c;
    --proc-danger-soft: #fee2e2;
    --proc-info: #1d4ed8;
    --proc-info-soft: #dbeafe;
    --proc-neutral: #475569;
    --proc-neutral-soft: #eef2f7;

    /* Grafik serisi renkleri — kimlik taşır, durum/uyarı anlamı YOKTUR.
       Slot sırası rastgele değil: bu sıralama beyaz yüzeyde (#fff) komşu çift
       CVD ayrımı ΔE 9.1 (protan) ve normal görüş ΔE 19.6 ile doğrulandı.
       Slot üretmeyin / döngüye sokmayın; 5'ten sonrası "other"a katlanır.
       Aqua, sarı ve magenta 3:1 kontrastın altındadır: bu renkler yalnızca
       görünür etiket + tablo eşleniği ile birlikte kullanılır. */
    --proc-series-1: #2563eb;
    --proc-series-2: #eb6834;
    --proc-series-3: #1baf7a;
    --proc-series-4: #eda100;
    --proc-series-5: #e87ba4;
    --proc-series-other: #94a3b8;

    /* --proc-nav-ink hâlâ üst bardaki açık zeminli kontroller içindir (.proc-shell-toggle);
       kenar menü lacivert temaya geçtiği için kendi --proc-nav-dark-* paletini kullanır. */
    --proc-nav-ink: #334155;
    --proc-nav-active: var(--proc-accent);
    --proc-nav-active-bg: var(--proc-accent-wash);
    --proc-focus: #1d4ed8;

    /* Kenar menü (lacivert zemin) paleti — NavMenu ile ortak değerler */
    --proc-nav-dark-ink: #dce9f9;
    --proc-nav-dark-ink-soft: #cfe1f6;
    --proc-nav-dark-line: rgba(140, 180, 230, 0.10);
    --proc-nav-dark-indicator: #5aa9ff;
    --proc-nav-dark-chevron: #6f9fd0;
    --proc-nav-dark-bullet: #5a93d4;
    --proc-nav-dark-caption: #5f9fd8;

    /* Ölçüler — yoğunluk bütçesi.
       Bu dört değeri büyütmek TÜM listeleri aşağı iter; dikkatli değiştirin. */
    --proc-topbar-h: 48px;   /* üst bar (eskiden 70px) */
    --proc-sidebar-w: 300px; /* kenar menü — ana modül (Dağıtım / Radzen) ile aynı */
    --proc-h-bar: 36px;      /* araç çubuğu / filtre şeridi yüksekliği */
    --proc-h-control: 26px;  /* input, select, buton */
    --proc-h-control-sm: 22px;
    --proc-h-row: 24px;      /* tablo satırı */
    --proc-h-metric: 40px;   /* KPI hücresi */

    --proc-gap: 10px;
    --proc-gap-sm: 6px;
    --proc-pad-page: 12px;
    --proc-pad-cell: 0 6px;
    --proc-pad-panel: 8px 10px;

    /* Tipografi */
    --proc-font: Inter, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --proc-fs-h1: 18px;
    --proc-fs-h2: 13px;
    --proc-fs-h3: 12px;
    --proc-fs-kpi: 17px;
    --proc-fs-base: 12px;
    --proc-fs-sm: 11px;
    --proc-fs-xs: 10px;

    --proc-radius: 3px;
    --proc-radius-lg: 4px;
    --proc-radius-pill: 999px;
    --proc-shadow-pop: 0 10px 28px rgba(15, 23, 42, 0.16);
}

/* == 02 Taban ============================================================= */

.proc-shell,
.proc-shell * {
    box-sizing: border-box;
    font-family: var(--proc-font);
}

/* İkon fontları bu kuralın dışındadır: yukarıdaki `.proc-shell *` ikon
   ailesini de ezerdi ve ligatür çözülmeyip "dashboard" gibi ham metin
   görünürdü. Bu dosya Google'ın sayfasından SONRA yüklendiği için istisna
   burada yeniden yazılmak zorunda. */
.proc-shell .material-icons {
    font-family: "Material Icons";
}

.proc-shell .material-symbols-outlined {
    font-family: "Material Symbols Outlined";
}

.proc-shell [class^="bi-"],
.proc-shell [class*=" bi-"] {
    font-family: bootstrap-icons !important;
}

/* Genel gövde dolgusu (Radzen .rz-body, 16px) Satın Alma kabuğunda NÖTRLENİR.
   Kabuk tam ekran bir uygulama kabuğudur; 100vh yüksekliğe üstten ve alttan 16px
   dolgu eklenince toplam 32px taşıyor ve sayfa gereksiz yere kayıyordu.
   Kapsam yalnızca bu kabuk — diğer modüller etkilenmez. */
body:has(.proc-shell) {
    padding: 0;
}

.proc-shell {
    display: flex;
    flex-direction: column;
    /* min-height DEĞİL height: kabuk tam olarak görünen alan kadardır.
       min-height bir taban olduğu için içerik uzadıkça kabuk da uzuyor, kenar
       çubuğu ekranın dışına taşıyor ve alttaki "Çıkış Yap" görünmez oluyordu.
       Kaydırma .proc-shell-main içinde yapılır (orada zaten overflow:auto var). */
    height: 100vh;
    color: var(--proc-ink);
    background: var(--proc-canvas);
}

/* Tutar / miktar hücreleri her yerde hizalı rakamla dizilir. */
.proc-shell .money,
.proc-shell .num,
.proc-shell .proc-num,
.proc-shell .portal-number,
.proc-shell [data-numeric] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* == 03 Uygulama kabuğu =================================================== */

.proc-shell-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--proc-topbar-h);
    padding: 0 12px;
    border-bottom: 1px solid var(--proc-line);
    background: var(--proc-surface);
}

.proc-shell-topbar-left,
.proc-shell-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Marka uzunsa kısalan taraf soldur; sağdaki kontroller kırpılmaz */
.proc-shell-topbar-left {
    min-width: 0;
}

.proc-shell-topbar-right {
    flex: 0 0 auto;
}

.proc-shell-toggle {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--proc-radius);
    background: transparent;
    color: var(--proc-nav-ink);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.proc-shell-toggle:hover {
    background: var(--proc-surface-soft);
}

.proc-shell-search {
    display: flex;
    align-items: center;
    width: min(360px, calc(100vw - 220px));
    min-height: var(--proc-h-control);
    padding: 0 10px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
}

.proc-shell-search input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--proc-ink);
    font-size: var(--proc-fs-base);
}

/* .proc-shell-notify / .proc-shell-notify-dot KALDIRILDI — üst banttaki sabit "4"
   rozetiyle birlikte. Kullanılmayan kural bırakmak, bir gün başka bir yerde
   yanlışlıkla tutunmasına ve ölü bir tasarımın geri gelmesine yol açıyor. */

.proc-shell-user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.proc-shell-avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--proc-radius-pill);
    background: var(--proc-accent-soft);
    color: var(--proc-accent-strong);
    font-size: var(--proc-fs-sm);
    font-weight: 700;
}

.proc-shell-user-name {
    font-size: var(--proc-fs-base);
    font-weight: 700;
    line-height: 1.2;
}

.proc-shell-user-role {
    color: var(--proc-muted);
    font-size: var(--proc-fs-xs);
    line-height: 1.2;
}

.proc-shell-settings-wrap {
    position: relative;
}

.proc-shell-settings-button {
    min-height: var(--proc-h-control);
    padding: 0 10px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
    color: var(--proc-ink);
    font-size: var(--proc-fs-base);
    font-weight: 600;
    cursor: pointer;
}

.proc-shell-settings-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    display: grid;
    gap: 10px;
    width: min(430px, calc(100vw - 24px));
    padding: 12px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius-lg);
    background: var(--proc-surface);
    box-shadow: var(--proc-shadow-pop);
}

.proc-shell-settings-section {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface-soft);
}

.proc-shell-settings-field {
    display: grid;
    gap: 6px;
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
    font-weight: 600;
}

.proc-shell-settings-field select {
    min-height: var(--proc-h-control);
    padding: 0 9px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
    color: var(--proc-ink);
    font: inherit;
}

.proc-shell-settings-title {
    font-size: var(--proc-fs-h2);
    font-weight: 700;
}

.proc-shell-settings-subtitle,
.proc-shell-settings-screen {
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
    line-height: 1.45;
}

.proc-shell-settings-screen {
    padding: 7px 9px;
    border-radius: var(--proc-radius);
    background: var(--proc-surface-soft);
}

.proc-shell-zoom-value {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.proc-shell-zoom-controls {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    gap: 8px;
    align-items: center;
}

.proc-shell-zoom-controls input[type="range"] {
    width: 100%;
    accent-color: var(--proc-accent);
}

.proc-shell-zoom-step,
.proc-shell-settings-action {
    min-height: var(--proc-h-control);
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
    color: var(--proc-ink);
    font-size: var(--proc-fs-base);
    font-weight: 700;
    cursor: pointer;
}

.proc-shell-settings-action {
    padding: 0 12px;
}

.proc-shell-settings-action.ghost {
    background: transparent;
}

.proc-shell-settings-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.proc-shell-settings-action:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Sütun ölçüsü `auto`: genişliği menünün kendisi belirler. Ana modülün Radzen
   kabuğu da böyle çalışır (.rz-layout .rz-sidebar { position: static }) — grid
   şablonunu değil, öğenin width'ini animasyonlamak hem daha ucuz hem de
   gizlenme hissi Dağıtım'la birebir aynı oluyor. */
.proc-shell-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* Kalan yüksekliği kapla. Önce `calc(100vh - var(--proc-topbar-h))` yazıyordu;
       değişken 48px diyor ama üst bant marka bloğu yüzünden gerçekte 64px
       çiziliyordu — kenar çubuğu tam da bu fark kadar (16px) ekranın dışına
       taşıyordu. Logo/marka değiştiğinde bant yüksekliği yine değişir, yani
       aritmetik en baştan kırılgandı. flex ile ölçü kendiliğinden doğru olur. */
    flex: 1;
    min-height: 0;
}

/* Gizlenen menü tamamen kaybolur: genişlik 0, opaklık 0, geçiş 0.1s linear
   (Radzen'in --rz-transition değeriyle aynı).

   DİKKAT: sidebar'a `display: none` VERMEYİN. Grid'den düşen öğenin yerine
   .proc-shell-main birinci sütuna kayar ve 0px genişlikte kalır — sayfa
   tamamen kaybolur. Öğe grid'de kalmalı, yalnızca genişliği sıfırlanmalı. */
.proc-shell-collapsed .proc-shell-sidebar {
    width: 0;
    opacity: 0;
    border-right-width: 0;
}

/* Kenar menü lacivert zeminlidir; ana modül menüsüyle (NavMenu) aynı dili konuşur.
   Sağdaki çalışma yüzeyi açık kalır — yalnızca sidebar koyudur. */
.proc-shell-sidebar {
    display: flex;
    flex-direction: column;
    width: var(--proc-sidebar-w);
    min-width: 0;
    /* Genişlik 0'a inerken içerik dışarı taşmasın */
    overflow: hidden;
    border-right: 1px solid var(--proc-nav-dark-line);
    background: linear-gradient(180deg, #0e2038 0%, #0a1729 100%);
    opacity: 1;
    transition: width 0.1s linear, opacity 0.1s linear;

    /* Yüksekliği ızgara satırından gelir (.proc-shell-body kalan alanı kaplar).
       Taşan menü .proc-shell-nav-wrap içinde kaydırılır, "Çıkış Yap" hep altta
       ve görünen alanın içinde kalır — Dağıtım'daki .nav-menu-container
       `height:100%` deseninin Satın Alma karşılığı. */
    min-height: 0;
}

/* Marka üst bantta, açık zeminde: kenar menüde değil (menü gizlenince
   kaybolmamalı). Ana modül başlığıyla aynı dil. */
.proc-shell-brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.proc-shell-brand img {
    align-self: center;
}

.proc-shell-brand-title {
    overflow: hidden;
    color: #111d43;
    font-size: var(--proc-fs-h2);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proc-shell-brand-subtitle {
    flex: 0 0 auto;
    color: var(--proc-muted);
    font-size: var(--proc-fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.proc-shell-nav-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0;
}

.proc-shell-footer {
    /* Alt boşluk üsttekinden FAZLA: çıkış düğmesi ekranın en alt kenarına
       yapışınca yanlışlıkla tıklanmaya açık kalıyor ve nefes alanı olmuyor.
       Dağıtım tarafındaki karşılığı şu an 8px; iyi durursa oraya da taşınacak. */
    /* Alt boşluk Dağıtım'daki .logout-btn-container ile AYNI (16px): düğme ekranın
       kenarına yapışmasın ama gereğinden fazla da yer kaplamasın. İki modülde aynı
       işi yapan düğmenin çevresi de aynı olmalı. */
    padding: 10px 8px 16px;
    border-top: 1px solid var(--proc-nav-dark-line);
    /* Çubuk kısaldığında bile alt blok küçülmesin; kaydırma menüde olsun. */
    flex: 0 0 auto;
}

/* .proc-shell-copilot-* kuralları KALDIRILDI — kenar menüdeki Copilot kartıyla
   birlikte. Kart sabit bir sayaçtan besleniyordu ve menünün altında kalıcı yer
   kaplıyordu. */

.proc-shell-logout {
    /* Ölçü Dağıtım'daki Radzen düğmesiyle hizalıdır: tam genişlik, 36px yükseklik,
       ikon + metin yan yana. --proc-h-control (26px) menü içi küçük denetimler
       içindir; ana aksiyon düğmesi için fazla ince kalıyordu. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    border-radius: var(--proc-radius);
    font-size: var(--proc-fs-base);
    font-weight: 600;
    cursor: pointer;
}

.proc-shell-logout-icon {
    font-size: 18px;
    line-height: 1;
}

.proc-shell-logout {
    border: 1px solid rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.12);
    color: #ff9d9d;
}

.proc-shell-logout:hover {
    background: #ef4444;
    color: #ffffff;
}

.proc-shell-main {
    min-width: 0;
    overflow: auto;
    background: var(--proc-canvas);
}

.proc-shell-zoom-host {
    min-height: 100%;
    transform-origin: top left;
}

.proc-shell-legacy-banner {
    padding: 5px 12px;
    border-bottom: 1px solid #fde68a;
    background: #fff7d6;
    color: #92400e;
    font-size: var(--proc-fs-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* == 04 Navigasyon ========================================================
   Lacivert zemin üzerinde açık mavi tipografi — ana modül menüsüyle (NavMenu)
   aynı görsel dil: kenardan kenara satırlar, seçilide sol gösterge çubuğu,
   alt satırlarda madde işareti, açılır satırların sağında chevron.
   Ölçüler modülün yoğunluk bütçesine bağlı kalır (bkz. --proc-h-*). */

.proc-nav-shell {
    min-height: 100%;
}

.proc-nav {
    display: grid;
    gap: 0;
}

/* Satır dizilimi ana modül menüsüyle aynı: ikon · etiket · (varsa) chevron.
   space-between yerine flex-start + etiketin flex:1 alması kullanılır; aksi
   halde ikon ile etiket satırın iki ucuna savrulur. */
.proc-nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--proc-nav-dark-ink);
    font-size: var(--proc-fs-base);
    font-weight: 600;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

/* Material Icons ligatürü — index.html'de yüklü. Ölçü menü fontuna değil
   satır yüksekliğine bağlıdır: 15px, ana modül menüsüyle aynı. */
.proc-nav-icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: #7fb2e6;
    font-size: 15px;
    line-height: 1;
}

.proc-nav-link:hover .proc-nav-icon,
.proc-nav-link.active .proc-nav-icon {
    color: #ffffff;
}

/* Ayırıcı çizgi yalnızca üst seviyede; alt menü kendi zeminiyle ayrışır */
.proc-nav > .proc-nav-link {
    border-bottom: 1px solid var(--proc-nav-dark-line);
}

.proc-nav-link:hover {
    background: rgba(90, 169, 255, 0.10);
    color: #ffffff;
}

.proc-nav-link.active {
    background: linear-gradient(90deg, #1c4c8c 0%, #14355f 100%);
    box-shadow: inset 4px 0 0 0 var(--proc-nav-dark-indicator);
    color: #ffffff;
    font-weight: 700;
}

.proc-nav-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proc-nav-accordion {
    margin-top: 0;
    color: var(--proc-nav-dark-ink);
    font-size: var(--proc-fs-base);
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: none;
}

/* Chevron ikon fontuna bağlı değil: iki kenarlı kare 45° döndürülür.
   Açık grupta aşağı, kapalı grupta sağa bakar. */
.proc-nav-caret {
    flex: 0 0 auto;
    margin-left: auto;
    width: 7px;
    height: 7px;
    margin-right: 2px;
    border-right: 2px solid var(--proc-nav-dark-chevron);
    border-bottom: 2px solid var(--proc-nav-dark-chevron);
    transform: rotate(-45deg);
    transition: transform 0.15s ease-in-out;
}

.proc-nav-caret.is-expanded {
    transform: rotate(45deg);
}

.proc-nav-link:hover .proc-nav-caret {
    border-color: #ffffff;
}

.proc-nav-submenu {
    display: grid;
    gap: 0;
    padding-left: 0;
    background: rgba(0, 0, 0, 0.22);
}

.proc-nav-sublink {
    gap: 8px;
    min-height: 30px;
    padding-left: 22px;
    color: var(--proc-nav-dark-ink-soft);
    font-size: var(--proc-fs-base);
    font-weight: 500;
}

/* Madde işareti ile ikon arasındaki boşluğu satırın gap'i verir */
.proc-nav-sublink::before {
    content: "\2022";
    flex: 0 0 auto;
    color: var(--proc-nav-dark-bullet);
    font-size: 14px;
    line-height: 1;
}

.proc-nav-sublink .proc-nav-icon {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.proc-nav-sublink.active {
    box-shadow: inset 3px 0 0 0 var(--proc-nav-dark-indicator);
}

/* Alt menü içi grup etiketi — "Sistem Ayarları" gibi başlıklar için */
.proc-nav-caption {
    padding: 10px 14px 4px 22px;
    color: var(--proc-nav-dark-caption);
    font-size: var(--proc-fs-xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* Grup ayırıcısı. Etiketin tek başına verdiği ayrımı görünür kılar; ilk grubun
   üstünde çizilmez (akordeon başlığı zaten sınır oluşturuyor). Kenar boşluğu
   bilinçli: çizgi menü kenarına dayanmaz, gruplar arası boşluğu belirginleştirir. */
.proc-nav-divider {
    height: 1px;
    margin: 6px 12px 2px;
    background: var(--proc-nav-dark-divider, rgba(255, 255, 255, 0.10));
}

/* == 05 Sayfa iskeleti ====================================================
   Modülde tarihsel olarak dört ayrı sayfa kabuğu vardı; hepsi aynı ölçülere
   bağlandı: .proc-modern-page (yeni ekranlar), .proc-screen (workspace),
   .procurement-page (Radzen ekranları), .procurement-portal / *-shell. */

.proc-modern-page,
.proc-screen,
.procurement-page,
.procurement-portal,
.approval-queue-shell,
.payapp-shell,
.paypack-shell {
    display: flex;
    flex-direction: column;
    gap: var(--proc-gap);
    min-height: 100%;
    padding: var(--proc-pad-page);
    color: var(--proc-ink);
    background: transparent;
}

/* Başlık şeridi: tek satır, listeyi aşağı itmeyecek kadar ince tutulur. */
.proc-modern-header,
.proc-screen-head,
.procurement-page-header,
.portal-header,
.approval-queue-head,
.payapp-head,
.paypack-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.proc-modern-header h1,
.proc-screen-head h1,
.procurement-page-header h1,
.portal-header h1,
.approval-queue-head h1,
.payapp-head h1,
.paypack-head h1 {
    margin: 0;
    color: var(--proc-ink);
    font-size: var(--proc-fs-h1);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.proc-modern-breadcrumb,
.approval-queue-crumb,
.payapp-crumb,
.portal-badge {
    color: #94a3b8;
    font-size: var(--proc-fs-sm);
    font-weight: 500;
    line-height: 1.3;
}

/* Konum çubuğu halkaları (ProcBreadcrumb). Ölçü ve renk yukarıdaki taban
   kuraldan gelir; burada yalnızca tıklanabilirlik görünür kılınır. */
.proc-modern-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.proc-crumb-link {
    color: inherit;
    text-decoration: none;
    border-radius: var(--proc-radius);
}

.proc-crumb-link:hover {
    color: var(--proc-accent);
    text-decoration: underline;
}

.proc-crumb-link:focus-visible {
    outline: 2px solid var(--proc-focus);
    outline-offset: 1px;
}

/* Bulunulan sayfa: bağlantı değil, biraz daha koyu. */
.proc-crumb-current {
    color: var(--proc-ink-soft);
}

.proc-crumb-sep {
    color: inherit;
    user-select: none;
}

.portal-badge {
    display: inline-flex;
    align-items: center;
    color: var(--proc-accent);
    font-size: var(--proc-fs-xs);
    font-weight: 700;
}

.proc-modern-subtitle,
.proc-screen-head p,
.procurement-page-header p,
.portal-header p,
.approval-queue-head p,
.payapp-head p,
.paypack-sub {
    margin: 2px 0 0;
    max-width: 900px;
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
    line-height: 1.35;
}

.proc-modern-actions,
.proc-head-actions,
.procurement-page-actions,
.portal-actions,
.approval-queue-actions,
.payapp-actions,
.paypack-actions {
    display: flex;
    align-items: center;
    gap: var(--proc-gap-sm);
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.proc-back-link,
.paypack-back {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--proc-accent);
    font-size: var(--proc-fs-sm);
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

/* == 06 Butonlar & form kontrolleri ======================================= */

.proc-modern-button,
.proc-btn,
.portal-btn,
.approval-queue-btn,
.payapp-btn,
.paypack-btn,
.proc-admin-btn,
.proc-reset-btn,
.proc-branding-btn,
.proc-password-btn,
.proc-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: var(--proc-h-control);
    height: var(--proc-h-control);
    padding: 0 10px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
    color: var(--proc-ink);
    font-family: var(--proc-font);
    font-size: var(--proc-fs-base);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.proc-modern-button:hover,
.proc-btn:hover,
.portal-btn:hover,
.approval-queue-btn:hover,
.payapp-btn:hover,
.paypack-btn:hover,
.proc-admin-btn:hover,
.proc-reset-btn:hover {
    background: var(--proc-surface-soft);
}

.proc-modern-button.primary,
.proc-btn-primary,
.portal-btn-primary,
.approval-queue-btn-primary,
.payapp-btn-primary,
.paypack-btn-primary,
.proc-admin-btn-primary,
.proc-reset-btn-primary,
.proc-branding-btn-primary,
.proc-password-btn-primary {
    border-color: var(--proc-accent);
    background: var(--proc-accent);
    color: #fff;
}

.proc-modern-button.primary:hover,
.proc-btn-primary:hover,
.portal-btn-primary:hover,
.approval-queue-btn-primary:hover,
.payapp-btn-primary:hover,
.paypack-btn-primary:hover,
.proc-admin-btn-primary:hover,
.proc-reset-btn-primary:hover {
    background: var(--proc-accent-strong);
    border-color: var(--proc-accent-strong);
}

.proc-modern-button.ghost,
.proc-btn-ghost {
    background: transparent;
    border-color: var(--proc-line);
    color: var(--proc-accent);
}

.proc-btn-danger,
.paypack-btn-danger,
.proc-reset-btn-danger,
.proc-mini-btn-danger,
.proc-admin-btn-danger {
    border-color: #f0c2c2;
    background: #fff6f6;
    color: var(--proc-danger);
}

.proc-btn-danger:hover,
.paypack-btn-danger:hover {
    background: var(--proc-danger-soft);
}

.proc-admin-btn-warn,
.proc-mini-btn-warn {
    border-color: #e3cfa2;
    background: #fffaf0;
    color: var(--proc-warning);
}

.proc-icon-button,
.proc-btn-xs,
.proc-mini-btn,
.paypack-btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--proc-h-control-sm);
    height: var(--proc-h-control-sm);
    padding: 0 7px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
    color: var(--proc-ink);
    font-size: var(--proc-fs-sm);
    font-weight: 600;
    cursor: pointer;
}

.proc-modern-button:disabled,
.proc-btn:disabled,
.portal-btn:disabled,
.approval-queue-btn:disabled,
.payapp-btn:disabled,
.paypack-btn:disabled,
.proc-admin-btn:disabled,
.proc-reset-btn:disabled,
.proc-mini-btn:disabled,
.proc-btn-xs:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Metin bağlantısı gibi görünen butonlar */
.proc-modern-link,
.proc-modern-inline-button,
.proc-link-button,
.procurement-link-button,
.portal-link,
.portal-inline-link,
.approval-queue-link,
.payapp-link,
.paypack-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--proc-accent);
    font-size: var(--proc-fs-sm);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.proc-modern-inline-button {
    font-size: inherit;
}

.proc-modern-link:hover,
.proc-modern-inline-button:hover,
.portal-link:hover,
.payapp-link:hover,
.paypack-link:hover {
    text-decoration: underline;
}

/* Form kontrolleri — hepsi tek yükseklikte */
.proc-modern-input,
.proc-modern-select,
.proc-modern-filter-grid input,
.proc-modern-filter-grid select,
.proc-toolbar input,
.proc-toolbar select,
.procurement-toolbar input,
.procurement-toolbar select,
.proc-form-grid input,
.proc-form-grid select,
.payapp-filter,
.paypack-filter,
.approval-queue-filter,
.proc-admin-field,
.proc-reset-field,
.proc-branding-field,
.proc-password-field {
    width: 100%;
    height: var(--proc-h-control);
    min-height: var(--proc-h-control);
    padding: 0 7px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
    color: var(--proc-ink);
    font-family: var(--proc-font);
    font-size: var(--proc-fs-sm);
}

.proc-form-grid textarea,
.proc-approval-note,
.proc-reset-area,
.proc-branding-area {
    width: 100%;
    min-height: 60px;
    padding: 5px 7px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
    color: var(--proc-ink);
    font-family: var(--proc-font);
    font-size: var(--proc-fs-sm);
    resize: vertical;
}

.proc-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--proc-gap-sm);
    padding: 8px 10px;
}

.proc-form-grid.compact-grid {
    padding-top: 0;
}

.proc-field {
    min-width: 0;
}

.proc-field label,
.proc-modal .proc-form-grid label,
.proc-branding-form label,
.proc-password-form label {
    display: block;
    margin-bottom: 2px;
    color: #4d5d66;
    font-size: var(--proc-fs-sm);
    font-weight: 600;
}

.proc-field textarea {
    min-height: 60px;
    resize: vertical;
}

.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

.proc-form-actions {
    justify-content: flex-end;
    padding: 0 10px 8px;
}

.proc-inline-number {
    width: 76px;
}

.proc-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
    white-space: nowrap;
    font-size: var(--proc-fs-sm);
    line-height: var(--proc-h-row);
}

/* == 07 Panel & araç çubuğu =============================================== */

.proc-panel,
.proc-modern-card,
.proc-modern-table-card,
.proc-modern-side-panel,
.proc-modern-kpi,
.procurement-grid-shell,
.procurement-summary-panel,
.portal-panel,
.portal-shell,
.approval-queue-grid-card,
.approval-queue-side,
.payapp-grid-card,
.paypack-grid-card,
.proc-admin-shell,
.proc-reset-shell,
.proc-branding-card,
.proc-password-card {
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
    box-shadow: none;
}

.payapp-section-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--proc-line);
}

.payapp-section-head h2 {
    margin: 0;
    font-size: var(--proc-fs-h2);
    font-weight: 700;
}

.payapp-section-head p {
    margin: 3px 0 0;
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
}

.payapp-section-head > span {
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
    white-space: nowrap;
}

.payapp-package-items > td {
    padding: 10px 12px;
    background: var(--proc-surface-soft);
}

.payapp-package-items-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--proc-fs-sm);
}

.payapp-package-items-grid th,
.payapp-package-items-grid td {
    padding: 6px 8px;
    border: 1px solid var(--proc-line);
    text-align: left;
}

.payapp-package-items-grid th {
    background: var(--proc-surface);
    font-weight: 700;
}

.proc-panel.compact {
    padding: var(--proc-pad-panel);
}

.proc-panel.compact h2,
.procurement-summary-panel h2,
.approval-queue-side h2 {
    margin: 0 0 8px;
    font-size: var(--proc-fs-h2);
    font-weight: 650;
}

.procurement-summary-panel h2,
.approval-queue-side h2 {
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid var(--proc-line);
}

/* Kart başlığı — eskiden 18px/20px dolgu + 18px başlıktı. */
.proc-modern-card-header,
.portal-panel-head,
.proc-branding-head,
.proc-password-head,
.proc-modal-head,
.proc-reset-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: var(--proc-h-bar);
    padding: 6px 10px;
    border-bottom: 1px solid var(--proc-line);
}

.proc-modern-card-header h2,
.proc-modern-card-header h3,
.portal-panel-head h2,
.proc-branding-head h3,
.proc-password-head h3,
.proc-modal-head h3,
.proc-reset-modal-head h3 {
    margin: 0;
    font-size: var(--proc-fs-h2);
    font-weight: 650;
}

.proc-modern-card-header p,
.portal-panel-head p,
.proc-branding-head p,
.proc-password-head p,
.proc-modal-head p,
.proc-reset-modal-head p {
    margin: 1px 0 0;
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
    line-height: 1.3;
}

/* Araç çubuğu / filtre şeridi */
.proc-toolbar,
.procurement-toolbar,
.payapp-tools,
.paypack-tools,
.approval-queue-tools,
.proc-admin-toolbar,
.proc-reset-toolbar {
    display: flex;
    align-items: center;
    gap: var(--proc-gap-sm);
    min-height: var(--proc-h-bar);
    padding: 5px 8px;
    border-bottom: 1px solid var(--proc-line);
    background: var(--proc-surface-soft);
}

/* Varsayılan şablon = talep ekranı: arama · durum · kaynak · öncelik · Filtrele.
   Ölçüler içerikten gelir — "Doğrudan Talep / Dağıtım" taşıyan kaynak listesi en
   geniş açılır liste, tek sözcüklü öncelik en dar olanı. Kolonlar sabit px'tir ve
   justify-content: start artan yeri şeridin sonuna bırakır; fr kullanıldığında şerit
   ekran genişledikçe uzuyor, hiçbir alanın kullanmadığı genişliğe yayılıyordu. */
.proc-modern-filter-grid {
    display: grid;
    grid-template-columns: 230px 150px 175px 125px auto;
    justify-content: start;
    gap: var(--proc-gap-sm);
    align-items: center;
    min-height: var(--proc-h-bar);
    padding: 5px 8px;
    border-bottom: 1px solid var(--proc-line);
    background: var(--proc-surface-soft);
}

.proc-modern-filter-grid button {
    min-width: 92px;
}

.payapp-searchbox,
.paypack-searchbox,
.approval-queue-searchbox,
.proc-admin-search {
    width: 220px;
    min-width: 160px;
    flex: 0 1 220px;
}

.payapp-spacer,
.paypack-spacer,
.approval-queue-spacer {
    flex: 1;
    margin-left: auto;
}

/* ── Yatay filtre şeritlerinde kontrol genişliği ──────────────────────────────

   Ortak kontrol kuralı (bkz. "Form kontrolleri — hepsi tek yükseklikte") her input ve
   select'e `width: 100%` verir. Bu DİKEY formlar için doğrudur; yatay bir şeritte ise
   her alan şeridin tamamına yayılmaya çalışır, flex-basis de o genişlikten türediği
   için alanlar mevcut yeri aralarında paylaşır. Sonuç: içeriği 100px olan bir "Öncelik"
   listesi ekran genişledikçe 300px'e uzar ve şerit hep tam ekran görünür.

   Buradan sonrası o davranışı yatay şeritlerde kapatır: kontroller içeriğine göre
   ölçülür, artan yer şeridin sonuna kalır. Ekran bazında ince ayar gerekiyorsa
   ilgili şeride özel kural yazılır (ör. .payapp-tools aşağıda). */
.proc-toolbar input,
.proc-toolbar select,
.procurement-toolbar input,
.procurement-toolbar select {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    /* Uzun seçenek metinli listeler (müşteri, tedarikçi adları) şeridi ele geçirmesin. */
    max-width: 230px;
}

/* Serbest arama kutusu uzun bir ipucu metni taşır; select'ler gibi içeriğine
   daraltılırsa placeholder kırpılır. Tür verilmemiş input = metin kutusu. */
.proc-toolbar input:not([type]),
.proc-toolbar input[type="text"],
.procurement-toolbar input:not([type]),
.procurement-toolbar input[type="text"] {
    flex: 0 1 230px;
    width: 230px;
    min-width: 150px;
}

/* Tarih kutusu içeriğine göre zaten dar; ortak kuralın 100%'ü onu da şişiriyordu. */
.proc-toolbar input[type="date"],
.procurement-toolbar input[type="date"] {
    flex: 0 0 auto;
    width: 130px;
    min-width: 130px;
}

/* Şerit içindeki işaret kutusu da ortak kuraldan width:100% alıyordu ve dev bir
   dikdörtgene dönüşüyordu; modüldeki diğer işaret kutularıyla aynı ölçüye çekilir.
   Talepler ekranının süzgeç ızgarası (.proc-modern-filter-grid) bu listeye sonradan
   eklendi: "İptalleri göster" ve "Onayımı bekleyenler" kutuları aynı sebeple büyüyordu. */
.proc-toolbar input[type="checkbox"],
.procurement-toolbar input[type="checkbox"],
.proc-modern-filter-grid input[type="checkbox"] {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    min-width: 13px;
    min-height: 13px;
    max-width: 13px;
    padding: 0;
    border: 0;
    cursor: pointer;
    accent-color: var(--proc-accent);
}

/* Ödeme ekranı filtre şeridi — genişlikler içeriğe göre, şeridin tamamı kaplanmadan.

   Açılır listeler ortak kontrol kuralından (.payapp-filter { width: 100% }) geliyordu;
   flex-basis de o genişlikten türeyince üç liste şeridin tamamını paylaşıyor, sağdaki
   esneme payı (payapp-spacer) sıfıra iniyordu. Sonuç: dört filtre ekran ne kadar
   genişse o kadar uzuyordu — oysa hiçbirinin içeriği o genişliği kullanmıyor.

   Ölçüler en uzun seçenek metnine göre: "Tüm Ödeme Türleri" < "Tüm Müşteriler" +
   müşteri adları; öncelikler tek sözcük olduğu için en dar. Toplam ~660px, yani
   geniş ekranda gridin yarısının altında kalır; artan yer spacer'a gider. */
.payapp-tools .payapp-filter {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
}

.payapp-tools .payapp-searchbox { flex: 0 1 200px; width: 200px; min-width: 140px; }
.payapp-tools .payapp-filter-paytype { flex: 0 1 145px; width: 145px; min-width: 110px; }
.payapp-tools .payapp-filter-customer { flex: 0 1 180px; width: 180px; min-width: 120px; }
.payapp-tools .payapp-filter-priority { flex: 0 1 135px; width: 135px; min-width: 105px; }

.proc-record,
.procurement-record-count,
.procurement-toolbar-label,
.proc-admin-record,
.proc-reset-record,
.payapp-selected-info,
.paypack-note,
.approval-queue-select-all {
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
    white-space: nowrap;
}

.proc-record,
.procurement-record-count,
.proc-admin-record,
.proc-reset-record {
    margin-left: auto;
}

/* Ana çalışma alanı: liste + yan panel.

   Yan panelin genişliği doğrudan grid-template-columns'a yazılmaz, --proc-side-w
   üzerinden verilir. Sebep: kullanıcı paneli sürükleyerek genişletebiliyor ve
   sürükleme sonucu elemana inline custom property olarak yazılıyor. Genişlik
   duyarlı kurallarda da (bkz. bölüm 15) bu değişken üzerinden ezilir — aksi hâlde
   media query içindeki sabit piksel, kullanıcının seçtiği genişliği yutardı. */
.proc-modern-grid-layout {
    --proc-side-w: 380px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--proc-side-w);
    gap: var(--proc-gap);
    align-items: start;
    min-height: 0;
}

/* PANO MODU: tek sutun. Pano yatayda kulvarlara yayilir; yan panel onu dar bir
   seride sikistiriyor ve kulvarlarin yarisi ekran disinda kaliyordu. Tablo moduna
   donulunce onizleme paneli geri gelir. */
.proc-modern-grid-layout.board-mode {
    grid-template-columns: minmax(0, 1fr);
}

/* Pano kipinde önizleme çekmecesi gizlenir: kart zaten özeti taşıyor.
   KULP SEÇİCİSİ DOĞRUDAN ÇOCUKLA SINIRLI: eskiden düzenin içindeki BÜTÜN
   kulpları gizliyordu ve teklif ekranında talep/teklif bölmesinin kulbunu da
   öldürüyordu — pano görünümünde genişlik ayarlanamıyordu. O kulp yan panele
   değil, iç çalışma alanına ait. */
.proc-modern-grid-layout.board-mode .proc-modern-side-panel,
.proc-modern-grid-layout.board-mode > .proc-side-resizer {
    display: none;
}

.proc-modern-grid-layout.compact-right {
    --proc-side-w: 320px;
}

/* position:relative yalnızca kulbu barındıran düzene verilir. Paylaşılan sınıfa
   yazılsaydı kulbu olmayan sayfalarda da yeni bir kapsayıcı blok oluşur, oradaki
   absolute konumlu bileşenlerin dayanağı sessizce değişirdi. */
.has-side-resizer {
    position: relative;
}

/* Bölmeler arasındaki sürükleme kulbu (bkz. ProcSplitter.razor). Grid akışına
   GİRMEZ (absolute), böylece düzenin kolon/satır şablonu olduğu gibi kalır ve
   kulp eklemek için şablona üçüncü bir parça yazmak gerekmez.

   Konum, kulbun kendi `--proc-resizer-anchor` değişkeninden okunur; bileşen bunu
   boyut değişkenine (ör. var(--proc-side-w)) bağlar. Böylece tek bir kural hem
   sağdaki hem soldaki, hem üstteki hem alttaki bölme için çalışır. */
.proc-side-resizer {
    position: absolute;
    padding: 0;
    border: 0;
    background: transparent;
    touch-action: none;
    z-index: 4;
}

/* Yatay ayar: dikey duran bir çubuk, genişliği değiştirir. */
.proc-side-resizer[data-proc-resizer="horizontal"] {
    top: 0;
    bottom: 0;
    width: 9px;
    cursor: col-resize;
}

.proc-side-resizer[data-proc-resizer="horizontal"][data-proc-resizer-edge="end"] {
    right: var(--proc-resizer-anchor, var(--proc-side-w));
}

.proc-side-resizer[data-proc-resizer="horizontal"][data-proc-resizer-edge="start"] {
    left: var(--proc-resizer-anchor, var(--proc-side-w));
}

/* Dikey ayar: yatay duran bir çubuk, yüksekliği değiştirir. */
.proc-side-resizer[data-proc-resizer="vertical"] {
    left: 0;
    right: 0;
    height: 9px;
    cursor: row-resize;
}

.proc-side-resizer[data-proc-resizer="vertical"][data-proc-resizer-edge="end"] {
    bottom: var(--proc-resizer-anchor, var(--proc-side-h));
}

.proc-side-resizer[data-proc-resizer="vertical"][data-proc-resizer-edge="start"] {
    top: var(--proc-resizer-anchor, var(--proc-side-h));
}

.proc-side-resizer::before {
    content: "";
    position: absolute;
    border-radius: var(--proc-radius-pill);
    background: transparent;
    transition: background 120ms ease;
}

.proc-side-resizer[data-proc-resizer="horizontal"]::before {
    top: 0;
    bottom: 0;
    left: 3px;
    width: 3px;
}

.proc-side-resizer[data-proc-resizer="vertical"]::before {
    left: 0;
    right: 0;
    top: 3px;
    height: 3px;
}

.proc-side-resizer:hover::before,
.proc-side-resizer:focus-visible::before,
.proc-side-resizer.dragging::before {
    background: var(--proc-accent);
}

/* Sürükleme boyunca metin seçimi ve imleç titremesi engellenir. */
body.proc-resizing {
    cursor: col-resize;
    user-select: none;
}

body.proc-resizing-v {
    cursor: row-resize;
    user-select: none;
}

/* Teklif yönetimi çalışma alanı: solda talep, sağda o talebin teklifleri.
   Sipariş oluşturma diyaloğundaki iki panel kalıbının sayfa ölçeğindeki karşılığı —
   orada .procurement-order-create-* sınıfları dialog yüksekliğine göre ayarlıdır,
   burada panel sayfa yüksekliğini kullanır. */
.proc-quote-workspace {
    --proc-quote-left-w: 420px;
    display: grid;
    grid-template-columns: var(--proc-quote-left-w) minmax(0, 1fr);
    gap: var(--proc-gap);

    /* stretch: iki bölme de aynı boyda. "start" iken panel içeriği kadar kalıyor,
       kısa talep listesinde sol bölme yarıda bitiyordu. */
    align-items: stretch;
    min-width: 0;
}

.proc-quote-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
    overflow: hidden;
}

.proc-quote-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--proc-line);
    background: var(--proc-surface-alt);
}

.proc-quote-panel-header h2 {
    margin: 0;
    font-size: var(--proc-fs-h2);
    line-height: 1.3;
}

.proc-quote-panel-header p {
    margin: 2px 0 0;
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
}

.proc-quote-panel-body {
    min-height: 0;

    /* EKRANIN DİBİNE KADAR. Eskiden yalnız max-height vardı: uzun listede sınır
       işe yarıyor ama KISA listede bölme içeriği kadar kalıyor, altında boşluk
       kalıyordu. height ikisini birden verir — kısa liste de dibe iner, uzun
       liste de taşmaz, kendi içinde kayar. */
    height: calc(100vh - var(--proc-topbar-h) - 210px);
    overflow: auto;
}

.proc-quote-panel-body .proc-modern-table { min-width: 100%; }

@media (max-width: 1200px) {
    .proc-quote-workspace { grid-template-columns: 1fr; }
    .proc-quote-panel-body { max-height: 60vh; }
}

.proc-dense-layout,
.proc-two-col,
.procurement-work-area,
.approval-queue-layout,
.portal-grid,
.payapp-layout,
.paypack-layout,
.proc-side,
.proc-stack,
.proc-admin-page,
.proc-reset-page {
    display: grid;
    gap: var(--proc-gap);
    align-items: start;
}

/* Bölme genişlikleri artık sabit piksel DEĞİL, değişken üzerinden verilir; sürükleme
   kulbu inline custom property yazarak bunu ezer (bkz. ARAYUZ_KURALLARI §5). Sabit
   piksel bırakılsaydı kulp değeri yazsa bile şablon onu görmezdi. */
.proc-dense-layout { --proc-side-w: 240px; grid-template-columns: minmax(0, 1fr) var(--proc-side-w); }
.proc-dense-layout-wide { --proc-side-w: 230px; }
.proc-two-col { --proc-side-w: 260px; grid-template-columns: minmax(0, 1fr) var(--proc-side-w); }
.procurement-work-area { --proc-side-w: 210px; grid-template-columns: minmax(0, 1fr) var(--proc-side-w); }
.approval-queue-layout { --proc-side-w: 240px; grid-template-columns: minmax(0, 1fr) var(--proc-side-w); }
.portal-grid { --proc-side-w: 420px; grid-template-columns: minmax(0, 1fr) var(--proc-side-w); }
.payapp-layout,
.paypack-layout { grid-template-columns: minmax(0, 1fr); }

.proc-modern-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--proc-gap);
    align-items: start;
}

.proc-modern-section-body {
    padding: 8px 10px;
}

.proc-modern-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--proc-gap-sm);
}

.proc-modern-action-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 0;
    padding: 8px 10px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
}

.proc-modern-action-card h3 {
    margin: 0;
    font-size: var(--proc-fs-h3);
    font-weight: 700;
}

.proc-modern-action-card p {
    margin: 2px 0 0;
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
    line-height: 1.35;
}

/* Bilgi şeritleri */
.proc-banner,
.proc-modal-note,
.proc-reset-note,
.portal-shell-note,
.paypack-decision-note,
.procurement-dialog-context {
    padding: 6px 9px;
    border-left: 3px solid var(--proc-accent);
    background: var(--proc-accent-wash);
    color: #3a4a5a;
    font-size: var(--proc-fs-sm);
    line-height: 1.4;
}

.proc-banner.warn {
    border-left-color: var(--proc-warning);
    background: var(--proc-warning-soft);
    color: var(--proc-warning);
}

.proc-kv {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--proc-line-soft);
    font-size: var(--proc-fs-sm);
}

.proc-kv:last-child {
    border-bottom: 0;
}

.proc-kv span,
.procurement-summary-panel span {
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
}

.proc-note-list {
    margin: 0;
    padding-left: 15px;
    color: #52606d;
    font-size: var(--proc-fs-sm);
}

.proc-note-list li {
    margin-bottom: 4px;
}

.proc-status-row {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding: 8px 10px;
}

/* == 07b KPI / metrik şeritleri ===========================================
   Bunlar listenin hemen üstünde durur; tek satır ve ~40px yükseklikle
   sınırlıdır. Etiket 10px, değer 17px — daha büyüğü listeyi aşağı iter. */

.proc-modern-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--proc-gap-sm);
}

.proc-modern-kpi {
    padding: 4px 10px;
}

.proc-approval-summary,
.procurement-metrics,
.portal-kpis,
.portal-deep-kpis,
.approval-queue-summary,
.payapp-summary,
.paypack-summary,
.proc-admin-metrics,
.proc-reset-metrics {
    display: grid;
    gap: 0;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
    overflow: hidden;
}

.proc-approval-summary { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Onay kuyruğu özeti 5 hücreye indi: tip başına sayılar sekme rozetlerine taşındı. */
.proc-queue-summary { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.proc-receipt-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.procurement-metrics,
.portal-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.portal-deep-kpis,
.payapp-summary,
.proc-admin-metrics,
.proc-reset-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.paypack-summary { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.approval-queue-summary { grid-template-columns: 1.25fr repeat(5, minmax(0, 1fr)); }

.proc-approval-cell,
.procurement-metrics > div,
.portal-kpis > div,
.portal-deep-kpis article,
.approval-queue-cell,
.payapp-cell,
.paypack-cell,
.proc-admin-metrics > div,
.proc-reset-metrics > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--proc-h-metric);
    padding: 4px 10px;
    border: 0;
    border-right: 1px solid var(--proc-line-soft);
    background: var(--proc-surface);
}

.proc-approval-cell:last-child,
.procurement-metrics > div:last-child,
.portal-kpis > div:last-child,
.portal-deep-kpis article:last-child,
.approval-queue-cell:last-child,
.payapp-cell:last-child,
.paypack-cell:last-child,
.proc-admin-metrics > div:last-child,
.proc-reset-metrics > div:last-child {
    border-right: 0;
}

.proc-modern-kpi span,
.proc-approval-cell span,
.procurement-metrics span,
.portal-kpis span,
.portal-deep-kpis span,
.approval-queue-cell span,
.payapp-cell span,
.paypack-cell span,
.proc-admin-metrics span,
.proc-reset-metrics span,
.portal-payment-stack span {
    display: block;
    color: var(--proc-muted);
    font-size: var(--proc-fs-xs);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.proc-modern-kpi strong,
.proc-approval-cell strong,
.procurement-metrics strong,
.portal-kpis strong,
.portal-deep-kpis strong,
.approval-queue-cell strong,
.payapp-cell strong,
.paypack-cell strong,
.proc-admin-metrics strong,
.proc-reset-metrics strong,
.portal-payment-stack strong {
    display: block;
    margin-top: 0;
    font-size: var(--proc-fs-kpi);
    font-weight: 650;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* Seçim yapıldığında toplu onayın konusu olan iki hücre öne çıkar; seçim yokken
   diğer hücrelerden ayrışmaz. */
.proc-approval-cell.selected {
    background: var(--proc-accent-wash, #eff6ff);
}

.proc-approval-cell.selected strong {
    color: var(--proc-accent, #1d4ed8);
}

/* Uzun metin taşıyan KPI değerleri (tedarikçi adı, tutar) küçültülür. */
.proc-modern-kpi strong:not(:empty),
.approval-queue-cell strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* KPI alt notu — yalnızca portal-deep-kpis kullanıyor, gizlemek yerine inceltildi */
.portal-deep-kpis small,
.portal-source-row small {
    display: block;
    color: var(--proc-muted);
    font-size: var(--proc-fs-xs);
    line-height: 1.25;
}

.proc-approval-total,
.payapp-amount,
.paypack-amount,
.approval-queue-total b {
    color: var(--proc-accent);
}

.procurement-warning,
.portal-warning,
.proc-admin-metrics strong.warn,
.proc-reset-metrics .warn { color: var(--proc-warning) !important; }

.procurement-danger,
.portal-danger,
.proc-reset-metrics .danger,
.approval-queue-amount { color: var(--proc-danger) !important; }

.proc-limit-ok { color: var(--proc-good); }
.proc-limit-bad { color: var(--proc-danger); }

/* == 08 Tablolar ==========================================================
   Native tablolar ve Radzen DataGrid aynı satır yüksekliğini paylaşır. */

.proc-grid-wrap,
.proc-modern-table-wrap,
.portal-table-wrap,
.approval-queue-grid-wrap,
.payapp-grid-wrap,
.paypack-grid-wrap,
.proc-admin-table-wrap,
.proc-reset-table-wrap {
    min-width: 0;
    overflow: auto;
}

.proc-grid,
.proc-modern-table,
.portal-table,
.approval-queue-grid,
.payapp-grid,
.paypack-grid,
.proc-admin-table,
.proc-reset-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background: var(--proc-surface);
    font-size: var(--proc-fs-sm);
}

.proc-grid { min-width: 760px; }
.approval-queue-grid { min-width: 960px; table-layout: fixed; }
.proc-admin-table,
.proc-reset-table { table-layout: fixed; }

.proc-grid th,
.proc-grid td,
.proc-modern-table th,
.proc-modern-table td,
.portal-table th,
.portal-table td,
.approval-queue-grid th,
.approval-queue-grid td,
.payapp-grid th,
.payapp-grid td,
.paypack-grid th,
.paypack-grid td,
.proc-admin-table th,
.proc-admin-table td,
.proc-reset-table th,
.proc-reset-table td {
    height: var(--proc-h-row);
    padding: var(--proc-pad-cell);
    border-right: 1px solid var(--proc-line-soft);
    border-bottom: 1px solid var(--proc-line-soft);
    color: var(--proc-ink);
    line-height: var(--proc-h-row);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.proc-grid thead th,
.proc-modern-table thead th,
.portal-table thead th,
.approval-queue-grid thead th,
.payapp-grid thead th,
.paypack-grid thead th,
.proc-admin-table thead th,
.proc-reset-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--proc-line);
    background: var(--proc-surface-soft);
    color: var(--proc-ink-soft);
    font-size: var(--proc-fs-sm);
    font-weight: 650;
    text-transform: none;
    letter-spacing: 0;
}

.proc-grid tbody tr:nth-child(even),
.portal-table tbody tr:nth-child(even),
.approval-queue-grid tbody tr:nth-child(even),
.payapp-grid tbody tr:nth-child(even),
.paypack-grid tbody tr:nth-child(even),
.proc-admin-table tbody tr:nth-child(even),
.proc-reset-table tbody tr:nth-child(even) {
    background: var(--proc-surface-alt);
}

.proc-grid tbody tr:hover,
.proc-modern-table tbody tr:hover,
.portal-table tbody tr:hover,
.approval-queue-grid tbody tr:hover,
.payapp-grid tbody tr:hover,
.paypack-grid tbody tr:hover {
    background: var(--proc-accent-wash);
}

.proc-row-selected,
.proc-delivery-row-selected,
.approval-queue-grid tr.selected td,
.payapp-grid tr.selected,
.payapp-grid tr.selected td {
    background: var(--proc-accent-soft) !important;
}

/* Seçim kolonu */
.proc-check-col,
.proc-select-col,
.payapp-check,
.approval-queue-check {
    width: 34px;
    text-align: center !important;
}

.proc-check-col input[type="checkbox"],
.proc-select-col input[type="checkbox"],
.payapp-check input[type="checkbox"],
.approval-queue-check input[type="checkbox"],
.proc-grid td input[type="checkbox"] {
    width: 13px;
    height: 13px;
    min-height: 13px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    accent-color: var(--proc-accent);
}

.proc-select-col input[type="checkbox"]:disabled {
    cursor: default;
    opacity: 0.45;
}

/* Satır içi düzenleme alanları */
.proc-grid td input,
.proc-grid td select {
    width: 100%;
    height: var(--proc-h-row);
    min-height: var(--proc-h-row);
    padding: 0 4px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    font-size: var(--proc-fs-sm);
    line-height: calc(var(--proc-h-row) - 2px);
}

.proc-grid td .proc-btn,
.proc-row-actions .proc-btn {
    height: var(--proc-h-control-sm);
    min-height: var(--proc-h-control-sm);
    padding: 0 6px;
    font-size: var(--proc-fs-sm);
}

.proc-row-actions,
.proc-table-actions,
.proc-admin-actions-cell,
.proc-line-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.proc-grid-hint {
    padding: 4px 8px;
    border-top: 1px solid var(--proc-line-soft);
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
}

.approval-queue-footer,
.proc-modern-table-footer {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 0 8px;
    border-top: 1px solid var(--proc-line);
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
}

/* Radzen DataGrid — native tablolarla aynı yoğunluk */
.procurement-grid .rz-datatable-data td,
.procurement-grid .rz-datatable-thead th,
.procurement-grid .rz-grid-table td,
.procurement-grid .rz-grid-table th {
    height: var(--proc-h-row) !important;
    min-height: var(--proc-h-row) !important;
    padding: var(--proc-pad-cell) !important;
    border-right: 1px solid var(--proc-line-soft);
    border-bottom: 1px solid var(--proc-line-soft);
    color: var(--proc-ink);
    font-size: var(--proc-fs-sm);
    line-height: var(--proc-h-row) !important;
    white-space: nowrap;
}

.procurement-grid .rz-datatable-thead th,
.procurement-grid .rz-grid-table thead th {
    background: var(--proc-surface-soft);
    color: var(--proc-ink-soft);
    font-size: var(--proc-fs-sm);
    font-weight: 650;
}

.procurement-grid .rz-datatable-data tr,
.procurement-grid .rz-grid-table tbody tr {
    height: var(--proc-h-row) !important;
}

.procurement-grid .rz-datatable-data tr:nth-child(even),
.procurement-grid .rz-grid-table tbody tr:nth-child(even) {
    background: var(--proc-surface-alt);
}

.procurement-grid .rz-cell-data,
.procurement-grid .rz-column-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Radzen'in TextAlign.Right kolonları da hizalı rakam kullanır. */
.procurement-grid .rz-text-align-right,
.procurement-grid td[style*="text-align: right"],
.procurement-grid td[style*="text-align:right"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.procurement-grid .rz-button,
.procurement-toolbar .rz-button,
.proc-head-actions .rz-button,
.procurement-page-actions .rz-button,
.proc-modern-actions .rz-button {
    min-height: var(--proc-h-control);
    height: var(--proc-h-control);
    padding: 0 10px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    font-size: var(--proc-fs-base);
    line-height: calc(var(--proc-h-control) - 2px);
}

.procurement-grid .rz-dropdown,
.procurement-grid .rz-inputtext,
.procurement-toolbar .rz-dropdown,
.procurement-toolbar .rz-inputtext,
.procurement-toolbar .rz-calendar,
.procurement-toolbar .rz-switch,
.proc-modern-filter-grid .rz-dropdown,
.proc-modern-filter-grid .rz-inputtext {
    min-height: var(--proc-h-control);
    height: var(--proc-h-control);
    border-radius: var(--proc-radius);
    font-size: var(--proc-fs-sm);
}

/* Kolon başlığı altındaki filtre satırı (FilterMode.SimpleWithMenu).
   Radzen'in material teması filtre kutularını form alanı ölçüsünde
   (--rz-input-height = 3.375rem, font 1rem) çizdiği için rapor
   gridlerinde filtre satırı veri satırının iki katından fazla yer
   kaplıyordu. Tema değişkenlerini filtre hücresi kapsamında modül
   bütçesine indiriyoruz: textbox / numeric / datepicker / dropdown
   hepsi bu değişkenlerden beslendiği için tek yerden küçülüyor. */
.procurement-grid .rz-cell-filter {
    --rz-input-height: var(--proc-h-control-sm);
    --rz-input-line-height: calc(var(--proc-h-control-sm) - 2px);
    --rz-input-font-size: var(--proc-fs-sm);
    --rz-input-padding-block: 0;
    --rz-input-padding-inline: 4px;
    --rz-input-border-radius: var(--proc-radius);
    --rz-numeric-line-height: calc(var(--proc-h-control-sm) - 2px);
    --rz-numeric-input-padding-block: 0;
    /* Artır/azalt düğmeleri gizlendiği için sağda yer ayrılmaz. */
    --rz-numeric-input-padding-inline: 4px;
    --rz-icon-size: 13px;
    --rz-chip-font-size: var(--proc-fs-xs);
    --rz-chip-gap: 2px;
    --rz-chip-padding-block: 0;
    --rz-chip-padding-inline: 4px 0;
    --rz-grid-filter-padding: 1px 4px;
    --rz-grid-filter-font-size: var(--proc-fs-sm);
    --rz-grid-filter-icon-font-size: 13px;
    --rz-grid-filter-icon-margin-inline: 0 2px;
    padding: 1px 4px !important;
    font-size: var(--proc-fs-sm);
    line-height: normal;
}

.procurement-grid .rz-cell-filter .rz-textbox,
.procurement-grid .rz-cell-filter .rz-inputtext,
.procurement-grid .rz-cell-filter .rz-numeric,
.procurement-grid .rz-cell-filter .rz-dropdown,
.procurement-grid .rz-cell-filter .rz-multiselect,
.procurement-grid .rz-cell-filter .rz-datepicker > .rz-inputtext {
    min-height: var(--proc-h-control-sm);
    height: var(--proc-h-control-sm);
    line-height: calc(var(--proc-h-control-sm) - 2px);
    border-radius: var(--proc-radius);
    font-size: var(--proc-fs-sm);
}

.procurement-grid .rz-cell-filter .rz-cell-filter-content {
    min-height: var(--proc-h-control-sm);
}

/* Sayısal filtrelerdeki artır/azalt okları: satır yüksekliğinde iki minik ok
   hem okunmuyor hem de kutunun sağını yiyordu. Değer klavyeden girilir. */
.procurement-grid .rz-cell-filter .rz-numeric-button {
    display: none;
}

/* Tarih filtresindeki takvim düğmesi aynı zamanda .rz-button olduğu için
   modülün genel buton çerçevesini (26px + 10px yan dolgu + kenarlık) alıyor,
   13px'lik simgenin çevresinde girişten taşan geniş bir kutu oluşuyordu.
   Düğme simge kadar yer kaplar; girişte de yalnızca o kadar sağ boşluk kalır,
   böylece yazı alanı genişler. */
.procurement-grid .rz-cell-filter .rz-datepicker-trigger {
    width: var(--rz-icon-size);
    min-width: var(--rz-icon-size);
    height: var(--rz-icon-size);
    min-height: var(--rz-icon-size);
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    line-height: var(--rz-icon-size);
}

.procurement-grid .rz-cell-filter .rz-datepicker-field-button {
    inset-inline-end: 3px;
}

.procurement-grid .rz-cell-filter .rz-datepicker:has(.rz-datepicker-trigger) > .rz-inputtext {
    padding-inline-end: calc(var(--rz-icon-size) + 6px);
}

.procurement-grid .rz-cell-filter .rz-datepicker {
    width: 100%;
}

/* Operatör düğmesi ("*A*", "=") dar kolonlarda kutunun içine konumlanır;
   düğme küçülünce ona ayrılan boşluk da küçülmeli. */
.procurement-grid .rz-cell-filter .rz-filter-button {
    min-height: 0;
    height: calc(var(--proc-h-control-sm) - 4px);
    max-height: calc(var(--proc-h-control-sm) - 4px);
    padding: 0 3px;
    font-size: var(--proc-fs-xs);
    line-height: calc(var(--proc-h-control-sm) - 4px);
    margin-inline-end: 3px;
}

.procurement-grid .rz-cell-filter-content:has(.rz-filter-button) .rz-cell-filter-label {
    min-width: 3.25rem;
}

/* Düğme kutunun soluna mutlak konumlandığı için girilen değer onun altından
   başlıyordu. Girinti düğmenin sağ kenarını (2px konum + ~23px genişlik)
   birkaç piksel aşar; değer ile "*A*" arasında görünür bir boşluk kalır. */
.procurement-grid .rz-cell-filter-content:has(.rz-filter-button) .rz-textbox,
.procurement-grid .rz-cell-filter-content:has(.rz-filter-button) .rz-inputtext {
    text-indent: 32px;
}

/* Çoklu seçim filtresinin açılır listesi (RadzenDropDown Multiple).
   Radzen popup'ı açarken document.body'ye taşıdığı için .procurement-grid
   altından hedeflenemiyor; modül kabuğu ekranda olduğu sürece geçerli olacak
   şekilde kapsıyoruz. Üç sorun birlikte düzeliyor:
   - Genişlik: Radzen popup'a inline "width = tetikleyici genişliği" yazıyor,
     "Faturalandırıldı" gibi seçenekler dar filtre kutusuna sığmıyordu.
     width:auto ile liste içeriği kadar genişler; inline min-width yerinde
     kaldığı için hiçbir zaman tetikleyiciden dar olmaz.
   - Font: tema seçenek yazısını --rz-input-font-size (1rem) ile çiziyordu;
     modülün liste fontuna (--proc-fs-sm) iniyor.
   - Boşluk: onay kutusunun sağındaki 1rem ve satırın 0.75rem/1rem dolgusu
     metne kalan yeri yiyordu. */
body:has(.proc-shell) .rz-multiselect-panel,
body:has(.proc-shell) .rz-dropdown-panel {
    --rz-dropdown-panel-padding: 0 4px;
    --rz-dropdown-items-margin: 0 -4px;
    --rz-dropdown-items-padding: 2px 0;
    --rz-dropdown-item-padding: 2px 6px;
    --rz-dropdown-item-font-size: var(--proc-fs-sm);
    --rz-multiselect-checkbox-margin-inline: 0 6px;
    --rz-checkbox-width: 13px;
    --rz-checkbox-height: 13px;
    --rz-checkbox-border-width: 1px;
    --rz-checkbox-icon-width: 11px;
    --rz-checkbox-icon-height: 11px;
    --rz-checkbox-icon-font-size: 11px;
    width: auto !important;
    max-width: min(360px, 92vw);
    /* Popup gövdeye taşındığı için ".proc-shell *" font ailesini almıyor. */
    font-family: var(--proc-font);
    font-size: var(--proc-fs-sm);
}

/* Onay kutusunun dalga efekti 2.5rem'lik daire çiziyor; 18px'lik satırda
   komşu seçeneklerin üzerine taşıyordu. */
body:has(.proc-shell) .rz-multiselect-panel .rz-chkbox-box::after,
body:has(.proc-shell) .rz-dropdown-panel .rz-chkbox-box::after {
    display: none;
}

.procurement-grid .rz-paginator,
.procurement-grid .rz-datatable-footer {
    min-height: 28px;
    padding: 2px 8px;
    border-top: 1px solid var(--proc-line);
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
}

/* == 09 Rozetler ==========================================================
   Modülde beş ayrı rozet sistemi vardı (status-chip / proc-modern-status /
   payapp-paytype / paypack-tag / proc-admin-tag ...). Hepsi tek tabana
   bağlandı; renk yalnızca "ton" sınıfından gelir.
   Yeni kodda <ProcBadge Tone="..."> kullanın. */

.proc-badge,
.proc-modern-status,
.proc-modern-pill,
.proc-modern-priority,
.status-chip,
.proc-priority-badge,
.portal-status,
.paypack-tag,
.approval-queue-tag,
.proc-admin-tag,
.proc-reset-badge,
.payapp-paytype,
.paypack-paytype,
.procurement-policy-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 17px;
    max-width: 100%;
    padding: 0 6px;
    border: 0;
    border-radius: var(--proc-radius-pill);
    background: var(--proc-neutral-soft);
    color: var(--proc-neutral);
    font-size: var(--proc-fs-xs);
    font-weight: 700;
    line-height: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Tonlar */
.proc-badge.neutral,
.proc-modern-status.neutral,
.proc-modern-pill,
.proc-modern-priority.low,
.status-chip.neutral,
.proc-priority-normal,
.paypack-tag-prep,
.proc-admin-tag.muted,
.payapp-paytype,
.paypack-paytype,
.procurement-status-draft {
    background: var(--proc-neutral-soft);
    color: var(--proc-neutral);
}

.proc-badge.info,
.proc-modern-status.info,
.status-chip.info,
.proc-admin-tag.info,
.procurement-status-quote {
    background: var(--proc-info-soft);
    color: var(--proc-info);
}

.proc-badge.success,
.proc-modern-status.success,
.status-chip.success,
.paypack-tag-approved,
.proc-admin-tag.success,
.proc-reset-badge.completed,
.procurement-status-order,
.procurement-status-complete,
.procurement-policy-badge.within-limit {
    background: var(--proc-good-soft);
    color: var(--proc-good);
}

.proc-badge.warning,
.proc-modern-status.warning,
.proc-modern-priority.medium,
.status-chip.warning,
.proc-priority-high,
.paypack-tag-wait,
.approval-queue-tag-wait,
.proc-admin-tag.warn,
.proc-reset-badge.pending {
    background: var(--proc-warning-soft);
    color: var(--proc-warning);
}

.proc-badge.danger,
.proc-modern-status.danger,
.proc-modern-priority.high,
.status-chip.danger,
.proc-priority-critical,
.paypack-tag-rejected,
.proc-reset-badge.rejected,
.procurement-policy-badge.over-limit {
    background: var(--proc-danger-soft);
    color: var(--proc-danger);
}

.proc-badge.accent,
.status-chip.approval,
.procurement-status-approval {
    background: var(--proc-accent-soft);
    color: var(--proc-accent-strong);
}

.proc-badge.dark,
.proc-admin-tag.dark {
    background: #49545b;
    color: #fff;
}

.procurement-policy-badge {
    border-radius: var(--proc-radius);
    font-size: var(--proc-fs-sm);
}

.procurement-policy-badge .rz-icon {
    font-size: 14px;
}

.proc-admin-tags {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

/* == 10 Yan panel / sekme / zaman çizelgesi / liste ======================= */

.proc-modern-side-panel {
    position: sticky;
    top: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--proc-topbar-h) - 2 * var(--proc-pad-page));
    min-height: 0;
    overflow: hidden;
}

.proc-modern-side-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.proc-modern-side-header,
.proc-modern-side-section {
    padding: 8px 10px;
    border-bottom: 1px solid var(--proc-line);
}

.proc-modern-side-section:last-child {
    border-bottom: 0;
}

.proc-modern-side-header-title {
    color: var(--proc-muted);
    font-size: var(--proc-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.proc-modern-side-header-id {
    margin-top: 1px;
    font-size: var(--proc-fs-h1);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.proc-modern-side-section > h3 {
    margin: 0 0 6px;
    font-size: var(--proc-fs-h3);
    font-weight: 700;
}

/* Yan panel sekme şeridi.

   .proc-modern-tab'ın taban stili yoktu: yalnızca aktif rengi tanımlıydı ve o da
   yanlışlıkla tüm sekmelere uygulanıyordu. Sekmeler bu yüzden tarayıcının varsayılan
   <button> görünümüyle (native çerçeve, ~13.3px Arial) çiziliyor, dar panele sığmayıp
   şeritte yatay kaydırma üretiyordu. Taban stil aşağıda tanımlı; vurgu yalnızca
   .active'e ait. Şerit kaydırmaz — sığmayan sekme alt satıra iner. */
.proc-modern-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    padding: 3px 4px 0;
    overflow: hidden;
    border-bottom: 1px solid var(--proc-line);
    background: var(--proc-surface-soft);
}

.proc-modern-tab {
    flex: 0 1 auto;
    min-width: 0;
    padding: 3px 6px 4px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--proc-radius) var(--proc-radius) 0 0;
    background: transparent;
    color: var(--proc-muted);
    font-family: inherit;
    font-size: var(--proc-fs-sm);
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.proc-modern-tab:hover {
    background: var(--proc-accent-wash);
    color: var(--proc-accent-strong);
}

.proc-modern-tab.active {
    border-bottom-color: var(--proc-accent);
    background: transparent;
    color: var(--proc-accent);
    font-weight: 700;
}

/* Onay Ayarları sekme şeridi — KULAKÇIK biçimi.

   Önceden ince alt çizgili düz metin butonlarıydı: beş sekme yan yana dururken
   hangisinin açık olduğu ancak 2px'lik çizgiden anlaşılıyordu. Bu ekranda sekmeler
   birbirinden bağımsız beş ayrı yönetim yüzeyi açtığı için aktif olanın tereddütsüz
   okunması gerekir. Kulakçıklar şeride oturur, aktif olan dolu vurgu renginde. */
.proc-settings-tabs {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 0 2px;
    border-bottom: 2px solid var(--proc-accent);
}

.proc-settings-tabs button {
    position: relative;
    top: 2px;
    padding: 7px 14px;
    border: 1px solid var(--proc-line);
    border-bottom: 0;
    border-radius: var(--proc-radius-lg) var(--proc-radius-lg) 0 0;
    background: var(--proc-surface-soft);
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.proc-settings-tabs button:hover {
    background: var(--proc-accent-wash);
    color: var(--proc-accent-strong);
}

.proc-settings-tabs button.active {
    background: var(--proc-accent);
    border-color: var(--proc-accent);
    color: #fff;
    font-weight: 700;
    /* Kulakçık şeride oturur: aktif olan bir tık yükselir. */
    padding-bottom: 9px;
}

.proc-settings-tabs button.active:hover {
    background: var(--proc-accent-strong);
    color: #fff;
}

.proc-modern-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--proc-gap-sm);
}

.proc-modern-stat-card {
    padding: 5px 8px;
    border-radius: var(--proc-radius);
    background: var(--proc-surface-soft);
}

.proc-modern-stat-card span {
    display: block;
    color: var(--proc-muted);
    font-size: var(--proc-fs-xs);
}

.proc-modern-stat-card strong {
    display: block;
    margin-top: 1px;
    font-size: var(--proc-fs-kpi);
    font-weight: 700;
    line-height: 1.2;
}

.proc-modern-list,
.proc-modern-timeline {
    display: grid;
    gap: var(--proc-gap-sm);
}

.proc-modern-list-item {
    padding: 6px 8px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
    font-size: var(--proc-fs-sm);
}

.proc-modern-timeline-item {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    font-size: var(--proc-fs-sm);
}

.proc-modern-timeline-dot {
    width: 9px;
    height: 9px;
    margin-top: 4px;
    border-radius: var(--proc-radius-pill);
    background: #cbd5e1;
}

.proc-modern-timeline-dot.done { background: #22c55e; }

.proc-modern-timeline-dot.active {
    background: var(--proc-accent);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.proc-modern-note-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--proc-gap-sm);
}

.proc-modern-note-card {
    padding: 8px 10px;
    border-radius: var(--proc-radius);
    background: #0f172a;
    color: #fff;
}

.proc-modern-note-card span {
    display: block;
    color: #cbd5e1;
    font-size: var(--proc-fs-xs);
}

.proc-modern-note-card strong {
    display: block;
    margin-top: 2px;
    font-size: var(--proc-fs-h2);
    font-weight: 700;
}

/* Sayfaya özel yan panel yardımcıları (Talepler ekranı) */
.proc-requests-side-status { margin-top: 4px; }

.proc-requests-section-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.proc-requests-section-head h3 {
    margin: 0;
    font-size: var(--proc-fs-h3);
    font-weight: 700;
}

.proc-requests-section-head span {
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
}

.proc-requests-section-head .proc-modern-link { margin-left: auto; }

.proc-requests-section-note {
    margin-top: 6px;
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
    line-height: 1.35;
}

.proc-requests-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
}

.proc-requests-field-value {
    margin-top: 1px;
    font-size: var(--proc-fs-base);
    font-weight: 700;
    line-height: 1.3;
}

/* Belge eki yükleme satırı: tip seçimi + dosya seçici yan yana. */
.proc-attach-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

/* Tür seçici modülün açılır kutusudur (.proc-modern-input); ortak kuralın width:100%'ü
   burada düğmeyi alt satıra iterdi. Seçici kalan yeri alır, düğme kendi genişliğinde kalır. */
.proc-attach-upload select {
    flex: 1 1 140px;
    width: auto;
    min-width: 140px;
}

.proc-attach-upload .inv-upload { flex: 0 0 auto; }

.proc-attach-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.proc-attach-remove {
    color: var(--proc-danger, #c0392b);
}

/* Teslim/kabul ekranındaki belge bölümü. */
.proc-attach-block {
    margin: 10px 0;
    padding: 8px 10px;
    border: 1px solid var(--proc-border, #d8dee6);
    border-radius: 4px;
}

.proc-attach-list {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.proc-attach-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-top: 1px solid var(--proc-border-soft, #eef1f5);
}

.proc-attach-list li:first-child {
    border-top: 0;
}

.proc-attach-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Alan ızgarasının altına tam genişlikte düşen alanlar (ör. Açıklama). */
.proc-requests-field-block {
    margin-top: 8px;
}

/* Çok satırlı serbest metin: girilen satır sonları korunur, uzun metin taşmaz. */
.proc-requests-field-multiline {
    font-weight: 500;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.proc-requests-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.proc-requests-summary-grid .proc-modern-stat-card {
    padding: 4px 6px;
    text-align: center;
}

.proc-requests-stat-text { font-size: var(--proc-fs-base) !important; }

.proc-requests-stat-button {
    min-height: var(--proc-h-control-sm);
    height: var(--proc-h-control-sm);
    margin-top: 4px;
    padding: 0 8px;
    font-size: var(--proc-fs-sm);
}

/* Teslim ve Kabul ekranı */
.proc-delivery-detail-panel { display: grid; }
.proc-delivery-detail-head { align-items: flex-start; }

.proc-detail-subtitle {
    margin-top: 2px;
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
}

.proc-delivery-detail-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
}

.proc-line-desc { font-weight: 600; }

.proc-line-unit {
    margin-top: 1px;
    color: var(--proc-muted);
    font-size: var(--proc-fs-xs);
}

.proc-line-reason { min-width: 180px; }
.proc-line-actions { min-width: 140px; }

/* Portal listeleri */
.portal-panel-wide { grid-row: span 2; }

.portal-shortcuts,
.portal-payment-stack,
.portal-source-stack {
    display: grid;
    gap: 0;
}

.portal-shortcut {
    display: block;
    width: 100%;
    min-height: 0;
    padding: 6px 10px;
    border: 0;
    border-bottom: 1px solid var(--proc-line-soft);
    background: var(--proc-surface);
    color: var(--proc-ink);
    text-align: left;
    cursor: pointer;
}

.portal-shortcut:hover { background: var(--proc-accent-wash); }

.portal-shortcut span,
.portal-shortcut small { display: block; }

.portal-shortcut span {
    font-size: var(--proc-fs-base);
    font-weight: 650;
}

.portal-shortcut small {
    margin-top: 1px;
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
}

.portal-payment-stack > div {
    padding: 6px 10px;
    border-bottom: 1px solid var(--proc-line-soft);
}

.portal-source-stack { padding: 8px 10px; }

.portal-source-row {
    display: grid;
    gap: 4px;
    padding: 5px 0;
    border-bottom: 1px solid var(--proc-line-soft);
}

.portal-source-row strong {
    font-size: var(--proc-fs-base);
    font-weight: 700;
}

.portal-source-bar {
    height: 6px;
    overflow: hidden;
    border-radius: var(--proc-radius);
    background: var(--proc-line-soft);
}

.portal-source-bar span {
    display: block;
    height: 100%;
    background: var(--proc-accent);
}

/* Onay kuyruğu yan paneli */
.approval-queue-side-item {
    padding: 6px 10px;
    border-bottom: 1px solid var(--proc-line-soft);
}

.approval-queue-side-item span {
    display: block;
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
}

.approval-queue-side-item b {
    display: block;
    margin-top: 1px;
    font-size: var(--proc-fs-base);
    font-weight: 600;
}

.approval-queue-moneyline {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 5px;
    font-size: var(--proc-fs-sm);
}

.approval-queue-moneyline span { color: var(--proc-muted); }
.approval-queue-moneyline b { margin-top: 0; font-size: var(--proc-fs-base); }

.approval-queue-total {
    padding: 8px 10px;
    background: var(--proc-accent-wash);
}

.approval-queue-total span {
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
}

.approval-queue-total b {
    display: block;
    margin-top: 1px;
    font-size: var(--proc-fs-h1);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.approval-queue-panel-action {
    display: grid;
    gap: 5px;
    padding: 8px 10px;
    border-top: 1px solid var(--proc-line);
}

.approval-queue-panel-action .approval-queue-btn { width: 100%; }

.approval-queue-note {
    margin: 8px 0 0;
    padding: 6px 9px;
    border: 1px dashed var(--proc-line);
    background: var(--proc-surface-alt);
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
    line-height: 1.4;
}

/* Ödeme paketi banka bilgisi */
.paypack-bankinfo {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.paypack-bankinfo small { color: var(--proc-muted); font-size: var(--proc-fs-xs); }
.paypack-bankinfo span { font-family: ui-monospace, Consolas, monospace; font-size: var(--proc-fs-xs); }

/* Yönetim panelleri (kullanıcı / şifre / marka) */
.proc-admin-usercell { display: grid; gap: 2px; }

.proc-admin-subline,
.proc-reset-subline,
.proc-branding-logo-empty {
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
}

/* Araç çubuğundaki "onay kutusu + etiket" ikilisi */
.payapp-history-toggle,
.approval-queue-history-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
    white-space: nowrap;
    cursor: pointer;
}

.payapp-history-toggle input[type="checkbox"],
.approval-queue-history-toggle input[type="checkbox"] {
    width: 13px;
    height: 13px;
    min-height: 13px;
    margin: 0;
    accent-color: var(--proc-accent);
}

/* Teslim kalemleri tablosu daha çok sütun taşır */
.proc-delivery-line-grid { min-width: 900px; }

.proc-branding-page,
.proc-password-page { display: grid; }

.proc-branding-layout {
    --proc-side-w: 380px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--proc-side-w);
    gap: var(--proc-gap);
    align-items: start;
}

.proc-branding-head.compact { border-bottom: 0; padding-bottom: 4px; }

.proc-branding-form,
.proc-password-form {
    display: grid;
    gap: 8px;
    padding: 8px 10px;
}

.proc-branding-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proc-password-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.proc-branding-logo-box {
    display: grid;
    place-items: center;
    min-height: 140px;
    margin: 0 10px;
    border: 1px dashed var(--proc-line);
    background: var(--proc-surface-alt);
}

.proc-branding-logo { max-width: 100%; max-height: 140px; object-fit: contain; }

.proc-branding-actions { display: grid; gap: 6px; padding: 10px; }
.proc-branding-actions input[type=file] { max-width: 100%; height: var(--proc-h-control); font-size: var(--proc-fs-sm); }
.proc-branding-note { padding: 0 10px 10px; color: var(--proc-muted); font-size: var(--proc-fs-sm); }

.proc-password-tools,
.proc-password-actions,
.proc-link-row,
.proc-password-head,
.proc-reset-actions,
.proc-reset-link-row,
.proc-modal-actions,
.proc-modal-actions-inline {
    display: flex;
    gap: var(--proc-gap-sm);
    align-items: center;
    flex-wrap: wrap;
}

.proc-password-tools,
.proc-password-actions { padding: 0 10px 10px; }
.proc-password-strength { padding: 0 10px 10px; }
.proc-password-meta { color: var(--proc-muted); font-size: var(--proc-fs-sm); }

.proc-password-alert {
    margin: 8px 10px 0;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: var(--proc-radius);
    font-size: var(--proc-fs-sm);
}

.proc-password-alert.warn { background: var(--proc-warning-soft); color: var(--proc-warning); }
.proc-password-alert.danger { background: var(--proc-danger-soft); color: var(--proc-danger); }
.proc-password-alert.success { background: var(--proc-good-soft); color: var(--proc-good); }

.proc-reset-actions-space,
.proc-modal-actions-space { justify-content: space-between; }
.proc-modal-actions { justify-content: flex-end; padding: 0 10px 10px; }

.proc-reset-link-box,
.proc-reset-note-field { display: grid; gap: 5px; margin: 8px 10px; }
.proc-reset-link-box span,
.proc-reset-note-field span { color: #4d5d66; font-size: var(--proc-fs-sm); font-weight: 600; }
.proc-reset-note { margin: 0 10px; }

.proc-password-box,
.proc-link-box {
    margin: 0 10px 8px;
    padding: 8px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface-alt);
}

.proc-link-box span {
    display: block;
    margin-bottom: 4px;
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
    font-weight: 600;
}

.proc-permissions { padding: 0 10px 10px; }
.proc-permissions-head { margin-bottom: 8px; }
.proc-permissions-head h4,
.proc-permission-group h5 { margin: 0; }
.proc-permissions-head p { margin: 2px 0 0; color: var(--proc-muted); font-size: var(--proc-fs-sm); }

.proc-permission-group {
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--proc-line-soft);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
}

.proc-permission-group h5 { margin-bottom: 6px; font-size: var(--proc-fs-h3); font-weight: 650; }

.proc-permission-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 10px;
}

.proc-permission-item {
    display: flex;
    gap: 6px;
    align-items: start;
    color: var(--proc-ink-soft);
    font-size: var(--proc-fs-sm);
}

/* == 11 Diyaloglar ========================================================
   Tüm modal içerikleri aynı ölçüleri paylaşır. */

.rz-dialog {
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius-lg);
}

/* Durum diyaloglarının kabuğu: tema başlığı 1.25rem font + geniş dolgu ile
   geliyor, 440px'lik kabukta içeriğe kalan yeri yiyordu. */
.rz-dialog:has(.procurement-status-dialog) .rz-dialog-titlebar {
    padding: 8px 12px;
}

.rz-dialog:has(.procurement-status-dialog) .rz-dialog-title {
    font-size: var(--proc-fs-h2);
    line-height: 1.3;
}

.rz-dialog:has(.procurement-status-dialog) .rz-dialog-content {
    padding: 10px 12px 12px;
}

.procurement-dialog,
.procurement-status-dialog,
.procurement-flow-dialog {
    font-size: var(--proc-fs-base);
}

/* Genişlik dialog kabuğunda (DialogOptions.Width) belirlenir. Burada ayrıca
   min-width vermek kabuğun iç dolgusunu hesaba katmadığı için içerik kabuğu
   aşıyor ve yatay kaydırma çıkıyordu.

   .procurement-dialog'un eski "min-width: 640px" kuralı bu tuzağın kaynağıydı:
   kabuğu daha dar açan ekranlar (500px'lik onay politikası diyaloğu) taşıyor,
   çare olarak dialog 760px'e genişletiliyordu — bkz. ProcurementSuppliers ve
   ProcurementCatalog'daki notlar. Kural kalktı; genişliği artık her ekran
   kendi DialogOptions.Width'i ile belirler. */
.procurement-dialog,
.procurement-status-dialog {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.procurement-flow-dialog { min-width: min(840px, 92vw); font-size: var(--proc-fs-sm); }
.procurement-catalog-selection-dialog { min-width: min(900px, 88vw); }

/* Rapor gridi kolon ayarları diyaloğu. */
.procurement-columns-dialog {
    min-width: min(400px, 86vw);
    font-size: var(--proc-fs-base);
}

.procurement-columns-hint {
    margin: 0 0 8px;
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
}

.procurement-columns-list {
    max-height: min(52vh, 420px);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    list-style: none;
}

.procurement-columns-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 26px;
    padding: 2px 6px;
    border-bottom: 1px solid var(--proc-line-soft);
}

.procurement-columns-row:last-child { border-bottom: none; }

.procurement-columns-row:nth-child(even) { background: var(--proc-surface-alt); }

.procurement-columns-row.is-hidden .procurement-columns-check span {
    color: var(--proc-muted);
    text-decoration: line-through;
}

.procurement-columns-check {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.procurement-columns-check input { cursor: pointer; }

.procurement-columns-check input:disabled { cursor: default; }

.procurement-columns-check span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.procurement-columns-move {
    display: flex;
    flex: none;
    gap: 3px;
}

.procurement-columns-move button {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
    color: var(--proc-ink-soft);
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
}

.procurement-columns-move button:hover:not(:disabled) {
    background: var(--proc-surface-soft);
    color: var(--proc-ink);
}

.procurement-columns-move button:disabled {
    opacity: .4;
    cursor: default;
}

.procurement-columns-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.procurement-columns-summary {
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
}

.procurement-dialog-fields,
.procurement-flow-dialog-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.procurement-dialog-field,
.procurement-flow-dialog-field,
.procurement-status-dialog-field { min-width: 0; }

.procurement-status-dialog-field { margin-bottom: 6px; }

/* Yeni sipariş, talep ve teklif kararını aynı çalışma yüzeyinde verir. Her iki
   liste kendi yüksekliğinde kayar; dialogun tamamı liste uzadıkça büyümez. */
.procurement-order-create-dialog {
    display: flex;
    flex-direction: column;
    min-height: min(68vh, 700px);
}

.procurement-order-create-workspace {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(460px, 1.25fr);
    gap: 12px;
    flex: 1;
    min-height: 0;
    min-width: 800px;
}

.procurement-order-create-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
    overflow: hidden;
}

.procurement-order-create-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--proc-line);
    background: var(--proc-surface-alt);
}

.procurement-order-create-panel-header h3 {
    margin: 0;
    font-size: var(--proc-fs-base);
    line-height: 1.3;
}

.procurement-order-create-panel-header span {
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
    white-space: nowrap;
}

.procurement-order-create-grid {
    min-height: 0;
    max-height: min(52vh, 500px);
    overflow: auto;
}

/* Kabul kaydı diyaloğu aynı iki bölmeli yüzeyi kullanır. Tek farkı oran: sağdaki
   kalem tablosunda dokuz sütun var (miktarlar, red sebebi, hızlı işlem), o yüzden
   sipariş diyaloğundakinden belirgin biçimde daha geniş olması gerekiyor. */
.procurement-delivery-create-workspace {
    grid-template-columns: minmax(260px, 0.65fr) minmax(700px, 2.35fr);
}

/* Sağ bölmede tablo değil, form + tablo birlikte kayar; grid'in tablolar için
   yazılmış hizalaması burada nefes payı ister. */
.procurement-delivery-create-form {
    padding: 8px 10px;
}

.procurement-delivery-create-subtitle {
    margin-bottom: 8px;
}

/* Kabul DÜZENLEME diyaloğu tek bölmelidir (kayıt zaten seçili, sipariş listesine
   gerek yok). Gövde kendi içinde kayar; düğme şeridi diyaloğun altında sabit
   kalır, aksi hâlde uzun kalem listesinde Kaydet ekrandan çıkardı. */
.procurement-delivery-edit-dialog {
    display: flex;
    flex-direction: column;
    min-height: min(68vh, 700px);
}

.procurement-delivery-edit-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.procurement-order-create-grid .proc-modern-table { min-width: 100%; }

.procurement-order-create-date {
    width: 180px;
    margin-top: 10px;
    margin-bottom: 0;
}

.procurement-order-create-direct-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    border-top: 1px solid var(--proc-line);
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
}

/* Teklif bağımsız sipariş seçildiğinde: teklif satırlarında radyo işareti yok,
   seçimin nerede olduğu başka türlü görünmezdi. */
.procurement-order-create-direct-action.is-selected {
    background: var(--proc-accent-wash);
    color: var(--proc-ink);
}
.procurement-order-create-direct-action strong { color: var(--proc-accent-strong); }

/* İki kısa alanı yan yana koyar (sipariş durumu + faturalama). Dar kabukta
   tek kolona düşer; alanların kendi alt boşluğu satır arası görevini görür. */
.procurement-status-dialog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
}

@media (max-width: 520px) {
    .procurement-status-dialog-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Diyaloglardaki Radzen kontrolleri (dropdown, numeric, textarea, buton).
   Modülün yoğunluk kuralları .procurement-grid / .procurement-toolbar
   kapsamındaydı; diyaloglar kapsam dışında kaldığı için Radzen'in material
   ölçüsüyle (--rz-input-height 3.375rem, 1rem font) çiziliyor, kabuğa
   sığmıyordu. Grid filtre satırındaki kalıbın aynısı: tema değişkenlerini
   diyalog kapsamında modül bütçesine indiriyoruz.

   Kalem giriş satırı (.proc-item-form) bunu bilerek eziyor: o alan altındaki
   kalem gridiyle aynı ölçüde (--proc-h-row) durur, kuralı bu dosyada daha
   sonra geldiği için kazanır. */
.procurement-dialog,
.procurement-status-dialog,
.procurement-order-doc {
    --rz-input-height: var(--proc-h-control);
    --rz-input-line-height: calc(var(--proc-h-control) - 2px);
    --rz-input-font-size: var(--proc-fs-sm);
    --rz-input-padding-block: 0;
    --rz-input-padding-inline: 7px;
    --rz-input-border-radius: var(--proc-radius);
    --rz-numeric-line-height: calc(var(--proc-h-control) - 2px);
    --rz-numeric-input-padding-block: 0;
    --rz-numeric-input-padding-inline: 7px;
    --rz-icon-size: 14px;
}

.procurement-dialog .rz-dropdown,
.procurement-dialog .rz-inputtext,
.procurement-dialog .rz-textbox,
.procurement-dialog .rz-numeric,
.procurement-dialog .rz-datepicker > .rz-inputtext,
.procurement-status-dialog .rz-dropdown,
.procurement-status-dialog .rz-inputtext,
.procurement-status-dialog .rz-textbox,
.procurement-status-dialog .rz-numeric,
.procurement-status-dialog .rz-datepicker > .rz-inputtext,
.procurement-order-doc .rz-dropdown,
.procurement-order-doc .rz-inputtext,
.procurement-order-doc .rz-textbox,
.procurement-order-doc .rz-numeric,
.procurement-order-doc .rz-datepicker > .rz-inputtext {
    width: 100%;
    min-height: var(--proc-h-control);
    height: var(--proc-h-control);
    border-radius: var(--proc-radius);
    font-size: var(--proc-fs-sm);
}

.procurement-dialog .rz-dropdown-label,
.procurement-dialog .rz-dropdown-trigger,
.procurement-dialog .rz-numeric input,
.procurement-status-dialog .rz-dropdown-label,
.procurement-status-dialog .rz-dropdown-trigger,
.procurement-status-dialog .rz-numeric input,
.procurement-order-doc .rz-dropdown-label,
.procurement-order-doc .rz-dropdown-trigger,
.procurement-order-doc .rz-numeric input {
    height: calc(var(--proc-h-control) - 2px);
    line-height: calc(var(--proc-h-control) - 2px);
    padding-block: 0;
    font-size: var(--proc-fs-sm);
}

/* Textarea yüksekliği Rows ile geliyor; satır yüksekliğini bütçeye çekmek
   üç satırı ~54px'e indirir (varsayılan tema ~90px çiziyordu). */
.procurement-dialog .rz-textarea,
.procurement-status-dialog .rz-textarea {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 4px 7px;
    border-radius: var(--proc-radius);
    font-size: var(--proc-fs-sm);
    line-height: 1.35;
    resize: vertical;
}

.procurement-dialog .rz-button,
.procurement-status-dialog .rz-button,
.procurement-order-doc .rz-button {
    min-height: var(--proc-h-control);
    height: var(--proc-h-control);
    padding: 0 10px;
    border-radius: var(--proc-radius);
    font-size: var(--proc-fs-base);
    line-height: calc(var(--proc-h-control) - 2px);
}

.procurement-dialog .rz-button .rzi,
.procurement-status-dialog .rz-button .rzi,
.procurement-order-doc .rz-button .rzi {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Boşluk yalnızca metinli düğmede; simge-tek düğmede simgeyi sola kaydırırdı. */
.procurement-dialog .rz-button .rz-button-icon-left,
.procurement-status-dialog .rz-button .rz-button-icon-left {
    margin-inline-end: 4px;
}

.procurement-dialog-field-wide,
.procurement-flow-dialog-field-wide,
.proc-modal .proc-span-2 { grid-column: 1 / -1; }

.procurement-dialog-field label,
.procurement-flow-dialog-field label,
.procurement-status-dialog-field label {
    display: block;
    margin-bottom: 2px;
    color: #4d5d66;
    font-size: var(--proc-fs-sm);
    font-weight: 600;
}

/* Zorunlu alan yıldızı. Kural payreg-fld için zaten vardı ama diyalog alanlarında yoktu;
   aynı işaret iki kabukta iki farklı renkte görünüyordu. Tek yerde tanımlanır. */
.procurement-dialog-field label .req,
.procurement-flow-dialog-field label .req,
.procurement-status-dialog-field label .req { color: var(--proc-danger); }

.procurement-flow-dialog-field input,
.procurement-flow-dialog-field select,
.procurement-flow-dialog-field textarea,
.procurement-flow-dialog td input,
.procurement-flow-dialog td select {
    width: 100%;
    padding: 0 7px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    font-size: var(--proc-fs-sm);
}

.procurement-flow-dialog-field input,
.procurement-flow-dialog-field select {
    height: var(--proc-h-control);
    min-height: var(--proc-h-control);
}

.procurement-flow-dialog td input,
.procurement-flow-dialog td select {
    height: var(--proc-h-row);
    min-height: var(--proc-h-row);
    padding: 0 4px;
}

.procurement-flow-dialog-textarea { min-height: 60px; padding: 5px 7px; resize: vertical; }

/* Kaldırılan bir alanın yerine geçen açıklama (talep akışında "Onay Kapsamı").
   Kontrol satırının yüksekliğini taklit eder ki komşu alanların hizası bozulmasın. */
.procurement-flow-dialog-field .procurement-flow-dialog-hint {
    display: block;
    font-size: 11px;
    line-height: 1.35;
    color: var(--proc-muted, #6b7280);
}

/* İşaret kutulu alan ("Aktif"). Alanın iki ortak kuralı bu kutuyu bozuyordu:
   - `.procurement-flow-dialog-field label { display: block }` — özgüllüğü daha yüksek
     olduğu için etiketi bloka çeviriyor, yazıyı kutunun altına düşürüyordu;
   - `.procurement-flow-dialog-field input { width: 100%; height: kontrol yüksekliği }`
     kutuyu alan genişliğinde dev bir dikdörtgene çeviriyordu.
   Seçiciler o kuralları geçecek özgüllükte yazıldı; ölçü modülün diğer işaret
   kutularıyla aynı 13px, yani 11px'lik etiket yazısıyla orantılı. */
.procurement-flow-dialog-field label.procurement-flow-dialog-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    cursor: pointer;
}

.procurement-flow-dialog-field .procurement-flow-dialog-check input[type="checkbox"] {
    flex: none;
    width: 13px;
    height: 13px;
    min-height: 13px;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    accent-color: var(--proc-accent);
}

.procurement-flow-dialog-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 10px 0 6px;
}

.procurement-flow-dialog .proc-inline-number { width: 68px; }

.procurement-dialog-error,
.procurement-flow-dialog-error,
.procurement-status-dialog-error {
    margin-top: 8px;
    color: var(--proc-danger);
    font-size: var(--proc-fs-sm);
}

.procurement-dialog-actions,
.procurement-flow-dialog-actions,
.procurement-status-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--proc-gap-sm);
    margin-top: 10px;
    flex-wrap: wrap;
}

/* Talep diyaloğu düzeni */
.procurement-dialog-context { margin-bottom: 8px; }

.request-info-row {
    display: grid;
    grid-template-columns: 20fr 18fr 10fr;
    gap: 12px;
}

.amount-row {
    display: grid;
    grid-template-columns: 20fr 8fr 8fr;
    gap: 12px;
    align-items: end;
}

.request-info-row,
.amount-row,
.procurement-summary { grid-column: 1 / -1; }

.procurement-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.summary-item {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.summary-label { font-weight: 600; }

.summary-value {
    min-width: 160px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.procurement-product-editor {
    display: flex;
    gap: var(--proc-gap-sm);
    align-items: center;
}

.procurement-product-editor .rz-textbox { flex: 1; min-width: 0; }

/* Kalem giriş satırındaki ürün alanı: metin kutusu + Katalog + Kataloğa Ekle.
   Başlıktaki ayrı "Ürün veya Hizmet" alanı kaldırıldığı için seçim buraya taşındı.
   Düğmeler daralmaz; yer metin kutusundan alınır. */
.proc-item-product {
    display: flex;
    gap: var(--proc-gap-sm);
    align-items: center;
    min-width: 0;
}

.proc-item-product .rz-textbox { flex: 1 1 auto; min-width: 0; }
.proc-item-product .rz-button { flex: 0 0 auto; }

/* Yazılan ürün katalogta yoksa alanın altında çıkan uyarı şeridi.
   Engelleyici değil — talep katalogsuz da kaydedilebilir. */
.proc-catalog-hint {
    margin-top: 4px;
    padding: 5px 8px;
    border-left: 3px solid var(--proc-warn, #d98324);
    border-radius: 3px;
    background: rgba(217, 131, 36, 0.08);
    color: var(--proc-text-muted, #5b6470);
    font-size: 12px;
    line-height: 1.45;
}

.proc-catalog-hint b { color: var(--proc-text, #22282f); }

/* ── Ödeme listesi: paket grup başlığı ──────────────────────────────────
   "Tüm ödeme kayıtları" görünümünde satırlar ödeme talimat paketine göre
   gruplanır; bu satır grubun başlığıdır (paket no, durum, satır sayısı, toplam). */
.payapp-grid tr.payapp-group td {
    background: var(--proc-surface-2, #f4f6f8);
    border-top: 2px solid var(--proc-line, #d7dde3);
    font-size: 12.5px;
}

.payapp-group-status {
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 9px;
    background: rgba(26, 145, 136, 0.14);
    color: #14655e;
    font-size: 11px;
}

.payapp-group-count {
    margin-left: 8px;
    color: var(--proc-text-muted, #5b6470);
    font-size: 11.5px;
}

/* ── Ödeme Onayları: paket satırında "Paketi Onayla" ────────────────────
   Durum rozetinin sağında. Küçük boy (22px): satırdaki ikon düğmeleriyle aynı
   yükseklik, paket satırını şişirmez. Pasifken fare olayı SARMALAYICIYA düşer
   ki "detay açılınca onay aktif olur" ipucu her tarayıcıda görünsün. */
.payapp-status-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.payapp-approve-wrap {
    display: inline-flex;
}

.payapp-approve-btn {
    display: inline-flex;
    align-items: center;
    height: var(--proc-h-control-sm);
    padding: 0 9px;
    border: 1px solid var(--proc-accent);
    border-radius: var(--proc-radius);
    background: var(--proc-accent);
    color: #fff;
    font-family: var(--proc-font);
    font-size: var(--proc-fs-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.payapp-approve-btn:hover:not(:disabled) {
    background: var(--proc-accent-strong);
    border-color: var(--proc-accent-strong);
}

.payapp-approve-btn:disabled {
    opacity: 0.45;
    pointer-events: none;
}

.payapp-approve-wrap:has(.payapp-approve-btn:disabled) {
    cursor: not-allowed;
}

/* ── Ayar paneli (katalog kod şablonu) ───────────────────────────────── */
.procurement-settings-panel {
    max-width: 720px;
    padding: 14px 16px;
}

.procurement-settings-lead {
    margin: 0 0 14px;
    color: var(--proc-text-muted, #5b6470);
    font-size: 13px;
    line-height: 1.5;
}

.procurement-field-hint {
    display: block;
    margin-top: 3px;
    color: var(--proc-text-muted, #5b6470);
    font-size: 11.5px;
}

.procurement-settings-preview {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin: 12px 0 16px;
    padding: 8px 12px;
    border-radius: 4px;
    background: var(--proc-surface-2, #f4f6f8);
}

.procurement-settings-preview .k {
    color: var(--proc-text-muted, #5b6470);
    font-size: 12px;
}

.procurement-settings-preview b {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 15px;
    letter-spacing: 0.3px;
}

.procurement-settings-dirty {
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(217, 131, 36, 0.16);
    color: #8a5209;
    font-size: 11px;
}

.procurement-settings-tokens {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 12px;
    margin: 0 0 14px;
    font-size: 12.5px;
}

.procurement-settings-tokens dt {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-weight: 600;
    white-space: nowrap;
}

.procurement-settings-tokens dd {
    margin: 0;
    color: var(--proc-text-muted, #5b6470);
}

.procurement-settings-tokens code,
.procurement-settings-note code {
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--proc-surface-2, #f4f6f8);
    font-size: 11.5px;
}

.procurement-settings-note {
    margin: 0 0 16px;
    color: var(--proc-text-muted, #5b6470);
    font-size: 12.5px;
    line-height: 1.55;
}

.procurement-settings-actions {
    display: flex;
    gap: var(--proc-gap-sm, 8px);
}

.procurement-readonly-amount {
    min-height: var(--proc-h-control);
    padding: 5px 0;
    background: transparent;
    font-variant-numeric: tabular-nums;
}

/* Katalog benzer kalem kutusu */
.procurement-similar-items {
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface-alt);
}

.procurement-similar-heading { margin-bottom: 5px; color: var(--proc-ink-soft); font-size: var(--proc-fs-h3); font-weight: 700; }
.procurement-similar-loading { margin-left: 6px; color: var(--proc-muted); font-size: var(--proc-fs-sm); font-weight: 400; }
.procurement-similar-duplicate { margin-bottom: 5px; color: var(--proc-danger); font-size: var(--proc-fs-sm); font-weight: 600; }
.procurement-similar-empty { color: var(--proc-muted); font-size: var(--proc-fs-sm); }

.procurement-similar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    border-top: 1px solid var(--proc-line-soft);
}

.procurement-similar-item:first-of-type { border-top: 0; }
.procurement-similar-item strong,
.procurement-similar-item span { display: block; }
.procurement-similar-item span { margin-top: 1px; color: var(--proc-muted); font-size: var(--proc-fs-sm); }

/* Elle yazılmış modallar (kullanıcı / şifre sıfırlama panelleri) */
.proc-modal-backdrop,
.proc-reset-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.42);
}

.proc-modal,
.proc-reset-modal {
    width: min(780px, 100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius-lg);
    background: var(--proc-surface);
    box-shadow: var(--proc-shadow-pop);
}

.proc-modal-wide { width: min(1100px, 100%); }

.proc-modal .proc-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
}

.proc-modal .proc-form-grid label { display: grid; gap: 3px; }
.proc-modal .proc-form-grid .proc-admin-field { width: 100%; }

.proc-modal .proc-toggle {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface-alt);
}

.proc-modal-note,
.proc-reset-note { margin: 8px 10px 0; }

/* == 12 Durumlar: boş / hata / yükleniyor =================================
   Eskiden bazı ekranlar Bootstrap spinner'ı, bazıları düz metin gösteriyordu.
   Standart: liste yüklenirken .proc-skeleton, veri yoksa .proc-empty. */

.proc-modern-empty,
.proc-empty,
.portal-empty,
.payapp-empty,
.paypack-empty,
.approval-queue-empty,
.proc-admin-message,
.proc-reset-message,
.proc-branding-message {
    padding: 14px 12px;
    color: var(--proc-muted);
    font-size: var(--proc-fs-base);
    line-height: 1.5;
    text-align: center;
}

.proc-modern-empty { text-align: left; }

/* Tablo içinde "kayıt yok" satırı — hücre yükseklik/dolgu kuralını ezer. */
.proc-shell td.proc-empty,
.rz-dialog td.proc-empty {
    height: auto;
    padding: 14px 8px;
    color: var(--proc-muted);
    text-align: center;
    white-space: normal;
}

.procurement-error,
.proc-error,
.portal-error,
.payapp-error,
.paypack-error,
.approval-queue-error,
.proc-admin-message-danger {
    padding: 8px 10px;
    border: 1px solid #f0c2c2;
    border-radius: var(--proc-radius);
    background: #fff6f6;
    color: var(--proc-danger);
    font-size: var(--proc-fs-base);
    text-align: left;
}

.proc-admin-message-warning,
.proc-reset-message.warn,
.proc-branding-message.warn { color: var(--proc-warning); }

/* Yükleniyor: iskelet satırlar. Yükseklik gerçek satırla aynı olduğu için
   veri geldiğinde sayfa zıplamaz. */
.proc-loading,
.payapp-loading,
.paypack-loading,
.approval-queue-loading-card {
    display: grid;
    gap: 1px;
    padding: 0;
    background: var(--proc-surface);
}

.proc-skeleton-row {
    height: var(--proc-h-row);
    border-bottom: 1px solid var(--proc-line-soft);
    background: linear-gradient(90deg,
        var(--proc-surface-soft) 0%,
        #eef2f7 40%,
        var(--proc-surface-soft) 80%);
    background-size: 300% 100%;
    animation: proc-skeleton-shimmer 1.2s ease-in-out infinite;
}

.proc-skeleton-row:nth-child(2) { animation-delay: 0.08s; }
.proc-skeleton-row:nth-child(3) { animation-delay: 0.16s; }
.proc-skeleton-row:nth-child(4) { animation-delay: 0.24s; }
.proc-skeleton-row:nth-child(5) { animation-delay: 0.32s; }
.proc-skeleton-row:nth-child(6) { animation-delay: 0.40s; }

.proc-skeleton-bar {
    height: var(--proc-h-metric);
    border-radius: var(--proc-radius);
    background: linear-gradient(90deg,
        var(--proc-surface-soft) 0%,
        #eef2f7 40%,
        var(--proc-surface-soft) 80%);
    background-size: 300% 100%;
    animation: proc-skeleton-shimmer 1.2s ease-in-out infinite;
}

@keyframes proc-skeleton-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .proc-skeleton-row,
    .proc-skeleton-bar {
        animation: none;
        background: var(--proc-surface-soft);
    }
}

/* == 13 Yardımcı sınıflar =================================================
   Sayfa içi style="" kullanımlarının yerini alır. */

.proc-u-row { display: flex; align-items: center; gap: var(--proc-gap-sm); flex-wrap: wrap; }
.proc-u-row-top { align-items: flex-start; }
.proc-u-row-between { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.proc-u-col { display: grid; gap: var(--proc-gap-sm); }
.proc-u-right { margin-left: auto; }
.proc-u-end { justify-self: end; }
.proc-u-start { justify-content: flex-start; }
.proc-u-justify-end { justify-content: flex-end; }
.proc-u-wrap { flex-wrap: wrap; }
.proc-u-grow { flex: 1 1 auto; min-width: 0; }
.proc-u-nowrap { white-space: nowrap; }
.proc-u-inline { display: inline-block; }
.proc-u-full { grid-column: 1 / -1; }
.proc-u-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.proc-u-muted { color: var(--proc-muted); }
.proc-u-strong { font-weight: 700; }
.proc-u-sm { font-size: var(--proc-fs-sm); }
.proc-u-xs { font-size: var(--proc-fs-xs); }
.proc-u-good { color: var(--proc-good); }
.proc-u-warn { color: var(--proc-warning); }
.proc-u-bad { color: var(--proc-danger); }

/* Yan panellerde tekrar eden "etiket → değer → açıklama" üçlüsü.
   Eskiden her satırda ayrı style="" ile yazılıyordu. */
.proc-u-value { margin-top: 2px; font-weight: 700; line-height: 1.3; }
.proc-u-meta { margin-top: 3px; color: var(--proc-muted); font-size: var(--proc-fs-sm); line-height: 1.35; }

/* Satır içi sol boşluk. İki ekranda (Banka Hesapları, Masraf Merkezleri) kullanılıyordu
   ama hiç tanımlı değildi; sınıf sessizce hiçbir şey yapmıyordu. */
.proc-u-ml-1 { margin-left: 4px; }
.proc-u-mr-1 { margin-right: 6px; }

/* Ağaç görünümü — masraf merkezi kırılımları.
   Girinti satır içinde çizilir, ayrı bir kolon açılmaz: ayrı kolon, arama açıkken ağaç
   kırıldığında boş bir sütun bırakırdı. Derinlik sunucudan (Depth) gelir. */
.proc-u-tree-indent { display: inline-block; }
.proc-u-tree-branch { color: #9aa5b4; margin-right: 4px; }

.proc-u-mt-0 { margin-top: 0; }
.proc-u-mt-1 { margin-top: 4px; }
.proc-u-mt-2 { margin-top: 8px; }
.proc-u-mt-3 { margin-top: 12px; }
.proc-u-mb-1 { margin-bottom: 4px; }
.proc-u-mb-2 { margin-bottom: 8px; }
.proc-u-pt-2 { padding-top: 8px; }
.proc-u-p-0 { padding: 0; }
.proc-u-m-0 { margin: 0; }

.proc-u-stack-tight { display: grid; gap: 4px; }
.proc-u-inline-badges { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }

/* Kart başlığı bir panelin içinde ikinci kez kullanıldığında çerçevesiz olur. */
.proc-modern-card-header.plain {
    min-height: 0;
    padding: 0 0 6px;
    border-bottom: 0;
}

/* Seçili teklif satırı */
.proc-quote-row-selected { background: var(--proc-accent-wash); }

/* Seçilemeyen kaynak satırı — satır GİZLENMEZ, soluklaşır. Onaylı teklifin listeden
   sessizce kaybolması "teklifim nerede" sorusunu doğuruyordu; neden sütunda yazar. */
.proc-quote-row-blocked {
    opacity: .55;
    cursor: not-allowed;
}

.proc-quote-row-blocked:hover { background: transparent; }

/* Durum tanımları ekranı — renk yalnızca veriden gelir, biçim buradan. */
.proc-def-color-chip { color: #fff; }

.proc-def-color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    vertical-align: middle;
}

.proc-def-color-input {
    width: 32px;
    height: var(--proc-h-control);
    padding: 1px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
}

/* Sayfaya özel filtre şeridi kolon şablonları.

   Kolon payları alanın İÇERİĞİNE göre verilir: serbest arama en geniş payı alır,
   uzun seçenek metni taşıyan açılır listeler (tedarikçi, kaynak) orta, kısa
   sözcüklü olanlar (öncelik, geçerlilik) en dar payı. Eşit 1fr dağıtımı dar
   listelerde boşluk, uzun olanlarda kırpma üretiyordu.

   Buton ve kayıt sayısı .proc-filter-actions içinde toplanır; bunların grid'e
   doğrudan çocuk olması, şart bağlı "Filtreyi Temizle" gizlendiğinde sağdaki
   her şeyi bir kolon kaydırıyordu. */
.proc-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--proc-gap-sm);
    min-width: 0;
}

/* Kolon ölçüleri fr yerine SABİT: fr, artan yeri kolonlara dağıtarak şeridi ekran
   genişliğine yayıyordu. İçeriği 120px olan bir liste 300px'e uzamasın diye kolonlar
   en uzun seçenek metnine göre ölçülür; artan yer şeridin sonunda boş kalır
   (justify-content: start, .proc-modern-filter-grid üzerinde). */
.proc-filter-cols-order-create { grid-template-columns: 260px 165px auto auto; }

/* Teklif yönetimi — talep paneli: arama · teklif adedi süzgeci */
.proc-filter-cols-quote-requests { grid-template-columns: 200px 150px; }

/* Teklif yönetimi — teklif paneli: arama · durum · onay · geçerlilik · eylemler */
.proc-filter-cols-quotes { grid-template-columns: 210px 160px 160px 145px auto; }

.proc-filter-cols-3 { grid-template-columns: 230px 165px auto; }
.proc-filter-cols-2 { grid-template-columns: 230px auto; }

/* == 14 Erişilebilirlik ===================================================
   Modülde daha önce hiç focus stili yoktu; klavye ile gezinmek imkânsızdı. */

.proc-shell :focus-visible,
.rz-dialog :focus-visible {
    outline: 2px solid var(--proc-focus);
    outline-offset: 1px;
    border-radius: var(--proc-radius);
}

.proc-shell :focus:not(:focus-visible) {
    outline: none;
}

/* Yalnızca ekran okuyucular için */
.proc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* == 15 Duyarlı kurallar ================================================== */

/* Sabit piksel değil değişken ezilir: kullanıcının sürükleyerek seçtiği genişlik
   inline custom property olarak yazıldığı için buradaki değeri geçersiz kılar. */
@media (max-width: 1400px) {
    .proc-modern-grid-layout { --proc-side-w: 330px; }
    .proc-modern-grid-layout.compact-right { --proc-side-w: 290px; }
}

@media (max-width: 1200px) {
    .proc-modern-grid-layout,
    .proc-modern-grid-layout.compact-right,
    .approval-queue-layout,
    .proc-dense-layout,
    .proc-dense-layout-wide,
    .proc-two-col,
    .procurement-work-area,
    .portal-grid,
    .proc-branding-layout {
        grid-template-columns: 1fr;
    }

    /* Tek kolona düşen düzende sürüklenecek bir sınır yok. */
    .proc-side-resizer {
        display: none;
    }

    .proc-modern-side-panel {
        position: static;
        max-height: none;
    }

    .portal-panel-wide {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .proc-approval-summary,
    .paypack-summary,
    .approval-queue-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .procurement-metrics,
    .portal-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    /* Dar ekranda menü grid sütunu değil, üste binen katmandır. */
    .proc-shell-body { grid-template-columns: 1fr; }
    .proc-shell-settings-panel { right: -40px; }
    .proc-shell-sidebar { display: none; }

    .proc-shell:not(.proc-shell-collapsed) .proc-shell-sidebar {
        display: flex;
        position: fixed;
        top: var(--proc-topbar-h);
        left: 0;
        bottom: 0;
        z-index: 50;
        width: var(--proc-sidebar-w);
        box-shadow: 18px 0 40px rgba(15, 23, 42, 0.16);
    }

    .proc-modern-filter-grid,
    .proc-modern-card-grid,
    .proc-modern-two-col,
    .proc-modern-note-grid,
    .proc-modern-kpis,
    .proc-approval-summary,
    .proc-receipt-metrics,
    .procurement-metrics,
    .portal-kpis,
    .portal-deep-kpis,
    .approval-queue-summary,
    .payapp-summary,
    .paypack-summary,
    .proc-admin-metrics,
    .proc-reset-metrics,
    .proc-permission-items,
    .proc-modal .proc-form-grid,
    .proc-password-form,
    .proc-branding-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .proc-filter-cols-order-create,
    .proc-filter-cols-quote-requests,
    .proc-filter-cols-quotes,
    .proc-filter-cols-3,
    .proc-filter-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .proc-modern-page,
    .proc-screen,
    .procurement-page,
    .procurement-portal,
    .approval-queue-shell,
    .payapp-shell,
    .paypack-shell { padding: 8px; }

    .proc-modern-header,
    .proc-screen-head,
    .procurement-page-header,
    .portal-header,
    .approval-queue-head,
    .payapp-head,
    .paypack-head {
        flex-direction: column;
        align-items: stretch;
    }

    .proc-modern-actions,
    .proc-head-actions,
    .procurement-page-actions,
    .portal-actions,
    .approval-queue-actions,
    .payapp-actions,
    .paypack-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .proc-toolbar,
    .procurement-toolbar,
    .payapp-tools,
    .paypack-tools,
    .approval-queue-tools {
        flex-direction: column;
        align-items: stretch;
    }

    .payapp-searchbox,
    .paypack-searchbox,
    .approval-queue-searchbox,
    .proc-admin-search { width: 100%; flex: 1 1 auto; }

    /* Şerit dikeye döndüğünde içerik ölçüsündeki sabit genişlikler anlamını yitirir;
       yukarıdaki kurallar özgüllükte kazandığı için burada tek tek geri alınır.
       İşaret kutusu dışarıda bırakılır — o her ölçekte 13px kalmalı. */
    .payapp-tools .payapp-filter,
    .payapp-tools .payapp-searchbox { width: 100%; flex: 1 1 auto; }

    .proc-toolbar input:not([type="checkbox"]),
    .proc-toolbar select,
    .procurement-toolbar input:not([type="checkbox"]),
    .procurement-toolbar select {
        width: 100%;
        min-width: 0;
        max-width: none;
        flex: 1 1 auto;
    }

    .proc-record,
    .procurement-record-count,
    .proc-admin-record,
    .proc-reset-record { margin-left: 0; }

    .proc-modern-filter-grid,
    .proc-modern-card-grid,
    .proc-modern-two-col,
    .proc-modern-note-grid,
    .proc-modern-kpis,
    .proc-modern-stat-grid,
    .proc-requests-summary-grid,
    .proc-approval-summary,
    .proc-receipt-metrics,
    .procurement-metrics,
    .portal-kpis,
    .portal-deep-kpis,
    .approval-queue-summary,
    .payapp-summary,
    .paypack-summary,
    .proc-admin-metrics,
    .proc-reset-metrics,
    .proc-permission-items,
    .proc-modal .proc-form-grid,
    .proc-password-form,
    .proc-branding-form,
    .procurement-dialog-fields,
    .procurement-flow-dialog-fields,
    .request-info-row,
    .amount-row,
    .proc-filter-cols-order-create,
    .proc-filter-cols-quote-requests,
    .proc-filter-cols-quotes,
    .proc-filter-cols-3,
    .proc-filter-cols-2,
    .proc-items-layout {
        grid-template-columns: 1fr;
    }

    /* Dar ekranda başlık ve "Satır Ekle" yan yana tek satıra döner, grid alta iner. */
    .proc-items-aside {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .procurement-dialog,
    .procurement-status-dialog,
    .procurement-flow-dialog,
    .procurement-catalog-selection-dialog { min-width: 0; }

    .span-2, .span-3, .span-4, .span-6, .span-8, .span-12 { grid-column: span 12; }

    .proc-modal-actions-space,
    .proc-reset-actions-space { flex-direction: column; align-items: stretch; }

    .approval-queue-spacer,
    .payapp-spacer,
    .paypack-spacer { display: none; }
}

/* ── Faz 14 — Dashboard, Skor Kartı ve Harcama Analitiği ────────────────── */

.proc-report-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}

.proc-metric { margin-bottom: 10px; }
.proc-metric:last-child { margin-bottom: 0; }

.proc-metric-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    margin-bottom: 4px;
}

.proc-metric-head span:first-child { font-weight: 600; }
.proc-metric-head span:last-child { color: var(--proc-muted, #6b7280); white-space: nowrap; }

.proc-metric-track {
    height: 8px;
    border-radius: 4px;
    background: var(--proc-surface-alt, #eef1f5);
    overflow: hidden;
}

.proc-metric-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--proc-accent, #2563eb);
}

.proc-metric-note {
    margin-top: 3px;
    font-size: 10px;
    color: var(--proc-muted, #6b7280);
}

/* Segmentli seçici — ham <select> yerine */
.proc-seg {
    display: inline-flex;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    overflow: hidden;
}

.proc-seg button {
    height: var(--proc-h-control);
    padding: 0 10px;
    border: 0;
    border-right: 1px solid var(--proc-line-soft);
    background: var(--proc-surface);
    color: var(--proc-ink-soft);
    font-family: inherit;
    font-size: var(--proc-fs-sm);
    line-height: 1;
    cursor: pointer;
}

.proc-seg button:last-child { border-right: 0; }
.proc-seg button:hover { background: var(--proc-surface-soft); }

.proc-seg button.is-active {
    background: var(--proc-accent-wash);
    color: var(--proc-accent-strong);
    font-weight: 650;
}

/* Sıralı çubuk listesi — magnitude uzunlukla kodlanır, renk yedek kanaldır.
   Veri ucu 4px yuvarlatılır, taban köşesi kare kalır. */
.proc-rank {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 9px 10px;
}

.proc-rank-row {
    display: grid;
    grid-template-columns: minmax(84px, 1.05fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: 8px;
}

.proc-rank-name {
    font-size: var(--proc-fs-sm);
    color: var(--proc-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.proc-rank-track {
    height: 10px;
    border-radius: 2px;
    background: var(--proc-surface-soft);
}

.proc-rank-fill {
    height: 100%;
    min-width: 2px;
    border-radius: 0 4px 4px 0;
    background: var(--proc-accent);
}

.proc-rank-val {
    font-size: var(--proc-fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--proc-ink);
    white-space: nowrap;
}

.proc-rank-val small {
    margin-left: 6px;
    color: var(--proc-muted);
    font-size: var(--proc-fs-xs);
}

/* SVG sütun grafiği — aylık harcama trendi.
   viewBox 1000×180 (≈5,5:1): SVG yüksekliği genişlikle ölçeklendiği için
   yükseklik yalnızca en-boy oranından kısılabilir. Sabit bir max-height
   verilmez; meet ölçeklemesi grafiği kartın ortasına sıkıştırırdı. */
.proc-chart-wrap { padding: 4px 6px 0; }

.proc-chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.proc-chart-gridline {
    stroke: var(--proc-line-soft);
    stroke-width: 1;
}

/* Sıfır çizgisi kılavuzlardan koyudur: sütunlar bir tabana oturur. */
.proc-chart-axis {
    stroke: var(--proc-line);
    stroke-width: 1;
}

.proc-bar {
    fill: var(--proc-accent);
    fill-opacity: 0.85;
    transition: fill 90ms ease, fill-opacity 90ms ease;
}

.proc-hv:hover .proc-bar {
    fill: var(--proc-accent-strong);
    fill-opacity: 1;
}

/* Ay bandı: imleç ayın herhangi bir yerindeyken sütun değil, tüm ay vurgulanır.
   İnce sütunu veya sıfır ayı imleçle avlamak gerekmez. */
.proc-hv-band {
    fill: var(--proc-accent);
    fill-opacity: 0;
    transition: fill-opacity 90ms ease;
}

.proc-hv:hover .proc-hv-band { fill-opacity: 0.06; }

.proc-chart-tick {
    fill: var(--proc-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* Yıl yalnızca değiştiğinde (ilk ay ve her Ocak) ayın altına düşer. */
.proc-chart-year {
    fill: var(--proc-muted);
    font-size: 10px;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

.proc-chart-peak {
    fill: var(--proc-ink);
    font-size: 12px;
    font-weight: 650;
    transition: opacity 90ms ease;
}

/* Etiketler vuruş alanı değildir: hover yalnızca ay şeridine bağlıdır. */
.proc-chart-tick,
.proc-chart-year,
.proc-chart-peak { pointer-events: none; }

.proc-chart-hit { fill: transparent; }

/* Hover katmanı — değer sütunun üstünde okunur biçimde belirir.
   Değer tooltip'e mahkûm değildir: aynı sayı tablo eşleniğinde de vardır. */
.proc-hv-show {
    opacity: 0;
    pointer-events: none;
    transition: opacity 90ms ease;
}

.proc-hv:hover .proc-hv-show { opacity: 1; }

/* Hover sırasında sabit tepe etiketi susar; iki değer üst üste binmez. */
.proc-chart:hover .proc-chart-peak { opacity: 0; }

.proc-hv-tip {
    fill: var(--proc-ink);
    font-size: 12px;
    font-weight: 650;
    /* Sütun ve gridline üzerinde okunur kalsın diye yüzey rengiyle
       çevrelenir; arkasına dikdörtgen çizmeye gerek kalmaz. */
    stroke: var(--proc-surface);
    stroke-width: 3;
    paint-order: stroke fill;
}

/* == Dashboard widget ızgarası ===========================================
   Dashboard'da liste yok; yoğunluk bütçesi (listenin üst üçte birde başlaması)
   burada geçerli değildir. Widget'lar biraz daha nefes alır, ölçüler yine
   --proc-* tokenlarından türer. */

.proc-hs-page { gap: var(--proc-gap); }

/* Tek filtre şeridi: aşağıdaki bütün widget'ları kapsar, kart içine filtre
   konmaz. Kaydırırken üstte kalır. */
.proc-hs-bar {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 10px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
}

.proc-hs-bar h1 {
    margin: 0;
    font-size: var(--proc-fs-h1);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.proc-hs-bar-tools {
    display: flex;
    align-items: center;
    gap: var(--proc-gap-sm);
    flex-wrap: wrap;
}

.proc-hs-scope {
    padding: 2px 7px;
    border-radius: var(--proc-radius-pill);
    background: var(--proc-accent-wash);
    color: var(--proc-accent-strong);
    font-size: var(--proc-fs-xs);
    font-weight: 650;
}

/* align-items varsayılan (stretch) kalır: aynı satırdaki widget'lar eşit
   yükseklikte olur, alt bilgi satırı margin-top:auto ile dibe yaslanır. */
.proc-hs-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--proc-gap);
}

/* Tek değer (KPI) widget'ları */
.proc-hs-kpis {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--proc-gap);
}

.proc-hs-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 10px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
    color: inherit;
    text-decoration: none;
}

/* href yoksa (yetki yoksa) kutu tıklanabilir görünmez. */
.proc-hs-kpi[href]:hover {
    border-color: var(--proc-accent);
    background: var(--proc-accent-wash);
}

.proc-hs-kpi-label {
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
    line-height: 1.2;
}

.proc-hs-kpi-value {
    color: var(--proc-ink);
    font-size: 19px;
    font-weight: 680;
    line-height: 1.15;
    letter-spacing: -0.02em;
    /* Büyük tek sayı: orantılı rakam. tabular-nums yalnızca sütunlarda. */
    font-variant-numeric: proportional-nums;
}

.proc-hs-kpi.is-hero .proc-hs-kpi-value { font-size: 26px; }

.proc-hs-kpi-value.is-alert { color: var(--proc-danger); }

.proc-hs-kpi-foot {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    min-height: 13px;
}

.proc-hs-kpi-note {
    color: var(--proc-muted);
    font-size: var(--proc-fs-xs);
    line-height: 1.3;
}

/* Harcamada artış "iyi" ya da "kötü" değildir: yön oku taşır, renk değil. */
.proc-hs-delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 5px;
    border-radius: var(--proc-radius-pill);
    background: var(--proc-neutral-soft);
    color: var(--proc-neutral);
    font-size: var(--proc-fs-xs);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

/* Widget kabuğu */
.proc-hs-widget {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
}

.proc-hs-widget > .proc-tableview,
.proc-hs-widget > .proc-hs-foot { margin-top: auto; }

.proc-hs-widget > .proc-tableview + .proc-hs-foot { margin-top: 0; }

.proc-hs-grid .span-4 { grid-column: span 4; }
.proc-hs-grid .span-5 { grid-column: span 5; }
.proc-hs-grid .span-7 { grid-column: span 7; }
.proc-hs-grid .span-8 { grid-column: span 8; }

.proc-hs-foot {
    padding: 5px 10px;
    border-top: 1px solid var(--proc-line-soft);
    text-align: right;
}

.proc-hs-foot a {
    color: var(--proc-accent-strong);
    font-size: var(--proc-fs-sm);
    text-decoration: none;
}

.proc-hs-foot a:hover { text-decoration: underline; }

.proc-hs-scroll {
    max-height: 320px;
    overflow: auto;
}

/* Halka grafiği — parça/bütün, en fazla 6 dilim, kalanı "Diğer"e katlanır. */
.proc-donut-wrap {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px;
}

.proc-donut {
    display: block;
    width: 128px;
    height: 128px;
}

.proc-donut-track {
    fill: none;
    stroke: var(--proc-surface-soft);
    stroke-width: 18;
}

.proc-donut-seg {
    fill: none;
    stroke-width: 18;
    stroke-linecap: butt;
}

.proc-donut-center-value {
    fill: var(--proc-ink);
    font-size: 20px;
    font-weight: 680;
    letter-spacing: -0.02em;
}

.proc-donut-center-label {
    fill: var(--proc-muted);
    font-size: 10px;
}

/* Efsane hem kimliği hem değeri taşır: renk tek başına anlam taşımaz. */
.proc-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.proc-donut-legend li {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    font-size: var(--proc-fs-sm);
}

.proc-donut-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.proc-donut-name {
    color: var(--proc-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.proc-donut-val {
    color: var(--proc-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.proc-donut-val small {
    margin-left: 5px;
    color: var(--proc-muted);
    font-size: var(--proc-fs-xs);
}

/* Seri slotları — dolgu (stroke) ve efsane noktası aynı tokendan beslenir. */
.proc-donut-seg.proc-series-1 { stroke: var(--proc-series-1); }
.proc-donut-seg.proc-series-2 { stroke: var(--proc-series-2); }
.proc-donut-seg.proc-series-3 { stroke: var(--proc-series-3); }
.proc-donut-seg.proc-series-4 { stroke: var(--proc-series-4); }
.proc-donut-seg.proc-series-5 { stroke: var(--proc-series-5); }
.proc-donut-seg.proc-series-other { stroke: var(--proc-series-other); }

.proc-donut-dot.proc-series-1 { background: var(--proc-series-1); }
.proc-donut-dot.proc-series-2 { background: var(--proc-series-2); }
.proc-donut-dot.proc-series-3 { background: var(--proc-series-3); }
.proc-donut-dot.proc-series-4 { background: var(--proc-series-4); }
.proc-donut-dot.proc-series-5 { background: var(--proc-series-5); }
.proc-donut-dot.proc-series-other { background: var(--proc-series-other); }

@media (max-width: 1200px) {
    .proc-hs-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .proc-hs-grid .span-4,
    .proc-hs-grid .span-5,
    .proc-hs-grid .span-7,
    .proc-hs-grid .span-8 { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
    .proc-hs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .proc-hs-bar {
        position: static;
        align-items: stretch;
        flex-direction: column;
    }

    .proc-donut-wrap { grid-template-columns: 1fr; justify-items: center; }
    .proc-donut-legend { width: 100%; }
}

/* Yeniden çekim: iskelet yerine önceki içerik soluk tutulur (layout sıçraması yok). */
.proc-refetching {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 120ms ease;
}

/* Grafiğin tablo eşleniği — değerler renge/tooltip'e bağlı kalmaz. */
.proc-tableview {
    border-top: 1px solid var(--proc-line-soft);
}

.proc-tableview > summary {
    padding: 6px 10px;
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
    cursor: pointer;
    user-select: none;
}

.proc-tableview > summary:hover {
    color: var(--proc-accent-strong);
    background: var(--proc-surface-soft);
}

.proc-share {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

.proc-share-track {
    flex: 1 1 auto;
    min-width: 40px;
    max-width: 90px;
    height: 6px;
    border-radius: 3px;
    background: var(--proc-surface-alt, #eef1f5);
    overflow: hidden;
}

.proc-share-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--proc-accent, #2563eb);
}

.proc-scorecards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
}

/* Skor kartı.

   İÇ BOŞLUK: .proc-panel taban kuralı yalnızca kenarlık/zemin verir; padding'i
   .proc-panel.compact varyantı taşır. Skor kartı compact değildi, dolayısıyla
   metin kart kenarına sıfırlanıyordu. Panel kuralına dokunulmaz (onlarca ekran
   ona bağlı), boşluk kartın kendisinde tanımlanır.

   RENK: genel puanın tonu sol şeritte, metrik puanları kendi barlarında görünür.
   Ton tek başına bilgi taşımaz — puan metni ve rozeti her koşulda okunur. */
.proc-scorecard {
    padding: 12px 14px;
    border-left: 3px solid var(--proc-neutral);
    transition: box-shadow 120ms ease, border-color 120ms ease;
}

.proc-scorecard:hover {
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.09);
}

.proc-scorecard.score-good { border-left-color: var(--proc-good); }
.proc-scorecard.score-warn { border-left-color: var(--proc-warning); }
.proc-scorecard.score-bad { border-left-color: var(--proc-danger); }
.proc-scorecard.score-none { border-left-color: var(--proc-line); }

/* Başlık gövdeden ince bir ayraçla ayrılır; kart içinde ikinci bir kutu açılmaz. */
.proc-scorecard .proc-status-row {
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--proc-line);
}

.proc-scorecard .proc-metric-head span:last-child { font-weight: 600; }

.proc-scorecard .proc-metric-fill.score-good { background: var(--proc-good); }
.proc-scorecard .proc-metric-fill.score-warn { background: var(--proc-warning); }
.proc-scorecard .proc-metric-fill.score-bad { background: var(--proc-danger); }
.proc-scorecard .proc-metric-fill.score-none { background: var(--proc-line); }

/* Sayısal özetler: nötr gri yerine bilgi tonunda hap etiketler. */
.proc-scorecard-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 12px;
    font-size: 10px;
    color: var(--proc-muted, #6b7280);
}

.proc-scorecard-facts span {
    padding: 2px 8px;
    border: 1px solid var(--proc-info-soft);
    border-radius: var(--proc-radius-pill);
    background: var(--proc-info-soft);
    color: var(--proc-info);
    font-weight: 600;
}

/* == 16 Bağlamlı talep dialogu ==============================================
   Modüller arası satın alma talebi (ProcurementRequestDialog).
   Dialog iki sütunludur: ana form + politika/limit rayı. Rayın genişliği sabit,
   dar ekranda alta iner. Kart içinde kart kullanılmaz; gruplar ince ayraçla ayrılır.
   ========================================================================== */

.proc-request-dialog .proc-request-dialog-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 252px;
    gap: 0;
    align-items: start;
}

.proc-request-dialog .proc-request-dialog-main {
    min-width: 0;
    padding-right: 12px;
    display: flex;
    flex-direction: column;
    gap: var(--proc-gap, 10px);
}

/* Bağlam şeridi — RadzenAlert değil, tek satırlık ince şerit */
.proc-ctxbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--proc-accent-soft, #dbeafe);
    border-left: 3px solid var(--proc-accent, #2563eb);
    border-radius: var(--proc-radius, 3px);
    background: var(--proc-accent-wash, #eff6ff);
    font-size: var(--proc-fs-sm, 11px);
    color: var(--proc-ink-soft, #34414b);
}

.proc-ctxbar .k { color: var(--proc-muted, #6b7280); }
.proc-ctxbar b { color: var(--proc-accent-strong, #1d4ed8); font-weight: 620; }
.proc-ctxbar .sep { color: #b9c6da; }
.proc-ctxbar .ctx-summary { color: var(--proc-ink-soft, #34414b); }

/* Kayda BAĞLI OLMAYAN bağlam (sefersiz masraf). Mavi şerit "bir kayda bağlısın" diyor;
   sefersiz belgede aynı vurguyu kullanmak yanlış bilgi verirdi. Nötr ton, durumun
   geçerli ama bağsız olduğunu söyler. */
.proc-ctxbar.is-none {
    border-color: #dde4ee;
    border-left-color: #94a3b8;
    background: var(--proc-neutral-soft, #eef2f7);
}
.proc-ctxbar.is-none b { color: var(--proc-neutral, #475569); }

/* Pay toplamı göstergesi — belge diyaloğundaki sefer ilişkileri bölümü. */
.inv-balance-ok { color: var(--proc-good); font-weight: 600; font-size: var(--proc-fs-sm); }
.inv-balance-bad { color: var(--proc-danger); font-weight: 600; font-size: var(--proc-fs-sm); }

/* Oluşturma biçimi satırı */
.proc-modeline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: var(--proc-fs-sm, 11px);
}

.proc-modeline .lbl { color: var(--proc-muted, #6b7280); }

/* Bölüm başlığı — ince ayraç, kart değil */
.proc-sec-head {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--proc-line-soft, #e8edf1);
    padding-top: 7px;
}

.proc-sec-head h4 {
    margin: 0;
    font-size: var(--proc-fs-h3, 12px);
    font-weight: 640;
    color: var(--proc-ink-soft, #34414b);
}

.proc-sec-head .spacer { flex: 1; }

/* Kalemler bölümü — başlık/aksiyon solda dikey, grid hemen sağında.
   Blok, iki sütunlu form gridinin TAMAMINI kaplar; aksi halde DataGrid ikinci
   sütuna düşüp sabit kolon genişliği kadar taşıyor ve yatay kaydırma çıkıyordu. */
.proc-items-layout {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border-top: 1px solid var(--proc-line-soft, #e8edf1);
    padding-top: 7px;
}

.proc-items-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    /* Başlık gridin ilk satırıyla aynı hizada başlasın. */
    padding-top: 1px;
}

.proc-items-aside h4 {
    margin: 0;
    font-size: var(--proc-fs-h3, 12px);
    font-weight: 640;
    color: var(--proc-ink-soft, #34414b);
    white-space: nowrap;
}

/* min-width:0 kritik: olmadan grid sütunu içeriğinin doğal genişliğine kilitlenir
   ve daralmak yerine taşar. */
.proc-items-grid {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Kalem giriş satırı — listeye eklenmeden önce kalemin yazıldığı alan. */
.proc-item-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--proc-line-soft, #e8edf1);
    border-radius: var(--proc-radius, 3px);
    background: var(--proc-wash, #fafbfc);
}

/* Düzenleme modunda giriş satırı görsel olarak ayrışır — kullanıcı yeni satır
   eklemediğini, mevcut bir satırı değiştirdiğini buradan anlar. */
.proc-item-form.editing {
    border-color: var(--proc-accent, #2563eb);
    background: var(--proc-accent-wash, #eff6ff);
}

.proc-item-f {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.proc-item-f > label {
    font-size: var(--proc-fs-sm, 11px);
    color: var(--proc-muted, #6b7280);
    white-space: nowrap;
}

.proc-item-f.grow { flex: 1 1 220px; }
.proc-item-f.w-qty { flex: 0 0 84px; }
.proc-item-f.w-unit { flex: 0 0 108px; }
.proc-item-f.w-price { flex: 0 0 100px; }
/* Etiket "KDV %20" değil "%20" olduğu için dar kutu yetiyor. */
.proc-item-f.w-vat { flex: 0 0 76px; }
.proc-item-f.w-cc { flex: 0 0 150px; }

/* Giriş satırındaki Radzen kontrolleri, altındaki eklenmiş kalemler gridiyle
   aynı ölçüde çizilir: hücre yüksekliği (--proc-h-row), hücre fontu
   (--proc-fs-sm) ve aynı kenarlık rengi. Modülün yoğunluk kuralları
   .procurement-grid / .procurement-toolbar kapsamındaydı; bu form kapsam
   dışında kaldığı için Radzen'in material ölçüsüyle (input 3.375rem, 1rem
   font) çiziliyor, giriş satırı gridin iki katı yer kaplıyordu. */
.proc-item-form {
    --rz-input-height: var(--proc-h-row);
    --rz-input-line-height: calc(var(--proc-h-row) - 2px);
    --rz-input-font-size: var(--proc-fs-sm);
    --rz-input-padding-block: 0;
    --rz-input-padding-inline: 6px;
    --rz-input-border-radius: var(--proc-radius);
    --rz-numeric-line-height: calc(var(--proc-h-row) - 2px);
    --rz-numeric-input-padding-block: 0;
    /* Artır/azalt düğmeleri gizlendiği için sağda yer ayrılmaz. */
    --rz-numeric-input-padding-inline: 6px;
    --rz-icon-size: 13px;
}

.proc-item-form .rz-textbox,
.proc-item-form .rz-inputtext,
.proc-item-form .rz-numeric,
.proc-item-form .rz-dropdown {
    width: 100%;
    min-height: var(--proc-h-row);
    height: var(--proc-h-row);
    padding-block: 0;
    border: 1px solid var(--proc-line-soft, #e8edf1);
    border-radius: var(--proc-radius);
    font-size: var(--proc-fs-sm);
    line-height: calc(var(--proc-h-row) - 2px);
}

.proc-item-form .rz-dropdown-label,
.proc-item-form .rz-dropdown-trigger,
.proc-item-form .rz-numeric input {
    height: calc(var(--proc-h-row) - 2px);
    padding-block: 0;
    font-size: var(--proc-fs-sm);
    line-height: calc(var(--proc-h-row) - 2px);
}

/* 24px'lik kutuda üst üste binen artır/azalt okları tıklanamayacak kadar
   küçülüyor; grid filtre satırındaki kararın aynısı — değer elle yazılır. */
.proc-item-form .rz-numeric-button { display: none; }

.proc-item-error {
    font-size: var(--proc-fs-sm, 11px);
    color: var(--proc-danger, #b91c1c);
    font-weight: 600;
}

/* Listede düzenlenmekte olan satır */
.procurement-grid tr.proc-row-editing > td {
    background: var(--proc-accent-wash, #eff6ff) !important;
    box-shadow: inset 2px 0 0 var(--proc-accent, #2563eb);
}

.proc-share-total {
    font-size: var(--proc-fs-sm, 11px);
    color: var(--proc-muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

.proc-share-total.ok { color: var(--proc-good, #15803d); font-weight: 600; }
.proc-share-total.bad { color: var(--proc-danger, #b91c1c); font-weight: 600; }

/* Grid içi düzenlenebilir hücreler — satır yüksekliğini bozmadan */
.proc-editable-grid .rz-cell-data { padding: 0; }

.proc-editable-grid .proc-cell-in,
.proc-editable-grid .proc-cell-in input {
    height: 20px;
    min-height: 20px;
    font-size: var(--proc-fs-sm, 11px);
}

.proc-editable-grid .proc-cell-in input { padding: 0 4px; }

.proc-editable-grid .rz-numeric input,
.proc-editable-grid .rz-textbox { font-variant-numeric: tabular-nums; }

.proc-empty-note,
.proc-relation-note {
    font-size: var(--proc-fs-sm, 11px);
    color: var(--proc-muted, #6b7280);
    line-height: 1.5;
}

.proc-empty-note {
    padding: 14px 10px;
    text-align: center;
    border: 1px dashed var(--proc-line, #d5dbe3);
    border-radius: var(--proc-radius, 3px);
    background: var(--proc-surface-alt, #fbfcfd);
}

/* Politika ve limit rayı */
.proc-rail {
    border-left: 1px solid var(--proc-line, #d5dbe3);
    background: var(--proc-surface-alt, #fbfcfd);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-self: stretch;
}

.proc-rail-head {
    font-size: var(--proc-fs-xs, 10px);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--proc-muted, #6b7280);
    border-bottom: 1px solid var(--proc-line-soft, #e8edf1);
    padding-bottom: 5px;
}

.proc-rail-item { display: flex; flex-direction: column; gap: 2px; }
.proc-rail-item .k { font-size: var(--proc-fs-xs, 10px); color: var(--proc-muted, #6b7280); }

.proc-rail-item .v {
    font-size: var(--proc-fs-sm, 11px);
    font-weight: 600;
    color: var(--proc-ink, #111827);
    font-variant-numeric: tabular-nums;
}

.proc-rail-verdict {
    border-radius: var(--proc-radius, 3px);
    padding: 7px 9px;
    font-size: var(--proc-fs-sm, 11px);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.proc-rail-verdict b { font-weight: 640; }
.proc-rail-verdict p { margin: 0; font-size: var(--proc-fs-xs, 10px); line-height: 1.45; }
.proc-rail-verdict.ok { background: var(--proc-good-soft, #dcfce7); color: var(--proc-good, #15803d); }
.proc-rail-verdict.bad { background: var(--proc-danger-soft, #fee2e2); color: var(--proc-danger, #b91c1c); }

.proc-rail-note {
    font-size: var(--proc-fs-xs, 10px);
    color: var(--proc-muted, #6b7280);
    line-height: 1.5;
    border-top: 1px solid var(--proc-line-soft, #e8edf1);
    padding-top: 8px;
}

/* Sabit özet şeridi */
.proc-summary-strip {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    border-top: 1px solid var(--proc-line, #d5dbe3);
    background: var(--proc-surface-soft, #f4f7fa);
    padding: 7px 12px;
    font-size: var(--proc-fs-sm, 11px);
}

.proc-summary-strip .m { display: flex; align-items: baseline; gap: 6px; }
.proc-summary-strip .m span { color: var(--proc-muted, #6b7280); }
.proc-summary-strip .m b { font-variant-numeric: tabular-nums; font-weight: 620; }

.proc-summary-strip .m.total b {
    font-size: 14px;
    color: var(--proc-accent-strong, #1d4ed8);
}

.proc-validation-msg {
    font-size: var(--proc-fs-sm, 11px);
    color: var(--proc-danger, #b91c1c);
    font-weight: 550;
}

.procurement-dialog-actions .spacer { flex: 1; }

@media (max-width: 900px) {
    .proc-request-dialog .proc-request-dialog-body { grid-template-columns: minmax(0, 1fr); }
    .proc-request-dialog .proc-request-dialog-main { padding-right: 0; }

    .proc-rail {
        border-left: 0;
        border-top: 1px solid var(--proc-line, #d5dbe3);
    }
}

/* == 17 Kaynak maliyet raporu ===============================================
   "Bu harcama hangi işe ait?" ekranı. Filtre şeridi + KPI satırı + genişletilebilir grid.
   ========================================================================== */

.proc-cost-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--proc-gap-sm, 6px) var(--proc-gap, 10px);
    padding: 0 0 8px;
    border-bottom: 1px solid var(--proc-line-soft, #e8edf1);
}

.proc-cost-filters label { display: grid; gap: 3px; min-width: 0; }

.proc-cost-filters label > span {
    font-size: var(--proc-fs-xs, 10px);
    color: var(--proc-muted, #6b7280);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.proc-cost-filter-search { grid-column: span 2; }

.proc-cost-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: var(--proc-gap, 10px);
    padding: 8px 0;
}

.proc-cost-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 132px;
    padding: 6px 10px;
    border: 1px solid var(--proc-line, #d5dbe3);
    border-left: 3px solid var(--proc-accent, #2563eb);
    border-radius: var(--proc-radius, 3px);
    background: var(--proc-surface, #fff);
}

.proc-cost-kpi.muted { border-left-color: var(--proc-line, #d5dbe3); }

.proc-cost-kpi span {
    font-size: var(--proc-fs-xs, 10px);
    color: var(--proc-muted, #6b7280);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.proc-cost-kpi b {
    font-size: 15px;
    font-weight: 640;
    font-variant-numeric: tabular-nums;
    color: var(--proc-ink, #111827);
}

.proc-cost-detail-loading {
    padding: 10px;
    font-size: var(--proc-fs-sm, 11px);
    color: var(--proc-muted, #6b7280);
}

@media (max-width: 760px) {
    .proc-cost-filter-search { grid-column: span 1; }
}

/* == 18 Sefer detayı "Satın Alma" sekmesi ===================================
   Dağıtım modülünün TripDialog'unda kullanılır. Grid yoğunluğu Satın Alma
   standardını izler; çevresindeki sefer formu kendi ölçülerinde kalır.
   ========================================================================== */

.trip-procurement-tab {
    display: flex;
    flex-direction: column;
    gap: var(--proc-gap-sm, 6px);
    padding: 4px 0;
}

.trip-procurement-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.trip-procurement-head .spacer { flex: 1; }

/* Sekmedeki İKİNCİ bölüm başlığı (Masraf ve Belgeler). Ayırıcı çizgi şart: iki grid
   arka arkaya geldiğinde alttaki, üstteki gridin devamı gibi okunuyordu. */
.trip-procurement-head-sec {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--proc-line, #d5dbe3);
}

.trip-procurement-hint {
    font-size: var(--proc-fs-sm, 11px);
    color: var(--proc-muted, #6b7280);
}

.trip-procurement-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px solid var(--proc-line, #d5dbe3);
    background: var(--proc-surface-soft, #f4f7fa);
    padding: 7px 10px;
    font-size: var(--proc-fs-sm, 11px);
}

.trip-procurement-foot .spacer { flex: 1; }
.trip-procurement-foot small { color: var(--proc-muted, #6b7280); font-size: var(--proc-fs-xs, 10px); }

.trip-procurement-foot b {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--proc-accent-strong, #1d4ed8);
}

/* == 19 Sipariş maliyet tahsisi dialogu ===================================== */

.proc-allocation-dialog {
    display: flex;
    flex-direction: column;
    gap: var(--proc-gap-sm, 6px);
}

.proc-alloc-state {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 10px;
    border-radius: var(--proc-radius, 3px);
    border: 1px solid var(--proc-line, #d5dbe3);
    border-left-width: 3px;
    font-size: var(--proc-fs-sm, 11px);
}

.proc-alloc-state b { font-weight: 640; }
.proc-alloc-state span { color: var(--proc-muted, #6b7280); }

.proc-alloc-state.inherited {
    background: var(--proc-neutral-soft, #eef2f7);
    border-left-color: var(--proc-neutral, #475569);
}

.proc-alloc-state.inherited b { color: var(--proc-neutral, #475569); }

.proc-alloc-state.override {
    background: var(--proc-accent-wash, #eff6ff);
    border-color: var(--proc-accent-soft, #dbeafe);
    border-left-color: var(--proc-accent, #2563eb);
}

.proc-alloc-state.override b { color: var(--proc-accent-strong, #1d4ed8); }

/* ── Onay kuyruğu: geçmiş (sonuçlanmış) satırlar ─────────────────────────────
   Açık kayıtlarla aynı gridde listelenir; ton farkı "bu satırda yapılacak iş
   yok" bilgisini taşır. Seçili satır vurgusu bunun üzerine biner. */
.proc-row-history > td {
    background: var(--proc-surface-soft);
    color: var(--proc-muted);
}

.proc-row-history.proc-row-selected > td {
    background: var(--proc-accent-wash);
    color: var(--proc-ink);
}

/* ── Rapor kataloğu kartları ─────────────────────────────────────────────────
   Eskiden tek satırda yatayda uzayan kartlardı; sabit genişlikli kutucuk
   ızgarasına alındı. Renk kullanıcı tercihinden gelir ve satır içi
   --proc-tile-accent / --proc-tile-wash değişkenleriyle taşınır. */
.proc-report-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--proc-gap-sm);
    align-items: stretch;
}

.proc-report-tile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
}

.proc-report-tile-open {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: var(--proc-font);
    text-align: left;
    cursor: pointer;
}

.proc-report-tile-open:hover {
    background: var(--proc-tile-wash, var(--proc-surface-soft));
}

.proc-report-tile-open:focus-visible {
    outline: 2px solid var(--proc-tile-accent, var(--proc-accent));
    outline-offset: -2px;
}

/* Sol renk şeridi: rengi taşıyan tek öge, metin kontrastı bozulmaz. */
.proc-report-tile-mark {
    flex: 0 0 4px;
    background: var(--proc-tile-accent, var(--proc-accent));
}

.proc-report-tile-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 8px 10px;
}

.proc-report-tile-title {
    color: var(--proc-tile-accent, var(--proc-ink));
    font-size: var(--proc-fs-h3);
    font-weight: 700;
    line-height: 1.25;
}

/* Açıklama kutucuğu yatayda uzatmasın: üç satırda kesilir, tamamı title'da. */
.proc-report-tile-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
    line-height: 1.35;
}

.proc-report-tile-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px;
    border-top: 1px solid var(--proc-line);
    background: var(--proc-surface-soft);
}

.proc-report-swatch {
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 50%;
    cursor: pointer;
}

.proc-report-swatch.is-active {
    box-shadow: 0 0 0 2px var(--proc-surface), 0 0 0 3px var(--proc-ink);
}

@media (max-width: 720px) {
    .proc-report-tiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* == 19 Onay belgesi içeriği (ApprovalSubjectContentView) ==================
   Onay kuyruğundaki "Detay" diyaloğu ve onay detay sayfası aynı bileşeni
   kullanır. Diyalog Radzen tarafından .proc-shell DIŞINDA (body seviyesinde)
   çizildiği için, kabuğa dayanan kurallar burada tekrar tanımlanır. */

.proc-subject-content {
    display: flex;
    flex-direction: column;
    gap: var(--proc-gap-sm);
    min-width: 0;
}

/* Başlık alanları: dar panelde tek, geniş diyalogda çok kolon. */
.proc-subject-head {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 16px;
    padding: 6px 10px;
    border: 1px solid var(--proc-line-soft);
    border-radius: var(--proc-radius);
    background: var(--proc-surface-soft);
}

.proc-subject-head .proc-kv strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Açıklama serbest metindir: kısaltılmaz, sarar. */
.proc-subject-description {
    max-height: 96px;
    overflow-y: auto;
    line-height: 1.45;
    white-space: pre-wrap;
}

.proc-subject-lines-head { border-top: 1px solid var(--proc-line-soft); }

/* Sabit kolonlar 1010px + açıklamaya taban 240px (bkz. ARAYUZ_KURALLARI §2).
   Dar panelde tablo daralmaz, .proc-grid-wrap içinde yatay kayar. */
.proc-subject-lines { min-width: 1180px; }

.proc-subject-lines .proc-subject-line-no { width: 52px; }

.proc-subject-lines tfoot td {
    background: var(--proc-surface-soft);
    font-weight: 650;
}

/* Tutar hücrelerinin sağa hizası .proc-shell'e bağlıdır; diyalogda kabuk yok. */
.proc-subject-content .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.proc-subject-dialog { display: flex; flex-direction: column; gap: var(--proc-gap-sm); }

/* Kuyruk satırındaki iki düğme (Detay / Onay Kaydı) yan yana kalır.
   Hücreye flex verilmez: .proc-grid td satır yüksekliğini height/line-height ile
   sabitler, flex'e çevirmek o hizalamayı bozar. */
.proc-row-actions .proc-btn + .proc-btn { margin-left: 4px; }

/* == 20 Satır aksiyonları: kalem + çöp kovası, satırın SOLUNDA =============
   Tek görsel dil (bkz. ProcRowActions.razor). Aksiyon kolonu ilk kolondur;
   göz satırı soldan tarar, aksiyon her ekranda aynı yerde bulunur. */

.proc-actions-col {
    width: 84px;
    white-space: nowrap;
}

/* İkon düğmeleri satır yüksekliğini (24px) aşmamalı: modülün yoğunluk bütçesi
   metin butonuna göre ayarlı, Radzen'in taban 26px'i satırı şişiriyordu. */
.proc-row-actions .rz-button {
    width: 22px;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
    padding: 0;
    border-radius: var(--proc-radius);
    line-height: 22px;
}

.proc-row-actions .rz-button .rzi,
.proc-row-actions .rz-button .rz-button-icon-only {
    margin: 0;
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
}

/* Hücre içeriği dikeyde ortalanır; .proc-grid td line-height'ı satır yüksekliğine
   eşitlediği için ikon düğmesi tek başına bırakılırsa tabana yapışıyordu. */
td.proc-actions-col,
.proc-actions-col .proc-row-actions {
    line-height: normal;
}

.proc-row-actions { flex-wrap: nowrap; }

/* == 21 Dikey bölme (üstte liste, altta detay) ============================
   Yatay bölmenin dikey karşılığı. Kulp yalnızca `is-split` varken anlamlıdır:
   alt bölme kapalıyken sürüklenecek bir sınır yoktur ve üst bölme tüm alanı
   kullanmalıdır — sabit yükseklik bırakılsaydı boş alan ortada asılı kalırdı. */

/* Kabuk YALNIZCA boyutlanan iki bölmeyi sarar. Sayfanın tüm yığınına
   verilseydi grid satırlarının ilki metrik şeridi olurdu ve kulp onu
   boyutlardı — kulbun dikey konumu da yanlış yerden ölçülürdü. */
.proc-vsplit {
    display: grid;
    gap: var(--proc-gap);
    align-items: start;
    min-width: 0;
}

.proc-vsplit.is-split {
    --proc-split-h: 46vh;
    grid-template-rows: var(--proc-split-h) minmax(0, 1fr);
    align-items: stretch;
    min-height: 0;
}

.proc-vsplit.is-split > .proc-vsplit-top {
    min-height: 0;
    overflow: auto;
}

/* Dar ekranda dikey bölme kapanır: iki bölmeyi birden sığdırmaya çalışmak
   ikisini de kullanılamaz hâle getirir. */
@media (max-width: 900px) {
    .proc-vsplit.is-split {
        grid-template-rows: auto auto;
    }

    .proc-vsplit.is-split > .proc-vsplit-top {
        overflow: visible;
    }
}

/* == 22 Onay kuyruğu belge tipi sekmeleri =================================
   Onay Ayarları'ndaki kulakçık şeridinin (.proc-settings-tabs) tip renkli
   türevi. Talep / Teklif / Sipariş ayrı renk taşır: onaycı hangi belge
   sınıfına karar verdiğini şeride bakmadan, renkten de anlar.

   Renk TEK BAŞINA anlam taşımaz — kulakçıkta metin de yazılıdır (WCAG 1.4.1). */

.proc-queue-tabs {
    --tab-accent: var(--proc-accent);
    --tab-accent-strong: var(--proc-accent-strong);
    --tab-accent-wash: var(--proc-accent-wash);
    border-bottom-color: var(--tab-accent);
}

/* Şeridin alt çizgisi aktif sekmenin rengini alır: kulakçık ile gövde
   arasındaki bağ kopmasın. */
.proc-queue-tabs.tab-request { --tab-accent: #2563eb; --tab-accent-strong: #1d4ed8; --tab-accent-wash: #eff6ff; }
.proc-queue-tabs.tab-quote   { --tab-accent: #7c3aed; --tab-accent-strong: #6d28d9; --tab-accent-wash: #f5f3ff; }
.proc-queue-tabs.tab-order   { --tab-accent: #0f766e; --tab-accent-strong: #115e59; --tab-accent-wash: #f0fdfa; }

.proc-queue-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.proc-queue-tabs button:hover {
    background: var(--tab-own-wash, var(--tab-accent-wash));
    color: var(--tab-own-strong, var(--tab-accent-strong));
}

.proc-queue-tabs button.active,
.proc-queue-tabs button.active:hover {
    background: var(--tab-own, var(--tab-accent));
    border-color: var(--tab-own, var(--tab-accent));
    color: #fff;
}

/* Her kulakçık kendi rengini taşır; şerit aktif olanınkini yansıtır. */
.proc-queue-tabs button.is-request { --tab-own: #2563eb; --tab-own-strong: #1d4ed8; --tab-own-wash: #eff6ff; }
.proc-queue-tabs button.is-quote   { --tab-own: #7c3aed; --tab-own-strong: #6d28d9; --tab-own-wash: #f5f3ff; }
.proc-queue-tabs button.is-order   { --tab-own: #0f766e; --tab-own-strong: #115e59; --tab-own-wash: #f0fdfa; }
.proc-queue-tabs button.is-payment { --tab-own: #b45309; --tab-own-strong: #92400e; --tab-own-wash: #fffbeb; }

/* Okunmamış posta rozetinin karşılığı: yalnızca ONAY BEKLEYEN sayısı.
   Sıfırsa hiç çizilmez — "0" rozeti dikkat çeker ama bir iş bildirmez. */
.proc-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--proc-radius-pill);
    background: var(--tab-own, var(--proc-accent));
    color: #fff;
    font-size: var(--proc-fs-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 18px;
}

/* Aktif kulakçıkta zemin zaten renkli; rozet ters kontrastla okunur kalır. */
.proc-queue-tabs button.active .proc-tab-badge {
    background: #fff;
    color: var(--tab-own, var(--proc-accent));
}

/* ── "Bu belgeyi kimler onaylayabilir" diyalogu ─────────────────────────────
   Liste elenen adayları da gösterir; uygun/uygun değil ayrımı renkle taşınır
   ama tek başına renge bırakılmaz — hücrede gerekçe metni de vardır. */
.proc-approvers-dialog { min-width: 0; }

.proc-approvers-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: baseline;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--proc-border, #e5e7eb);
}

.proc-approver-verdict { font-weight: 600; }
.proc-approver-verdict.ok { color: var(--proc-good, #15803d); }
.proc-approver-verdict.bad { color: var(--proc-danger, #b91c1c); }

/* ── Kuyruk satır işaretleri ────────────────────────────────────────────────
   Renk tek başına taşıyıcı değil: her işaretin metni de var. */
.proc-queue-flag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: var(--proc-fs-xs, 10px);
    font-weight: 640;
    white-space: nowrap;
}

.proc-queue-flag.overdue {
    background: var(--proc-danger-soft, #fee2e2);
    color: var(--proc-danger, #b91c1c);
}

/* Butonun içinde durur; ayrı sütun açmadan "bu satırı onaylayabilirsiniz" der.
   Sabit genişlik: iki durumda da aynı yer kaplar, buton satırdan satıra oynamaz.
   Anlam yalnız renkte değil: butonun title'ı da duruma göre değişir. */
.proc-queue-approver-mark {
    display: inline-block;
    width: 10px;
    margin-left: 4px;
    text-align: center;
    font-weight: 800;
}

.proc-queue-approver-mark.yes {
    color: var(--proc-good, #15803d);
}

.proc-queue-approver-mark.no {
    color: var(--proc-muted, #9ca3af);
}

/* Teklifler ve siparişler aynı talep altında karşılaştırılır; grup satırı, veri satırı değildir. */
.proc-request-group > td {
    padding: 7px 10px;
    background: #f5f3ff;
    border-top: 2px solid #7c3aed;
    color: #4c1d95;
}

.proc-request-group-content {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.proc-request-group-content span {
    color: #6d28d9;
    font-size: var(--proc-fs-sm);
    white-space: nowrap;
}

/* ── Onay Yetkileri matrisi ─────────────────────────────────────────────────
   Kisi x yetki tablosu. Bool kolonlari dar ve ortalanmis, limit kolonlari sagda.
   Amac bantlarin yan yana okunabilmesi: limit bosluklarini gormenin tek yolu bu.   */

.proc-auth-person { min-width: 170px; }
.proc-auth-flag   { width: 82px; text-align: center; }
.proc-auth-value  { width: 108px; }

/* Baslik altindaki birim (TRY) baslikla ayni satiri paylasmaz; kolonu genisletirdi. */
.proc-auth-unit {
    display: block;
    font-size: var(--proc-fs-xs);
    font-weight: 400;
    opacity: .7;
}

/* Yetkisi olmayan kisi satiri: gizlenmez, geri plana cekilir. Gizlemek "kimse yok"
   ile "herkes filtrelendi"yi ayirt edilemez yapardi. */
.proc-row-passive > td { opacity: .55; }

.proc-gap-list { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; }

.proc-gap-chip {
    padding: 1px 6px;
    border: 1px solid var(--proc-warning);
    border-radius: 9px;
    font-size: var(--proc-fs-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Kural 4: sinif verilen butonda font-size/padding/border/background ACIKCA yazilir,
   aksi halde native buton gorunumune dusup yogunluk butcesinin disina tasar. */
.proc-btn.proc-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: var(--proc-fs-sm);
    border: 1px solid var(--proc-line);
    background: var(--proc-surface);
    line-height: 1;
}

.proc-btn.proc-btn-icon .rz-icon,
.proc-btn.proc-btn-icon .rzi { font-size: 14px; }

/* Onay akisi dialogunda basliği olan onay kutusu alani: kutu satiri, komsu alanin
   acilir listesiyle ayni yuksekligi kaplar ki basliklar ve kontroller iki kolonda
   birbiriyle hizali dursun. Yukseklik verilmezse kutu satiri kisa kalir ve alan
   yukari kayar. */
.procurement-flow-dialog-field > .procurement-flow-dialog-check-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin: 0;
}

/* == 23 Ödeme Kaydı ekranı (/procurement/payment-register) ==================
   Çift bölme: solda onaylı paketler, sağda o paketin ödeme kalemleri ve ödeme
   geçmişi. Bölme genişliği sürüklenebilir ve kullanıcıya kaydedilir
   (bkz. docs/ARAYUZ_KURALLARI.md §5; motor ProcSplitter + proc-side-panel.js).

   Ölçüler modülün yoğunluk bütçesinden gelir: satır 24px, hücre 11px,
   başlık 12px/600. Yeni token TANIMLANMAZ; hepsi :root'taki --proc-* ailesinden. */

.payreg-shell {
    display: flex;
    flex-direction: column;
    gap: var(--proc-gap);
    min-height: 100%;
    padding: var(--proc-pad-page);
    color: var(--proc-ink);
}

.payreg-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.payreg-crumb { font-size: var(--proc-fs-sm); color: var(--proc-muted); }
.payreg-head h1 { margin: 2px 0 0; font-size: 18px; font-weight: 640; letter-spacing: -.01em; }
.payreg-head p { margin: 3px 0 0; font-size: var(--proc-fs-sm); color: var(--proc-muted); }
.payreg-headactions { display: flex; gap: var(--proc-gap-sm); }

.payreg-error {
    padding: 8px 11px;
    border: 1px solid #f0b4b4;
    border-left: 3px solid var(--proc-danger);
    border-radius: var(--proc-radius);
    background: var(--proc-danger-soft);
    color: var(--proc-danger);
    font-size: var(--proc-fs-sm);
}

/* Bölme düzeni: sol genişlik --payreg-side-w değişkeninden okunur, kulp mutlak konumlanır. */
.payreg-layout {
    display: grid;
    grid-template-columns: var(--payreg-side-w, 320px) minmax(0, 1fr);
    gap: 0;
    flex: 1;
    min-height: 520px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius-lg);
    overflow: hidden;
    background: var(--proc-surface);
}

.payreg-side {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--proc-line);
    background: var(--proc-surface);
}

.payreg-side-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 7px 8px;
    border-bottom: 1px solid var(--proc-line-soft);
}

.payreg-chip {
    padding: 2px 9px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius-pill);
    background: var(--proc-surface);
    color: var(--proc-muted);
    font: 600 var(--proc-fs-xs)/1.6 var(--proc-font);
    cursor: pointer;
}

.payreg-chip:hover { background: var(--proc-surface-soft); }

.payreg-chip.on {
    border-color: var(--proc-accent-soft);
    background: var(--proc-accent-wash);
    color: var(--proc-accent-strong);
}

.payreg-side-list { flex: 1; overflow-y: auto; min-height: 0; }

.payreg-pkg {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid var(--proc-line-soft);
    border-left: 3px solid transparent;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: var(--proc-font);
}

.payreg-pkg:hover { background: var(--proc-surface-soft); }
.payreg-pkg.on { background: var(--proc-accent-wash); border-left-color: var(--proc-accent); }

.payreg-pkg-top { display: flex; align-items: center; gap: 6px; }
.payreg-pkg-top strong { flex: 1; font-size: var(--proc-fs-base); font-weight: 640; }
.payreg-pkg-meta { font-size: var(--proc-fs-xs); color: var(--proc-muted); }

.payreg-pkg-amt {
    display: flex;
    justify-content: space-between;
    font-size: var(--proc-fs-sm);
    font-variant-numeric: tabular-nums;
}

.payreg-pkg-amt span { color: var(--proc-muted); }
.payreg-pkg-amt b { font-weight: 640; }
.payreg-pkg-amt b.rest { color: var(--proc-danger); }

.payreg-bar {
    display: block;
    height: 4px;
    margin-top: 2px;
    border-radius: var(--proc-radius-pill);
    background: var(--proc-line-soft);
    overflow: hidden;
}

.payreg-bar > i { display: block; height: 100%; background: var(--proc-good); }

.payreg-side-foot {
    padding: 6px 10px;
    border-top: 1px solid var(--proc-line);
    background: var(--proc-surface-alt);
    color: var(--proc-muted);
    font-size: var(--proc-fs-xs);
}

.payreg-main { display: flex; flex-direction: column; min-width: 0; }

.payreg-detail-head {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 9px 12px 8px;
    border-bottom: 1px solid var(--proc-line);
}

.payreg-detail-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.payreg-detail-title h2 { margin: 0; font-size: 15px; font-weight: 650; }
.payreg-hint { font-size: var(--proc-fs-xs); color: var(--proc-muted); }

.payreg-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--proc-line-soft);
    border-radius: var(--proc-radius);
    background: var(--proc-line-soft);
    overflow: hidden;
}

.payreg-kpi { padding: 5px 9px; background: var(--proc-surface-alt); }
.payreg-kpi span { display: block; font-size: var(--proc-fs-xs); color: var(--proc-muted); }

.payreg-kpi b {
    display: block;
    margin-top: 1px;
    font-size: 14px;
    font-weight: 640;
    font-variant-numeric: tabular-nums;
}

.payreg-kpi b.rest { color: var(--proc-danger); }
.payreg-kpi b.paid { color: var(--proc-good); }

.payreg-tabs { display: flex; border-bottom: 1px solid var(--proc-line); }

.payreg-tab {
    height: 27px;
    padding: 0 13px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--proc-muted);
    font: 550 var(--proc-fs-sm)/1 var(--proc-font);
    cursor: pointer;
}

.payreg-tab.on { color: var(--proc-accent-strong); border-bottom-color: var(--proc-accent); font-weight: 640; }
.payreg-tabcount { color: var(--proc-muted); font-weight: 500; }

.payreg-tools {
    display: flex;
    align-items: center;
    gap: var(--proc-gap-sm);
    flex-wrap: wrap;
    padding: 6px 8px;
    border-bottom: 1px solid var(--proc-line-soft);
    background: var(--proc-surface-alt);
}

.payreg-filter {
    height: var(--proc-h-control);
    padding: 0 7px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: #fff;
    color: var(--proc-ink);
    font: 400 var(--proc-fs-sm)/1 var(--proc-font);
}

.payreg-filter:focus {
    outline: none;
    border-color: var(--proc-accent);
    box-shadow: 0 0 0 2px var(--proc-accent-wash);
}

.payreg-search { width: 220px; }
.payreg-spacer { flex: 1; }

.payreg-selcount {
    padding: 1px 9px;
    border: 1px solid var(--proc-accent-soft);
    border-radius: var(--proc-radius-pill);
    background: var(--proc-accent-wash);
    color: var(--proc-accent-strong);
    font-size: var(--proc-fs-sm);
    font-weight: 600;
}

.payreg-tablewrap { flex: 1; min-height: 0; overflow: auto; }

.payreg-grid { width: 100%; border-collapse: collapse; background: var(--proc-surface); }

.payreg-grid th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: var(--proc-h-row);
    padding: 0 6px;
    border: 1px solid var(--proc-line);
    background: var(--proc-surface-soft);
    color: var(--proc-ink-soft);
    font-size: var(--proc-fs-h3);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.payreg-grid td {
    height: var(--proc-h-row);
    padding: 0 6px;
    border: 1px solid var(--proc-line-soft);
    font-size: var(--proc-fs-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.payreg-grid tbody tr:hover td { background: var(--proc-accent-wash); }
.payreg-grid tbody tr.sel td { background: var(--proc-accent-soft); }
.payreg-grid tbody tr.done td { color: var(--proc-muted); }
.payreg-grid .money { text-align: right; font-variant-numeric: tabular-nums; }
.payreg-grid .payreg-check { width: 34px; text-align: center; }
.payreg-grid input[type="checkbox"] { margin: 0; vertical-align: middle; accent-color: var(--proc-accent); }

.payreg-bank { display: flex; flex-direction: column; line-height: 1.25; }
.payreg-bank small { color: var(--proc-muted); font-size: var(--proc-fs-xs); }

/* Banka bilgisi eksikse UYARI gibi görünür: ödemeyi yapan kişi bunu görmezse
   IBAN'ı başka bir yerden bulmak zorunda kalır. Sessiz bir tire yetmez. */
.payreg-missing,
.paypack-missing { color: var(--proc-warning); font-size: var(--proc-fs-xs); font-weight: 600; }

.payreg-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--proc-accent-strong);
    font: 400 var(--proc-fs-sm)/1.4 var(--proc-font);
    text-decoration: underline dotted;
    cursor: pointer;
}

.payreg-link:hover { text-decoration-style: solid; }
.payreg-receipt { display: flex; align-items: center; gap: 6px; }

.payreg-empty { padding: 18px 12px; color: var(--proc-muted); font-size: var(--proc-fs-sm); text-align: center; }
.payreg-empty-lg { margin: auto; }

.payreg-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 5px 10px;
    border-top: 1px solid var(--proc-line);
    background: var(--proc-surface-alt);
    color: var(--proc-muted);
    font-size: var(--proc-fs-xs);
}

/* ---- Ödeme diyaloğu ---- */

/* Üç kolon: diyalogun BÜTÜN satırları (tarih/yöntem/referans, çıkış hesabı, hedef
   hesap) aynı ızgarayı kullanır. Çıkış ve hedef hesabın banka/hesap no/IBAN alanları
   böylece dikeyde hizalanır ve ikisi de soldan başlar. */
.payreg-dlg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.payreg-fld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.payreg-fld label { color: var(--proc-muted); font-size: var(--proc-fs-xs); font-weight: 600; }
.payreg-fld label .req { color: var(--proc-danger); }

/* Salt okunur hesap alanı (hesap no, IBAN). Girdi DEĞİLDİR — değer seçilen hesap
   tanımından gelir — ama yüksekliği yanındaki açılır listeyle aynıdır ki üç kolon
   aynı çizgide dursun. Rakamlar eşit genişlikli yazıyla okunur. */
.payreg-ro {
    height: var(--proc-h-control);
    padding: 0 8px;
    border: 1px solid var(--proc-line-soft);
    border-radius: var(--proc-radius);
    background: var(--proc-surface-alt);
    color: var(--proc-ink-soft);
    font-family: ui-monospace, Consolas, monospace;
    font-size: var(--proc-fs-sm);
    line-height: calc(var(--proc-h-control) - 2px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.payreg-dlg-sec {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--proc-ink-soft);
    font-size: var(--proc-fs-h3);
    font-weight: 640;
}

.payreg-dlg-hint { color: var(--proc-muted); font-size: var(--proc-fs-xs); font-weight: 400; }

.payreg-drop {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px dashed var(--proc-line);
    border-radius: var(--proc-radius-lg);
    background: var(--proc-surface-alt);
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
}

.payreg-drop.filled {
    border-style: solid;
    border-color: #bbe9ca;
    background: var(--proc-good-soft);
    color: var(--proc-good);
}

.payreg-drop-file { color: var(--proc-ink); font-family: ui-monospace, Consolas, monospace; }

/* Dosya seçici: native input gizlenir, etiket düğme gibi davranır. */
.payreg-file-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--proc-h-control);
    padding: 0 9px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
    color: var(--proc-ink-soft);
    font-size: var(--proc-fs-sm);
    font-weight: 550;
    cursor: pointer;
    overflow: hidden;
}

.payreg-file-btn:hover { background: var(--proc-surface-soft); border-color: #bcc6d3; }
.payreg-file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.payreg-dlg-tablewrap {
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--proc-line-soft);
    border-radius: var(--proc-radius);
}

.payreg-sumline {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 7px 10px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface-alt);
    font-size: var(--proc-fs-sm);
}

.payreg-sumline strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.payreg-sumline strong.ok { color: var(--proc-good); }
.payreg-sumline strong.bad { color: var(--proc-danger); }

.payreg-invalid { color: var(--proc-danger); font-size: var(--proc-fs-sm); font-weight: 550; }
.payreg-actions-col { width: 132px; white-space: nowrap; }

/* Ödeme kalemi satırındaki "Satırı Öde": ikon + yazı, satır yüksekliğini (24px)
   aşmayan küçük boy. İşlem sütunu yazıya göre genişler. */
.payreg-grid .payreg-pay-row-btn.rz-button {
    height: var(--proc-h-control-sm);
    min-height: var(--proc-h-control-sm);
    padding: 0 8px;
    gap: 4px;
    font-size: var(--proc-fs-sm);
    font-weight: 600;
    line-height: 1;
}

.payreg-grid .payreg-pay-row-btn .rz-button-box {
    gap: 4px;
}

.payreg-grid .payreg-pay-row-btn .rz-button-icon-left {
    font-size: 15px;
    margin: 0;
}
.payreg-bad .rz-textbox { border-color: var(--proc-danger) !important; background: var(--proc-danger-soft) !important; }

@media (max-width: 1100px) {
    .payreg-layout { grid-template-columns: minmax(0, 1fr); }
    .payreg-side { border-right: 0; border-bottom: 1px solid var(--proc-line); max-height: 260px; }
    .payreg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .payreg-dlg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* == 24 Fatura / sözleşme belgesi diyaloğu =================================
   Belge türü üç kart arasından seçilir ve ödeme planı seçime göre yeniden
   üretilir. Kartlar radio yerine düğme: seçenek metinleri iki satır açıklama
   taşıyor ve radio etiketinde bu okunmaz kalıyordu. */

.inv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.inv-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.inv-note {
    padding: 6px 10px;
    border: 1px solid #f6e0a8;
    border-left: 3px solid var(--proc-warning);
    border-radius: var(--proc-radius);
    background: var(--proc-warning-soft);
    color: var(--proc-warning);
    font-size: var(--proc-fs-sm);
}

/* Not kutusu masraf belgesinde kabuğun kenar boşluğunu kendisi alır: order-doc kabuğu
   bölümler arası boşluk vermez, her parça kendi iç boşluğunu taşır. */
.procurement-order-doc .inv-note { margin: 8px 10px; }

/* ── MASRAF BELGESİ: sipariş belgesinin kabuğu ─────────────────────────────
   Belge diyaloğu procurement-order-doc kabuğunu PAYLAŞIR; burada yalnız kendi
   alan dizilimi ve masrafa özgü küçük parçalar tanımlanır. Kabuğu kopyalamak,
   iki belgenin görüntüsünün zamanla ayrışması demekti. */

/* Tedarikçi · Belge No · Tarih · Masraf Merkezi · Para Birimi.
   Tutar ve KDV alanı YOK: belge tutarı kalemlerden doğar, KDV kalemin kendi oranıdır.
   Tedarikçi ve masraf merkezi uzun metin taşır, kalanlar kısadır. */
/* Tedarikçi · Fatura No · Belge Tarihi · Masraf Merkezi · Proje Bağlantısı · Para Birimi.
   ALTI KOLON: Proje Bağlantısı eklenince beşten çıkarıldı. Kolon sayısı alan sayısıyla
   birlikte güncellenmezse fazla alan sıkışır ya da alt satıra düşer — ekranda öyle oldu.

   Masraf Merkezi ve Proje Bağlantısı en geniş paylar: ikisi de "201 · Araç Giderleri —
   Yakıt Giderleri" gibi iki parçalı metin taşır. Para birimi en dar, üç harf. */
/* Tedarikçi · Satış Temsilcisi · Termin · Sipariş Durumu · Fatura Durumu · Para Birimi ·
   Proje Bağlantısı. YEDİ KOLON: proje alanı eklenince altıdan çıkarıldı.

   Sipariş dialogu bu sınıfı önce ÇIPLAK kullanıyordu; diğer bütün dialogların kendi
   değiştirici sınıfı olduğu için o da bir tane aldı. Taban sınıfı değiştirmek, altı
   alanlı diğer başlıkların hepsine boş bir yedinci kolon açardı. */
.proc-ord-head { grid-template-columns: 1.5fr 1.2fr 0.95fr 0.95fr 0.95fr 0.7fr 1.7fr; }

/* Tedarikçi · Fatura No · Belge Tarihi · Para Birimi. Masraf Merkezi ve Proje Bağlantısı
   BU SATIRDAN ÇIKTI: tam metinleri (bkz. --proc-w-cc / --proc-w-project) altı kolonlu bir satıra
   sığmıyordu ve diğer dört alanı okunmaz hâle getiriyordu. */
.inv-head { grid-template-columns: 1.6fr 1.1fr 1fr 0.7fr; }

/* Ödeme Yöntemi · Ödendi · Ödeme Tarihi · Ödeyen · Açıklama. Belge tutarı burada YOKTUR:
   tek doğru yeri ızgaranın altındaki toplam şerididir.

   Ödendi kümesi "auto": içeriği sabit (onay kutusu + tek kelime), esnek paya ihtiyacı yok
   ve fr verilseydi metin kadar yer kaplayıp kalanı boşuna işgal ederdi. */
.inv-head2 { grid-template-columns: 1.1fr auto 1fr 1.2fr 2fr; }

@media (max-width: 1100px) {
    .inv-head, .inv-head2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Alan başlığının yanındaki metin düğmesi ("listede yok", "tümünü göster").
   Ayrı bir onay kutusu satırı, veri değiştikçe şeridin yüksekliğini oynatıyordu
   (Arayüz Kuralı #8); başlığın yanında sabit yer kaplar. */
.inv-linkbtn {
    max-width: 240px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 0 0 0 6px;
    border: 0;
    background: none;
    color: var(--proc-accent-strong);
    font-size: var(--proc-fs-xs);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.inv-linkbtn:hover { color: var(--proc-accent); }
.inv-linkbtn:disabled { color: var(--proc-muted); cursor: default; text-decoration: none; }

/* KÂĞIT CİNSİ — iki küçük segment. Ekranın tepesini kaplayan iki büyük kartın yerine
   geçti: belge türü (ödeme planı) artık siparişin işi, burada kalan soru "elimdeki
   kâğıt ne" sorusudur ve iki cevabı vardır. */
.inv-typeswitch { display: inline-flex; border: 1px solid var(--proc-line); border-radius: var(--proc-radius); overflow: hidden; }
.inv-typeswitch button {
    height: 22px;
    padding: 0 9px;
    border: 0;
    border-right: 1px solid var(--proc-line);
    background: var(--proc-surface);
    color: var(--proc-ink-soft);
    font-size: var(--proc-fs-xs);
    font-weight: 600;
    cursor: pointer;
}
.inv-typeswitch button:last-child { border-right: 0; }
.inv-typeswitch button.on { background: var(--proc-accent); color: #fff; }

/* Evrak yükleme düğmesi bir <label>'dır: içindeki dosya seçici gizlenir, görüntü
   diğer araç düğmeleriyle aynı kalır. */
.inv-upload { position: relative; overflow: hidden; display: inline-flex; align-items: center; cursor: pointer; }
.inv-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.inv-upload.is-busy { opacity: .6; pointer-events: none; }

/* Evraklar liste değil ŞERİT: dosya sayısı azdır, altı kolonluk tablo asıl işin
   (kalemler) altında ikinci bir ızgara gibi okunuyordu.
   Fatura belgesinde doğdu; TESLİM belgesi de aynı şeridi kullanır — evrak yüzeyi
   belgeden belgeye değişmemeli. */
.inv-attachbar {
    flex: none;
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 6px 10px; border-bottom: 1px solid var(--proc-line-soft);
}
.inv-attachbar .proc-link-chip button:not(.inv-linkbtn) {
    border: 0; background: none; color: var(--proc-muted); cursor: pointer; padding: 0 0 0 4px;
}
.inv-attachbar .proc-link-chip button:not(.inv-linkbtn):hover { color: var(--proc-danger); }

.inv-reviewbar { border-top: 1px solid var(--proc-line-soft); }
.inv-reviewnote { width: 260px; }

.inv-lines { min-width: 1180px; }

/* ── TALEP BELGESİ — sipariş kabuğunun alan dizilimi ───────────────────────
   Talep Tipi · Müşteri/İç İhtiyaç · İstenen Tarih · Öncelik · Masraf Merkezi ·
   Para Birimi. Müşteri ve masraf merkezi uzun metin taşır. */
/* Proje Bağlantısı · Müşteri/İç İhtiyaç · İstenen Tarih · Öncelik · Masraf Merkezi ·
   Para Birimi. İlk kolon Talep Tipi'nden Proje Bağlantısı'na dönünce genişletildi:
   eski alan tek kelime taşıyordu ("Doğrudan Talep"), yenisi "4343443 — İç Proje" gibi
   iki parçalı metin taşıyor. */
/* Müşteri/İç İhtiyaç · İstenen Tarih · Öncelik · Para Birimi. Proje Bağlantısı ve
   Masraf Merkezi kendi satırlarına taşındı (bkz. .proc-req-links). */
.proc-req-head { grid-template-columns: 1.6fr 1.1fr 1.1fr 0.7fr; }
.proc-req-head2 { grid-template-columns: 1fr; }
.proc-req-lines { min-width: 1180px; }

/* ── TEKLİF BELGESİ ────────────────────────────────────────────────────────
   Tedarikçi · Teklif Tarihi · Geçerlilik · Teslim Süresi · Dosya · Para Birimi. */
.proc-quote-head { grid-template-columns: 1.8fr 1fr 1fr 1fr 1.4fr 0.7fr; }
.proc-quote-head2 { grid-template-columns: 1fr 1fr 1fr 1.6fr; }
.proc-quote-lines { min-width: 1320px; }

/* ── SİPARİŞTEN SATIR SEÇME (fatura) ───────────────────────────────────────
   Solda sipariş listesi, sağda satırlar. Liste sabit genişlikte; yalnız satır
   ızgarası esner — sipariş kartları okunurluğunu her boyutta korusun. */
.proc-pick-split { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.proc-pick-orders { min-height: 0; overflow: auto; border-right: 1px solid var(--proc-line); background: var(--proc-surface-alt); }
.proc-pick-order {
    display: block; width: 100%; text-align: left; padding: 8px 10px;
    border: 0; border-bottom: 1px solid var(--proc-line-soft); background: none; cursor: pointer;
}
.proc-pick-order:hover:not(:disabled) { background: var(--proc-surface-soft); }
.proc-pick-order.on { background: var(--proc-accent-soft); box-shadow: inset 3px 0 0 var(--proc-accent); }
.proc-pick-order b { display: block; font-size: var(--proc-fs-sm); }
.proc-pick-order span { display: block; font-size: var(--proc-fs-xs); color: var(--proc-ink-soft); }
/* Sipariş numarası ipucu tetikleyicisidir (ProcDocNo → span.proc-doclink). Üstteki
   genel `span` kuralı onu da küçültüp soluklaştırıyordu; numara satırın başlığıdır,
   bağlantı görünümünü korur. */
.proc-pick-order .proc-doclink {
    display: inline-block; font-size: var(--proc-fs-sm); color: var(--proc-accent-strong);
}
/* ONAY KILIDI: onaysiz kaynak belge listeden cikarilmaz, soluk ve tiklanamaz cizilir.
   Rozet sebebi yazar; kirmizi degil UYARI tonu -- belge hatali degil, henuz hazir degil. */
.proc-pick-order.is-locked { opacity: .62; cursor: not-allowed; }
.proc-pick-order.is-locked:hover { background: none; }
.proc-pick-lock {
    display: inline-block; margin-top: 2px; padding: 0 6px;
    border: 1px solid var(--proc-warning); border-radius: 9px;
    background: var(--proc-warning-soft); color: var(--proc-warning);
    font-size: var(--proc-fs-xs); font-weight: 600; text-transform: lowercase;
}
.proc-pick-lines { border-top: 0; }

/* ── TESLİM BELGESİ ────────────────────────────────────────────────────────
   Teslim No · Tedarikçi İrsaliye No · Teslim Tarihi · Teslim Alan · Tedarikçi ·
   Müşteri · Kabul Durumu. */
.proc-dlv-head { grid-template-columns: 0.95fr 1.25fr 0.85fr 1.15fr 1.35fr 1.35fr 0.9fr; }
.proc-dlv-head2 { grid-template-columns: 1fr 1fr; }
.proc-dlv-lines { min-width: 1320px; }

/* ── ÖDEME PAKETİ BELGESİ ──────────────────────────────────────────────────
   Planlanan Ödeme · Açıklama · Paket Durumu · Para Birimi. */
.proc-pkg-head { grid-template-columns: 1.2fr 2.4fr 1fr 0.7fr; }
.proc-pkg-lines { min-width: 1300px; }

/* ── ÖDEME BELGESİ ─────────────────────────────────────────────────────────
   Tarih · Yöntem · Çıkış Hesabı · Referans · Para Birimi. */
.proc-pay-head { grid-template-columns: 1fr 1.2fr 1.8fr 1.2fr 0.7fr; }
.proc-pay-head2 { grid-template-columns: 1.6fr 1.4fr 2fr; }
.proc-pay-lines { min-width: 1280px; }
.proc-pay-file { display: flex; align-items: center; gap: 8px; height: var(--proc-h-control); }
.proc-pay-file input[type="file"] { font-size: var(--proc-fs-xs); max-width: 180px; }

/* Fiyat verilmeyen satır soluk çizilir ama OKUNUR kalır: "fiyat vermedi" bir veridir,
   gizlenecek bir eksiklik değil. */
.proc-quote-lines tr.proc-u-dim td { background: var(--proc-surface-soft); color: var(--proc-muted); }

@media (max-width: 1100px) {
    .proc-quote-head { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .proc-req-head { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .inv-grid, .inv-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   OPERASYON MODÜLÜ SAYFA KABUĞU

   Dağıtım'daki köprü ekranları (Satın Alma Talep Takibi, Açık Sipariş ve Masraf
   Girişi, Satın Alma Onaylarım) bu sınıfları kullanıyordu ama HİÇBİRİ TANIMLI
   DEĞİLDİ; sayfalar tarayıcı varsayılanlarıyla, aralıksız ve hizasız çiziliyordu.

   Bu ekranlar ProcurementLayout'u KULLANAMAZ — o layout Satın Alma modülünün kendi
   kabuğudur ve oturum Dağıtım'a pinliyken menüsü yanlış modülü gösterirdi. Bu yüzden
   kabuk burada, sayfa düzeyinde tanımlanır.
   ══════════════════════════════════════════════════════════════════════════════ */

.proc-page {
    display: flex;
    flex-direction: column;
    gap: var(--proc-gap);
    padding: 12px 14px 24px;
    background: var(--proc-canvas);
    min-height: 100%;
}

.proc-page-head { display: flex; flex-direction: column; gap: 2px; }
.proc-page-head h2 { font-size: 16px; font-weight: 640; letter-spacing: -.01em; color: var(--proc-ink); }
.proc-page-head p { margin: 0; max-width: 78ch; }

.proc-u-m-0 { margin: 0; }

/* Süzgeç şeridi. Dar ekranda sarar; buton grubu sağa YAPIŞMAZ — sarma sonrası
   ortada asılı kalan bir buton, satırın devamı gibi okunuyordu. */
.proc-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--proc-gap-sm);
    padding: 7px 9px;
    background: var(--proc-surface);
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius-lg);
}

/* Metrik şeridi. Hücreler arası 1px boşluk arka plandan gelir; kenarlık kullanmak
   dar ekranda sarınca çift çizgi üretiyordu. */
.proc-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--proc-line);
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius-lg);
    overflow: hidden;
}

.proc-metrics .proc-cell {
    flex: 1 1 140px;
    min-width: 140px;
    background: var(--proc-surface);
    padding: 7px 11px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.proc-metrics .proc-cell > span {
    font-size: var(--proc-fs-xs);
    color: var(--proc-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 600;
}

.proc-metrics .proc-cell > strong {
    font-size: 14px;
    font-weight: 640;
    font-variant-numeric: tabular-nums;
    color: var(--proc-ink);
}

.proc-metrics .proc-cell > strong.amt { color: var(--proc-accent-strong); }

/* == 16 Belge ipucu penceresi (doc peek) ==================================
   Belge numarasının üzerine gelince açılan sabit boyutlu pencere.
   Motor: wwwroot/js/proc-doc-peek.js · İçerik: ProcDocPeek.razor
   Davranış sözleşmesi: docs/moduller/satin-alma/BELGE_IPUCU_PENCERESI_UYGULAMA_PROMPTU.md
   ========================================================================== */

/* ---- tetikleyici: belge numarası ----
   Noktalı alt çizgi "burada gizli bilgi var" demektir ve düz bağlantıdan ayrışır.
   Görünüm her ekranda aynıdır; kolon şablonunda tekrar yazılmaz. */
.proc-doclink {
    color: var(--proc-accent-strong);
    font-weight: 600;
    cursor: pointer;
    border: 0;
    border-bottom: 1px dotted #9dbcf5;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    padding: 1px 0;
    background: none;
    font-family: inherit;
    font-size: inherit;
}

.proc-doclink:hover { border-bottom-style: solid; }

.proc-doclink:focus-visible {
    outline: 2px solid var(--proc-accent);
    outline-offset: 1px;
    border-radius: 2px;
}

.proc-doclink.is-peeked {
    background: var(--proc-accent-soft);
    border-radius: 2px;
    box-shadow: 0 0 0 2px var(--proc-accent-soft);
}

/* ---- pencere ----
   SABİT BOYUT: veri arttıkça pencere büyümez, iç listeler kayar. Genişlik ve
   yükseklik kullanıcı ayarından gelir (JS bu iki değişkeni yazar); sabit olan
   boyutun kendisidir, değeri değil. */
.proc-peek {
    --proc-peek-w: 392px;
    --proc-peek-h: 336px;

    position: fixed;
    z-index: 1400;              /* Radzen dialog altında, grid üstünde */
    left: 0; top: 0;
    width: var(--proc-peek-w);
    height: var(--proc-peek-h);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* TAM OPAK. Yarı saydam bir yüzeyde 10-11px kalem listesi, altındaki grid
       satırlarıyla karışır ve okunmaz (Arayüz Kuralı #9). */
    background: #ffffff;
    color: var(--proc-ink, #111827);
    border: 1px solid var(--proc-line, #d5dbe3);
    border-radius: 6px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .22), 0 2px 8px rgba(15, 23, 42, .12);

    /* opacity ile solarak açılmaz: solma boyunca pencere yarı saydam kalırdı. */
    visibility: hidden;
    pointer-events: none;
    font-size: var(--proc-fs-sm);
    line-height: 1.45;
}

.proc-peek.is-open { visibility: visible; pointer-events: auto; }

.proc-peek-head {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 9px 6px;
    border-bottom: 1px solid var(--proc-line);
    background: var(--proc-surface-alt);
    flex: none;
}

.proc-peek-spacer { flex: 1; }

.proc-peek-kind {
    font-size: var(--proc-fs-xs); font-weight: 700; letter-spacing: .02em;
    border-radius: 2px; padding: 1px 5px;
    background: var(--proc-neutral-soft); color: var(--proc-neutral); border: 1px solid #dde4ee;
    white-space: nowrap;
}
.proc-peek-kind.k-request  { background: var(--proc-accent-wash); color: var(--proc-accent-strong); border-color: #c3d7fb; }
.proc-peek-kind.k-order    { background: #eef2f7; color: #475569; border-color: #dde4ee; }
.proc-peek-kind.k-invoice  { background: #f3e8ff; color: #6b21a8; border-color: #e3d0f7; }
.proc-peek-kind.k-payment  { background: var(--proc-good-soft); color: var(--proc-good); border-color: #bbe9ca; }
.proc-peek-kind.k-delivery { background: #e0f2fe; color: #075985; border-color: #bae0f7; }
.proc-peek-kind.k-quote    { background: #fff7ed; color: #9a3412; border-color: #f6d8bd; }
.proc-peek-kind.k-approval { background: var(--proc-warning-soft); color: var(--proc-warning); border-color: #f6e0a8; }

.proc-peek-no {
    font-size: var(--proc-fs-h2); font-weight: 680;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Geri oku zincirde ilerlenince görünür; yerini HER ZAMAN kaplar — display:none
   olsaydı başlıktaki tür ve numara sola kayardı (Arayüz Kuralı #8). */
.proc-peek-back {
    width: 19px; height: 19px; flex: none;
    border: 1px solid var(--proc-line); background: #fff; border-radius: 2px;
    color: var(--proc-muted); cursor: pointer; font-size: 11px; line-height: 1; padding: 0;
    visibility: hidden;
}
.proc-peek-back.is-on { visibility: visible; }
.proc-peek-back:hover { background: var(--proc-accent-wash); color: var(--proc-accent-strong); border-color: #b6cbf5; }

.proc-peek-sub {
    padding: 5px 9px 0; font-size: var(--proc-fs-sm); color: var(--proc-ink-soft); font-weight: 550;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none;
}

.proc-peek-meta {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 10px; padding: 5px 9px 7px; flex: none;
}
.proc-peek-meta > div { min-width: 0; }
.proc-peek-meta span { display: block; font-size: var(--proc-fs-xs); color: var(--proc-muted); }
.proc-peek-meta b {
    display: block; font-size: var(--proc-fs-sm); font-weight: 620;
    font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.proc-peek-sec {
    display: flex; align-items: center; gap: 6px; flex: none;
    padding: 3px 9px; background: var(--proc-surface-soft);
    border-top: 1px solid var(--proc-line-soft); border-bottom: 1px solid var(--proc-line-soft);
    font-size: var(--proc-fs-xs); font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--proc-muted);
}
.proc-peek-sec .cnt {
    font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--proc-ink-soft);
    background: #fff; border: 1px solid var(--proc-line); border-radius: var(--proc-radius-pill);
    padding: 0 6px; min-width: 26px; text-align: center;   /* 3 ile 13 aynı genişlikte */
}
.proc-peek-sec .soft { font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }

/* Zincir en çok 3 satır gösterir, gerisi kendi içinde kayar; böylece uzun zincir
   kalem listesini ezmez. */
.proc-peek-chain { max-height: 78px; overflow-y: auto; overscroll-behavior: contain; flex: none; }

.proc-peek-chain-row {
    display: flex; align-items: center; gap: 6px; padding: 3px 9px;
    border: 0; border-bottom: 1px solid var(--proc-line-soft); cursor: pointer;
    width: 100%; background: none;
    text-align: left; font-family: inherit;
}
.proc-peek-chain-row:last-child { border-bottom: 0; }
.proc-peek-chain-row:hover { background: var(--proc-accent-wash); }
.proc-peek-chain-row.is-locked { cursor: default; }
.proc-peek-chain-row.is-locked:hover { background: none; }
.proc-peek-chain-row .k { font-size: var(--proc-fs-xs); font-weight: 700; color: var(--proc-muted); width: 46px; flex: none; }
.proc-peek-chain-row .no { font-size: var(--proc-fs-sm); font-weight: 620; color: var(--proc-accent-strong); font-variant-numeric: tabular-nums; }
.proc-peek-chain-row .no.is-locked { color: var(--proc-muted); font-weight: 550; font-style: italic; }
.proc-peek-chain-row .st { font-size: var(--proc-fs-xs); color: var(--proc-muted); white-space: nowrap; }
.proc-peek-chain-row .amt { font-size: var(--proc-fs-xs); font-variant-numeric: tabular-nums; color: var(--proc-ink-soft); white-space: nowrap; }

.proc-peek-empty { padding: 8px 9px; font-size: var(--proc-fs-xs); color: var(--proc-muted); }

/* Kalemler kalan tüm alanı alır ve kendi kaydırma çubuğunu üretir.
   min-height:0 olmadan flex çocuğu içeriğiyle büyür ve sabit yükseklik bozulur. */
.proc-peek-lines { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.proc-peek-lines table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.proc-peek-lines th {
    position: sticky; top: 0; z-index: 1; height: 19px; padding: 0 6px; text-align: left;
    font-size: var(--proc-fs-xs); font-weight: 650; color: var(--proc-muted);
    background: var(--proc-surface-alt); border-bottom: 1px solid var(--proc-line-soft); white-space: nowrap;
}
.proc-peek-lines td {
    height: 21px; padding: 0 6px; font-size: var(--proc-fs-xs);
    border-bottom: 1px solid #f1f4f8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proc-peek-lines tr:hover td { background: var(--proc-accent-wash); }
.proc-peek-lines .num { text-align: right; font-variant-numeric: tabular-nums; }
.proc-peek-lines .more { text-align: center; color: var(--proc-muted); font-style: italic; }

/* Kalemlerin altındaki toplam şeridi.
   İKİ KOLONLU IZGARA: etiketler ve tutarlar ayrı kolonlarda, ikisi de sağa dayalı —
   böylece etiketlerin sağ kenarı ile tutarların sağ kenarı yukarıdan aşağıya hizalı
   kalır. Satır aralığı kalem listesiyle aynı sıklıkta (line-height 1.35, ek dolgu yok).

   Sarmalayıcı <div class="row"> KULLANILMAZ: Bootstrap'in global .row kuralı her çocuğa
   width:100% verip etiketi ve tutarı alt alta düşürüyordu.

   Pencere sabit boyutlu olduğu için şerit KALEM ALANINDAN pay alır; kalem listesi kendi
   içinde kaydırılır (bkz. .proc-peek-lines). */
.proc-peek-totals {
    flex: none;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    align-items: baseline;
    border-top: 1px solid var(--proc-line);
    background: var(--proc-surface-alt);
    padding: 4px 9px 5px;
}
.proc-peek-totals > span {
    text-align: right;
    font-size: var(--proc-fs-xs);
    color: var(--proc-muted);
    line-height: 1.35;
}
.proc-peek-totals > b {
    min-width: 92px;
    text-align: right;
    font-size: var(--proc-fs-xs);
    font-weight: 640;
    font-variant-numeric: tabular-nums;
    color: var(--proc-ink);
    line-height: 1.35;
}
.proc-peek-totals > span.is-strong { color: var(--proc-ink); font-weight: 640; }
.proc-peek-totals > b.is-strong { font-size: var(--proc-fs-sm); color: var(--proc-accent-strong); }

.proc-peek-foot {
    flex: none; border-top: 1px solid var(--proc-line); background: var(--proc-surface-alt);
    padding: 4px 9px; font-size: var(--proc-fs-xs); color: var(--proc-muted);
    display: flex; align-items: center; gap: 6px;
}
.proc-peek-foot kbd {
    font-family: ui-monospace, Consolas, monospace; font-size: 9.5px;
    border: 1px solid var(--proc-line); border-bottom-width: 2px; border-radius: 3px;
    padding: 0 4px; background: #fff; color: var(--proc-ink-soft);
}

/* Yükleniyor iskeleti — pencere veri gelmeden açılır, boyutu değişmez, içerik
   gelince yerine oturur. Pencere zıplamaz. */
.proc-peek-skeleton { display: none; flex-direction: column; gap: 8px; padding: 12px 9px; }
.proc-peek.is-loading .proc-peek-skeleton { display: flex; }
.proc-peek.is-loading .proc-peek-body { display: none; }
.proc-peek-body { display: contents; }
.proc-peek-skeleton i {
    display: block; height: 9px; border-radius: 3px;
    background: linear-gradient(90deg, #eef1f6, #f7f9fc, #eef1f6);
    background-size: 200% 100%;
    animation: proc-peek-shimmer 1.1s linear infinite;
}
.proc-peek-skeleton i:nth-child(2) { width: 62%; }
.proc-peek-skeleton i:nth-child(4) { width: 78%; }
.proc-peek-skeleton i:nth-child(6) { width: 44%; }
@keyframes proc-peek-shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    .proc-peek-skeleton i { animation: none; }
}

/* Dar ekran: pencere ekrana sığmalı. Dokunmatikte hover yoktur; tetikleyiciye
   dokunmak açar, dışarı dokunmak kapatır. */
@media (max-width: 480px) {
    .proc-peek { width: min(var(--proc-peek-w), calc(100vw - 24px)); }
}

/* Numarası olmayan hücrede tire — boş hücre "veri gelmedi mi?" sorusu doğurur. */
.proc-muted-dash { color: var(--proc-muted); }

/* Ayarlar panelindeki kaydırıcılı alan (belge ipucu ayarları).
   Etiket ve ölçü çıktısı SABİT genişliktedir: değer değişince satır yerinden
   oynamaz ve panelin yüksekliği sabit kalır (Arayüz Kuralı #8). */
.proc-shell-settings-range {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
    font-weight: 600;
}

.proc-shell-settings-range > span {
    width: 124px;
    flex: none;
    white-space: nowrap;
}

.proc-shell-settings-range input[type="range"] {
    flex: 1;
    min-width: 60px;
    accent-color: var(--proc-accent);
}

.proc-shell-settings-range > output {
    width: 52px;
    flex: none;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 550;
    color: var(--proc-ink);
}

/* == 25 Teklif karşılaştırma ızgarası (/procurement/quote-comparison) ========
   Talep kalemleri SATIR, teklifler KOLON. Kolon sayısı çalışma zamanında teklif
   sayısına bağlı olduğu için RadzenDataGrid kullanılamaz; elle <table>.

   Sol blok (sıra, malzeme, miktar, tahmini fiyat) yatay kaydırmada YAPIŞIK kalır:
   teklif kolonlarına doğru kayarken hangi kalemin okunduğu kaybolmasın.
   Satır yüksekliği sabittir — seçim değiştiğinde rozet değişir, düzen kaymaz
   (Arayüz Kuralı #8).
   ========================================================================== */

.proc-cmp-scroll { overflow-x: auto; background: var(--proc-surface); }
.proc-cmp { border-collapse: separate; border-spacing: 0; background: var(--proc-surface); }
.proc-cmp th,
.proc-cmp td {
    border-right: 1px solid var(--proc-line-soft);
    border-bottom: 1px solid var(--proc-line-soft);
    padding: 0 6px;
    height: var(--proc-h-row);
    font-size: var(--proc-fs-sm);
    white-space: nowrap;
}
.proc-cmp thead th {
    background: var(--proc-surface-soft);
    color: var(--proc-ink-soft);
    font-size: var(--proc-fs-h3);
    font-weight: 600;
    text-align: left;
    border-top: 1px solid var(--proc-line);
    border-bottom: 1px solid var(--proc-line);
}
.proc-cmp .num { text-align: right; font-variant-numeric: tabular-nums; }
.proc-cmp .ctr { text-align: center; }

/* yapışkan sol blok */
.proc-cmp .st { position: sticky; background: var(--proc-surface); z-index: 3; }
.proc-cmp thead .st { z-index: 5; background: var(--proc-surface-soft); }
.proc-cmp .st1 { left: 0; width: 34px; min-width: 34px; }
.proc-cmp .st2 { left: 34px; width: 250px; min-width: 250px; white-space: normal; line-height: 1.25; }
.proc-cmp .st3 { left: 284px; width: 84px; min-width: 84px; }
.proc-cmp .st4 { left: 368px; width: 96px; min-width: 96px; border-right: 2px solid var(--proc-line); }
.proc-cmp tbody tr:hover .st { background: var(--proc-accent-wash); }

/* teklif kolon grubu: birim fiyat · satır toplamı · seç */
.proc-cmp .q-head {
    text-align: center;
    border-left: 2px solid var(--proc-line);
    background: var(--proc-surface-alt);
    padding: 4px 8px;
    height: auto;
    vertical-align: top;
}
.proc-cmp .q-head .qs { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.proc-cmp .q-head .qs b { font-size: var(--proc-fs-base); font-weight: 650; color: var(--proc-ink); }
.proc-cmp .q-head .qs span { font-size: var(--proc-fs-xs); color: var(--proc-muted); font-weight: 500; }
.proc-cmp .q-head.is-expired { opacity: .6; }
.proc-cmp .q-sub {
    text-align: right;
    font-size: var(--proc-fs-xs);
    font-weight: 600;
    color: var(--proc-muted);
    background: var(--proc-surface-soft);
}
.proc-cmp .q-sub.first { border-left: 2px solid var(--proc-line); }
.proc-cmp td.q-first { border-left: 2px solid var(--proc-line); }
.proc-cmp td.q-cell { background: var(--proc-surface); }
.proc-cmp td.q-cell.best { background: var(--proc-good-soft); color: #14532d; font-weight: 650; }

/* Fiyat verilmeyen kalem: 0,00 yazmak "bedava" gibi okunur; taralı ve seçilemez. */
.proc-cmp td.q-cell.none {
    background: repeating-linear-gradient(135deg, #fbfcfd, #fbfcfd 5px, #f1f4f9 5px, #f1f4f9 10px);
    color: var(--proc-muted);
    font-style: italic;
}
.proc-cmp td.q-cell.chosen { box-shadow: inset 0 0 0 2px var(--proc-accent); }
.proc-cmp td.q-pick { width: 34px; min-width: 34px; text-align: center; }
.proc-cmp tfoot td {
    background: var(--proc-surface-soft);
    font-weight: 650;
    border-top: 1px solid var(--proc-line);
    border-bottom: 1px solid var(--proc-line);
}
.proc-cmp tfoot td.st { z-index: 4; background: var(--proc-surface-soft); }
.proc-cmp .win { font-size: var(--proc-fs-xs); font-weight: 700; color: var(--proc-good); }
.proc-cmp .lose { font-size: var(--proc-fs-xs); color: var(--proc-muted); }

.proc-cmp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 6px 10px;
    background: var(--proc-surface-alt);
    border-top: 1px solid var(--proc-line-soft);
    font-size: var(--proc-fs-xs);
    color: var(--proc-muted);
}
.proc-cmp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* seçim özeti: tedarikçi başına grup — sipariş bölünmesi buradan çıkar */
.proc-cmp-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; padding: 10px; }
.proc-cmp-group {
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius-lg);
    background: var(--proc-surface);
    padding: 7px 9px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.proc-cmp-group b { font-size: var(--proc-fs-base); font-weight: 650; }
.proc-cmp-group .amount { font-size: 15px; font-weight: 660; font-variant-numeric: tabular-nums; }
.proc-cmp-group .lines { font-size: var(--proc-fs-xs); color: var(--proc-muted); }

/* Karşılaştırma altındaki özet şeridi: seçilen karma toplam, tek tedarikçi kıyası,
   kazanç. Değerler değiştiğinde satır yüksekliği sabit kalır (Arayüz Kuralı #8). */
.proc-modern-summary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    min-height: 34px;
    padding: 8px 10px;
    border-top: 1px solid var(--proc-line);
    background: var(--proc-surface-alt);
    font-size: var(--proc-fs-sm);
    color: var(--proc-ink-soft);
}
.proc-modern-summary-row strong { font-variant-numeric: tabular-nums; font-size: 13px; }

/* == 26 Sipariş satır ızgarası (Sipariş Düzenle) =============================
   Logo tarzı satır yönetimi: malzeme satırı, altında kendi İSKONTO SATIRLARI,
   en altta belge geneli iskonto ve her zaman duran boş "+" satırı.
   İskonto ayrı bir SATIRDIR; ızgarada iskonto kolonu yoktur.
   ========================================================================== */

.procurement-order-edit { display: flex; flex-direction: column; gap: var(--proc-gap); }
.procurement-order-edit-head { display: grid; grid-template-columns: 1fr 1fr 170px; gap: var(--proc-gap); align-items: end; }

/* bağlı belge şeridi: sipariş birden fazla teklifi ve talebi taşıyabilir */
.procurement-order-links {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 6px 8px;
    border: 1px solid var(--proc-line-soft);
    border-radius: var(--proc-radius);
    background: var(--proc-surface-alt);
}
.procurement-order-links-sep { width: 1px; height: 16px; background: var(--proc-line); }
.proc-link-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--proc-fs-xs); font-weight: 640;
    border: 1px solid var(--proc-line); border-radius: var(--proc-radius-pill);
    padding: 1px 4px 1px 9px; background: #fff; color: var(--proc-ink-soft);
}
.proc-link-chip.quote { border-color: #c3d7fb; color: var(--proc-accent-strong); background: var(--proc-accent-wash); }
.proc-link-chip.request { border-color: #dde4ee; color: var(--proc-neutral); background: var(--proc-neutral-soft); }
.proc-link-chip.discount { border-color: #bbe9ca; color: var(--proc-good); background: var(--proc-good-soft); }
.proc-link-chip button {
    width: 16px; height: 16px; border: 0; border-radius: 50%;
    background: transparent; color: var(--proc-muted); cursor: pointer; font-size: 11px; line-height: 1; padding: 0;
}
.proc-link-chip button:hover:not(:disabled) { background: var(--proc-danger-soft); color: var(--proc-danger); }

.procurement-order-toolbar {
    flex: none;
    display: flex; align-items: center; gap: var(--proc-gap-sm); flex-wrap: wrap;
}
.proc-u-flex-spacer { flex: 1; }

/* ==========================================================================
   SİPARİŞ TÜRÜ — plan menüsü, sekmeler, taksit ve çekiş ızgaraları
   (bkz. Migrations/0084)

   Tür belgenin başında büyük düğmelerle SORULMAZ; kalemler girildikten sonra
   araç şeridindeki küçük menüden seçilir. Bu yüzden yüzeyin tamamı normal
   siparişte GÖRÜNMEZ: bugünkü siparişin görüntüsü aynen kalır (Kural #8).
   ========================================================================== */

.procurement-order-toolbar-sep { width: 1px; height: 18px; background: var(--proc-line); }

.procurement-order-planmenu { position: relative; }
.procurement-order-planmenu .caret { color: var(--proc-muted); font-size: 10px; margin-left: 2px; }

/* Menü dışına tıklanınca kapanır. Görünmez ama tıklamayı yakalar; menünün
   kendisinden SONRA gelmez, altında durur. */
.procurement-order-planmenu-backdrop { position: fixed; inset: 0; z-index: 40; background: transparent; }

/* Kural #9: uçucu yüzey OPAK — altındaki ızgara satırları menünün içinden görünmemeli. */
.procurement-order-planmenu-list {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 41;
    width: 290px; display: flex; flex-direction: column; gap: 1px;
    padding: 3px;
    border: 1px solid var(--proc-line); border-radius: var(--proc-radius);
    background: var(--proc-surface);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
}
.procurement-order-planmenu-list button {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    padding: 6px 8px; text-align: left;
    border: 0; border-radius: var(--proc-radius);
    background: transparent; color: var(--proc-ink); cursor: pointer;
}
.procurement-order-planmenu-list button:hover:not(:disabled) { background: var(--proc-accent-wash); }
.procurement-order-planmenu-list button:disabled { opacity: .45; cursor: not-allowed; }
.procurement-order-planmenu-list button strong { font-size: var(--proc-fs-sm); font-weight: 640; }
.procurement-order-planmenu-list button span { font-size: var(--proc-fs-xs); color: var(--proc-muted); line-height: 1.35; }
.procurement-order-planmenu-list button.on strong::after { content: ' ✓'; color: var(--proc-accent-strong); }

/* Tür rozeti — belge şeridinde. Normal siparişte hiç çizilmez. */
.proc-order-kind-chip {
    display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
    border-radius: var(--proc-radius-pill);
    font-size: var(--proc-fs-xs); font-weight: 640;
    border: 1px solid #e3d0f7; background: #faf5ff; color: #6b21a8;
}
.proc-order-kind-chip.draw { border-color: #bbe9ca; background: var(--proc-good-soft); color: var(--proc-good); }

/* Sekmeler yalnız taksitli/çekimli belgede çizilir. */
.procurement-order-tabs {
    flex: none; display: flex; gap: 2px; padding: 0 4px;
    border-bottom: 1px solid var(--proc-line);
}
.procurement-order-tabs button {
    height: 26px; padding: 0 11px;
    border: 1px solid transparent; border-bottom: 0;
    border-radius: var(--proc-radius) var(--proc-radius) 0 0;
    background: transparent; color: var(--proc-muted);
    font-size: var(--proc-fs-sm); font-family: inherit; cursor: pointer;
}
.procurement-order-tabs button.on {
    background: var(--proc-surface); border-color: var(--proc-line);
    color: var(--proc-ink); font-weight: 640; margin-bottom: -1px;
}

/* Taksit ve çekiş ızgaraları kalem ızgarasının 16 kolonunu taşımaz; kendi
   asgari genişlikleri vardır, yoksa 7 kolonluk tabloya yatay kaydırma çıkardı. */
.proc-order-plan-lines { min-width: 860px; }
.proc-order-plan-lines thead th { position: sticky; top: 0; z-index: 2; }
.proc-order-plan-lines td { vertical-align: middle; }
.proc-order-plan-lines .proc-modern-input { height: 24px; padding: 0 5px; }

/* Taksit ve çerçeve diyaloglarının alan satırı. Kural #7: tarih alanı 150px. */
.procurement-order-plan-form { display: flex; align-items: flex-end; gap: var(--proc-gap); flex-wrap: wrap; }
.procurement-order-plan-form .procurement-status-dialog-field { flex: 1 1 150px; min-width: 0; }

.proc-u-ml { margin-left: 10px; }

/* 10 satırlık alan HEDEFTİR, dayatma değil: flex-basis 264px (10 satır + yapışkan
   başlık) ile ızgara normalde 10 satır gösterir, satır eklendikçe büyümez ve kendi
   içinde kaydırır. Pencere kısaldığında ızgara KÜÇÜLÜR — sabit yükseklik verilseydi
   alt toplam şeridi diyalogdan taşar ve kırpılırdı. */
.procurement-order-grid {
    flex: 1 1 264px;
    min-height: 120px;
    overflow: auto;
    border-top: 1px solid var(--proc-line);
    border-bottom: 1px solid var(--proc-line);
    outline: none;
}
.proc-order-lines { min-width: 1320px; }
.proc-order-lines thead th { position: sticky; top: 0; z-index: 2; }
.proc-order-lines tbody tr.proc-order-row-selected td { background: var(--proc-accent-soft); }
.proc-order-empty-row td { text-align: center; color: var(--proc-muted); font-style: italic; height: 60px; }
.proc-order-lines td { vertical-align: middle; }
.proc-order-lines .proc-modern-input { height: 24px; padding: 0 5px; }

/* iskonto satırı — eksi tutar, yeşil; Logo'daki "İndirim" satır tipinin karşılığı */
.proc-order-discount-row td { background: #f7fbf8; color: var(--proc-good); }
.proc-order-discount-row:hover td { background: #eef8f1; }
.proc-u-negative { color: var(--proc-good); font-weight: 640; }

/* Tahminin/teklifin ÜZERİNE çıkan tutar: dikkat çeker ama hata değildir — kullanıcı
   bilerek de yapabilir (acil alım, tek tedarikçi). Kırmızı yerine uyarı tonu. */
.proc-u-over { color: var(--proc-warning); font-weight: 640; }

/* ızgaranın sonundaki boş satır: ayrı "satır ekle" düğmesi yoktur */
.proc-order-new-row td { background: var(--proc-surface-alt); color: var(--proc-muted); }
.proc-add-row {
    width: 20px; height: 20px; margin-right: 7px;
    border: 1px solid var(--proc-accent-soft); border-radius: 2px;
    background: var(--proc-accent-wash); color: var(--proc-accent-strong);
    font-size: 13px; font-weight: 700; line-height: 1; padding: 0; cursor: pointer; vertical-align: -2px;
}
.proc-add-row:hover:not(:disabled) { background: var(--proc-accent); color: #fff; border-color: var(--proc-accent); }

.proc-line-flag {
    display: inline-flex; align-items: center; font-size: var(--proc-fs-xs); font-weight: 650;
    border-radius: 2px; padding: 0 5px; border: 1px solid transparent;
}
.proc-line-flag.discount { background: var(--proc-good-soft); color: var(--proc-good); border-color: #bbe9ca; }

/* tekliften sapan hücre: değişmiş değer görünür olmalı */
.proc-cell-changed { border-color: #d8b45f !important; background: #fffbef !important; }

/* ---- BELGE YERLEŞİMİ ----------------------------------------------------
   Sipariş belgesi diyaloğun tamamını kaplar: başlık şeridi, üst bilgi alanı, bağlı
   belgeler, araç şeridi, ızgara, seçili satır bilgisi, alt toplam şeridi ve durum
   çubuğu tek sütunda dizilir. Yalnız ızgara esner; diğerleri sabit kalır ki toplamlar
   ve Kaydet her zaman görünsün.

   Alt marj (padding-bottom): toplam şeridi ile Kaydet satırı pencerenin alt kenarına
   yapışmaz — kenara değen sayı okunurken pencerenin bittiği yer kaybolur. */
.rz-dialog:has(.procurement-order-doc) .rz-dialog-content {
    padding: 0;
    height: calc(100% - 42px);
    display: flex;
}
.rz-dialog:has(.procurement-order-doc) .rz-dialog-titlebar { padding: 8px 12px; }

.procurement-order-doc {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    padding-bottom: 10px;
    background: var(--proc-surface);
}

.procurement-order-doc-bar {
    flex: none;
    height: 34px;
    display: flex; align-items: center; gap: 8px;
    padding: 0 10px;
    border-bottom: 1px solid var(--proc-line);
    background: var(--proc-surface);
}
.procurement-order-doc-bar h3 { margin: 0; font-size: var(--proc-fs-h2); font-weight: 640; }
.procurement-order-no {
    font-family: ui-monospace, Consolas, monospace;
    font-size: var(--proc-fs-sm); font-weight: 650; color: var(--proc-accent-strong);
}

/* Alanlar EŞİT genişlikte değil: tedarikçi adı uzundur, durum kodları kısadır.
   Eşit bölüşümde tedarikçi kutusu taşarken durum kutuları boş yer kaplıyordu.
   Kontroller tek yükseklikte (--proc-h-control) hizalanır; sayılar sağa yaslanır. */
.procurement-order-head {
    flex: none;
    display: grid;
    /* Tedarikçi · Satış Temsilcisi · Termin · Sipariş Durumu · Fatura Durumu ·
       Para Birimi. Tedarikçi ve temsilci uzun metin taşır, durum kutuları kısa;
       oranlar buna göre. Belge tutarı başlıkta DEĞİL, alt toplam şeridindedir. */
    grid-template-columns: 1.7fr 1.4fr 1.05fr 1.05fr 1.05fr 1fr;
    gap: 8px;
    align-items: end;
    padding: 8px 10px;
    border-bottom: 1px solid var(--proc-line-soft);
    background: var(--proc-surface-alt);
}
.procurement-order-head .proc-modern-input {
    height: var(--proc-h-control);
    min-height: var(--proc-h-control);
    font-size: var(--proc-fs-sm);
}

@media (max-width: 1100px) {
    .procurement-order-head,
    .proc-ord-head { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.procurement-order-head .fld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Alan başlıkları IZGARA KOLON ADLARIYLA AYNI koyulukta: aynı işi yapıyorlar — altındaki
   değerin ne olduğunu söylüyorlar — ve farklı tonda olmaları başlık şeridini soluk,
   ızgarayı belirgin gösteriyordu.

   Renk ve kalınlık ızgara başlığından (--proc-ink-soft / 650) alındı; BOYUT alınmadı:
   etiketi büyütmek başlık şeridinin yüksekliğini artırır ve iki satırlık başlıklarda
   alanları aşağı iterdi (Arayüz Kuralı #8). */
.procurement-order-head .fld label { font-size: var(--proc-fs-xs); color: var(--proc-ink-soft); font-weight: 650; }
.procurement-order-head .fld .ro {
    height: var(--proc-h-control); display: flex; align-items: center; padding: 0 7px;
    font-size: var(--proc-fs-sm); border: 1px solid var(--proc-line-soft);
    border-radius: var(--proc-radius); background: var(--proc-surface);
    color: var(--proc-ink-soft); font-variant-numeric: tabular-nums;
}

/* Seçili satırın bilgi şeridi: ızgaraya sığmayan bilgiler burada durur. */
.procurement-order-selinfo {
    flex: none; min-height: 28px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 5px 10px;
    border-bottom: 1px solid var(--proc-line-soft);
    background: var(--proc-surface-alt);
    font-size: var(--proc-fs-xs); color: var(--proc-muted);
}
.procurement-order-selinfo b { color: var(--proc-ink); font-weight: 640; }

.procurement-order-statusbar {
    flex: none;
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    border-top: 1px solid var(--proc-line);
    background: var(--proc-surface-alt);
    border-radius: 0 0 4px 4px;
}

/* satır tipi rozeti — Logo'daki satır tipi kolonunun karşılığı */
.proc-line-type {
    display: inline-flex; align-items: center; font-size: var(--proc-fs-xs); font-weight: 650;
    border-radius: 2px; padding: 0 5px; border: 1px solid transparent;
}
.proc-line-type.item { background: var(--proc-neutral-soft); color: var(--proc-neutral); border-color: #dde4ee; }
.proc-line-type.discount { background: var(--proc-good-soft); color: var(--proc-good); border-color: #bbe9ca; }

/* Logo tarzı alt toplam şeridi */
.procurement-order-totals {
    flex: none;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid var(--proc-line);
    background: var(--proc-surface-alt); overflow: hidden;
}
.procurement-order-totals > div {
    padding: 6px 9px; border-right: 1px solid var(--proc-line-soft);
    display: flex; flex-direction: column; gap: 1px; min-height: 44px;
}
.procurement-order-totals > div:last-child { border-right: 0; background: var(--proc-surface-soft); }
.procurement-order-totals span { font-size: var(--proc-fs-xs); color: var(--proc-muted); font-weight: 600; }
.procurement-order-totals strong { font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 660; }
.procurement-order-totals .net strong { font-size: 15px; color: var(--proc-accent-strong); }

.procurement-order-stock-note,
.procurement-order-delta-note {
    font-size: var(--proc-fs-sm); color: var(--proc-muted);
    padding: 6px 8px; border-left: 3px solid var(--proc-line);
    background: var(--proc-surface-alt); border-radius: 0 var(--proc-radius) var(--proc-radius) 0;
    min-height: 30px;
}

/* teklif ekleme diyaloğundaki teklif başlığı satırı */
.proc-quote-group-row td { background: var(--proc-surface-soft); font-weight: 640; }

/* yardımcı sınıflar — ızgaralarda sayı hizası ve tıklanabilir satır */
.proc-u-num { text-align: right; font-variant-numeric: tabular-nums; }
.proc-u-center { text-align: center; }
.proc-u-clickable { cursor: pointer; }
.proc-u-clickable:hover td { background: var(--proc-accent-wash); }

/* Masraf belgesinde tam genişlik isteyen alan (kontrol notu): iki kolonlu form
   ızgarasında tek satırı kaplar, aksi hâlde not kutusu yarım genişlikte kalıyordu. */
.inv-grid .payreg-fld-wide { grid-column: 1 / -1; }

/* == LIMIT DUZENLEYICI (onay politikasi diyalogu) =========================
   Esik PARA BIRIMI BAZINDA (bkz. Migrations/0093): sec-gir-ekle seridi ustte,
   tanimli limitler altta liste hâlinde, her satirin kendi sil dugmesiyle. */
/* Diyalogda DÜZENLENEMEYEN, yalnız gösterilen değer satırı (ör. belge tipi).
   .proc-record KULLANILMAZ: o sınıf `white-space: nowrap` + `margin-left: auto`
   taşıyor. İki kolonlu alan ızgarasında uzun bir metin kolonu minimum genişliğin
   üstüne itiyor, ızgara diyalog kabuğunu aşıyor ve pencere yatay kayıyordu —
   sol taraftaki etiketler ekran dışında kalıyor, satır sonundaki işlem düğmesi
   görünmez oluyordu. */
.procurement-dialog-fixed {
    color: var(--proc-muted);
    font-size: var(--proc-fs-sm);
    line-height: var(--proc-h-control);
    overflow-wrap: anywhere;
    min-width: 0;
}

/* Yetkili penceresi — kişi ve bandını tek hamlede ekleyen kutu. Kişi seçilince
   alt/üst limit satırı ve eylem satırı açılır. */
.ap-padd-band {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 6px;
}

.ap-padd-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.proc-limit-editor { margin-top: 10px; border-top: 1px solid var(--proc-line-soft); padding-top: 10px; }
.proc-limit-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.proc-limit-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.proc-limit-table { width: 100%; }
.proc-limit-table td { vertical-align: middle; }

/* Bant boslugu artik PARA BIRIMI BAZINDA listeleniyor; her satir kendi kodunu tasir. */
.proc-gap-currency { display: inline-block; min-width: 34px; margin-right: 4px; font-variant-numeric: tabular-nums; }

/* == 21 Masraf merkezi seçimi ==============================================
   İki kademeli seçim: satır içi alan (ProcCostCenterField) ve iki bölmeli
   popup (ProcurementCostCenterPickerDialog). Ölçüler --proc-* tokenlarına
   bağlıdır; ekran yakınlaştırması ikisini birlikte büyütür. */

.cc-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-field-row { display: flex; min-width: 0; }

.cc-field-input {
    flex: 1;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.cc-field-input.is-invalid { border-color: #e8a5a5; background: #fffafa; }

.cc-field-btn {
    height: var(--proc-h-control);
    border: 1px solid var(--proc-line);
    border-left: none;
    background: var(--proc-surface-soft);
    color: var(--proc-ink-soft);
    font: 550 var(--proc-fs-sm)/1 var(--proc-font);
    padding: 0 8px;
    cursor: pointer;
    white-space: nowrap;
}
.cc-field-btn:hover:not(:disabled) {
    background: var(--proc-accent-wash);
    color: var(--proc-accent-strong);
    border-color: var(--proc-accent);
}
.cc-field-btn:disabled { opacity: .45; cursor: not-allowed; }
.cc-field-clear { width: 24px; padding: 0; color: var(--proc-muted); }
.cc-field-clear:hover { background: var(--proc-danger-soft); color: var(--proc-danger); border-color: #f0b4b4; }
.cc-field-pick { border-top-right-radius: var(--proc-radius); border-bottom-right-radius: var(--proc-radius); }

/* Mesaj satırı içerik boşken de yer kaplar — Arayüz Kuralı #8: hata belirince
   ızgara aşağı kaymaz. */
.cc-field-msg {
    min-height: 13px;
    line-height: 13px;
    font-size: var(--proc-fs-xs);
    color: var(--proc-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cc-field-msg.is-error { color: var(--proc-danger); }

/* Izgara hücresinde: "Seç…" yerine yalnız ikon genişliği kalır. */
.cc-field.is-compact .cc-field-pick { padding: 0 6px; font-size: var(--proc-fs-xs); }
.cc-field.is-compact .cc-field-msg { min-height: 0; }

/* ── Popup ───────────────────────────────────────────────────────────────── */
.cc-picker { display: flex; flex-direction: column; }

.cc-picker-tools {
    display: flex;
    align-items: center;
    gap: var(--proc-gap-sm);
    padding: 6px 8px;
    border-bottom: 1px solid var(--proc-line-soft);
    background: var(--proc-surface-alt);
    flex-wrap: wrap;
}
.cc-picker-search { width: 240px; }

/* Yükseklik PROJE SEÇİCİYLE AYNI TOKEN'DAN gelir: iki popup aynı düğme türünden
   açılıyor, farklı boyda olmaları kullanıcıya iki ayrı ekran izlenimi verirdi.
   Sabittir — masraf merkezi sayısı arttıkça pencere uzamaz, liste İÇERİDE kayar. */
.cc-picker-panes {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    overflow: hidden;
    height: var(--proc-h-picker-list);
    margin: var(--proc-gap-sm);
}
.cc-picker-pane { display: flex; flex-direction: column; min-width: 0; }
.cc-picker-pane + .cc-picker-pane { border-left: 1px solid var(--proc-line); }

.cc-picker-pane-head {
    height: var(--proc-h-row);
    display: flex;
    align-items: center;
    padding: 0 8px;
    background: var(--proc-surface-soft);
    border-bottom: 1px solid var(--proc-line);
    font-size: var(--proc-fs-xs);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--proc-muted);
}

.cc-picker-list { flex: 1; overflow-y: auto; background: var(--proc-surface); }

.cc-picker-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 8px;
    height: var(--proc-h-row);
    font-size: var(--proc-fs-sm);
    cursor: pointer;
    border-bottom: 1px solid var(--proc-line-soft);
}
.cc-picker-item:hover { background: var(--proc-accent-wash); }
.cc-picker-item.is-active,
.cc-picker-item.is-selected { background: var(--proc-accent-soft); font-weight: 600; }

/* 1. kademe seçilemez: imleç "tıklanabilir" der ama "seçilecek" demez. */
.cc-picker-item.group-only { cursor: default; }

.cc-picker-code {
    font-family: ui-monospace, Consolas, monospace;
    font-size: var(--proc-fs-xs);
    color: var(--proc-muted);
    width: 30px;
    flex: none;
}
.cc-picker-item.is-active .cc-picker-code,
.cc-picker-item.is-selected .cc-picker-code { color: var(--proc-accent-strong); }

.cc-picker-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-picker-count { font-size: var(--proc-fs-xs); color: var(--proc-muted); }

.cc-picker-empty { padding: 22px 10px; text-align: center; color: var(--proc-muted); font-size: var(--proc-fs-sm); }

/* == 22 Proje Bağlantısı seçimi ============================================
   Alan (ProcProjectField) + popup (ProcurementProjectPickerDialog). Ölçüler
   masraf merkezi seçicisiyle aynı tokenlardan gelir; iki seçici yan yana
   durduğunda hizasız görünmemeleri için. */

.pp-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-field-row { display: flex; min-width: 0; }

.pp-field-value {
    flex: 1;
    min-width: 0;
    height: var(--proc-h-control);
    display: flex;
    align-items: center;
    padding: 0 7px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
    background: var(--proc-surface);
    font-size: var(--proc-fs-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Düğme varsa kutunun sağ köşesi düzleşir; kilitli hâlde düğme yoktur ve köşe yuvarlak kalır. */
.pp-field-row:has(.pp-field-btn) .pp-field-value {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}
.pp-field-value.is-empty { color: var(--proc-muted); }
.pp-field-value.is-invalid { border-color: #e8a5a5; background: #fffafa; }

.pp-field-btn {
    height: var(--proc-h-control);
    border: 1px solid var(--proc-line);
    border-left: none;
    background: var(--proc-surface-soft);
    color: var(--proc-ink-soft);
    font: 550 var(--proc-fs-sm)/1 var(--proc-font);
    padding: 0 8px;
    cursor: pointer;
    white-space: nowrap;
}
.pp-field-btn:hover {
    background: var(--proc-accent-wash);
    color: var(--proc-accent-strong);
    border-color: var(--proc-accent);
}
.pp-field-clear { width: 24px; padding: 0; color: var(--proc-muted); }
.pp-field-clear:hover { background: var(--proc-danger-soft); color: var(--proc-danger); border-color: #f0b4b4; }
.pp-field-pick { border-top-right-radius: var(--proc-radius); border-bottom-right-radius: var(--proc-radius); }

/* Boşken de yer kaplar — hata belirince form aşağı kaymaz (Arayüz Kuralı #8). */
.pp-field-msg {
    min-height: 13px;
    line-height: 13px;
    font-size: var(--proc-fs-xs);
    color: var(--proc-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pp-field-msg.is-error { color: var(--proc-danger); }

/* Tedarikçi tanımı — benzer ad önerisi (ProcurementSupplierDialog). Boşken de yer kaplar:
   yazdıkça belirip kaybolsaydı altındaki alanlar zıplardı. */
.proc-supplier-similar {
    display: flex; align-items: center; gap: 6px; min-height: 26px;
    flex-wrap: nowrap; overflow-x: auto;
}
.proc-supplier-similar-chip {
    border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8; border-radius: 999px;
    padding: 2px 10px; font: 600 var(--proc-fs-xs)/1.4 var(--proc-font); cursor: pointer; white-space: nowrap;
}
.proc-supplier-similar-chip:hover { background: #dbeafe; }
.proc-supplier-similar-chip.is-inactive,
.proc-supplier-similar-chip.is-inactive:hover {
    border-color: var(--proc-line); background: var(--proc-surface-soft); color: var(--proc-muted); cursor: default;
}

/* ── Popup ───────────────────────────────────────────────────────────────── */
.pp-picker { display: flex; flex-direction: column; }

.pp-picker-tools {
    display: flex;
    align-items: center;
    gap: var(--proc-gap-sm);
    padding: 6px 8px;
    border-bottom: 1px solid var(--proc-line-soft);
    background: var(--proc-surface-alt);
    flex-wrap: wrap;
}
.pp-picker-search { width: 240px; }
.pp-picker-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--proc-fs-sm);
    color: var(--proc-ink-soft);
    cursor: pointer;
    user-select: none;
}

/* SABİT YÜKSEKLİK, max-height DEĞİL: kayıt sayısı arttıkça pencere uzamasın.
   max-height ile pencere az kayıtta kısa, çok kayıtta uzun oluyordu; kullanıcı aynı
   düğmeye bastığında her seferinde farklı boyutta bir pencere görüyordu.

   Ölçü belge dialoglarıyla aynı mantıkta: ekranın yüksekliğine oranlı ama bir tavanı
   var. Liste daha uzunsa İÇERİDE kaydırılır, pencere büyümez. */
.pp-picker-list {
    height: var(--proc-h-picker-list);
    overflow-y: auto;
    margin: var(--proc-gap-sm);
}
.pp-picker-list tbody tr { cursor: pointer; }

/* Uzun listede başlık satırı yukarı kaçmasın: hangi kolonun ne olduğu kaydırırken de
   görünmeli. Arka plan OPAK olmak zorunda — saydam olsaydı altından geçen satırlar
   başlığın içinden okunurdu (Arayüz Kuralı #9 ile aynı gerekçe). */
.pp-picker-list thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--proc-surface-soft);
}

/* == 23 Ödendi işareti (fatura/fiş başlığı) ================================
   İşaret ve ona bağlı alanlar başlıkta bir küme oluşturur. Kapalıyken küme
   grileşir ama YER KAPLAMAYA DEVAM EDER — kutunun açılıp kapanması formu
   itmez (Arayüz Kuralı #8). */

/* Küme TEK SATIRDIR ve tam olarak bir kontrol yüksekliğindedir. Böylece
   .procurement-order-head'in `align-items: end` kuralıyla komşu inputların ALT KENARINA
   hizalanır. Önceden dikey bir kutuydu: içindeki onay kutusu komşu inputların ETİKET
   hizasına düşüyor, ⓘ da alt satıra kayıyordu. */
.inv-paidgroup {
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--proc-h-control);
    padding: 0 8px;
    border: 1px solid var(--proc-accent-soft);
    border-radius: var(--proc-radius);
    background: var(--proc-accent-wash);
    white-space: nowrap;
}
.inv-paidgroup.is-off {
    border-color: var(--proc-line);
    background: var(--proc-surface-alt);
}

/* Kümenin kendisi zaten bir kontrol yüksekliğinde; etiket yalnız içeriği hizalar. */
.inv-paidcheck {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--proc-fs-h3);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.inv-paidcheck input { accent-color: var(--proc-accent); margin: 0; }

/* == 24 Kontrol: tıklanır özet kutusu ve seçim kolonu ======================
   Sayaç ölü bir sayı olmaktan çıktı: tıklanınca kendi süzgecini uyguluyor.
   Seçili hâl alt çizgiyle belirtilir — arka plan değişimi tek başına, dört
   kutunun yan yana durduğu şeritte yeterince okunur değildi. */

.payapp-cell-click { cursor: pointer; user-select: none; }
.payapp-cell-click:hover { background: var(--proc-accent-wash); }
.payapp-cell-click.is-on {
    background: var(--proc-accent-soft);
    box-shadow: inset 0 -2px 0 0 var(--proc-accent);
}
.payapp-cell-click span em { font-style: normal; font-weight: 500; opacity: .75; }

.payapp-check-col { width: 46px; text-align: center; }
/* Odeme rozeti kolonu: SABIT GENISLIK. Rozet metni "Odendi"/"Odenmedi"/"Kismi" arasinda
   degistiginde kolon genisligi oynarsa yanindaki tutar kolonlari da kayar (Arayuz Kurali #8). */
.payapp-pay-col { width: 92px; text-align: center; }
.payapp-check-col input { accent-color: var(--proc-accent); margin: 0; }

/* == 25 Bilgi ipucu (ⓘ) ====================================================
   Alanın yanındaki küçük işaret ve balonu. Balon OPAKTIR (Arayüz Kuralı #9):
   saydam olsaydı altındaki ızgarayla karışırdı. position: fixed olması iki işe
   yarar — ızgara hücresinin overflow'u onu kırpmaz ve açılıp kapanması formu
   itmez (Arayüz Kuralı #8). Konumu proc-hint.js hesaplar. */

.proc-hint-wrap { display: inline; }

.proc-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    padding: 0;
    margin-left: 4px;
    border: 1px solid var(--proc-line);
    border-radius: 50%;
    background: var(--proc-surface);
    color: var(--proc-muted);
    font: 700 9px/1 var(--proc-font);
    cursor: help;
    vertical-align: middle;
    user-select: none;
    flex: none;
}
.proc-hint:hover,
.proc-hint.is-open {
    border-color: var(--proc-accent);
    background: var(--proc-accent-wash);
    color: var(--proc-accent-strong);
}
.proc-hint.is-open { box-shadow: 0 0 0 2px var(--proc-accent-wash); }

.proc-hint-bubble {
    position: fixed;
    z-index: 3000;
    width: 320px;
    display: none;
    padding: 9px 11px 10px;
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius-lg);
    /* OPAK: değişken değil düz renk — tema değişkeni bir gün yarı saydam olursa
       balon okunmaz hâle gelirdi. */
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .26);
    font-size: var(--proc-fs-sm);
    color: var(--proc-ink-soft);
    line-height: 1.5;
    white-space: pre-line; /* Hints dosyasındaki \n paragraf ayracıdır */
    text-align: left;
}
.proc-hint-bubble.is-open { display: block; }

.proc-hint-bubble h6 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 5px;
    font-size: var(--proc-fs-h3);
    font-weight: 660;
    color: var(--proc-ink);
}

.proc-hint-close {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--proc-line);
    border-radius: 2px;
    background: #fff;
    color: var(--proc-muted);
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
}
.proc-hint-close:hover { background: var(--proc-danger-soft); color: var(--proc-danger); }

.proc-hint-foot {
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid var(--proc-line-soft);
    font-size: var(--proc-fs-xs);
    color: var(--proc-muted);
}

/* Örtü KALDIRILDI: kapanma artık ProcAutoClose ile fare yakınlığından yürüyor
   (belge ipucu penceresiyle aynı motor). Ekranın tamamını kaplayan görünmez bir
   katman, altındaki düğmelerin ilk tıklamasını yiyordu. */

/* == 26 Masraf Merkezi ve Proje Bağlantısı — STANDART GENİŞLİK ==============
   Kullanıcı isteği: bu iki alan hangi ekranda olursa olsun aynı genişlikte
   görünsün. Değer tek yerde durur; ekran başına ayarlanırsa aynı alan bir
   ekranda geniş, diğerinde dar kalır ve kullanıcı aynı şey olduklarını
   anlamaz (Arayüz Kuralı #3 ile aynı gerekçe).

   min-width, sabit width DEĞİL: ızgara kolonu daha genişse alan onu doldurur.
   Sabit genişlik verilseydi geniş ekranda kolonun içinde boşluk kalırdı.

   IZGARA HÜCRESİ MUAF (.is-compact): talep satırı gibi çok kolonlu ızgaralarda
   190px yatay taşma üretirdi. Orada alan hücre kadardır. */
/* Seçici alan ve popup ölçüleri — TEK YERDE. Ekran başına ayarlanırsa aynı seçici bir
   ekranda geniş, diğerinde dar kalır ve kullanıcı aynı şey olduklarını anlamaz. */
.proc {
    --proc-w-cc: 490px;
    --proc-w-project: 260px;
    --proc-h-picker-list: min(58vh, 520px);
}

/* İKİ AYRI ÖLÇÜ: masraf merkezi iki kademeli tam yolu taşır ("107 · Personel Giderleri,
   Maaş ve Ücretler — Kıdem ve İhbar Tazminatı ödemeleri" ≈ 485px). Proje ise tek satırlık
   bir ad ve müşteridir ("452435243 — Smoke Test Musterisi" ≈ 245px).

   Tek ölçü verilseydi proje alanı da 490px isterdi ve sipariş başlığındaki yedi kolonlu
   ızgarayı taşırırdı. */
.cc-field:not(.is-compact) { min-width: var(--proc-w-cc); }
.pp-field { min-width: var(--proc-w-project); }

/* Dar ekranda başlık ızgarası üç kolona iniyor; orada min-width taşma üretmesin. */
@media (max-width: 1100px) {
    .cc-field:not(.is-compact),
    .pp-field { min-width: 0; }
}

/* == 27 Seçici alanlarının hizası =========================================
   SORUN: masraf merkezi ve proje seçicilerinin altında sabit bir mesaj satırı
   var (hata metni için, Arayüz Kuralı #8). Bu satır alanı komşularından 13px
   uzun yapıyordu; başlık ızgaraları `align-items: end` kullandığı için kutunun
   ALTI hizalanıyor, dolayısıyla INPUT'lar komşu inputlardan 13px yukarıda
   kalıyordu.

   ÇÖZÜM: mesaj satırı akıştan çıkarılır. Böylece alanın yüksekliği tam olarak
   bir kontrol kadar olur ve komşularıyla hizalanır. Mesaj yine SABİT YER
   KAPLAR (absolute konumdadır, belirip kaybolurken hiçbir şeyi itmez) — kuralın
   amacı korunur.

   Alternatif "komşulara da boş mesaj satırı ekle" idi; her ekranda her alana
   dokunmak gerekirdi ve bir gün biri unutulduğunda hiza yine bozulurdu. */
.cc-field,
.pp-field { position: relative; }

.cc-field-msg,
.pp-field-msg {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 1px;
}

/* Mesaj satırı akıştan çıkınca kapsayıcının alt boşluğuna taşar; içinde seçici
   olan başlık şeritlerine o kadar yer açılır. :has() ile hedeflenir — seçici
   olmayan şeritler eskisi gibi dar kalır. */
.procurement-order-head:has(.cc-field, .pp-field) { padding-bottom: 20px; }

/* == 28 Seçici satırı =====================================================
   Masraf Merkezi ve Proje Bağlantısı kendi satırlarında durur. Sebep ölçüde:
   masraf merkezinin en uzun metni

     "107 · Personel Giderleri, Maaş ve Ücretler — Kıdem ve İhbar Tazminatı ödemeleri"

   11px yazıyla ~420px, üstüne ✕ ve "Seç…" düğmeleriyle ~485px. Altı alanlı tek
   satırlık bir başlıkta bir kolona bu genişliği vermek diğerlerini ezerdi;
   kısaltmak da kullanıcıya hangi merkezi seçtiğini göstermezdi.

   İki eşit kolon: 1320px'lik bir dialogda her biri ~630px alır, metin rahat sığar. */
.inv-head-links,
.proc-req-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Seçici alanın tabanı bu metne göre belirlendi; ızgara kolonu daha genişse alan
   onu doldurur. */


@media (max-width: 1100px) {
    .inv-head-links,
    .proc-req-links { grid-template-columns: 1fr; }
}

/* == 29 Belgeden ödeme: seçim şeridi ======================================
   Doğrudan ödeme eşiğini ve kapalıysa sebebini yazar. SABİT YER KAPLAR
   (Arayüz Kuralı #8): metni iki durumda da aynı yüksekliktedir, belirip
   kaybolmaz — aksi hâlde eşik tanımlı/tanımsız kurulumlarda altındaki ızgara
   farklı yerden başlardı. */
.proc-pick-note {
    padding: 6px 10px;
    margin-bottom: 6px;
    font-size: var(--proc-fs-xs);
    color: var(--proc-ink-soft);
    background: var(--proc-surface-alt);
    border: 1px solid var(--proc-line);
    border-radius: var(--proc-radius);
}

/* == 30 Sefer ilişkisi: salt okunur pay =================================
   Satın Alma'nın kendi ekranında paylar değiştirilemez (bağı kaynak modül
   kurar). Sayı, düzenlenebilir hâldeki kutuyla AYNI yüksekliği tutar ki
   aynı belge iki ekranda farklı satır yüksekliğiyle çizilmesin
   (Arayüz Kuralı #8). */
.inv-rel-ro {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    height: 28px;
    width: 100%;
    padding-right: 6px;
    color: var(--proc-ink);
}

/* == 23 Malzeme / Hizmet seçici ============================================
   ProcurementOrderAddItemDialog — sipariş, fatura/masraf, talep ve Dağıtım gider
   belgesi AYNI pencereyi açar. Pencere sipariş belgesiyle aynı ölçüde
   (min(1380px, 90vw) / 80vh) açıldığı için içerik yüksekliği doldurmak zorunda:
   aksi hâlde liste yukarıda sıkışır, altında boş alan kalırdı. */

.proc-additem { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }

.proc-additem-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.proc-additem-filters .proc-modern-input { height: 32px; }
.proc-additem-chk {
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
    font-size: var(--proc-fs-sm); color: var(--proc-ink-soft); cursor: pointer;
}

.proc-additem-block { display: flex; flex-direction: column; min-height: 0; }

/* Kalan yüksekliği malzeme listesi kaplar; talep kalemleri bloğu sabit boyda kalır.
   Tersi olsaydı, birkaç talep kalemi olan bir siparişte liste ekranı yiyordu. */
.proc-additem-grow { flex: 1; }
.proc-additem-block:not(.proc-additem-grow) .proc-additem-scroll { max-height: 190px; }

.proc-additem-label {
    display: flex; align-items: baseline; gap: 7px; margin-bottom: 4px;
    font-size: var(--proc-fs-xs); font-weight: 650; color: var(--proc-ink-soft);
}

.proc-additem-scroll {
    flex: 1; min-height: 0; overflow: auto;
    border: 1px solid var(--proc-line); border-radius: var(--proc-radius);
}

/* Başlık satırı kaydırırken yapışık kalır: 200 satırlık listede hangi kolonun ne
   olduğunu görmek için başa dönmek gerekmesin. */
.proc-additem-scroll thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--proc-surface-soft);
}


/* ═══════════════════════════════════════════════════════════════════════
   ONAY AYARLARI — kurulum durumu · zincir · bant ekseni · deneme

   Prototipten taşındı: docs/moduller/satin-alma/SATINALMA_LISTE_PANO_VE_ONAY_YERI_PROTOTIP.html
   Ölçüler ve renkler birebir; renk değerleri zaten modülün token setiyle
   aynı olduğu için var(--proc-*) üzerinden bağlandı.

   Ekran TEK GÖRÜNÜME sığar: kurulumun tamamı aşağı kaydırmadan okunmalı.
   Açıklama notları panel başlığındaki "?" düğmesinin altındadır; panellere
   gömüldüklerinde ekranın yarısını kaplıyorlardı.
   ═══════════════════════════════════════════════════════════════════════ */

.ap-screen { --ap-r: 5px; --ap-r-sm: 3px; }

/* ── panel ───────────────────────────────────────────────────────────── */
.ap-panel {
    border: 1px solid var(--proc-line);
    border-radius: var(--ap-r);
    background: var(--proc-surface);
    margin-bottom: 10px;
}

.ap-panel > h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 11px;
    border-bottom: 1px solid var(--proc-line-soft);
    font-size: 15px;
    font-weight: 650;
}

.ap-panel > h2 .ap-cap {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--proc-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-panel > h2 .ap-sp { flex: 1; }
.ap-body { padding: 9px 10px; }

/* Açıklama düğmesi ("?") */
.ap-hbtn {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid var(--proc-line);
    background: var(--proc-surface);
    color: var(--proc-muted);
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.ap-hbtn:hover {
    border-color: var(--proc-accent);
    color: var(--proc-accent-strong);
    background: var(--proc-accent-wash);
}

/* ── kurulum durumu kartları ─────────────────────────────────────────── */
.ap-hz {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.ap-card {
    border: 1px solid var(--proc-line);
    border-left: 3px solid #8b95a5;
    border-radius: var(--ap-r);
    background: var(--proc-surface);
    padding: 7px 10px;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.ap-card:hover { border-color: var(--proc-accent); }
.ap-card.on { outline: 2px solid var(--proc-accent); outline-offset: -2px; }
.ap-card.ok { border-left-color: var(--proc-good); }
.ap-card.warn { border-left-color: var(--proc-warning); background: var(--proc-warning-soft); }
.ap-card.bad { border-left-color: var(--proc-danger); background: var(--proc-danger-soft); }

.ap-card .ap-ct {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 650;
    font-size: 12.5px;
}

.ap-card .ap-ci {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    flex: 0 0 auto;
}

.ap-card.ok .ap-ci { background: var(--proc-good); }
.ap-card.warn .ap-ci { background: var(--proc-warning); }
.ap-card.bad .ap-ci { background: var(--proc-danger); }

/* Tek satırda sabit: durum değişince kartlar birbirini itmesin. */
.ap-card .ap-cs {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--proc-muted);
    line-height: 1.4;
    height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── sorun satırları (dar sütunda, tek satır) ────────────────────────── */
.ap-fix {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 7px;
    border: 1px solid var(--proc-line);
    border-radius: var(--ap-r);
    background: var(--proc-surface);
    margin-bottom: 4px;
}

.ap-fix:last-child { margin-bottom: 0; }
.ap-fix.warn { border-color: #fde68a; background: var(--proc-warning-soft); }
.ap-fix.bad { border-color: #fecaca; background: var(--proc-danger-soft); }
.ap-fix.ok { border-color: #bbf7d0; background: var(--proc-good-soft); }

.ap-fix .ap-fd {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: #8b95a5;
}

.ap-fix.warn .ap-fd { background: var(--proc-warning); }
.ap-fix.bad .ap-fd { background: var(--proc-danger); }
.ap-fix.ok .ap-fd { background: var(--proc-good); }

.ap-fix .ap-ft {
    flex: 1;
    min-width: 0;
    font-size: 11.5px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap-fix .ap-ft b { font-weight: 650; }

/* ── sekme şeridi ────────────────────────────────────────────────────── */
.ap-secbar {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    flex-wrap: wrap;
}

.ap-secbar .ap-sp { flex: 1; }
.ap-secbar .ap-cap { font-size: 11.5px; color: var(--proc-muted); }

/* ── iki sütunlu gövde ───────────────────────────────────────────────── */
.ap-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 382px;
    gap: 10px;
    align-items: start;
}

@media (max-width: 1240px) {
    .ap-grid { grid-template-columns: 1fr; }
}

.ap-col { display: flex; flex-direction: column; gap: 10px; }
.ap-col > .ap-panel { margin: 0; }

/* ── zincir: ne zaman → kim → ne olur ────────────────────────────────── */
.ap-chain {
    display: grid;
    grid-template-columns: 1fr 26px 1fr 26px 1fr;
    align-items: stretch;
}

@media (max-width: 1080px) {
    .ap-chain { grid-template-columns: 1fr; gap: 8px; }
    .ap-chain .ap-arw { display: none; }
}

.ap-link {
    border: 1px solid var(--proc-line);
    border-radius: var(--ap-r);
    background: var(--proc-surface);
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
    min-height: 118px;
}

.ap-link.gap { border: 1px dashed #fca5a5; background: var(--proc-danger-soft); }

.ap-link .ap-lk {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--proc-muted);
    margin-bottom: 6px;
}

.ap-link .ap-no {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--proc-ink);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
}

.ap-link.gap .ap-no { background: var(--proc-danger); }
.ap-link .ap-lv { font-size: 14px; font-weight: 660; line-height: 1.3; margin-bottom: 2px; }
.ap-link .ap-ls { font-size: 11.5px; color: var(--proc-muted); line-height: 1.5; }
.ap-link .ap-lfoot { margin-top: auto; padding-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.ap-arw { display: grid; place-items: center; color: #94a3b8; font-size: 15px; }

.ap-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

.ap-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--proc-neutral-soft);
    color: var(--proc-ink-soft);
    font-size: 11.5px;
    font-weight: 600;
}

/* ── bant ekseni ─────────────────────────────────────────────────────── */
.ap-bandrow { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }

.ap-bandrow .ap-bl {
    width: 34px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--proc-ink-soft);
    flex: 0 0 auto;
}

.ap-axis {
    flex: 1;
    display: flex;
    height: 22px;
    border: 1px solid var(--proc-line);
    border-radius: var(--ap-r-sm);
    overflow: hidden;
    background: var(--proc-neutral-soft);
}

.ap-seg {
    display: grid;
    place-items: center;
    font-size: 10.5px;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    padding: 0 4px;
    border-right: 1px solid rgba(255, 255, 255, .55);
}

.ap-seg:last-child { border-right: 0; }
.ap-seg.who { background: var(--proc-good-soft); color: var(--proc-good); }

.ap-seg.hole {
    background: repeating-linear-gradient(135deg, #fee2e2 0 6px, #fecaca 6px 12px);
    color: var(--proc-danger);
}

.ap-ticks {
    display: flex;
    margin: 1px 0 6px 42px;
    font-size: 9.5px;
    color: #8b95a5;
    justify-content: space-between;
}

.ap-ticks:last-child { margin-bottom: 0; }

/* ── deneme kutusu ───────────────────────────────────────────────────── */
.ap-try { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-try .ap-sp { flex: 1; }
.ap-tryout { margin-top: 11px; border-top: 1px dashed var(--proc-line); padding-top: 10px; }

.ap-line {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 5px 0;
    font-size: 12.5px;
    line-height: 1.5;
}

.ap-line .ap-ic { flex: 0 0 16px; text-align: center; font-weight: 800; }
.ap-line .ap-ic.y { color: var(--proc-good); }
.ap-line .ap-ic.n { color: var(--proc-muted); }
.ap-line .ap-ic.s { color: var(--proc-warning); }
.ap-line .ap-ic.x { color: var(--proc-danger); }

/* ── kural motoru ────────────────────────────────────────────────────── */
.ap-rsplit { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 12px; align-items: start; }

@media (max-width: 1080px) {
    .ap-rsplit { grid-template-columns: 1fr; }
}

.ap-rlist {
    border: 1px solid var(--proc-line);
    border-radius: var(--ap-r);
    background: var(--proc-surface);
    overflow: hidden;
}

.ap-ritem {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    padding: 9px 11px;
    border: 0;
    border-bottom: 1px solid var(--proc-line-soft);
    background: transparent;
    cursor: pointer;
}

.ap-ritem:last-child { border-bottom: 0; }
.ap-ritem:hover { background: var(--proc-surface-soft); }

.ap-ritem.on {
    background: var(--proc-accent-wash);
    box-shadow: inset 3px 0 0 var(--proc-accent);
}

.ap-ritem b { display: block; font-size: 12.5px; font-weight: 650; }
.ap-ritem span { display: block; margin-top: 2px; color: var(--proc-muted); font-size: 11.5px; }

.ap-grp {
    border: 1px solid var(--proc-line-soft);
    border-left: 3px solid var(--proc-accent);
    border-radius: var(--ap-r-sm);
    background: var(--proc-surface-soft);
    padding: 10px;
    margin-bottom: 9px;
}

.ap-grp .ap-gt {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--proc-accent-strong);
    margin-bottom: 7px;
    letter-spacing: .04em;
}

.ap-crow, .ap-chead { display: grid; grid-template-columns: 1.5fr 1fr 1fr 26px; gap: 8px; align-items: center; }
.ap-crow { margin-bottom: 6px; }
.ap-crow:last-child { margin-bottom: 0; }

.ap-chead {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--proc-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* Kural başlığı: iki sütunlu alan ızgarası. */
.ap-rfields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin-bottom: 10px;
}

.ap-rfields label { display: flex; flex-direction: column; gap: 3px; }

.ap-rfields label > span {
    font-size: 11px;
    font-weight: 650;
    color: var(--proc-muted);
}

.ap-rchecks { display: flex; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.ap-ractions { display: flex; gap: 7px; margin-top: 11px; align-items: center; flex-wrap: wrap; }
.ap-ractions .ap-sp { flex: 1; }

/* Satır kaldırma düğmesi — koşul ızgarasının dördüncü sütunu. */
.ap-xb {
    width: 22px;
    height: 22px;
    border: 1px solid var(--proc-line);
    border-radius: var(--ap-r-sm);
    background: var(--proc-surface);
    color: var(--proc-muted);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.ap-xb:hover { border-color: #e7b4b4; color: var(--proc-danger); }

.ap-rnew {
    color: var(--proc-accent-strong);
    font-weight: 650;
    font-size: 12.5px;
}

.ap-join { text-align: center; font-size: 11.5px; color: var(--proc-muted); margin: 5px 0; }

.ap-say {
    border: 1px solid #bfdbfe;
    background: var(--proc-accent-wash);
    border-radius: var(--ap-r);
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #1a3f7a;
}

.ap-say b { font-weight: 680; }

/* Deneme kutusundaki gerçek girdiler — modülde ortak bir input sınıfı yok,
   ölçüler buradaki düğmelerle aynı hizada tutulur. */
.ap-input {
    height: 30px;
    padding: 0 9px;
    border: 1px solid var(--proc-line);
    border-radius: var(--ap-r-sm);
    background: var(--proc-surface);
    color: var(--proc-ink);
    font: inherit;
    font-size: 12.5px;
}

.ap-input:focus {
    outline: 2px solid var(--proc-accent);
    outline-offset: -1px;
    border-color: var(--proc-accent);
}

/* Sahte girdi: statik gösterim kutusu, gerçek input değil. */
.ap-in {
    display: inline-flex;
    align-items: center;
    height: 27px;
    padding: 0 9px;
    border: 1px solid var(--proc-line);
    border-radius: var(--ap-r-sm);
    background: var(--proc-surface);
    font-size: 12.5px;
    color: var(--proc-ink-soft);
}

.ap-stub {
    display: inline-block;
    font-family: Consolas, monospace;
    font-size: 10px;
    color: #8b95a5;
}

.ap-code {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--proc-line-soft);
    border-radius: var(--ap-r-sm);
    background: var(--proc-neutral-soft);
    color: var(--proc-ink-soft);
    font-family: Consolas, monospace;
    font-size: 11px;
}

/* ── açıklama kutusu ("?" altında açılan) ────────────────────────────── */
.ap-why {
    margin: 0 0 10px;
    padding: 11px 12px;
    border: 1px solid #bfdbfe;
    border-radius: var(--ap-r);
    background: var(--proc-accent-wash);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--proc-ink-soft);
}

.ap-why b { color: var(--proc-ink); }
.ap-why p { margin: 0 0 7px; }
.ap-why p:last-child { margin: 0; }

/* =======================================================================
   ONAYCI VE LIMIT EDITORU (ProcurementApprovalPeopleDialog)
   Solda kim, sagda o kisinin para birimi basina bandi. Pencere genis olmak
   zorunda: dar pencerede para birimi satirlari sikisip okunmaz hale geliyordu.
   ======================================================================= */

.ap-people { display: flex; flex-direction: column; gap: 11px; }

.ap-people .ap-summary {
    padding: 9px 11px;
    border-left: 3px solid var(--proc-accent);
    border-radius: 0 var(--ap-r-sm) var(--ap-r-sm) 0;
    background: var(--proc-surface-soft);
    font-size: 12.5px;
    line-height: 1.5;
}

.ap-edit { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 12px; align-items: start; }

@media (max-width: 760px) {
    .ap-edit { grid-template-columns: 1fr; }
}

.ap-plist {
    border: 1px solid var(--proc-line);
    border-radius: var(--ap-r);
    overflow: hidden;
    background: var(--proc-surface);
}

.ap-ph {
    padding: 6px 10px;
    background: var(--proc-surface-soft);
    border-bottom: 1px solid var(--proc-line-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--proc-muted);
}

.ap-pitem {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-bottom: 1px solid var(--proc-line-soft);
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.ap-pitem:last-of-type { border-bottom: 0; }
.ap-pitem:hover { background: var(--proc-surface-soft); }
.ap-pitem.on { background: var(--proc-accent-wash); box-shadow: inset 3px 0 0 var(--proc-accent); }

.ap-pn { flex: 1; min-width: 0; }

.ap-pn b {
    display: block;
    font-size: 12.5px;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap-pn span {
    display: block;
    font-size: 10.5px;
    color: var(--proc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap-padd { padding: 8px 10px; border-top: 1px solid var(--proc-line-soft); background: var(--proc-surface-soft); }

.ap-pdet {
    border: 1px solid var(--proc-line);
    border-radius: var(--ap-r);
    background: var(--proc-surface);
    overflow: hidden;
}

.ap-dh { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-bottom: 1px solid var(--proc-line-soft); }
.ap-dh b { font-size: 12.5px; font-weight: 660; }
.ap-dh span { font-size: 11.5px; color: var(--proc-muted); }
.ap-dh .ap-sp { flex: 1; }
.ap-db { padding: 10px 11px; }

/* Para birimi satiri: kod - alt - ust - sil */
.ap-crow2, .ap-chead2 {
    display: grid;
    grid-template-columns: 54px 1fr 1fr 26px;
    gap: 8px;
    align-items: center;
}

.ap-crow2 { margin-bottom: 6px; }
.ap-crow2:last-of-type { margin-bottom: 0; }

.ap-chead2 {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--proc-muted);
    margin-bottom: 5px;
}

.ap-cc { font-weight: 700; font-size: 12.5px; }
.ap-crow2 .ap-input { height: 27px; text-align: right; }

/* Ters bant: alt limit ust limitten buyuk - kisi hicbir belgeyi onaylayamaz. */
.ap-input.bad { border-color: var(--proc-danger); background: var(--proc-danger-soft); }

/* Onaycı penceresinin para birimi bandı tablosu. Ekleme satırı tablonun İLK satırıdır:
   kutular alttaki satırlarla aynı sütunlarda durur. .proc-grid'in 760px en az genişliği
   burada kaldırılır — panel (ap-pdet) overflow:hidden olduğu için tablo taşıyor ve Üst Limit
   sütunu kesiliyordu. Sabit düzen: sütun genişlikleri içeriğe göre oynamasın. */
.ap-limit-table { min-width: 0; table-layout: fixed; }
.ap-limit-table .ap-lcol-act { width: 72px; }
.ap-limit-table .ap-lcol-cur { width: 120px; }
.ap-limit-table tr.ap-limit-addrow td { background: var(--proc-surface-soft); border-bottom-color: var(--proc-line); }

.ap-revwarn {
    color: var(--proc-danger);
    font-size: 11.5px;
    margin: -2px 0 6px 62px;
}

.ap-gaps { display: flex; flex-direction: column; gap: 4px; }

/* ═══════════════════════════════════════════════════════════════════════
   PANO GÖRÜNÜMÜ (ProcBoard)

   Prototipten taşındı: docs/moduller/satin-alma/SATINALMA_LISTE_PANO_VE_ONAY_YERI_PROTOTIP.html
   Ölçüler birebir; renkler modülün token setine bağlandı.

   Kulvarlar belge durumu tanımlarından gelir — kulvar adı, sırası ve rengi
   Tanımlar ekranından yönetilir, burada sabit liste yoktur.
   ═══════════════════════════════════════════════════════════════════════ */

.proc-board {
    --lw: 284px;
    display: flex;
    gap: 10px;
    align-items: stretch;
    padding: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--proc-surface-soft);
    border: 1px solid var(--proc-line);
    border-radius: 5px;
    min-height: 420px;
}

/* "Alanı paylaş": kulvarlar sabit genişlik yerine eşit pay alır. */
.proc-board.fit .proc-lane { flex: 1 1 0; min-width: 168px; }
.proc-board.fit .proc-lane.fold { flex: 0 0 46px; min-width: 0; }

.proc-lane {
    --c: #64748b;
    position: relative;
    flex: 0 0 var(--lw);
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--proc-line-soft);
    border-top: 3px solid var(--c);
    border-radius: 5px;
    background: var(--proc-neutral-soft);
}

/* Katlanmış kulvar: başlık dikey yazılır, kartlar gizlenir. Durumu çok olan
   belgelerde (talep: 11 durum) ekranı kullanılabilir tutan şey budur. */
.proc-lane.fold { flex: 0 0 46px; cursor: pointer; }
.proc-lane.fold .proc-lane-head { flex-direction: column; height: 100%; padding: 10px 0; align-items: center; }
.proc-lane.fold .proc-lane-head .t { writing-mode: vertical-rl; transform: rotate(180deg); }
.proc-lane.fold .proc-lane-sum,
.proc-lane.fold .proc-lane-cards { display: none; }

.proc-lane-head {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 6px 0 10px;
}

.proc-lane-head .t {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.proc-lane-head .cnt {
    min-width: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--proc-surface);
    font-size: 11.5px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.proc-lane-head .sp { flex: 1; }

.proc-lane-head .fold-btn {
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    color: var(--proc-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 13px;
}

.proc-lane-head .fold-btn:hover { color: var(--proc-accent-strong); }

/* Kulvar özeti: toplam tutar ve bekleyen karar sayısı. */
.proc-lane-sum {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1px 8px;
    min-height: 40px;
    padding: 0 10px 8px;
    border-bottom: 1px solid var(--proc-line-soft);
    color: var(--proc-muted);
    font-size: 11.5px;
}

.proc-lane-sum span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proc-lane-sum b { color: var(--proc-ink); text-align: right; font-variant-numeric: tabular-nums; }

.proc-lane-cards {
    flex: 1;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    overflow-y: auto;
}

.proc-lane-empty {
    padding: 14px 8px;
    text-align: center;
    color: var(--proc-muted);
    font-size: 11.5px;
}

/* ── kart ─────────────────────────────────────────────────────────────── */
.proc-card {
    position: relative;
    padding: 9px 10px 8px 12px;
    border: 1px solid var(--proc-line-soft);
    border-radius: 5px;
    background: var(--proc-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
    font-size: 12.5px;
    text-align: left;
    width: 100%;
    font-family: inherit;
}

/* Sol şerit: kararı bende olan belgede sarı yanar. */
.proc-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 5px 0 0 5px;
    background: var(--hl, transparent);
}

.proc-card.mine { --hl: var(--proc-warning); }

/* KART BAŞLIĞI: belge numarası (ipucu tetikleyicisi) + konu.
   Numara kendi görünümünü ProcDocNo'dan alır — burada yeniden boyanmaz, yoksa
   panodaki numara tablodakinden farklı görünürdü. Kısalan taraf konudur. */
.proc-card .nm {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-weight: 650;
    color: var(--proc-accent-strong);
    white-space: nowrap;
    overflow: hidden;
    padding-right: 6px;
    cursor: pointer;
    background: none;
    border: 0;
    padding-left: 0;
    font-size: 12.5px;
    font-family: inherit;
    text-align: left;
    width: 100%;
}

/* Konu metni daralan taraf: numara her zaman tam okunur kalmalı. */
.proc-card .nm .nm-t {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--proc-ink);
}

/* Altı çizilen yalnız konu: numaranın kendi noktalı çizgisi zaten var. */
.proc-card .nm:hover .nm-t { text-decoration: underline; }

.proc-card .props {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 8px;
    margin-top: 6px;
    color: var(--proc-muted);
    font-size: 11.5px;
}

.proc-card .props b {
    color: var(--proc-ink-soft);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.proc-card .apline {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 25px;
    margin-top: 7px;
}

.proc-card .apwhy {
    color: var(--proc-muted);
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.proc-card .ft {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--proc-line-soft);
}

/* ── görünüm seçici (Tablo / Pano) ────────────────────────────────────── */
.proc-viewseg {
    display: inline-flex;
    border: 1px solid var(--proc-line);
    border-radius: 3px;
    overflow: hidden;
    background: var(--proc-surface);
}

.proc-viewseg button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-right: 1px solid var(--proc-line);
    background: transparent;
    color: var(--proc-muted);
    font: inherit;
    font-size: 12.5px;
    white-space: nowrap;
    cursor: pointer;
}

.proc-viewseg button:last-child { border-right: 0; }
.proc-viewseg button:hover { background: var(--proc-surface-soft); }

/* SEÇİLİ TARAF: açık gri zemin + koyu metin — prototipteki ".seg button.on".
   Dolu mavi bilerek kullanılmadı: mavi bu ekranda eylem düğmelerinin rengi
   ("Filtrele", "Yeni Talep"). Görünüm seçimi eylem değil kip olduğu için
   sessiz durur, yoksa göz her listede önce oraya gider. */
.proc-viewseg button.on {
    background: var(--proc-neutral-soft);
    color: var(--proc-ink);
    font-weight: 650;
}

/* Simgeler küçülmesin: metin uzunsa flex onları ezebilir. */
.proc-viewseg button svg { flex: 0 0 auto; }

/* Pano seçenekleri kutusu */
.proc-board-opts {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 10px;
    border: 1px solid var(--proc-line);
    border-radius: 5px;
    background: var(--proc-surface-soft);
    margin-bottom: 8px;
    font-size: 12.5px;
}

.proc-board-opts label { display: inline-flex; align-items: center; gap: 6px; }
.proc-board-opts .sp { flex: 1; }
.proc-board-opts .note { color: var(--proc-muted); font-size: 11.5px; }

/* =======================================================================
   LISTE TABLOSU (prototip duzeni)

   Prototipten tasindi: SATINALMA_LISTE_PANO_VE_ONAY_YERI_PROTOTIP.html
   Radzen izgarasinin yerine gecer. Baslik satiri yapiskandir: uzun listede
   kaydirirken kolon adlari gorunur kalir.
   ======================================================================= */

.proc-ptable-wrap {
    overflow: auto;
    border: 1px solid var(--proc-line);
    border-radius: 5px;
    background: var(--proc-surface);
    /* TAHMİNİ SABİT — yalnız yedek. Gerçek sınırı proc-fit.js ölçerek koyar
       (data-proc-fit); üstteki başlık/süzgeç yüksekliği ekrana göre değişiyor ve
       tek bir sabit bir ekranda tabloyu kesip ötekinde boşluk bırakıyordu.
       Betik çalışmazsa bu değer devreye girer. */
    max-height: calc(100vh - 330px);
}

table.proc-ptable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
}

table.proc-ptable th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 34px;
    padding: 0 9px;
    border-bottom: 1px solid var(--proc-line);
    background: var(--proc-neutral-soft);
    text-align: left;
    font-size: 11.5px;
    font-weight: 650;
    color: var(--proc-ink-soft);
    white-space: nowrap;
}

table.proc-ptable td {
    height: 38px;
    padding: 0 9px;
    border-bottom: 1px solid var(--proc-line-soft);
    vertical-align: middle;
    white-space: nowrap;
}

table.proc-ptable tbody tr:hover td { background: var(--proc-surface-soft); }
table.proc-ptable tbody tr.sel td { background: var(--proc-accent-wash); }
table.proc-ptable tbody tr.sel:hover td { background: #e3ecfb; }
table.proc-ptable td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Konu hucresi: ana metin + altinda ikincil bilgi (tedarikci / kaynak). */
table.proc-ptable td .sub2 {
    display: block;
    font-size: 11px;
    color: var(--proc-muted);
    margin-top: -2px;
}

table.proc-ptable .proc-ptable-empty {
    height: 120px;
    text-align: center;
    color: var(--proc-muted);
    white-space: normal;
}

/* Islem hucresi: dugmeler tek satirda, sigmazsa alt satira dusmez - kaydirilir. */
table.proc-ptable td.acts {
    white-space: nowrap;
}

table.proc-ptable td.acts > * { vertical-align: middle; }

/* GRUPLAMA BAŞLIĞI (sipariş listesi · "Pakete Göre Grupla").
   Radzen izgarasinin GroupDescriptor'i yerine gecer. Yapiskan degil: baslik
   satiri da kaydirilinca kolon basliklariyla ust uste binerdi. */
table.proc-ptable tr.grp td {
    height: 30px;
    background: var(--proc-neutral-soft);
    border-bottom: 1px solid var(--proc-line);
    font-size: 11.5px;
    font-weight: 650;
    color: var(--proc-ink-soft);
}

table.proc-ptable tr.grp td .cnt {
    display: inline-block;
    min-width: 18px;
    margin-left: 8px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--proc-surface);
    border: 1px solid var(--proc-line);
    text-align: center;
    font-weight: 600;
    color: var(--proc-muted);
}

/* =======================================================================
   ONAY YERİ SEÇİM KARTLARI (Onay Ayarları › Genel)

   Prototipten taşındı (".opt" / ".grid2"). İki kart yan yana durur ve
   tamamı tıklanabilir: seçim küçük yuvarlağa nişan almayı gerektirmemeli.
   ======================================================================= */

.ap-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
}

.ap-opt {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px;
    border: 1px solid var(--proc-line);
    border-radius: 5px;
    background: var(--proc-surface);
    cursor: pointer;
}

/* Seçili kart: kenarlık + iç gölge. İç gölge, kenarlığı kalınlaştırmak
   yerine kullanıldı — kalınlaşan kenarlık kartı 1px oynatır ve iki kart
   arasında geçiş yaparken düzen titrerdi. */
.ap-opt.on {
    border-color: var(--proc-accent);
    background: var(--proc-accent-wash);
    box-shadow: inset 0 0 0 1px var(--proc-accent);
}

.ap-opt input { margin-top: 3px; }
.ap-opt .t { font-weight: 650; margin-bottom: 3px; }
.ap-opt .hint { font-size: 12px; color: var(--proc-ink-soft); }

.ap-opt ul {
    margin: 7px 0 0;
    padding-left: 16px;
    color: var(--proc-muted);
    font-size: 11.5px;
    line-height: 1.6;
}

/* Ayarı değiştirmenin etkisini anlatan kutu. */
.ap-note {
    margin-top: 12px;
    padding: 9px 11px;
    border: 1px solid var(--proc-line);
    border-radius: 5px;
    background: var(--proc-neutral-soft);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--proc-ink-soft);
}

.ap-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* Teknik anahtar/değer adları — metnin içinde kod olarak okunur. */
.ap-code {
    padding: 1px 5px;
    border: 1px solid var(--proc-line);
    border-radius: 3px;
    background: var(--proc-neutral-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
}

@media (max-width: 1100px) {
    .ap-grid2 { grid-template-columns: minmax(0, 1fr); }
}

/* =======================================================================
   SATIR İÇİ ONAY ("Belgenin kendi ekranı" kipi)
   ======================================================================= */

/* Onay düğmesi yeşil, reddet kırmızı (.proc-btn-danger zaten var). İkisi de
   küçük: listede her satırda tekrar ediyorlar, ana eylem gibi görünmemeliler. */
.proc-btn-approve {
    border-color: #15803d;
    background: #15803d;
    color: #fff;
}

.proc-btn-approve:hover:not(:disabled) { background: #126c33; border-color: #126c33; }
.proc-btn-approve:disabled { opacity: .55; cursor: default; }

/* Toplu işlem şeridi — listenin üstünde, süzgeç açıkken. */
.proc-bulkbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 7px 11px;
    border: 1px solid var(--proc-warning);
    border-radius: 5px;
    background: var(--proc-warning-wash, #fdf6e3);
    font-size: 12.5px;
    color: var(--proc-ink);
}

.proc-bulkbar .sp { flex: 1 1 auto; }

/* =======================================================================
   ONAYIMI BEKLEYEN ÇEKMECESİ (üst şerit)

   Ayarlar paneliyle aynı kalıp: düğmenin altına açılan, konumlandırılmış
   bir kutu. Sayfa akışını itmez — üst şerit sabit yükseklikte kalmalı.
   ======================================================================= */

.proc-apdrawer-wrap { position: relative; }

.proc-apdrawer-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 5px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
}

.proc-apdrawer-button:hover { background: rgba(255, 255, 255, .12); }

/* Sayaç rozeti. Sıfırken hiç çizilmiyor (bkz. bileşen) — "0" göstermek
   dikkat çeken ama bilgi vermeyen bir işarettir. */
.proc-apdrawer-button .cnt {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--proc-warning);
    color: #3a2a00;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.proc-apdrawer {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    /* Dar ekranda pencereyi aşmasın; border-box olmadan dolgu sınırı aşardı. */
    box-sizing: border-box;
    width: min(380px, calc(100vw - 24px));
    max-height: 62vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--proc-line);
    border-radius: 6px;
    background: var(--proc-surface);
    box-shadow: 0 12px 28px rgba(16, 24, 40, .18);
    color: var(--proc-ink);
}

.proc-apdrawer-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-bottom: 1px solid var(--proc-line);
    background: var(--proc-neutral-soft);
    border-radius: 6px 6px 0 0;
}

.proc-apdrawer-head .t { font-weight: 650; font-size: 12.5px; }
.proc-apdrawer-head .sp { flex: 1 1 auto; }

.proc-apdrawer-close {
    border: 0;
    background: transparent;
    color: var(--proc-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.proc-apdrawer-body { overflow: auto; }

.proc-apdrawer-empty {
    padding: 22px 12px;
    text-align: center;
    color: var(--proc-muted);
    font-size: 12.5px;
}

.proc-apdrawer-row {
    padding: 9px 11px;
    border-bottom: 1px solid var(--proc-line-soft);
    font-size: 12.5px;
}

.proc-apdrawer-row:last-child { border-bottom: 0; }
.proc-apdrawer-row .hd { display: flex; align-items: baseline; gap: 7px; }
.proc-apdrawer-row .hd .sp { flex: 1 1 auto; }
.proc-apdrawer-row .ty { font-size: 11px; color: var(--proc-muted); }
.proc-apdrawer-row .am { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Belgenin NEDEN onaya düştüğü: karar verirken gereken tek cümle. */
.proc-apdrawer-row .why {
    margin-top: 3px;
    font-size: 11px;
    color: var(--proc-muted);
    line-height: 1.5;
}

.proc-apdrawer-row .acts { display: flex; gap: 6px; margin-top: 7px; }

/* =======================================================================
   ÖNİZLEME ÇEKMECESİ (proc-sdrawer) — listenin ÜSTÜNE binen yan panel

   SINIF ADI BİLEREK "proc-peek" DEĞİL: o ad belge ipucu penceresinin
   (ProcDocPeek) sınıfı ve position:fixed + visibility:hidden taşıyor.
   Çekmece o adı kullanınca ipucunun gizleme kurallarını miras alıyor ve
   ekranda boş görünüyordu — bir kez yaşandı, adı ayırmak tek çözüm.

   Prototipten taşındı: SATINALMA_LISTE_PANO_VE_ONAY_YERI_PROTOTIP.html

   NEDEN DEĞİŞTİ: yan panel ızgarada kendi sütununu tutuyordu ve tabloyu her
   zaman ~380px dar bırakıyordu. Panele çoğu zaman bakılmıyor; kolonlar boşuna
   sıkışıyordu. Artık çekmece mutlak konumlu — açılıp kapanırken TABLO YERİNDEN
   OYNAMAZ, kaydırma konumu ve kolon genişlikleri korunur.

   Kulakçık yalnız seçili kayıt varken görünür; açma/kapama kuralı ProcAutoClose
   ile ayarlar paneli ve belge ipucuyla aynıdır.
   ======================================================================= */

/* ÇEKMECE KİPİ: ızgara tek sütuna iner, panel sütunu artık yok. */
/* Izgara kipi: panel sütunu kalkar. Konumlandırma dayanağı .proc-sdrawer-host'tadır. */
.proc-modern-grid-layout.sdrawer-mode {
    grid-template-columns: minmax(0, 1fr);
}

/* ÇEKMECENİN DAYANAĞI — ayrı sınıf. Çekmece artık yalnız modern ızgarada değil;
   Tedarikçiler, Faturalar gibi ekranlar başka kapsayıcı kullanıyor. Bu sınıfı
   alan her kutu çekmeceyi barındırabilir. */
.proc-sdrawer-host {
    position: relative;
    /* Izgara dışındaki kapsayıcılarda bu değişken tanımlı değil; varsayılanı burada. */
    --proc-side-w: 380px;
}

/* Kulakçık — sağ kenarda dikey şerit. */
.proc-sdrawer-tab {
    display: none;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    width: 22px;
    padding: 16px 0;
    border: 1px solid var(--proc-line);
    border-right: 0;
    border-radius: 5px 0 0 5px;
    background: var(--proc-surface);
    color: var(--proc-muted);
    box-shadow: -2px 0 8px rgba(16, 24, 40, .08);
    cursor: pointer;
    font: inherit;
    font-size: 11.5px;
    letter-spacing: .4px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transition: right .18s ease;
}

.proc-sdrawer-host .proc-sdrawer-tab.on { display: block; }
.proc-sdrawer-tab:hover { color: var(--proc-ink); background: var(--proc-surface-soft); }

/* Açıkken kulakçık çekmecenin sol kenarına kayar — gerçek bir kulp gibi. */
.proc-sdrawer-tab.open { right: var(--proc-side-w); }

/* Çekmecenin kendisi. Yan panelin bütün iç stilleri (başlık, sekmeler, kaydırma)
   .proc-modern-side-panel'den aynen gelir; burada yalnız KONUMU değişir. */
.proc-sdrawer-host .proc-sdrawer {
    position: absolute;
    top: 0;
    right: 0;

    /* IZGARA YÜKSEKLİĞİ SINIR DEĞİL. Eskiden bottom:0 ile ızgaraya geriliyordu:
       kısa listede çekmece de kısalıyor, içeriği kesiliyordu — oysa çekmecenin
       içeriği listenin uzunluğundan bağımsız.

       Üstten ızgara hizasından başlar (top:0), aşağıya ekranın dibine kadar
       iner ve altta küçük bir boşluk bırakır. Kesin yüksekliği ProcSideDrawer
       ölçer: "ekranın altına kadar" demek, çekmecenin ekranda NEREDE başladığını
       bilmeyi gerektiriyor ve bunu CSS hesaplayamaz.

       Aşağıdaki değer, betik çalışmazsa geçerli olan yedektir. */
    height: 75vh;

    /* Yan panelin kendi max-height'ı (ızgara için yazılmıştı) burada kısıtlar. */
    max-height: none;

    /* Alt sınır: çok aşağıda başlayan listede çekmece iki satıra düşmesin. */
    min-height: 320px;

    align-self: start;
    z-index: 45;
    width: var(--proc-side-w);
    border-radius: 6px 0 0 6px;
    box-shadow: -10px 0 26px rgba(16, 24, 40, .16);
    /* Kapalıyken tamamen dışarıda: görünmez ama DOM'da — açılırken içerik
       yeniden kurulmaz, sekme seçimi ve kaydırma konumu korunur. */
    transform: translateX(calc(100% + 30px));
    transition: transform .18s ease;
}

.proc-sdrawer-host .proc-sdrawer.open { transform: none; }

/* Pano kipinde çekmece de kulakçık da yok: panoda satır seçimi yerine kart var,
   kartın kendisi zaten özeti gösteriyor. */
.proc-modern-grid-layout.board-mode .proc-sdrawer-tab { display: none; }

@media (max-width: 1200px) {
    /* Dar ekranda çekmece tam genişliğe yakın açılır; 380px'lik bir şerit
       burada listenin neredeyse tamamını kaplardı zaten. */
    .proc-sdrawer-host .proc-sdrawer { width: min(var(--proc-side-w), 86vw); }
    .proc-sdrawer-tab.open { right: min(var(--proc-side-w), 86vw); }
}

/* Çekmeceyi elle kapatma. Panelin İÇERİĞİ sayfadan geldiği için düğme üste
   bindirilir — üç ekranın başlık markup'ına dokunmak gerekmesin. */
.proc-sdrawer-close {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--proc-muted);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.proc-sdrawer-close:hover {
    border-color: var(--proc-line);
    background: var(--proc-surface-soft);
    color: var(--proc-ink);
}

/* ÖNİZLENEN SATIR — toplu seçimden AYRI işaret. Fatura ve Ödeme Onayları
   ekranlarında onay kutusu toplu işlem için, satır tıklaması önizleme için;
   ikisi aynı anda farklı satırlarda olabilir ve ayırt edilebilmeli.
   Vurgu sol kenardan: zemin rengi toplu seçimin işareti, çakışmasın. */
table.payapp-grid tbody tr.peeked > td:first-child {
    box-shadow: inset 3px 0 0 var(--proc-accent);
}

/* =======================================================================
   PANO SEÇENEKLERİ AÇILIR KUTUSU

   Prototipteki "Pano seçenekleri" popover'ı. Düğmenin altına açılır, sayfa
   akışını itmez — pano her açılışta aynı yerde başlamalı.
   ======================================================================= */

.proc-bopts-wrap { position: relative; display: inline-block; }

.proc-bopts {
    position: absolute;
    top: calc(100% + 6px);

    /* SAĞA HİZALI: düğme başlık şeridinin sağ ucunda duruyor. Sola hizalıyken
       300px'lik kutu ekranın dışına taşıyor ve yarısı görünmüyordu.
       min(...) ise dar ekranda son güvence — kutu hiçbir koşulda pencereyi aşmaz.
       Aynı kalıp ayarlar panelinde de kullanılıyor. */
    right: 0;
    left: auto;
    z-index: 55;

    /* border-box ŞART: dolgu ve kenarlık genişliğe eklenseydi min(...) sınırı
       24px aşılır ve dar ekranda kutu soldan taşardı (ölçüldü: -15px). */
    box-sizing: border-box;
    width: min(300px, calc(100vw - 24px));
    padding: 10px 11px;
    border: 1px solid var(--proc-line);
    border-radius: 6px;
    background: var(--proc-surface);
    box-shadow: 0 12px 28px rgba(16, 24, 40, .18);
    font-size: 12.5px;
}

.proc-bopts-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

.proc-bopts-row > label { color: var(--proc-ink-soft); white-space: nowrap; }
.proc-bopts-row .proc-modern-select { width: 150px; }

/* Seçilen eksenin ne anlattığı: kullanıcı denemeden bilsin. */
.proc-bopts-hint {
    margin: 0 0 4px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--proc-muted);
}

.proc-bopts-sep {
    height: 1px;
    margin: 9px 0;
    background: var(--proc-line-soft);
}

.proc-bopts-foot {
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--proc-line-soft);
    font-size: 11px;
    color: var(--proc-muted);
}

.proc-bopts-saved { display: block; margin-top: 2px; }

/* Pano seçenekleri: alan kutuları iki sütun — altı kutu tek sütunda kutuyu
   gereksiz uzatıyordu. */
.proc-bopts-head {
    margin: 0 0 5px;
    font-size: 11px;
    font-weight: 650;
    color: var(--proc-ink-soft);
}

.proc-bopts-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 10px;
    margin-bottom: 4px;
}

.proc-bopts-fields .proc-inline-check { font-size: 12px; }

.proc-bopts-links {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Bağlantı gibi görünen eylemler: ayar değil, başka bir yere götüren adımlar. */
.proc-bopts-link {
    padding: 3px 0;
    border: 0;
    background: transparent;
    color: var(--proc-accent-strong);
    font: inherit;
    font-size: 11.5px;
    text-align: left;
    cursor: pointer;
}

.proc-bopts-link:hover { text-decoration: underline; }

/* KULVAR GENİŞLİK KULPU — kulvarın sağ kenarında görünmez şerit.
   Çizgi ancak üstüne gelince belirir: her kulvarın kenarında duran kalıcı bir
   çizgi panoyu kafes gibi gösteriyordu. */
.proc-lane-grip {
    position: absolute;
    top: 0;
    right: -6px;
    z-index: 3;
    width: 12px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
}

.proc-lane-grip::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 2px;
    background: transparent;
}

.proc-lane-grip:hover::before,
.proc-lane-grip.on::before { background: var(--proc-accent); }

/* Katlanmış kulvarda ve alan paylaşımında genişlik ayarı anlamsız. */
.proc-lane.fold .proc-lane-grip,
.proc-board.fit .proc-lane-grip { display: none; }

/* SÜRÜKLE-BIRAK geri bildirimi. Kulvarın KART ALANI boyanır, kulvarın tamamı
   değil: başlık ve toplam satırı yerinde kalsın, göz hedefi kaybetmesin. */
.proc-lane.drop .proc-lane-cards {
    background: color-mix(in srgb, var(--c) 10%, transparent);
    outline: 2px dashed color-mix(in srgb, var(--c) 55%, transparent);
    outline-offset: -4px;
}

/* Kartın KENDİ kulvarı: bırakmak bir şey değiştirmez, kırmızı uyarır. */
.proc-lane.nodrop .proc-lane-cards {
    background: var(--proc-danger-wash, #fef2f2);
    outline: 2px dashed #e3b1b1;
    outline-offset: -4px;
}

.proc-card-drag[draggable="true"] { cursor: grab; }
.proc-card-drag[draggable="true"]:active { cursor: grabbing; }

/* KART İŞLEM MENÜSÜ — panoda satır eylemlerinin karşılığı. Düğme kartın sağ üst
   köşesinde durur; kart içeriğinin üstüne binmemesi için yalnız kart üzerine gelince
   belirginleşir, ama her zaman TIKLANABİLİRDİR (dokunmatikte üzerine gelme yok). */
.proc-card-drag.has-menu { position: relative; }

.proc-card-menu {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--proc-radius);
    background: transparent;
    color: var(--proc-muted);
    font-size: 15px;
    cursor: pointer;
    opacity: .45;
}

.proc-card-drag.has-menu:hover .proc-card-menu,
.proc-card-menu:focus-visible {
    opacity: 1;
    border-color: var(--proc-line-soft);
    background: var(--proc-surface, #fff);
}

.proc-card-menu:hover { color: var(--proc-ink, #1f2937); }

/* Pano kartının altındaki karar düğmeleri (onay kuyruğu panosu). */
.proc-card-acts {
    display: flex;
    gap: 6px;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid var(--proc-line-soft);
}

/* BÖLÜM BAŞLIĞI ROZETİ — bölüme ait tek bir olgu, kendine satır ayırmadan.
   KPI kutularının yerini aldı: beş kutu iki satır kaplıyor ve çoğu zaten
   başka yerde yazılıydı. */
.proc-headchip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-left: auto;
    padding: 3px 9px;
    border: 1px solid var(--proc-line);
    border-radius: 11px;
    background: var(--proc-neutral-soft);
    font-size: 11.5px;
    color: var(--proc-ink-soft);
    white-space: nowrap;
}

.proc-headchip .k {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--proc-muted);
}

.proc-headchip b { font-variant-numeric: tabular-nums; }

/* PENCERE TAVANI — dashboard gibi ALT ALTA duran tablolar için.
   Ekrana sığdırma (data-proc-fit) burada yanlış olurdu: her pencere ekranın
   dibine uzanmaya çalışır, alttakiler asgari boya çöker ve sayfa yine kayar.
   Tavan, sayfanın sınırsız uzamasını engeller ama pencereler alt alta
   okunmaya devam eder — uzun tablo kendi içinde kayar. */
.proc-table-cap {
    max-height: 340px;
    overflow: auto;
}

/* "Kendi Belgesi" satırı — limit bantlarından çizgiyle ayrılır. Limit "ne kadarını
   onaylar", bu "kendi açtığını onaylayabilir mi": ayrı sorular, ayrı bölümler. */
.ap-selfrow {
    margin: 4px 0 11px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--proc-line-soft);
}

.ap-selfrow .proc-u-sm { margin-top: 3px; }

/* Belgeye özel limit / ortak limit ilişkisini anlatan kutu. */
.ap-inherit {
    margin-top: 9px;
    padding: 7px 9px;
    border-left: 3px solid var(--proc-accent);
    background: var(--proc-accent-wash);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--proc-ink-soft);
}

/* Süzgeç çubuğundaki satır içi onay kutusu (talep ekranı). Teklif ekranındaki
   .proc-inline-check ile aynı görünüm; orası kendi ızgarasında, bu ise
   .proc-modern-filter-grid hücresinde durduğu için ayrı sınıf. */
.proc-modern-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #5b6673;
    white-space: nowrap;
    cursor: pointer;
}
.proc-modern-inline-check input { cursor: pointer; }

/* ── Sıralama: sıralanabilir başlık (ProcSortTh) + "Sırala" menüsü (ProcSortSelect) ──
   Başlık metni bir düğmenin içinde durur; düğme başlığın yazı tipini ve rengini
   devralır, tablo ailesi (proc-ptable, proc-grid, payapp-grid, payreg-grid) ne olursa
   olsun başlık aynı görünür. Yön işareti her zaman 10px yer kaplar (sıralı değilken
   soluk ↕): işaret gelip gittiğinde başlık metni kaymasın. */
.proc-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
    cursor: pointer;
}

.proc-sort-lbl {
    overflow: hidden;
    text-overflow: ellipsis;
}

.proc-sort-ind {
    flex: 0 0 10px;
    width: 10px;
    font-size: 9px;
    text-align: center;
    color: var(--proc-muted);
    opacity: .45;
}

/* Sağa yaslı (tutar/miktar) sütunlarda başlık da sağda kalır: .proc-shell .money/.num kuralı. */
th.num .proc-sort-btn,
th.money .proc-sort-btn,
th.proc-num .proc-sort-btn,
th[data-numeric] .proc-sort-btn { justify-content: flex-end; width: 100%; }

th.proc-sortable:hover .proc-sort-ind { opacity: .9; }
th.is-sorted .proc-sort-btn { color: var(--proc-ink); }
th.is-sorted .proc-sort-ind { opacity: 1; color: var(--proc-accent); }
.proc-sort-btn:focus-visible { outline: 2px solid var(--proc-accent); outline-offset: 1px; }

.proc-sortsel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--proc-muted);
    white-space: nowrap;
}

/* Sabit genişlik: seçenek metni uzayıp kısaldıkça başlık şeridi oynamasın. */
.proc-sortsel .proc-modern-select { width: 230px; }

/* Ödeme Kaydı'nın dar yan panelinde menü panel genişliğine uyar; sabit 230px
   panel daraltıldığında taşardı. */
.payreg-side .proc-sortsel {
    display: flex;
    padding: 6px 8px;
    border-bottom: 1px solid var(--proc-line-soft);
}
.payreg-side .proc-sortsel .proc-modern-select { flex: 1; width: auto; min-width: 0; }

/* ── Sayfa geçişi (ProcPager) — sunucu sayfalı listeler ── */
.proc-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 2px 2px;
    font-size: 12.5px;
    color: var(--proc-muted);
}

.proc-pager-info { font-variant-numeric: tabular-nums; }

.proc-pager-btns {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.proc-pager-page {
    min-width: 96px;
    text-align: center;
    color: var(--proc-ink-soft);
    font-variant-numeric: tabular-nums;
}

.proc-pager-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--proc-line);
    border-radius: 3px;
    background: var(--proc-surface);
    color: var(--proc-ink-soft);
    font: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.proc-pager-btn:hover:not(:disabled) { background: var(--proc-surface-soft); }
.proc-pager-btn:disabled { opacity: .4; cursor: default; }