/**
 * Slipvise bileşenleri
 *
 * Bootstrap 4.6 bileşenlerini tasarım değişkenlerine (tokens.css) bağlar ve panel
 * görünümlerinde kullanılan AdminLTE sınıfları (small-box, info-box, callout, card-tools...)
 * için uyumluluk stilleri sağlar. AdminLTE CSS'i artık yüklenmez.
 *
 * Kurallar:
 * - Renkler yalnızca var(--sv-*) ile verilir; koyu tema değişkenlerle kendiliğinden gelir.
 * - Ölçüler Figma'daki web paneli çizimlerinden gelir: kart 20px köşe + hafif gölge (kenarlıksız),
 *   gövde yazısı 16px/400, başlıklar 600-700 (800 kullanılmaz), düğme ve form alanı 40px.
 * - Limon yalnızca küçük alanlarda doludur (ikon kutusu, nokta, rozet, seçili sekme).
 * - Birincil eylem mürekkep siyahıdır. Durum renkleri canlıdır: rozet ve uyarılarda açık ton
 *   zemin + canlı metin, küçük ikon kutularında dolu renk.
 * - Tablo satırlarındaki düğmeler zeminsizdir; renk yalnızca ikonda/metinde kalır.
 * - Hareket: "Hareket" bölümündeki sınıflar kullanılır; sayfaya özel animasyon yazılmaz.
 */

/* ==========================================================================
   1. Temel
   ========================================================================== */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--sv-font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--sv-text);
    background-color: var(--sv-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 700;
    line-height: 1.25;
    color: inherit;
    text-wrap: balance;
}

h1, .h1 { font-size: 1.5rem; }
h2, .h2 { font-size: 1.375rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }

a {
    color: var(--sv-link);
    text-decoration: none;
}

a:hover {
    color: var(--sv-link-hover);
    text-decoration: underline;
}

/* Metin içi bağlantılar (sınıfsız): siyah metin + limon alt çizgi */
a[href]:not([class]) {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--sv-link-line);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

a[href]:not([class]):hover {
    text-decoration-color: currentColor;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none;
}

hr {
    border-top-color: var(--sv-border);
}

small, .small {
    font-size: 0.8125rem;
}

b, strong {
    font-weight: 700;
}

code {
    font-family: var(--sv-font-mono);
    font-size: 0.85em;
    color: var(--sv-text);
    background-color: var(--sv-surface-2);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

pre {
    font-family: var(--sv-font-mono);
    color: var(--sv-text);
    background-color: var(--sv-surface-2);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
    padding: 0.75rem 1rem;
}

pre code {
    background: none;
    padding: 0;
}

::selection {
    background-color: var(--sv-lime);
    color: var(--sv-contrast);
}

:focus-visible {
    outline: 2px solid var(--sv-focus);
    outline-offset: 2px;
}

[hidden] {
    display: none !important;
}

.sv-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    stroke-width: 2;
    vertical-align: -0.2em;
}

/*
 * Marka logoları (sv_logo / svLogo; Config\Icons::$logos). Yalnızca markanın kendisini anlatırken
 * kullanılır ve renkleri değiştirilmez; boyutları çizgi ikonlarla aynıdır.
 */
.sv-logo {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    vertical-align: -0.2em;
}

.sv-logo--whatsapp {
    color: var(--sv-brand-whatsapp);
}

.sv-logo--android {
    color: var(--sv-brand-android);
}

.sv-logo--apple,
.sv-logo--googleplay {
    color: var(--sv-text);
}

/* Etiket ve alan adı içindeki logo: metinden biraz küçük */
.sv-tag > .sv-logo,
label > .sv-logo {
    width: 14px;
    height: 14px;
    margin-right: 4px;
}

/* Sayılar sütunlarda hizalı dursun */
.table, .info-box-number, .small-box h3, .badge, .progress-bar {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   2. Yardımcı sınıflar (Bootstrap + AdminLTE uyumluluğu)
   ========================================================================== */

.text-muted { color: var(--sv-text-muted) !important; }
.text-body, .text-dark { color: var(--sv-text) !important; }
.text-primary { color: var(--sv-text) !important; }
.text-secondary { color: var(--sv-text-muted) !important; }
.text-success { color: var(--sv-success) !important; }
.text-danger { color: var(--sv-danger) !important; }
.text-warning { color: var(--sv-warning) !important; }
.text-info { color: var(--sv-info) !important; }
.text-light { color: var(--sv-text-subtle) !important; }

.text-xs { font-size: 0.75rem !important; }
.text-sm { font-size: 0.875rem !important; }
.text-md { font-size: 1rem !important; }
.text-lg { font-size: 1.125rem !important; }
.text-bold { font-weight: 700 !important; }

.bg-white { background-color: var(--sv-surface) !important; }
.bg-light { background-color: var(--sv-surface-2) !important; color: var(--sv-text); }
.bg-primary, .bg-dark { background-color: var(--sv-contrast) !important; color: var(--sv-on-contrast); }
.bg-secondary { background-color: var(--sv-text-muted) !important; color: var(--sv-surface); }
.bg-success { background-color: var(--sv-success-solid) !important; color: var(--sv-on-solid); }
.bg-danger { background-color: var(--sv-danger-solid) !important; color: var(--sv-on-solid); }
.bg-info { background-color: var(--sv-info-solid) !important; color: var(--sv-on-solid); }
.bg-warning { background-color: var(--sv-warning-solid) !important; color: var(--sv-contrast); }

.border,
.border-top,
.border-right,
.border-bottom,
.border-left {
    border-color: var(--sv-border) !important;
}

.border-primary { border-color: var(--sv-ink) !important; }
.border-success { border-color: var(--sv-success-border) !important; }
.border-danger { border-color: var(--sv-danger-border) !important; }
.border-warning { border-color: var(--sv-warning-border) !important; }
.border-info { border-color: var(--sv-info-border) !important; }

.rounded { border-radius: var(--sv-radius-sm) !important; }
.rounded-lg { border-radius: var(--sv-radius) !important; }
.shadow-sm { box-shadow: var(--sv-shadow-sm) !important; }
.shadow { box-shadow: var(--sv-shadow) !important; }
.shadow-lg { box-shadow: var(--sv-shadow-lg) !important; }

.elevation-1, .elevation-2 { box-shadow: var(--sv-shadow-sm) !important; }
.elevation-3, .elevation-4 { box-shadow: var(--sv-shadow) !important; }

.img-circle { border-radius: 50%; }

/* ==========================================================================
   3. Düğmeler
   Her çeşit kendi değişkenlerini tanımlar; durum kuralları ortaktır.
   ========================================================================== */

.btn {
    --btn-bg: transparent;
    --btn-fg: var(--sv-text);
    --btn-bd: transparent;
    --btn-hover-bg: var(--sv-surface-2);
    --btn-hover-fg: var(--sv-text);
    --btn-hover-bd: transparent;
    --btn-active-bg: var(--sv-surface-3);

    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 0.53125rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--sv-radius-sm);
    transition: background-color var(--sv-dur-fast) ease, border-color var(--sv-dur-fast) ease, color var(--sv-dur-fast) ease, box-shadow var(--sv-dur-fast) ease;
}

.btn {
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    border-color: var(--btn-bd);
    box-shadow: none;
}

.btn:hover {
    background-color: var(--btn-hover-bg);
    color: var(--btn-hover-fg);
    border-color: var(--btn-hover-bd);
    text-decoration: none;
}

.btn:focus,
.btn.focus {
    background-color: var(--btn-hover-bg);
    color: var(--btn-hover-fg);
    border-color: var(--btn-hover-bd);
    box-shadow: none;
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--sv-focus-ring);
}

.btn:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled).active,
.show > .btn.dropdown-toggle {
    background-color: var(--btn-active-bg);
    color: var(--btn-hover-fg);
    border-color: var(--btn-hover-bd);
    box-shadow: none;
}

.btn:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled).active:focus,
.show > .btn.dropdown-toggle:focus {
    box-shadow: none;
}

.btn.disabled,
.btn:disabled {
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    border-color: var(--btn-bd);
    opacity: 0.5;
}

/* Düğme içindeki çizgi ikon: 16px, metinle arası 8px (çizimdeki "Kabul Et" düğmesi) */
.btn > .sv-icon,
.btn > .sv-logo {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: -3px;
}

/* Birincil: mürekkep siyahı (koyu temada limon) */
.btn-primary,
.btn-dark {
    --btn-bg: var(--sv-primary-bg);
    --btn-fg: var(--sv-primary-fg);
    --btn-bd: var(--sv-primary-bg);
    --btn-hover-bg: var(--sv-primary-hover);
    --btn-hover-fg: var(--sv-primary-fg);
    --btn-hover-bd: var(--sv-primary-hover);
    --btn-active-bg: var(--sv-primary-hover);
}

/* İkincil: beyaz zemin + kenarlık */
.btn-secondary,
.btn-default,
.btn-light,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-light {
    --btn-bg: var(--sv-surface);
    --btn-fg: var(--sv-text);
    --btn-bd: var(--sv-border-strong);
    --btn-hover-bg: var(--sv-surface-2);
    --btn-hover-fg: var(--sv-text);
    --btn-hover-bd: var(--sv-border-strong);
    --btn-active-bg: var(--sv-surface-3);
}

/* Bilgi düğmesi: nötr çerçeveli; üstüne gelince limon tonu */
.btn-info {
    --btn-bg: var(--sv-surface);
    --btn-fg: var(--sv-text);
    --btn-bd: var(--sv-border-strong);
    --btn-hover-bg: var(--sv-lime-soft);
    --btn-hover-fg: var(--sv-lime-ink);
    --btn-hover-bd: var(--sv-lime-border);
    --btn-active-bg: var(--sv-lime-border);
}

.btn-success {
    --btn-bg: var(--sv-success-soft);
    --btn-fg: var(--sv-success);
    --btn-bd: transparent;
    --btn-hover-bg: var(--sv-success-border);
    --btn-hover-fg: var(--sv-success);
    --btn-active-bg: var(--sv-success-border);
}

.btn-warning {
    --btn-bg: var(--sv-warning-soft);
    --btn-fg: var(--sv-warning);
    --btn-bd: transparent;
    --btn-hover-bg: var(--sv-warning-border);
    --btn-hover-fg: var(--sv-warning);
    --btn-active-bg: var(--sv-warning-border);
}

.btn-danger {
    --btn-bg: var(--sv-danger-soft);
    --btn-fg: var(--sv-danger);
    --btn-bd: transparent;
    --btn-hover-bg: var(--sv-danger-border);
    --btn-hover-fg: var(--sv-danger);
    --btn-active-bg: var(--sv-danger-border);
}

.btn-outline-primary {
    --btn-bg: transparent;
    --btn-fg: var(--sv-text);
    --btn-bd: var(--sv-ink);
    --btn-hover-bg: var(--sv-primary-bg);
    --btn-hover-fg: var(--sv-primary-fg);
    --btn-hover-bd: var(--sv-primary-bg);
    --btn-active-bg: var(--sv-primary-hover);
}

.btn-outline-info {
    --btn-bg: transparent;
    --btn-fg: var(--sv-text);
    --btn-bd: var(--sv-border-strong);
    --btn-hover-bg: var(--sv-lime-soft);
    --btn-hover-fg: var(--sv-lime-ink);
    --btn-hover-bd: var(--sv-lime-border);
    --btn-active-bg: var(--sv-lime-border);
}

.btn-outline-success {
    --btn-bg: transparent;
    --btn-fg: var(--sv-success);
    --btn-bd: var(--sv-success-border);
    --btn-hover-bg: var(--sv-success-soft);
    --btn-hover-fg: var(--sv-success);
    --btn-hover-bd: var(--sv-success-border);
    --btn-active-bg: var(--sv-success-border);
}

.btn-outline-warning {
    --btn-bg: transparent;
    --btn-fg: var(--sv-warning);
    --btn-bd: var(--sv-warning-border);
    --btn-hover-bg: var(--sv-warning-soft);
    --btn-hover-fg: var(--sv-warning);
    --btn-hover-bd: var(--sv-warning-border);
    --btn-active-bg: var(--sv-warning-border);
}

.btn-outline-danger {
    --btn-bg: transparent;
    --btn-fg: var(--sv-danger);
    --btn-bd: var(--sv-danger-border);
    --btn-hover-bg: var(--sv-danger-soft);
    --btn-hover-fg: var(--sv-danger);
    --btn-hover-bd: var(--sv-danger-border);
    --btn-active-bg: var(--sv-danger-border);
}

.btn-link {
    --btn-bg: transparent;
    --btn-fg: var(--sv-link);
    --btn-hover-bg: transparent;
    --btn-hover-fg: var(--sv-link-hover);
    --btn-active-bg: transparent;
}

.btn-link:hover {
    text-decoration: underline;
}

/*
 * Tablo satırlarındaki düğmeler zeminsizdir: önce veri okunur, eylem üstüne gelince belirir.
 * Renk yalnızca ikonda/metinde kalır (sil kırmızı, onayla yeşil...).
 */
td .btn {
    --btn-bg: transparent;
    --btn-fg: var(--sv-text);
    --btn-bd: transparent;
    --btn-hover-bg: var(--sv-surface-2);
    --btn-hover-fg: var(--sv-text);
    --btn-hover-bd: transparent;
    --btn-active-bg: var(--sv-surface-3);
}

td .btn-success,
td .btn-outline-success {
    --btn-fg: var(--sv-success);
    --btn-hover-bg: var(--sv-success-soft);
    --btn-hover-fg: var(--sv-success);
    --btn-active-bg: var(--sv-success-border);
}

td .btn-warning,
td .btn-outline-warning {
    --btn-fg: var(--sv-warning);
    --btn-hover-bg: var(--sv-warning-soft);
    --btn-hover-fg: var(--sv-warning);
    --btn-active-bg: var(--sv-warning-border);
}

td .btn-danger,
td .btn-outline-danger {
    --btn-fg: var(--sv-danger);
    --btn-hover-bg: var(--sv-danger-soft);
    --btn-hover-fg: var(--sv-danger);
    --btn-active-bg: var(--sv-danger-border);
}

td .btn-group > .btn {
    border-radius: var(--sv-radius-sm) !important;
}

td .btn-group {
    gap: 2px;
}

/* Onay penceresindeki silme düğmesi belirgin olmalı: dolu kırmızı (beyaz yazı her temada okunur) */
.modal-footer .btn-danger {
    --btn-bg: var(--sv-danger-fill);
    --btn-fg: var(--sv-on-solid);
    --btn-bd: var(--sv-danger-fill);
    --btn-hover-bg: var(--sv-danger-fill-hover);
    --btn-hover-fg: var(--sv-on-solid);
    --btn-hover-bd: var(--sv-danger-fill-hover);
    --btn-active-bg: var(--sv-danger-fill-hover);
}

/* Kart başlığındaki küçük araç düğmesi */
.btn-tool {
    --btn-fg: var(--sv-text-subtle);
    --btn-hover-fg: var(--sv-text);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    margin: -0.25rem 0;
}

.btn-lg,
.btn-group-lg > .btn {
    padding: 0.7rem 1.25rem;
    font-size: 1rem;
    border-radius: var(--sv-radius-sm);
}

.btn-sm,
.btn-group-sm > .btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.8125rem;
    border-radius: var(--sv-radius-sm);
}

.btn-xs {
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    border-radius: var(--sv-radius-xs);
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.close {
    color: var(--sv-text-muted);
    text-shadow: none;
    opacity: 1;
    font-weight: 400;
}

.close:hover,
.close:not(:disabled):not(.disabled):hover,
.close:not(:disabled):not(.disabled):focus {
    color: var(--sv-text);
    opacity: 1;
}

/* ==========================================================================
   4. Kartlar
   ========================================================================== */

/* Çizimdeki kart: beyaz, 20px köşe, hafif gölge, kenarlıksız, 24px iç boşluk */
.card {
    background-color: var(--sv-surface);
    color: var(--sv-text);
    border: 1px solid var(--sv-card-border);
    border-radius: var(--sv-radius-lg);
    box-shadow: var(--sv-card-shadow);
    margin-bottom: var(--sv-gap);
}

/* Başlık ile içerik çizgiyle değil boşlukla ayrılır */
.card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 1.25rem 1.5rem;
    background-color: transparent;
    border-bottom: 0;
    color: var(--sv-text);
}

.card-header:first-child {
    border-radius: calc(var(--sv-radius-lg) - 1px) calc(var(--sv-radius-lg) - 1px) 0 0;
}

.card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.card-header > .card-title {
    flex: 1 1 auto;
    min-width: 0;
}

.card-header > .card-tools,
.card-header > .float-right,
.card-header > .ml-auto {
    margin-left: auto;
    float: none;
}

.card-tools {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.card-body {
    padding: 1.5rem;
}

.card-header + .card-body {
    padding-top: 0.25rem;
}

.card-body.p-0 .table {
    margin-bottom: 0;
}

/*
 * Kenarsız (p-0) tablo kartı: satırların zemini kartın yuvarlak köşesinden taşmasın diye
 * tablo kenarlardan 8px içeride durur.
 */
.card-body.p-0 {
    padding: 0 0.5rem 0.5rem !important;
}

.card-body.p-0:first-child {
    padding-top: 0.5rem !important;
}

.card-footer {
    padding: 1rem 1.5rem;
    background-color: transparent;
    border-top: 1px solid var(--sv-border);
}

/*
 * Kart içindeki kart ve özet kutuları: gölge üst üste binmesin diye ince çizgili ve küçük köşeli olur.
 */
.card .card,
.card .info-box,
.card .small-box,
.modal-content .card,
.modal-content .info-box,
.modal-content .small-box {
    border-color: var(--sv-border);
    border-radius: var(--sv-radius);
    box-shadow: none;
}

.card .card > .card-header:first-child {
    border-radius: calc(var(--sv-radius) - 1px) calc(var(--sv-radius) - 1px) 0 0;
}

/* Yüksek karşıtlık kipinde gölge görünmez; kart kenarı çizgiyle belirir */
@media (forced-colors: active) {
    .card,
    .info-box,
    .small-box {
        border-color: CanvasText;
    }
}

.card-footer:last-child {
    border-radius: 0 0 calc(var(--sv-radius-lg) - 1px) calc(var(--sv-radius-lg) - 1px);
}

/* Renkli kart başlıkları yumuşak tona döner */
.card-header.bg-primary,
.card-header.bg-info,
.card-header.bg-dark {
    background-color: var(--sv-lime-softer) !important;
    color: var(--sv-text);
}

.card-header.bg-success {
    background-color: var(--sv-success-soft) !important;
    color: var(--sv-success);
}

.card-header.bg-warning {
    background-color: var(--sv-warning-soft) !important;
    color: var(--sv-warning);
}

.card-header.bg-danger {
    background-color: var(--sv-danger-soft) !important;
    color: var(--sv-danger);
}

.card-header.bg-secondary {
    background-color: var(--sv-neutral-soft) !important;
    color: var(--sv-text);
}

.card-header[class*="bg-"].text-white,
.card-header[class*="bg-"] .text-white {
    color: inherit !important;
}

.card.bg-light {
    box-shadow: none;
}

/* data-card-widget="collapse" (app.js) */
.card.collapsed-card > .card-body,
.card.collapsed-card > .card-footer {
    display: none;
}

.card.collapsed-card > .card-header {
    border-radius: calc(var(--sv-radius-lg) - 1px);
}

/* Kart üstü yükleniyor katmanı */
.card > .overlay,
.overlay-wrapper > .overlay,
.info-box > .overlay,
.small-box > .overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background-color: var(--sv-surface);
    opacity: 0.8;
    color: var(--sv-text-muted);
}

/* ==========================================================================
   5. Sayfa başlığı ve gezinti izi
   ========================================================================== */

.content-header {
    padding: 0 0 var(--sv-gap);
}

.content-header .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.content-header .row {
    align-items: center;
}

.content-header .row.mb-2 {
    margin-bottom: 0 !important;
}

/* Sayfa adı çizimde küçük ve sadedir (16px/400); konumu zaten yan menü gösterir */
.content-header h1 {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.content-header h1 > small {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sv-text-muted);
    margin-left: 0.5rem;
}

.breadcrumb {
    margin: 0;
    padding: 0;
    background-color: transparent;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Sayfa başlığında gezinti izi gösterilmez: konumu yan menü ve bölüm sekmeleri zaten gösterir */
.content-header .breadcrumb {
    display: none;
}

.breadcrumb-item a,
.breadcrumb-item a[href]:not([class]) {
    font-weight: 600;
    color: var(--sv-text-muted);
    text-decoration: none;
}

.breadcrumb-item a:hover,
.breadcrumb-item a[href]:not([class]):hover {
    color: var(--sv-text);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--sv-text-subtle);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--sv-border-strong);
}

/* ==========================================================================
   5b. Sayfa eylemleri ve filtre paneli
   Önce bilgi: filtreler kapalı gelir, sayfa başlığındaki ikon düğmesiyle açılır (app.js).
   Görünümde filtre kutusuna `sv-filters` sınıfı ve `hidden` özniteliği vermek yeterlidir.
   ========================================================================== */

.content-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 1rem;
}

/* Form sayfalarında başlıktaki düğmeler formun sağ kenarıyla hizalı (form kartı 880px) */
.content-header:has(+ .sv-formcard:not(.sv-formcard--wide)) {
    max-width: 880px;
}

.content-header > .container-fluid {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

.sv-page-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
    /* 40px'lik düğmeler başlık satırını (24px) yükseltmez; içerik her sayfada aynı yerden başlar */
    margin: -8px 0 -8px auto;
}

.sv-page-actions--standalone {
    justify-content: flex-end;
    margin: 0 0 0.75rem auto;
}

.sv-filter-toggle,
.sv-guide-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--sv-text);
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius-sm);
    cursor: pointer;
    transition: background-color var(--sv-dur-fast) ease, border-color var(--sv-dur-fast) ease, color var(--sv-dur-fast) ease;
}

.sv-filter-toggle:hover,
.sv-guide-toggle:hover {
    background-color: var(--sv-surface-2);
}

.sv-filter-toggle[aria-expanded="true"],
.sv-guide-toggle[aria-expanded="true"] {
    color: var(--sv-primary-fg);
    background-color: var(--sv-primary-bg);
    border-color: var(--sv-primary-bg);
}

.sv-filter-toggle:focus-visible,
.sv-guide-toggle:focus-visible {
    outline: none;
    box-shadow: var(--sv-focus-ring);
}

/* Uygulanmış filtre sayısı */
.sv-filter-toggle__count {
    position: absolute;
    top: -7px;
    right: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sv-contrast);
    background-color: var(--sv-lime);
    border-radius: var(--sv-radius-pill);
    box-shadow: 0 0 0 2px var(--sv-bg);
}

/* Panel kapalıyken uygulanmış filtrelerin özeti */
.sv-filter-summary {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.sv-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--sv-lime-ink);
    background-color: var(--sv-lime-soft);
    border: 0;
    border-radius: var(--sv-radius-xs);
    cursor: pointer;
}

.sv-filter-chip > span {
    font-weight: 400;
    opacity: 0.75;
}

.sv-filter-chip:hover {
    background-color: var(--sv-lime-border);
}

/* Eski "Filtreler" kart başlığı panelde gösterilmez */
.sv-filters > .card-header {
    display: none;
}

.sv-filters .form-group {
    margin-bottom: 0.75rem;
}

/* ==========================================================================
   6. Formlar
   ========================================================================== */

label {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--sv-text-body);
    margin-bottom: 0.375rem;
}

.form-check-label,
.custom-control-label {
    font-size: 0.875rem;
    font-weight: 400;
}

.form-control,
.custom-select {
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--sv-text);
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius-sm);
    box-shadow: none;
    transition: border-color var(--sv-dur-fast) ease, box-shadow var(--sv-dur-fast) ease, background-color var(--sv-dur-fast) ease;
}

.form-control:hover:not(:focus):not(:disabled):not([readonly]),
.custom-select:hover:not(:focus):not(:disabled) {
    border-color: var(--sv-text-subtle);
}

.form-control:focus,
.custom-select:focus {
    color: var(--sv-text);
    background-color: var(--sv-surface);
    border-color: var(--sv-focus);
    box-shadow: 0 0 0 1px var(--sv-focus);
    outline: none;
}

.form-control::placeholder {
    color: var(--sv-text-subtle);
    opacity: 1;
}

.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
    background-color: var(--sv-surface-2);
    border-color: var(--sv-border);
    color: var(--sv-text-muted);
    opacity: 1;
}

textarea.form-control,
select.form-control[multiple],
select.form-control[size] {
    height: auto;
}

select.form-control:not([multiple]):not([size]),
.custom-select {
    -webkit-appearance: none;
    appearance: none;
    background-image: var(--sv-select-arrow);
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 16px 16px;
    padding-right: 2rem;
}

select.form-control option,
.custom-select option {
    color: var(--sv-text);
    background-color: var(--sv-surface);
}

.form-control-sm,
.custom-select-sm {
    height: calc(1.5em + 0.6rem + 2px);
    padding: 0.3rem 0.6rem;
    font-size: 0.8125rem;
    border-radius: var(--sv-radius-sm);
}

select.form-control-sm:not([multiple]):not([size]),
.custom-select-sm {
    padding-right: 1.6rem;
    background-position: right 0.4rem center;
    background-size: 14px 14px;
}

.form-control-lg {
    height: calc(1.5em + 1.4rem + 2px);
    padding: 0.7rem 1rem;
    font-size: 1rem;
    border-radius: var(--sv-radius-sm);
}

.form-control-plaintext {
    color: var(--sv-text);
}

/* Alan altı açıklaması: etiketten soluk, alanın 6px altında */
.form-text {
    margin-top: 6px;
    font-size: 0.8125rem;
    line-height: 18px;
    color: var(--sv-text-muted);
}

.form-group {
    margin-bottom: 1rem;
}

.input-group-text {
    font-size: 0.875rem;
    color: var(--sv-text-muted);
    background-color: var(--sv-surface-2);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius-sm);
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.custom-select.is-invalid {
    border-color: var(--sv-danger-solid);
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: var(--sv-danger-solid);
    box-shadow: 0 0 0 3px var(--sv-danger-soft);
}

.form-control.is-valid,
.was-validated .form-control:valid,
.custom-select.is-valid {
    border-color: var(--sv-success-solid);
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    border-color: var(--sv-success-solid);
    box-shadow: 0 0 0 3px var(--sv-success-soft);
}

.invalid-feedback {
    font-size: 0.8125rem;
    color: var(--sv-danger);
}

.valid-feedback {
    font-size: 0.8125rem;
    color: var(--sv-success);
}

/* Onay kutusu, seçenek düğmesi, anahtar */
.form-check-input,
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--sv-primary-bg);
}

.custom-control-label::before {
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border-strong);
}

/* İşaretsiz kutu beyaz zeminde de seçilir (açık gri kenar 1,5:1 kalıyordu) */
.custom-control-input:not(:checked) ~ .custom-control-label::before {
    border-color: var(--sv-text-subtle);
}

/* Seçim yapılmamış açılır kutu ("Seçin…") yer tutucu tonunda; seçilen değer koyu */
select.form-control:has(> option[value=""]:checked),
select.custom-select:has(> option[value=""]:checked) {
    color: var(--sv-text-subtle);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: var(--sv-focus-ring);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--sv-focus);
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    color: var(--sv-primary-fg);
    border-color: var(--sv-primary-bg);
    background-color: var(--sv-primary-bg);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: var(--sv-check-mark);
    background-size: 62% 62%;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: radial-gradient(circle, var(--sv-primary-fg) 0 32%, transparent 36%);
}

.custom-control-input:disabled ~ .custom-control-label {
    color: var(--sv-text-subtle);
}

.custom-control-input:disabled ~ .custom-control-label::before {
    background-color: var(--sv-surface-3);
}

.custom-switch .custom-control-input:not(:checked) ~ .custom-control-label::before {
    border-color: var(--sv-text-subtle);
}

.custom-switch .custom-control-label::after {
    background-color: var(--sv-text-subtle);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: var(--sv-primary-fg);
}

.custom-file-label {
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--sv-text-muted);
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius-sm);
}

.custom-file-label::after {
    content: "Gözat";
    height: calc(2.5rem - 2px);
    padding: 0.5rem 0.75rem;
    color: var(--sv-text);
    background-color: var(--sv-surface-2);
    border-left: 1px solid var(--sv-border-strong);
}

.custom-file,
.custom-file-input {
    height: 2.5rem;
}

.custom-range::-webkit-slider-thumb { background-color: var(--sv-primary-bg); }
.custom-range::-moz-range-thumb { background-color: var(--sv-primary-bg); }
.custom-range::-webkit-slider-runnable-track { background-color: var(--sv-surface-3); }
.custom-range::-moz-range-track { background-color: var(--sv-surface-3); }

/* ==========================================================================
   7. Tablolar
   Bütün tablolar aynı görünür (Figma "Kullanıcılar" çizimi): soluk başlık satırı (46px), 60px
   satırlar, sırayla beyaz ve soluk zemin, satır çizgisi yok, ortalanmış 14px metin. Satırdaki
   işlemler ortak ikon düğme ailesidir (sv-action, bölüm 21). Uzun metinli bir kolon `text-left`
   ile sola alınabilir. Anahtar/değer tabloları (satır başlığı <th> olan satırlar, .table-sm,
   .table-borderless) sıkışık ve sola yaslıdır.
   ========================================================================== */

.table {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 22px;
    color: var(--sv-text);
}

/*
 * DataTables hücreleri content-box yapar (table.dataTable td); ölçüler çizimdeki gibi kalsın diye
 * aynı özgüllükte border-box'a alınır.
 */
table.table th,
table.table td {
    box-sizing: border-box;
}

/* Ortalanmış kolonlar (DataTables başlıkları sola yaslar; seçici ondan özgül olmalı) */
table.table > thead > tr > th,
table.table > tbody > tr > td {
    text-align: center;
}

.table th,
.table td {
    padding: 8px 12px;
    vertical-align: middle;
    border-top: 0;
}

.table thead th {
    height: 46px;
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--sv-text-muted);
    background-color: var(--sv-table-head);
    border-bottom: 1px solid var(--sv-border);
    white-space: nowrap;
}

.table tbody td {
    height: 60px;
}

.table tbody tr:nth-of-type(even) > * {
    background-color: var(--sv-row-stripe);
}

.table tbody + tbody {
    border-top: 0;
}

/* Bootstrap'in kenarlıklı, çizgili ve üstüne gelme hâlleri ortak görünüme uyar */
.table-bordered,
.table-bordered th,
.table-bordered td {
    border: 0;
}

.table-bordered thead th,
.table .thead-light th,
.table .thead-dark th {
    color: var(--sv-text-muted);
    background-color: var(--sv-table-head);
    border-bottom: 1px solid var(--sv-border);
}

.table-striped tbody tr:nth-of-type(odd),
.table-hover tbody tr:hover {
    color: var(--sv-text);
    background-color: transparent;
}

/*
 * Tablo içi rozetler bütün tablolarda aynı etikettir (çizimdeki "Kullanıcı", "Aktif": 28px yüksek,
 * 12px yazı, limon). Olumlu ve bilgi amaçlı rozetler limondur; dikkat isteyen durumlar renklerini
 * korur (beklemede turuncu, olumsuz kırmızı), pasif olan nötrdür.
 */
.table .badge {
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
    border-radius: var(--sv-radius-xs);
}

.table .badge-success,
.table .badge-primary,
.table .badge-info,
.table .badge.bg-success,
.table .badge.bg-primary,
.table .badge.bg-info {
    color: var(--sv-chip-fg) !important;
    background-color: var(--sv-lime-2) !important;
}

/* Anahtar/değer satırı: soldaki hücre satır başlığıdır; satır sıkışık ve sola yaslıdır */
table.table > tbody > tr > th {
    font-weight: 600;
    color: var(--sv-text-muted);
    text-align: left;
    white-space: nowrap;
}

table.table > tbody > tr > th ~ td {
    height: auto;
    text-align: left;
}

/* Sıkışık tablo: aynı görünüm, daha alçak satırlar */
.table-sm thead th {
    height: 38px;
}

.table-sm tbody td {
    height: 44px;
    padding: 6px 10px;
}

/* Çizgisiz tablo: yerleşim amaçlı anahtar/değer tablosu; zemin ve başlık şeridi yok */
table.table-borderless > thead > tr > th,
table.table-borderless > tbody > tr > th,
table.table-borderless > tbody > tr > td {
    height: auto;
    text-align: left;
    background-color: transparent !important;
    border: 0;
}

.table-dark {
    color: var(--sv-text);
    background-color: var(--sv-surface-2);
}

.table-active,
.table-active > th,
.table-active > td {
    background-color: var(--sv-surface-2);
}

.table-success, .table-success > th, .table-success > td { background-color: var(--sv-success-soft) !important; }
.table-danger, .table-danger > th, .table-danger > td { background-color: var(--sv-danger-soft) !important; }
.table-warning, .table-warning > th, .table-warning > td { background-color: var(--sv-warning-soft) !important; }
.table-info, .table-info > th, .table-info > td { background-color: var(--sv-lime-softer) !important; }

.table-responsive {
    border-radius: var(--sv-radius-sm);
}

@media (hover: hover) {
    .table:not(.table-borderless) tbody tr:hover > td {
        background-color: var(--sv-row-hover);
    }
}

/* ==========================================================================
   8. Rozetler
   ========================================================================== */

.badge {
    padding: 0.3em 0.7em;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    border-radius: var(--sv-radius-xs);
    color: var(--sv-neutral);
    background-color: var(--sv-neutral-soft);
}

a.badge:hover {
    text-decoration: none;
}

.badge-primary,
.badge.bg-primary {
    color: var(--sv-chip-fg) !important;
    background-color: var(--sv-lime-2) !important;
}

.badge-secondary,
.badge-light,
.badge.bg-secondary,
.badge.bg-light {
    color: var(--sv-neutral) !important;
    background-color: var(--sv-neutral-soft) !important;
}

.badge-dark,
.badge.bg-dark {
    color: var(--sv-on-ink) !important;
    background-color: var(--sv-ink) !important;
}

.badge-success,
.badge.bg-success {
    color: var(--sv-success) !important;
    background-color: var(--sv-success-soft) !important;
}

.badge-danger,
.badge.bg-danger {
    color: var(--sv-danger) !important;
    background-color: var(--sv-danger-soft) !important;
}

.badge-warning,
.badge.bg-warning {
    color: var(--sv-warning) !important;
    background-color: var(--sv-warning-soft) !important;
}

.badge-info,
.badge.bg-info {
    color: var(--sv-info) !important;
    background-color: var(--sv-info-soft) !important;
}

/* Düğme içindeki rozet düğmenin rengine uyar */
.btn .badge {
    top: 0;
    margin-left: 0.25rem;
}

/* ==========================================================================
   9. Uyarılar ve bilgi kutuları
   ========================================================================== */

.alert {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--sv-text);
    background-color: var(--sv-neutral-soft);
    border: 1px solid var(--sv-neutral-border);
    border-radius: var(--sv-radius-sm);
}

.alert h4,
.alert h5,
.alert h6,
.alert .alert-heading {
    font-size: 0.9375rem;
    font-weight: 700;
    color: inherit;
    margin-bottom: 0.25rem;
}

.alert .icon {
    margin-right: 0.5rem;
}

.alert a,
.alert .alert-link {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

.alert hr {
    border-top-color: currentColor;
    opacity: 0.2;
}

.alert-dismissible .close {
    padding: 0.6rem 0.875rem;
    color: inherit;
}

.alert-primary,
.alert-info {
    color: var(--sv-text);
    background-color: var(--sv-surface-2);
    border-color: var(--sv-border);
}

.alert-success {
    color: var(--sv-success);
    background-color: var(--sv-success-soft);
    border-color: var(--sv-success-border);
}

.alert-danger {
    color: var(--sv-danger);
    background-color: var(--sv-danger-soft);
    border-color: var(--sv-danger-border);
}

.alert-warning {
    color: var(--sv-warning);
    background-color: var(--sv-warning-soft);
    border-color: var(--sv-warning-border);
}

.alert-secondary,
.alert-light {
    color: var(--sv-text);
    background-color: var(--sv-neutral-soft);
    border-color: var(--sv-neutral-border);
}

.alert-dark {
    color: var(--sv-on-contrast);
    background-color: var(--sv-contrast);
    border-color: var(--sv-contrast);
}

.callout {
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--sv-text);
    background-color: var(--sv-neutral-soft);
    border: 1px solid var(--sv-neutral-border);
    border-radius: var(--sv-radius-sm);
}

.callout h5 {
    font-size: 0.9375rem;
    margin-bottom: 0.25rem;
}

.callout p:last-child {
    margin-bottom: 0;
}

.callout.callout-info {
    background-color: var(--sv-lime-softer);
    border-color: var(--sv-lime-border);
}

.callout.callout-success {
    background-color: var(--sv-success-soft);
    border-color: var(--sv-success-border);
}

.callout.callout-warning {
    background-color: var(--sv-warning-soft);
    border-color: var(--sv-warning-border);
}

.callout.callout-danger {
    background-color: var(--sv-danger-soft);
    border-color: var(--sv-danger-border);
}

/* ==========================================================================
   10. Özet kutuları (small-box, info-box)
   Eski sayfalardaki kutular anasayfadaki sayı kartının (sv-stat) görünümünü alır:
   üstte etiket, altında sayı, sağ üstte soluk ikon.
   ========================================================================== */

.small-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    margin-bottom: var(--sv-gap);
    background-color: var(--sv-surface) !important;
    color: var(--sv-text) !important;
    border: 1px solid var(--sv-card-border);
    border-radius: var(--sv-radius-lg);
    box-shadow: var(--sv-card-shadow);
}

.small-box > .icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: var(--sv-text);
    opacity: 0.1;
}

.small-box > .icon > i {
    font-size: 3rem;
}

.small-box > .inner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    width: 100%;
}

.small-box h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    color: var(--sv-text);
}

.small-box p {
    order: -1;
    margin: 0;
    padding-right: 4.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sv-text-muted);
}

.small-box > .small-box-footer {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 1rem;
    font-weight: 400;
    color: var(--sv-text-body) !important;
}

.small-box > .small-box-footer::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--sv-lime);
}

.small-box > .small-box-footer > i {
    display: none;
}

.small-box > .small-box-footer:hover {
    color: var(--sv-text) !important;
    text-decoration: none;
}

.info-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    padding: 1.25rem 1.5rem;
    margin-bottom: var(--sv-gap);
    background-color: var(--sv-surface) !important;
    color: var(--sv-text) !important;
    border: 1px solid var(--sv-card-border);
    border-radius: var(--sv-radius-lg);
    box-shadow: var(--sv-card-shadow);
}

.info-box .info-box-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
    border-radius: var(--sv-radius);
    background-color: var(--sv-chip-bg) !important;
    color: var(--sv-chip-fg) !important;
    box-shadow: none !important;
}

.info-box .info-box-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.info-box .info-box-text {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--sv-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-box .info-box-number {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.33;
    color: var(--sv-text);
}

.info-box .progress {
    height: 4px;
    margin: 0.375rem 0;
}

.info-box .progress-description {
    font-size: 0.75rem;
    color: var(--sv-text-muted);
}

/* İkon kutusunda durum renkleri: küçük alan olduğu için dolu ve canlı */
.info-box.bg-success .info-box-icon,
.info-box .info-box-icon.bg-success {
    background-color: var(--sv-success-solid) !important;
    color: var(--sv-on-solid) !important;
}

.info-box.bg-warning .info-box-icon,
.info-box .info-box-icon.bg-warning {
    background-color: var(--sv-warning-solid) !important;
    color: var(--sv-contrast) !important;
}

.info-box.bg-danger .info-box-icon,
.info-box .info-box-icon.bg-danger {
    background-color: var(--sv-danger-solid) !important;
    color: var(--sv-on-solid) !important;
}

.info-box.bg-secondary .info-box-icon,
.info-box .info-box-icon.bg-secondary {
    background-color: var(--sv-neutral-soft) !important;
    color: var(--sv-neutral) !important;
}

/* ==========================================================================
   11. Pencereler, açılır menüler, listeler
   ========================================================================== */

.modal-content {
    color: var(--sv-text);
    background-color: var(--sv-surface);
    border: 0;
    border-radius: var(--sv-radius-lg);
    box-shadow: var(--sv-shadow-lg);
}

.modal-header {
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-lg) var(--sv-radius-lg) 0 0;
}

.modal-header .close {
    padding: 0.5rem 0.75rem;
    margin: -0.5rem -0.75rem -0.5rem auto;
}

.modal-title {
    font-size: 1.0625rem;
    font-weight: 700;
}

.modal-body {
    padding: 1.25rem;
}

/* Pencere içindeki bölüm başlığı pencere başlığından küçüktür */
.modal-body .sv-section-title {
    margin: 20px 0 12px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 24px;
}

.modal-body .sv-section-title:first-child {
    margin-top: 0;
}

/* Penceredeki son alanın alt boşluğu alt çubukla arayı açmasın */
.modal-body .form-group:last-child {
    margin-bottom: 0;
}

.modal-footer {
    padding: 0.875rem 1.25rem;
    background-color: transparent;
    border-top: 1px solid var(--sv-border);
    border-radius: 0 0 var(--sv-radius-lg) var(--sv-radius-lg);
}

.modal-backdrop {
    background-color: var(--sv-contrast);
}

.modal-backdrop.show {
    opacity: 0.45;
}

.dark-mode .modal-backdrop.show {
    opacity: 0.65;
}

.dropdown-menu {
    padding: 0.375rem;
    font-size: 0.875rem;
    color: var(--sv-text);
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow);
}

.dropdown-item {
    padding: 0.5rem 0.75rem;
    font-weight: 400;
    color: var(--sv-text);
    border-radius: var(--sv-radius-sm);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--sv-text);
    background-color: var(--sv-surface-2);
    text-decoration: none;
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--sv-text);
    background-color: var(--sv-surface-3);
}

.dropdown-item.disabled,
.dropdown-item:disabled {
    color: var(--sv-text-subtle);
}

.dropdown-item-text {
    padding: 0.5rem 0.75rem;
    color: var(--sv-text-muted);
}

.dropdown-divider {
    margin: 0.375rem 0;
    border-top-color: var(--sv-border);
}

.dropdown-header {
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sv-text-subtle);
}

.list-group-item {
    padding: 0.7rem 1rem;
    color: var(--sv-text);
    background-color: var(--sv-surface);
    border-color: var(--sv-border);
}

.list-group-item:first-child {
    border-top-left-radius: var(--sv-radius-sm);
    border-top-right-radius: var(--sv-radius-sm);
}

.list-group-item:last-child {
    border-bottom-left-radius: var(--sv-radius-sm);
    border-bottom-right-radius: var(--sv-radius-sm);
}

.list-group-item-action {
    font-weight: 400;
    color: var(--sv-text);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    color: var(--sv-text);
    background-color: var(--sv-surface-2);
    text-decoration: none;
}

.list-group-item.active {
    color: var(--sv-primary-fg);
    background-color: var(--sv-primary-bg);
    border-color: var(--sv-primary-bg);
}

.list-group-item.disabled,
.list-group-item:disabled {
    color: var(--sv-text-subtle);
    background-color: var(--sv-surface);
}

/* ==========================================================================
   12. Sekmeler, sayfalama, ilerleme
   ========================================================================== */

.nav-tabs {
    border-bottom: 1px solid var(--sv-border);
}

.nav-tabs .nav-link {
    padding: 0.6rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sv-text-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--sv-text);
    border-color: transparent;
    border-bottom-color: var(--sv-border-strong);
    text-decoration: none;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--sv-text);
    background-color: transparent;
    border-color: transparent;
    border-bottom-color: var(--sv-ink);
}

.nav-tabs .nav-link.disabled {
    color: var(--sv-text-subtle);
}

.nav-pills .nav-link {
    padding: 0.45rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sv-text-muted);
    border-radius: var(--sv-radius-sm);
}

.nav-pills .nav-link:hover {
    color: var(--sv-text);
    background-color: var(--sv-surface-2);
    text-decoration: none;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--sv-primary-fg);
    background-color: var(--sv-primary-bg);
}

.pagination {
    gap: 2px;
    margin-bottom: 0;
}

.page-link {
    min-width: 2rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    color: var(--sv-text);
    background-color: transparent;
    border: 0;
    border-radius: var(--sv-radius-sm) !important;
}

.page-link:hover {
    color: var(--sv-text);
    background-color: var(--sv-surface-2);
    text-decoration: none;
}

.page-link:focus {
    box-shadow: var(--sv-focus-ring);
}

.page-item.active .page-link {
    color: var(--sv-primary-fg);
    background-color: var(--sv-primary-bg);
}

.page-item.disabled .page-link {
    color: var(--sv-text-subtle);
    background-color: transparent;
}

.progress {
    height: 0.5rem;
    font-size: 0.6875rem;
    background-color: var(--sv-surface-3);
    border-radius: var(--sv-radius-pill);
    box-shadow: none;
}

.progress-bar {
    font-weight: 700;
    color: var(--sv-contrast);
    background-color: var(--sv-lime);
    border-radius: var(--sv-radius-pill);
}

.progress-bar.bg-primary { background-color: var(--sv-lime) !important; color: var(--sv-contrast); }
.progress-bar.bg-info { background-color: var(--sv-info-solid) !important; color: var(--sv-on-solid); }
.progress-bar.bg-success { background-color: var(--sv-success-solid) !important; color: var(--sv-on-solid); }
.progress-bar.bg-warning { background-color: var(--sv-warning-solid) !important; color: var(--sv-contrast); }
.progress-bar.bg-danger { background-color: var(--sv-danger-solid) !important; color: var(--sv-on-solid); }

.progress-sm { height: 6px; }
.progress-xs { height: 4px; }

.progress-group {
    margin-bottom: 0.875rem;
    font-size: 0.875rem;
}

.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--sv-text-subtle) !important;
}

.description-block {
    display: block;
    margin: 0.625rem 0;
    text-align: center;
}

.description-block > .description-header {
    margin: 0;
    padding: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.description-block > .description-text {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sv-text-muted);
}

/* ==========================================================================
   13. İpucu ve açılır bilgi
   ========================================================================== */

.tooltip {
    font-family: var(--sv-font);
    font-size: 0.75rem;
}

.tooltip-inner {
    padding: 0.35rem 0.6rem;
    font-weight: 600;
    color: var(--sv-on-ink);
    background-color: var(--sv-ink);
    border-radius: var(--sv-radius-sm);
}

.tooltip.show {
    opacity: 1;
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--sv-ink); }
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: var(--sv-ink); }
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--sv-ink); }
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: var(--sv-ink); }

.popover {
    font-family: var(--sv-font);
    font-size: 0.8125rem;
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow);
}

.popover-header {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--sv-text);
    background-color: var(--sv-surface-2);
    border-bottom: 1px solid var(--sv-border);
}

.popover-body {
    color: var(--sv-text);
}

.bs-popover-top > .arrow::before,
.bs-popover-auto[x-placement^="top"] > .arrow::before { border-top-color: var(--sv-border); }
.bs-popover-top > .arrow::after,
.bs-popover-auto[x-placement^="top"] > .arrow::after { border-top-color: var(--sv-surface); }
.bs-popover-bottom > .arrow::before,
.bs-popover-auto[x-placement^="bottom"] > .arrow::before { border-bottom-color: var(--sv-border); }
.bs-popover-bottom > .arrow::after,
.bs-popover-auto[x-placement^="bottom"] > .arrow::after { border-bottom-color: var(--sv-surface-2); }
.bs-popover-right > .arrow::before,
.bs-popover-auto[x-placement^="right"] > .arrow::before { border-right-color: var(--sv-border); }
.bs-popover-right > .arrow::after,
.bs-popover-auto[x-placement^="right"] > .arrow::after { border-right-color: var(--sv-surface); }
.bs-popover-left > .arrow::before,
.bs-popover-auto[x-placement^="left"] > .arrow::before { border-left-color: var(--sv-border); }
.bs-popover-left > .arrow::after,
.bs-popover-auto[x-placement^="left"] > .arrow::after { border-left-color: var(--sv-surface); }

/* ==========================================================================
   14. Mesajlaşma (destek talebi yazışması)
   ========================================================================== */

.direct-chat-messages {
    padding: 1rem;
    overflow: auto;
}

.direct-chat-msg {
    margin-bottom: 0.875rem;
}

.direct-chat-msg::after {
    content: "";
    display: block;
    clear: both;
}

.direct-chat-infos {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
}

.direct-chat-name {
    font-weight: 700;
    color: var(--sv-text);
}

.direct-chat-timestamp {
    color: var(--sv-text-subtle);
}

.direct-chat-img {
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.direct-chat-text {
    position: relative;
    margin: 0.25rem 0 0 50px;
    padding: 0.55rem 0.8rem;
    color: var(--sv-text);
    background-color: var(--sv-surface-2);
    border: 0;
    border-radius: 12px;
}

.right .direct-chat-img {
    float: right;
}

.right .direct-chat-text {
    margin-left: 0;
    margin-right: 50px;
    background-color: var(--sv-lime-soft);
}

/* ==========================================================================
   15. DataTables
   ========================================================================== */

table.dataTable {
    border-collapse: collapse !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.dataTables_wrapper {
    font-size: 0.875rem;
}

/*
 * Araç satırı (kayıt sayısı, arama, düğmeler) ile tablo arasında boşluk bırakılır.
 * DataTables'ın Bootstrap teması .table-responsive içindeki satırların boşluğunu sıfırlar;
 * burada aynı seçiciyle geri verilir.
 */
.dataTables_wrapper > .row,
div.table-responsive > div.dataTables_wrapper > div.row {
    align-items: center;
    margin-top: 0;
    margin-bottom: 1rem;
}

.dataTables_wrapper > .row:last-child,
div.table-responsive > div.dataTables_wrapper > div.row:last-child {
    margin-top: 1rem;
    margin-bottom: 0;
}

/* Satır sarmalayıcısı olmayan düzenler (dom: '...rtip') */
.dataTables_wrapper > .dataTables_length,
.dataTables_wrapper > .dataTables_filter,
.dataTables_wrapper > .dt-buttons {
    margin-bottom: 1rem;
}

.dataTables_wrapper > .dataTables_info,
.dataTables_wrapper > .dataTables_paginate {
    margin-top: 1rem;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    margin-bottom: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sv-text-muted);
}

.dataTables_wrapper .dataTables_filter input {
    min-width: 220px;
    margin-left: 0;
    padding-left: 2.1rem;
    background-image: var(--sv-search-icon);
    background-repeat: no-repeat;
    background-position: 0.7rem center;
    background-size: 15px 15px;
}

.dataTables_wrapper .dataTables_length select {
    margin: 0 0.35rem;
}

.dataTables_wrapper .dataTables_info {
    padding-top: 0;
    font-size: 0.8125rem;
    color: var(--sv-text-muted);
}

.dataTables_wrapper .dataTables_paginate .pagination {
    justify-content: flex-end;
}

div.dataTables_processing {
    color: var(--sv-text);
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow);
    font-weight: 600;
}

div.dataTables_processing.card {
    margin-bottom: 0;
}

div.dataTables_processing > div:last-child > div {
    background: var(--sv-text-subtle);
}

table.dataTable thead > tr > th.sorting_asc::before,
table.dataTable thead > tr > th.sorting_asc::after,
table.dataTable thead > tr > th.sorting_desc::before,
table.dataTable thead > tr > th.sorting_desc::after {
    opacity: 0.3;
}

table.dataTable thead > tr > th.sorting_asc::before,
table.dataTable thead > tr > th.sorting_desc::after {
    opacity: 1;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    color: var(--sv-on-ink);
    background-color: var(--sv-ink);
    border: 0;
    box-shadow: none;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom-color: var(--sv-border);
}

table.dataTable tr.dtrg-group td,
table.dataTable tr.dtrg-group th {
    font-weight: 700;
    background-color: var(--sv-surface-2);
}

/* Sıralama okları yer ayırmaz (başlık metni ortada kalır); sıralanan kolonda ve üstüne gelince görünür */
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > td.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc {
    padding-right: 12px;
}

table.dataTable thead > tr > th.sorting::before,
table.dataTable thead > tr > th.sorting::after,
table.dataTable thead > tr > th.sorting_asc::before,
table.dataTable thead > tr > th.sorting_asc::after,
table.dataTable thead > tr > th.sorting_desc::before,
table.dataTable thead > tr > th.sorting_desc::after {
    right: 4px;
}

table.dataTable thead > tr > th.sorting::before,
table.dataTable thead > tr > th.sorting::after {
    opacity: 0;
}

table.dataTable thead > tr > th.sorting:hover::before,
table.dataTable thead > tr > th.sorting:hover::after {
    opacity: 0.3;
}

/* Satır zemini ortak tablo kuralından gelir (bölüm 7); DataTables'ın kendi gölgesi kapatılır */
table.dataTable.table-striped > tbody > tr.odd > *,
table.dataTable.table-hover > tbody > tr:hover > * {
    box-shadow: none;
}

table.dataTable > tbody > tr > td.dataTables_empty {
    height: 120px;
    color: var(--sv-text-muted);
    text-align: center;
}

table.dataTable > tbody > tr.selected > * {
    color: var(--sv-text);
    box-shadow: inset 0 0 0 9999px var(--sv-lime-softer);
}

div.dt-button-collection {
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow);
    padding: 0.375rem;
}

div.dt-button-collection .dt-button,
div.dt-button-collection .dropdown-item {
    border-radius: var(--sv-radius-sm);
}

div.dt-button-collection .dt-button.active:not(.disabled),
div.dt-button-collection .dropdown-item.active {
    color: var(--sv-text);
    background-color: var(--sv-lime-soft);
    box-shadow: none;
}

div.dt-button-background {
    background: transparent;
}

/* ==========================================================================
   16. SweetAlert2
   ========================================================================== */

.swal2-container {
    font-family: var(--sv-font);
}

.swal2-popup {
    color: var(--sv-text);
    background: var(--sv-surface);
    border-radius: var(--sv-radius-lg);
    font-family: var(--sv-font);
}

.swal2-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sv-text);
}

.swal2-html-container {
    font-size: 0.9375rem;
    color: var(--sv-text-muted);
}

.swal2-actions {
    gap: 0.5rem;
}

.swal2-styled {
    margin: 0;
    padding: 0.55rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--sv-radius-sm);
    box-shadow: none !important;
}

.swal2-styled.swal2-confirm {
    color: var(--sv-primary-fg) !important;
    background-color: var(--sv-primary-bg) !important;
}

/*
 * Görünümlerin kırmızı verdiği (silme, iptal gibi) onay düğmeleri. SweetAlert2 rengi sürüme göre
 * ya rgb() olarak ya da yazıldığı gibi (--swal2-confirm-button-background-color: #dc3545) koyar.
 */
.swal2-styled.swal2-confirm[style*="220, 53, 69"],
.swal2-styled.swal2-confirm[style*="239, 68, 68"],
.swal2-styled.swal2-confirm[style*="221, 51, 51"],
.swal2-styled.swal2-confirm[style*="#dc3545" i],
.swal2-styled.swal2-confirm[style*="#ef4444" i],
.swal2-styled.swal2-confirm[style*="#d33" i] {
    color: var(--sv-on-solid) !important;
    background-color: var(--sv-danger-fill) !important;
}

.swal2-styled.swal2-cancel {
    color: var(--sv-text) !important;
    background-color: var(--sv-surface) !important;
    border: 1px solid var(--sv-border-strong);
}

.swal2-styled.swal2-deny {
    color: var(--sv-danger) !important;
    background-color: var(--sv-danger-soft) !important;
}

.swal2-styled:focus-visible {
    box-shadow: var(--sv-focus-ring) !important;
}

.swal2-input,
.swal2-textarea,
.swal2-select {
    font-size: 0.875rem;
    color: var(--sv-text);
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius-sm);
    box-shadow: none;
}

.swal2-input:focus,
.swal2-textarea:focus {
    border-color: var(--sv-focus);
    box-shadow: 0 0 0 1px var(--sv-focus);
}

.swal2-close {
    color: var(--sv-text-muted);
}

.swal2-close:hover {
    color: var(--sv-text);
}

.swal2-icon.swal2-success { border-color: var(--sv-success-border); color: var(--sv-success-solid); }
.swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--sv-success-solid); }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--sv-success-border); }
.swal2-icon.swal2-error { border-color: var(--sv-danger-border); color: var(--sv-danger-solid); }
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--sv-danger-solid); }
.swal2-icon.swal2-warning { border-color: var(--sv-warning-border); color: var(--sv-warning-solid); }
.swal2-icon.swal2-info,
.swal2-icon.swal2-question { border-color: var(--sv-border-strong); color: var(--sv-text-muted); }

.swal2-timer-progress-bar {
    background: var(--sv-lime);
}

/* Bildirim (toast) */
.swal2-popup.swal2-toast {
    padding: 0.7rem 0.9rem;
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow);
}

.swal2-popup.swal2-toast .swal2-title {
    margin: 0 0 0 0.6rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--sv-text);
}


/* ==========================================================================
   17. Select2 (bootstrap4 teması) ve Summernote
   Bu eklentilerin CSS'i sayfanın css bölümünde, temadan sonra yüklenir; body öneki ile öne geçilir.
   ========================================================================== */

body .select2-container--bootstrap4 .select2-selection,
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple {
    min-height: 2.5rem;
    font-size: 0.875rem;
    color: var(--sv-text);
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius-sm);
    box-shadow: none;
}

body .select2-container--bootstrap4.select2-container--focus .select2-selection,
body .select2-container--default.select2-container--focus .select2-selection--multiple,
body .select2-container--default.select2-container--open .select2-selection--single {
    background-color: var(--sv-surface);
    border-color: var(--sv-focus);
    box-shadow: 0 0 0 1px var(--sv-focus);
}

body .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
body .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--sv-text);
    line-height: calc(2.5rem - 2px);
}

body .select2-container--bootstrap4 .select2-selection__placeholder,
body .select2-container--default .select2-selection__placeholder,
body .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--sv-text-subtle);
}

body .select2-dropdown {
    color: var(--sv-text);
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
    box-shadow: var(--sv-shadow);
    font-size: 0.875rem;
}

body .select2-container--bootstrap4 .select2-results__option--highlighted,
body .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"],
body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    color: var(--sv-text);
    background-color: var(--sv-surface-2);
}

body .select2-container--bootstrap4 .select2-results__option[aria-selected="true"],
body .select2-container--default .select2-results__option[aria-selected="true"],
body .select2-container--default .select2-results__option--selected {
    color: var(--sv-text);
    background-color: var(--sv-lime-soft);
}

body .select2-container--bootstrap4 .select2-search--dropdown .select2-search__field,
body .select2-container--default .select2-search--dropdown .select2-search__field {
    color: var(--sv-text);
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius-sm);
}

body .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice,
body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    margin: 0;
    padding: 2px 8px;
    font-size: 0.75rem;
    line-height: 20px;
    white-space: normal;
    color: var(--sv-text);
    background-color: var(--sv-surface-3);
    border: 0;
    border-radius: var(--sv-radius-pill);
}

/* Seçili öğedeki "×": metnin önünde küçük, soluk; üstüne gelince koyulaşır */
body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: static;
    padding: 0;
    font-weight: 400;
    color: var(--sv-text-muted);
    background: none;
    border: 0;
}

body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--sv-text);
    background: none;
}

body .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding: 0;
}

/* Alanın sağındaki "tümünü temizle" düğmesi soluk ve küçük */
body .select2-container--default .select2-selection__clear {
    font-weight: 400;
    color: var(--sv-text-subtle);
}

/* Hatalı alan: select2'nin görünen kutusu da kırmızı çerçeve alır */
body .is-invalid + .select2-container .select2-selection {
    border-color: var(--sv-danger);
}

/* Eklentinin yazı tipi panelinkiyle aynı; alan iç boşluğu diğer alanlarla aynı (12px) */
body .select2-container,
body .select2-container .select2-search__field,
body .select2-container .select2-search--inline .select2-search__field,
body .select2-container .select2-selection__rendered {
    font-family: inherit;
}

body .select2-container--default .select2-selection--single .select2-selection__rendered,
body .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding-left: 12px;
}

/* Tek seçimli alan: ok ve temizleme düğmesi 40px alanın ortasında; ok diğer seçim kutularındaki ince ok */
body .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 8px;
    width: 16px;
    height: 100%;
    background: var(--sv-select-arrow) center / 16px 16px no-repeat;
}

body .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

body .select2-container--default .select2-selection--single .select2-selection__clear {
    height: calc(2.5rem - 2px);
    margin-right: 20px;
    line-height: calc(2.5rem - 2px);
}

/* Çok seçimli alan: seçilenler ve arama kutusu satırlara sarılır, her satır aynı 12px içeriden başlar; boşken 40px */
body .select2-container--default .select2-selection--multiple {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: 5px 32px 5px 12px;
}

body .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: contents;
}

body .select2-container--default .select2-selection--multiple .select2-search--inline {
    flex: 1 1 120px;
}

body .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: 100% !important;
    height: 28px;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    line-height: 28px;
}

body .note-editor.note-frame {
    border-color: var(--sv-border);
    border-radius: var(--sv-radius-sm);
}

body .note-editor.note-frame .note-toolbar {
    background-color: var(--sv-surface-2);
    border-bottom-color: var(--sv-border);
}

body .note-editor.note-frame .note-statusbar {
    display: none;
}

/* Araç çubuğu düğmeleri: çerçevesiz, sade; üstüne gelince açık zemin (paneldeki ikon düğmeleri gibi) */
body .note-editor .note-toolbar {
    padding: 6px 8px;
}

body .note-editor .note-btn-group {
    margin: 0 8px 0 0;
}

body .note-editor .note-btn {
    height: 32px;
    min-width: 32px;
    padding: 0 8px;
    color: var(--sv-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--sv-radius-xs);
    box-shadow: none;
}

body .note-editor .note-btn:hover,
body .note-editor .note-btn:focus,
body .note-editor .note-btn.active {
    color: var(--sv-text);
    background-color: var(--sv-surface-3);
}

body .note-editor .note-editable {
    color: var(--sv-text);
    background-color: var(--sv-surface);
}

body .note-editor .note-placeholder {
    color: var(--sv-text-subtle);
}

/* ==========================================================================
   18. Dropzone (fiş yükleme alanı)
   ========================================================================== */

body .dropzone {
    border: 2px dashed var(--sv-border-strong);
    border-radius: var(--sv-radius);
    background: var(--sv-surface);
}

body .dropzone:hover,
body .dropzone.dz-drag-hover {
    border-color: var(--sv-ink);
    background: var(--sv-lime-softer);
}

body .dropzone .dz-message,
body .dropzone .dz-message p {
    color: var(--sv-text-muted);
}

body .dropzone .dz-message h4 {
    color: var(--sv-text);
}

body .dropzone .dz-message .fas {
    color: var(--sv-text);
}

/* ==========================================================================
   19. Hareket
   Kısa ve abartısız; süre ve eğriler tokens.css içindedir. Kurallar:
   - Yalnızca opacity ve translate kullanılır (ölçü değiştiren animasyon yok).
   - Giriş animasyonu bitince geride değer bırakmaz ("backwards"); böylece kartın üstüne gelme
     hareketi ve kart içindeki açılır menüler etkilenmez.
   - Tablo satırlarına veya zamanlayıcıyla yeniden çizilen içeriğe verilmez (her çizimde tekrar oynar).
   - "Hareketi azalt" ayarı açık cihazlarda hiçbiri çalışmaz; içerik doğrudan son hâliyle görünür.
   ========================================================================== */

/* Yüklenirken: sayının yerinde duran soluk çubuk */
.sv-skeleton {
    display: block;
    width: 6rem;
    max-width: 100%;
    color: transparent !important;
    background: linear-gradient(90deg, var(--sv-surface-2) 25%, var(--sv-surface-3) 50%, var(--sv-surface-2) 75%) 0 0 / 200% 100%;
    border-radius: var(--sv-radius-sm);
    user-select: none;
}

@media (prefers-reduced-motion: no-preference) {
    /* Sırayla belirme: öğeye `sv-reveal` sınıfı ve sırası (style="--sv-i: 2") verilir */
    @keyframes sv-rise {
        from {
            opacity: 0;
            translate: 0 10px;
        }
    }

    .sv-reveal {
        animation: sv-rise var(--sv-dur-slow) var(--sv-ease-out) backwards;
        animation-delay: calc(var(--sv-i, 0) * var(--sv-stagger));
    }

    @keyframes sv-shimmer {
        to {
            background-position: -200% 0;
        }
    }

    .sv-skeleton {
        animation: sv-shimmer 1.4s linear infinite;
    }
}

@media print {
    .sv-reveal,
    .sv-skeleton {
        animation: none;
    }
}

/* ==========================================================================
   20. Anasayfa bileşenleri
   Figma'daki "Dashboard" çizimi: sayı kartı, limon ikon kutusu, etiket, karşılama ve
   hızlı işlemler kartları. Ölçüler çizimden alınmıştır.
   ========================================================================== */

/* Limon ikon kutusu: 32px (büyük hâli 40px), 10px köşe */
.sv-chip {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--sv-chip-fg);
    background-color: var(--sv-chip-bg);
    border-radius: var(--sv-radius);
}

.sv-chip .sv-icon {
    width: 16px;
    height: 16px;
}

.sv-chip--lg {
    width: 40px;
    height: 40px;
}

.sv-chip--lg .sv-icon {
    width: 20px;
    height: 20px;
}

/* Limon etiket (ör. "Rol: Sistem Yöneticisi") */
.sv-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 1rem;
    line-height: 24px;
    color: var(--sv-chip-fg);
    background-color: var(--sv-chip-bg);
    border-radius: var(--sv-radius-xs);
}

/* Kart başlığı: ikon kutusu + sade başlık */
.sv-cardhead {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sv-cardhead__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 24px;
    color: var(--sv-text);
}

/* Başlığın sağındaki sade bağlantı (ör. "Tümünü gör") */
.sv-cardhead__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--sv-text-muted);
    white-space: nowrap;
}

.sv-cardhead__link .sv-icon {
    width: 16px;
    height: 16px;
}

.sv-cardhead__link:hover {
    color: var(--sv-text);
}

/* --- Sayı kartları ------------------------------------------------------ */

.sv-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sv-gap);
    margin-bottom: var(--sv-gap);
}

@media (max-width: 1199.98px) {
    .sv-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.sv-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 144px;
    padding: 24px;
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-card-border);
    border-radius: var(--sv-radius-lg);
    box-shadow: var(--sv-card-shadow);
}

/* Soluk büyük ikon: süs amaçlıdır, metnin arkasında kalır */
.sv-stat__icon {
    position: absolute;
    top: 16px;
    right: 16px;
    color: var(--sv-text);
    opacity: 0.1;
    pointer-events: none;
}

.sv-stat__icon .sv-icon {
    display: block;
    width: 64px;
    height: 64px;
}

.sv-stat__label {
    position: relative;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 24px;
    color: var(--sv-text-muted);
}

.sv-stat__value {
    position: relative;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 24px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--sv-text);
}

/* Limon noktalı bağlantı; tıklama alanı bütün karttır */
.sv-stat__more {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    line-height: 24px;
    color: var(--sv-text-body);
}

.sv-stat__more::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--sv-lime);
}

.sv-stat__more::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--sv-radius-lg);
}

.sv-stat__more:hover {
    color: var(--sv-text);
    text-decoration: none;
}

.sv-stat__more:focus-visible {
    outline: none;
}

.sv-stat__more:focus-visible::after {
    outline: 2px solid var(--sv-focus);
    outline-offset: 2px;
}

@media (forced-colors: active) {
    .sv-stat {
        border-color: CanvasText;
    }
}

/* Sayılar yüklenemediğinde kartların altında görünen satır */
.sv-inline-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: calc(var(--sv-gap) * -0.5) 0 var(--sv-gap);
    font-size: 0.875rem;
    color: var(--sv-danger);
}

/* --- Karşılama ve hızlı işlemler ---------------------------------------- */

.sv-home__row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: var(--sv-gap);
}

.sv-home__row > .card {
    margin-bottom: 0;
}

.sv-home__row + .sv-home__row {
    margin-top: var(--sv-gap);
}

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

.sv-welcome {
    flex-direction: row;
}

.sv-welcome__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 24px;
}

.sv-welcome__text {
    margin: 0;
    color: var(--sv-text-body);
}

.sv-welcome__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

/* Etiket ve adres tek satıra sığmazsa adres alt satıra iner (çizimin mobil hâli) */
.sv-welcome__mail {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0 10px;
    min-width: 0;
}

.sv-welcome__mail-label {
    white-space: nowrap;
    color: var(--sv-text);
}

.sv-welcome__mail-value {
    min-width: 0;
    color: var(--sv-text-body);
    overflow-wrap: anywhere;
}

/* Fiş çizimi yalnızca geniş ekranda, kartın sağında durur */
.sv-welcome__art {
    display: none;
    flex: none;
    align-self: center;
    width: 172px;
    padding-right: 28px;
}

@media (min-width: 1200px) {
    .sv-welcome__art {
        display: block;
    }
}

/* Kota satırı (şirket yöneticisi): kartın altında, ince çubuk */
.sv-quota {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--sv-border);
}

.sv-quota__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: var(--sv-text-muted);
}

.sv-quota__count {
    color: var(--sv-text-body);
    font-variant-numeric: tabular-nums;
}

.sv-quota__count strong {
    font-weight: 600;
    color: var(--sv-text);
}

.sv-quota__bar {
    height: 6px;
    overflow: hidden;
    background-color: var(--sv-surface-3);
    border-radius: var(--sv-radius-pill);
}

.sv-quota__fill {
    display: block;
    width: 0;
    height: 100%;
    background-color: var(--sv-lime);
    border-radius: inherit;
}

.sv-quota.is-low .sv-quota__fill {
    background-color: var(--sv-warning-solid);
}

.sv-quota__note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
    font-size: 0.875rem;
    color: var(--sv-text-muted);
}

.sv-quota.is-low .sv-quota__note {
    color: var(--sv-warning);
}

.sv-quota__note .btn {
    margin-left: auto;
}

/* Kendi kartında duran kota (ör. Fiş Yükle): üstte ayırıcı çizgi yok */
.sv-quota--plain {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.sv-quick > .card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sv-quick .sv-cardhead {
    gap: 8px;
}

/* Satırların ikonu başlıktaki ikonla aynı hizada başlar; üstüne gelme zemini kenara taşar */
.sv-quick__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 -12px;
}

.sv-quick__item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 12px;
    color: var(--sv-text-body);
    border-radius: var(--sv-radius);
    transition: background-color var(--sv-dur-fast) ease, color var(--sv-dur-fast) ease;
}

.sv-quick__item:hover,
.sv-quick__item:focus-visible {
    color: var(--sv-text);
    background-color: var(--sv-surface-2);
    text-decoration: none;
}

/* Satırın bağlantı olduğunu gösteren ok: dokunmatik ekranda da görünür, üstüne gelince koyulaşır */
.sv-quick__arrow,
.sv-row__arrow {
    display: inline-flex;
    flex: none;
    margin-left: auto;
    color: var(--sv-text-subtle);
}

.sv-quick__item:hover .sv-quick__arrow,
.sv-quick__item:focus-visible .sv-quick__arrow,
.sv-row:hover .sv-row__arrow,
.sv-row:focus-visible .sv-row__arrow {
    color: var(--sv-text);
}

/* --- Satır listesi -------------------------------------------------------
   Kart içinde alt alta tıklanabilir satırlar (mükellefler, bekleyen istekler). Hızlı işlemler
   satırlarıyla aynı dil: 12px iç boşluk, üstüne gelince soluk zemin ve beliren ok. */

.sv-listcard > .card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sv-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Kart içindeki satır listesi: satırın içeriği kart başlığıyla aynı hizada başlar, üstüne gelme zemini kenara taşar */
.card-body > .sv-rows,
.sv-listcard .sv-rows {
    margin-right: -12px;
    margin-left: -12px;
}

.sv-row {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding: 6px 12px;
    color: var(--sv-text-body);
    border-radius: var(--sv-radius);
    transition: background-color var(--sv-dur-fast) ease, color var(--sv-dur-fast) ease;
}

a.sv-row:hover,
a.sv-row:focus-visible {
    color: var(--sv-text-body);
    background-color: var(--sv-surface-2);
    text-decoration: none;
}

.sv-row__main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.sv-row__title,
.sv-row__sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sv-row__title {
    line-height: 24px;
    color: var(--sv-text);
}

.sv-row__sub {
    font-size: 0.875rem;
    line-height: 20px;
    color: var(--sv-text-muted);
}

.sv-row__sub:empty {
    display: none;
}

/* Satırın sağındaki sayı (fiş adedi, tutar) */
.sv-row__value {
    flex: none;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sv-row__arrow {
    margin-left: 0;
}

.sv-row .sv-skeleton {
    width: min(18rem, 60%);
    height: 20px;
}

/* Satırdaki düğme (ör. arama sonucunda "İstek Gönder") daralmaz, alt satıra bölünmez */
.sv-row > .btn {
    flex: none;
    white-space: nowrap;
}

/* Liste boşken ya da yüklenemediğinde görünen sade not */
.sv-rows__note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
    padding: 6px 12px;
    font-size: 0.875rem;
    color: var(--sv-text-muted);
}

/* Dar ekranda yer açmak için ikincil sayı ve (dokunmatik ekranda görünmeyen) ok kaldırılır */
@media (max-width: 575.98px) {
    .sv-row__value--wide,
    .sv-row__arrow {
        display: none;
    }
}

/* --- Fiş görseli (anasayfanın sağ altı) ----------------------------------
   Figma'daki "Slipvise - Dashboard" çizimindeki yerleşim: görsel kartların altında, sağ altta
   durur; sağda sayfa kenarından taşar (509px'in 350px'i görünür), altta alt bilgiye dayanır.
   Anasayfa içerik alanını doldurur: kartların altında boşluk varsa görsel o boşluğa yerleşir
   (en fazla çizimdeki 376px), boşluk yoksa sayfa görsele yer açacak kadar uzar. */

.sv-main:has(> .sv-home) {
    display: flex;
    flex-direction: column;
}

.sv-home {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.sv-home__art {
    display: none;
}

@media (min-width: 992px) {
    .sv-home__art {
        position: relative;
        display: block;
        flex: 1 0 260px;
        /* İçerik boşluğunu aşar: sağda sayfa kenarına, altta alt bilgiye kadar */
        margin: 0 calc(var(--sv-gutter) * -1) calc(var(--sv-gutter) * -1) 0;
        overflow: hidden;
        pointer-events: none;
    }

    .sv-home__art > img {
        position: absolute;
        right: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        height: min(100%, 376px);
        translate: 31.2% 0;
    }

    /* Koyu temada beyaz kâğıt göz almasın */
    .dark-mode .sv-home__art > img {
        filter: brightness(0.62);
    }
}

/* --- Fiş çizimi (karşılama kartı) --------------------------------------- */

.sv-receipt {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.sv-receipt__paper {
    fill: var(--sv-bg);
    stroke: var(--sv-border-strong);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.sv-receipt__line {
    fill: none;
    stroke: var(--sv-surface-3);
    stroke-width: 5;
    stroke-linecap: round;
}

.sv-receipt__line--strong {
    stroke: var(--sv-text-muted);
}

.sv-receipt__dash {
    fill: none;
    stroke: var(--sv-border-strong);
    stroke-width: 1.5;
    stroke-dasharray: 4 5;
    stroke-linecap: round;
}

.sv-receipt__scan {
    fill: var(--sv-lime);
    opacity: 0;
}

.sv-receipt__badge circle {
    fill: var(--sv-lime);
    stroke: var(--sv-surface);
    stroke-width: 4;
}

.sv-receipt__badge path {
    fill: none;
    stroke: var(--sv-contrast);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Anasayfa hareketleri ------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
    .sv-quota__fill {
        transition: width var(--sv-dur-slow) var(--sv-ease-out);
    }

    .sv-quick__arrow,
    .sv-row__arrow {
        translate: -4px 0;
        transition: opacity var(--sv-dur-fast) ease, translate var(--sv-dur) var(--sv-ease-out);
    }

    .sv-quick__item:hover .sv-quick__arrow,
    .sv-quick__item:focus-visible .sv-quick__arrow,
    .sv-row:hover .sv-row__arrow,
    .sv-row:focus-visible .sv-row__arrow {
        translate: 0 0;
    }

    /*
     * Fiş çizimi sayfa açılırken bir kez oynar: kâğıt belirir, satırlar yazılır,
     * tarama çizgisi geçer ve onay işareti yerine oturur. Sonra durur (döngü yok).
     */
    @keyframes sv-receipt-write {
        from {
            stroke-dashoffset: 1;
        }
    }

    @keyframes sv-receipt-scan {
        0% {
            opacity: 0;
            translate: 0 0;
        }
        15%, 80% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            translate: 0 132px;
        }
    }

    @keyframes sv-receipt-pop {
        0% {
            opacity: 0;
            scale: 0.4;
        }
        70% {
            opacity: 1;
            scale: 1.12;
        }
    }

    /* Sağ alttaki fiş görseli kartlardan sonra, yerinden hafifçe yükselerek belirir */
    @keyframes sv-art-rise {
        from {
            opacity: 0;
            translate: 31.2% 16px;
        }
    }

    .sv-home__art > img {
        animation: sv-art-rise 0.7s var(--sv-ease-out) 0.4s backwards;
    }

    .sv-receipt__paper {
        animation: sv-rise var(--sv-dur-slow) var(--sv-ease-out) 0.35s backwards;
    }

    .sv-receipt__line {
        stroke-dasharray: 1;
        animation: sv-receipt-write 0.4s var(--sv-ease-out) backwards;
        animation-delay: calc(0.6s + var(--sv-i, 0) * 0.07s);
    }

    .sv-receipt__dash {
        animation: sv-rise var(--sv-dur) ease 0.9s backwards;
    }

    .sv-receipt__scan {
        animation: sv-receipt-scan 0.9s var(--sv-ease) 1.25s both;
    }

    .sv-receipt__badge {
        transform-box: fill-box;
        transform-origin: center;
        animation: sv-receipt-pop 0.45s var(--sv-ease-out) 2s backwards;
    }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .sv-stat {
        transition: translate var(--sv-dur) var(--sv-ease-out), box-shadow var(--sv-dur) var(--sv-ease-out);
    }

    .sv-stat__icon {
        transition: opacity var(--sv-dur) ease, translate var(--sv-dur) var(--sv-ease-out);
    }

    .sv-stat:hover {
        translate: 0 -3px;
        box-shadow: var(--sv-card-shadow-hover);
    }

    .sv-stat:hover .sv-stat__icon {
        opacity: 0.16;
        translate: 0 -2px;
    }

    /* Kartın üstüne gelince tarama çizgisi bir kez daha geçer */
    @keyframes sv-receipt-rescan {
        0% {
            opacity: 0;
            translate: 0 0;
        }
        15%, 80% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            translate: 0 132px;
        }
    }

    .sv-welcome:hover .sv-receipt__scan {
        animation: sv-receipt-rescan 0.9s var(--sv-ease) both;
    }
}

/* ==========================================================================
   21. Tablo kartı, etiketler ve satır işlemleri
   Tablonun ortak görünümü bölüm 7'dedir. Burada Figma'daki "Kullanıcılar" çizimine göre kurulan
   sayfaların parçaları var: kartın içinde boydan boya duran tablo
   (<div class="card sv-tablecard"> + <table class="table sv-table">), limon etiketler, ortak ikon
   düğme ailesi (sv-action) ve dar ekranda satırların etiketli bloklara dönüşmesi
   ("Fişler Sayfası Mobile" çizimi; hücrelere `data-label` verilir).
   ========================================================================== */

.sv-tablecard {
    overflow: hidden;
}

.sv-tablecard > .table-responsive {
    border-radius: 0;
}

.sv-table {
    margin-bottom: 0;
}

/* Kenardan kenara tablonun ilk ve son hücresi kart başlığıyla aynı hizada başlar (24px) */
@media (min-width: 992px) {
    .sv-tablecard .sv-table th:first-child,
    .sv-tablecard .sv-table td:first-child {
        padding-left: 24px;
    }

    .sv-tablecard .sv-table th:last-child,
    .sv-tablecard .sv-table td:last-child {
        padding-right: 24px;
    }
}

/* Hücre içi bağlantı (e-posta): düz metin gibi görünür, üstüne gelince altı çizilir */
.sv-table__link {
    color: inherit;
}

.sv-table__link:hover {
    color: var(--sv-text);
    text-decoration: underline;
}

/* Uzun metin: tek satırda kesilir (e-posta) ya da en fazla iki satır (şirket adı); satır 60px kalır */
.sv-ellipsis {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.sv-clamp {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Kartın altındaki sayfalama satırı; tek sayfa varsa gizlenir (sayfanın betiği) */
.sv-tablecard__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 12px 24px;
    border-top: 1px solid var(--sv-border);
}

.sv-tablecard__foot > .dataTables_info,
.sv-tablecard__foot > .dataTables_paginate,
.sv-tablecard div.dataTables_wrapper .sv-tablecard__foot > div.dataTables_info {
    margin: 0;
    padding: 0;
}

/* Kayıt yokken sayfa boyu, bilgi ve sayfalama gizlenir; tablodaki "Kayıt bulunamadı" yeter (svDataTable) */
.sv-tablecard__foot.is-empty {
    display: none;
}

/* Yüklenirken: soluk çubuklu satırlar */
.sv-table__loading .sv-skeleton {
    width: min(14rem, 100%);
    height: 20px;
    margin: 0 auto;
}

/* Tablo etiketi: 28px, 12px yazı (çizimde "Kullanıcı", "Aktif") */
.sv-tag--sm {
    padding: 4px 8px;
    font-size: 0.75rem;
    line-height: 20px;
    white-space: nowrap;
    background-color: var(--sv-lime-2);
}

/* Pasif durum: limon yerine nötr */
.sv-tag--muted {
    color: var(--sv-neutral);
    background-color: var(--sv-neutral-soft);
}

/* Durum tonları: bekleyen turuncu, olumsuz kırmızı (tablo rozetleriyle aynı anlam) */
.sv-tag--warning {
    color: var(--sv-warning);
    background-color: var(--sv-warning-soft);
}

.sv-tag--danger {
    color: var(--sv-danger);
    background-color: var(--sv-danger-soft);
}

/*
 * İşlemler: 28px kutuda 18px ince çizgi ikon, 2px arayla; silme kırmızı.
 * İkon tablo yazısının (14px) yaklaşık 1,3 katıdır; daha büyüğü satırda kaba durur.
 */
.sv-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    vertical-align: middle;
}

.sv-action {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--sv-text);
    background: none;
    border: 0;
    border-radius: var(--sv-radius-xs);
    cursor: pointer;
    transition: background-color var(--sv-dur-fast) ease;
}

.sv-action .sv-icon {
    width: 18px;
    height: 18px;
    stroke-width: 1.75;
}

.sv-action:hover {
    color: var(--sv-text);
    background-color: var(--sv-surface-3);
}

.sv-action--danger,
.sv-action--danger:hover {
    color: var(--sv-danger);
}

/* Şu an yapılamayan işlem (ör. kuyruktaki fiş onaylanamaz): soluk ve tıklanmaz */
.sv-action:disabled,
.sv-action.disabled {
    opacity: 0.35;
    background: none;
    cursor: not-allowed;
}

.sv-action--danger:hover {
    background-color: var(--sv-danger-soft);
}

/* Avatar zeminleri: fotoğraf yokken baş harflerin arkasında çizimdeki pastel tonlar */
.sv-avatar[data-tint] {
    color: var(--sv-text);
}

.sv-avatar[data-tint="1"] { background-color: var(--sv-tint-1); }
.sv-avatar[data-tint="2"] { background-color: var(--sv-tint-2); }
.sv-avatar[data-tint="3"] { background-color: var(--sv-tint-3); }
.sv-avatar[data-tint="4"] { background-color: var(--sv-tint-4); }

.sv-table .sv-avatar {
    margin: 0 auto;
}

/* Sayfa başlığındaki arama alanı */
.sv-search {
    position: relative;
    display: block;
    margin: 0;
}

.sv-search > .sv-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--sv-text-subtle);
    translate: 0 -50%;
    pointer-events: none;
}

.sv-search > .form-control {
    width: 240px;
    padding-left: 36px;
}

/*
 * Kolon görünürlüğü:
 *  - sv-col-wide      yalnızca geniş ekranda (1200px ve üstü) görünür
 *  - sv-col-optional  tablo sıkıştığında (992–1199px) gizlenir; blok düzeninde yeniden görünür
 * Ara genişlikte uzun metin daha erken kesilir.
 */
@media (max-width: 1199.98px) {
    .sv-table .sv-col-wide {
        display: none;
    }

    .sv-ellipsis {
        max-width: 140px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .sv-table .sv-col-optional {
        display: none;
    }
}

/* Dar ekran (yan menünün çekmeceye dönüştüğü genişlik): satırlar etiketli bloklara dönüşür */
@media (max-width: 991.98px) {
    .sv-tablecard > .table-responsive {
        overflow: visible;
    }

    .sv-table,
    .sv-table tbody {
        display: block;
    }

    /* Başlık satırı ekran okuyucular için kalır, görünmez */
    .sv-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .sv-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
        padding: 16px;
    }

    .sv-table tbody tr + tr {
        border-top: 1px solid var(--sv-border);
    }

    .sv-table tbody tr:nth-of-type(even) > td,
    .sv-table:not(.table-borderless) tbody tr:hover > td {
        background-color: transparent;
    }

    .sv-table tbody td {
        display: block;
        height: auto;
        min-width: 0;
        padding: 0;
        overflow-wrap: anywhere;
    }

    table.sv-table > tbody > tr > td {
        text-align: left;
    }

    .sv-ellipsis {
        max-width: 100%;
    }

    .sv-table tbody td[data-label]::before {
        display: block;
        margin-bottom: 2px;
        font-size: 0.875rem;
        line-height: 20px;
        color: var(--sv-text-muted);
        content: attr(data-label);
    }

    /* İlk satır: solda kaydın adı, sağda işlemler */
    .sv-table tbody td.sv-table__lead {
        grid-row: 1;
        grid-column: 1;
        align-self: center;
        font-size: 1rem;
        line-height: 24px;
    }

    .sv-table tbody td.sv-table__actions {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
    }

    .sv-table tbody td.sv-table__full,
    .sv-table tbody td.dataTables_empty,
    .sv-table tbody .sv-table__loading > td {
        grid-column: 1 / -1;
    }

    /* Boş tablo mesajı bloğun ortasında, gereksiz yükseklik olmadan */
    table.dataTable.sv-table > tbody > tr > td.dataTables_empty {
        height: auto;
        padding: 24px 0;
    }

    .sv-table tbody td.sv-table__lead:not([data-label])::before {
        display: none;
    }

    .sv-table .sv-avatar,
    .sv-table__loading .sv-skeleton {
        margin: 0;
    }

    .sv-tablecard__foot {
        padding: 12px 16px;
    }
}

@media (max-width: 767.98px) {
    /* Başlıktaki eylemler alt satıra iner: önce filtre + arama, altında düğmeler */
    .sv-page-actions--wrap {
        flex: 1 1 100%;
        flex-wrap: wrap;
        margin: 0;
    }

    /* Arama, filtre düğmesinin (40px + 8px boşluk) yanında satırın kalanını kaplar */
    .sv-page-actions--wrap > .sv-search {
        flex: 1 1 calc(100% - 3rem);
        min-width: 0;
    }

    .sv-page-actions--wrap > .sv-search > .form-control {
        width: 100%;
    }

    .sv-page-actions--wrap > .btn {
        flex: 1 1 calc(50% - 0.25rem);
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        white-space: nowrap;
    }
}

/* ==========================================================================
   22. Eşleşme istekleri
   Figma'daki "SMMM İstekleri" çizimi: mevcut mali müşavir kartı, bölüm başlığı, limon seçili
   filtre düğmeleri ve istek kartları. Şirket ve mali müşavir sayfaları aynı parçaları kullanır.
   ========================================================================== */

/* Dolu durum düğmesi: sayfadaki tek ve belirgin yıkıcı eylem için (çizimde "Eşleşmeyi Sonlandır") */
.btn-danger.btn-solid {
    --btn-bg: var(--sv-danger-fill);
    --btn-fg: var(--sv-on-solid);
    --btn-bd: var(--sv-danger-fill);
    --btn-hover-bg: var(--sv-danger-fill-hover);
    --btn-hover-fg: var(--sv-on-solid);
    --btn-hover-bd: var(--sv-danger-fill-hover);
    --btn-active-bg: var(--sv-danger-fill-hover);
}

/* Sayfa içi bölüm başlığı (20px/600) */
.sv-section-title {
    margin: calc(var(--sv-gap) + 16px) 0 20px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 28px;
    color: var(--sv-text);
}

/* Sayfa başlığının hemen altındaki bölüm başlığı için üst boşluk gerekmez */
.content-header + section > .sv-section-title:first-child {
    margin-top: 0;
}

/* Bilgi kartı: ikonlu başlık, ikonlu satırlar ve sağda tek eylem */
.sv-infocard > .card-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 20px 24px;
}

.sv-infocard__main {
    display: flex;
    flex: 1 1 320px;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.sv-infocard__title,
.sv-infocard__line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: var(--sv-text);
}

.sv-infocard__title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 28px;
}

.sv-infocard__title .sv-icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 4px;
}

.sv-infocard__line {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 20px;
}

.sv-infocard__line .sv-icon {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.sv-infocard__text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--sv-text-muted);
}

.sv-infocard .sv-skeleton + .sv-skeleton {
    margin-top: 8px;
}

/* Filtre düğmeleri: seçili olan limon (çizimde "Bekleyen") */
.sv-segments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--sv-gap);
}

/* Telefonda tek satır, yana kayar (bir düğme alt satırda yalnız kalmasın) */
@media (max-width: 575.98px) {
    .sv-segments {
        flex-wrap: nowrap;
        margin-right: calc(var(--sv-gutter) * -1);
        padding-right: var(--sv-gutter);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .sv-segments::-webkit-scrollbar {
        display: none;
    }

    .sv-segment {
        flex: none;
    }
}

.sv-segment {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 17px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 22px;
    color: var(--sv-text);
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius-sm);
    cursor: pointer;
    transition: background-color var(--sv-dur-fast) ease, border-color var(--sv-dur-fast) ease;
}

.sv-segment:hover {
    background-color: var(--sv-surface-2);
}

.sv-segment[aria-pressed="true"] {
    color: var(--sv-chip-fg);
    background-color: var(--sv-lime-2);
    border-color: transparent;
}

.sv-segment:focus-visible {
    outline: none;
    box-shadow: var(--sv-focus-ring);
}

.sv-segment__count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sv-segment__count:empty {
    display: none;
}

/* İstek kartları: 358px'lik kartlar, 24px arayla */
.sv-reqgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: var(--sv-gap);
}

.sv-reqgrid > .card {
    margin-bottom: 0;
}

.sv-request {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}

.sv-request__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sv-avatar.sv-avatar--lg {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
}

.sv-request__who {
    flex: 1 1 auto;
    min-width: 0;
}

/* Uzun şirket adı iki satıra kadar görünür, fazlası kesilir */
.sv-request__name {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 700;
    line-height: 24px;
    color: var(--sv-text);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.sv-request__sub {
    margin: 0;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 20px;
    color: var(--sv-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* İki satıra inen mesajda ikon ilk satırın hizasında durur */
.sv-request__message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 40px;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 20px;
    color: var(--sv-text-muted);
}

.sv-request__message .sv-icon {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.sv-request__date {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 16px;
    color: var(--sv-text-muted);
}

.sv-request__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--sv-border);
}

.sv-request .sv-skeleton {
    width: 70%;
    height: 20px;
}

/* Etiket + değer çiftleri (pencere ve detay kartlarında) */
.sv-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 24px;
    margin: 0;
}

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

.sv-field__label {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 24px;
    color: var(--sv-text-muted);
}

.sv-field__value {
    margin: 0;
    line-height: 24px;
    color: var(--sv-text);
    overflow-wrap: anywhere;
}

.sv-field--full {
    grid-column: 1 / -1;
}

/* Değerin altındaki küçük açıklama */
.sv-field__hint {
    margin: 4px 0 0;
    font-size: 0.875rem;
    line-height: 20px;
    color: var(--sv-text-muted);
}

/* Boş durum: kartların yerinde sade bir not */
.sv-empty {
    margin: 0;
    padding: 32px 16px;
    font-size: 0.875rem;
    color: var(--sv-text-muted);
    text-align: center;
}

/* Alan ve düğme yan yana (arama pencereleri) */
.sv-inline-form {
    display: flex;
    gap: 8px;
}

.sv-inline-form > .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.sv-inline-form > .btn {
    flex: none;
}

/* ==========================================================================
   23. Detay sayfası
   Figma'daki şirket çizimleri: solda bilgi kartları (etiket üstte, değer altta; "Şirketler" çizimi),
   sağda 347px'lik kolon: limon ikon kutulu istatistikler, koyu toplam bloğu ve sistem bilgileri
   ("Company Details" çizimi).
   ========================================================================== */

.sv-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 347px;
    gap: var(--sv-gap);
    align-items: start;
}

.sv-detail__main,
.sv-detail__side {
    display: flex;
    flex-direction: column;
    gap: var(--sv-gap);
    min-width: 0;
}

.sv-detail .card {
    margin-bottom: 0;
}

/* Yan yana kartlar aynı yükseklikte (ör. iki grafik kartı) */
.sv-detail--stretch {
    align-items: stretch;
}

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

/* Sade kart başlığı (16px/600); yanında küçük bir etiket ya da düğme durabilir */
.sv-cardtitle {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 24px;
    color: var(--sv-text);
}

/* Kart başlığının yanındaki küçük açıklama (ör. "Son 12 ay") */
.sv-cardmeta {
    font-size: 0.875rem;
    color: var(--sv-text-muted);
}

/* Grafik alanı: kartın içinde sabit yükseklik (Chart.js: responsive, maintainAspectRatio: false) */
.sv-chartbox {
    position: relative;
    height: 320px;
}

.card-header:has(> .sv-cardtitle) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Başlığın yanındaki etiket satırı yükseltmez; yan yana kartların başlıkları aynı hizada kalır */
.card-header > .sv-tag {
    margin-top: -2px;
    margin-bottom: -2px;
}

/* Etiket + değer alanlarının kolon sayısı */
.sv-fields--1 {
    grid-template-columns: minmax(0, 1fr);
}

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

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

@media (max-width: 575.98px) {
    .sv-fields--2,
    .sv-fields--3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sv-field__value.sv-skeleton {
    height: 24px;
}

/* Kart içi grup: küçük limon ikon kutusu + başlık; alanlar başlık metniyle hizalı */
.sv-groups {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sv-group__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 24px;
    color: var(--sv-text);
}

.sv-chip--sm {
    width: 24px;
    height: 24px;
    border-radius: var(--sv-radius-xs);
}

.sv-group > .sv-fields,
.sv-group > .sv-taglist,
.sv-group__note {
    margin-left: 32px;
}

.sv-group > .sv-fields {
    gap: 16px 24px;
}

.sv-group .sv-field__label {
    margin-bottom: 0;
}

.sv-group__note {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.875rem;
    color: var(--sv-text-muted);
}

.sv-taglist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sv-quota__bar--lg {
    height: 8px;
    margin-top: 8px;
}

.sv-quota__bar.is-low .sv-quota__fill {
    background-color: var(--sv-warning-solid);
}

/* İstatistik listesi: 40px limon ikon kutusu, 14px etiket, 20px/700 değer */
/* Satırlar kart başlığıyla aynı hizada başlar */
.sv-statlist {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 4px 0 0;
}

.sv-statlist__item {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--sv-text);
}

a.sv-statlist__item:hover {
    color: var(--sv-text);
    text-decoration: none;
}

a.sv-statlist__item:hover .sv-statlist__label {
    text-decoration: underline;
}

.sv-statlist__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sv-statlist__label {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 20px;
}

.sv-statlist__value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 28px;
    font-variant-numeric: tabular-nums;
}

.sv-statlist__value.sv-skeleton {
    width: 4rem;
}

/* Koyu toplam bloğu (çizimde "Toplam Fiş Tutarı") */
.sv-total {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    padding: 20px 16px;
    color: var(--sv-on-contrast);
    background-color: var(--sv-contrast);
    border-radius: var(--sv-radius);
}

.sv-total__icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
}

.sv-total__icon .sv-icon {
    width: 20px;
    height: 20px;
}

.sv-total .sv-skeleton {
    opacity: 0.35;
}

/* ==========================================================================
   24. Liste sayfası üst parçaları
   Figma'daki "Fişler Sayfası" çizimi: 104px'lik küçük sayı kartları (56px ikon kutusu, 14px etiket,
   24px sayı) ve tablo kartının başlık satırı (başlık + kayıt sayısı solda, araçlar sağda).
   ========================================================================== */

/* Kart sayısı kadar kolon (varsayılan dört; rapor özetleri --sv-cols verir), dar ekranda iki kolon */
.sv-ministats {
    display: grid;
    grid-template-columns: repeat(var(--sv-cols, 4), minmax(0, 1fr));
    gap: var(--sv-gap);
    margin-bottom: var(--sv-gap);
}

@media (max-width: 1199.98px) {
    .sv-ministats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Rapor özetlerindeki tutarlar uzundur; telefonda kartlar tek kolon */
@media (max-width: 575.98px) {
    .sv-ministats--summary {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Sayı kartı aynı zamanda bir filtre düğmesidir: tıklanınca liste o duruma göre süzülür */
.sv-ministat {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    height: 104px;
    padding: 0 24px;
    font-family: inherit;
    text-align: left;
    color: var(--sv-text);
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-card-border);
    border-radius: var(--sv-radius-lg);
    box-shadow: var(--sv-card-shadow);
    cursor: pointer;
}

.sv-ministat:focus-visible {
    outline: 2px solid var(--sv-focus);
    outline-offset: 2px;
}

/* Yalnızca bilgi veren kart (rapor özeti; components/summary_stats.php): tıklanmaz */
.sv-ministat--static {
    cursor: default;
}

/* Seçili durum: mürekkep çerçeve (hangi durumun süzüldüğü kartta görünür) */
.sv-ministat[aria-pressed="true"] {
    border-color: var(--sv-ink);
    box-shadow: 0 0 0 1px var(--sv-ink), var(--sv-card-shadow);
}

.sv-ministat__icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 56px;
    height: 56px;
    color: var(--sv-on-solid);
    border-radius: 14px;
}

.sv-ministat__icon .sv-icon,
.sv-ministat__icon .sv-logo {
    width: 24px;
    height: 24px;
}

/* WhatsApp: marka yeşili kutuda beyaz logo */
.sv-ministat__icon--whatsapp {
    background-color: var(--sv-brand-whatsapp);
}

.sv-ministat__icon--whatsapp .sv-logo {
    color: var(--sv-on-brand);
}

.sv-ministat__icon--brand {
    color: var(--sv-chip-fg);
    background-color: var(--sv-chip-bg);
}

.sv-ministat__icon--success {
    background-color: var(--sv-success-solid);
}

.sv-ministat__icon--warning {
    background-color: var(--sv-warning-solid);
}

.sv-ministat__icon--danger {
    background-color: var(--sv-danger-solid);
}

.sv-ministat__icon--info {
    background-color: var(--sv-info-solid);
}

.sv-ministat__icon--muted {
    color: var(--sv-text-muted);
    background-color: var(--sv-surface-3);
}

/* Koyu temada limon kutu soluk tondadır; diğer tonlar da aynı biçimde açık tonlu kutuda renkli ikon olur */
.dark-mode .sv-ministat__icon--success {
    color: var(--sv-success);
    background-color: var(--sv-success-soft);
}

.dark-mode .sv-ministat__icon--warning {
    color: var(--sv-warning);
    background-color: var(--sv-warning-soft);
}

.dark-mode .sv-ministat__icon--danger {
    color: var(--sv-danger);
    background-color: var(--sv-danger-soft);
}

.dark-mode .sv-ministat__icon--info {
    color: var(--sv-info);
    background-color: var(--sv-info-soft);
}

.dark-mode .sv-ministat__icon--whatsapp {
    background-color: var(--sv-brand-whatsapp-soft);
}

.dark-mode .sv-ministat__icon--whatsapp .sv-logo {
    color: var(--sv-brand-whatsapp);
}

.sv-ministat__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sv-ministat__label {
    font-size: 0.875rem;
    line-height: 20px;
    color: var(--sv-text-muted);
}

.sv-ministat__value {
    font-size: 1.5rem;
    line-height: 32px;
    font-variant-numeric: tabular-nums;
}

.sv-ministat__value.sv-skeleton {
    width: 3rem;
}

/* Telefonda iki kolon: uzun etiket ("Reddedilenler") kartın sağ kenarına dayanmasın */
@media (max-width: 575.98px) {
    .sv-ministat {
        gap: 10px;
        height: 88px;
        padding: 0 14px;
    }

    .sv-ministat__icon {
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .sv-ministat {
        transition: translate var(--sv-dur) var(--sv-ease-out), box-shadow var(--sv-dur) var(--sv-ease-out);
    }

    .sv-ministat:not(.sv-ministat--static):hover {
        translate: 0 -2px;
        box-shadow: var(--sv-card-shadow-hover);
    }

    .sv-ministat[aria-pressed="true"]:hover {
        box-shadow: 0 0 0 1px var(--sv-ink), var(--sv-card-shadow-hover);
    }
}

/* Tablo kartının başlık satırı: başlık + kayıt sayısı solda, arama ve düğmeler sağda */
.sv-tablecard__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 16px 24px;
}

.sv-tablecard__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* DataTables'ın arama kutusu ve düğmeleri başlık satırına taşındığında */
.sv-tablecard__tools .dataTables_filter,
.sv-tablecard__tools .dt-buttons {
    margin: 0;
}

.sv-tablecard__tools .dataTables_filter label {
    margin: 0;
}

.sv-tablecard__tools .dataTables_filter input,
.sv-tablecard div.dataTables_wrapper div.dataTables_filter input {
    width: 220px;
    height: 2.5rem;
    margin: 0;
    font-size: 0.875rem;
    padding-left: 2.1rem;
    background-image: var(--sv-search-icon);
    background-repeat: no-repeat;
    background-position: 0.7rem center;
    background-size: 15px 15px;
}

.sv-tablecard__tools .dt-buttons {
    display: flex;
    gap: 8px;
}

.sv-tablecard__tools .dt-buttons > .btn,
.dt-buttons > .btn,
.dt-buttons > .btn-group > .btn {
    margin: 0;
    border-radius: var(--sv-radius-sm) !important;
}

/* "Kolonlar" gibi açılır düğmelerde Bootstrap'in dolu üçgeni yerine seçim kutularındaki ince ok */
.dt-buttons .dropdown-toggle::after {
    width: 16px;
    height: 16px;
    margin-left: 6px;
    vertical-align: -3px;
    background: var(--sv-select-arrow) center / 16px 16px no-repeat;
    border: 0;
}

.sv-tablecard__foot > .dataTables_length {
    margin: 0;
}

/* Sayfalama ve bilgi satırı kapalıysa alt şerit görünmez */
.sv-tablecard__foot:empty {
    display: none;
}

/* DataTables "yükleniyor" kutusu: kartın ortasında sade bir etiket */
.sv-tablecard div.dataTables_wrapper div.dataTables_processing {
    top: 50%;
    width: auto;
    margin: 0;
    padding: 8px 16px;
    font-size: 0.875rem;
    color: var(--sv-text-body);
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow-sm);
    translate: -50% -50%;
}

.sv-tablecard .dataTables_wrapper {
    position: relative;
}

.sv-tablecard__foot > .dataTables_paginate {
    margin-left: auto;
}

/* Tek satırlık tablo (fiş listeleri): hücreler kırılmaz, uzun adlar kısaltılır */
.sv-table--nowrap th,
.sv-table--nowrap td {
    white-space: nowrap;
}

.sv-table--nowrap td.sv-cell-clip {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 991.98px) {
    .sv-table--nowrap td {
        white-space: normal;
    }

    .sv-table--nowrap td.sv-cell-clip {
        max-width: none;
    }
}

/* Fiş listesindeki "Onayla" penceresi: fiş görseli, özet alanlar, tek satır not */
.sv-approve {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
}

.sv-approve__img {
    display: block;
    max-width: 100%;
    max-height: 240px;
    margin: 0 auto;
    border-radius: var(--sv-radius);
    cursor: zoom-in;
}

.sv-approve__note {
    margin: 0;
    font-size: 0.875rem;
    color: var(--sv-text-muted);
}

/* Hücrede ikinci satır (ör. satıcının altında şirket adı) */
.sv-cell-sub {
    display: block;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 16px;
    color: var(--sv-text-muted);
    text-overflow: ellipsis;
}

/* Blok düzeninde (dar ekran) başlık hücresi etiketiyle tek satırda görünür: "ID: 1156" */
@media (max-width: 991.98px) {
    .sv-table tbody td.sv-table__lead[data-label]::before {
        display: inline;
        margin: 0;
        font-size: inherit;
        line-height: inherit;
        color: inherit;
        content: attr(data-label) ": ";
    }

    .sv-tablecard__head {
        padding: 16px;
    }

    .sv-tablecard__tools {
        width: 100%;
        margin-left: 0;
    }

    .sv-tablecard__tools .dataTables_filter {
        flex: 1 1 160px;
    }

    .sv-tablecard__tools .dataTables_filter label,
    .sv-tablecard div.dataTables_wrapper div.dataTables_filter label {
        display: block;
        width: 100%;
    }

    /* Telefonda arama tam genişlik, altındaki düğmeler eşit genişlikte yan yana */
    .sv-tablecard__tools .dataTables_filter {
        flex-basis: 100%;
    }

    .sv-tablecard__tools .dt-buttons {
        flex: 1 1 100%;
    }

    .sv-tablecard__tools .dt-buttons > .btn {
        flex: 1 1 0;
    }

    .sv-tablecard__tools .dataTables_filter input,
    .sv-tablecard div.dataTables_wrapper div.dataTables_filter input {
        width: 100%;
    }
}

/* ==========================================================================
   25. Form ve kişi sayfaları
   Çizimi olmayan form ekranları (kullanıcı ekleme / düzenleme...) aynı düzeni kullanır: kart içinde
   başlıklı bölümler, iki kolonlu alan ızgarası ve kartın altında düğme çubuğu. Alt sayfaların
   başlığında, listeye dönen bir ok bulunur.
   ========================================================================== */

/* Davet listesi başlığı (components/invitation_list.php): telefonda, birincil düğme varsa ikincil düğmeler
   yalnızca ikon olur ve hepsi tek satıra sığar; birincil düğme yoksa (sistem yöneticisi) etiketler görünür */
@media (max-width: 767.98px) {
    .sv-invite-actions:has(> .btn-primary) > .btn-secondary {
        flex: none;
        width: 40px;
        padding-right: 0;
        padding-left: 0;
    }

    .sv-invite-actions:has(> .btn-primary) > .btn-secondary > .sv-icon {
        margin-right: 0;
    }

    .sv-invite-actions:has(> .btn-primary) .sv-invite-actions__label {
        display: none;
    }
}

/* E-posta şablonu düzenleyicisi: solda HTML kodu, sağda yalıtılmış önizleme (dar ekranda alt alta).
   İki sütunun başlık satırı aynı yükseklikte (40px): kod ve önizleme kutuları aynı hizada başlar. */
.sv-htmleditor {
    display: grid;
    gap: 16px;
}

.sv-htmleditor__pane {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.sv-htmleditor__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
}

.sv-htmleditor__bar label,
.sv-htmleditor__label {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sv-text-body);
}

/* Kayıtlı şablonlar tek satır olabilir: kod satır sonunda kırılır, yana kaymaz
   (Bootstrap'in textarea.form-control { height: auto } kuralının önüne geçer) */
textarea.form-control.sv-htmleditor__code {
    height: 480px;
    font-family: var(--sv-font-mono);
    font-size: 0.8125rem;
    line-height: 20px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    resize: vertical;
}

/* Önizleme 600px genişliğinde çizilir, alana sığmazsa betik ölçekler (html-editor.js) */
.sv-htmleditor__viewport {
    --sv-preview-height: 480px;
    height: var(--sv-preview-height);
    overflow: hidden;
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius-sm);
}

.sv-htmleditor__frame {
    display: block;
    border: 0;
    transform-origin: 0 0;
}

.sv-htmleditor__vars {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    line-height: 20px;
    color: var(--sv-text-muted);
}

.sv-htmleditor__vars code {
    margin-right: 4px;
}

@media (max-width: 575.98px) {
    textarea.form-control.sv-htmleditor__code {
        height: 320px;
    }

    .sv-htmleditor__viewport {
        --sv-preview-height: 360px;
    }
}

@media (min-width: 1200px) {
    .sv-htmleditor {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* Sayfa başlığındaki "listeye dön" oku */
.sv-backlink {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: -2px -4px -2px -6px;
    color: var(--sv-text);
    border-radius: var(--sv-radius-sm);
}

.sv-backlink:hover {
    color: var(--sv-text);
    background-color: var(--sv-surface-3);
}

.sv-backlink .sv-icon {
    width: 18px;
    height: 18px;
}

.sv-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sv-formsection {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sv-formsection + .sv-formsection {
    padding-top: 28px;
    border-top: 1px solid var(--sv-border);
}

.sv-formsection__hint {
    margin: -12px 0 0;
    font-size: 0.875rem;
    line-height: 20px;
    color: var(--sv-text-muted);
}

.sv-formgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
}

.sv-formgrid > .form-group {
    margin-bottom: 0;
}

.sv-formgrid__full {
    grid-column: 1 / -1;
}

/* Etiketin yanındaki "(isteğe bağlı)" notu */
.sv-optional {
    color: var(--sv-text-subtle);
}

/* Girdisi olmayan alanın etiketi (label ile aynı görünüm) */
.sv-formlabel {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    color: var(--sv-text-body);
}

/* Telefon alanının altındaki doğrulama satırı (durum etiketi, SMS düğmesi) */
.sv-phoneverify {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.sv-phoneverify .form-text {
    margin-top: 0;
}

/* Kopyalanacak değer: salt okunur alan + "Kopyala" düğmesi */
.sv-copyfield {
    display: flex;
    gap: 8px;
}

.sv-copyfield .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.sv-copyfield .btn {
    flex: none;
}

/* Tek kolonlu form kartı (yanında bilgi kartı olmayan formlar) fazla genişlemez */
.sv-formcard {
    max-width: 880px;
}

/* Kod ve önizleme yan yana duran formlar (e-posta şablonu) sayfanın genişliğini kullanır */
.sv-formcard--wide {
    max-width: none;
}

/* Değiştirilemeyen alan (ör. şirket yöneticisinin kendi şirketi) */
.sv-static {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin: 0;
    font-size: 0.875rem;
    color: var(--sv-text);
}

.sv-formbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--sv-border);
}

/* Düğmelerin solundaki küçük kayıt bilgisi (ör. "Oluşturulma: ... · Son güncelleme: ...") */
.sv-formbar__meta {
    align-self: center;
    margin-right: auto;
    font-size: 0.875rem;
    color: var(--sv-text-muted);
}

/* Kişi başlığı: büyük avatar, ad, alt satır ve sağda etiketler */
.sv-person {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

/* Temel avatar ölçüsü shell.css içinde ve bu dosyadan sonra yüklenir; ölçü sınıfı bu yüzden çift yazılır */
.sv-avatar.sv-avatar--xl {
    width: 64px;
    height: 64px;
    font-size: 1.25rem;
}

.sv-person__text {
    flex: 1 1 200px;
    min-width: 0;
}

.sv-person__name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 28px;
    color: var(--sv-text);
    overflow-wrap: anywhere;
}

.sv-person__sub {
    margin: 0;
    font-size: 0.875rem;
    line-height: 20px;
    color: var(--sv-text-muted);
    overflow-wrap: anywhere;
}

.sv-person__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sv-person + .sv-fields {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--sv-border);
}

/*
 * Seçim kartları: başlığı ve tek satır açıklaması olan büyük onay kutusu / seçenek düğmesi
 * (ör. "Kişi Ekle" penceresinde "WhatsApp ile", "Uygulama ve panelle"). Gerçek girdi görünmez ama
 * klavyeyle seçilir; seçili kartın kenarı mürekkep, ikon kutusu limon olur.
 *
 *   <div class="sv-choices">
 *     <label class="sv-choice"><input type="checkbox" class="sv-choice__input" ...>
 *       <span class="sv-choice__box"><span class="sv-choice__icon">…</span>
 *         <span class="sv-choice__title">…</span><span class="sv-choice__text">…</span></span></label>
 *   </div>
 * `sv-choices--compact`: ikonsuz, daha alçak kartlar (ör. rol seçimi).
 */
/* Kolon arası form ızgarasıyla aynı (24px): yan yana iki kart üstteki iki alanla hizalı durur */
.sv-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 24px;
}

.sv-choice {
    position: relative;
    display: flex;
    margin: 0;
    cursor: pointer;
}

.sv-choice__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.sv-choice__box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: start;
    column-gap: 12px;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    background-color: var(--sv-surface);
    border: 1px solid var(--sv-border-strong);
    border-radius: var(--sv-radius);
    transition: border-color var(--sv-dur-fast) ease, box-shadow var(--sv-dur-fast) ease, background-color var(--sv-dur-fast) ease;
}

.sv-choice:hover .sv-choice__box {
    background-color: var(--sv-surface-2);
}

.sv-choice__icon {
    display: inline-grid;
    grid-row: 1 / span 2;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--sv-text);
    background-color: var(--sv-surface-2);
    border-radius: 10px;
    transition: background-color var(--sv-dur-fast) ease, color var(--sv-dur-fast) ease;
}

.sv-choice__icon .sv-icon,
.sv-choice__icon .sv-logo {
    width: 18px;
    height: 18px;
}

.sv-choice__title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 22px;
    color: var(--sv-text);
}

.sv-choice__text {
    font-size: 0.8125rem;
    line-height: 18px;
    color: var(--sv-text-muted);
}

.sv-choice__input:checked + .sv-choice__box {
    border-color: var(--sv-ink);
    box-shadow: inset 0 0 0 1px var(--sv-ink);
}

.sv-choice__input:checked + .sv-choice__box .sv-choice__icon {
    color: var(--sv-contrast);
    background-color: var(--sv-lime);
}

/* Marka logolu seçenek seçilince kutu markanın renginde dolar (ör. WhatsApp yeşili, beyaz logo) */
.sv-choice__input:checked + .sv-choice__box .sv-choice__icon--whatsapp {
    background-color: var(--sv-brand-whatsapp);
}

.sv-choice__input:checked + .sv-choice__box .sv-choice__icon--whatsapp .sv-logo {
    color: var(--sv-on-brand);
}

.sv-choice__input:focus-visible + .sv-choice__box {
    box-shadow: var(--sv-focus-ring);
}

.sv-choice__input:checked:focus-visible + .sv-choice__box {
    box-shadow: inset 0 0 0 1px var(--sv-ink), var(--sv-focus-ring);
}

.sv-choice__input:disabled + .sv-choice__box {
    opacity: 0.5;
    cursor: not-allowed;
}

.sv-choice:has(.sv-choice__input:disabled) {
    cursor: not-allowed;
}

.sv-choices--compact .sv-choice__box {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px 14px;
}

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

    .sv-formbar .btn {
        flex: 1 1 auto;
    }
}