.ui-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}
.ui-icon svg { width: 16px; height: 16px; }

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.btn-icon:hover,
.btn-icon:focus-visible {
    color: var(--color-text);
    background: var(--color-surface-muted);
}

/* Bulunulan ekranın kısayolu: üst çubuktaki bağlantı nerede olduğunu söyler. */
.btn-icon.is-active {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}

.form-label { margin-bottom: 2px; }

/* ==========================================================================
   Modül başlatıcı
   ========================================================================== */

.module-launcher {
    display: inline-flex;
}

.module-launcher-hint {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 1.25rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* Kaç modül kullanımda: başlatıcı ürünün tamamını gösterdiği için ilerleme de
   bir bilgidir. Menü yalnızca açılabilenleri listeler. */
.module-launcher-progress {
    flex: 0 0 auto;
    padding: 0.125rem 0.5rem;
    color: var(--color-text-subtle);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-surface-muted);
    border-radius: var(--radius-pill);
}

/* Bölümler sidebar'daki sırayı izler: çalışma alanı, modüller, yönetim. */
.module-group + .module-group {
    margin-top: 1.25rem;
}

.module-group-label {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    margin: 0 0 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.module-group-label small {
    color: var(--color-text-subtle);
    font-weight: 500;
    letter-spacing: 0;
}

/* ==========================================================================
   Modül menüsü (mega menü)

   Renk **modülün kimlik rengidir** (`--module-accent`): başlık karesi, kart
   ikonları, sayaç rozetleri ve bulunulan ekranın işareti aynı yerden okunur.
   Ürünün geri kalanında renk ölçülü kullanılır; burada bilerek öne çıkar,
   çünkü menü "hangi modüldeyim" sorusunu da cevaplıyor.

   Yerleşim **gazete sütunudur** (`columns`), ızgara değil: ızgara her karta
   eşit hücre veriyor ve iki satırlık bir kartın altında yarım ekran boşluk
   kalıyordu. Sütun akışında kart kendi boyu kadar yer kaplar.
   ========================================================================== */

/* Başlık: modülün ikonu renkli karede, adı ve ekran sayısı yanında. */
.module-menu-head {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    min-width: 0;
}

.module-menu-mark {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: #fff;
    background: var(--module-accent, var(--color-primary));
    border-radius: var(--radius-lg);
}

.module-menu-heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.module-menu-title {
    color: var(--color-text);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
}

.module-menu-subtitle {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.module-menu-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Araç çubuğu: arama geniş, iki düğme sağda. Üçü de gerçekten çalışır. */
.module-menu-toolbar {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
}

.module-menu-search {
    position: relative;
    display: flex;
    flex: 1 1 18rem;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.875rem;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.module-menu-search:focus-within {
    border-color: var(--module-accent, var(--color-primary));
}

.module-menu-search input {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--color-text);
    font-size: 0.875rem;
    background: transparent;
    border: 0;
    outline: none;
}

.module-menu-tool {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.875rem;
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.module-menu-tool:hover {
    background: var(--color-surface-muted);
}

/* Açık süzgeç ve favori kipi modülün rengiyle işaretlenir: hangi aracın
   açık olduğu düğmenin kendisinden okunur. */
.module-menu-tool.on {
    color: var(--module-accent, var(--color-primary));
    border-color: var(--module-accent, var(--color-primary));
}

.module-menu-tool-count {
    padding: 0 0.375rem;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    background: var(--module-accent, var(--color-primary));
    border-radius: 999px;
}

.module-menu-filter {
    position: relative;
}

.module-menu-filter-panel {
    position: absolute;
    z-index: 5;
    top: calc(100% + 0.375rem);
    right: 0;
    min-width: 14rem;
    padding: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.module-menu-filter-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.3125rem 0.375rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.module-menu-filter-row:hover {
    background: var(--color-surface-muted);
}

.module-menu-filter-row span {
    flex: 1 1 auto;
}

.module-menu-filter-row small {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.module-menu-filter-reset {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.375rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--color-border);
}

.module-menu-empty {
    margin: 2rem 0;
    color: var(--color-text-muted);
    text-align: center;
}

.module-menu-body {
    columns: 3;
    column-gap: 1.25rem;
}

/* Kart sütun sınırında ikiye bölünmemeli: başlığı bir sütunda, satırları
   ötekinde kalan bir bölüm okunmaz. */
.module-menu-card {
    display: block;
    margin-bottom: 1.25rem;
    padding: 0.25rem 0 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    break-inside: avoid;
    page-break-inside: avoid;
}

.module-menu-card-head {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
}

.module-menu-card-icon {
    flex: 0 0 auto;
    color: var(--module-accent, var(--color-primary));
}

.module-menu-card-title {
    flex: 1 1 auto;
    margin: 0;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 700;
}

.module-menu-card-count {
    flex: 0 0 auto;
    min-width: 1.5rem;
    padding: 0.125rem 0.4375rem;
    color: var(--module-accent, var(--color-primary));
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    background: color-mix(in srgb, var(--module-accent, var(--color-primary)) 12%, transparent);
    border-radius: 999px;
}

.module-menu-links {
    display: flex;
    flex-direction: column;
    padding: 0.375rem 0.5rem 0;
}

.module-menu-link {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.4375rem 0.5rem;
    color: var(--color-text);
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: var(--radius-md);
}

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

.module-menu-link-mark {
    flex: 0 0 auto;
    color: var(--color-text-muted);
}

.module-menu-link:hover,
.module-menu-link:focus-visible {
    background: var(--color-surface-muted);
}

/* Bulunulan ekran modülün renginde ve solunda bir şerit taşır: menü
   açıldığında göz önce "neredeyim"i bulur. */
.module-menu-link.active {
    color: var(--module-accent, var(--color-primary));
    font-weight: 600;
    background: color-mix(in srgb, var(--module-accent, var(--color-primary)) 8%, transparent);
    box-shadow: inset 2px 0 0 var(--module-accent, var(--color-primary));
}

.module-menu-link.active .module-menu-link-mark {
    color: var(--module-accent, var(--color-primary));
}

/* Yıldız satırın üzerine gelindiğinde çıkar; işaretliyse hep durur —
   kalabalık bir listede otuz dokuz sönük yıldız gürültüdür. */
.module-menu-star {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    opacity: 0;
}

.module-menu-link:hover .module-menu-star,
.module-menu-link:focus-within .module-menu-star,
.module-menu-link.starred .module-menu-star {
    opacity: 1;
}

.module-menu-link.starred .module-menu-star {
    color: var(--module-accent, var(--color-primary));
}

@media (max-width: 62rem) {
    .module-menu-body {
        columns: 2;
    }
}

@media (max-width: 40rem) {
    .module-menu-body {
        columns: 1;
    }
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: 0.5rem;
}

/* Karo yatay okunur: solda kod karesi, sağda ad. Uzun Türkçe adlar ("Fırsatlar
   ve Talepler") dikey karoda iki satıra kırılıp ızgarayı bozuyordu; yatayda
   tek satırda durur ve kod sütunu baştan sona hizalı kalır. */
.module-tile {
    position: relative;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.625rem 0.75rem;
    color: var(--color-text);
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

/* Kod karesi modülün kimliğidir: ekip modülleri "WMS", "HR", "FIN" diye anar.
   Renk modülden gelir (`--module-accent`), kural tek yerdedir. */
.module-tile-code {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.625rem;
    height: 2.625rem;
    color: var(--color-on-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: var(--module-accent);
    border-radius: var(--radius-md);
}

.module-tile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.0625rem;
}

.module-tile-text strong {
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.module-tile-text small {
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
}

.module-tile:hover:not(.disabled),
.module-tile:focus-visible:not(.disabled) {
    color: var(--color-text);
    background: color-mix(in srgb, var(--module-accent) 6%, var(--color-surface));
    border-color: color-mix(in srgb, var(--module-accent) 45%, transparent);
    transform: translateY(-1px);
}

/* Açık modül: kenar kendi rengini alır ve sağda bir tik durur. Nerede olunduğu
   listeye bakılır bakılmaz görünür. */
.module-tile.active {
    background: color-mix(in srgb, var(--module-accent) 10%, var(--color-surface));
    border-color: var(--module-accent);
}

.module-tile-here {
    margin-left: auto;
    color: var(--module-accent);
}

/* Henüz açılmamış modül: kod karesi renksizdir, karo tıklanmaz. Listede kalır
   çünkü ürünün tamamını göstermek de bir bilgidir. */
.module-tile.disabled {
    cursor: default;
    background: transparent;
    border-style: dashed;
}

.module-tile.disabled .module-tile-code {
    color: var(--color-text-subtle);
    background: var(--color-surface-muted);
}

.module-tile.disabled .module-tile-text strong {
    color: var(--color-text-muted);
    font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
    .module-tile {
        transition: none;
    }

    .module-tile:hover:not(.disabled) {
        transform: none;
    }
}

/* ==========================================================================
   Rozetler
   ========================================================================== */

/* Durum etiketleri hap biçiminde, yumuşak zeminli ve güçlü metinlidir. Dolgun
   renkli rozet arayüzde gürültü yapar; yumuşak olan yan yana birkaç tane
   durduğunda bile okunur kalır.

   Bootstrap'in "subtle/emphasis" çiftleri kendi gri-mavi ölçeğinden gelir;
   burada tema tokenlarına bağlanır ki mevcut işaretleme değişmeden aynı
   paletten beslensin. */
.badge {
    padding: 0.1875rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.bg-secondary-subtle { background-color: var(--color-neutral-soft) !important; }
.text-secondary-emphasis { color: var(--color-text-muted) !important; }
.bg-primary-subtle { background-color: var(--color-primary-soft) !important; }
.text-primary-emphasis { color: var(--color-primary) !important; }
.bg-success-subtle { background-color: var(--color-success-soft) !important; }
.text-success-emphasis { color: var(--color-success) !important; }
.bg-warning-subtle { background-color: var(--color-warning-soft) !important; }
.text-warning-emphasis { color: var(--color-warning) !important; }
.bg-danger-subtle { background-color: var(--color-danger-soft) !important; }
.text-danger-emphasis { color: var(--color-danger) !important; }
.bg-info-subtle { background-color: var(--color-info-soft) !important; }
.text-info-emphasis { color: var(--color-info) !important; }

.global-search {
    width: min(100%, 34rem);
}

/* Üst çubuktaki kutu bir düğmedir ama girdi gibi görünür: tıklanınca arama
   penceresi açılır, yazma orada olur. */
.global-search-trigger {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    min-height: 2.5rem;
    padding: 0 0.75rem;
    color: var(--color-text-muted);
    text-align: left;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.global-search-trigger:hover,
.global-search-trigger:focus-visible {
    background: var(--color-surface);
    border-color: var(--color-primary);
}

.global-search-placeholder {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 0.875rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Pencerenin kendi arama alanı. */
.global-search-field {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    padding: 0 0.875rem;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
}

.global-search-field:focus-within {
    background: var(--color-surface);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem var(--color-primary-soft);
}

.global-search-field input {
    flex: 1;
    min-width: 0;
    padding: 0.625rem 0;
    color: var(--color-text);
    font-size: 0.9375rem;
    background: transparent;
    border: 0;
    outline: 0;
}

.global-search-hint {
    margin: 1.5rem 0 0.5rem;
    color: var(--color-text-subtle);
    font-size: 0.8125rem;
    text-align: center;
}

/* Kayıt türü sekmeleri: "ABC" hem müşteriyi hem faturasını bulur, hangisinin
   arandığı sekmeden seçilir. */
.global-search-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.global-search-tab {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    padding: 0.375rem 0.625rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

.global-search-tab:hover {
    color: var(--color-text);
    background: var(--color-surface-muted);
}

.global-search-tab.active {
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

.global-search-tab-count {
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
    font-weight: 700;
}

.global-search-tab.active .global-search-tab-count {
    color: var(--color-primary);
}

.global-search-list {
    max-height: min(26rem, 55vh);
    overflow-y: auto;
}

.global-search-result-text {
    flex: 1;
    min-width: 0;
}

.global-search-result-go {
    flex: 0 0 auto;
    color: var(--color-text-subtle);
}

.global-search kbd {
    padding: 0.125rem 0.375rem;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 0.6875rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.notification-popover {
    position: absolute;
    top: calc(100% + 0.5rem);
    z-index: 1070;
    overflow: hidden;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-floating);
}

.global-search-result {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    padding: 0.625rem 0.75rem;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border);
}

.global-search-result:last-child {
    border-bottom: 0;
}

.global-search-result:hover {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.global-search-result-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border-radius: var(--radius-md);
}

.global-search-result strong,
.global-search-result small {
    display: block;
}

.global-search-result strong {
    font-size: 0.8125rem;
}

.global-search-result small {
    margin-top: 0.125rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.global-search-empty {
    padding: 1.25rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    text-align: center;
}

.notification-center {
    position: relative;
}

.notification-trigger {
    position: relative;
}

/* Zil menüsündeki bildirim satırı ve sayfadaki kart listesi aynı dili konuşur:
   okunmamış satır hafif vurgulu zeminde, ikon yuvarlak rozette. */
.notification-item {
    display: flex;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}

.notification-item:hover,
.notification-item:focus-visible {
    background: var(--color-surface-muted, rgba(127, 127, 127, 0.08));
}

.notification-item.unread {
    background: color-mix(in srgb, var(--color-primary, #2c5cc5) 7%, transparent);
}

.notification-item-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary, #2c5cc5) 12%, transparent);
    color: var(--color-primary, #2c5cc5);
}

.notification-item-copy {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.notification-item-copy strong {
    font-size: 0.8125rem;
}

.notification-item-copy small {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notification-item-time {
    font-size: 0.6875rem !important;
}

.notification-popover-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary, #2c5cc5);
    text-decoration: none;
    border-top: 1px solid var(--color-border);
}

.notification-popover-footer:hover {
    background: var(--color-surface-muted, rgba(127, 127, 127, 0.08));
}

/* Bildirimler sayfası (PrimeCRM örneğindeki düzen: dar sütun, kart liste). */
.notifications-page {
    max-width: 52rem;
    margin: 0 auto;
}

.notifications-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.notifications-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding-bottom: 0.5rem;
}

.notifications-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-right: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.notifications-item.unread {
    background: color-mix(in srgb, var(--color-primary, #2c5cc5) 7%, transparent);
}

.notifications-item-main {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    text-align: left;
    background: transparent;
    border: 0;
    color: var(--color-text);
}

.notifications-item-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.notifications-item-copy small {
    color: var(--color-text-muted);
}

.notifications-item-time {
    font-size: 0.6875rem !important;
}

.notifications-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3.5rem 1rem;
    margin: 0;
    color: var(--color-text-muted);
}


.notification-count {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.2rem;
    color: var(--color-on-primary);
    font-size: 0.625rem;
    font-weight: 700;
    background: var(--color-danger);
    border-radius: 999px;
}

.notification-popover {
    right: 0;
    width: min(22rem, calc(100vw - 2rem));
}

.notification-popover-header {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.notification-popover-header strong,
.notification-popover-header small {
    display: block;
}

.notification-popover-header strong {
    font-size: 0.875rem;
}

.notification-popover-header small {
    margin-top: 0.125rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.notification-body {
    padding: 0.875rem 1rem;
}

.notification-note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.notification-devices {
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.notification-devices li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.8125rem;
}

.notification-devices li + li {
    border-top: 1px solid var(--color-border);
}

/*
 * Cihaz adı kalan yeri alır — ama seçici `span` olduğu için ikon bileşeni de
 * (`<span class="ui-icon">`) bu kurala takılıyor, ikon kutusu satır boyunca
 * esniyor ve içindeki simge ortalanıyordu: liste ortadan dağılmış görünüyordu.
 * Kural artık yalnızca metin span'ini hedefler.
 */
.notification-devices li > span:not(.ui-icon) {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.notification-devices li > .ui-icon {
    flex: 0 0 auto;
}

.notification-devices small {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.notification-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.notification-message {
    margin: 0.75rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.notification-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
    text-align: center;
}

.notification-empty > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.625rem;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border-radius: 50%;
}

.notification-empty strong {
    font-size: 0.8125rem;
}

.notification-empty small {
    margin-top: 0.1875rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

@media (max-width: 575.98px) {
    .global-search kbd,
    .global-search-placeholder {
        display: none;
    }

    .global-search-trigger {
        justify-content: center;
        padding: 0 0.625rem;
    }
}

.base-modal {
    display: block;
    z-index: 1055;
}

.base-modal .modal-content {
    color: var(--color-text);
    background: var(--color-surface);
    border-color: var(--color-border);
}

.base-modal .modal-header,
.base-modal .modal-footer {
    border-color: var(--color-border);
}

.ui-toast {
    color: var(--color-text);
    background: var(--color-surface);
    border-left: 4px solid var(--color-info);
    box-shadow: var(--shadow-sm);
}

.ui-toast-success {
    border-left-color: var(--color-success);
}

.ui-toast-danger {
    border-left-color: var(--color-danger);
}

.ui-toast-warning {
    border-left-color: var(--color-warning);
}

.search-select {
    position: relative;
}

/* Kutunun kendisi. Temizle düğmesi buraya göre konumlanır; tanım kısayolu
   eklendiğinde kutu daralır ama düğme yerinde kalır. */
.search-select-field {
    position: relative;
}

/* Eşlenmiş alanlar: iki seçim kutusu tek satırda
   ---------------------------------------------------------------------------
   `input-group` bir flex kutusudur ve Bootstrap yalnız `.form-control` /
   `.form-select` çocuklarını esnetir. `search-select`in kökü düz bir `div`
   olduğu için içeriği kadar yer kaplıyor, sütunun geri kalanı boş kalıyordu:
   "Ülke / İl" ve "Kanal / Dil" satırları altlarındaki tek alanlı satırlarla
   hizasız görünüyordu.

   `flex: 1 1 0` eş paylaştırır, `min-width: 0` da uzun seçenek adının kutuyu
   şişirmesini engeller (flex öğesi varsayılan olarak içeriğinden küçülmez). */
.input-group > .search-select {
    flex: 1 1 0;
    min-width: 0;
}

/* Bitişik iki kutunun birleştiği yerde köşe yuvarlaması ve çift çizgi kalkar;
   görünen denetim kökün değil, içindeki tetikleyicinin kendisidir. */
.input-group > .search-select:not(:last-child) .search-select-trigger {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .search-select:not(:first-child) .search-select-trigger {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.search-select.has-manage {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.search-select.has-manage .search-select-field {
    flex: 1;
    min-width: 0;
}

/* Tanım ekranı kısayolu: aranan kayıt listede yoksa kullanıcı buradan tanım
   ekranına gider. Yeni sekmede açılır, yarım kalan form kaybolmaz. */
/* Yükseklik kutudan gelir, sabit değildir: sabit 2.125rem hem normal formda
   (kutu 2.375rem) hem belge satırında (kutu 1.75rem) tutmuyordu ve düğme
   komşusunun yanında bir tık kaymış duruyordu. */
.search-select-manage {
    display: inline-flex;
    flex: 0 0 auto;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    min-height: 1.75rem;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
}

.search-select-manage:hover,
.search-select-manage:focus-visible {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.search-select-trigger {
    position: relative;
    padding-right: 4.5rem;
    overflow: hidden;
    color: var(--color-text);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: var(--color-surface);
}

.search-select-clear {
    position: absolute;
    top: 50%;
    right: 2.25rem;
    z-index: 2;
    display: inline-flex;
    padding: 0.125rem;
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    transform: translateY(-50%);
}

/* Liste body altına taşınır ve konumu component tarafından hesaplanır; modal
   gövdesi veya kart gibi overflow sınırlayan kapsayıcılar onu kırpamaz. */
.search-select-dropdown {
    position: fixed;
    z-index: 1080;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.search-select-options {
    max-height: 16rem;
    overflow-y: auto;
}

.search-select-option {
    display: block;
    width: 100%;
    padding: 0.625rem 0.75rem;
    color: var(--color-text);
    text-align: left;
    background: transparent;
    border: 0;
}

.search-select-option:hover,
.search-select-option.highlighted {
    background: var(--color-surface-muted);
}

.search-select-option.active {
    color: var(--color-primary);
    font-weight: 600;
}

/* Kilitli seçenek listede durur ama seçilemez; solgun görünüm ve hareketsiz
   hover, tıklamanın sonuç vermeyeceğini önceden söyler. */
.search-select-option:disabled {
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.search-select-option:disabled:hover {
    background: transparent;
}

.search-select-more {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-align: center;
    background: var(--color-surface-muted);
    border-top: 1px solid var(--color-border);
}

.phone-input .iti {
    width: 100%;
}

.otp-input {
    display: flex;
    gap: 0.5rem;
}

.otp-input .form-control {
    width: 3rem;
    height: 3rem;
    padding: 0;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
}

.file-upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 8rem;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}

.file-upload-dropzone.dragging {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.file-upload-dropzone.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.file-upload-list {
    padding: 0;
    margin: 0.75rem 0 0;
    list-style: none;
}

.file-upload-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.file-upload-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rich-text .ql-toolbar,
.rich-text .ql-container {
    border-color: var(--color-border);
}

.rich-text .ql-toolbar {
    background: var(--color-surface-muted);
}

.rich-text .ql-container,
.rich-text .ql-editor {
    color: var(--color-text);
    background: var(--color-surface);
}

/* Odak halkası diğer form alanlarıyla aynı: yazma yüzeyi yerine tüm kutu. */
.rich-text .ql-container:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem var(--color-primary-soft);
}

.rich-text .ql-editor:focus {
    outline: 0;
}

.data-grid {
    position: relative;
    min-width: 0;
}

.data-grid-loading {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 0.5rem);
}

.data-grid-loading::before {
    content: "";
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-border);
    border-top-color: var(--bs-primary, #2c5cc5);
    border-radius: 50%;
    animation: data-grid-spin 0.7s linear infinite;
}

.data-grid .tabulator {
    overflow: hidden;
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--color-text);
    background: var(--grid-background);
    border: 0;
}

/* Veri yüklenirken tablo, yüzey renginden türetilen yarı saydam bir örtüyle
   kapanır (açık temada beyaz); ortada dönen halka + kısa metin taşıyan küçük
   bir kart durur. Tabulator'ün varsayılan kalın çerçeveli kutusu ezilir. */
.data-grid .tabulator-alert {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-surface, #ffffff) 78%, transparent);
    backdrop-filter: blur(1.5px);
}

/* Durum sınıfı da hedeflenir: Tabulator'ün `4px solid #333` çerçevesi daha
   özgül olduğu için yalnız üst sınıfı ezmek yetmez. */
.data-grid .tabulator-alert .tabulator-alert-msg,
.data-grid .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    padding: 0.625rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 0.5rem);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

/* Halka yalnız yükleme mesajında döner; hata kutusu kendi tonunu taşır. */
.data-grid .tabulator-alert .tabulator-alert-state-msg::before {
    content: "";
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-border);
    border-top-color: var(--bs-primary, #2c5cc5);
    border-radius: 50%;
    animation: data-grid-spin 0.7s linear infinite;
}

.data-grid .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error {
    border: 1px solid color-mix(in srgb, var(--bs-danger, #dc2626) 45%, var(--color-border));
    color: var(--bs-danger-text-emphasis, #7f1d1d);
}

@keyframes data-grid-spin {
    to {
        transform: rotate(360deg);
    }
}

.data-grid .tabulator .tabulator-header {
    min-height: 2.75rem;
    color: var(--grid-header-text);
    background: var(--grid-header-background);
    border-top: 1px solid var(--grid-border);
    border-bottom: 1px solid var(--grid-border);
}

.data-grid .tabulator .tabulator-header .tabulator-col {
    min-height: 2.75rem;
    background: var(--grid-header-background);
    border-right: 1px solid var(--grid-border);
}

.data-grid .tabulator .tabulator-header .tabulator-col:hover {
    background: var(--grid-control-hover);
}

.data-grid .tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    padding: 0.5rem;
}

.data-grid .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.data-grid .tabulator .tabulator-header .tabulator-col .tabulator-col-title-holder {
    align-items: center;
}

.data-grid .tabulator .tabulator-header .tabulator-header-popup-button {
    display: inline-flex;
    order: 2;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin: -0.25rem -0.25rem -0.25rem auto;
    color: var(--grid-sort);
    font-size: 1rem;
    line-height: 1;
    border-radius: var(--radius-sm);
    opacity: 0.65;
    transition: opacity 120ms ease, background-color 120ms ease;
}

.data-grid .tabulator .tabulator-header .tabulator-col:hover .tabulator-header-popup-button,
.data-grid .tabulator .tabulator-header .tabulator-header-popup-button:focus-visible {
    opacity: 1;
}

.data-grid .tabulator .tabulator-header .tabulator-header-popup-button:hover,
.data-grid .tabulator .tabulator-header .tabulator-header-popup-button:focus-visible {
    color: #fff;
    outline: none;
}

.data-grid .tabulator .tabulator-header .tabulator-col .tabulator-col-sorter {
    color: var(--grid-sort);
}

.data-grid .tabulator .tabulator-header .tabulator-col .tabulator-col-resize-handle {
    width: 0.375rem;
}

.data-grid .tabulator .tabulator-header .tabulator-col .tabulator-col-resize-handle:hover {
    border-right: 2px solid var(--grid-resize);
}

.data-grid .tabulator .tabulator-tableholder {
    background: var(--grid-background);
}

.data-grid .tabulator-row,
.data-grid .tabulator-row.tabulator-row-even {
    min-height: 2.75rem;
    color: var(--color-text);
    background: var(--grid-background);
    border-bottom: 1px solid var(--grid-row-border);
}

.data-grid .tabulator-row:hover {
    background: var(--grid-row-hover);
}

.data-grid .tabulator-row.tabulator-selected {
    background: var(--grid-row-selected);
}

.data-grid .tabulator-row.tabulator-selected:hover {
    background: var(--grid-row-selected-hover);
}

/* Hücre sınırı çizgiyle belirtilir: veri ızgarasında hangi değerin hangi
   sütuna ait olduğu, sütunlar dar ve içerik değişkenken yalnızca hizadan
   okunamaz. */
.data-grid .tabulator-row .tabulator-cell {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.625rem;
    line-height: 1.25rem;
    border-right: 1px solid var(--grid-row-border);
}
.data-grid .tabulator-row .tabulator-cell.tabulator-editing,
.data-grid .tabulator-row .tabulator-cell:focus-visible {
    background: var(--grid-background);
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
}

.data-grid .tabulator .tabulator-placeholder {
    color: var(--grid-placeholder);
    background: var(--grid-background);
}

.data-grid .tabulator .tabulator-placeholder span {
    font-size: 0.8125rem;
    font-weight: 500;
}

.data-grid .tabulator .tabulator-footer {
    min-height: 3.25rem;
    padding: 0.5rem 0.75rem;
    color: var(--color-text-muted);
    background: var(--grid-background);
    border-top: 1px solid var(--grid-border);
}

/*
 * Alt bilgi çubuğu **dar kartta satır atlar.**
 *
 * Tabulator'ın kendi kuralı `justify-content: space-between` ile tek satır
 * kuruyor ve sayacın sağında yalnız 10px boşluk bırakıyor: kart daraldığında
 * "1 kayıt" ile "Sayfa boyutu" birbirine giriyor, sayfalama düğmeleri kartın
 * dışına taşıyordu (Kendi Sayfam kartlarında görüldü). Sarma kuralı ızgaranın
 * kendisinde durur ki her dar kart aynı davransın.
 */
.data-grid .tabulator .tabulator-footer .tabulator-footer-contents {
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    min-height: 2.25rem;
    padding: 0;
}

.data-grid .tabulator .tabulator-footer .tabulator-paginator {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    justify-content: flex-end;
}

/* Sayaç kendi satırına düştüğünde soldaki boşluk gereksiz kalıyor. */
.data-grid .tabulator .tabulator-footer .tabulator-page-counter {
    margin-left: 0;
}

.data-grid .tabulator .tabulator-footer .tabulator-page-size {
    height: 2rem;
    margin: 0 0.375rem;
    padding: 0 1.75rem 0 0.625rem;
    color: var(--color-text);
    /* appearance kapalı: açık bırakılırsa işletim sistemi kutuyu kendi çizer,
       zemin rengi yok sayılır ve koyu temada beyaz bir kutu kalır. */
    appearance: none;
    background-color: var(--grid-control-background);
    background-image: var(--select-chevron);
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.75rem;
    border: 1px solid var(--grid-border);
    border-radius: var(--radius-md);
}

.data-grid .tabulator .tabulator-footer .tabulator-page {
    min-width: 2rem;
    height: 2rem;
    margin: 0 0.125rem;
    padding: 0 0.5rem;
    color: var(--color-text-muted);
    background: var(--grid-control-background);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
}

.data-grid .tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
    color: var(--color-text);
    background: var(--grid-control-hover);
    border-color: var(--grid-border);
}

.data-grid .tabulator .tabulator-footer .tabulator-page.active {
    color: var(--color-on-primary);
    background: var(--grid-control-active);
    border-color: var(--grid-control-active);
}

.data-grid .tabulator .tabulator-footer .tabulator-page.disabled {
    opacity: 0.42;
}

.data-grid .tabulator .tabulator-footer .tabulator-page-counter {
    color: var(--color-text-muted);
}

.data-grid .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right {
    border-left: 0;
}
.data-grid .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right {
    border-left: 0;
}

.tabulator-popup-container {
    z-index: 1080;
}

.tabulator-menu {
    min-width: 13rem;
    padding: 0.375rem;
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-size: 0.8125rem;
    background: var(--grid-background);
    border: 1px solid var(--grid-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-floating);
}

.tabulator-menu .tabulator-menu-item {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-sm);
}

.tabulator-menu .tabulator-menu-item:hover {
    background: var(--grid-control-hover);
}

.tabulator-menu .tabulator-menu-item.tabulator-menu-item-disabled {
    color: var(--color-text-muted);
    background: transparent;
    opacity: 0.55;
}

.tabulator-menu .tabulator-menu-separator {
    margin: 0.375rem 0.25rem;
    border-top: 1px solid var(--grid-border);
}

.data-grid-column-menu-label {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.data-grid-column-menu-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: var(--color-on-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    background: var(--grid-control-active);
    border: 1px solid var(--grid-control-active);
    border-radius: 0.1875rem;
}

.data-grid-column-menu-check:empty {
    background: var(--grid-control-background);
    border-color: var(--grid-border);
}

/* Görünüm kaydetme penceresi: mevcut adlar tıklanabilir yongalar hâlinde
   durur, ada tıklamak kutuyu doldurur ve kayıt üzerine yazar. */
.data-grid-save-view-existing {
    margin-top: 0.75rem;
}

.data-grid-save-view-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

.data-grid-save-view-overwrite {
    color: var(--color-warning);
}
.settings-layout {
    display: grid;
    grid-template-columns: 17.5rem minmax(0, 1fr);
    gap: 1.25rem;
    max-width: 76rem;
    margin: 0 auto;
    align-items: start;
}

.settings-layout-wide {
    max-width: 96rem;
}

.settings-layout,
.settings-aside,
.settings-navigation,
.settings-content,
.settings-page-body,
.settings-form,
.settings-tabs {
    min-width: 0;
    max-width: 100%;
}

/*
 * Kenar sütunu kendi içinde kaydırılmaz; içeriği kadar aşağıya uzar ve
 * sayfayla birlikte kaydırılır.
 *
 * Yapışkanlık da bu yüzden yok: katalog on dokuz gruba çıktığında sütun
 * ekrandan uzun olabiliyor ve ekrandan uzun bir yapışkan öğe üstte sabitlenip
 * taşan alt kısmını erişilemez bırakıyor. İki çözüm var — sütunu ekranla
 * sınırlayıp kendi kaydırma çubuğunu vermek ya da yapışkanlığı bırakıp
 * sayfayla kaydırmak. İkincisi seçildi: tek kaydırma çubuğu, tek davranış.
 */
.settings-navigation {
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

/*
 * Bir menü satırının alt kırılımı (sistem ayarlarının yapılandırma grupları).
 * Üst satırla aynı kartta, girintiyle ve ince bir kılavuz çizgisiyle durur:
 * "bunlar o satırın içindekiler" ilişkisi başka türlü okunmuyor.
 */
.settings-page-children {
    display: grid;
    gap: 0.0625rem;
    margin: 0.125rem 0 0.375rem 1.375rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--color-border);
}

.settings-page-child {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    text-align: left;
}

.settings-page-child:hover {
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.settings-page-child.active {
    background: var(--color-primary-subtle);
    color: var(--color-primary-emphasis);
    font-weight: 600;
}

.settings-page-child .settings-tab-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.settings-navigation-heading {
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.settings-navigation-heading span {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.settings-navigation-heading small {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.settings-tabs {
    display: grid;
    gap: 0.125rem;
    padding: 0.375rem;
}

.settings-page-links {
    display: grid;
    gap: 0.125rem;
    padding: 0.375rem;
}

.settings-page-link {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.375rem 0.5rem;
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: var(--radius-md);
}

.settings-page-link:hover,
.settings-page-link:focus-visible {
    color: var(--color-text);
    background: var(--color-surface-muted);
}

/* Sidebar'la aynı kural: seçili olan yüzeyle ve ince bir çerçeveyle ayrışır. */
.settings-page-link.active {
    color: var(--color-text);
    background: var(--color-surface-muted);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.settings-page-link.active .settings-tab-icon,
.settings-page-link.active .settings-tab-copy strong {
    color: var(--color-text);
}

.settings-navigation-section-title {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.625rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--color-border);
}

.settings-navigation-section-title:hover,
.settings-navigation-section-title:focus-visible {
    color: var(--color-text);
    background: var(--color-surface-muted);
}

.settings-navigation-section-title .ui-icon {
    transition: transform 0.15s ease;
}

.settings-navigation-group.is-open .settings-navigation-section-title .ui-icon {
    transform: rotate(180deg);
}

.settings-navigation-group-body {
    display: none;
    padding-bottom: 0.25rem;
}

.settings-navigation-group.is-open .settings-navigation-group-body {
    display: block;
}

.settings-page-body {
    width: 100%;
}

.settings-tab {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.375rem 0.5rem;
    color: var(--color-text-muted);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
}

.settings-tab:hover,
.settings-tab:focus-visible {
    color: var(--color-text);
    background: var(--color-surface-muted);
}

.settings-tab.active {
    color: var(--color-text);
    background: var(--color-surface-muted);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.settings-tab-icon,
.settings-content-icon,
.settings-section-heading > span {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border-radius: var(--radius-md);
}

.settings-tab.active .settings-tab-icon {
    color: var(--color-text);
    background: var(--color-surface);
}

.settings-tab-copy {
    flex: 1;
    min-width: 0;
}

.settings-tab-copy strong,
.settings-tab-copy small {
    display: block;
}

.settings-tab-copy strong {
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.settings-tab.active .settings-tab-copy strong {
    color: var(--color-text);
}

.settings-tab-copy small {
    margin-top: 0.125rem;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-navigation-note {
    display: flex;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border-top: 1px solid var(--color-border);
}

.settings-navigation-note p {
    margin: 0;
    font-size: 0.71875rem;
    line-height: 1.45;
}

.settings-content {
    min-width: 0;
    color: var(--color-text);
}

.settings-content-header {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.25rem;
}

.settings-content-icon {
    width: 2.75rem;
    height: 2.75rem;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border-radius: var(--radius-lg);
}

.settings-title-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
}

.settings-content-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.settings-content-header p {
    margin: 0.1875rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.settings-form,
.settings-sections {
    display: grid;
    gap: 1rem;
}

.settings-section {
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.settings-section-heading {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem 1.125rem;
    background: var(--color-surface-muted);
    border-bottom: 1px solid var(--color-border);
}

.settings-section-heading > span {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.settings-section-heading h3 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
}

.settings-section-heading p {
    margin: 0.125rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.settings-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    padding: 1.125rem;
}

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

.settings-field-wide {
    grid-column: 1 / -1;
}

.settings-control-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 650;
}

.settings-control-help {
    min-height: 2.25em;
    margin: 0 0 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.71875rem;
    line-height: 1.35;
}

.settings-field-switch {
    display: flex;
    grid-column: 1 / -1;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.settings-switch-copy label {
    font-size: 0.875rem;
    font-weight: 650;
}

.settings-switch-copy p {
    margin: 0.1875rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.settings-field-switch .form-check {
    flex: 0 0 auto;
    min-height: auto;
    padding-left: 2.75rem;
    margin: 0;
}

.settings-field-switch .form-check-input {
    width: 2.375rem;
    height: 1.25rem;
    margin-left: -2.75rem;
}

.settings-channel-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.settings-channel {
    display: inline-flex;
    gap: 0.4375rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    color: var(--color-text-muted);
    cursor: pointer;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.settings-channel:hover {
    border-color: var(--color-primary);
}

.settings-channel.selected {
    color: var(--color-primary);
    font-weight: 600;
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

.settings-channel input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.settings-secret-status {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    margin-top: 0.375rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.settings-secret-status.configured {
    color: var(--color-success);
}

.settings-loading {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    color: var(--color-text-muted);
}

.settings-test-row {
    padding: 1.125rem;
}

.settings-test-row .input-group {
    max-width: 36rem;
}

.settings-actions {
    position: sticky;
    bottom: 0.75rem;
    z-index: 10;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.875rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-floating);
}

.settings-save-state,
.settings-action-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.settings-save-state {
    color: var(--color-success);
    font-size: 0.75rem;
}

.settings-action-buttons .btn {
    display: inline-flex;
    gap: 0.4375rem;
    align-items: center;
}

@media (max-width: 991.98px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-navigation-heading,
    .settings-navigation-note {
        display: none;
    }

    /* Alt kırılım dar ekranda kendi satırında, yatay şerit olarak durur;
       girinti ve kılavuz çizgisi tek sütunlu düzende anlamını yitirir. */
    .settings-page-children {
        display: flex;
        flex: 1 0 100%;
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--color-border);
        overflow-x: auto;
    }

    .settings-page-child {
        flex: 0 0 auto;
        /* Dikey listede düğme satırı doldurur; yatay şeritte kendi genişliği
           kadar olmalı, yoksa ilk düğme şeridi kaplar ve kalanı görünmez. */
        width: auto;
    }

    .settings-tabs {
        display: flex;
        overflow-x: auto;
    }

    .settings-page-links {
        display: flex;
        /* Alt kırılım (yapılandırma grupları) kendi satırına insin. Sarma
           olmadan yatay şeridin içine sıkışıyor ve pratikte görünmez
           oluyordu; kaydırma da satır başına ayrı ayrı verilir. */
        flex-wrap: wrap;
        border-bottom: 1px solid var(--color-border);
    }

    .settings-page-links > .settings-page-link {
        flex: 0 0 auto;
    }

    .settings-page-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .settings-page-link .settings-tab-copy small,
    .settings-page-link > .ui-icon,
    .settings-navigation-section-title {
        display: none;
    }

    /* Dar ekranda gruplar yatay şerit olur; kapalı grup gizlenmez. */
    .settings-navigation-group-body,
    .settings-navigation-group.is-open .settings-navigation-group-body {
        display: block;
        padding-bottom: 0;
    }

    .settings-tab {
        width: auto;
        min-height: 2.75rem;
        white-space: nowrap;
    }

    .settings-tab-copy small,
    .settings-tab > .ui-icon {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .settings-section-grid {
        grid-template-columns: 1fr;
    }

    .settings-field-wide {
        grid-column: auto;
    }

    .settings-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-action-buttons {
        justify-content: flex-end;
    }
}

@media (max-width: 575.98px) {
    .settings-content-header {
        align-items: flex-start;
    }

    .settings-section-grid,
    .settings-test-row {
        padding: 0.875rem;
    }

    .settings-section-heading {
        align-items: flex-start;
        padding: 0.875rem;
    }

    .settings-save-state {
        display: none;
    }

    .settings-action-buttons {
        align-items: stretch;
        flex-direction: column-reverse;
        width: 100%;
    }

    .settings-action-buttons .btn {
        justify-content: center;
        width: 100%;
    }
}

.definition-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.definition-toolbar,
.definition-grid-heading,
.definition-toolbar-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Filtre sayısı arttığında araç çubuğu taşmaz, alt satıra sarar. */
.definition-toolbar,
.definition-toolbar-actions {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.definition-toolbar-actions {
    flex: 1 1 auto;
    min-width: 0;
}

.definition-toolbar {
    justify-content: space-between;
}

.definition-toolbar-actions .btn {
    display: inline-flex;
    gap: 0.4375rem;
    align-items: center;
    white-space: nowrap;
}

.definition-search {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: min(22rem, 32vw);
    min-height: 35px;
    padding: 0 0.75rem;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.definition-search:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem var(--color-primary-soft);
}

.definition-search input {
    width: 100%;
    min-width: 0;
    padding: 0;
    color: var(--color-text);
    background: transparent;
    border: 0;
    outline: 0;
}

/*
 * Izgarada satır içinde düzenlenebilen hücre.
 *
 * Tabulator düzenlenebilir hücreyi diğerlerinden ayırmıyor: kullanıcı ancak
 * tıklayınca öğreniyor ve çoğu zaman hiç denemiyor. Yumuşak sarı zemin
 * "buraya yazılabilir" der; rozet ya da düğme gibi bir eylem taşımadığı için
 * dolgun renk kullanılmaz. Tema değişkeninden okunur — koyu temada da aynı
 * anlamı taşır.
 */
.tabulator .tabulator-cell.grid-cell-editable {
    background: var(--color-warning-soft);
    box-shadow: inset 0 0 0 1px var(--color-border);
    cursor: pointer;
}

.tabulator .tabulator-cell.grid-cell-editable:hover {
    box-shadow: inset 0 0 0 1px var(--color-warning);
}

/* Araç çubuğundaki aranabilir filtre kutusu. */
.definition-filter {
    width: min(14rem, 24vw);
    min-width: 10rem;
}

.definition-grid-card {
    min-width: 0;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.definition-grid-heading {
    justify-content: space-between;
    padding: 1rem 1.125rem;
}

.definition-grid-heading p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.definition-grid-card .data-grid .tabulator {
    border: 0;
}

/* Kartın kendi iç boşluğu yoktur çünkü ızgara kendi çerçevesini getirir. Karta
   ızgara yerine form ya da serbest içerik konduğunda boşluğu bu sarmalayıcı
   verir; olmadığında içerik kart kenarına yapışıyor. */
.definition-card-body {
    padding: 1.125rem;
}

/* Sabit kıymet ve zimmet ekranlarındaki panel kartları da ızgara değil serbest
   içerik taşır (form, tablo, sekme gövdesi). Bu iki sınıf yalnızca markup'ta
   duruyordu ve hiçbir kuralı yoktu; içerik kart kenarına yapışıyordu.
   Sarmalayıcı eklemek 13 kartı tek tek düzenlemek demekti, kural tek yerde
   durur ve dördü de aynı boşluğu alır. */
.asset-panel,
.assignment-panel {
    padding: 1.125rem;
}

/* Yanındaki alanların etiketi üstte, anahtarınki yanındadır; ikisi aynı satırda
   dikey ortalanınca anahtar alanların ortasına kayıyordu. Anahtarlar kendi
   satırında yan yana durur. */
.declaration-switch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 2rem;
    padding-top: 0.25rem;
}

.definition-status {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
}

/*
 * Ardışık anahtar satırları birbirine yapışmaz. Ekranlar araya `mt-3`/`mt-4`
 * koyuyordu ve dört anahtarı olan formda (masraf türü) bu unutulmuştu: kutular
 * uç uca gelince kenarlıklar ikileniyor, satırlar iç içe geçmiş tek bir kutu
 * gibi okunuyordu. Aralık burada durursa unutulamaz.
 */
.definition-status + .definition-status {
    margin-top: 0.5rem;
}

/* Başlık ile açıklaması tek bir bilgidir. Aradaki boşluk kenar boşluğundan
   değil satır yüksekliğinden geliyordu; ikisi ayrı iki satır gibi okunuyordu.
   Kenar boşluğu sıfırlanıp satır yükseklikleri daraltıldı. */
.definition-status strong {
    font-size: 0.875rem;
    line-height: 1.3;
}

.definition-status p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}

.definition-status .form-check {
    min-height: auto;
    margin: 0;
}

.data-grid .tabulator .btn {
    min-height: 28px;
    height: 28px;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 1px;
}

.definition-grid-actions {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}

.definition-grid-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    padding: 0;
    color: var(--color-text-muted);
    line-height: 1;
    background: var(--grid-control-background);
    border-color: var(--grid-border);
    border-radius: var(--radius-sm);
}

.definition-grid-action:hover,
.definition-grid-action:focus-visible {
    color: var(--color-text);
    background: var(--grid-control-hover);
    border-color: var(--grid-resize);
}

/* Silme düğmesi duruyorken nötrdür. Her satırda kırmızı bir daire dururken göz
   tabloyu değil uyarıyı okur; renk yalnızca düğmeye gidildiğinde belirir. */
.definition-grid-action-delete {
    color: var(--color-text-muted);
    border-color: var(--grid-border);
}

.definition-grid-action-delete:hover,
.definition-grid-action-delete:focus-visible {
    color: var(--color-on-primary);
    background: var(--color-danger);
    border-color: var(--color-danger);
}

/* Metin taşıyan satır işlemi ("Sına" gibi): kare kalıba sığmaz, genişliği
   içerik belirler; yükseklik ve dil kare butonla aynı kalır. */
.definition-grid-action-labeled {
    width: auto;
    gap: 0.3rem;
    padding: 0 0.5rem;
    min-height: 28px;
}

/* Standart tablolar grid ile aynı dili konuşur: küçük büyük-harf başlık,
   grid'in başlık zemini ve satır çizgileri, aynı yazı boyu ve hücre dolgusu.
   Tema değişkenleri Tabulator'ünkilerle ortak; koyu temada da eşleşirler. */
.table {
    --bs-table-bg: transparent;
    font-size: 0.8125rem;
    color: var(--color-text);
}

.table > thead > tr > th {
    padding: 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--grid-header-text, var(--color-text-muted));
    background: var(--grid-header-background, var(--color-surface-muted, rgba(127, 127, 127, 0.06)));
    border-top: 1px solid var(--grid-border, var(--color-border));
    border-bottom: 1px solid var(--grid-border, var(--color-border));
}

.table > tbody > tr > td {
    padding: 0.5rem 0.625rem;
    line-height: 1.25rem;
    vertical-align: middle;
    border-bottom-color: var(--grid-row-border, var(--color-border));
}

.table > tbody > tr:hover > td {
    background: var(--grid-control-hover, rgba(127, 127, 127, 0.05));
}

/* Düz HTML tablolarındaki satır işlem butonları için taban standardı:
   sarmalayıcısı unutulmuş ekranlarda da yükseklik eşit, aralık nefes alır.
   (Tabulator tarafındaki karşılık .definition-grid-actions kalıbıdır.) */
.table td .btn.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 28px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}

.table td .btn.btn-sm + .btn.btn-sm {
    margin-left: 0.25rem;
}

@media (max-width: 767.98px) {
    .definition-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .definition-toolbar-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .definition-search {
        width: 100%;
    }

    .definition-toolbar-actions .btn {
        justify-content: center;
    }
}

/* Para birimli tutar: tutar girişi, para birimi kutusu ve kur bilgisi.
   money-input kendi input-group'unu getirdiği için iç içe input-group yerine
   kendi flex satırımızı kuruyoruz; aksi halde seçim kutusu alt satıra sarıyor. */
.currency-amount-row {
    display: flex;
    align-items: stretch;
}

.currency-amount-row .money-input {
    flex: 1 1 auto;
    min-width: 0;
}

.currency-amount-row .money-input .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.currency-amount-select {
    flex: 0 0 auto;
    width: 6.5rem;
    margin-left: -1px;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Kur elle değiştirildiğinde alan işaretlenir; kullanıcı otomatik kurdan
   saptığını görmeli. */
.currency-amount.is-manual .form-control {
    border-color: var(--color-warning);
}

.currency-amount-restore {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin-left: -1px;
    border-radius: 0;
}

/* Zamanlanmış iş planı düzenleyicisi. */
.scheduler-plan {
    padding: 1rem;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.scheduler-plan-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.scheduler-times {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.scheduler-time {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
}

.scheduler-weekdays {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.scheduler-weekday {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--bs-border-radius-pill);
}

.scheduler-weekday.selected {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.scheduler-weekday input {
    margin: 0;
}

.scheduler-history-heading {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    margin-bottom: 0.75rem;
}

.scheduler-history-result {
    max-width: 22rem;
    overflow: hidden;
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   İntranet sosyal akışı (/app/index.php)
   --------------------------------------------------------------------------- */
/* Akış sütunu 680 pikselde durur: bir satırın rahat okunduğu genişlik budur,
   geniş ekranda uzayıp göz taramasını zorlaştırmaz. Sütunlar ortalanır. */
.feed-layout {
    display: grid;
    grid-template-columns: minmax(0, 680px);
    justify-content: center;
    gap: 1rem;
    align-items: start;
}

@media (min-width: 992px) {
    .feed-layout {
        grid-template-columns: 17rem minmax(0, 680px);
    }
}

@media (min-width: 1400px) {
    .feed-layout {
        grid-template-columns: 17rem minmax(0, 680px) 20rem;
    }
}

.feed-side {
    display: grid;
    gap: 1rem;
}

/* Dar ekranda yan sütunlar akışın altına düşer; sabit kolon yüksekliği
   bırakmamak için sticky yalnızca geniş ekranda açılır. */
@media (min-width: 992px) {
    .feed-side {
        position: sticky;
        top: 5rem;
    }
}

.feed-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.feed-card-title {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-border);
}

/* Avatar akışta onlarca kez tekrar eder. Hepsi dolu renk olursa ekranın
   ağırlığı baş harflere kayar; nötr daire adı okutur, dikkat çekmez. */
.feed-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    overflow: hidden;
    color: var(--color-text);
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 50%;
}

/* Fotoğrafı olan kişide daire baş harf değil resim taşır. */
.feed-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feed-avatar-sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.6875rem;
}

.feed-avatar-lg {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.25rem;
    border: 3px solid var(--color-surface);
}

/* ─── Profil kartı ─── */
.feed-profile {
    overflow: hidden;
    text-align: center;
}

/* Profil kartındaki tek renkli alan budur: kimliğin durduğu yer. İki ayrı
   renge geçen degrade dikkati kartın içeriğinden alıyordu. */
.feed-profile-cover {
    height: 4.5rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
}

.feed-profile-body {
    padding: 0 1rem 1rem;
}

.feed-profile-body .feed-avatar {
    margin: -2.25rem auto 0.5rem;
}

.feed-profile-name {
    margin: 0;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 700;
}

.feed-profile-meta {
    margin: 0.125rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

/* Firma adı bir durum değil, bir bilgidir; renkli rozet hak etmez. */
.feed-profile-company {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    margin-top: 0.625rem;
    padding: 0.25rem 0.625rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    background: var(--color-neutral-soft);
    border-radius: var(--radius-pill);
}

/* ─── Gönderi kutusu ─── */
.feed-composer {
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
}

.feed-composer-row {
    display: flex;
    gap: 0.625rem;
    align-items: center;
}

.feed-composer-trigger {
    flex: 1;
    min-width: 0;
    padding: 0.625rem 1rem;
    color: var(--color-text-muted);
    text-align: left;
    background: var(--color-surface-muted);
    border: 0;
    border-radius: var(--bs-border-radius-pill);
}

.feed-composer-trigger:hover:not(:disabled) {
    color: var(--color-primary);
}

.feed-composer-trigger:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.feed-composer-actions {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.75rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--color-border);
}

.feed-composer-actions button {
    display: flex;
    flex: 1;
    gap: 0.375rem;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
}

.feed-composer-actions button:hover:not(:disabled),
.feed-composer-actions button:focus-visible:not(:disabled) {
    color: var(--color-primary);
    background: var(--color-surface-muted);
}

.feed-composer-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ─── Gönderi ─── */
.feed-post {
    margin-bottom: 1rem;
    overflow: hidden;
}

.feed-post-head {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    padding: 0.875rem 1rem 0.5rem;
}

.feed-post-author {
    flex: 1;
    min-width: 0;
}

.feed-post-author strong {
    display: block;
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.feed-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.feed-post-title {
    padding: 0 1rem;
    margin: 0 0 0.375rem;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 700;
}

.feed-post-content {
    padding: 0 1rem 0.75rem;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.feed-post-content p {
    margin: 0 0 0.5em;
}

.feed-post-content p:last-child {
    margin-bottom: 0;
}

.feed-post-content a {
    color: var(--color-link);
}

.feed-post-content ul,
.feed-post-content ol {
    padding-left: 1.25rem;
    margin: 0.375rem 0;
}

.feed-post-deleted {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 1rem;
    color: var(--color-danger);
    font-size: 0.8125rem;
    background: var(--color-surface-muted);
}

/* ─── Medya ─── */
.feed-media {
    display: grid;
    gap: 2px;
    background: var(--color-border);
}

.feed-media-1 { grid-template-columns: 1fr; }
.feed-media-2 { grid-template-columns: 1fr 1fr; }
.feed-media-3 { grid-template-columns: 2fr 1fr; }
.feed-media-3 .feed-media-cell:first-child { grid-row: span 2; }
.feed-media-4 { grid-template-columns: 1fr 1fr; }
.feed-media-many { grid-template-columns: repeat(3, 1fr); }

.feed-media-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--color-surface-muted);
    border: 0;
}

.feed-media-1 .feed-media-cell {
    aspect-ratio: 16 / 9;
}

.feed-media-cell img,
.feed-media-cell video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feed-media-file {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.75rem;
    color: var(--color-text);
    font-size: 0.8125rem;
    text-align: left;
}

.feed-media-badge {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    color: #fff;
    background: rgb(0 0 0 / 55%);
    border-radius: 50%;
}

.feed-media-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    background: rgb(0 0 0 / 55%);
}

/* ─── Link önizleme ─── */
/*
 * Gömülü oynatıcı (YouTube). Oran 16/9 sabittir: iframe içeriğinin yüksekliği
 * dışarıdan ölçülemiyor, kutu verilmezse çerçeve sıfır yükseklikle açılıyor.
 */
.feed-embed {
    aspect-ratio: 16 / 9;
    background: #000;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.feed-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.feed-link {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--color-text);
    text-decoration: none;
    background: var(--color-surface-muted);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.feed-link:hover {
    color: var(--color-text);
    background: var(--color-primary-soft);
}

.feed-link-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    color: var(--color-primary);
    background: var(--color-surface);
    border-radius: var(--radius-md);
}

.feed-link-domain {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
}

.feed-link-title {
    font-size: 0.875rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* ─── Anket ─── */
.feed-poll {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--color-border);
}

.feed-poll-question {
    margin: 0 0 0.625rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.feed-poll-option {
    position: relative;
    display: flex;
    gap: 0.625rem;
    align-items: center;
    width: 100%;
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.375rem;
    overflow: hidden;
    color: var(--color-text);
    text-align: left;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.feed-poll-option:hover:not(:disabled) {
    border-color: var(--color-primary);
}

.feed-poll-option.voted {
    color: var(--color-primary);
    font-weight: 600;
    border-color: var(--color-primary);
}

.feed-poll-bar {
    position: absolute;
    inset: 0;
    background: var(--color-primary-soft);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.feed-poll-label,
.feed-poll-percent {
    position: relative;
}

.feed-poll-label {
    flex: 1;
    min-width: 0;
}

.feed-poll-percent {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.feed-poll-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

/* ─── İstatistik ve eylemler ─── */
.feed-post-stats {
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.5rem 1rem 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.feed-post-stats button {
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
}

.feed-post-actions {
    display: flex;
    padding: 0.25rem 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.feed-post-actions button {
    display: flex;
    flex: 1;
    gap: 0.375rem;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
}

.feed-post-actions button:hover,
.feed-post-actions button:focus-visible {
    color: var(--color-primary);
    background: var(--color-surface-muted);
}

.feed-post-actions button.liked {
    color: var(--color-danger);
    font-weight: 600;
}

/* ─── Yorumlar ─── */
.feed-comments {
    padding: 0.5rem 1rem 0.875rem;
    border-top: 1px solid var(--color-border);
}

.feed-comment {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.feed-comment-body {
    flex: 1;
    min-width: 0;
}

.feed-comment-bubble {
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-muted);
    border-radius: var(--radius-lg);
}

.feed-comment-bubble strong {
    display: block;
    font-size: 0.75rem;
}

.feed-comment-bubble p {
    margin: 0;
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.feed-comment-meta {
    display: flex;
    gap: 0.5rem;
    padding: 0.125rem 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.feed-comment-meta button {
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
}

.feed-comment-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.feed-comment-form input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.875rem;
    color: var(--color-text);
    background: var(--color-surface-muted);
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius-pill);
}

.feed-comment-form input:focus {
    border-color: var(--color-primary);
    outline: none;
}

.feed-comment-more {
    padding: 0;
    margin-bottom: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    background: none;
    border: 0;
}

/* ─── Kota kartı ─── */
.feed-quota {
    padding: 1rem;
}

.feed-quota-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
}

.feed-quota-bar {
    height: 0.375rem;
    overflow: hidden;
    background: var(--color-surface-muted);
    border-radius: var(--bs-border-radius-pill);
}

.feed-quota-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--bs-border-radius-pill);
    transition: width 0.4s ease;
}

.feed-quota-fill.warning { background: var(--color-warning); }
.feed-quota-fill.full { background: var(--color-danger); }

.feed-quota-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 0.375rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.feed-quota-permission {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    padding: 0.5rem 0.625rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    background: var(--color-surface-muted);
    border-radius: var(--radius-md);
}

.feed-quota-permission span:first-child {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border-radius: 50%;
}

.feed-quota-permission.granted span:first-child {
    color: var(--color-success);
}

.feed-quota-permission strong {
    flex: 1;
    font-weight: 500;
}

/* ─── Hızlı erişim ─── */
.feed-quick-action {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.75rem;
    color: var(--color-text);
    font-size: 0.8125rem;
    text-align: left;
    text-decoration: none;
    background: transparent;
    border: 0;
}

.feed-quick-action:hover,
.feed-quick-action:focus-visible {
    color: var(--color-text);
    background: var(--color-surface-muted);
}

/* Hızlı erişimde günlük işlerle yönetim bağlantılarını ayıran başlık. */
.feed-quick-group {
    padding: 0.75rem 0.75rem 0.25rem;
    margin-top: 0.25rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-top: 1px solid var(--color-border);
}

/* İkon çipi: yumuşak nötr zeminde köşeleri yuvarlatılmış kare. Liste boyunca
   aynı biçimde tekrar ettiği için sakin kalması gerekir. */
.feed-quick-action span:first-child {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border-radius: var(--radius-md);
}

.feed-quick-action:hover span:first-child,
.feed-quick-action:focus-visible span:first-child {
    color: var(--color-text);
}

/* ─── Yeni gönderi şeridi ───
   Akıştan olay gelince görünür. Yapışkan konumlandırma bilinçli: kullanıcı
   aşağı kaydırmışken de görünmesi gerekiyor, yoksa yeni gönderiden ancak
   başa dönerse haberi olurdu. */
.feed-new-posts {
    position: sticky;
    top: 0.75rem;
    z-index: 3;
    display: flex;
    gap: 0.375rem;
    align-items: center;
    align-self: center;
    margin: 0 auto 0.75rem;
    padding: 0.5rem 1.125rem;
    border: 0;
    border-radius: var(--radius-control, 7px);
    background: var(--module-intranet, #141a23);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.feed-new-posts:hover {
    filter: brightness(1.1);
}

/* ─── Boş durum ve yükleme ─── */
.feed-empty {
    padding: 2.5rem 1rem;
    color: var(--color-text-muted);
    text-align: center;
}

.feed-loading {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    color: var(--color-text-muted);
}

.feed-more {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0 1.5rem;
}

/* ─── Gönderi oluşturma kutusu ─── */
.feed-compose-types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.875rem;
}

.feed-compose-uploads {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.feed-compose-upload {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.feed-compose-upload img,
.feed-compose-upload video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feed-compose-upload-file {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    text-align: center;
    overflow-wrap: anywhere;
}

.feed-compose-upload button {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: #fff;
    background: rgb(0 0 0 / 55%);
    border: 0;
    border-radius: 50%;
}

.feed-compose-poll-option {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
}

/* Görünürlük seçimi etiketin yanında durur. Arama kutulu seçim bileşeni
   genişliğini kapsayıcısından aldığı için ölçü burada verilir. */
.feed-visibility-select {
    width: 16rem;
    max-width: 100%;
}

/* ─── Arama ve tür süzgeci ─── */
.feed-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
    padding: 0.625rem 0.875rem;
    margin-bottom: 1rem;
}

.feed-filter-search {
    display: flex;
    flex: 1 1 12rem;
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
    padding: 0.375rem 0.625rem;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border-radius: var(--radius-md);
}

.feed-filter-search input {
    flex: 1;
    min-width: 0;
    color: var(--color-text);
    background: transparent;
    border: 0;
    outline: none;
}

.feed-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.feed-filter-chips button {
    padding: 0.25rem 0.625rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    background: var(--color-surface-muted);
    border: 1px solid transparent;
    border-radius: 999px;
}

.feed-filter-chips button:hover {
    color: var(--color-primary);
}

.feed-filter-chips button.active {
    color: var(--color-primary);
    font-weight: 600;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}

/* ─── Tepkiler ─── */
/* Tepki menüsü düğmenin üzerinde açılır; dokunmatikte düğme LIKE'ı açıp
   kapatır, menü hover/focus ile gelir. */
.feed-react-wrap {
    position: relative;
    display: flex;
    flex: 1;
}

.feed-react-wrap > button {
    width: 100%;
}

.feed-react-menu {
    position: absolute;
    bottom: calc(100% + 0.25rem);
    left: 50%;
    z-index: 30;
    display: flex;
    gap: 0.125rem;
    padding: 0.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    box-shadow: var(--shadow-floating);
    opacity: 0;
    transform: translateX(-50%) translateY(0.25rem);
    visibility: hidden;
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}

.feed-react-wrap:hover .feed-react-menu,
.feed-react-wrap:focus-within .feed-react-menu {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
}

.feed-react-menu button {
    flex: 0 0 auto;
    padding: 0.25rem 0.375rem;
    font-size: 1.125rem;
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: 999px;
}

.feed-react-menu button:hover,
.feed-react-menu button.active {
    background: var(--color-surface-muted);
    transform: scale(1.15);
}

.feed-reaction-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.feed-post-stats-right {
    display: flex;
    gap: 0.75rem;
}

/* ─── Etiketlenenler ve takdir ─── */
.feed-mentions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
    padding: 0 1rem 0.375rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.feed-mention-chip {
    padding: 0.125rem 0.5rem;
    background: var(--color-surface-muted);
    border-radius: 999px;
}

.feed-post-kudos {
    border-top: 3px solid var(--color-warning);
}

.feed-kudos-banner {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.875rem;
    margin: 0 1rem 0.625rem;
    color: var(--color-warning);
    font-weight: 600;
    background: color-mix(in srgb, var(--color-warning) 14%, transparent);
    border-radius: var(--radius-md);
}

/* ─── Okundu onayı ─── */
.feed-ack {
    padding: 0.25rem 1rem 0.5rem;
}

.feed-ack-done {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    color: var(--color-success);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* ─── Yanıt ve @ etiketleme ─── */
.feed-comment-reply {
    margin-left: 2.25rem;
}

.feed-reply-note {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.375rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.feed-reply-note button {
    padding: 0;
    color: var(--color-primary);
    background: none;
    border: 0;
}

.feed-comment-form {
    position: relative;
}

.feed-mention-menu {
    position: absolute;
    bottom: calc(100% + 0.25rem);
    left: 2.25rem;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 14rem;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-floating);
}

.feed-mention-menu button {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.375rem 0.625rem;
    text-align: left;
    background: transparent;
    border: 0;
}

.feed-mention-menu button:hover {
    background: var(--color-surface-muted);
}

/* ─── Kimler gördü ─── */
.feed-viewer-row {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--color-border);
}

.feed-viewer-row:last-child {
    border-bottom: 0;
}

/* ─── Bağlantıdan gelinen gönderi ─── */
.feed-post-highlight {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Firma ağzından gönderinin avatarı bina simgesidir. */
.feed-avatar-company {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

/* Büyütülmüş medya ortak bileşendedir (`media-lightbox`); akışın kendi
   kopyası yoktu, aşağıdaki bölüme bakınız. */

/* ---------------------------------------------------------------------------
   Talep listesi (Fırsatlar)
   --------------------------------------------------------------------------- */

/* Etkin filtre etiketleri: kullanıcı hangi daraltmanın yürürlükte olduğunu
   modalı açmadan görür ve tek tek kaldırabilir. */
.lead-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.lead-filter-chip {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    padding: 0.25rem 0.5rem 0.25rem 0.625rem;
    color: var(--color-text);
    font-size: 0.75rem;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.lead-filter-chip strong {
    color: var(--color-text-muted);
    font-weight: 500;
}

.lead-filter-chip-clear {
    display: inline-flex;
    align-items: center;
    padding: 0;
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
}

.lead-filter-chip-clear:hover {
    color: var(--bs-danger);
}

/* Grid hücrelerinde iki satırlı içerik: ad ve alt bilgi. Dikey boşluk
   Tabulator hücresinden gelir; burada eklenmezse satır yüksekliği aşılmaz. */
.lead-cell {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    line-height: 1.3;
}

.lead-cell-no {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.lead-cell-title {
    color: var(--color-text);
    font-weight: 500;
}

.lead-cell-sub {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.lead-cell-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.125rem;
    font-size: 0.6875rem;
}

/* Telefon ve e-posta satırı tıklanınca panoya kopyalanır. */
.lead-contact-line {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    padding: 0;
    color: var(--color-text);
    font-size: 0.8125rem;
    text-align: left;
    background: transparent;
    border: 0;
}

.lead-contact-line:hover {
    color: var(--color-primary);
}

/* Filtre ve izin kutularının onay kutusu grubu. */
.lead-choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding: 0.625rem 0.75rem;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.lead-choice-group .form-check {
    margin-right: 0;
}

/* Müşteri hücresi: solda kimlik, sağda e-posta rozeti. Genişlik hücreye
   sabitlenir; uzun ad kısalır, rozet kırpılmaz. */
.lead-cell-split {
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.lead-cell-split > .badge {
    flex: 0 0 auto;
}

.lead-cell-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lead-cell-info .lead-cell-title,
.lead-cell-name .lead-cell-title,
.lead-cell-info .lead-cell-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Müşteri adı ülke bayrağıyla başlar; bayrak sabit genişlikte durur, uzun ad
   kısalır. */
.lead-cell-name {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    min-width: 0;
}

.lead-flag {
    flex: 0 0 auto;
    width: 21px;
    height: 15px;
    object-fit: cover;
    border-radius: 0.125rem;
}

/* ---------------------------------------------------------------------------
   Yoğun form: çok alan taşıyan modaller
   ---------------------------------------------------------------------------
   Talep formu ve gelişmiş filtre gibi ekranlar dizüstü çözünürlüğünde (1366 x
   768) kaydırmadan okunabilmelidir. Alanlar bölümlere ayrılır, etiketler
   küçülür ve satır yüksekliği düşer; alan altı açıklama kullanılmaz. */
.form-compact .form-label {
    margin-bottom: 0.1875rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.form-compact .form-control,
.form-compact .form-select,
.form-compact .search-select-trigger,
.form-compact .iti input {
    min-height: 30px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.8125rem;
}

.form-compact textarea.form-control {
    min-height: 3.25rem;
}

.form-compact .form-check-label {
    font-size: 0.8125rem;
}

.input-group-text { font-size: 0.8125rem; padding: 0 .75rem; }

/* GİB sorgu penceresindeki olgu listesi: ad sütunu sabit, değerler tek hizada.
   İki ayrı tablo vardı (sağlayıcı künyesi ve etiketler) ve ad sütunları farklı
   genişlikteydi; değerler birbirini tutmuyordu. Genişlik yüzdeyle verilseydi
   künyeye uzun adlı yeni bir alan geldiğinde sütun yine kayardı. */
.einvoice-facts th {
    width: 14rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

/* Künye ile etiketlerin arasına ince bir ayrım: aynı tabloda iki farklı kaynak
   var ve okuyan hangisinin GİB künyesi, hangisinin posta kutusu olduğunu
   ayırt edebilmeli. */
.einvoice-facts .einvoice-facts-group th,
.einvoice-facts .einvoice-facts-group td {
    border-top: 2px solid var(--bs-border-color);
    padding-top: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Etiket solda, alan sağda
   ---------------------------------------------------------------------------
   `form-compact` ile birlikte kullanılır ve alanın **içini** yeniden dizer:
   etiket sola, denetim sağa. Alanların kendisi ızgarada alt alta akmaya devam
   eder.

   Izgara tercih edildi çünkü seçenek her alanı `<div class="row">` +
   `col-form-label` ile sarmalamaktı: yirmi alanın işaretlemesi iki katına
   çıkardı ve `search-select`, `phone-input`, `input-group`, `btn-group` gibi
   farklı denetimlerin her biri ayrı sarmalayıcı isterdi. Burada işaretleme
   olduğu gibi kalıyor; hizayı sütun tanımı veriyor.

   Dar ekranda tek sütuna döner: 9rem'lik etiketle yan yana duran bir alan
   telefonda okunmuyor. */

.form-inline-labels .row > [class*="col-"] {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0.1875rem;
}

@media (min-width: 768px) {
    .form-inline-labels .row > [class*="col-"] {
        grid-template-columns: 9rem minmax(0, 1fr);
        align-items: center;
        /* Satır içinde etiket denetimle ortalanır (`align-items`), ama
           hücrenin KENDİSİ yukarıdan başlar. Yan yana iki alandan biri
           ipucu taşıdığında sütun uzar; `align-content` verilmezse
           yanındaki kısa alan o boşlukta dikeyde ortalanır ve iki input
           aynı hizada durmaz. */
        align-content: start;
        column-gap: 0.625rem;
        row-gap: 0.375rem;
    }

    /* Etiketi olmayan tam genişlik blok (uyarı kutusu, özet paneli) ızgaranın
       İKİ sütununu da kaplar. Aksi hâlde tek çocuk olduğu için 9rem'lik ilk
       sütuna düşüyor ve içindeki metin harf harf sarıyordu — müşteri kartındaki
       e-Belge sorgu kutusu tam olarak böyle görünüyordu (31 Ağu 2026). */
    .form-inline-labels .row > [class*="col-"].form-row-full {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Etiketin alt boşluğu dikey dizilim içindi; yan yana dururken hizayı bozar. */
    .form-inline-labels .form-label {
        margin-bottom: 0;
        text-align: end;
    }

    /* Etiketi birden çok satıra yayılan denetimler (metin kutusu, seçenek
       düğmeleri) üstten hizalanır; ortalanınca etiket boşlukta kalıyor. */
    .form-inline-labels .row > [class*="col-"]:has(textarea),
    .form-inline-labels .row > [class*="col-"]:has(.choice-pills),
    .form-inline-labels .row > [class*="col-"]:has(.form-check) {
        align-items: start;
    }

    .form-inline-labels .row > [class*="col-"]:has(textarea) .form-label,
    .form-inline-labels .row > [class*="col-"]:has(.choice-pills) .form-label,
    .form-inline-labels .row > [class*="col-"]:has(.form-check) .form-label {
        padding-top: 0.3125rem;
    }

    /* Uzun bir etiket ya da ipucu, ızgaranın sabit ilk sütununu ve
       modalın genişliğini zorlamamalı: kırılamayan uzun bir sözcük
       (bir kod, bir bağlantı) sütunu şişirip yandaki denetimi taşırıyordu. */
    .form-inline-labels .form-label,
    .form-inline-labels .row > [class*="col-"] > .form-text,
    .form-inline-labels .row > [class*="col-"] > .invalid-feedback {
        overflow-wrap: anywhere;
    }

    /* Alanın ipucu denetimin ALTINA düşer, etiketin altına değil.
       Hücrede üçüncü bir çocuk olduğunda ızgara onu kendiliğinden ikinci
       satırın BİRİNCİ sütununa koyar; ipucu o zaman etikete hizalanır ve
       hangi alanı anlattığı okunmaz. Doğrulama mesajı da aynı sütundadır. */
    .form-inline-labels .row > [class*="col-"] > .form-text,
    .form-inline-labels .row > [class*="col-"] > .invalid-feedback {
        grid-column: 2;
        /* Aralığı ızgaranın `row-gap`i verir. Bootstrap'in kendi
           `margin-top`u üstüne binince ipucu denetimden 12px uzağa
           düşüyor ve hangi alana ait olduğu okunmuyordu. */
        margin-top: 0;
    }
}

/* Bölümler ince bir çizgiyle ayrılır; kutu içinde kutu görüntüsü oluşmaz. */
.form-section + .form-section {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--color-border);
}

.form-section-head {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    margin-bottom: 0.375rem;
    color: var(--color-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Çoklu seçim: onay kutusu satırı yerine hap düğmeler. Aynı yerde daha çok
   seçenek gösterir ve seçili olanlar tek bakışta görünür. */
.choice-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.choice-pills .btn {
    padding: 0.1875rem 0.625rem;
    font-size: 0.75rem;
    border-radius: 999px;
}

/* Uzun formlar başlık ve düğmeler sabit kalacak biçimde kendi içinde kaydırılır;
   küçük ekranda modal sayfanın dışına taşmaz. */
.base-modal .modal-body {
    max-height: calc(100vh - 11rem);
    overflow-y: auto;
}

/* Yaşam döngüsü göstergesi: tanımdaki renk noktası ve aşama adı. Renk veriden
   geldiği için Bootstrap sınıfı değil, noktanın kendisi boyanır. */
.lead-lifecycle {
    display: inline-flex;
    gap: 0.4375rem;
    align-items: center;
}

.lead-lifecycle-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgb(0 0 0 / 6%);
}

/* ---------------------------------------------------------------------------
   Kullanıcı ve yetki ekranı
   --------------------------------------------------------------------------- */

/* Seçilebilir etiket: kutucuk görünmez, hap'ın kendisi durumu anlatır.
   Konuşulan diller gibi kısa ve çoklu seçimlerde kullanılır. */
.choice-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    background: var(--color-surface);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.choice-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-pill.active {
    color: var(--color-text);
    border-color: var(--color-border-strong);
    background: var(--color-surface-muted);
}

/* Firma ve şube kapsamı: kutucuk listesi. Otuz sekiz şube tek sütunda uzun bir
   şerit olurdu; liste sütunlara yayılır ve firmasına göre gruplanır. */
.access-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.25rem 1rem;
}

.access-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.8125rem;
    cursor: pointer;
}

.access-item .form-check-input {
    margin: 0;
    flex: 0 0 auto;
}

.access-group + .access-group {
    margin-top: 1rem;
}

.access-group-label {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Birincil firma/şube kutucuğu kilitlidir: kapsamdan çıkarılamayacağı için
   işareti neden kalktığı anlaşılmayan bir kutucuk yerine sebebi yanında yazar. */
.access-item-note {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
}

.access-empty {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

/* İşlem yetkileri matrisi.
   Kırk küsur modül ve altı eylem tek tabloda durur: kolon sayısı modül
   kaydından geldiği için genişlik sabit sayıya değil kolon sayısına bırakılır.
   Satırlar dardır; yetki vermek uzun bir liste üzerinde çalışmaktır, her satıra
   form yüksekliği vermek listeyi okunmaz eder. */
.permission-copy {
    display: flex;
    flex: 0 0 auto;
    gap: 0.5rem;
    align-items: center;
    width: 26rem;
}

.permission-copy .btn {
    white-space: nowrap;
}

.permission-body {
    gap: 0.625rem;
    padding: 0.75rem;
}

.permission-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.permission-search {
    flex: 0 1 18rem;
}

.permission-summary {
    margin-inline-start: auto;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Başlık kaydırma sırasında yerinde kalır: otuz satır aşağıda hangi kolonun ne
   olduğu yalnızca hizadan okunamaz. */
.permission-scroll {
    max-height: calc(100vh - 23rem);
    /* Bütün gruplar kapalıyken kart boş alanla uzamaz; açıldıkça büyür ve
       tavana gelince kendi içinde kaydırır. */
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.permission-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.permission-table th,
.permission-table td {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.8125rem;
    text-align: center;
}

.permission-table th:first-child,
.permission-table td:first-child {
    width: 38%;
    padding-inline-start: 0.75rem;
    text-align: start;
}

.permission-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-block: 0.375rem;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.permission-table thead th span {
    display: block;
}

.permission-table tbody tr:hover td {
    background: var(--color-surface-muted);
}

.permission-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Kutucuk hücrenin tamamını kaplar: on dört piksellik kareyi hedeflemek kırk
   satırlık bir listede yorucudur. */
.permission-check {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0;
    margin: 0;
    cursor: pointer;
}

.permission-check .form-check-input {
    margin: 0;
    cursor: pointer;
}

.permission-dash {
    color: var(--color-border-strong);
}

/* Grup satırı: aynı tablonun içindedir, kendi eylem kutucuklarıyla grubun
   tamamını açıp kapatır. */
.permission-group-row td {
    background: var(--color-surface-muted);
}

.permission-group-row:hover td {
    background: var(--color-surface-muted);
}

.permission-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0;
    border: 0;
    color: var(--color-text);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: start;
}

.permission-group-toggle small {
    margin-inline-start: auto;
    padding-inline-end: 0.25rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
}

.permission-empty {
    margin: 0;
    padding: 1.5rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    text-align: center;
}

/* Kullanıcı kartı yönetim ekranıdır: künye şeridi profil sayfasındaki kadar
   yer kaplamaz, kazanılan yükseklik yetki listesine gider. Notebook ekranında
   fark üç dört satırdır. */
.profile-layout-compact .profile-hero-cover {
    height: 3rem;
}

.profile-layout-compact .profile-avatar {
    width: 3.25rem;
    height: 3.25rem;
    margin-top: -2rem;
    font-size: 1.125rem;
}

.profile-layout-compact .profile-hero-main {
    padding: 0.625rem 1.25rem 0.875rem;
}

.profile-layout-compact .profile-hero-copy h2 {
    font-size: 1.125rem;
}

.profile-layout-compact .profile-hero-facts > div {
    padding: 0.5rem 1.25rem;
}

/* Kullanıcı bilgileri sekmesinin yerleşimi.
   Solda kullanıcının kendi kartı (kimlik, organizasyon, mail imzası), sağda
   hesap ayarları ve parola. İki sütun ayrı yığındır: tek grid kullanılsaydı yan
   yana düşen kartların satır yükseklikleri birbirine bağlanır ve kısa kartın
   altında boşluk kalırdı. Kimlik kartı yedi alan taşıdığı için geniş sütundadır;
   dar sütuna sıkışsa alanlar alt alta dizilirdi. */
.user-card-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.user-card-column {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

/* Dar ekranda iki sütun kalmaz: sağdaki sütun daralınca form alanları
   okunmaz genişliğe iner. */
@media (max-width: 1199px) {
    .user-card-layout {
        grid-template-columns: 1fr;
    }
}

/* Kullanıcı kartında imza ve kaydet şeridi bütün genişliği kullanır. */
.profile-card-wide {
    grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------
   Müşteri kartı
   --------------------------------------------------------------------------- */

.customer-page {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Gezinme ve silme, eylem çubuğunun sağ ucunda ayrı bir kümedir: satırdaki
   diğer düğmeler kayıt üzerinde iş yapar, bunlar kayıttan çıkarır. */
.customer-toolbar-end {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

/* ---------------------------------------------------------------------------
   İlerleme şeridi
   ---------------------------------------------------------------------------
   Salt görsel: tıklanmaz, odak almaz. Amaç kaydın nerede olduğunu bir bakışta
   göstermek. Tamamlanan aşamalar dolu, bulunulan aşama vurgulu, kalanlar
   soluktur; altındaki ince çubuk oranı sürekli gösterir. */

.customer-progress {
    padding: 0.875rem 1rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.customer-progress-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.customer-progress-title {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
    font-size: 0.9375rem;
}

/* Şeridin tamamı durumun rengini `--customer-stage-color` üzerinden okur.
   Değişken yoksa birincil renge düşer: durum belirlenmemiş kayıtta şerit yine
   de okunur kalmalı. */
.customer-progress {
    --stage: var(--customer-stage-color, var(--color-primary));
}

.customer-progress-dotmark {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--stage);
    border-radius: 50%;
}

.customer-progress-reason {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.customer-progress-reason::before {
    margin-right: 0.375rem;
    content: "·";
}

.customer-progress-meta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.customer-progress-next {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.customer-progress-percent {
    padding: 0.125rem 0.5rem;
    color: var(--stage);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--stage) 12%, transparent);
    border-radius: var(--radius-pill);
}

/* Kaydırma şeridin kendisinde değil sarmalayıcıdadır: `overflow` kutunun
   dışına taşan gölgeyi keser ve tutamağın halkası yarım kalırdı. Dikey boşluk
   halkaya yer açar. */
/* Üst dolgu nabız halkasının tamamına yer açar ve `overflow` onu kesmez:
   halka tutamağın 13 piksel dışına çıkar, tutamağın merkezi de rayın
   ortasındadır. Negatif üst boşluk bu payı görsel olarak geri alır, yoksa
   başlık ile şerit arasında boşluk açılırdı. */
.customer-progress-scroll {
    margin-top: -0.75rem;
    padding: 1.5rem 0 0.125rem;
    overflow-x: auto;
}

/* Ray, tutamağın taşabilmesi için konumlandırma bağlamıdır; kırpma yapmaz. */
.customer-progress-rail {
    position: relative;
    min-width: max-content;
}

/* Şeridin kendisi: baştan sona tek bir renk geçişi. Geçiş satır içi gelir,
   çünkü renkler aşama tanımından okunur. */
.customer-progress-bar {
    height: 0.5rem;
    border-radius: var(--radius-pill);
}

/* Tutamak: raya oturan dikey hap. Sürüklenmez — imleç değişmez, odak almaz.
   Beyaz halka onu geçişin üzerinden ayırır, gölge zeminden kaldırır. */
.customer-progress-thumb {
    position: absolute;
    top: 50%;
    width: 1.125rem;
    height: 1.125rem;
    background: var(--stage);
    border: 3px solid var(--color-surface);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgb(24 24 27 / 22%);
    transform: translate(-50%, -50%);
    transition: left 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* Nabız tutamağın etrafındadır: ekranda hareket eden tek öğe odur. */
.customer-progress-thumb::after {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    animation: customer-progress-pulse 2.4s ease-out infinite;
    content: "";
}

/* Etiketler şeridin altında, aşamalarla aynı hizada eşit paylaşır. */
.customer-progress-labels {
    display: flex;
    gap: 0.25rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.customer-progress-label {
    flex: 1 1 0;
    min-width: 7.5rem;
    color: var(--color-text-subtle);
    font-size: 0.75rem;
    line-height: 1.25;
    text-align: center;
}

.customer-progress-label.done {
    color: var(--color-text-muted);
}

.customer-progress-label.current {
    color: var(--color-text);
    font-weight: 700;
}

@keyframes customer-progress-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--stage) 40%, transparent); }
    70% { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Hareketi azaltılmış tercihinde nabız durur; bilgi kaybı yoktur. */
@media (prefers-reduced-motion: reduce) {
    .customer-progress-thumb::after {
        animation: none;
    }

    .customer-progress-thumb {
        transition: none;
    }
}

.customer-columns {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 0.75rem;
}

.customer-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.customer-card-head {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

/* Kart içindeki form kendi dolgusunu kartın kenarından alır. `.form-compact`
   asıl olarak modal gövdesinde kullanılır ve orada dolguyu modal verir; kart
   içine konduğunda alanlar kenara yapışırdı. */
.customer-card > .form-compact {
    padding: 0.875rem 1rem;
}

/* Başlıklı kartta form başlığın altındadır; üstteki dolgu iki kez birikmesin. */
.customer-card > .customer-card-head + .form-compact {
    padding-top: 0.75rem;
}

/* Kart içindeki tablo: hücre dolgusu kartın 1rem'ine çekilmez, 0.625rem kalır.
   Düz tablolar grid ile aynı dili konuşur (bkz. `.table` kuralları) ve dolgu o
   dilin parçasıdır; ayrıca sabit düzendeki `#` kolonu 2.5rem'dir, 1rem dolgu
   iki haneli satır numarasını kırpardı.

   Başlık şeridinin alt çizgisi ile tablo başlığının üst çizgisi yan yana
   gelince iki piksellik çift çizgi çıkar; şeridin çizgisi yeter. Araya satır
   ekleme çubuğu giren kartta (`.definition-toolbar-actions`) komşuluk bozulur
   ve tablo kendi çizgisini korur — orada ayırıcıya ihtiyaç vardır. */
.customer-card-head + .table-responsive > .table > thead > tr > th {
    border-top: 0;
}

/* Tablo kartın köşesini taşırmasın: başlık zemini ve satır vurgusu kartın
   yuvarlak köşesinde kare bir kenar bırakıyordu. */
.customer-card > .table-responsive:last-child {
    border-bottom-right-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
}

.customer-card > .table-responsive:first-child {
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
}

/* Son satırın alt çizgisi kartın kendi kenarıyla üst üste biner. Genişlik
   korunur, yalnız rengi kalkar: satır yüksekliği değişmesin. */
.customer-card > .table-responsive:last-child > .table > tbody > tr:last-child > td {
    border-bottom-color: transparent;
}

/* Tablonun üstündeki satır ekleme çubuğu. Ekranlar dolguyu `px-3 pt-3` ile
   veriyordu: alt dolgu yoktu ve çubuk tablo başlığına yapışıyordu. */
.customer-card > .definition-toolbar-actions {
    padding: 0.875rem 1rem;
}

.customer-owner {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.customer-owner strong {
    color: var(--color-text);
}

/* Avatar ve ikon çipleri nötr zemindedir: onlarca kez tekrar eden öğe renk
   taşırsa ekranın ağırlığı ona kayar. */
.customer-avatar,
.customer-chip,
.customer-counter-icon,
.customer-timeline-mark {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
}

.customer-avatar {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
}

.customer-chip {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
}

.customer-identity {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: center;
    padding: 1rem;
}

.customer-identity-main {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    min-width: 0;
}

.customer-flag {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    object-fit: cover;
    border: 1px solid var(--color-border);
    border-radius: 50%;
}

.customer-name {
    margin: 0.25rem 0 0;
    font-size: 1.0625rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.customer-subtitle {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.customer-identity-product {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    min-width: 0;
    font-size: 0.8125rem;
}

.customer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

/* Alan listesi: etiket soluk ve dar, değer okunur. Üç sütun dar ekranda tek
   sütuna iner. */
.customer-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 1.5rem;
    padding: 0 1rem 0.75rem;
    border-top: 1px dashed var(--color-border);
    padding-top: 0.875rem;
}

.customer-fields dl {
    margin: 0;
}

.customer-fields dl > div {
    display: flex;
    gap: 0.5rem;
    padding: 0.3125rem 0;
    font-size: 0.8125rem;
    border-bottom: 1px dashed var(--color-border);
}

.customer-fields dl > div:last-child {
    border-bottom: 0;
}

.customer-fields dt {
    flex: 0 0 38%;
    color: var(--color-text-muted);
    font-weight: 500;
}

.customer-fields dd {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.customer-field-truncate dd,
.customer-field-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem;
    padding: 0.875rem 1rem 1rem;
    border-top: 1px solid var(--color-border);
}

.customer-counter {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.customer-counter-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
}

.customer-counter-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.customer-counter-text small {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.customer-counter-text b {
    font-size: 0.9375rem;
}

/* Sekmeler: seçili olan renkle değil yüzeyle anlatılır. */
/* Sekme çubuğu kendi alt çizgisini çizmez: sekmeler artık yuvarlatılmış birer
   düğmedir ve seçili olan kendi çerçevesiyle ayrılır. Çizgi, sekmelerin kart
   içinde durduğu ekranlarda kartın kenarlığıyla üst üste biniyordu. */
.customer-tabs {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    /* Zemin **belirtilir**: sekme şeridi sayfanın zeminiyle aynı renkte
       kalırsa çerçeve boşlukta duran bir çizgi olur. Sabit beyaz yazmak koyu
       temada beyaz şerit bırakırdı. */
    background-color: var(--color-surface);
    border-radius: 8px;
}

.customer-tab {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    padding: 0.4375rem 0.6875rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    background: transparent;
    border: 0;
    /* Dört köşesi de yuvarlak: sekme artık çubuğa yapışan bir dosya kulağı
       değil, kendi başına duran bir düğme. */
    border-radius: 7px;
}

.customer-tab:hover {
    color: var(--color-text);
    background: var(--color-surface-muted);
}

/* Seçili sekme **birincil** renktedir: gri zeminli sekme, fareyle üzerine
   gelinmiş sekmeyle aynı görünüyordu ve "hangi sekmedeyim" sorusu ancak
   içeriğe bakılarak cevaplanıyordu. */
.customer-tab.active {
    color: var(--color-primary);
    background: var(--color-primary-soft);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.customer-side-body,
.customer-tab-body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem 1rem 1rem;
}

.customer-side-body {
    max-height: 23rem;
    overflow-y: auto;
}

.customer-side-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

/* Sekme başlığındaki sayaçlar.

   Başlık ile eylemler arasında, kalan boşluğun ortasında durur: solda başlık,
   sağda süzgeç ve düğme sabit genişlikte değil, bu yüzden ortalama esnek
   kutunun kendisine bırakılır.

   `stat-tile` kullanılmadı: o karo 12rem tabanlı bir kart ve başlık şeridini
   iki katına çıkarıyor. Buradaki sayaç bir rozet boyundadır. */
.customer-head-stats {
    display: flex;
    flex: 1 1 auto;
    gap: 0.375rem;
    justify-content: center;
}

.customer-head-stat {
    display: inline-flex;
    gap: 0.375rem;
    align-items: baseline;
    padding: 0.1875rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--stat-tone, var(--color-border)) 35%, var(--color-border));
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--stat-tone, var(--color-surface)) 8%, var(--color-surface));
    font-size: 0.75rem;
    white-space: nowrap;
}

.customer-head-stat > span {
    color: var(--color-text-muted);
}

.customer-head-stat > strong {
    font-variant-numeric: tabular-nums;
}

.customer-head-stat[data-tone="warning"] {
    --stat-tone: var(--color-warning);
}

.customer-head-stat[data-tone="success"] {
    --stat-tone: var(--color-success);
}

/* Dar ekranda başlık şeridi zaten sarıyor; sayaçlar ortada değil sola yaslanır
   ki başlıkla aynı hizada dursunlar. */
@media (max-width: 47.9375em) {
    .customer-head-stats {
        flex-basis: 100%;
        justify-content: flex-start;
    }
}

.customer-empty {
    margin: 0;
    padding: 1rem 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    text-align: center;
}

/* Boş durum kartı: kayıt bulunamadığında sayfanın tamamı budur. */
.customer-empty-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
}

.customer-address,
.customer-note {
    position: relative;
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.customer-address header,
.customer-note header {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.customer-address p,
.customer-note p {
    margin: 0;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.customer-note p {
    margin-bottom: 0.375rem;
    color: var(--color-text);
    white-space: pre-line;
}

.customer-address-actions,
.customer-note-actions {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.customer-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0;
    font-size: 0.8125rem;
    border-bottom: 1px dashed var(--color-border);
}

.customer-row:last-child {
    border-bottom: 0;
}

/* Satırın sağındaki düzenle/sil ikili düğmesi. Aralık verilmezse iki kare
   düğme birbirine yapışıyor ve tek bir düğme gibi okunuyor. */
.customer-row > span {
    display: inline-flex;
    flex: none;
    gap: 0.25rem;
}

.customer-permissions {
    gap: 0.375rem;
}

.customer-record > div {
    display: flex;
    gap: 0.5rem;
    padding: 0.3125rem 0;
    font-size: 0.8125rem;
    border-bottom: 1px dashed var(--color-border);
}

.customer-record > div:last-child {
    border-bottom: 0;
}

.customer-record dt {
    flex: 0 0 45%;
    color: var(--color-text-muted);
    font-weight: 500;
}

.customer-record dd {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

/* Tablo başlıkları büyük harf, seyrek aralıklı ve soluktur; hücre sınırı
   çizgiyle belirtilir. */
.customer-table {
    margin: 0;
    font-size: 0.8125rem;
}

.customer-table thead th {
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* İşlem geçmişi. Sol kenardaki çizgi olayları birbirine bağlar; işaret
   noktaları nötr kalır, renk yalnızca rozetlerde görünür. */
.customer-timeline {
    position: relative;
    margin: 0;
    padding: 0 0 0 2.25rem;
    list-style: none;
}

.customer-timeline::before {
    position: absolute;
    top: 0.75rem;
    bottom: 0.75rem;
    left: 0.9375rem;
    width: 1px;
    background: var(--color-border);
    content: "";
}

.customer-timeline > li {
    position: relative;
    padding-bottom: 0.875rem;
}

.customer-timeline > li:last-child {
    padding-bottom: 0;
}

/* İşaret noktası türün rengini taşır. Renk yalnızca ikonda ve ince bir çerçevede
   görünür; zemin yumuşak kalır. Akış saatlerce açık duruyor — dolgun renkli
   otuz nokta ekranı okunmaz hale getirirdi. */
.customer-timeline-mark {
    position: absolute;
    top: 0;
    left: -2.25rem;
    width: 2rem;
    height: 2rem;
    color: var(--activity-accent, var(--color-text-muted));
    background: var(--color-surface);
    border-color: color-mix(in srgb, var(--activity-accent, var(--color-border)) 35%, transparent);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2rem color-mix(in srgb, var(--activity-accent, transparent) 8%, transparent);
}

.customer-activity-CREATED { --activity-accent: var(--activity-created); }
.customer-activity-CONVERTED { --activity-accent: var(--activity-converted); }
.customer-activity-LIFECYCLE { --activity-accent: var(--activity-lifecycle); }
.customer-activity-STATUS { --activity-accent: var(--activity-status); }
.customer-activity-RESPONSIBLE { --activity-accent: var(--activity-responsible); }
.customer-activity-NOTE { --activity-accent: var(--activity-note); }
.customer-activity-CALL { --activity-accent: var(--activity-call); }
.customer-activity-SMS { --activity-accent: var(--activity-sms); }
.customer-activity-EMAIL { --activity-accent: var(--activity-email); }
.customer-activity-APPOINTMENT { --activity-accent: var(--activity-appointment); }
.customer-activity-VISIT { --activity-accent: var(--activity-visit); }
.customer-activity-PAYMENT { --activity-accent: var(--activity-payment); }
.customer-activity-DOCUMENT { --activity-accent: var(--activity-document); }
.customer-activity-CONTACT { --activity-accent: var(--activity-contact); }
.customer-activity-ADDRESS { --activity-accent: var(--activity-address); }

/* Tür süzgeci hapları da aynı renkten bir nokta taşır: hangi rengin hangi tür
   olduğu akışa bakmadan öğrenilir. */
.customer-activity-pill::before {
    display: inline-block;
    width: 0.4375rem;
    height: 0.4375rem;
    margin-right: 0.375rem;
    background: var(--activity-accent, var(--color-text-subtle));
    border-radius: 50%;
    content: "";
}

/* Olayın kutusu türün renginden ince bir sol şerit alır: göz akışta aşağı
   inerken türün değiştiğini kenardan da fark eder. */
.customer-timeline-body {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid color-mix(in srgb, var(--activity-accent, var(--color-border)) 45%, var(--color-border));
    border-radius: var(--radius-md);
}

.customer-timeline-body p {
    margin: 0.125rem 0 0;
    color: var(--color-text-muted);
    white-space: pre-line;
}

.customer-timeline-meta {
    display: block;
    margin-top: 0.375rem;
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
}

@media (max-width: 1199px) {
    .customer-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .customer-identity {
        grid-template-columns: minmax(0, 1fr);
    }

    .customer-identity-lifecycle {
        justify-content: flex-start;
    }

    .customer-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Aktivite sekmelerindeki satır işlemleri: hücre içinde sağa yaslı ikon çifti. */
.customer-row-actions {
    white-space: nowrap;
}

.customer-row-actions .btn + .btn {
    margin-left: 0.25rem;
}

/* Belge listesi: ikon, künye ve işlemler tek satırda. */
.customer-documents {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.customer-document {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.customer-document-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
}

.customer-document-body strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sekme başlığındaki sayaç rozeti başlıktan sonra gelir ve küçüktür. */
.customer-tab .badge {
    font-size: 0.625rem;
}

/* Ödeme sekmesindeki toplam kutuları kart içinde kendi çerçevesini taşır. */
.customer-tab-body .customer-counters {
    padding: 0;
    border-top: 0;
}

/* Kart içindeki grid'ler kendi çerçevesini taşımaz: kartın kenarlığı zaten var,
   ikinci çerçeve kutu içinde kutu demek olurdu. */
.customer-tab-body .data-grid .tabulator {
    border-left: 1px solid #e7e7ea;
    border-right: 1px solid #e7e7ea;
    border-bottom: 1px solid #e7e7ea;
    border-radius: 0;
}

.customer-head-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.customer-head-actions .definition-filter {
    min-width: 12rem;
}

/* Grid hücresinde başlık ve yanındaki rozetler tek satırda kalır. */
.customer-grid-title {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    min-width: 0;
}

.customer-grid-title strong {
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-grid-title .badge {
    flex: 0 0 auto;
    font-size: 0.625rem;
}

/* İşlem menüsündeki silme satırı: tehlikeli eylem renkle ayrılır ama menünün
   gerisi nötr kalır. */
.dropdown-item.customer-item-danger {
    color: var(--color-danger);
}

.dropdown-item.customer-item-danger:hover,
.dropdown-item.customer-item-danger:focus {
    color: var(--color-danger);
    background: var(--color-danger-soft);
}

/* Menü satırlarında ikon ve metin hizalı durur. */
.dropdown-item {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ---------------------------------------------------------------------------
   Ziyaret formu
   --------------------------------------------------------------------------- */

/* Sayfa solda alanlar, sağda toplantı notu diye bölünür. Eski sistemdeki
   ziyaret formunun düzeni budur ve temsilci ekranı o sırayla okur. Sol sütun
   biraz daha geniştir: üçe bölünen satırlarda (ülke/il/ilçe) seçim kutusunun
   metni kısalmasın. */
.visit-columns {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 0.75rem;
}

.visit-columns + .visit-columns {
    margin-top: 0.75rem;
}

.visit-card-title {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Etiket solda sabit genişlikte, girdi sağda. Alanın yeri kayıttan kayda ve
   ekran boyundan boyuna değişmez: aynı bilgi hep aynı yerde aranır. */
.field-rows {
    padding: 0.25rem 1rem 0.75rem;
}

.field-row {
    display: grid;
    grid-template-columns: var(--label-width, 10rem) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.4375rem 0;
}

.field-row + .field-row {
    border-top: 1px solid var(--color-border);
}

.field-row-label {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Birlikte okunan alanlar (ülke/il/ilçe) tek satırda eşit paylaşır. */
.field-row-split {
    display: grid;
    grid-template-columns: repeat(var(--split, 3), minmax(0, 1fr));
    gap: 0.5rem;
}

/* Dar ekranda etiket girdinin üstüne geçer; alan sıkışıp okunmaz olmaz. */
@media (max-width: 64rem) {
    .visit-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .field-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.25rem;
    }

    .field-row-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Toplantı notu formdaki en önemli alandır; eski formda sarı bir kutuyla
   ayrılmıştı. Burada aynı işi uyarı tonunun yumuşağı yapar. */
.visit-note-card {
    background: var(--color-warning-soft);
}

.visit-note-card .customer-card-head {
    border-bottom-color: color-mix(in srgb, var(--color-border) 60%, transparent);
}

.visit-note-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0.75rem 1rem 1rem;
}

.visit-note-body textarea {
    flex: 1;
    min-height: 12rem;
}

.visit-question-body {
    padding: 0.75rem 1rem 1rem;
}

.visit-question + .visit-question {
    margin-top: 0.75rem;
}

/* Soru metni bir etiketten uzundur: kendi satırını kaplar ve girdinin üstünde
   durur. */
.visit-question-label {
    display: block;
    margin-bottom: 0.3125rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
}

.visit-customer {
    display: block;
    color: var(--color-link);
    font-weight: 600;
    text-decoration: none;
}

.visit-customer:hover {
    text-decoration: underline;
}

.visit-customer-meta {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

/* ==========================================================================
   Belge yönetimi
   ========================================================================== */

/* Arşiv ekranı iki sütundur: solda düzen (görünümler ve klasör ağacı), sağda
   içerik. Yükseklik pencereye sabitlenir; ağaç ve liste kendi içlerinde kayar,
   sayfanın tamamı kaymaz — klasör seçerken araç çubuğunun kaybolması gezinmeyi
   zorlaştırır. */
.documents-page {
    display: grid;
    grid-template-columns: 17.5rem minmax(0, 1fr);
    gap: 1rem;
    height: calc(100vh - 12.5rem);
    min-height: 32rem;
}

.documents-sidebar,
.documents-main {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
}

.documents-sidebar-section {
    padding: 0.625rem;
}

.documents-sidebar-section + .documents-sidebar-section {
    border-top: 1px solid var(--color-border);
}

.documents-sidebar-tree {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0.625rem 0.75rem;
    border-top: 1px solid var(--color-border);
}

.documents-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem 0.25rem;
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Görünüm ve klasör satırı aynı öğedir: seçili olan renkle değil yüzeyle
   anlatılır. */
.documents-node {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
}

.documents-node:hover {
    background: var(--color-surface-muted);
}

.documents-node.active {
    box-shadow: inset 0 0 0 1px var(--color-border);
    background: var(--color-surface-muted);
    font-weight: 500;
}

.documents-node-label {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.documents-node-count {
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}

.documents-node-toggle {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
}

.documents-node-toggle.is-empty {
    visibility: hidden;
}

.documents-tree-children {
    padding-left: 0.875rem;
}

.documents-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.documents-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.documents-filters .form-control,
.documents-filters .form-select,
.documents-filters .search-select {
    max-width: 11rem;
}

.documents-body {
    flex: 1;
    overflow: auto;
    padding: 0.75rem 1rem 1rem;
}

.documents-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.documents-crumb {
    padding: 0.125rem 0.375rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.documents-crumb:hover {
    background: var(--color-surface-muted);
}

.documents-crumb.current {
    color: var(--color-text);
    font-weight: 600;
}

/* Dosya türü rozeti listede satır satır tekrar eder: nötr kalır, rengi yalnızca
   uzantı metni taşır. */
.documents-extension {
    display: inline-flex;
    min-width: 2.5rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.375rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.documents-name-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.documents-name-cell span.name {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Yükleme kuyruğu: her dosyanın durumu satırın kendisinde görünür. */
.documents-upload-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
}

.documents-upload-item + .documents-upload-item {
    margin-top: 0.375rem;
}

.documents-upload-item.is-done {
    border-color: color-mix(in srgb, var(--color-success) 40%, transparent);
    background: var(--color-success-soft);
}

.documents-upload-item.is-failed {
    border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
    background: var(--color-danger-soft);
}

.documents-upload-name {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Kart görünümü: aynı liste verisi, küçük resimli kartlar. Kart eni sabit
   aralıkta akar; küçük resim üretilmemişse tür rozeti kapak olur. */
.documents-cards {
    height: 100%;
    overflow-y: auto;
    padding: 0.25rem;
}

.documents-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.documents-card-item {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-lg);
    background: var(--bs-body-bg);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.documents-card-item:hover {
    border-color: var(--module-documents, var(--bs-primary));
    box-shadow: var(--shadow-sm, 0 1px 3px rgb(0 0 0 / 0.12));
}

.documents-card-item.selected {
    border-color: var(--module-documents, var(--bs-primary));
    box-shadow: 0 0 0 2px var(--module-documents, var(--bs-primary));
}

.documents-card-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    background: var(--bs-tertiary-bg);
    overflow: hidden;
}

.documents-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.documents-card-lock {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    font-size: 0.8rem;
}

.documents-card-body {
    padding: 0.5rem 0.6rem;
}

.documents-card-name {
    font-size: 0.82rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.documents-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
}

/* Dosya bırakma hedefi: OS'ten sürüklenen dosya nereye düşeceğini görmeli. */
.documents-grid-wrap {
    height: 100%;
}

.documents-grid-wrap.is-drop-target,
.documents-cards.is-drop-target {
    outline: 2px dashed var(--module-documents, var(--bs-primary));
    outline-offset: -4px;
    border-radius: var(--radius-lg);
}

/* Önizleme penceresi koyu zeminlidir: görsel ve PDF açık zeminde yüzer. */
.documents-preview {
    display: flex;
    min-height: 60vh;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: #1b1d21;
}

.documents-preview img,
.documents-preview video {
    max-width: 100%;
    max-height: 70vh;
}

.documents-preview iframe {
    width: 100%;
    height: 70vh;
    border: 0;
    border-radius: var(--radius-lg);
    background: #fff;
}

/* Sürüm karşılaştırma: iki metin yan yana, eklenen ve silinen satırlar
   işaretli. */
.documents-diff {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
}

.documents-diff-pane {
    overflow: auto;
    max-height: 50vh;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
}

.documents-diff-line {
    display: flex;
}

.documents-diff-line .no {
    width: 2.75rem;
    flex-shrink: 0;
    padding: 0 0.5rem;
    border-right: 1px solid var(--color-border);
    color: var(--color-text-subtle);
    text-align: right;
    user-select: none;
}

.documents-diff-line .text {
    flex: 1;
    padding: 0 0.625rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.documents-diff-line.added {
    background: var(--color-success-soft);
}

.documents-diff-line.removed {
    background: var(--color-danger-soft);
}

.documents-diff-line.empty {
    background: color-mix(in srgb, var(--color-border) 25%, transparent);
    min-height: 1.15rem;
}

/* Pano: sayı kartları ve grafikler. Grafikler satır içi SVG'dir; harici grafik
   kütüphanesi yüklenmez. */
.documents-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.documents-kpi {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
}

.documents-kpi-label {
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.documents-kpi-value {
    margin-top: 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.documents-kpi-sub {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.documents-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.documents-card {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
}

.documents-card h2 {
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Yatay çubuk: değer kadar dolan bir şerit. Eksen ve ızgara yoktur; okunan şey
   sıralama ve orandır. */
.documents-bar {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) 3rem;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.8125rem;
}

.documents-bar-track {
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
}

.documents-bar-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--module-accent, var(--color-primary));
}

.documents-bar-value {
    color: var(--color-text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.documents-trend {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.375rem;
    height: 8rem;
}

.documents-trend-column {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.documents-trend-bar {
    width: 100%;
    min-height: 0.125rem;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--module-accent, var(--color-primary));
}

.documents-trend-label {
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
}

.documents-activity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.8125rem;
}

.documents-activity + .documents-activity {
    border-top: 1px solid var(--color-border);
}

.documents-activity-title {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.documents-activity-meta {
    flex-shrink: 0;
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
}

/* Paylaşım ve doğrulama sayfaları panel kabuğunu kullanmaz; kart biraz daha
   geniştir çünkü içinde dosya listesi durur. */
.public-card {
    max-width: 34rem;
}

@media (max-width: 62rem) {
    .documents-page {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    .documents-sidebar {
        max-height: 22rem;
    }
}

/* ==========================================================================
   Yapay zekâ asistanı
   ========================================================================== */

.assistant-page {
    display: grid;
    grid-template-columns: 17.5rem minmax(0, 1fr);
    gap: 1rem;
    height: calc(100vh - 12.5rem);
    min-height: 32rem;
}

.assistant-sidebar,
.assistant-main {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
}

.assistant-sidebar-top {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

/* Arama kutusunun araç çubuğu genişliği (min(22rem, 32vw)) dar kenar
   çubuğundan taşar; burada kutu sütunun tamamını kullanır. */
.assistant-sidebar-top .definition-search {
    width: 100%;
    min-width: 0;
}

.assistant-conversations {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

/* Konuşma satırı seçiliyken renkle değil yüzeyle işaretlenir. */
.assistant-conversation {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}

.assistant-conversation:hover {
    background: var(--color-surface-muted);
}

.assistant-conversation.active {
    box-shadow: inset 0 0 0 1px var(--color-border);
    background: var(--color-surface-muted);
}

.assistant-conversation-body {
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.assistant-conversation-title {
    overflow: hidden;
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-conversation-meta {
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
}

.assistant-conversation-actions {
    display: none;
    gap: 0.125rem;
}

.assistant-conversation:hover .assistant-conversation-actions,
.assistant-conversation.active .assistant-conversation-actions {
    display: inline-flex;
}

.assistant-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.assistant-top .search-select,
.assistant-top .form-select {
    max-width: 12rem;
}

.assistant-messages {
    display: flex;
    overflow-y: auto;
    flex: 1;
    flex-direction: column;
    padding: 1.25rem 0;
}

/* Mesaj sütunu genişliği okunabilirlik içindir: satır uzadıkça göz satır
   başını kaybeder. */
.assistant-message {
    display: flex;
    width: 100%;
    max-width: 54rem;
    gap: 0.875rem;
    margin: 0 auto;
    padding: 0.75rem 1.25rem;
}

.assistant-avatar {
    display: flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.assistant-message-role {
    color: var(--color-text-subtle);
    font-size: 0.75rem;
}

.assistant-message-content {
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.assistant-message-content pre {
    overflow-x: auto;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
    font-size: 0.75rem;
}

.assistant-message-content code {
    padding: 0.0625rem 0.3125rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    font-size: 0.8125rem;
}

.assistant-message-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.375rem;
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
}

/* Cevap yazılırken yanıp sönen imleç: akışın sürdüğünü gösterir. */
.assistant-streaming::after {
    content: "▍";
    margin-left: 0.125rem;
    animation: assistant-blink 1s steps(2, start) infinite;
    color: var(--color-text-subtle);
}

@keyframes assistant-blink {
    50% { opacity: 0.2; }
}

.assistant-empty {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    color: var(--color-text-muted);
    text-align: center;
}

.assistant-templates {
    display: grid;
    width: 100%;
    max-width: 44rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.625rem;
    margin-top: 1.5rem;
}

.assistant-template {
    padding: 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    text-align: left;
    cursor: pointer;
}

.assistant-template:hover {
    background: var(--color-surface-muted);
}

.assistant-template-name {
    font-size: 0.8125rem;
    font-weight: 600;
}

.assistant-template-description {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.assistant-usage {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    padding: 0.375rem 1.25rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
}

.assistant-usage .is-low {
    color: var(--color-danger);
    font-weight: 600;
}

.assistant-composer {
    width: 100%;
    max-width: 54rem;
    margin: 0 auto;
    padding: 0.875rem 1.25rem 1.125rem;
    border-top: 1px solid var(--color-border);
}

.assistant-composer-box {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.assistant-composer-box:focus-within {
    border-color: var(--color-primary);
}

.assistant-composer-box textarea {
    width: 100%;
    max-height: 12rem;
    min-height: 1.5rem;
    padding: 0.25rem 0.125rem;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    resize: none;
}

.assistant-composer-box textarea:focus {
    outline: 0;
}

.assistant-composer-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

.assistant-composer-actions .assistant-send {
    margin-left: auto;
}

.assistant-attachment {
    position: relative;
    display: inline-block;
    max-width: 11rem;
    margin-bottom: 0.5rem;
}

.assistant-attachment img {
    display: block;
    max-width: 100%;
    max-height: 8.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    object-fit: cover;
}

.assistant-attachment button {
    position: absolute;
    top: -0.375rem;
    right: -0.375rem;
    display: flex;
    width: 1.375rem;
    height: 1.375rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: var(--color-text);
    color: var(--color-surface);
    cursor: pointer;
}

@media (max-width: 62rem) {
    .assistant-page {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    .assistant-sidebar {
        max-height: 18rem;
    }

    .assistant-messages {
        min-height: 24rem;
    }
}

/* ---------------------------------------------------------------------------
   İş takip: kanban panosu, görev kartı ve liste hücreleri
   ------------------------------------------------------------------------ */

/* Pano yatay kaydırılır; sütun sayısı tanım ekranından değişebilir ve ekrana
   sığmayabilir. Sayfanın kendisi yatay kaymaz, yalnızca pano kayar. */
.task-board {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
}

.task-board.loading {
    opacity: 0.55;
}

.task-board-note {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.task-column {
    display: flex;
    min-width: 17.5rem;
    max-width: 17.5rem;
    flex: 0 0 17.5rem;
    flex-direction: column;
}

.task-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.25rem 0.5rem;
}

.task-column-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 650;
}

/* Sütunun kimliği rengidir; başlıktaki nokta ile sayaç aynı renkten okunur. */
.task-column-name::before {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--board-color);
    content: "";
}

.task-column-count {
    min-width: 1.5rem;
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--board-color) 16%, var(--color-surface));
    color: var(--board-color);
    font-size: 0.75rem;
    font-weight: 650;
    text-align: center;
}

.task-column-body {
    display: flex;
    min-height: 9rem;
    max-height: calc(100vh - 20rem);
    flex-direction: column;
    padding: 0.5rem;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
    gap: 0.5rem;
    overflow-y: auto;
}

.task-column-body.drop-target {
    border-color: var(--board-color);
    background: color-mix(in srgb, var(--board-color) 8%, var(--color-surface-muted));
}

.task-column-empty,
.task-empty {
    margin: 0;
    color: var(--color-text-subtle);
    font-size: 0.8125rem;
    text-align: center;
}

.task-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.625rem 0.75rem 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    gap: 0.375rem;
}

.task-card:hover {
    border-color: var(--color-border-strong);
}

.task-card.dragging {
    opacity: 0.45;
}

.task-card.overdue {
    border-left: 3px solid var(--color-danger);
}

.task-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.task-card-no {
    color: var(--color-text-subtle);
    font-size: 0.75rem;
    font-weight: 650;
}

.task-card-priority {
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-sm);
    background: var(--color-neutral-soft);
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 650;
}

.task-card-priority.priority-high {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.task-card-priority.priority-urgent {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.task-card-title {
    /* Üç satırdan uzun başlık kartı büyütmez; tamamı görev kartında okunur. */
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    -webkit-box-orient: vertical;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    -webkit-line-clamp: 3;
}

.task-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.task-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    gap: 0.1875rem;
}

.task-tag-warning {
    border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.task-tag-danger {
    border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.task-card-foot {
    display: flex;
    align-items: center;
    padding-bottom: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    gap: 0.625rem;
}

.task-card-date,
.task-card-metric {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
}

.task-card-owner,
.task-avatar {
    display: inline-flex;
    width: 1.625rem;
    height: 1.625rem;
    flex: 0 0 1.625rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-link);
    font-size: 0.6875rem;
    font-weight: 650;
}

.task-card-owner {
    margin-left: auto;
}

.task-card-progress {
    height: 0.25rem;
    margin: 0 -0.75rem;
    background: var(--color-surface-muted);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.task-card-progress > span {
    display: block;
    height: 100%;
    border-radius: 0 0 0 var(--radius-lg);
    background: var(--color-success);
}

/* Görev kartı sayfası */
.task-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.task-columns {
    display: grid;
    align-items: start;
    gap: 1rem;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
}

.task-columns-single {
    grid-template-columns: minmax(0, 1fr);
}

.task-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.task-form-body,
.task-side-body {
    padding: 1rem 1.25rem 1.25rem;
}

.task-side-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.task-side-value {
    font-size: 0.875rem;
    font-weight: 600;
}

.task-field-hint {
    display: block;
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.task-readonly-note {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    gap: 0.375rem;
}

.task-progress-bar {
    position: relative;
    width: 100%;
    height: 1.125rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
}

.task-progress-bar > span {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-success);
}

.task-progress-bar > small {
    position: absolute;
    top: 0;
    right: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    line-height: 1.125rem;
}

.task-inline-form,
.task-side-inline {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Kutu kalan yeri alır, onay düğmesi kendi genişliğinde kalır: eşit paylı bir
   ızgarada seçim kutusu "S..." diye kırpılıyordu. */
.task-side-inline > *:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.task-side-inline > .btn {
    flex: 0 0 auto;
}

.task-inline-form > *:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.task-checklist,
.task-people,
.task-files,
.task-comments {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0.375rem;
}

.task-checklist > li,
.task-people > li,
.task-files > li {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    gap: 0.5rem;
}

.task-checklist > li.done span {
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.task-checklist label {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    font-size: 0.875rem;
    gap: 0.5rem;
    cursor: pointer;
}

.task-checklist > li > small,
.task-people > li > small,
.task-files > li > small {
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
    white-space: nowrap;
}

.task-person-name,
.task-files a,
.task-file-name {
    flex: 1 1 auto;
    overflow: hidden;
    font-size: 0.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ekin adı düğmedir, bağlantı değil: tıklamak sayfayı değiştirmez, dosyayı
   görevin içinde açar. */
.task-file-name {
    padding: 0;
    color: var(--bs-link-color);
    text-align: start;
    background: none;
    border: 0;
}

.task-file-name:hover {
    text-decoration: underline;
}

.task-comments > li {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.task-comments {
    margin-top: 1rem;
    gap: 0.625rem;
}

.task-comment-head {
    display: flex;
    align-items: center;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    gap: 0.5rem;
}

.task-comment-head > small {
    margin-left: auto;
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
}

.task-comment-body {
    font-size: 0.875rem;
    line-height: 1.5;
}

.task-comment-body > *:last-child {
    margin-bottom: 0;
}

/* Liste hücreleri */
.task-stage-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--board-color) 35%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--board-color) 12%, var(--color-surface));
    color: var(--board-color);
    font-size: 0.75rem;
    font-weight: 600;
}

.task-date-overdue {
    color: var(--color-danger);
    font-weight: 600;
}

/* Tabulator hücresi blok kapsayıcı değildir; genişlik açıkça verilmezse çubuk
   sıfıra çöker ve hücre boş görünür. */
.task-grid-progress {
    position: relative;
    width: 100%;
    height: 0.875rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
}

.task-grid-progress > span {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-success);
}

.task-grid-progress > small {
    position: absolute;
    top: 0;
    right: 0.375rem;
    color: var(--color-text-muted);
    font-size: 0.625rem;
    line-height: 0.875rem;
}

.task-grid-counters {
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    gap: 0.5rem;
}

.task-grid-counters > span {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
}

@media (max-width: 75rem) {
    .task-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Toplantı ve Takvim
   ==========================================================================
   Takvim bir eklentiyle değil CSS ızgarasıyla çizilir: proje CDN kullanmaz ve
   ay/hafta görünümü için ayrı bir kütüphane taşımak, tema ve dil davranışını
   ikinci bir yerde yönetmek demekti. */

.meetings-page,
.meetings-card,
.meetings-calendar,
.meetings-reports,
.meetings-review {
    --module-accent: var(--module-meetings);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* --------------------------------- Sayaçlar ------------------------------ */







/* -------------------------------- Araç çubuğu ---------------------------- */

.meetings-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.meetings-toolbar .form-select,
.meetings-toolbar .form-control {
    width: auto;
    min-width: 8rem;
}

.meetings-toolbar-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 14rem;
    min-width: 12rem;
    padding: 0 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.meetings-toolbar-search input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 0.4rem 0;
    color: var(--color-text);
    outline: none;
}

.meetings-toolbar-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.meetings-cell-subject {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* --------------------------------- Kart ---------------------------------- */

.meetings-timer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--module-accent);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.meetings-timer.is-in_progress {
    border-left-color: var(--bs-warning, #f59e0b);
}

.meetings-timer.is-cancelled {
    border-left-color: var(--bs-danger, #dc2626);
}

.meetings-timer-state {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.meetings-timer-state strong {
    font-size: 1.375rem;
}

.meetings-timer-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
    font-size: 0.8125rem;
}

.meetings-timer-facts dt {
    color: var(--color-text-muted);
    font-weight: 500;
}

.meetings-timer-facts dd {
    margin: 0;
}

.meetings-timer-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.meetings-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.meetings-form-panel,
.meetings-side-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: 1rem;
}

.meetings-form-panel fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

.meetings-switches {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.meetings-form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* -------------------------------- Sekmeler ------------------------------- */

.meetings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1rem;
}

.meetings-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.meetings-tab.is-active {
    border-bottom-color: var(--module-accent);
    color: var(--color-text);
}

.meetings-tab-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.meetings-tab-actions {
    display: flex;
    gap: 0.5rem;
}

/* ------------------------------- Davetliler ------------------------------ */

.meetings-participant-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem;
}

.meetings-participants {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 24rem;
    overflow-y: auto;
}

.meetings-participant {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-md);
}

.meetings-participant:hover {
    background: var(--color-surface-muted, rgba(127, 127, 127, 0.08));
}

.meetings-participant-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--color-surface-muted, rgba(127, 127, 127, 0.14));
    font-weight: 600;
    font-size: 0.8125rem;
    flex-shrink: 0;
}

.meetings-participant-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.meetings-participant-text strong {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.meetings-participant-text small {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.meetings-participant-state {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.meetings-participant-state .form-select {
    width: auto;
    min-width: 8rem;
}

.meetings-response-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}

.meetings-availability {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.meetings-availability li {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--module-accent);
    background: var(--color-surface-muted, rgba(127, 127, 127, 0.08));
    border-radius: var(--radius-sm);
}

/* -------------------------------- Kararlar ------------------------------- */

.meetings-decisions,
.meetings-attachments,
.meetings-reviews {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.meetings-decision {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.meetings-decision-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.meetings-decision p {
    margin: 0;
    font-size: 0.875rem;
    white-space: pre-line;
}

.meetings-decision-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.meetings-decision-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.meetings-decision-actions,
.meetings-review-actions {
    display: flex;
    gap: 0.375rem;
}

/* ---------------------------------- Ekler -------------------------------- */

.meetings-upload {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.meetings-attachments li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* Ekin satırı düğmedir, bağlantı değil: tıklamak sayfayı değiştirmez, dosyayı
   toplantının içinde açar. */
.meetings-attachments a,
.meetings-attachments li > button:first-child {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0;
    color: inherit;
    text-align: start;
    text-decoration: none;
    background: none;
    border: 0;
}

.meetings-attachments small {
    color: var(--color-text-muted);
    margin-left: auto;
}

.meetings-reviews li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.meetings-reviews li > div:first-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.meetings-reviews small {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.meetings-review-score {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    font-size: 0.8125rem;
}

/* -------------------------------- Takvim --------------------------------- */

/*
 * Araç çubuğu iki satırdır: üstte dönem ve görünüm, altta süzgeçler.
 *
 * Tek satırdayken "kişi takvimi" seçildiğinde beliren kişi seçici satırı
 * taşırıyor, düğmeler alt alta düşüyor ve çubuk her seçimde farklı yükseklik
 * alıyordu. Süzgeçler kendi satırına alınınca beliren alan yalnızca o satırı
 * genişletir.
 */
.meetings-calendar-toolbar {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0.625rem;
}

.meetings-calendar-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.meetings-calendar-title {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0;
    min-width: 12rem;
}

.meetings-calendar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.meetings-calendar-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.meetings-calendar-filters .form-select {
    width: auto;
}

/* Kişi seçici belirdiğinde satır zıplamasın diye ölçüsü baştan bellidir. */
.meetings-calendar-filters .search-select {
    min-width: 16rem;
    max-width: 22rem;
}

.meetings-calendar-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

/*
 * Görünüm kutuları kalan yüksekliği alır (bkz. `.page-content-fill`).
 * Eskiden ızgara satır yüksekliği kadar uzuyor ve ekranın alt yarısı boş
 * kalıyordu; takvimde önemli olan kaç kayıt sığdığıdır.
 */
.meetings-month,
.meetings-timegrid,
.meetings-agenda,
.meetings-rooms {
    flex: 1;
    min-height: 0;
}

/* Liste ve salon görünümleri de kalan alanı doldurur; taşan içerik kendi
   kutusunda kayar, sayfayı uzatmaz. */
.meetings-agenda {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
}

.meetings-rooms {
    display: flex;
    flex-direction: column;
}

.meetings-rooms-grid {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.meetings-month {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
}

.meetings-month-head {
    flex: 0 0 auto;
}

.meetings-month-head {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background: var(--color-surface-muted, rgba(127, 127, 127, 0.08));
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.meetings-month-head span {
    padding: 0.5rem;
    text-align: center;
}

.meetings-month-grid {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    /* Altı satır kalan yüksekliği eşit böler; ekran kısaldığında satır
       5rem'in altına inmez ve ızgara kendi içinde kayar. */
    grid-auto-rows: minmax(5rem, 1fr);
    min-height: 0;
    overflow-y: auto;
}

.meetings-month-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.25rem;
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    /* Yoğun bir gün hücreyi taşırmaz, hücrenin içinde kayar: taşsaydı ızgara
       satırları birbirine eşit olmaktan çıkardı. */
    overflow-y: auto;
}

.meetings-month-cell:nth-child(7n + 1) {
    border-left: 0;
}

.meetings-month-cell.is-outside {
    opacity: 0.45;
}

.meetings-month-cell.is-today {
    background: color-mix(in srgb, var(--module-accent) 8%, transparent);
}

.meetings-month-day {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

/*
 * Çalışılmayan gün taralı görünür.
 *
 * Boş bir hücre iki ayrı şeyi anlatıyordu: "o gün işim yok" ve "o gün zaten
 * çalışılmıyor". Tarama ikisini ayırır; toplantı hafta sonuna atandığında
 * kaydetmeden önce görünür.
 *
 * Renk ayrımı bilinçli: hafta sonu nötr gri, resmî tatil kırmızıdır — biri
 * her hafta tekrarlayan bir düzen, öteki takvimde tek seferlik bir olay.
 * Arefe (yarım gün) daha seyrek taranır; o gün öğleden önce çalışılıyor.
 *
 * Tarama zemin değil ön plan katmanıdır (`::before`): hücrenin kendi zemini
 * "bugün" vurgusunu taşıyor ve ikisi üst üste binebilmeli.
 */
.meetings-month-cell.is-weekend::before,
.meetings-month-cell.is-holiday::before,
.meetings-month-cell.is-half-holiday::before,
.meetings-timegrid-column.is-weekend::before,
.meetings-timegrid-column.is-holiday::before,
.meetings-timegrid-column.is-half-holiday::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.meetings-month-cell.is-weekend::before,
.meetings-timegrid-column.is-weekend::before {
    background: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(100, 116, 139, 0.06) 4px, rgba(100, 116, 139, 0.06) 8px) !important;
}

.meetings-month-cell.is-holiday::before,
.meetings-timegrid-column.is-holiday::before {
    background: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(239, 68, 68, 0.08) 4px, rgba(239, 68, 68, 0.08) 8px) !important;
}

.meetings-month-cell.is-half-holiday::before,
.meetings-timegrid-column.is-half-holiday::before {
    background: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(239, 68, 68, 0.08) 4px, rgba(239, 68, 68, 0.08) 8px) !important;
}

/* Hücre içeriği taramanın üstünde kalır. Zaman ızgarasında etkinlik zaten
   mutlak konumlu — ona `position` verilirse yerleşimi bozulur, yalnızca
   katmanı yükseltilir. */
.meetings-month-cell > *,
.meetings-timegrid-slot {
    position: relative;
    z-index: 1;
}

.meetings-event {
    z-index: 2;
}

/* Tatilde gün numarası da kırmızıdır: tarama açık temada soluk kalabiliyor. */
.meetings-month-cell.is-holiday .meetings-month-day,
.meetings-month-cell.is-half-holiday .meetings-month-day {
    color: var(--color-danger);
}

/* Tatil adı hücrenin altına yerleşir ve toplantıların yerini almaz. */
.meetings-month-holiday {
    margin-top: auto;
    overflow: hidden;
    color: var(--color-danger);
    font-size: 0.6875rem;
    line-height: 1.25;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meetings-timegrid-head span.is-nonworking {
    color: var(--color-text-subtle);
}

.meetings-timegrid-head span small {
    display: block;
    overflow: hidden;
    color: var(--color-danger);
    font-size: 0.625rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Çalışılmayan gün işareti — puantaj ve vardiya planı gibi **dar sütunlu**
 * ızgaralar için.
 *
 * Takvimde tatilin adı hücreye yazılabiliyor; burada bir güne 34 piksel
 * düşüyor ve ad sığmıyor. Aynı tarama kullanılır, tatil ayrıca sağ üst köşede
 * küçük bir çentik taşır; adı imleç üzerine gelince `title` ile görünür.
 *
 * Sınıf ad alanı ortak (`daymark-`) çünkü iki ekran da aynı ızgara sorununu
 * yaşıyor; üçüncüsü eklendiğinde biçim yeniden yazılmayacak.
 */
.daymark {
    position: relative;
    background-image: none;
}

.daymark-weekend {
    background: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(100, 116, 139, 0.06) 4px, rgba(100, 116, 139, 0.06) 8px) !important;
}

.daymark-holiday {
    background: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(239, 68, 68, 0.08) 4px, rgba(239, 68, 68, 0.08) 8px) !important;
}

.daymark-half-holiday {
    background: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(239, 68, 68, 0.08) 4px, rgba(239, 68, 68, 0.08) 8px) !important;
}

/* Köşe çentiği: sağ üstte küçük bir üçgen. Yer kaplamaz, hücrenin içeriğini
   itmez ve tıklamayı yemez. */
.daymark-holiday::after,
.daymark-half-holiday::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    border-top: 0.4rem solid var(--color-danger);
    border-left: 0.4rem solid transparent;
    pointer-events: none;
}

/* Yarım günün çentiği içi boş durur: tam tatille karışmasın. */
.daymark-half-holiday::after {
    border-top-color: color-mix(in srgb, var(--color-danger) 45%, transparent);
}

/* Başlıkta tatil günü numarası da kırmızıdır. */
.daymark-holiday > div:first-child,
.daymark-half-holiday > div:first-child {
    color: var(--color-danger);
}

/* Takvim hücresinin **durum rengi**.
 *
 * Puantaj ve vardiya planı aynı ızgarayı çizer ve hücrenin rengi tek bilgiyi
 * taşır: o gün ne oldu. Renkler Bootstrap'ın `*-subtle` tonlarındaydı; onlar
 * uyarı kutusu için seçilmiş doygunlukta ve otuz sütunluk bir takvimde ekran
 * alacalı görünüyordu. Buradaki karışım **%14**: hücre zeminden ayrılır ama
 * bağırmaz, otuz gün yan yana geldiğinde göz yorulmaz.
 *
 * Renk tek başına kalmıyor: hücrenin metni (çalışılan saat, vardiya kodu),
 * `title` ipucundaki durum adı ve ızgaranın altındaki renk açıklaması aynı
 * bilgiyi yazıyla da veriyor (WCAG 1.4.1). Bu yüzden zeminden başka bir işaret
 * taşımaz — kenar çizgisi denendi ve otuz sütunlu takvimde gürültü yaptı.
 *
 * Ton `--stat-tone-*` değişkenlerinden gelir: iki temada da tanımlıdırlar ve
 * karo şeridiyle aynı dili konuşurlar.
 */
.daycell {
    --daycell-tone: var(--color-text-subtle);
    background: color-mix(in srgb, var(--daycell-tone) 14%, transparent);
    color: var(--color-text);
    /* Fazla mesai imi hücrenin köşesine oturur; konumlanabilmesi için taban
       kural bağlam açar. */
    position: relative;
    /* Renk hücrenin TAMAMINI kaplar. Boyayan öğe bir düğme; düğmenin doğal
       boyu satırdan kısa kalıyor (satırın boyunu iki satırlık ad sütunu
       belirliyor) ve renk hücrenin ortasında bir şerit gibi duruyordu. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Gün hücresinin kendisi (`td`). Yüzde yükseklik ancak tabanı belirli bir
   kutuya göre çözülür; hücreye simgesel bir boy vermek yeter — satır zaten ad
   sütununun boyuna göre uzar ve düğmenin `height: 100%`'i o boya oturur.
   Rengi hücreye değil düğmeye veriyoruz: hafta sonu/tatil taraması `td`'nin
   zeminidir ve hücreye boyanınca taramanın üstünü örterdi. */
.daycell-slot {
    height: 1px;
}

.daycell:hover,
.daycell:focus-visible {
    background: color-mix(in srgb, var(--daycell-tone) 26%, transparent);
    color: var(--color-text);
}

/* Sorunsuz gün: çalışılmış, devamsızlığı yok. */
.daycell--ok { --daycell-tone: var(--stat-tone-success); }
/* Devamsız gün: çalışılmamış ve mazereti yok. */
.daycell--absent { --daycell-tone: var(--stat-tone-danger); }
.daycell--leave { --daycell-tone: var(--stat-tone-info); }
.daycell--holiday { --daycell-tone: var(--stat-tone-warning); }
.daycell--rest { --daycell-tone: var(--color-text-subtle); }
/* Elle girilmiş gün: rakam cihazdan değil insandan geldi. */
.daycell--manual { --daycell-tone: var(--stat-tone-violet); }
/* Planlanmış vardiya (vardiya planı ekranı). */
.daycell--planned { --daycell-tone: var(--stat-tone-primary); font-weight: 600; }

/* Fazla mesai köşe imi.
   Hücre 34 pikseldir: içine ikinci bir rakam sığmıyor ve çapraz bölmek, ayın
   tamamını bir bakışta görme avantajını yatay kaydırmaya değişmek olurdu. İm
   rengin ÜSTÜNE eklenir, rengin yerine geçmez — hücrenin durumu (devamsız,
   izinli, elle girildi) okunur kalır.
   İki ton, çünkü asıl karar rakam değil ONAY: bordroya yalnız onaylanmış
   dakika girer, fiilî fazlalık onaylanmadıkça ödenmez. */
.daycell--ot-pending::after,
.daycell--ot-approved::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-top: 0.4375rem solid var(--daycell-mark);
    border-left: 0.4375rem solid transparent;
}

/* Onay bekleyen mesai: aksiyon gerektirir, uyarı tonundadır. */
.daycell--ot-pending { --daycell-mark: var(--stat-tone-warning); }

/* Onaylanmış mesai: bilgi, aksiyon değil — sessiz durur. */
.daycell--ot-approved {
    --daycell-mark: color-mix(in srgb, var(--color-text-subtle) 55%, transparent);
}

/* Kilitli dönem: hücre okunur ama tıklansa da değişmez; rengi durum değil
   **durumsuzluk** bildirir ve bu yüzden tonsuzdur. */
.daycell--locked {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

/* Kaydı olmayan hücre saydam kalır: sütunun hafta sonu/tatil taraması
   hücrenin altından okunsun. */
.daycell--empty {
    background: transparent;
    color: var(--color-text-muted);
}

/* Yayımlanmamış plan: rengi aynı, kenarı kesik. Soluklaştırmak tek başına
   yetmiyordu — yan yana iki hücrede fark ayırt edilmiyordu. */
.daycell--draft {
    outline: 1px dashed color-mix(in srgb, var(--daycell-tone) 70%, transparent);
    outline-offset: -2px;
}

/* Personelin müsait olmadığını bildirdiği güne yazılmış vardiya. */
.daycell--unavailable {
    box-shadow: inset 0 0 0 1px var(--color-danger);
}

/* Renk açıklaması ızgaranın altında durur: otuz sütunluk bir takvimde renk
   ancak karşılığı yazılıysa bilgidir. */
.daycell-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--color-border);
}

.daycell-legend > span {
    display: inline-flex;
    gap: 0.4375rem;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.daycell-legend i {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.daycell-legend-title {
    color: var(--color-text);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Kaydı olmayan hücre çalışılmayan günde saydam kalır: sütunun taraması
   hücreden de okunur. */
.btn-daymark-empty {
    background: transparent;
    border: 0;
}

.btn-daymark-empty:hover {
    background: color-mix(in srgb, var(--color-text-subtle) 12%, transparent);
}

.meetings-chip {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    width: 100%;
    padding: 0.125rem 0.25rem;
    border: 0;
    border-left: 3px solid var(--module-accent);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted, rgba(127, 127, 127, 0.1));
    font-size: 0.6875rem;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

.meetings-chip.is-appointment {
    border-left-color: var(--module-customers);
}

.meetings-chip.is-call {
    border-left-color: var(--module-leads);
}

.meetings-chip-time {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.meetings-chip-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hafta ve gün ızgarası */

.meetings-timegrid {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow: hidden;
}

.meetings-timegrid-head {
    flex: 0 0 auto;
}

.meetings-timegrid-head {
    display: grid;
    grid-template-columns: 4rem repeat(var(--meetings-day-count, 7), minmax(0, 1fr));
    background: var(--color-surface-muted, rgba(127, 127, 127, 0.08));
    font-size: 0.75rem;
    font-weight: 600;
}

.meetings-timegrid-head span {
    padding: 0.5rem;
    text-align: center;
}

.meetings-timegrid-head span.is-today {
    color: var(--module-accent);
}

.meetings-timegrid-body {
    display: grid;
    flex: 1;
    grid-template-columns: 4rem repeat(var(--meetings-day-count, 7), minmax(0, 1fr));
    /* Saat dilimleri sabit yükseklikte (3rem) olduğu için gün her zaman
       kutudan uzundur ve kendi içinde kayar; sabit `max-height` yerine kalan
       alan verilir. */
    min-height: 0;
    overflow-y: auto;
}

.meetings-timegrid-hours {
    display: flex;
    flex-direction: column;
}

.meetings-timegrid-hours span {
    height: 3rem;
    padding-right: 0.375rem;
    font-size: 0.6875rem;
    text-align: right;
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border);
}

.meetings-timegrid-column {
    position: relative;
    border-left: 1px solid var(--color-border);
}

.meetings-timegrid-slot {
    height: 3rem;
    border-top: 1px solid var(--color-border);
}

.meetings-event {
    position: absolute;
    left: 0.125rem;
    right: 0.125rem;
    display: flex;
    flex-direction: column;
    padding: 0.125rem 0.25rem;
    border: 0;
    border-left: 3px solid var(--module-accent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--module-accent) 14%, var(--color-surface));
    font-size: 0.6875rem;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

.meetings-event.is-appointment {
    border-left-color: var(--module-customers);
    background: color-mix(in srgb, var(--module-customers) 14%, var(--color-surface));
}

.meetings-event.is-call {
    border-left-color: var(--module-leads);
    background: color-mix(in srgb, var(--module-leads) 14%, var(--color-surface));
}

/* Liste görünümü */

.meetings-agenda-group h3 {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0.75rem 0 0.375rem;
    color: var(--color-text-muted);
}

.meetings-agenda-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-align: left;
    cursor: pointer;
    margin-bottom: 0.25rem;
}

.meetings-agenda-time {
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    min-width: 7rem;
}

.meetings-agenda-title {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.meetings-agenda-title small {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Salon görünümü */

.meetings-rooms-grid {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow: hidden;
}

.meetings-rooms-head,
.meetings-rooms-row {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
}

.meetings-rooms-head {
    background: var(--color-surface-muted, rgba(127, 127, 127, 0.08));
    font-size: 0.6875rem;
    font-weight: 600;
}

.meetings-rooms-head > span:first-child {
    padding: 0.5rem;
}

.meetings-rooms-head > span:not(:first-child) {
    display: none;
}

.meetings-rooms-row {
    border-top: 1px solid var(--color-border);
}

.meetings-rooms-name {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-right: 1px solid var(--color-border);
}

.meetings-rooms-name small {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.meetings-rooms-track {
    position: relative;
    display: flex;
    min-height: 2.5rem;
}

.meetings-rooms-slot {
    flex: 1;
    border-left: 1px solid var(--color-border);
}

.meetings-room-event {
    position: absolute;
    top: 0.25rem;
    bottom: 0.25rem;
    padding: 0 0.375rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--module-accent);
    color: #fff;
    font-size: 0.6875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.meetings-search-results {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.meetings-search-results a {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
}

.meetings-search-results small {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* ----------------------------- Değerlendirme ----------------------------- */

.meetings-review-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--module-accent);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.meetings-review-head h2 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0;
}

.meetings-review-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.meetings-review-form fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

.meetings-review-group {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    margin-bottom: 0.75rem;
}

.meetings-review-group h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.meetings-review-question {
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-border);
}

.meetings-rating,
.meetings-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.meetings-review-actions {
    display: flex;
    gap: 0.5rem;
}

/* ------------------------------ Form kurucu ------------------------------ */

.meetings-form-builder {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.meetings-form-builder-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.meetings-form-builder-head h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
}

.meetings-form-group {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
}

.meetings-form-group > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-muted, rgba(127, 127, 127, 0.08));
}

.meetings-form-group > header small {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.meetings-form-group-actions {
    display: flex;
    gap: 0.25rem;
}

.meetings-form-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.meetings-form-group li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.8125rem;
}

.meetings-form-question-text {
    flex: 1;
    min-width: 0;
}

@media (max-width: 75rem) {
    .meetings-card-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .meetings-participant-add {
        grid-template-columns: minmax(0, 1fr);
    }

    .meetings-calendar-filters,
    .meetings-toolbar-actions {
        margin-left: 0;
    }
}

/* Rapor ekranı: dönem seçici, özet kartları ve tablolar */
.task-report-range {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.task-report-range .form-label {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.task-report-range .form-control {
    width: auto;
}





/* Döküm on dört kolon taşır; tablo kendi içinde kayar, sayfa kaymaz. */
.task-report-table {
    padding: 0 0.5rem 0.75rem;
    overflow-x: auto;
}

.task-report-table .table {
    margin: 0;
    font-size: 0.8125rem;
}

.task-report-table .table th {
    color: var(--color-text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.task-report-detail .table td {
    white-space: nowrap;
}

.task-report-comment {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-report-percent {
    display: inline-block;
    min-width: 3rem;
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-sm);
    background: var(--color-success-soft);
    color: var(--color-success);
    font-weight: 650;
    text-align: center;
}

.task-report-percent.zero {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

/* --------------------------- Müsaitlik takvimi ---------------------------
   Kurum dışına açılan salt görüntüleme sayfası. Panel kabuğunu kullanmaz.

   Gün başına bir satır çizilir: yarım saatlik dilimleri yedi sütuna dizmek
   haftayı yüz küsur küçük kutuya bölüyor ve bakınca hiçbir şey söylemiyordu.
   Bitişik ve aynı durumdaki dilimler tek aralıkta birleşir, aralığın genişliği
   süresiyle orantılıdır — gün bir çubuk olarak okunur. */

.auth-card:has(.availability-days) {
    /* Kartın taban genişliği dar (24rem); haftalık doluluk çubuğu o darlıkta
       okunmuyor. Takvim kartı ekranı 980px'e kadar kullanır. */
    width: min(980px, 100%);
    max-width: none;
}

/* e-Belge önizlemesi: gömülü XSLT çıktısı izole iframe'de, XML sekmesi
   kaydırılabilir blokta durur. */
.einvoice-preview-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.einvoice-preview-frame {
    width: 100%;
    height: min(65vh, 800px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 0.5rem);
    background: #ffffff;
}

.einvoice-preview-xml {
    max-height: 65vh;
    overflow: auto;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 0.5rem);
    background: var(--color-surface-muted, rgba(127, 127, 127, 0.06));
}

/* Telefonla giriş: ülke seçimli alan (intl-tel-input) kartın tam genişliğini
   kullanır; açılır ülke listesi ve arama kutusu temadan renk alır ki koyu
   temada beyaz bir pencere gibi durmasın. */
.auth-card .iti {
    width: 100%;
}

.iti__dropdown-content {
    background: var(--color-surface, #ffffff);
    color: var(--color-text, #1d2433);
    border-color: var(--color-border, #d7dbe7);
}

.iti__search-input {
    background: var(--color-surface, #ffffff);
    color: var(--color-text, #1d2433);
}

.iti__country.iti__highlight {
    background: var(--color-surface-muted, rgba(127, 127, 127, 0.12));
}

.iti__dial-code {
    color: var(--color-text-muted, #6b7280);
}

/* Bağlantı yönetim modalındaki tablo: adres kutusu kısalırsa kopyalanamaz
   hale gelir, kolona taban genişlik verilir; dar ekranda tablo kendi
   kapsayıcısında (.table-responsive) yatay kayar. */
.meetings-links-table .meetings-link-url {
    min-width: 16rem;
}

.availability-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.availability-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.availability-swatch {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.availability-swatch.is-free {
    background: color-mix(in srgb, var(--bs-success, #16a34a) 26%, transparent);
}

.availability-swatch.is-busy {
    background: color-mix(in srgb, var(--bs-danger, #dc2626) 26%, transparent);
}

.availability-swatch.is-past {
    background: var(--color-surface-muted, rgba(127, 127, 127, 0.16));
}

.availability-days {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.availability-row {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.availability-row.is-closed {
    opacity: 0.55;
}

.availability-row.is-today {
    border-color: var(--color-primary, #2f6fed);
    box-shadow: inset 3px 0 0 var(--color-primary, #2f6fed);
}

.availability-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.availability-date strong {
    font-size: 1.25rem;
    font-weight: 600;
}

.availability-date span {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.availability-date small {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.availability-blocks {
    display: flex;
    /* Yoğun bir gün sığmıyorsa dilimler ezilmek yerine alt satıra iner. */
    flex-wrap: wrap;
    gap: 0.25rem;
    min-height: 2.75rem;
}

.availability-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-basis: 0;
    /* Alt sınır "09:00 – 15:00" yazısını taşıyacak kadar: dilim bundan dar
       olamaz, gerekirse satır kaydırır. Orantılı genişlik üstte sürer. */
    min-width: 6.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* Kısa aralık dar bir kutu olur; yazı taşmak yerine kırpılır. */
.availability-block b,
.availability-block em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.availability-block b {
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.availability-block em {
    font-size: 0.6875rem;
    font-style: normal;
}

.availability-block.is-free {
    background: color-mix(in srgb, var(--bs-success, #16a34a) 16%, transparent);
    color: var(--bs-success-text-emphasis, #14532d);
}

.availability-block.is-busy {
    background: color-mix(in srgb, var(--bs-danger, #dc2626) 16%, transparent);
    color: var(--bs-danger-text-emphasis, #7f1d1d);
}

.availability-block.is-past {
    background: var(--color-surface-muted, rgba(127, 127, 127, 0.14));
    color: var(--color-text-muted);
}

.availability-summary {
    grid-column: 2;
    margin: 0.375rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.availability-empty {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.availability-empty.is-full {
    color: var(--bs-danger-text-emphasis, #7f1d1d);
}

.availability-navigation {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

@media (max-width: 36rem) {
    .availability-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .availability-date {
        flex-direction: row;
        align-items: baseline;
        gap: 0.375rem;
    }

    .availability-blocks {
        flex-direction: column;
    }

    .availability-summary {
        grid-column: 1;
    }
}

/* ---------------------------------------------------------------------------
   Rapor takip: dönem özeti, raportör kartı ve takvim hücreleri
   ------------------------------------------------------------------------ */

/* Grid başlığındaki sayaçlar: bekleyen e-posta rozeti kayıt sayacının yanında
   durur, ikisi de aynı hizada okunur. */
.report-tracking-heading-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.report-tracking-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}

.report-tracking-summary-card {
    display: flex;
    min-width: 7.5rem;
    flex: 1 1 7.5rem;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
}

.report-tracking-summary-value {
    font-size: 1.125rem;
    font-weight: 650;
}

.report-tracking-summary-label {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.report-tracking-card + .report-tracking-card {
    margin-top: 0.625rem;
}

.report-tracking-card {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface);
}

.report-tracking-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
}

.report-tracking-card-identity {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.report-tracking-card-name {
    font-weight: 650;
}

.report-tracking-card-mail,
.report-tracking-card-stats {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.report-tracking-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Hücreler takvimdir: günlük raporda bir ay otuz hücre, aylık raporda tek
   hücredir. Sabit sütun sayısı yerine akış kullanılır ki iki uçta da okunur
   kalsın. */
.report-tracking-cells {
    display: grid;
    padding: 0.75rem;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

.report-tracking-cell {
    display: flex;
    min-height: 5.25rem;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    gap: 0.1875rem;
}

.report-tracking-cell-label {
    font-size: 0.9375rem;
    font-weight: 650;
}

.report-tracking-cell-sub,
.report-tracking-cell-meta {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.report-tracking-cell .badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Durum rengi rozettedir; hücre yalnızca kenarıyla eşlik eder. */
.report-tracking-cell.state-on_time { border-color: var(--color-success-soft); }
.report-tracking-cell.state-late { border-color: var(--color-danger-soft); }
.report-tracking-cell.state-missing { border-color: var(--color-warning-soft); }
.report-tracking-cell.state-not_tracked { border-style: dashed; }

/* Hafta sonu ve resmî tatil hücresi soluk durur: o gün rapor beklenmediği
   sayıya bakmadan, ekrandan okunmalı. */
.report-tracking-cell.is-weekend,
.report-tracking-cell.is-holiday {
    background-color: var(--color-surface-muted);
}

.report-tracking-unmatched {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

/* Raportör ekleme satırı: kutu, tarih ve düğme tek satırda; dar ekranda sarar. */
.report-tracking-reporter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.75rem 1.125rem;
    border-bottom: 1px solid var(--color-border);
}

.report-tracking-reporter-form .search-select,
.report-tracking-reporter-form .form-control {
    width: auto;
    min-width: 13rem;
}

/* ---------------------------------------------------------------------------
   Sistem durumu ekranı
   ---------------------------------------------------------------------------
   Arıza anında bakılan ekrandır: renk yalnızca durum taşır ve "ne bozuk"
   sorusunun cevabı ilk bakışta görünür. Sayılar tabloda değil künye
   listesinde durur; okunacak şey satır değil değerdir. */
.status-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.status-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.status-toolbar-state {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-auto {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.status-auto .form-check-input {
    margin: 0;
}

.status-checked {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
}

.status-badge-ok {
    color: var(--color-success);
    background: var(--color-success-soft);
}

.status-badge-degraded,
.status-badge-error {
    color: var(--color-danger);
    background: var(--color-danger-soft);
}

.status-badge-idle {
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
}

.status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentcolor;
}

/* Servis karoları: dört beş servis tek şeritte durur. */
.status-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.status-tile {
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.status-tile header {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.875rem;
}

.status-tile-state {
    margin-inline-start: auto;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-tile p {
    margin: 0.375rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    word-break: break-word;
}

.status-tile small {
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
}

.status-tile-ok .status-dot,
.status-tile-ok .status-tile-state {
    color: var(--color-success);
}

.status-tile-error {
    border-color: var(--color-danger);
}

.status-tile-error .status-dot,
.status-tile-error .status-tile-state {
    color: var(--color-danger);
}

.status-tile-idle .status-dot,
.status-tile-idle .status-tile-state {
    color: var(--color-text-subtle);
}

/* Uyarı, "erişilemiyor"dan ayrı bir renktir: servis ayakta ama işletme
   tarafında bir şey bayat (ör. gece yedeği alınmamış). */
.status-tile-warn {
    border-color: var(--color-warning);
}

.status-tile-warn .status-dot,
.status-tile-warn .status-tile-state {
    color: var(--color-warning);
}

.status-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.status-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

@media (max-width: 1199px) {
    .status-columns {
        grid-template-columns: 1fr;
    }
}

.status-card {
    padding: 1rem 1.125rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
}

.status-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.status-card-header h3 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
}

.status-pill {
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-pill-ok {
    color: var(--color-success);
    background: var(--color-success-soft);
}

.status-pill-error {
    color: var(--color-danger);
    background: var(--color-danger-soft);
}

/* Künye listesi: etiket üstte soluk, değer altta kalın. */
.status-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.875rem 1.5rem;
    margin: 0;
}

.status-facts dt {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-facts dd {
    margin: 0.1875rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    word-break: break-word;
}

.status-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem !important;
}

.status-danger {
    color: var(--color-danger);
}

.status-empty {
    margin: 0;
    padding: 0.75rem 0;
    color: var(--color-text-subtle);
    font-size: 0.8125rem;
    text-align: start;
}

.status-warning {
    color: var(--color-warning);
    font-size: 0.8125rem;
}

.status-subsection {
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--color-border);
}

.status-subtitle {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Eklenti çipleri: eksik olan kırmızı çerçeveyle öne çıkar. */
.status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill, 999px);
    font-size: 0.75rem;
}

.status-chip strong {
    font-weight: 600;
}

.status-chip small {
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
}

.status-chip-ok {
    color: var(--color-text);
    border-color: var(--color-border);
}

.status-chip-ok .ui-icon,
.status-chip-ok svg {
    color: var(--color-success);
}

.status-chip-error {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
}

.status-chip-optional {
    color: var(--color-text-muted);
    border-style: dashed;
}

/* Disk kullanımı */
.status-bar {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--color-surface-muted);
    overflow: hidden;
}

.status-bar span {
    display: block;
    height: 100%;
    background: var(--color-primary);
}

.status-bar span.status-bar-danger {
    background: var(--color-danger);
}

.status-bar-label {
    margin: 0.375rem 0 0.875rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.status-table {
    width: 100%;
    /* Sabit yerleşim: uzun sorgu metni tabloyu sütunun dışına itemez. */
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.status-table th,
.status-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sayı kolonları dar ve sabit; ad kolonu kalan yeri alır. */
.status-table th:not(:first-child),
.status-table td:not(:first-child) {
    width: 5.5rem;
}

.status-table th,
.status-table td {
    padding: 0.3125rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    text-align: end;
}

.status-table th:first-child,
.status-table td:first-child {
    text-align: start;
}

.status-table thead th {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-table tbody tr:last-child td {
    border-bottom: 0;
}

/* ------------------------------------------------------------------------
   Müşteri panosu: huni sütunları, pano kartı, kart sayfası ve rapor

   Pano iskeleti (sütun, gövde, sürükleme hedefi) iş takip panosuyla ortaktır
   ve `.task-board` sınıflarını kullanır; buradaki kurallar kartın yüzeyini ve
   panoya özel bölümleri tanımlar. Kart müşteridir: adı, ilgi puanı, sorumlusu
   ve son notu bir bakışta okunmalıdır.
   ------------------------------------------------------------------------ */

.crm-board-filters {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
    gap: 0.75rem;
}

.crm-board-filter {
    min-width: 11rem;
}

.crm-board-filter .form-label {
    margin-bottom: 0.25rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.crm-board-filter-check {
    padding-bottom: 0.5rem;
}

.crm-board-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Giriş sütununun işareti: müşteri panoya buradan girer. */
.crm-board-entry {
    display: inline-flex;
    align-items: center;
    color: var(--color-success);
}

.crm-card {
    padding-top: 0;
    gap: 0.3125rem;
}

.crm-card.closed {
    opacity: 0.75;
}

.crm-card-outcome {
    display: flex;
    align-items: center;
    margin: 0 -0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    font-size: 0.6875rem;
    font-weight: 650;
    gap: 0.25rem;
}

.crm-card-outcome.won {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.crm-card-outcome.lost {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.crm-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 0.625rem;
    gap: 0.5rem;
}

.crm-card:has(.crm-card-outcome) .crm-card-head {
    padding-top: 0.375rem;
}

.crm-card-name {
    /* İki satırdan uzun unvan kartı büyütmez; tamamı kart sayfasında okunur. */
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    font-size: 0.875rem;
    font-weight: 620;
    line-height: 1.3;
    -webkit-line-clamp: 2;
}

.crm-card-score {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--color-neutral-soft);
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    gap: 0.125rem;
}

.crm-card-score.score-hot {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.crm-card-score.score-warm {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.crm-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
    gap: 0.5rem;
}

.crm-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
}

.crm-card-label {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

/* Son not kartın üzerinde tek satır durur; tıklanınca not penceresi açılır. */
.crm-card-note {
    display: block;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
    text-align: left;
}

.crm-card-note:hover {
    border-color: var(--color-border-strong);
}

.crm-card-note.empty {
    color: var(--color-text-subtle);
    font-style: italic;
}

.crm-card-note em {
    display: block;
    margin-top: 0.125rem;
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
    font-style: normal;
}

.crm-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0 0.5rem;
    border-top: 1px solid var(--color-border);
    gap: 0.375rem;
}

.crm-card-owner {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-card-counters {
    display: flex;
    align-items: center;
    margin-left: auto;
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
    gap: 0.375rem;
}

.crm-card-counters span {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}

.crm-card-menu .btn-icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* ---- Kart sayfası ---- */

.crm-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem;
    gap: 0.75rem;
}

.crm-hero-name {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 650;
}

.crm-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    gap: 0.75rem;
}

.crm-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.crm-hero-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.crm-hero-board {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--board-color) 16%, var(--color-surface));
    color: var(--board-color);
    font-size: 0.75rem;
    font-weight: 650;
}





.crm-card-columns {
    align-items: flex-start;
}

.crm-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-border);
    gap: 0.25rem;
}

.crm-tab {
    padding: 0.625rem 0.875rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

.crm-tab.active {
    border-bottom-color: var(--color-text);
    color: var(--color-text);
}

.crm-tab-body {
    padding: 0.875rem;
}

.crm-inline-form {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.crm-side-form {
    padding: 0.875rem;
}

.crm-modal-hint {
    margin: 0.5rem 0 0;
    color: var(--color-text-subtle);
    font-size: 0.75rem;
}

.crm-added-list {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.crm-added-list li {
    display: flex;
    align-items: center;
    color: var(--color-success);
    font-size: 0.8125rem;
    gap: 0.25rem;
}

.crm-outcome-section {
    margin-top: 1rem;
}

.crm-loss-reason {
    margin-top: 0.75rem;
}

.crm-note-list,
.crm-timeline,
.crm-agenda {
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-note-list li {
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--color-border);
}

.crm-note-list li:last-child {
    border-bottom: 0;
}

.crm-note-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-text-subtle);
    font-size: 0.75rem;
    gap: 0.5rem;
}

.crm-note-meta strong {
    color: var(--color-text);
    font-size: 0.8125rem;
}

.crm-note-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.crm-note-body {
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.crm-note-body p:last-child {
    margin-bottom: 0;
}

.crm-empty,
.crm-note-empty {
    padding: 1.25rem 0;
    color: var(--color-text-subtle);
    font-size: 0.8125rem;
    text-align: center;
}

.crm-timeline li {
    display: flex;
    align-items: flex-start;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
    gap: 0.625rem;
}

.crm-timeline li:last-child {
    border-bottom: 0;
}

.crm-timeline-type {
    min-width: 6rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-neutral-soft);
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 650;
    text-align: center;
}

.crm-timeline-main {
    display: flex;
    flex-direction: column;
    font-size: 0.8125rem;
}

.crm-timeline-meta {
    color: var(--color-text-subtle);
    font-size: 0.75rem;
}

/* ---- Ajanda ---- */

.crm-agenda li {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-info);
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
}

.crm-agenda li.overdue {
    border-left-color: var(--color-danger);
}

.crm-agenda a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.5rem;
    text-decoration: none;
}

.crm-agenda-date {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    gap: 0.25rem;
    white-space: nowrap;
}

.crm-agenda-meta {
    display: flex;
    align-items: center;
    color: var(--color-text-subtle);
    font-size: 0.75rem;
    gap: 0.25rem;
}

.crm-agenda-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-pill);
}

/* ---- Rapor ---- */

.crm-report-stats {
    margin-top: 0;
}

.crm-report-card {
    margin-bottom: 0.75rem;
    padding: 0.875rem;
}

.crm-report-title {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 650;
}

.crm-report-table {
    margin: 0;
    font-size: 0.8125rem;
}

.crm-report-table th {
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.crm-report-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.375rem;
    border-radius: var(--radius-pill);
}

.crm-report-columns {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}


/* Sistem durumu: geniş yerleşim.
   Ekran ayarlar sidebar'ı olmadan açılır; içerik tablo ve sayı ağırlıklı
   olduğu için dar sütunda satırlar birbirine girerdi. */
.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
    align-items: start;
}

/* Anlık grafikler: dört kart tek şerit. */
.status-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.status-chart-card {
    padding: 0.875rem 1rem 0.5rem;
}

.status-chart-header {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-bottom: 0.25rem;
}

.status-chart-header strong {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.1;
}

.status-chart-header small {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.status-chart {
    min-height: 7.5rem;
}

/* Gözden geçirin: dört tablo, en fazla iki sütun.
   `auto-fit` geniş ekranda dört sütun üretiyordu; tablolar daralınca hücreler
   komşu sütuna biniyordu. Sütun sayısı sabittir ve her blok kendi genişliğinde
   kalır (min-width: 0 olmadan grid hücresi içeriğe göre şişer). */
.status-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2rem;
}

.status-review-block {
    min-width: 0;
    overflow: hidden;
}

@media (max-width: 1199px) {
    .status-review-grid {
        grid-template-columns: 1fr;
    }
}

.status-card-header p {
    margin: 0.125rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.status-table td strong {
    display: block;
    font-weight: 600;
}

.status-table td small {
    display: block;
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
}

/* Sorgu metni satırı taşırmaz; tamamı ipucunda durur. */
.status-query {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    white-space: nowrap;
}

.status-table td strong,
.status-table td small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sertleştirme işaretleri */
.status-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.status-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-flag-ok {
    color: var(--color-success);
    background: var(--color-success-soft);
}

.status-flag-warning {
    color: var(--color-warning);
    background: var(--color-warning-soft);
}

/* Eksik eklenti çipi düğmedir: tıklanınca kurulum talimatı açılır. */
button.status-chip {
    cursor: pointer;
}

button.status-chip:hover {
    border-color: var(--color-border-strong);
}

.status-install-note {
    margin: 0 0 1rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.status-code {
    margin: 0.375rem 0 1rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Boş liste sessiz kalmaz: seçicinin neden boş olduğunu söyleyen uyarı. */
.crm-modal-warning {
    display: flex;
    align-items: center;
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    background: var(--color-warning-soft);
    color: var(--color-warning);
    font-size: 0.8125rem;
    gap: 0.375rem;
}

/* Kurumsal müşteride kişi başlıkta, firma bir alt satırda durur. */
.crm-card-company {
    overflow: hidden;
    max-width: 100%;
    color: var(--color-text-muted);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Satırsız stok fişi. Fiş artık satırsız açılamıyor ama eskiden kalmış ya da
   satırları silinmiş kayıt olabilir; onaya gitmez ve işe yaramaz. Solukluk
   "burada bir şey eksik" der, rozet ne eksik olduğunu söyler: kural yalnızca
   renge bırakılmaz. */
.tabulator-row.stock-document-empty {
    opacity: 0.55;
    background: var(--color-danger-soft);
}

.tabulator-row.stock-document-empty:hover {
    opacity: 1;
}

/* ------------------------------------------------------------------------
   Cari seçimi: alan + "Cari Listesi" penceresi

   Müşteri her belgede seçilir; alan boşken serbest metin kabul eder (yazıp
   Enter arar), seçiliyken kaydın kendisini gösterir ve yanlışlıkla üzerine
   yazılamaz.
   ------------------------------------------------------------------------ */

.customer-select-field {
    display: flex;
    align-items: stretch;
    gap: 0.375rem;
}

.customer-select-field > .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.customer-select-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
}

.customer-select-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-select-clear {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-subtle);
    line-height: 1;
}

.customer-select-clear:hover {
    color: var(--color-danger);
}

.customer-select-open {
    flex: 0 0 auto;
    padding-inline: 0.75rem;
}

.customer-select.disabled .customer-select-value {
    cursor: default;
}

.customer-select-search {
    display: flex;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.customer-select-search .form-control {
    flex: 1 1 auto;
}

.customer-select-dialog .data-grid {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Ad hücresi iki satırdır: kişi üstte, kurumsal müşteride firma altında. */
.customer-select-cell {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.customer-select-code {
    font-variant-numeric: tabular-nums;
}

.customer-select-name {
    font-weight: 600;
}

.customer-select-cell small {
    color: var(--color-text-muted);
}


/* Cari listesindeki firma süzgeci: arama kutusunun yanında sabit genişlikte. */
.customer-select-company {
    flex: 0 0 13rem;
}

/* ========================= Muhasebe hesap seçimi ========================= */

/*
 * Alan kod kutusu ve plan düğmesinden oluşur; temizleme düğmesi kutunun
 * içinde, plan düğmesinin solunda durur.
 */
.account-select-field {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0.375rem;
}

.account-select-field > .form-control {
    flex: 1 1 auto;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.account-select-clear {
    position: absolute;
    top: 50%;
    right: 3.25rem;
    z-index: 2;
    display: inline-flex;
    padding: 0;
    color: var(--color-text-subtle);
    line-height: 1;
    background: none;
    border: 0;
    transform: translateY(-50%);
}

.account-select-clear:hover {
    color: var(--color-danger);
}

.account-select-open {
    flex: 0 0 auto;
    padding-inline: 0.75rem;
}

/* Kodun karşılığı: hesabın adı, uyarı ya da hata hep bu satırda. */
.account-select-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.3;
}

.account-select-search {
    margin-bottom: 0.75rem;
}

.account-select-notice {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    margin: 0 0 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

/*
 * Ağaç kendi içinde kayar: pencere büyümez, plan altı seviyeye kadar iner ve
 * seçim yaparken arama kutusu görünür kalmalı.
 */
.account-tree {
    display: flex;
    flex-direction: column;
    max-height: min(28rem, 60vh);
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.account-tree-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.375rem 0.75rem 0.375rem 0.5rem;
    color: var(--color-text);
    font-size: 0.8125rem;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--color-border);
}

.account-tree-row:last-child {
    border-bottom: 0;
}

.account-tree-row:hover,
.account-tree-row:focus-visible {
    background: var(--grid-control-hover, rgba(127, 127, 127, 0.06));
    outline: none;
}

.account-tree-row.is-active {
    background: var(--color-primary-soft);
}

/* Ana hesap seçilemez ama listede kalır: yaprağa ancak dalı görerek inilir. */
.account-tree-row.is-disabled {
    color: var(--color-text-muted);
    cursor: default;
}

.account-tree-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    color: var(--color-text-muted);
}

.account-tree-code {
    flex: 0 0 auto;
    min-width: 6.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.account-tree-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-tree-flag {
    flex: 0 0 auto;
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.account-tree-empty {
    margin: 0;
    padding: 1.25rem;
    color: var(--color-text-muted);
    text-align: center;
}

/* Kullanıcı birden fazla firmada yetkiliyse kartın firması da yazılır. */
.crm-card-owner-company {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
}

/* ============================ Sağ tık menüsü ============================ */

/*
 * Menü `body` altına taşınır (teleport): takvim hücresinin `overflow` ve
 * `transform` bağlamı içinde kalsaydı kırpılır ya da yanlış yere düşerdi.
 */
.context-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
}

.context-menu {
    position: fixed;
    z-index: 1081;
    min-width: 13rem;
    max-width: 18rem;
    padding: 0.25rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-floating);
}

/* ─── Ürün stok/fiyat özeti (sağ tık penceresi) ─── */
.product-insight {
    position: fixed;
    z-index: 1081;
    min-width: 19rem;
    max-width: 24rem;
    max-height: 70vh;
    padding: 0.75rem 0.875rem;
    overflow-y: auto;
    color: var(--color-text);
    font-size: 0.8125rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-floating);
}

.product-insight-title {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.product-insight-heading {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    margin: 0.625rem 0 0.25rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.product-insight-heading:first-of-type {
    margin-top: 0;
}

.product-insight-table {
    width: 100%;
    border-collapse: collapse;
}

.product-insight-table td {
    padding: 0.25rem 0.375rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.product-insight-table tbody tr:last-child td {
    border-bottom: 0;
}

.product-insight-table tfoot td {
    font-weight: 600;
    border-top: 1px solid var(--color-border);
    border-bottom: 0;
}

.product-insight-table small,
.product-insight-legend,
.product-insight-muted {
    color: var(--color-text-muted);
}

.product-insight-legend {
    margin: 0.25rem 0 0;
    font-size: 0.6875rem;
}

.product-insight-muted {
    margin: 0.25rem 0;
}

.context-menu:focus {
    outline: none;
}

.context-menu-heading {
    margin: 0;
    padding: 0.375rem 0.625rem 0.5rem;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.context-menu-separator {
    margin: 0.25rem 0.375rem;
    border: 0;
    border-top: 1px solid var(--color-border);
    opacity: 1;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4375rem 0.625rem;
    color: inherit;
    font-size: 0.8125rem;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
}

.context-menu-item:hover:not(:disabled),
.context-menu-item:focus-visible {
    background: var(--color-surface-muted);
}

.context-menu-item:disabled {
    color: var(--color-text-muted);
}

.context-menu-item.is-danger {
    color: var(--color-danger);
}

/* Sağ tık alanı olduğu belli olsun: imleç hücrede menü çağrılabileceğini söyler. */
.meetings-month-cell,
.meetings-timegrid-slot,
.meetings-rooms-slot {
    cursor: context-menu;
}

/* Stok listesi penceresi. Gövde kendi içinde kaydırılır: pencere ekranı aşarsa
   arama kutusu ve alttaki düğmeler görünmez olur, kullanıcı seçtiğini
   ekleyemez. */
.product-picker-body {
    max-height: 26rem;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.product-picker-body thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-surface);
}

.product-picker tbody tr {
    cursor: pointer;
}

/* Belge başlığı. Etiket alanın üstünde değil solundadır: on üç alanlı bir
   başlıkta üst etiket düzeni iki katına uzatır ve satırlar ekranın altına
   iner. Etiket sütunu sabit genişliktedir, alanlar aynı hizada başlar. */
.document-header .document-field {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.document-header .document-field > .form-label {
    margin-bottom: 0;
    line-height: 1.2;
}

/* Alanlar satır tablosuyla aynı yükseklikte (28 piksel): başlıkta 34, satırda
   28 piksel kullanmak aynı ekranda iki ayrı form dili konuşmak olurdu. */
.document-header .form-control,
.document-header .form-select,
.document-header .search-select-trigger,
.document-header .money-input .form-control,
.document-header .document-readonly,
.document-header .btn {
    min-height: 1.75rem;
    height: 1.75rem;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.8125rem;
    border-radius: 4px;
}

.document-header .money-input .input-group-text,
.document-header .input-group-text {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.75rem;
}

/* Çok satırlı açıklama sabit yükseklikten muaftır. */
.document-header textarea.form-control {
    height: auto;
    min-height: 4.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Zorunlu alan yıldızı etiketin sonunda durur ve renklidir; formu doldururken
   hangi alanın boş bırakılamayacağı okunmadan görülmelidir. */
.document-header .document-field > .form-label .required {
    margin-left: 0.125rem;
    color: var(--color-danger, #dc3545);
}

/* Fiş no ve tarih tek satırı paylaşır: ikisi de belgenin kimliğidir ve ayrı
   satırlara bölündüklerinde başlık gereksiz uzar. Numara tarihten geniştir;
   "DEMO-SAYIM-000012" eşit bölmede iki satıra kırılıyordu. */
.document-header .document-field-split {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 0.375rem;
}

/* Okunur alan girdiye benzemeli ama tıklanabilir görünmemeli. Yüksekliğini
   yukarıdaki ortak kuraldan alır.

   Uzun değer sarılmaz, kesilir: satır yüksekliği sabit olduğu için sarılan
   metnin ikinci satırı kutunun dışında kalır ve okunmaz. */
.document-header .document-readonly {
    display: flex;
    overflow: hidden;
    align-items: center;
    padding-right: 0.625rem;
    padding-left: 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.02));
    color: var(--color-text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Çıkışta seri numarası listeden seçilir. Depoda yüzlerce numara olabilir;
   liste sabit yükseklikte kaydırılır ve sütunlara bölünür, tek sütunda üç yüz
   satır pencereyi kullanılmaz hâle getirirdi. */
.serial-picker {
    display: grid;
    max-height: 13rem;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    gap: 0.125rem 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.serial-option {
    display: flex;
    align-items: center;
    padding: 0.1875rem 0.25rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8125rem;
    gap: 0.375rem;
}

.serial-option:hover {
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.03));
}

.serial-option .form-check-input {
    margin: 0;
    flex: 0 0 auto;
}

/* Alt iskonto toplamlar kartının başlığında durur.

   `money-input` kendi kökünde `.input-group` taşır; onu bir `.input-group`
   içine daha koymak yüzde düğmesini alt satıra atıyordu — Bootstrap iç gruba
   tam genişlik verir ve dışarıdaki düğmeye yer kalmaz. Burada düz bir flex
   satırı var ve iki eleman yan yana duruyor. */
.document-discount-head {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.document-discount {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.document-discount .form-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.document-discount .money-input {
    width: 8rem;
}

.document-discount .money-input .form-control,
.document-discount .btn {
    min-height: 1.75rem;
    height: 1.75rem;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.8125rem;
}

/* Oran/tutar düğmesi kare kalsın: içindeki metin "%" ile "TRY" arasında
   değişiyor ve genişlik her tıklamada zıplamamalı. */
.document-discount .btn {
    min-width: 3rem;
}

/* Belge satırı. Bir satırda on iki alan var ve hepsi girilebilir; standart
   yükseklikte satır ekranın yarısını yer. Alanlar 28 piksele iner, tabloda
   yirmi satır aynı anda görünür. */
.document-lines .form-control,
.document-lines .form-select,
.document-lines .search-select-trigger,
.document-lines .money-input .form-control,
.document-lines .btn {
    min-height: 1.75rem;
    height: 1.75rem;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.8125rem;
    border-radius: 4px;
}

.document-lines td {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.document-lines .money-input .input-group-text {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.75rem;
    border-radius: 4px;
}

/* Kolon genişlikleri sabittir. Tarayıcı varsayılanı olan otomatik genişlikte
   hücrenin içeriği tablonun düzenini belirler: kullanıcı miktara bir hane
   eklediğinde bütün kolonlar kayar ve imlecin altındaki alan yer değiştirir.
   Sabit düzende yazmak düzeni bozmaz.

   `min-width` olmadan tablo dar ekranda kapsayıcısına sığmak için bütün
   kolonları oransal olarak eziyordu: ürün adı kolonu sıfıra iniyor, ad
   `overflow-wrap: anywhere` yüzünden harf harf sarılıyor ve tek satır 800px
   yüksekliğe çıkıyordu (19 Ağu 2026'da teklif ekranında görüldü). Tablo kendi
   kolonlarının toplamından dar olamaz; dar ekranda `.table-responsive` yatay
   kaydırır. */
.document-lines {
    table-layout: fixed;
    min-width: max-content;
}

.document-lines th,
.document-lines td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ürün adı ve seri numarası uzundur; tek kolonda taşmadan sarılır. */
.document-lines .document-line-product,
.document-lines .document-line-tracking {
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Satır işlemleri tek düğmeye indi: düzenleme satırın kendi alanlarında
   yapılıyor, sağ tık menüsü de aynı işi görüyor. */
.document-lines .definition-grid-actions {
    justify-content: center;
}

/* Birim maliyet iki alan taşır: tutar ve para birimi. Sabit düzende hücrenin
   çocukları taşmasın diye ikisi de daralabilir olmalı; `min-width: 0` olmadan
   flex çocuğu kendi içeriğinden dar olmayı reddeder ve kolonu taşırır. */
.document-lines .document-line-cost {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
}

.document-lines .document-line-cost > * {
    min-width: 0;
}

.document-lines .document-line-cost > .money-input {
    flex: 1 1 auto;
}

.document-lines .document-line-cost > .search-select {
    flex: 0 0 4.25rem;
}

/* ---------------------------------------------------------------------------
   Stok kartı
   ---------------------------------------------------------------------------
   Kart altmıştan fazla alan taşır. Alanlar dört sütunlu bir ızgaraya dizildiğinde
   ekran kutu duvarına dönüyordu: satırlar düzensiz bitiyor, hangi etiketin hangi
   kutuya ait olduğu ancak yukarı bakılarak anlaşılıyordu. Bunun yerine ziyaret
   kartındaki satır düzeni (`field-rows`) kullanılır: etiket solda sabit
   genişlikte, birlikte okunan alanlar sağda tek satırda. */

/* Stok kartının etiketleri ziyaret kartınınkinden uzundur ("Emniyet stoğu /
   sipariş noktası"); sütun iki satıra kırılmayacak kadar geniş tutulur. */
.customer-tab-body {
    --label-width: 11.5rem;
}

/* Etiketi kendi metninde taşıyan satır: onay kutusu kümesi ve açıklama. */
.field-row-plain {
    grid-template-columns: minmax(0, 1fr);
}

/* Kısa değerli uzun listeler (on özel kod slotu) iki sütuna dizilir; alt alta
   dizildiğinde sekme gereksiz uzuyordu. Sütunlar arası çizgi okumayı bölerdi. */
.field-rows-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
}

.field-rows-split .field-row + .field-row {
    border-top: 0;
}

@media (max-width: 64rem) {
    .field-rows-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Bölüm başlığının altındaki satırlar dolgusunu kartın kenarından bir kez alır. */
.form-section > .field-rows {
    padding: 0;
}

/* Bölüm başlığının sağ ucundaki araçlar: yeni kayıt düğmesi, tür seçimi, dosya
   girdisi. Başlığın büyük harf ve harf aralığı kuralı bunlara geçmez. */
.form-section-tools {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-left: auto;
}

.form-section-head .btn,
.form-section-tools {
    letter-spacing: normal;
    text-transform: none;
}

.form-section-tools .form-control {
    max-width: 16rem;
}

/* Kart kaydedilmeden çalışmayan sekmeler basılmaz; şeridin sonundaki not
   nedenini söyler. */
.customer-tabs-note {
    align-self: center;
    margin: 0 0.25rem 0 auto;
    padding-bottom: 0.5rem;
    color: var(--color-text-subtle);
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Görsel ve belgeler: kutular sabit genişliktedir, satır sonunda tek bir kutu
   ekranı boydan boya germez. */
.product-file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.75rem;
}

.product-file {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.product-file-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.product-variant-attribute {
    min-width: 17.5rem;
}

/* ---------------------------------------------------------------------------
   Form yönetimi
   ---------------------------------------------------------------------------
   Talep listesi, talep formu, tasarımcı ve yazdırma çıktısı. Renk yalnızca
   durum taşır: sayaç şeridi ve onay zinciri nötr yüzeydedir, seçili olan
   yüzeyle ve çerçeveyle anlatılır. */






.forms-cell {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.forms-cell-name {
    color: var(--color-text);
}

/* Talep ekranı: form solda, karar ve yazışma sağda. Karar verirken formun
   görünür kalması gerekir, bu yüzden panel modal değildir. */
.form-request-page,
.form-type-page,
.form-workflow-page,
.form-builder-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.form-request-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 1200px) {
    .form-request-layout {
        grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr);
    }
}

.form-request-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-request-card {
    padding: 0.875rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.form-request-decision textarea {
    margin-bottom: 0.5rem;
}

.form-request-decision-actions {
    display: flex;
    gap: 0.375rem;
}

.form-request-decision-actions .btn {
    display: inline-flex;
    flex: 1 1 auto;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
}

.form-request-step {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.form-request-chain {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-request-chain-item {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius-lg);
}

.form-request-chain-item.decision-approved { border-left-color: var(--color-success-soft); }
.form-request-chain-item.decision-rejected { border-left-color: var(--color-danger-soft); }
.form-request-chain-item.decision-returned { border-left-color: var(--color-info-soft); }
.form-request-chain-item.decision-pending { border-left-color: var(--color-warning-soft); }
.form-request-chain-item.decision-skipped { border-left-style: dashed; }

.form-request-chain-head {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.form-request-chain-head > div {
    flex: 1 1 auto;
    min-width: 0;
}

.form-request-chain-order {
    display: inline-flex;
    width: 1.375rem;
    height: 1.375rem;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-muted);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.form-request-chain-comment {
    margin: 0.375rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.form-request-chain-history {
    margin-top: 0.5rem;
    opacity: 0.7;
}

.form-request-comments,
.form-request-events {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.form-request-comment-head {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.8125rem;
}

.form-request-comment-body {
    color: var(--color-text);
    font-size: 0.875rem;
}

.form-request-comment-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.form-request-event-action {
    color: var(--color-text);
    font-size: 0.8125rem;
}

.form-request-events li {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

/* Form türü ekranı */
.form-type-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.form-type-viewer-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.form-type-viewer-form .search-select {
    min-width: 14rem;
}

.form-type-viewer-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-type-viewer-list li {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--color-border);
}

.form-type-viewer-list li span {
    flex: 1 1 auto;
}

/* Onay akışı ekranı */
.form-workflow-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 992px) {
    .form-workflow-layout {
        grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr);
    }
}

.form-workflow-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-workflow-list li {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
}

.form-workflow-list li.active {
    background: var(--color-surface-muted);
}

.form-workflow-item {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.625rem;
    background: none;
    border: 0;
    text-align: left;
}

.form-workflow-item-name {
    color: var(--color-text);
}

.form-workflow-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-workflow-step {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.form-workflow-step-order {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-muted);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.form-workflow-step-body {
    flex: 1 1 auto;
    min-width: 0;
}

.form-workflow-step-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

/* Tasarımcı: palet, tuval, özellikler */
.form-builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (min-width: 1200px) {
    .form-builder-layout {
        grid-template-columns: 13rem minmax(0, 1fr) 19rem;
    }
}

.form-builder-palette,
.form-builder-canvas,
.form-builder-properties {
    padding: 0.875rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.form-builder-palette-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.form-builder-palette-item {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    padding: 0.3125rem 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 0.8125rem;
    text-align: left;
}

.form-builder-palette-item:hover:not(:disabled) {
    background: var(--color-surface-muted);
}

.form-builder-canvas {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-builder-section {
    padding: 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.form-builder-section.active {
    box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.form-builder-section-head {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.form-builder-fields {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-builder-field {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.form-builder-field.active {
    background: var(--color-surface-muted);
    box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.form-builder-field-body {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    line-height: 1.2;
}

.form-builder-field-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.form-builder-children {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.form-builder-children li {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

/* Raporlar */




.forms-report-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 1200px) {
    .forms-report-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Şemadan çizilen form */
.form-renderer-section + .form-renderer-section {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.form-renderer-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
}

.form-renderer-field {
    grid-column: span 6;
    min-width: 0;
}

.form-renderer-span-1 { grid-column: span 1; }
.form-renderer-span-2 { grid-column: span 2; }
.form-renderer-span-3 { grid-column: span 3; }
.form-renderer-span-4 { grid-column: span 4; }
.form-renderer-span-5 { grid-column: span 5; }
.form-renderer-span-6 { grid-column: span 6; }
.form-renderer-span-7 { grid-column: span 7; }
.form-renderer-span-8 { grid-column: span 8; }
.form-renderer-span-9 { grid-column: span 9; }
.form-renderer-span-10 { grid-column: span 10; }
.form-renderer-span-11 { grid-column: span 11; }
.form-renderer-span-12 { grid-column: span 12; }

@media (max-width: 767px) {
    .form-renderer-field {
        grid-column: span 12;
    }
}

.form-renderer-required {
    color: var(--color-danger-emphasis, var(--color-text));
}

.form-renderer-value {
    padding: 0.25rem 0;
    color: var(--color-text);
    font-size: 0.875rem;
}

.form-renderer-divider {
    grid-column: span 12;
    margin: 0.25rem 0;
    border-top: 1px solid var(--color-border);
}

.form-renderer-heading {
    margin: 0.25rem 0 0;
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.form-renderer-html {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.form-renderer-range {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.form-renderer-formula {
    display: flex;
    gap: 0.25rem;
    align-items: baseline;
    min-height: 2.125rem;
    padding: 0.25rem 0.5rem;
    background: var(--color-surface-muted);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    font-weight: 600;
}

.form-renderer-formula-cell {
    display: inline-block;
    padding: 0.25rem;
    font-weight: 600;
}

.form-renderer-file-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0 0 0.375rem;
    padding: 0;
    list-style: none;
}

.form-renderer-file-list li {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    font-size: 0.8125rem;
}

.form-renderer-file-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-renderer-rows {
    overflow-x: auto;
}

.form-renderer-table {
    margin-bottom: 0.375rem;
}

.form-renderer-table th {
    color: var(--color-text-subtle);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.form-renderer-row-action {
    width: 2.5rem;
}

/* Yazdırma çıktısı: A4, ekranda da aynı görünür ki kullanıcı ne basacağını
   bilsin. */
.form-print-body {
    padding: 1rem;
    background: var(--color-surface-muted);
}

.form-print-sheet {
    position: relative;
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    margin: 0 auto;
    padding: 14mm 12mm;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.form-print-watermark {
    position: absolute;
    top: 45%;
    left: 50%;
    color: var(--color-text-subtle);
    font-size: 3.5rem;
    letter-spacing: 0.1em;
    opacity: 0.12;
    pointer-events: none;
    text-transform: uppercase;
    transform: translate(-50%, -50%) rotate(-24deg);
}

.form-print-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-border-strong);
}

.form-print-header h1 {
    margin: 0;
    font-size: 1.125rem;
}

.form-print-header p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.form-print-meta {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.125rem 0.5rem;
    margin: 0;
    font-size: 0.75rem;
}

.form-print-meta dt {
    color: var(--color-text-muted);
    font-weight: 500;
}

.form-print-meta dd {
    margin: 0;
    text-align: right;
}

.form-print-identity {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.form-print-identity span {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
}

.form-print-identity strong {
    font-size: 0.875rem;
}

.form-print-section {
    margin-bottom: 0.875rem;
}

.form-print-section h2 {
    margin: 0 0 0.375rem;
    padding-bottom: 0.125rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
    text-transform: uppercase;
}

.form-print-grid {
    display: grid;
    grid-template-columns: repeat(var(--print-columns, 2), minmax(0, 1fr));
    gap: 0.375rem 0.75rem;
}

.form-print-field-wide {
    grid-column: 1 / -1;
}

.form-print-label {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.form-print-value {
    min-height: 1.25rem;
    padding-bottom: 0.125rem;
    border-bottom: 1px dotted var(--color-border-strong);
    font-size: 0.8125rem;
}

.form-print-heading {
    grid-column: 1 / -1;
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
}

.form-print-divider {
    grid-column: 1 / -1;
}

.form-print-html {
    grid-column: 1 / -1;
    font-size: 0.75rem;
}

.form-print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.form-print-table th,
.form-print-table td {
    padding: 0.1875rem 0.375rem;
    border: 1px solid var(--color-border);
    text-align: left;
}

.form-print-table th {
    background: var(--color-surface-muted);
}

.form-print-signatures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.form-print-signatures div {
    padding-top: 2.5rem;
    border-top: 1px solid var(--color-border-strong);
    font-size: 0.75rem;
    text-align: center;
}

.form-print-notes {
    margin-top: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.form-print-footer {
    margin-top: 1rem;
    color: var(--color-text-subtle);
    font-size: 0.625rem;
    text-align: right;
}

@media print {
    .form-print-body {
        padding: 0;
        background: none;
    }

    .form-print-sheet {
        width: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .form-print-section {
        break-inside: avoid;
    }
}

/* ============================ Araç filosu ============================ */

.fleet-page,
.fleet-card {
    --module-accent: var(--module-fleet);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}






.fleet-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.fleet-toolbar-search {
    display: flex;
    flex: 1 1 16rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.625rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.fleet-toolbar-search input {
    width: 100%;
    padding: 0.5rem 0;
    color: inherit;
    background: none;
    border: 0;
}

.fleet-toolbar-search input:focus {
    outline: none;
}

.fleet-toolbar .form-select {
    width: auto;
}


/* --------------------------------- Kart --------------------------------- */

.fleet-form,
.fleet-tabs-panel {
    padding: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.fleet-form-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.fleet-form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.fleet-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.875rem;
    border-bottom: 1px solid var(--color-border);
}

.fleet-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
}

.fleet-tab.is-active {
    color: var(--module-accent);
    border-bottom-color: var(--module-accent);
}

/* "Yeni kayıt" sekme şeridinin sağ ucunda durur: hangi sekmedeysen o türden
   kayıt açar, bu yüzden yeri sekmelerin yanıdır. */
.fleet-tab-new {
    margin: 0 0 0.25rem auto;
}

/* Anahtar alanı, yanındaki etiketli alanlarla aynı hizada dursun. */
.fleet-record-switch {
    margin-top: 2rem;
}

.fleet-toolbar-dates {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fleet-toolbar-dates .form-label {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.fleet-toolbar-dates .form-control {
    width: auto;
}

.fleet-toolbar-total {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.fleet-toolbar-picker {
    flex: 0 1 18rem;
}

/* Uzun formlarda başlık, alanları konuya göre ayırır. */
.fleet-form-section {
    margin: 1.25rem 0 0.5rem;
    color: var(--module-assistant);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fleet-form-section:first-child {
    margin-top: 0;
}


/* ------------------------------ Havuz kartları ------------------------------ */

.fleet-mine {
    padding: 0.875rem 1rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.fleet-mine-title {
    margin: 0 0 0.625rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fleet-mine-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.625rem;
}

.fleet-mine-card {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.625rem 0.75rem;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--module-accent);
    border-radius: var(--radius-md);
}

.fleet-mine-plate {
    font-weight: 600;
}

.fleet-mine-name,
.fleet-mine-meta {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}


/* ------------------------------ Ay kırılımı ------------------------------ */

.fleet-months {
    padding: 0.875rem 1rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.fleet-months-title {
    margin: 0 0 0.625rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fleet-months-bars {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.fleet-month {
    display: grid;
    grid-template-columns: 6rem 1fr 8rem;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
}

.fleet-month-label {
    color: var(--color-text-muted);
}

.fleet-month-bar {
    height: 0.5rem;
    background: var(--color-border);
    border-radius: 999px;
}

.fleet-month-bar > span {
    display: block;
    height: 100%;
    background: var(--module-accent);
    border-radius: inherit;
}

.fleet-month-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Finans özet kartları
   ---------------------------------------------------------------------------
   Kasa, hareket ve cari ekranlarının üstündeki toplamlar. Her para birimi
   kendi kartında durur: dolar ile lira tek karta toplansaydı ortaya hiçbir
   şey ifade etmeyen bir sayı çıkardı. Kartlar sığdığı kadar yan yana dizilir,
   sığmayınca alta iner. */
.finance-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Kartın dolgusu **bölümlerdedir**, kabında değil: başlık ile sayılar arasına
   ve sayıların arasına kenar çizgisi girebilsin diye. Çizgi kabın kenarına
   kadar uzamalı; kapta dolgu olsaydı çizgi ortada kesik dururdu. */
.finance-summary-card {
    display: flex;
    flex: 1 1 15rem;
    min-width: 0;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.finance-summary-card header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Para birimi rozeti sağa yaslanır: kartlar taranırken göz aynı sütunda
   birimi bulur. Başlık şeridi artık zeminli olduğu için rozet yüzey renginde
   çizilir, aksi halde zemine karışıyordu. */
.finance-summary-currency {
    margin-left: auto;
    padding: 0.0625rem 0.4375rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-pill);
    color: var(--color-text-subtle);
    letter-spacing: 0;
}

/* Tek değerli kart (bakiye, adet). Dolgu doğrudan öğelerdedir. */
.finance-summary-card > strong {
    display: block;
    padding: 0.625rem 0.875rem 0;
    font-size: 1.375rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.finance-summary-card > strong:last-child {
    padding-bottom: 0.625rem;
}

.finance-summary-card > small {
    display: block;
    padding: 0.125rem 0.875rem 0.625rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

/* Giriş/çıkış/net üçlüsü. Hücreler eşit bölünür ve **dikey çizgiyle** ayrılır:
   boşlukla ayrılınca üç sayı tek bir blok gibi okunuyor, hangi rakamın hangi
   başlığa ait olduğu ancak dikkatle çıkıyordu. Tutarlar tabular-nums ile
   hizalanır ki kartlar arasında rakamlar aynı sütuna düşsün. */
.finance-summary-split {
    display: flex;
    gap: 0;
}

/* `flex-basis` birimli yazılır: birimsiz `0` bazı ayrıştırıcılarda kısayolun
   tamamını düşürüyor, hücreler içeriğe göre daralıp sağda boşluk bırakıyordu. */
.finance-summary-split > div {
    display: flex;
    min-width: 0;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.875rem 0.625rem;
}

.finance-summary-split > div + div {
    border-left: 1px solid var(--color-border);
}

.finance-summary-split small {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.finance-summary-split strong {
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Son hücre vurgulanmaz: yalnız kasa hareketinde sonuncusu "net"tir; caride
   alacak/borç, POS'ta komisyon gelir. Sabit bir vurgu ikisinde yanlış sayıyı
   öne çıkarırdı. Ayrımı dikey çizgi yapar. */

/* Bütçe matrisi
   ------------------------------------------------------------------
   Satır departman × kalem, kolon 12 ay. Tablo yatayda kayar, satır
   başlığı yerinde durur: on ikinci ayı yazan kişi hangi satırda
   olduğunu görmeye devam etmelidir. */
.budget-matrix-card {
    padding: 0;
}

.budget-matrix {
    overflow-x: auto;
}

.budget-matrix table {
    min-width: 64rem;
    margin-bottom: 0;
}

.budget-matrix th,
.budget-matrix td {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.budget-matrix-label {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 15rem;
    background-color: var(--color-surface);
    text-align: left;
}

.budget-matrix-label .customer-grid-title {
    display: block;
}

.budget-matrix-label small {
    display: block;
    font-size: 0.75rem;
}

.budget-matrix tfoot th {
    background-color: var(--color-surface-muted, var(--color-surface));
}

.budget-matrix-input {
    min-width: 6.5rem;
}

.budget-matrix-actions {
    width: 3rem;
}

.budget-matrix-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------------------
   Üretim
   ---------------------------------------------------------------------------
   Sayaç şeridi listenin süzgecidir: kutuya basmak listeyi o duruma indirir.
   Bu yüzden kutular düğmedir, kart değil. */





/* İlerleme şeridi emrin ilk cevabıdır: kaç adet üretildi, ne kadar kaldı,
   maliyet nereye geldi. Satır listesine bakmadan okunmalı. */
.production-progress {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 1rem 1rem;
}

.production-progress-bar {
    height: 0.5rem;
    overflow: hidden;
    background: var(--color-surface-muted);
    border-radius: var(--radius-pill, 999px);
}

.production-progress-fill {
    height: 100%;
    background: var(--color-primary);
    transition: width 0.2s ease;
}

.production-progress-values {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.production-progress-values > div {
    display: flex;
    flex-direction: column;
}

.production-progress-value {
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 600;
}

.production-progress-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

/* Reçete kartı: gövde solda, maliyet sağda. Maliyet satır eklerken görünür
   kalmalı — kullanıcı "bu malzemeyi eklersem kaça çıkar" sorusunu o an sorar. */
.production-recipe-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 1200px) {
    .production-recipe-layout {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
        align-items: start;
    }
}

.production-cost-panel {
    position: sticky;
    top: 1rem;
}

.production-cost-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.production-cost-list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.production-cost-list dt {
    color: var(--color-text-muted);
    font-weight: 400;
}

.production-cost-list dd {
    margin: 0;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.production-cost-total {
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    font-weight: 600;
}

.production-cost-total dt,
.production-cost-total dd {
    color: var(--color-text);
    font-weight: 600;
}

/* Olay akışı: ne zaman ne oldu. Denetim kaydı değil, kullanıcının okuduğu
   zaman çizelgesidir. */
.production-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.production-timeline > li {
    padding-left: 0.875rem;
    border-left: 2px solid var(--color-border);
}

.production-timeline-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.875rem;
}

/* Üretim panosu: sütunlar durumdur, kart sürüklenmez. Durum geçişi malzeme
   ayırır ve stok yazar; sürükleme bunu yanlışlıkla tetiklemenin en kolay
   yoluydu. */
.production-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.production-board-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--color-surface-muted);
    border-radius: var(--radius-xl);
}

.production-board-column > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.production-board-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.production-card {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 0.75rem);
    cursor: pointer;
}

.production-card:hover {
    border-color: var(--color-border-strong);
}

.production-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.production-card-priority {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.production-card-priority.priority-1,
.production-card-priority.priority-2 {
    color: var(--color-danger, #b42318);
}

.production-card-product {
    font-size: 0.875rem;
    line-height: 1.25;
}

.production-card-meta,
.production-card-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

/* Atölye terminali: tek odak, büyük düğme, az metin. */
.production-terminal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Cihaz paneli: atanmamış üretim ve neden bekleyen duruşlar. Satırlar
   dokunmatik için yüksek durur; panel yardımcıdır, ana akışı gölgelemez. */
.production-terminal-device {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}
.production-terminal-device-block {
    padding: 0.875rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--module-iot, var(--module-accent));
    border-radius: var(--radius-lg);
}
.production-terminal-device-block h3 {
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
}
.production-terminal-device-block ul {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.production-terminal-device-block li {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.production-terminal-device-block li > span { flex: 1 1 auto; }

.production-terminal-scan {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-xl);
}

.production-terminal-scan input {
    flex: 1 1 auto;
    min-width: 8rem;
    padding: 0.75rem 1rem;
    background: transparent;
    border: 0;
    color: var(--color-text);
    font-size: 1.5rem;
    letter-spacing: 0.05em;
}

.production-terminal-scan input:focus {
    outline: none;
}

.production-terminal-hint {
    color: var(--color-text-muted);
    text-align: center;
    padding: 3rem 1rem;
}

.production-terminal-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 992px) {
    .production-terminal-body {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }

    .production-terminal-recent {
        grid-column: 1 / -1;
    }
}

.production-terminal-order,
.production-terminal-form,
.production-terminal-recent {
    padding: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.production-terminal-order > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.production-terminal-order h2 {
    margin: 0;
    font-size: 1.5rem;
}

.production-terminal-order p {
    margin: 0;
    color: var(--color-text-muted);
}

.production-terminal-remaining {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
}

.production-terminal-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.production-terminal-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--color-surface-muted);
    border: 2px solid transparent;
    border-radius: var(--radius-lg, 0.75rem);
    text-align: left;
}

.production-terminal-step.active {
    border-color: var(--color-primary);
    background: var(--color-surface);
}

.production-terminal-step.done {
    opacity: 0.55;
}

.production-terminal-step-no {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border-radius: 50%;
    font-weight: 600;
}

.production-terminal-step-name {
    flex: 1 1 auto;
}

.production-terminal-step-name small {
    display: block;
    color: var(--color-text-muted);
}

.production-terminal-step-qty {
    font-variant-numeric: tabular-nums;
}

.production-terminal-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.production-terminal-fields label,
.production-terminal-reason {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.production-terminal-fields span,
.production-terminal-reason span {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.production-terminal-reason {
    margin-top: 0.75rem;
}

.production-terminal-final {
    margin: 0.75rem 0;
}

.production-terminal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.production-terminal-actions .btn {
    flex: 1 1 12rem;
}

.production-terminal-recent ul {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.production-terminal-recent li {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.production-terminal-recent li.cancelled {
    color: var(--color-text-muted);
    text-decoration: line-through;
}

/* Kapasite ısı haritası: hücre rengi yük yüzdesidir. */
.production-capacity-cell {
    font-variant-numeric: tabular-nums;
}

.production-capacity-cell.load-low {
    background: var(--color-success-subtle, rgba(25, 135, 84, 0.12));
}

.production-capacity-cell.load-mid {
    background: var(--color-warning-subtle, rgba(255, 193, 7, 0.18));
}

.production-capacity-cell.load-high {
    background: var(--color-danger-subtle, rgba(220, 53, 69, 0.18));
}

.production-capacity-legend {
    display: flex;
    gap: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.production-capacity-legend i {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.25rem;
    border-radius: 0.25rem;
    vertical-align: middle;
}

.production-capacity-legend .load-low {
    background: var(--color-success-subtle, rgba(25, 135, 84, 0.12));
}

.production-capacity-legend .load-mid {
    background: var(--color-warning-subtle, rgba(255, 193, 7, 0.18));
}

.production-capacity-legend .load-high {
    background: var(--color-danger-subtle, rgba(220, 53, 69, 0.18));
}

/* Rapor ekranı: dört kutu yan yana, seyir tam genişlikte. */
.production-report-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 992px) {
    .production-report-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .production-report-wide {
        grid-column: 1 / -1;
    }
}

.production-pareto-row {
    margin-bottom: 0.625rem;
}

.production-pareto-label {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8125rem;
}

.production-pareto-bar {
    height: 0.5rem;
    margin-top: 0.25rem;
    background: var(--color-surface-muted);
    border-radius: var(--radius-pill, 999px);
    overflow: hidden;
}

.production-pareto-bar > div {
    height: 100%;
    background: var(--color-primary);
}

.production-trend {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 10rem;
}

.production-trend-column {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    height: 100%;
}

.production-trend-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.125rem;
    width: 100%;
    height: 100%;
}

.production-trend-good,
.production-trend-scrap {
    flex: 1 1 0;
    border-radius: 0.25rem 0.25rem 0 0;
}

.production-trend-good {
    background: var(--color-primary);
}

.production-trend-scrap {
    background: var(--color-danger, #b42318);
    opacity: 0.65;
}

.production-trend-label {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

/* ---------------------------------------------------------------------------
   Muhasebe: hesap planı ağacı, fiş satırları, yevmiye defteri
   ---------------------------------------------------------------------------
   Hesap planı bir tablodur ama okunuşu ağaçtır: girinti kodun soluna verilir,
   seviye zemin rengiyle ayrılır. Renk açık tonlarda kalır — üç yüz satırlık
   planda dolgun zemin ekranı okunmaz hale getirir. */
.chart-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.chart-tree {
    overflow-x: auto;
}

.chart-tree table {
    min-width: 60rem;
}

/* Mali tablo aynı ağaç kutusunu kullanır ama iki tabloyu yan yana, kartın
   yarısı genişliğinde taşır. Hesap planının 60rem'lik asgari genişliği orada
   tabloyu karttan taşırıyor ve **tutar kolonu** kayarak görünmez oluyordu:
   bilançoda okunacak tek şey odur. Genişlik kısıtı kalkar, sarması gereken
   hesap adı olur. */
.statement-tree table {
    min-width: 0;
}

/* Tutar hücresi içeriği kadar yer kaplar ve asla sarmaz; artan genişlik ada
   kalır. `width: 1%` tablo düzeninde "içeriğe daral" demektir. */
.statement-tree td:last-child,
.statement-tree th:last-child {
    width: 1%;
    white-space: nowrap;
}

.chart-tree tbody tr {
    cursor: default;
}

.chart-tree tbody tr:hover {
    background: var(--color-surface-hover);
}

.chart-code {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.chart-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
}

.chart-toggle-leaf {
    visibility: hidden;
}

.chart-level-1 > td,
.chart-level-1 > th {
    background: var(--color-surface-muted);
    font-weight: 600;
}

.chart-level-2 > td {
    font-weight: 600;
}

.chart-level-3 > td {
    font-weight: 500;
}

.chart-level-4 > td,
.chart-level-5 > td,
.chart-level-6 > td {
    font-size: 0.8125rem;
}

/* ---------------------- Rapor çıktısı (yazdırma) ----------------------
   Yazdırma başlığı ekranda durmaz: firma, dönem ve tarih aralığı ekranda
   süzgeç çubuğunda zaten yazıyor, kâğıtta ise orası kesilir. */
.report-print-header {
    display: none;
}

@media print {
    /* Kural gövdedeki `report-printing` sınıfına bağlıdır; koşulsuz bir
       `@media print` bloğu uygulamanın bütün ekranlarını etkilerdi, oysa
       istek beş muhasebe raporuna ait. Sınıfı `KarbisReport.print()` takar,
       `afterprint` söker. */
    body.report-printing .app-navbar,
    body.report-printing .app-sidebar,
    body.report-printing .page-header,
    body.report-printing .definition-toolbar,
    body.report-printing .chart-levels,
    body.report-printing .customer-tabs,
    body.report-printing .btn,
    body.report-printing .toast-container,
    body.report-printing .context-menu {
        display: none !important;
    }

    body.report-printing .report-print-header {
        display: block;
        margin-bottom: 0.75rem;
    }

    /* Kabuk ekranda kaydırmalı kutulardan kuruludur; kâğıtta kaydırma yoktur,
       kutuların taşan içeriği görünmez olurdu. */
    body.report-printing .app-shell,
    body.report-printing .app-body,
    body.report-printing .app-main,
    body.report-printing .page-content,
    body.report-printing .definition-page,
    body.report-printing .definition-grid-card,
    body.report-printing .chart-tree,
    body.report-printing .journal-book {
        display: block;
        overflow: visible;
        height: auto;
        max-height: none;
        padding: 0;
        margin: 0;
        border: 0;
        box-shadow: none;
        background: none;
    }

    body.report-printing .chart-tree table {
        min-width: 0;
        width: 100%;
    }

    /* Çok sayfalı defterde kolon başlığı her sayfada tekrar eder. */
    body.report-printing thead {
        display: table-header-group;
    }

    body.report-printing .journal-entry,
    body.report-printing tr {
        break-inside: avoid;
    }

    body.report-printing .table {
        font-size: 0.75rem;
    }

    /* Bilanço ile pasif yan yana basılır: iki sütun tek sayfaya sığar ve
       mali müşavir ikisini karşılaştırarak okur. */
    body.report-printing .row > .col-lg-6 {
        float: left;
        width: 50%;
    }

    @page {
        margin: 12mm;
    }
}

/* Gizli hesap yalnız "gizlileri göster" açıkken listede durur; solgun görünür
   ki hangi satırların normalde orada olmadığı bir bakışta anlaşılsın. */
.chart-row-hidden > td {
    opacity: 0.55;
}

/* Hesap planından bir hesapla açılan mali tabloda aranan satır işaretlenir:
   bilanço yüz satırdır ve kullanıcı hangi hesapla geldiğini kaybeder. */
.chart-row-highlight > td {
    background-color: var(--bs-warning-bg-subtle);
    box-shadow: inset 3px 0 0 var(--bs-warning-border-subtle);
}

/* Fiş satırları yatayda kayar: kolon gizleme açıkken on üç kolon olabiliyor. */
.voucher-lines {
    overflow-x: auto;
}

.voucher-lines table {
    min-width: 64rem;
}

.voucher-lines td {
    padding: 0.25rem 0.375rem;
}

/* Fiş satırındaki para alanları `money-input` taşır: bileşen kendi
   `input-group`'unu getirir ve varsayılan yüksekliği tablo satırını iki katına
   çıkarır. Alan `form-control-sm` ile aynı ölçüye indirilir. */
.voucher-lines .money-input .form-control {
    min-height: calc(1.5em + 0.5rem + 2px);
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

.voucher-totals {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}

/* Yevmiye defteri fiş fiş okunur; her fiş kendi kutusudur. */
.journal-book {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
}

.journal-entry {
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.journal-entry.is-cancelled {
    opacity: 0.65;
}

.journal-entry > header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-muted);
    font-size: 0.8125rem;
}

.journal-no {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.journal-description {
    color: var(--color-text-muted);
}

.journal-total td {
    font-weight: 600;
    border-top: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------------------
   Kalite kontrol
   ---------------------------------------------------------------------------
   Kontrol kartının künyesi: miktar, örnek, ölçülen, uygunsuz. Karar verirken
   bu satır görünür kalmalı. */
.quality-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0.875rem 1rem 1rem;
}

.quality-summary > div {
    display: flex;
    flex-direction: column;
}

.quality-summary-value {
    color: var(--color-text);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
}

.quality-summary-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

/* Tolerans dışı ölçüm satırı: göz taramada bulmalı. */
.quality-row-defect > td {
    background: var(--color-danger-subtle, rgba(220, 53, 69, 0.08));
}

/* Karar paneli modal değildir: karar verirken ölçümler görünür kalır. */
.quality-decision-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.5rem;
}

.quality-decision-option {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.625rem 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 0.75rem);
    cursor: pointer;
}

.quality-decision-option.active {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.quality-decision-option.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.quality-decision-option input {
    display: none;
}

.quality-decision-option span {
    font-weight: 600;
}

.quality-decision-option small {
    color: var(--color-text-muted);
    line-height: 1.3;
}

.quality-decision-values {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0;
}

.quality-decision-values > div {
    display: flex;
    flex-direction: column;
}

.quality-decision-values dt {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 400;
}

.quality-decision-values dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Beyanname
 * ------------------------------------------------------------------------ */

/* Takvim yatayda 12 aya yayılır; dar ekranda tablo kendi içinde kayar. */
.declaration-calendar {
    overflow-x: auto;
}

.declaration-calendar table {
    min-width: 60rem;
}

.declaration-cell {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    width: 100%;
    padding: 0.3rem 0.2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 0.375rem);
    background: var(--color-surface);
    font-size: 0.72rem;
    line-height: 1.1;
    cursor: pointer;
}

.declaration-cell:hover {
    border-color: var(--color-primary);
}

.declaration-cell-status {
    font-weight: 600;
}

.declaration-cell-amount {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Durum rengi hücrenin kendisindedir: takvime bakan kişi rozet okumaz, renk
 * arar. Gelecek dönem soluk, gecikmiş kırmızı. */
.declaration-cell-missing {
    border-style: dashed;
    color: var(--color-text-muted);
}

.declaration-cell-future {
    border-style: dashed;
    opacity: 0.45;
    cursor: default;
}

.declaration-cell-overdue {
    border-color: var(--bs-danger-border-subtle, #f1aeb5);
    background: var(--bs-danger-bg-subtle, #f8d7da);
}

.declaration-cell-draft {
    border-color: var(--bs-secondary-border-subtle, #c4c8cb);
}

.declaration-cell-prepared {
    border-color: var(--bs-warning-border-subtle, #ffe69c);
    background: var(--bs-warning-bg-subtle, #fff3cd);
}

.declaration-cell-approved {
    border-color: var(--bs-info-border-subtle, #9eeaf9);
    background: var(--bs-info-bg-subtle, #cff4fc);
}

.declaration-cell-filed {
    border-color: var(--bs-success-border-subtle, #a3cfbb);
    background: var(--bs-success-bg-subtle, #d1e7dd);
}

.declaration-lines {
    max-height: 28rem;
    overflow: auto;
}

.declaration-lines td,
.declaration-lines th {
    white-space: nowrap;
}

.declaration-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 0.5rem);
    background: var(--color-surface);
}

.declaration-summary > div {
    display: flex;
    flex-direction: column;
}

.declaration-summary span {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.declaration-summary b {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.declaration-summary-payable b {
    color: var(--bs-danger-text-emphasis, #58151c);
}

/*
 * Form sihirbazının adım şeridi.
 *
 * Üç ekranda da aynı görünür ve "neredeyim / kaç adım kaldı" sorusunu
 * cevaplar; tamamlanan adım işaretli, bulunulan adım vurgulu durur.
 */
.bpm-wizard-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0 0 1rem;
    list-style: none;
}

.bpm-wizard-steps li {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.4rem 0.85rem;
    font-size: 0.875rem;
    color: var(--color-text-subtle);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.bpm-wizard-steps li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-subtle);
    background: var(--color-border);
    border-radius: 50%;
}

.bpm-wizard-steps li.current {
    font-weight: 600;
    color: var(--color-text);
    border-color: var(--color-primary, #0d6efd);
}

.bpm-wizard-steps li.current span,
.bpm-wizard-steps li.done span {
    color: #fff;
    background: var(--color-primary, #0d6efd);
}

.bpm-wizard-steps li.done {
    color: var(--color-text);
}

/*
 * Banka yönetimi hesap kartları.
 *
 * Bakiye ve açık ekstre satırı sayısı yan yana durur: "hangi hesapta iş var"
 * sorusu hesabı seçmeden cevaplanır.
 */
.bank-account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.75rem;
}

.bank-account-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
    padding: 0.875rem 1rem;
    text-align: left;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    cursor: pointer;
}

.bank-account-card.active {
    border-color: var(--color-primary, #0d6efd);
    box-shadow: var(--shadow-sm);
}

.bank-account-name {
    display: flex;
    flex-direction: column;
}

.bank-account-name small {
    color: var(--color-text-subtle);
}

.bank-account-balance {
    font-size: 1.15rem;
    font-weight: 600;
}


/* ---------------------------------------------------------------------------
 * Sayaç karosu (stat tile)
 * ------------------------------------------------------------------------ */

/* Şeridin açılış cümlesi: renkli simge + büyük sayı + etiket. Neyin sayıldığını
   simge, ne olduğunu ton söyler. Bir şeritteki karolar **aynı renkte olmaz**;
   ton içeriğe göre seçilir ve modüller arasında anlamı sabit kalır: bekleyen
   sarı, onaylı/yürürlükte yeşil, geciken kırmızı, taslak mavi.

   Karo üç biçimde kullanılır:
     • `<a>`   — başka listeye götüren bağlantı (pano),
     • `<button>` — listeyi süzen düğme; seçili olan `.active` alır ve köşesinde
       tik rozeti taşır,
     • `<div>` — salt sayaç; tıklanmaz, imleç ve gezinme vurgusu almaz.

   Satınalma modülünün yedi ekranı buradadır. Modül dışındaki ekranlar hâlâ
   `.production-count` kullanıyor; ikisi bir arada durabilsin diye ayrı ad
   verildi, eski sınıf değiştirilmedi. */
.stat-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.stat-tile {
    position: relative;
    display: flex;
    flex: 1 1 12rem;
    gap: 0.875rem;
    align-items: center;
    padding: 1rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Karo bağlantı olduğunda da metin rengini korur: mavi altı çizili sayı
   panoyu bağlantı listesine çevirirdi. */
.stat-tile:hover,
.stat-tile:focus-visible {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
}

/* Karo süzgeç olduğunda (listeyi o duruma indiren düğme) seçim iki yerden
   okunur: tek piksellik kenar karonun tonuna döner, sağ üst köşeye tik rozeti
   düşer. Yalnız köşe rozeti bırakılsaydı seçim küçük bir ayrıntıda kalırdı.

   Seçim **yalnız kenar rengiyle** söylenir: ne iç gölge ne de ikinci halka
   vardır. Kalınlık her durumda 1 pikseldir, seçili karo diğerlerinin yanında
   şişmez.

   Gezinme ve odak burada tekrar edilir, çünkü `:hover` kenarı nötr griye
   çekiyor; fareyle seçilen karo imlecin altında kaldığı için tonunu anında
   kaybediyordu. */
.stat-tile.active,
.stat-tile.active:hover,
.stat-tile.active:focus-visible {
    border-color: var(--stat-tile-tone, var(--stat-tone-primary));
}

/* Vurgulu karo: zemini kendi tonuna hafifçe boyanır. Eski ekranlarda bunun
   yerine Bootstrap'ın `*-bg-subtle` renkleri kullanılıyordu; onlar yaklaşık
   %20 doygunlukta ve karo bir uyarı kutusu gibi görünüyordu. Buradaki karışım
   **%6**: kutu şeritten ayrılır ama bağırmaz. Tek sayı bütün tonları yönetir.

   Yalnız gerçekten öne çıkması gereken karoda kullanılır (gecikmiş, itiraz,
   red gibi); her karo vurgulanırsa hiçbiri vurgulanmamış olur. */
.stat-tile[data-emphasis="soft"] {
    border-color: color-mix(in srgb, var(--stat-tile-tone, var(--stat-tone-primary)) 22%, var(--color-border));
    background: color-mix(in srgb, var(--stat-tile-tone, var(--stat-tone-primary)) 6%, var(--color-surface));
}

/* Seçili vurgulu karo yine tam tonlu kenar alır; boyalı zemin kalır. */
.stat-tile[data-emphasis="soft"].active,
.stat-tile[data-emphasis="soft"].active:hover,
.stat-tile[data-emphasis="soft"].active:focus-visible {
    border-color: var(--stat-tile-tone, var(--stat-tone-primary));
}

/* Bilgi karosu tıklanmaz (rapor özetleri, "süresi dolan" gibi salt sayaçlar).
   Etiket yerine öğenin kendisine bakılır: süzgeç karoları `<button>` veya
   `<a>`, salt sayaçlar `<div>`. İmleç ve gezinme vurgusu tıklanabilirlik sözü
   verir, vermemeli. */
div.stat-tile {
    cursor: default;
}

div.stat-tile:hover {
    border-color: var(--color-border);
    box-shadow: none;
}

div.stat-tile[data-emphasis="soft"]:hover {
    border-color: color-mix(in srgb, var(--stat-tile-tone, var(--stat-tone-primary)) 22%, var(--color-border));
}

.stat-tile-check {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 18 × 18 piksel. */
    width: 1.125rem;
    height: 1.125rem;
    border-radius: var(--radius-pill);
    background: var(--stat-tile-tone, var(--stat-tone-primary));
    color: var(--stat-tile-ink, #ffffff);
}

.stat-tile-check svg {
    /* 12 × 12 piksel; bu boyda tik ancak kalın çizgiyle okunur. */
    width: 0.75rem;
    height: 0.75rem;
    stroke-width: 3;
}

.stat-tile-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    /* 52 × 52 piksel. */
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-pill);
    background: var(--stat-tile-tone, var(--stat-tone-primary));
    /* Simge beyaz çizilir; tonlar bunun için canlı ama beyaza karşı en az
       3:1 kalacak koyulukta seçildi (WCAG 1.4.11, metin dışı öğe). */
    color: var(--stat-tile-ink, #ffffff);
}

/* Boy ve kalınlık bileşende durur, çağıran ekranda değil: yirmi ekrana
   yayılırken her sayfanın aynı sayıyı hatırlaması gerekmesin. CSS, `ui-icon`in
   yazdığı width/height/stroke-width niteliklerini ezer. */
.stat-tile-icon svg {
    /* 22 × 22 piksel. */
    width: 1.375rem;
    height: 1.375rem;
    stroke-width: 2.4;
}

.stat-tile-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.125rem;
}

/* Rapor karolarında değer biçimlenmiş tutardır ve uzayabilir; taşmak yerine
   sarar. */
.stat-tile-value {
    overflow-wrap: anywhere;
    color: var(--color-text);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.stat-tile-label {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    line-height: 1.25;
}

.stat-tile[data-tone="primary"] {
    --stat-tile-tone: var(--stat-tone-primary);
}

.stat-tile[data-tone="success"] {
    --stat-tile-tone: var(--stat-tone-success);
}

.stat-tile[data-tone="warning"] {
    --stat-tile-tone: var(--stat-tone-warning);
}

.stat-tile[data-tone="danger"] {
    --stat-tile-tone: var(--stat-tone-danger);
}

.stat-tile[data-tone="info"] {
    --stat-tile-tone: var(--stat-tone-info);
}

.stat-tile[data-tone="violet"] {
    --stat-tile-tone: var(--stat-tone-violet);
}

.stat-tile[data-tone="teal"] {
    --stat-tile-tone: var(--stat-tone-teal);
}

/* Siyah karo iki temada aynı olamaz: aydınlıkta koyu daire beyaz simge, karanlık
   temada açık daire koyu simge ister. Tek tonda mürekkep de çevrilir. */
.stat-tile[data-tone="neutral"] {
    --stat-tile-tone: var(--color-text);
    --stat-tile-ink: var(--color-surface);
}

/* ---------------------------------------------------------------------------
   API Explorer
   ---------------------------------------------------------------------------
   Swagger'ın REST path listesini taklit etmez: Karbis'in gerçek RPC
   sözleşmesini modül → metot olarak gösterir. Üç panel aynı bakışta katalog,
   istek ve cevabı tutar; dar ekranda doğal belge akışına döner. */
.api-explorer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.api-explorer-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 2rem;
    overflow: hidden;
    padding: 1.25rem 1.375rem;
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 90% 15%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 34%),
        linear-gradient(135deg, var(--color-surface), var(--color-primary-soft));
}

.api-explorer-hero-copy {
    max-width: 52rem;
}

.api-explorer-eyebrow,
.api-explorer-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-primary);
    font-size: 0.6875rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.065em;
}

.api-explorer-hero h2 {
    margin: 0.375rem 0 0.25rem;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 750;
}

.api-explorer-hero p,
.api-explorer-request-header p,
.api-explorer-upload p,
.api-explorer-warning p,
.api-explorer-response-placeholder p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.api-explorer-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
    justify-content: flex-end;
}

.api-explorer-hero-actions .btn,
.api-explorer-request-actions .btn,
.api-explorer-upload .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
}

.api-explorer-metrics {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(7rem, 1fr));
    gap: 0.625rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
}

.api-explorer-metrics > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.125rem;
}

.api-explorer-metrics strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.125rem;
}

.api-explorer-metrics span {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.api-explorer-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 20rem;
    color: var(--color-text-muted);
}

.api-explorer-grid {
    display: grid;
    grid-template-columns: minmax(17rem, 0.75fr) minmax(28rem, 1.45fr) minmax(20rem, 0.9fr);
    gap: 1rem;
    align-items: start;
    min-width: 0;
}

.api-explorer-catalog,
.api-explorer-request,
.api-explorer-response {
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
}

.api-explorer-catalog,
.api-explorer-response {
    position: sticky;
    top: 1rem;
    display: flex;
    max-height: calc(100vh - 9rem);
    flex-direction: column;
    overflow: hidden;
}

.api-explorer-request {
    padding: 1rem;
}

.api-explorer-panel-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.api-explorer-panel-header h3 {
    margin: 0.125rem 0 0;
    font-size: 0.9375rem;
}

.api-explorer-count {
    display: inline-flex;
    min-width: 2rem;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-pill);
    color: var(--color-primary);
    background: var(--color-primary-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    font-weight: 700;
}

.api-explorer-filters {
    display: grid;
    flex: 0 0 auto;
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.api-explorer-search {
    position: relative;
    display: block;
    width: 100%;
}

.api-explorer-search > .ui-icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0.75rem;
    color: var(--color-text-subtle);
    transform: translateY(-50%);
    pointer-events: none;
}

.api-explorer-search .form-control {
    padding-left: 2.25rem;
}

.api-explorer-operation-list {
    display: flex;
    min-height: 20rem;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.375rem;
    overflow-y: auto;
    padding: 0.625rem;
}

.api-explorer-operation {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.125rem 0.5rem;
    padding: 0.6875rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: transparent;
    text-align: left;
}

.api-explorer-operation:hover {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
}

.api-explorer-operation.active {
    border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
    background: var(--color-primary-soft);
}

.api-explorer-operation-method {
    overflow: hidden;
    color: var(--color-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.api-explorer-operation strong {
    grid-column: 1 / -1;
    overflow: hidden;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.api-explorer-operation small {
    display: -webkit-box;
    grid-column: 1 / -1;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.api-explorer-action,
.api-explorer-rate,
.api-explorer-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    width: fit-content;
    padding: 0.1875rem 0.5rem;
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    font-size: 0.625rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.api-explorer-operation > .api-explorer-action {
    grid-row: 1;
    grid-column: 2;
}

.api-explorer-action-read,
.api-explorer-action-list {
    color: var(--color-info);
    background: var(--color-info-soft);
}

.api-explorer-action-create {
    color: var(--color-success);
    background: var(--color-success-soft);
}

.api-explorer-action-update {
    color: var(--color-warning);
    background: var(--color-warning-soft);
}

.api-explorer-action-delete {
    color: var(--color-danger);
    background: var(--color-danger-soft);
}

.api-explorer-action-export {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.api-explorer-request-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--color-border);
}

.api-explorer-request-header h3 {
    margin: 0.25rem 0;
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1rem;
}

.api-explorer-request-header h3 span {
    color: var(--color-primary);
}

.api-explorer-badges {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.375rem;
    justify-content: flex-end;
}

.api-explorer-rate {
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
}

.api-explorer-warning {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    margin-top: 0.875rem;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-warning) 38%, var(--color-border));
    border-radius: var(--radius-md);
    color: var(--color-warning);
    background: var(--color-warning-soft);
}

.api-explorer-warning > .ui-icon {
    flex: 0 0 auto;
    margin-top: 0.0625rem;
}

.api-explorer-warning p {
    margin-top: 0.125rem;
    color: currentcolor;
}

.api-explorer-endpoint {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.625rem;
    align-items: center;
    margin-top: 0.875rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
}

.api-explorer-endpoint > span {
    color: var(--color-success);
    font-size: 0.6875rem;
    font-weight: 800;
}

.api-explorer-endpoint code {
    overflow: hidden;
    color: var(--color-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.api-explorer-endpoint button,
.api-explorer-response-toolbar button,
.api-explorer-file-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    color: var(--color-text-muted);
    background: transparent;
    font-size: 0.6875rem;
}

.api-explorer-endpoint button:hover,
.api-explorer-response-toolbar button:hover,
.api-explorer-file-clear:hover {
    color: var(--color-primary);
}

.api-explorer-example {
    overflow: hidden;
    margin-top: 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.api-explorer-example-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.api-explorer-example-title {
    display: flex;
    min-width: 8rem;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.125rem;
}

.api-explorer-example-title strong {
    font-size: 0.8125rem;
}

.api-explorer-example-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.1875rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
}

.api-explorer-example-tab,
.api-explorer-example-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 1.75rem;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: calc(var(--radius-md) - 0.1875rem);
    color: var(--color-text-muted);
    background: transparent;
    font-size: 0.6875rem;
    font-weight: 650;
}

.api-explorer-example-tab:hover,
.api-explorer-example-copy:hover {
    color: var(--color-primary);
}

.api-explorer-example-tab.active {
    color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.api-explorer-example-copy {
    border: 1px solid var(--color-border);
}

.api-explorer-example-note {
    display: flex;
    gap: 0.375rem;
    align-items: flex-start;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-info);
    background: var(--color-info-soft);
    font-size: 0.6875rem;
    line-height: 1.45;
}

.api-explorer-example-note > .ui-icon {
    margin-top: 0.0625rem;
}

.api-explorer-example-code {
    min-height: 12rem;
    max-height: 24rem;
    overflow: auto;
    margin: 0;
    padding: 0.875rem;
    color: var(--color-text);
    background: var(--color-surface-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    line-height: 1.55;
    white-space: pre;
    tab-size: 2;
}

.api-explorer-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.875rem;
}

.api-explorer-editor {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.375rem;
}

.api-explorer-editor > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    font-weight: 700;
}

.api-explorer-editor > span small {
    color: var(--color-text-subtle);
    font-family: var(--font-family-base);
    font-size: 0.625rem;
    font-weight: 500;
}

.api-explorer-editor textarea {
    min-height: 15rem;
    resize: vertical;
    font-size: 0.75rem;
    line-height: 1.55;
    tab-size: 2;
}

.api-explorer-validation {
    color: var(--color-danger);
    font-size: 0.6875rem;
}

.api-explorer-upload {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.875rem;
    padding: 0.75rem;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
}

.api-explorer-upload > div:first-child {
    min-width: 12rem;
    flex: 1 1 14rem;
}

.api-explorer-upload strong {
    font-size: 0.8125rem;
}

.api-explorer-file-clear {
    color: var(--color-danger);
}

.api-explorer-request-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--color-border);
}

.api-explorer-response-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.api-explorer-response-meta span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.125rem;
}

.api-explorer-response-meta small {
    color: var(--color-text-subtle);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.api-explorer-response-meta strong {
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.api-explorer-status.ok {
    color: var(--color-success);
    background: var(--color-success-soft);
}

.api-explorer-status.error {
    color: var(--color-danger);
    background: var(--color-danger-soft);
}

.api-explorer-response-toolbar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.api-explorer-code {
    min-height: 24rem;
    flex: 1 1 auto;
    overflow: auto;
    margin: 0;
    padding: 0.875rem;
    color: var(--color-text);
    background: var(--color-surface-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.api-explorer-response-placeholder,
.api-explorer-empty-large {
    display: flex;
    min-height: 24rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--color-text-subtle);
    text-align: center;
}

.api-explorer-response-placeholder strong {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.api-explorer-empty {
    margin: auto 0;
    padding: 1.5rem;
    color: var(--color-text-subtle);
    font-size: 0.8125rem;
    text-align: center;
}

@media (max-width: 1500px) {
    .api-explorer-grid {
        grid-template-columns: minmax(16rem, 0.7fr) minmax(27rem, 1.3fr);
    }

    .api-explorer-response {
        position: static;
        grid-column: 1 / -1;
        max-height: none;
    }

    .api-explorer-code {
        max-height: 30rem;
    }
}

@media (max-width: 980px) {
    .api-explorer-hero {
        grid-template-columns: 1fr;
    }

    .api-explorer-hero-actions {
        justify-content: flex-start;
    }

    .api-explorer-metrics {
        grid-template-columns: repeat(2, minmax(7rem, 1fr));
    }

    .api-explorer-grid {
        grid-template-columns: 1fr;
    }

    .api-explorer-catalog,
    .api-explorer-response {
        position: static;
        max-height: none;
    }

    .api-explorer-operation-list {
        max-height: 28rem;
    }
}

@media (max-width: 640px) {
    .api-explorer-hero,
    .api-explorer-request {
        padding: 0.875rem;
    }

    .api-explorer-editor-grid {
        grid-template-columns: 1fr;
    }

    .api-explorer-request-header {
        flex-direction: column;
    }

    .api-explorer-badges {
        justify-content: flex-start;
    }
}

/* ---------------------------------------------------------------------------
   Personel kartı: profil fotoğrafı
   ---------------------------------------------------------------------------
   Fotoğraf başlığın sol başında adın önünde durur. Yükleme ve kaldırma
   düğmeleri fotoğrafın alt kenarında gömülü bir şerittir; üzerine gelince ya
   da klavye odağı girince belirir, kart ayrı bir form alanı taşımaz. */
.employee-photo {
    position: relative;
    flex: 0 0 auto;
    width: 5.5rem;
    height: 5.5rem;
    overflow: hidden;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.employee-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employee-photo-initials {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.employee-photo-actions {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    padding: 0.1875rem;
    background: color-mix(in srgb, var(--color-surface) 85%, transparent);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.employee-photo:hover .employee-photo-actions,
.employee-photo:focus-within .employee-photo-actions {
    opacity: 1;
}

.employee-photo-actions .btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
}

/* Tek resim yükleme (`image-upload`): Cropper.js sahnesi. Kırpma çerçevesi
   resmin üzerinde sürüklenip boyutlandırılır; araç çubuğu döndürür,
   yakınlaştırır ve sıfırlar. */
.image-upload-stage {
    height: 22rem;
    max-height: 60vh;
    overflow: hidden;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.image-upload-stage img {
    display: block;
    max-width: 100%;
}

/* İşlem düğmeleri 28 x 28 ve bitişiktir (`btn-group`); simge ortalanır. */
.image-upload-toolbar {
    margin-top: 0.75rem;
}

.image-upload-toolbar .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
}

/* Kişi listelerinde satır avatarı (kadro, kullanıcılar). Fotoğrafsız kayıt baş
   harflerini taşır, hücre boş kalmaz ve satırlar aynı hizada durur. */
.employee-grid-name,
.user-grid-name {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
}

.employee-grid-avatar,
.user-grid-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    object-fit: cover;
}

/*
 * Hesap planı: birinci seviye satırların alt çizgisi.
 *
 * Kural sayfanın içinde `<style>` olarak duruyordu ama orası Vue'nun mount
 * kökünün altındaydı; Vue yan etkili etiketleri (`<style>`, `<script>`)
 * şablondan **sessizce atıyor** ve kural hiç uygulanmıyordu. Ekran çalışıyor
 * göründüğü için de kimse fark etmiyordu.
 */
.chart-level-1 > td,
.chart-level-1 > th {
    border-bottom-color: #dddddd !important;
}

/* ---------------------------------------------------------------------------
   Kayıt ekleri ve büyütme penceresi
   --------------------------------------------------------------------------- */

/* Ek listesi ızgara değil liste: satır sayısı azdır (bir kayıtta üç beş dosya)
   ve kullanıcı adı okumak ister, hücre taramak değil. Küçük resim satırın
   solunda durur; görsel olmayan dosya aynı yerde simgesini gösterir, böylece
   satırlar aynı hizada kalır. */
.record-attachment-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.record-attachment {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.record-attachment-preview {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    overflow: hidden;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border: 0;
    border-radius: var(--bs-border-radius);
}

.record-attachment-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.record-attachment-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

/* Ad bir düğmedir, bağlantı değil: tıklamak sayfayı değiştirmez, dosyayı
   kaydın içinde açar. */
.record-attachment-name {
    padding: 0;
    overflow: hidden;
    color: var(--bs-body-color);
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: none;
    border: 0;
}

.record-attachment-name:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

.media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 92%);
}

.media-lightbox img,
.media-lightbox video {
    max-width: 92vw;
    max-height: 88vh;
}

.media-lightbox iframe {
    width: 92vw;
    height: 88vh;
    background: #fff;
    border: 0;
    border-radius: var(--bs-border-radius);
}

.media-lightbox-close,
.media-lightbox-nav,
.media-lightbox-download {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: #fff;
    background: rgb(255 255 255 / 12%);
    border: 0;
    border-radius: 50%;
}

.media-lightbox-close { top: 1rem; right: 1rem; }
.media-lightbox-download { top: 1rem; right: 4.25rem; }
.media-lightbox-nav.previous { top: 50%; left: 1rem; transform: translateY(-50%); }
.media-lightbox-nav.next { top: 50%; right: 1rem; transform: translateY(-50%); }

.media-lightbox-caption {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    max-width: 55vw;
    overflow: hidden;
    color: #fff;
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.75;
}

/* Gömülemeyen tür için boş çerçeve gösterilmez: pencere ne olduğunu söyler ve
   indirmeyi önerir. */
.media-lightbox-fallback {
    max-width: 24rem;
    padding: 2rem;
    color: var(--bs-body-color);
    text-align: center;
    background: var(--bs-body-bg);
    border-radius: var(--bs-border-radius-lg);
}

/* Müşteri kartındaki talep rozetleri: sayı azdır, satır olarak akar. */
/* Talep kartındaki müşteri bağlantısı.

   Alan bir form alanı hizasında durur ama girdi değil bağlantıdır: içerik
   kadar genişler, satırın soluna yaslanır ve ikon ile metin aynı çizgide
   kalır. */
.lead-customer-link {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    max-width: 100%;
}

.lead-customer-link > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-lead-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Pencere açıkken arkadaki sayfa kaymamalı. */
body.media-lightbox-open {
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   İş (proje) kartı
   ---------------------------------------------------------------------------
   Kart iki sütuna dizilir ve her sütun bir bölümdür. Etiket sütunu ziyaret
   kartındakiyle aynı genişlikte durur: "Teslim Süresi (gün)" ve "Avans /
   Teminat %" gibi etiketler iki satıra kırılmasın. */
.project-card {
    --label-width: 10rem;
}

/* Sütunlar dar ekranda alt alta iner; etiket de girdinin üstüne geçer
   (`field-row` medya kuralı). Yükseklik eşitlemesi yalnız yan yanayken
   anlamlıdır. */
@media (max-width: 75rem) {
    .project-card .customer-card {
        height: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   Proje referans sayfası (`/project/<iş>`)
   ---------------------------------------------------------------------------
   Oturumsuz sayfaların dar kartı burada yetmez: solda galeri, sağda künye
   yan yana okunur. Referans bir vitrindir — fotoğraf küçüldüğünde işi
   anlatmaz. */
.reference-nav {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.reference-columns {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 1.5rem;
    align-items: start;
}

.reference-gallery {
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.75rem;
}

/* Kapak bir düğmedir (tıklanınca büyür) ama görsel gibi görünmeli. */
.reference-cover-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.reference-cover {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.375rem;
}

/* Büyütme penceresi: görsel ekranı kaplar, gezinme okları kenarlarda durur. */
.reference-lightbox {
    width: min(96vw, 80rem);
    max-width: none;
    max-height: 94vh;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
}

.reference-lightbox::backdrop {
    background: rgb(0 0 0 / 80%);
}

.reference-lightbox-image {
    display: block;
    width: 100%;
    max-height: 94vh;
    object-fit: contain;
    border-radius: 0.375rem;
}

.reference-lightbox-step,
.reference-lightbox-close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / 55%);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.reference-lightbox-close {
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1.25rem;
}

.reference-lightbox-step {
    top: 50%;
    transform: translateY(-50%);
}

.reference-lightbox-previous {
    left: 0.5rem;
}

.reference-lightbox-next {
    right: 0.5rem;
}

.reference-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Küçük görsel bir düğmedir: büyüğünü değiştirir, sayfayı yeniden yüklemez. */
.reference-thumb {
    padding: 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    background: none;
    cursor: pointer;
}

.reference-thumb img {
    display: block;
    width: 8rem;
    height: 5.5rem;
    object-fit: cover;
    border-radius: 0.25rem;
}

.reference-title {
    margin: 0 0 1rem;
    color: var(--color-primary);
    font-size: 1.0625rem;
    font-weight: 600;
}

/* Künye iki sütunlu bir listedir ve satırları çizgiyle ayrılır: ekteki
   referans sayfasının okunma biçimi budur. */
.reference-list {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    margin: 0;
}

.reference-list dt,
.reference-list dd {
    margin: 0;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.8125rem;
}

.reference-list dt {
    font-weight: 600;
}

.reference-summary {
    margin: 1rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.reference-share {
    margin-top: 1.25rem;
}

/* Paylaşım penceresi tarayıcının kendi `<dialog>` öğesidir: bu sayfada Vue
   yok, ek bir kütüphane de istemez. */
.reference-dialog {
    width: min(26rem, calc(100vw - 2rem));
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 0.5rem);
    background: var(--color-surface);
    color: var(--color-text);
}

.reference-dialog::backdrop {
    background: rgb(0 0 0 / 45%);
}

.reference-dialog-title {
    margin: 0 0 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.reference-dialog-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.reference-dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

/* Dar ekranda künye galerinin altına iner; iki sütun okunmaz oluyordu. */
@media (max-width: 62rem) {
    .reference-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}