/* ============================================================================
   TOBOT TASARIM SİSTEMİ — TEK STANDART
   ============================================================================

   Bu dosya _Layout.cshtml'de EN SON yüklenir (Bootstrap ve tüm sayfa CSS'lerinden
   sonra). Amacı: Bootstrap'in ve birikmiş sayfa CSS'lerinin standartlarını ezip
   projenin kendi standardını dayatmak.

   NEDEN EN SON:
     - Bootstrap CDN _Layout:163'te yükleniyor; css/core/variables.css :159'da,
       yani ONDAN ÖNCE → variables.css'in utility sınıfları (.text-primary vb.)
       aynı özgüllük + !important olduğu için Bootstrap'e kaybediyordu.
     - Ayrıca _Layout:189'daki @RenderSectionAsync("Styles")'tan SONRA da global
       CSS yükleniyor (192-200), yani sayfa CSS'i onları ezemiyor.
   Bu iki hatanın etrafından dolaşmak yerine standardı en sona koyup net kazandırıyoruz.

   KURALLAR:
     1. Renk/ölçü/boyut token'ları css/core/variables.css'te tanımlanır; burada
        SADECE o token'lar Bootstrap'e ve bileşenlere bağlanır.
     2. Yeni sayfa CSS'inde :root TANIMLANMAZ, ad-hoc font-size/height yazılmaz.
     3. Metin rengi: her yerde #000000 — gri metin yok (koyu zemin istisnaları
        assets/css/global.css'teki .text-muted kuralında belgelenmiştir).

   REFERANS: 30px input standardı ve buton ölçüleri, "Görev Oluştur" modalında
   (#standaloneTaskModal) zaten kurulu olan ve doğrulanmış kurallardan alındı.
   Orada `body.meeting-v2-mode` + modal ID'lerine hapsedilmişti (yani standart
   yalnız toplantı ekranında geçerliydi); burada genelleştirildi.
   Kaynak: css/modules/meeting-v2/meeting-v2-workspace-modals.css:3262-3395
   ============================================================================ */

/* ============================================================================
   0. BOOTSTRAP'İ KENDİ PALETİMİZE BAĞLA
   ============================================================================
   Bootstrap 5.3 buton renklerini CSS değişkeninden DEĞİL, derlenmiş sabit hex'ten
   alır (`.btn-primary { --bs-btn-bg: #0d6efd }`). Yani sadece `--bs-primary`i
   ezmek butonları değiştirmez — her varyantın --bs-btn-* değişkenleri ezilmeli.

   Bu blok olmasaydı: site CSS'lerimizdeki maviler #065ede'ye taşındı ama
   Bootstrap butonları #0d6efd'de kalırdı → yan yana İKİ mavi. Asıl şikâyet buydu.

   Hover/active tonları Bootstrap'in kendi yöntemiyle üretildi (siyahla %20/%25
   karıştırma), böylece buton geri bildirimi korunur.
   ============================================================================ */
:root {
    --bs-primary: var(--status-progress);
    --bs-primary-rgb: 6, 94, 222;
    --bs-success: var(--status-done);
    --bs-success-rgb: 9, 179, 60;
    --bs-danger: var(--status-failed);
    --bs-danger-rgb: 255, 0, 51;
    --bs-warning: var(--status-started);
    --bs-warning-rgb: 255, 138, 0;
    --bs-secondary: var(--status-notstarted);
    --bs-secondary-rgb: 100, 116, 139;
    --bs-info: var(--t-blue-text);
    --bs-info-rgb: 2, 132, 199;
    --bs-link-color: var(--status-progress);
    --bs-link-color-rgb: 6, 94, 222;
    --bs-link-hover-color: #054bb2;
    --bs-border-color: var(--t-border);
}

.btn-primary {
    --bs-btn-bg: var(--status-progress);
    --bs-btn-border-color: var(--status-progress);
    --bs-btn-hover-bg: #054bb2;
    --bs-btn-hover-border-color: #0446a6;
    --bs-btn-active-bg: #0446a6;
    --bs-btn-active-border-color: #0446a6;
    --bs-btn-disabled-bg: var(--status-progress);
    --bs-btn-disabled-border-color: var(--status-progress);
    --bs-btn-focus-shadow-rgb: 6, 94, 222;
}

.btn-success {
    --bs-btn-bg: var(--status-done);
    --bs-btn-border-color: var(--status-done);
    --bs-btn-hover-bg: #078f30;
    --bs-btn-hover-border-color: #07862d;
    --bs-btn-active-bg: #07862d;
    --bs-btn-active-border-color: #07862d;
    --bs-btn-disabled-bg: var(--status-done);
    --bs-btn-disabled-border-color: var(--status-done);
    --bs-btn-focus-shadow-rgb: 9, 179, 60;
}

.btn-danger {
    --bs-btn-bg: var(--status-failed);
    --bs-btn-border-color: var(--status-failed);
    --bs-btn-hover-bg: #cc0029;
    --bs-btn-hover-border-color: #bf0026;
    --bs-btn-active-bg: #bf0026;
    --bs-btn-active-border-color: #bf0026;
    --bs-btn-disabled-bg: var(--status-failed);
    --bs-btn-disabled-border-color: var(--status-failed);
    --bs-btn-focus-shadow-rgb: 255, 0, 51;
}

.btn-warning {
    --bs-btn-bg: var(--status-started);
    --bs-btn-border-color: var(--status-started);
    --bs-btn-hover-bg: #cc6e00;
    --bs-btn-hover-border-color: #bf6800;
    --bs-btn-active-bg: #bf6800;
    --bs-btn-active-border-color: #bf6800;
    --bs-btn-disabled-bg: var(--status-started);
    --bs-btn-disabled-border-color: var(--status-started);
    --bs-btn-focus-shadow-rgb: 255, 138, 0;
}

.btn-secondary {
    --bs-btn-bg: var(--status-notstarted);
    --bs-btn-border-color: var(--status-notstarted);
    --bs-btn-hover-bg: #505d6f;
    --bs-btn-hover-border-color: #4b5768;
    --bs-btn-active-bg: #4b5768;
    --bs-btn-active-border-color: #4b5768;
    --bs-btn-disabled-bg: var(--status-notstarted);
    --bs-btn-disabled-border-color: var(--status-notstarted);
    --bs-btn-focus-shadow-rgb: 100, 116, 139;
}

/* Outline varyantları — metin/kenarlık rengi. Hover'da zemin dolduğu için
   metin beyaza döner; bu, gri-metin yasağının kapsamı dışı (koyu zemin). */
.btn-outline-primary { --bs-btn-color: var(--status-progress); --bs-btn-border-color: var(--status-progress); --bs-btn-hover-bg: var(--status-progress); --bs-btn-hover-border-color: var(--status-progress); --bs-btn-active-bg: var(--status-progress); --bs-btn-active-border-color: var(--status-progress); }
.btn-outline-success { --bs-btn-color: var(--status-done); --bs-btn-border-color: var(--status-done); --bs-btn-hover-bg: var(--status-done); --bs-btn-hover-border-color: var(--status-done); --bs-btn-active-bg: var(--status-done); --bs-btn-active-border-color: var(--status-done); }
.btn-outline-danger { --bs-btn-color: var(--status-failed); --bs-btn-border-color: var(--status-failed); --bs-btn-hover-bg: var(--status-failed); --bs-btn-hover-border-color: var(--status-failed); --bs-btn-active-bg: var(--status-failed); --bs-btn-active-border-color: var(--status-failed); }
.btn-outline-warning { --bs-btn-color: var(--status-started); --bs-btn-border-color: var(--status-started); --bs-btn-hover-bg: var(--status-started); --bs-btn-hover-border-color: var(--status-started); --bs-btn-active-bg: var(--status-started); --bs-btn-active-border-color: var(--status-started); }
.btn-outline-secondary { --bs-btn-color: var(--status-notstarted); --bs-btn-border-color: var(--status-notstarted); --bs-btn-hover-bg: var(--status-notstarted); --bs-btn-hover-border-color: var(--status-notstarted); --bs-btn-active-bg: var(--status-notstarted); --bs-btn-active-border-color: var(--status-notstarted); }
/* Gri metin YASAK (kurallar.md §1): ikincil outline butonun YAZISI siyah; kenarlık gri kalır
   (kenarlık kapsam dışı). Hover/aktifte zemin --status-notstarted dolar, yazı Bootstrap'in
   beyazı (#fff / #64748b ≈ 4.8:1). Koyu yüzeyler (meeting-mode / dark-mode) istisna — orada
   önceki açık ton kalır; [data-theme-version="dark"] dark-mode.css'te !important ile ayrıca ezer. */
body:not(.meeting-mode):not(.dark-mode) .btn-outline-secondary {
    --bs-btn-color: var(--t-text-main);
    --bs-btn-disabled-color: var(--t-text-main);
}

/* .bg-primary / .bg-success / … BURADA EZİLMEZ.
 *
 * Bootstrap'in kendi kuralı zaten şöyle:
 *     .bg-primary { background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important }
 * Yani yukarıda --bs-*-rgb'yi palete bağlamak ZATEN YETERLİ — ayrıca `.bg-*`'ı düz
 * renkle ezmek gereksiz olmakla kalmaz, `--bs-bg-opacity`'yi de yok eder ve
 * `.bg-opacity-10 / -25 / -50` yardımcılarını TAMAMEN BOZAR.
 *
 * Gerçek örnek (regresyon): workspace-grid-cells.js:253 görev tarihini
 *     <div class="bg-{accent} bg-opacity-10 rounded-3 …">
 * ile basıyor — yani %10 opaklıkta AÇIK bir tint bekliyor. Düz renkli ezme yüzünden
 * tint yerine DOLU mavi/kırmızı blok çıktı ve tarih metni okunmaz oldu. */

/* ============================================================================
   1. TİPOGRAFİ ÖLÇEĞİ — taban 13px
   ============================================================================ */
:root {
    --fs-xs: 11px;    /* rozet, ipucu */
    --fs-sm: 12px;    /* tablo başlığı, meta, buton */
    --fs-base: 13px;  /* gövde, input, tablo hücresi */
    --fs-md: 14px;    /* modal başlığı, vurgu */
    --fs-lg: 16px;    /* bölüm başlığı */
    --fs-xl: 20px;    /* sayfa başlığı */
    --fs-2xl: 24px;   /* nadir */

    /* ÖLÇÜ STANDARDI */
    --input-height: 30px;
    --input-font: var(--fs-base);
    --btn-min-height: 30px;
    --btn-font: var(--fs-sm);
}

/* ============================================================================
   2. FORM ALANLARI — TEK YÜKSEKLİK: 30px
   ============================================================================
   Önceki durum (ölçüldü): .form-control ~38px (Bootstrap varsayılanı),
   tekli select2 ~38px, ÇOKLU select2 30px, filtre inputları 32px,
   DataTables filtre satırı 22px. Yani "her şey 30px" sanılan standart
   gerçekte yalnız çoklu select2'de vardı ve tekli select yanında hizasızdı.

   !important gerekiyor çünkü hem Bootstrap hem select2 hem de birikmiş sayfa
   CSS'leri (ör. css/company-project-item.css:111 tekli select2'ye ~38px veriyor)
   daha yüksek özgüllükle yükseklik dayatıyor.
   ============================================================================ */

input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
select.form-select,
select.form-control,
input[type="text"].form-control,
input[type="number"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="search"].form-control,
input[type="tel"].form-control,
input[type="url"].form-control,
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control {
    height: var(--input-height) !important;
    min-height: var(--input-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: calc(var(--input-height) - 2px) !important;
    font-size: var(--input-font) !important;
    box-sizing: border-box;
}

/* textarea sabit yükseklik ALMAZ — içeriğe göre büyür (referans standarttan). */
textarea.form-control {
    height: auto !important;
    min-height: auto;
    line-height: 1.45;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: var(--input-font);
}

/* ---- select2: tekli ---- */
.select2-container--default .select2-selection--single {
    height: var(--input-height) !important;
    min-height: var(--input-height) !important;
    box-sizing: border-box;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: var(--input-font);
    line-height: calc(var(--input-height) - 2px);
    padding-top: 0;
    padding-bottom: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--input-height) - 2px);
    top: 1px;
}

/* ---- select2: çoklu (çipler tek satır, taşarsa yatay kayar) ----
   Bu kurallar assets/css/global.css:1102-1156'dan OLDUĞU GİBİ taşındı (orada
   kanıtlanmıştı, sadece 30px sabiti token'a bağlandı). Çip düzeni hassas:
   `width: max-content` + çipte `flex: 0 0 auto` olmadan çipler sıkışıyor. */
.select2-container--default .select2-selection--multiple {
    min-height: var(--input-height) !important;
    height: var(--input-height) !important;
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 6px !important;
    line-height: normal;
    scrollbar-width: none;
    box-sizing: border-box;
}

/* iç kaydırma çubuğunu inceltip görünmez yapar (tek satır temiz görünüm) */
.select2-container--default .select2-selection--multiple::-webkit-scrollbar {
    height: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    width: max-content;
    line-height: normal;
    font-size: var(--input-font);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 4px !important;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
    font-size: var(--fs-sm);
}

.select2-container--default .select2-selection--multiple .select2-search--inline {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top: 0 !important;
    height: 22px;
    line-height: 22px;
    padding: 0;
}

/* ---- OPT-IN: `select2-wrap` — seçilenler ALT SATIRA insin ----
   Varsayılan çoklu select2 tek satırdır + yatay kaydırır (yukarısı): 30px hizasını
   korur, ama çok seçimde ne seçtiğini göremezsin — kutunun dışında kalanlar gizli.
   Kitle seçimi gibi "seçtiklerinin hepsini aynı anda görmem gerek" diyen alanlarda
   bu sınıf verilir; kutu yükselir, çipler sarar. 30px kuralının BİLİNÇLİ istisnasıdır
   (kurallar.md §4) — her select2'ye değil, gerekçesi olana verilir.

   Sınıf <select>'e YAZILMAZ, İŞE YARAMAZ: select2'nin kutusu <select>'in KARDEŞİ,
   sınıf oraya geçmez. select2 init'inde verilir:

       $sel.select2({ selectionCssClass: 'select2-wrap' })

   Seçenek adı `selectionCssClass` — `containerCssClass` DEĞİL. O ad select2 4.0'ındı;
   projedeki sürüm **4.1.0** ve orada adı değişti. select2 TANIMADIĞI seçeneği sessizce
   yutar (hata yok, uyarı yok) — `containerCssClass` yazıldığında sınıf hiç eklenmemiş,
   aşağıdaki kurallar hiç eşleşmemişti. Sınıf `.select2-selection` üzerine iner.
   Taban kurallar `!important` olduğu için burada da gerekli. */
.select2-container--default .select2-selection--multiple.select2-wrap {
    height: auto !important;
    min-height: var(--input-height) !important;
    flex-wrap: wrap !important;
    align-items: flex-start;
    overflow: visible;
    padding: 3px 6px !important;
    gap: 3px;
}

.select2-container--default .select2-selection--multiple.select2-wrap .select2-selection__rendered {
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 3px;
}

/* Çipler küçülür: sarınca dikeyde yer kaplıyorlar, punto düşmezse kutu şişer. */
.select2-container--default .select2-selection--multiple.select2-wrap .select2-selection__choice {
    margin-right: 0 !important;
    padding: 0 6px !important;
    font-size: var(--fs-xs) !important;
    line-height: 1.6;
}

/* Kaldır (×) düğmesi de çiple birlikte küçülsün — yoksa çip onun boyunda kalır. */
.select2-container--default .select2-selection--multiple.select2-wrap .select2-selection__choice__remove {
    font-size: var(--fs-xs);
    padding: 0 4px 0 0;
}

/* container yüksekliğini de hizala (bazı temalarda ayrı yükseklik veriyor) */
.select2-container .select2-selection--multiple {
    box-sizing: border-box;
}

/* ---- kenarlık / odak / placeholder — TEK STANDART ----
   Daha önce her katman kendi değerini veriyordu: modal içi `border-radius: 8px` +
   focus `#3b82f6`, sayfa inputları Bootstrap varsayılanı (6px, #86b7fe),
   company-project-item.css select2'ye `#ced4da`. Hepsi buraya toplandı. */
.form-control,
.form-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--t-border-strong);
    border-radius: var(--radius-md);
}

.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--status-progress);
    box-shadow: 0 0 0 2px rgba(6, 94, 222, 0.15);
    outline: none;
}

/* KESİN KURAL: placeholder da SİYAH — gri metin yok (bilinçli karar, değiştirme). */
.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: #000000;
    font-size: var(--fs-sm);
    opacity: 1;
}

/* ---- label ---- */
.form-label {
    font-size: var(--fs-sm);
    margin-bottom: 4px;
    font-weight: 500;
}

/* ============================================================================
   3. BUTONLAR
   ============================================================================
   .btn-xs / .btn-xxs projede GLOBAL tanımlı değildi; 5 ayrı yerde kapsam kapsam
   kopyalanmıştı (datatable-shared.css:167, global.css:2080 [sadece .modal-body
   altı], datatable-corporate.css:1060 VE :1187 [aynı dosyada iki kez],
   admin/task/tracking/tracking.css:273, scheme-reference/create/css/page.css:44).
   Yani bir modal/DT sarmalayıcısı dışında `btn-xs` yazan hiçbir stil almıyordu.
   Tek tanım artık burada.
   ============================================================================ */
/* NOT: `gap` BİLEREK kullanılmıyor. Mevcut butonların çoğu ikon boşluğunu
   `<i class="... me-1">` ile veriyor; gap eklenirse çift boşluk olur. */
.btn {
    min-height: var(--btn-min-height);
    padding: 0.25rem 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-size: var(--btn-font);
}

.btn-sm {
    min-height: 26px;
    padding: 0.15rem 0.6rem;
    font-size: var(--fs-sm);
}

.btn-xs,
.btn-xxs {
    min-height: 22px;
    padding: 0.1rem 0.5rem;
    font-size: var(--fs-xs);
    line-height: 1.1;
}

/* İkon butonları (kare) — satır aksiyonlarının tek dili.
 *
 * DİKKAT — seçici `.btn.btn-icon`, yalnız `.btn-icon` DEĞİL:
 * `btn-icon` bu projede ÖNCEDEN beri genel bir "ikon" sınıfı olarak da kullanılıyor
 * (buton değil, <i> etiketi): _LeftSidebarModullerNew.cshtml:14 `<i class="fas fa-cubes btn-icon">`,
 * _LeftSidebarQuickMenuNew.cshtml:34,42,50… Scope'suz yazıldığında o <i>'lere 30×30
 * dayatıp sol menü satırlarını iki satır yüksekliğine çıkarıyordu. */
.btn.btn-icon {
    width: var(--btn-min-height);
    height: var(--btn-min-height);
    min-height: var(--btn-min-height);
    padding: 0;
}

.btn.btn-icon.btn-sm {
    width: 26px;
    height: 26px;
    min-height: 26px;
}

.btn.btn-icon.btn-xs {
    width: 22px;
    height: 22px;
    min-height: 22px;
}

/* Buton içindeki ikon boyu metne bağlansın. */
.btn i {
    font-size: 1em;
    line-height: 1;
}

/* Satır aksiyonları — TEK DİL: .btn-icon.btn-sm + solid renk + title tooltip.
   Önceden iki ayrı dil vardı: Duyuru `btn-xs ann-action-btn` solid (kendi ölçüsünü
   yazıyordu), Anket `btn-group-sm` outline (bitişik grup). Kopya AÇMA — yeni liste
   ekranı da bu sarmalayıcıyı kullanır.
   Kullanım: <span class="row-actions"><button class="btn btn-sm btn-icon btn-warning" title="…"><i class="fa fa-pen"></i></button>…</span> */
.row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* btn-close bir ikon butonudur; yukarıdaki .btn kuralları onu bozmasın. */
.btn-close {
    min-height: auto;
    padding: 0.25em;
    gap: 0;
}

/* ============================================================================
   4. CHIP — filtre/durum çipi (TEK TANIM)
   ============================================================================
   Önceden ÜÇ ayrı implementasyon vardı, üçü de farklı ölçüde:
     css/admin-announcement.css:190        .ann-chip          (radius 20px)
     css/v2/workspace-task-project-modal.css:1682 .pd-progress-chip (radius 999px)
     css/v2/workspace-task-project-modal.css:2129 .pd-status-chip   (radius 9px)
   Yeni çip gerektiğinde .chip kullan; dördüncü bir kopya AÇMA.
   ============================================================================ */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--t-border);
    background: #fff;
    border-radius: 999px;
    padding: 3px 12px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #000000;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.chip:hover {
    background: var(--t-bg);
}

.chip.active,
.chip[aria-pressed="true"] {
    background: var(--status-progress);
    border-color: var(--status-progress);
    color: #ffffff;
}

/* Kayıt numarası çipi — detay modallarında BAŞLIĞIN sağında "@1234", mavi; tıklanınca panoya
   kopyalanır (td-modal core/dom.js .chip-id tıklama işleyicisi). Sabit yer: sekme şeridinde
   gezinmesin diye başlığa alındı (2026-09-04). */
.chip-id {
    cursor: pointer;
    padding: 1px 10px;
    font-variant-numeric: tabular-nums;
    user-select: none;
    color: var(--status-progress);
    border-color: var(--status-progress);
    background: #ffffff;
    font-size: var(--fs-sm);
    line-height: 1.4;
}
.chip-id:hover { background: var(--t-blue-light); }
.chip-id.chip-id--copied { background: var(--status-progress); color: #ffffff; }
.chip-id:empty { display: none; }

/* Durum çipi — rengi token'dan alır: <span class="chip chip-status" style="--chip-color: var(--status-done)"> */
.chip-status {
    cursor: default;
    border-color: var(--chip-color, var(--t-border));
    color: #000000;
}

.chip-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--chip-color, var(--status-notstarted));
    flex: 0 0 auto;
}

/* "Pasif" rozeti — YÖNETİM/İZLEME ekranlarında pasif (CompanyProject.Status = false) ya da
   silinmiş gruba bağlı satırı işaretler. Kullanıcı kararı 2026-09-21: bu ekranlarda kayıt
   GİZLENMEZ (yönetici izleme yüzeyi), yalnız rozetle ayrışır; gizleme kapısı çalışma
   ekranlarında kalır (docs/kurallar/plan-proje-kurallari.md §1a).
   Kullanım: <span class="chip chip-passive" title="Pasif grup">Pasif</span>
   Yeni izleme ekranı da BU sınıfı kullanır; dördüncü bir rozet kopyası AÇMA. */
.chip-passive {
    cursor: default;
    padding: 1px 8px;
    font-size: var(--fs-xs);
    font-weight: 600;
    border-color: var(--status-notstarted);
    background: var(--t-bg);
    color: #000000;
}

.chip-passive:hover { background: var(--t-bg); }

/* Sayı çipi — düğmenin SAĞ ÜST köşesinde kayıt sayısı (2026-10-16: İş Yönetimi / Kurumsal düğmeleri,
   _HeaderTopMenus.cshtml; kural docs/kurallar/workspace-gorunum-sayaclari.md). .menu-badge'den farkı:
   sabit 20px daire değil, çok haneli sayıya göre genişleyen hap. Kapsayıcı position:relative olmalı
   (.nav-item zaten öyle). Mavi dolgu koyu yüzeydir → metin beyaz (kurallar.md §1 istisnası). */
.count-chip {
    position: absolute;
    top: -7px;
    right: -6px;
    z-index: 5;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    border: 1px solid var(--t-surface);
    background: var(--status-progress);
    color: #ffffff;
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}
.count-chip--zero { background: var(--status-notstarted); }
/* Satır içi kip — menü satırında (Ayarlar > Formlar > Onaylarım) metnin sağına yaslanır. */
.count-chip--inline { position: static; margin-left: auto; }

/* ============================================================================
   5. EMPTY / LOADING / ERROR STATE (TEK TANIM)
   ============================================================================
   Projede boş-durum bileşeni YOKTU; her ekran kendi string'ini yazıyordu:
     approval/inbox.js:36            "Bekleyen onayınız yok. 🎉"
     company-info.js:554/561/584 + markup  aynı <tr><td colspan> DÖRT KEZ
     FormFill/Index.cshtml           "<div class='text-muted'>Yükleniyor…</div>"
   Kullanım: <div class="state-empty"><i class="state-icon fa-solid fa-inbox"></i>
             <p class="state-title">…</p><p class="state-desc">…</p></div>
   ============================================================================ */
.state-empty,
.state-loading,
.state-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 16px;
    color: #000000;
}

.state-empty .state-icon,
.state-loading .state-icon,
.state-error .state-icon {
    font-size: var(--fs-2xl);
    margin-bottom: 10px;
    opacity: 0.35;
}

.state-error .state-icon {
    color: var(--status-failed);
    opacity: 1;
}

.state-empty .state-title,
.state-loading .state-title,
.state-error .state-title {
    font-size: var(--fs-md);
    font-weight: 600;
    margin: 0 0 4px;
}

.state-empty .state-desc,
.state-loading .state-desc,
.state-error .state-desc {
    font-size: var(--fs-base);
    margin: 0;
}

/* Tablo içinde kullanım: <tr><td colspan="N"><div class="state-empty">…</div></td></tr> */
td > .state-empty,
td > .state-loading,
td > .state-error {
    padding: 24px 12px;
}

/* ============================================================================
   6. GENİŞ MODAL (TEK TANIM)
   ============================================================================
   "Oluştur akışı = MODAL" kuralının (kurallar.md §8) taşıyıcısı: tasarımcı gibi
   geniş araçlar yeni sayfaya YÖNLENDİRMEZ, aynı modalı genişletir.
   fullscreen DEĞİL — kenarlarda boşluk kalır, altındaki bağlam görünür durur.

   Kullanım: MARKUP'ta sabit — <div class="modal-dialog modal-wide modal-dialog-scrollable">
   JS ile açıp kapatMA. Sihirbazda adıma göre toggle edildiğinde modal her sekmede
   büyüyüp küçülüyor ve dikeyde zıplıyordu; boy/konum kullanıcının güvendiği sabittir,
   adım yalnız içeriktir. İçeriğe göre boyut değiştirmesi gereken bir modal varsa
   `modal-expandable` geçişiyle birlikte kullan — ama önce gerçekten gerekli mi diye sor.

   Önceden `.ann-modal-wide` adıyla yalnız admin-announcement.css'te vardı;
   Anket Yönetimi de aynı davranışı isteyince kopyalanmak yerine buraya taşındı.
   ============================================================================ */
.modal-dialog.modal-wide {
    max-width: calc(100vw - 64px);
    margin: 24px auto;
}

.modal-dialog.modal-wide.modal-dialog-scrollable {
    height: calc(100vh - 48px);
}

/* Dialog'a yükseklik vermek YETMEZ. Bootstrap `.modal-content`'e `max-height:100%`
   verir — `height` değil — yani kutu İÇERİĞİ kadar kalır. Sonuç: az içerikli adımda
   (ör. sihirbazın önizleme adımı, 0 alanlı form) modal cüceleşir, çok içerikli adımda
   uzar; sekme değiştikçe boy zıplar. `height:100%` kutuyu dialog'a DOLDURUR: başlık ve
   footer sabit kalır, `.modal-body` (scrollable varyantında zaten `overflow-y:auto`)
   kalan yüksekliği alır ve gerekirse kaydırır.

   DİKKAT: bunu `.modal-body`'ye `d-flex flex-column` + host'a `flex-grow-1` vererek
   ÇÖZMEYE ÇALIŞMA — denendi ve tasarımcıyı kırdı: host'un `overflow:hidden`'ı
   (admin-dynamicform.css `#form-designer-host`) içeriği kaydırmadan KESİYOR. Yükseklik
   kutuya verilir, gövdenin akışına dokunulmaz. */
.modal-dialog.modal-wide.modal-dialog-scrollable .modal-content {
    height: 100%;
}

/* Genişleme animasyonlu olsun (mod takasında zıplama olmasın).
   Scope'suz `.modal-dialog` kuralı YAZILMAZ (kurallar.md §10) — modal opt-in eder:
   <div class="modal fade modal-expandable"> */
.modal-expandable .modal-dialog {
    transition: max-width .2s ease;
}

/* Tasarımcı/analitik modal gövdesi — tuval zemini (nötr açık yüzey token'ı) */
.modal-body-canvas {
    background: var(--t-bg);
}

/* ============================================================================
   7. ŞABLON KARTI IZGARASI (TEK TANIM)
   ============================================================================
   "Liste + Şablonlar sekmesi" deseninin (kurallar.md §8) şablon sekmesi.
   Önceden yalnız Duyuru'da `.ann-tpl-*` adıyla vardı; Anket Yönetimi de aynı
   sekmeyi kazanınca ikinci kopya açılmadı, bileşen buraya çıkarıldı.
   ============================================================================ */
.tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    padding: 14px;
}

/* Boş durum tek kart hücresine sıkışmasın — tüm ızgarayı kaplasın */
.tpl-grid > .state-empty { grid-column: 1 / -1; }

.tpl-card {
    background: #fff;
    border: 1px solid var(--t-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}

.tpl-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }

.tpl-card-head {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 14px 8px;
}

.tpl-icon { font-size: var(--fs-2xl); line-height: 1; }
.tpl-name { font-weight: 700; font-size: var(--fs-md); }
.tpl-sub { display: flex; gap: 6px; margin-top: 3px; }
.tpl-sub .badge { font-size: var(--fs-xs); }

.tpl-preview {
    flex: 1;
    margin: 0 14px;
    padding: 8px 10px;
    background: var(--t-bg);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    max-height: 110px;
    overflow: hidden;
    position: relative;
    pointer-events: none;
}

.tpl-preview::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 34px;
    background: linear-gradient(transparent, var(--t-bg));
}

.tpl-preview img { max-width: 100%; height: auto; }

.tpl-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
}

/* ============================================================================
   8. SİHİRBAZ ADIM ŞERİDİ (TEK TANIM)
   ============================================================================
   "Oluştur akışı = MODAL" (kurallar.md §8) kuralının ikinci yarısı: modal AÇILDI
   diye kullanım kolaylaşmıyor — Form Yönetimi modalı 9 aksiyonu (Kaydet / Taslağı
   Kaydet / Yayınla / Onay Akışı / Hesaplanan Alanlar / Şablon / Önizle / Vazgeç /
   Mod Değiştir) tek footer'a dizmişti ve hangisinin ne yaptığı belirsizdi.
   Şerit sırayı GÖRÜNÜR kılar: her adımda tek birincil aksiyon (İleri) kalır.

   Serbest gezinme: adım başlıkları TIKLANABİLİR (kullanıcı kararı). Yeni kullanıcı
   İleri ile yönlendirilir, deneyimli olan doğrudan adıma atlar.

   Renk YOK, punto/kalınlık VAR (kurallar.md §1): geçilmemiş adımın metni de #000;
   ayrım rozet zemininde ve kalınlıkta. Gri YALNIZ rozet zeminidir (--status-idle),
   metin değil.

   Kullanım:
     <div class="wizard-steps">
       <button class="wizard-step is-current" data-step="1">
         <span class="wizard-step-no">1</span>Bilgiler
       </button>
       …
     </div>
   ============================================================================ */
.wizard-steps {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 12px;
    border-bottom: 1px solid var(--t-border);
    background: var(--t-surface);
    overflow-x: auto;
    white-space: nowrap;
}

.wizard-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: var(--fs-base);
    color: var(--t-text-main);
    cursor: pointer;
}

.wizard-step:hover { background: var(--t-bg); }

/* Adım rozeti — ayrım burada, metinde değil. */
.wizard-step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--status-idle);
    font-size: var(--fs-xs);
    font-weight: 600;
    flex: 0 0 auto;
}

.wizard-step.is-current {
    font-weight: 700;
    border-bottom-color: var(--t-primary);
}

.wizard-step.is-current .wizard-step-no {
    background: var(--t-primary);
    color: #fff;
}

.wizard-step.is-done .wizard-step-no {
    background: var(--status-done);
    color: #fff;
}

/* Erişilemeyen adım (ör. form henüz kaydedilmedi): SOLDURMA yok — opacity metni de
   griye çeker, §1 ihlali. Kilit ikonu + not-allowed yeter; tıklayınca sebep söylenir. */
.wizard-step[aria-disabled="true"] { cursor: not-allowed; }
.wizard-step[aria-disabled="true"]:hover { background: none; }

/* Adım gövdesi — yalnız aktif olan görünür. GİZLEME d-none İLE (kurallar.md §11c). */
.wizard-pane { min-height: 0; }

/* tb-select (tek seçim kutusu) stilleri: css/core/tb-select.css — iki layout da yükler. */

/* ============================================================================
   9. ORTAK İPUCU — TbTip (assets/js/global/tb-tip.js)
   ============================================================================
   Native title YERİNE. Görünüm workspace'in .tooltip-content kutusu (v3/workspace.css)
   — burada yalnız "JS ile konumlanan, sayfaya tek kez eklenen" kipi tanımlanır:
   position:fixed (overflow'lu dock/panel içinde kırpılmaz), ok yok, tıklanamaz.
   Biçim: kalın başlık satırı + gövde ("Durum · ayrıntı · ne yapmalı").
   z-index: Teams dock paneli 200101 → ipucu onun üstünde kalmalı.
   ============================================================================ */
.tooltip-content.tb-tip {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
    width: auto;
    max-width: 280px;
    padding: 8px 10px;
    font-size: var(--fs-sm);
    color: #000000;
    pointer-events: none;
    z-index: 200200;
}
.tooltip-content.tb-tip[hidden] { display: none; }
.tooltip-content.tb-tip::before { display: none; }
.tb-tip .tb-tip-title { display: block; font-weight: 700; font-size: var(--fs-base); }

/* ============================================================================
   10. KİŞİ DURUM İKONU — .tb-presence (assets/js/global/presence.js)
   ============================================================================
   Avatarın sağ altında 10px ikon (onaylı tasarım docs/teams-durum-ve-bildirim/onay.html).
   Kapsayıcı position:relative olmalı (.tmd-presence-wrap). Fare/klavye odağında 1,8×;
   ipucu TbTip ile (data-tb-tip-title/data-tb-tip). Durum kodları V3 /presence ile aynı.
   Renkler palet token'larından: uygun=--status-done, meşgul=--status-failed,
   odakta=--status-complete, izinde=--status-progress, uzakta=--warning-color,
   sahada=--status-started, mesai dışı/çevrimdışı=--status-notstarted (yalnız kenarlık).
   "Hareketi azalt" açıkken animasyon yok.
   ============================================================================ */
.tb-presence {
    --pc: var(--status-notstarted);
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 10px;
    height: 10px;
    box-sizing: content-box;
    border-radius: var(--radius-round);
    border: 2px solid var(--t-surface);
    background: var(--pc);
    cursor: help;
    outline: none;
    transition: transform .15s ease;
    z-index: 1;
}
.tb-presence[hidden] { display: none; }
.tb-presence:hover,
.tb-presence:focus-visible { transform: scale(1.8); z-index: 3; }
.tb-presence:focus-visible { box-shadow: 0 0 0 2px var(--status-progress); }
.tb-presence[data-s="available"] { --pc: var(--status-done); }
.tb-presence[data-s="call"] { --pc: var(--status-failed); }
.tb-presence[data-s="call"]::after {
    content: ""; position: absolute; inset: -2px; border-radius: var(--radius-round);
    border: 2px solid var(--status-failed); animation: tbPresencePulse 1.6s ease-out infinite;
}
.tb-presence[data-s="meeting"] { --pc: var(--status-failed); }
.tb-presence[data-s="presenting"] { --pc: var(--status-failed); animation: tbPresenceBlink 1.2s ease-in-out infinite; }
.tb-presence[data-s="dnd"] { --pc: var(--status-failed); }
.tb-presence[data-s="dnd"]::before {
    content: ""; position: absolute; left: 2px; right: 2px; top: 4px; height: 2px;
    background: var(--t-surface); border-radius: 1px;
}
.tb-presence[data-s="focus"] { --pc: var(--status-complete); box-shadow: 0 0 0 1px var(--t-surface), 0 0 0 2.5px var(--status-complete); }
.tb-presence[data-s="leave"] { --pc: var(--status-progress); }
.tb-presence[data-s="away"] { --pc: var(--warning-color); animation: tbPresenceBreathe 2.6s ease-in-out infinite; }
.tb-presence[data-s="field"] { --pc: var(--status-started); animation: tbPresenceSway 1.8s ease-in-out infinite; }
.tb-presence[data-s="offhours"] { background: var(--t-surface); border-color: var(--status-notstarted); }
.tb-presence[data-s="offline"] { background: var(--t-surface); border: 2px dashed var(--status-notstarted); }
@keyframes tbPresencePulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }
@keyframes tbPresenceBlink { 50% { opacity: .25; } }
@keyframes tbPresenceBreathe { 50% { opacity: .35; } }
@keyframes tbPresenceSway { 0%, 100% { translate: -1.5px 0; } 50% { translate: 1.5px 0; } }
@media (prefers-reduced-motion: reduce) {
    .tb-presence, .tb-presence::after { animation: none !important; transition: none; }
}