/* KAYNAK: dashboard-tasarimi/panel-v2.css — OTOMATİK KOPYA; ELLE DÜZENLEME. Değişiklik kaynakta yapılır, sonra `pnpm --filter @aiyapsin/web tema:sync`. */
/* =====================================================================
   panel-v2.css — ŞİRKET VARSAYILAN panel tasarım dili ("sakin SaaS", 30.10.2026)
   Kabuk kökü: `<div class="app dl-v2" data-renk="…">`. Kapsam `.app.dl-v2` içi (birincil düğme tokenları hariç: :root).
   Dolgulu birincil düğme HER PROJEDE Slate 600 #44516A.
   Bağlantı/seçim/odak rengi PROJE BAZINDA: `data-renk` yoksa tema.css birincili (Ink 900);
   `data-renk="petrol"` (AIyapsın) aşağıdaki palet bloğundan gelir. Yeni palet = yeni blok.
   Mevcut bileşenler token'larla yeni dile geçer; yeni öğeler `v2-` önekli.
   Kurallar: çok açık gri-mavi zemin + beyaz yüzeyler, tek birincil renk
   (proje paleti), renk yalnız durum/anlam için, açık zemin + koyu yazı etiketler,
   noktalı (dot-matrix) mini grafikler, yumuşak gölge, 16px kart yarıçapı.
   ===================================================================== */

/* ---------- Token'lar (açık) ---------- */
.app.dl-v2 {
  --ctl-r: 12px; /* iç içe kontroller eş merkezli: iç yarıçap = --ctl-r − --ctl-inset (tema.css) */
  --bg: #F3F5F8;
  --surface: #FFFFFF;
  --surface-2: #F7F9FB;
  --surface-3: #EEF2F6;
  --border: #E6EAF0;
  --border-strong: #D5DCE5;
  --text: #0F172A;
  --text-2: #475569;
  --text-3: #8A94A6;

  --success: #16A34A; --success-text: #15803D; --success-soft: #E8F7EE;
  --warning: #F59E0B; --warning-text: #B45309; --warning-soft: #FEF5E3;
  --danger:  #DC2626; --danger-text:  #B91C1C; --danger-soft:  #FDECEC;
  --info:    #2563EB; --info-text:    #1D4ED8; --info-soft:    #EAF1FE;
  --violet:  #7C3AED; --violet-text:  #6D28D9; --violet-soft:  #F2EDFE;
  --teal:    #0891B2; --teal-text:    #0E7490; --teal-soft:    #E6F6FA;
  --neutral: #94A3B8; --neutral-text: #64748B; --neutral-soft: #F1F4F8;

  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 20px;
  --sh-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --sh-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .03);
  --sh-md: 0 8px 24px -6px rgba(16, 24, 40, .10), 0 2px 6px -2px rgba(16, 24, 40, .05);

  --v2-ai-from: #3B5BFD;
  --v2-ai-to: #A855F7;
  --v2-dot-off: #E5E9EF;
  background: var(--bg);
  color: var(--text);
}

/* ---------- Token'lar (koyu) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app.dl-v2 {
    --bg: #0B1220; --surface: #111A2B; --surface-2: #142036; --surface-3: #1A2740;
    --border: #22304A; --border-strong: #2E3E5C;
    --text: #E8EDF5; --text-2: #A9B4C7; --text-3: #7D8AA3;
        --success-soft: #0F2E21; --success-text: #4ADE80;
    --warning-soft: #33250B; --warning-text: #FBBF24;
    --danger-soft: #3A1517; --danger-text: #F87171;
    --info-soft: #11264A; --info-text: #93C5FD;
    --violet-soft: #251A45; --violet-text: #C4B5FD;
    --teal-soft: #0D2C36; --teal-text: #67E8F9;
    --neutral-soft: #1A2740; --neutral-text: #A9B4C7;
    --v2-dot-off: #22304A;
  }
}
:root[data-theme="dark"] .app.dl-v2 {
  --bg: #0B1220; --surface: #111A2B; --surface-2: #142036; --surface-3: #1A2740;
  --border: #22304A; --border-strong: #2E3E5C;
  --text: #E8EDF5; --text-2: #A9B4C7; --text-3: #7D8AA3;
    --success-soft: #0F2E21; --success-text: #4ADE80;
  --warning-soft: #33250B; --warning-text: #FBBF24;
  --danger-soft: #3A1517; --danger-text: #F87171;
  --info-soft: #11264A; --info-text: #93C5FD;
  --violet-soft: #251A45; --violet-text: #C4B5FD;
  --teal-soft: #0D2C36; --teal-text: #67E8F9;
  --neutral-soft: #1A2740; --neutral-text: #A9B4C7;
  --v2-dot-off: #22304A;
}


/* ---------- Birincil düğme (şirket varsayılanı, 31.10.2026) ---------- */
/* Dolgulu eylem düğmeleri (Öde, Kaydet, Yeni …) Slate 600; bağlantı/seçim/odak proje birincili. Koyu tema tema.css açık mürekkebi. */
/* Kapsam :root: kabuk dışı sayfalar (ödeme, giriş) ve portal modalları da alır. */
:root { --primary-solid: #44516A; --primary-solid-h: #38445A; --primary-press: #2E3849; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --primary-solid: #C9D3E6; --primary-solid-h: #DCE3EF; --primary-press: #AEB8CC; }
}
:root[data-theme="dark"] { --primary-solid: #C9D3E6; --primary-solid-h: #DCE3EF; --primary-press: #AEB8CC; }

/* ---------- Proje paletleri (bağlantı/seçim/odak/vurgu) ---------- */
/* Petrol — AIyapsın (30.10.2026) */
.app.dl-v2[data-renk="petrol"] {
  --primary: #0E7490; --primary-hover: #0C6580;
  --primary-soft: #E6F4F7; --primary-soft-2: #D3ECF1; --primary-text: #0E7490; --focus: #0E7490;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app.dl-v2[data-renk="petrol"] {
    --primary: #22D3EE; --primary-hover: #67E8F9;
    --primary-soft: #0E2F3A; --primary-soft-2: #13404E; --primary-text: #67E8F9; --focus: #22D3EE;
  }
}
:root[data-theme="dark"] .app.dl-v2[data-renk="petrol"] {
  --primary: #22D3EE; --primary-hover: #67E8F9;
  --primary-soft: #0E2F3A; --primary-soft-2: #13404E; --primary-text: #67E8F9; --focus: #22D3EE;
}
/* Ink — varsayılan (tema.css birincili; OtelSaaS). `data-renk="slate"` aynı sonucu verir, ayrı blok gerekmez. */

/* ---------- Kabuk: sidebar ---------- */
.dl-v2 .sb { background: var(--bg); border-inline-end: 0; }
.dl-v2 .sb-search .input-group { background: var(--surface); border-color: var(--border); border-radius: 10px; }
.dl-v2 .nav-sec { color: var(--text-3); font-size: 11px; letter-spacing: .05em; }
.dl-v2 .nav-link { border-radius: 10px; color: var(--text-2); font-weight: 500; }
.dl-v2 .nav-link:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text); }
.dl-v2 .nav-link.is-active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--sh-sm); }
.dl-v2 .nav-link.is-active > .i { color: var(--primary); }
.dl-v2 .nav-count { background: transparent; color: var(--primary); font-weight: 700; }
.dl-v2 .nav-count.warn { background: var(--warning-soft); color: var(--warning-text); }
.v2-kbd { margin-inline-start: auto; display: inline-flex; gap: 3px; }
.v2-kbd kbd { min-width: 18px; height: 18px; padding-inline: 4px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-3); font: 600 10px/16px var(--font); text-align: center; }

/* ---------- Kabuk: üst çubuk + içerik zemini ---------- */
.dl-v2 .main-col { background: var(--bg); }
.dl-v2 .top { background: color-mix(in srgb, var(--bg) 86%, transparent); border-block-end: 0; padding-inline: 24px; }
.dl-v2 .hotel-btn { border-radius: 12px; border-color: var(--border); background: var(--surface); box-shadow: var(--sh-xs); }
.dl-v2 .hotel-ic { background: var(--primary-soft); color: var(--primary-text); }
.dl-v2 .user-btn { border-radius: 999px; }
.v2-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding-inline: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font-size: var(--fs-sm); font-weight: 500; box-shadow: var(--sh-xs); white-space: nowrap; }
.v2-chip .i { width: 16px; height: 16px; color: var(--primary); }
.v2-ikon-btn { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); box-shadow: var(--sh-xs); text-decoration: none !important; }
.v2-ikon-btn:hover { color: var(--text); border-color: var(--border-strong); }
.v2-ikon-btn .i { width: 17px; height: 17px; }
.v2-ikon-btn.has-dot::after { content: ""; position: absolute; inset-block-start: 8px; inset-inline-end: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 2px solid var(--surface); }
.v2-tema { display: inline-flex; align-items: center; gap: 2px; height: 38px; padding: 3px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--sh-xs); }
.v2-tema button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: var(--text-3); cursor: pointer; }
.v2-tema button[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }
.v2-tema .i { width: 15px; height: 15px; }
.v2-top-sag { display: flex; align-items: center; gap: 8px; }
.dl-v2 .page { padding: 8px 24px 32px; }

/* ---------- Düğmeler ---------- */
.dl-v2 .btn { border-radius: 10px; }
.dl-v2 .btn-primary { box-shadow: 0 1px 2px color-mix(in srgb, var(--primary) 30%, transparent); }
.v2-btn-ai { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding-inline: 14px; border: 0; border-radius: 12px; color: #fff; font-weight: 600; font-size: var(--fs-sm); background: linear-gradient(90deg, var(--v2-ai-from), var(--v2-ai-to)); box-shadow: 0 2px 8px -2px rgba(91, 76, 250, .45); text-decoration: none !important; white-space: nowrap; }
.v2-btn-ai .i { width: 15px; height: 15px; }

/* ---------- Kartlar ---------- */
.dl-v2 .card { border-radius: var(--r-lg); border-color: var(--border); box-shadow: var(--sh-xs); }
.dl-v2 .card-h { padding-block: 16px 8px; }
.dl-v2 .card-h.bordered { border-block-end-color: var(--border); }
.dl-v2 .card-title { font-size: var(--fs-lg); font-weight: 600; }
.dl-v2 .card-title .i { display: none; }
.v2-sub { margin: 2px 0 0; color: var(--text-3); font-size: var(--fs-sm); }

/* ---------- Sayfa başı ---------- */
.v2-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-block: 8px 20px; }
.v2-hero h1 { margin: 0; font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.v2-hero p { margin: 4px 0 0; color: var(--text-2); font-size: var(--fs-md); }
.v2-hero-eylem { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- KPI kartları + noktalı grafik ---------- */
.v2-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-block-end: 16px; }
.v2-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-xs); padding: 16px 18px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; text-decoration: none !important; color: inherit; }
a.v2-kpi:hover { border-color: var(--border-strong); box-shadow: var(--sh-sm); }
.v2-kpi-ust { display: flex; align-items: center; gap: 10px; }
.v2-kpi-ikon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.v2-kpi-ikon .i { width: 17px; height: 17px; }
.v2-kpi-etiket { font-size: var(--fs-md); color: var(--text-2); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-kpi-orta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.v2-kpi-deger { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.v2-kpi-deger small { font-size: var(--fs-md); color: var(--text-3); font-weight: 500; margin-inline-start: 3px; letter-spacing: 0; }
.v2-trend { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-trend .i { width: 13px; height: 13px; }
.v2-trend.iyi { color: var(--success-text); }
.v2-trend.kotu { color: var(--danger-text); }
.v2-trend.notr { color: var(--text-3); }
.v2-kpi-alt { font-size: var(--fs-xs); color: var(--text-3); }
/* Noktalı grafik: her sütun = bir gün; alttan yukarı dolu noktalar */
.v2-dots { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; height: 44px; align-items: end; }
.v2-dots .kol { display: flex; flex-direction: column-reverse; gap: 3px; align-items: center; }
.v2-dots .n { width: 5px; height: 5px; border-radius: 50%; background: var(--v2-dot-off); }
.v2-dots .n.on { background: var(--v2-c, var(--primary)); }
.v2-c-teal   { --v2-c: #0891B2; } .v2-c-teal   .v2-kpi-ikon { background: var(--teal-soft);    color: var(--teal-text); }
.v2-c-green  { --v2-c: #16A34A; } .v2-c-green  .v2-kpi-ikon { background: var(--success-soft); color: var(--success-text); }
.v2-c-amber  { --v2-c: #F59E0B; } .v2-c-amber  .v2-kpi-ikon { background: var(--warning-soft); color: var(--warning-text); }
.v2-c-violet { --v2-c: #7C3AED; } .v2-c-violet .v2-kpi-ikon { background: var(--violet-soft);  color: var(--violet-text); }

/* ---------- Izgara ---------- */
.v2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.v2-yigin { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------- Segment kontrol ---------- */
.v2-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--surface-3); }
.v2-seg a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding-inline: 12px; border-radius: 9px; color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; text-decoration: none !important; white-space: nowrap; }
.v2-seg a[aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: var(--sh-sm); font-weight: 600; }
.v2-seg a span { color: var(--text-3); font-weight: 600; }

/* ---------- Durum etiketi (nokta + yazı) ve hap ---------- */
.v2-durum { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; color: var(--v2-dc, var(--text-2)); }
.v2-durum::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.v2-hap { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding-inline: 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--v2-hb, var(--neutral-soft)); color: var(--v2-hc, var(--neutral-text)); }
.v2-hap.nokta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.t-ok   { --v2-dc: var(--success-text); --v2-hb: var(--success-soft); --v2-hc: var(--success-text); }
.t-uy   { --v2-dc: var(--warning-text); --v2-hb: var(--warning-soft); --v2-hc: var(--warning-text); }
.t-hata { --v2-dc: var(--danger-text);  --v2-hb: var(--danger-soft);  --v2-hc: var(--danger-text); }
.t-bilgi{ --v2-dc: var(--info-text);    --v2-hb: var(--info-soft);    --v2-hc: var(--info-text); }
.t-mor  { --v2-dc: var(--violet-text);  --v2-hb: var(--violet-soft);  --v2-hc: var(--violet-text); }
.t-gri  { --v2-dc: var(--text-3);       --v2-hb: var(--neutral-soft); --v2-hc: var(--neutral-text); }

/* ---------- Liste tablosu (satır kartı) ---------- */
.v2-liste { width: 100%; border-collapse: separate; border-spacing: 0; }
.v2-liste td { padding: 12px 10px; border-block-start: 1px solid var(--border); vertical-align: middle; font-size: var(--fs-md); }
.v2-liste tr:first-child td { border-block-start: 0; }
.v2-liste tr.secili td { background: var(--primary-soft); }
.v2-liste tr.secili td:first-child { border-start-start-radius: 12px; border-end-start-radius: 12px; }
.v2-liste tr.secili td:last-child { border-start-end-radius: 12px; border-end-end-radius: 12px; }
.v2-liste .zaman b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v2-liste .zaman small, .v2-iki small { display: block; color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; }
.v2-iki { min-width: 0; }
.v2-iki b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.v2-iki a { color: inherit; text-decoration: none; }
.v2-iki a:hover b { text-decoration: underline; }
.v2-kisi { display: flex; align-items: center; gap: 10px; min-width: 0; }
.v2-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 700; color: var(--primary-text); background: var(--primary-soft); overflow: hidden; }
.v2-av img { width: 100%; height: 100%; object-fit: cover; }
.v2-av.lg { width: 44px; height: 44px; font-size: 14px; }
.v2-eylem { text-align: end; white-space: nowrap; }
.v2-liste-alt { display: flex; justify-content: space-between; gap: 12px; padding: 12px 10px 0; font-size: var(--fs-xs); color: var(--text-3); }
.v2-liste-alt a { color: var(--primary-text); font-weight: 600; text-decoration: none; }

/* ---------- Sıradaki iş kartı ---------- */
.v2-siradaki-ust { display: flex; align-items: center; gap: 12px; margin-block-end: 14px; }
.v2-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-block-end: 12px; }
.v2-mini > div { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.v2-mini > div.uyari { background: var(--warning-soft); border-color: transparent; }
.v2-mini small { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.v2-mini b { display: block; margin-top: 2px; font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-mini .uyari b { color: var(--warning-text); }
.v2-not { color: var(--text-2); font-size: var(--fs-sm); margin: 0 0 14px; }
.v2-iki-dugme { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v2-iki-dugme .btn { width: 100%; justify-content: center; }

/* ---------- İlgilenmen gerekenler ---------- */
.v2-dikkat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v2-dikkat a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 16px; gap: 12px; align-items: center; padding: 10px 6px; border-radius: 12px; color: inherit; text-decoration: none !important; }
.v2-dikkat a:hover { background: var(--surface-2); }
.v2-dikkat .ik { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--v2-hb); color: var(--v2-hc); }
.v2-dikkat .ik .i { width: 17px; height: 17px; }
.v2-dikkat .say { min-width: 24px; height: 22px; padding-inline: 7px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--v2-hb); color: var(--v2-hc); font-variant-numeric: tabular-nums; }
.v2-dikkat .ok { color: var(--text-3); width: 16px; height: 16px; }

/* ---------- Ajan sağlığı ızgarası ---------- */
.v2-ajanlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.v2-ajan { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); text-decoration: none !important; color: inherit; min-width: 0; }
.v2-ajan:hover { border-color: var(--border-strong); box-shadow: var(--sh-sm); }
.v2-cubuk { height: 4px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.v2-cubuk span { display: block; height: 100%; border-radius: 99px; background: var(--v2-dc, var(--primary)); }
.v2-ajan-alt { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); color: var(--text-3); }

/* ---------- Uyarı bandı ---------- */
.v2-bant { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-block-end: 16px; border-radius: 14px; background: var(--warning-soft); color: var(--text); }
.v2-bant.hata { background: var(--danger-soft); }
.v2-bant .ik { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--warning-text); flex: none; }
.v2-bant.hata .ik { color: var(--danger-text); }
.v2-bant b { display: block; font-size: var(--fs-md); }
.v2-bant small { display: block; color: var(--text-2); font-size: var(--fs-sm); }
.v2-bant .btn { margin-inline-start: auto; }

/* ---------- Boş durum ---------- */
.v2-bos { text-align: center; padding: 28px 12px; color: var(--text-3); font-size: var(--fs-sm); }
.v2-bos b { display: block; color: var(--text); font-size: var(--fs-md); margin-bottom: 4px; }

/* ---------- Giriş hareketi (bulanıktan netleşme) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .dl-v2 .v2-gir { animation: v2Gir .45s var(--ease-out, ease-out) both; }
  .dl-v2 .v2-gir:nth-child(2) { animation-delay: .05s; }
  .dl-v2 .v2-gir:nth-child(3) { animation-delay: .1s; }
  .dl-v2 .v2-gir:nth-child(4) { animation-delay: .15s; }
}
@keyframes v2Gir { from { opacity: 0; filter: blur(6px); transform: translateY(4px); } to { opacity: 1; filter: none; transform: none; } }

/* ---------- Duyarlı ---------- */
@media (max-width: 1280px) { .v2-grid { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 1100px) { .v2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v2-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .v2-kpis { grid-template-columns: minmax(0, 1fr); }
  .dl-v2 .page { padding-inline: 16px; }
  .v2-hero h1 { font-size: 22px; line-height: 28px; }
  .v2-liste .gizle-sm { display: none; }
  .v2-chip.gizle-sm, .v2-tema.gizle-sm { display: none; }
}

/* =====================================================================
   OFFCANVAS (sağdan çekmece) — `.v2-oc`
   ===================================================================== */
.v2-oc { position: fixed; inset: 0; z-index: 90; }
.v2-oc-scrim { position: absolute; inset: 0; background: rgba(15, 23, 42, .28); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.v2-oc-panel { position: absolute; inset-block: 12px; inset-inline-end: 12px; width: min(460px, calc(100vw - 24px)); display: flex; flex-direction: column; background: var(--surface); border-radius: 20px; box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .28); outline: none; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .v2-oc-scrim { animation: v2Sol .2s ease-out both; }
  .v2-oc-panel { animation: v2Kay .32s cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes v2Sol { from { opacity: 0; } to { opacity: 1; } }
@keyframes v2Kay { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.v2-oc-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-block-end: 1px solid var(--border); }
.v2-oc-govde { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 18px; }
.v2-oc-alt { display: flex; flex-direction: column; gap: 10px; padding: 14px 20px 18px; border-block-start: 1px solid var(--border); }
.v2-oc-alt small { color: var(--text-3); font-size: var(--fs-xs); }
.v2-oc-satir { display: flex; justify-content: space-between; align-items: baseline; margin-block-end: 8px; }
.v2-oc-sayac { color: var(--primary-text); font-size: var(--fs-sm); font-weight: 600; }
.v2-oc-etiket { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--text-3); margin-block-end: 8px; }

/* Parçalı ilerleme çubuğu */
.v2-parca { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.v2-parca span { height: 5px; border-radius: 99px; background: var(--surface-3); }
.v2-parca span.on { background: var(--success); }
.v2-parca span.yari { background: linear-gradient(90deg, var(--info) 55%, var(--surface-3) 55%); }
.v2-parca span.hata { background: var(--danger); }

/* Kontrol listesi (adım satırları) */
.v2-kontrol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.v2-kontrol li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; }
.v2-kontrol .ik { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-3); }
.v2-kontrol .ik .i { width: 17px; height: 17px; }
.v2-kontrol .d-tamam .ik { background: var(--success-soft); color: var(--success-text); }
.v2-kontrol .d-aktif .ik { background: var(--info-soft); color: var(--info-text); }
.v2-kontrol .d-hata .ik { background: var(--danger-soft); color: var(--danger-text); }
.v2-kontrol .d-bekliyor .v2-iki b { color: var(--text-2); }

/* Vurgulu tutar kartı */
.v2-tutar { border: 1.5px solid var(--primary); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.v2-tutar-ust { display: flex; align-items: center; gap: 12px; }
.v2-tutar-ust .ik { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-text); flex: none; }
.v2-tutar-ust strong { margin-inline-start: auto; font-size: 26px; line-height: 30px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v2-tutar-kirilim { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-3); }
.v2-tutar-kirilim > div { padding: 8px 10px; border-radius: 9px; }
.v2-tutar-kirilim > div:last-child { background: var(--surface); box-shadow: var(--sh-sm); }
.v2-tutar-kirilim small { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.v2-tutar-kirilim b { font-variant-numeric: tabular-nums; }
.v2-tutar-not { margin: 0; display: flex; gap: 6px; align-items: center; color: var(--text-3); font-size: var(--fs-xs); }
.v2-tutar-not .i { color: var(--info); }

/* Zaman çizelgesi kutuları */
.v2-zaman { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.v2-zaman > div { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); min-width: 0; }
.v2-zaman > div.vurgu { background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary-soft-2); }
.v2-zaman small { display: block; color: var(--text-3); font-size: 11px; }
.v2-zaman b { display: block; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .v2-zaman { grid-template-columns: 1fr 1fr; } .v2-oc-panel { inset: 0; width: 100%; border-radius: 0; } }

/* =====================================================================
   MODAL — `.v2-modal`
   ===================================================================== */
.v2-modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; }
.v2-modal-scrim { position: absolute; inset: 0; background: rgba(15, 23, 42, .32); backdrop-filter: blur(2px); }
.v2-modal-kutu { position: relative; width: min(520px, 100%); background: var(--surface); border-radius: 20px; box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .3); overflow: hidden; }
.v2-modal-bas { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 8px; }
.v2-modal-bas .ik { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--v2-hb, var(--primary-soft)); color: var(--v2-hc, var(--primary-text)); flex: none; }
.v2-modal-bas h3 { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
.v2-modal-bas p { margin: 4px 0 0; color: var(--text-2); font-size: var(--fs-sm); }
.v2-modal-govde { padding: 8px 20px 16px; }
.v2-modal-alt { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; background: var(--surface-2); border-block-start: 1px solid var(--border); }

/* =====================================================================
   ADIM ÇUBUĞU (stepper) — `.v2-adimlar`
   ===================================================================== */
.v2-adimlar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.v2-adimlar > div { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; min-width: 0; }
.v2-adimlar .no { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 700; background: var(--surface-3); color: var(--text-3); }
.v2-adimlar .tamam .no { background: var(--success); color: #fff; }
.v2-adimlar .aktif { background: var(--primary-soft); }
.v2-adimlar .aktif .no { background: var(--primary); color: #fff; }
.v2-adimlar b { display: block; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-adimlar small { display: block; color: var(--text-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =====================================================================
   KANBAN — `.v2-kanban`
   ===================================================================== */
.v2-kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.v2-kolon { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.v2-kolon-bas { display: flex; align-items: center; gap: 8px; }
.v2-kolon-bas::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--v2-dc, var(--primary)); }
.v2-kolon-bas b { font-size: var(--fs-md); }
.v2-kolon-bas .say { margin-inline-start: auto; min-width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 600; }
.v2-kolon > small { color: var(--text-3); font-size: var(--fs-xs); margin-top: -6px; }
.v2-kart { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.v2-kart .alt { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-size: var(--fs-xs); }

/* =====================================================================
   FORM ÖĞELERİ — input, select, textarea, toggle, onay kutusu
   ===================================================================== */
.dl-v2 .input, .dl-v2 .select, .dl-v2 .textarea, .v2-input { border-radius: var(--ctl-r); border-color: var(--border); background-color: var(--surface); } /* background-color: select açılır oku (background-image) silinmesin */
.dl-v2 .input-group { border-radius: var(--ctl-r); }
/* sm / dokunmatik kapsamda dış yarıçap tema.css `.ctl-sm` (--r-sm) / `.ctl-touch` değerine döner; iç düğme yarıçapı --ctl-r − --ctl-inset. */
.dl-v2 .ctl-touch { --ctl-r: 12px; }
.dl-v2 .input-group > .btn { border-radius: calc(var(--ctl-r) - var(--ctl-inset)); }
.dl-v2 .input:focus, .dl-v2 .select:focus, .dl-v2 .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.v2-alan { display: flex; flex-direction: column; gap: 6px; }
.v2-alan > span { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.v2-alan > small { color: var(--text-3); font-size: var(--fs-xs); }
.v2-input { height: 40px; padding-inline: 12px; border: 1px solid var(--border); color: var(--text); font: inherit; font-size: var(--fs-md); width: 100%; }
.v2-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.v2-toggle { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; }
.v2-toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.v2-toggle span { position: absolute; inset: 0; border-radius: 99px; background: var(--border-strong); transition: background .15s; pointer-events: none; }
.v2-toggle span::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.v2-toggle input:checked + span { background: var(--primary); }
.v2-toggle input:checked + span::after { transform: translateX(16px); }
.v2-toggle input:focus-visible + span { box-shadow: 0 0 0 3px var(--primary-soft); }
.v2-anahtar-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.v2-onay { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-md); }
.v2-onay input { width: 18px; height: 18px; accent-color: var(--primary); }

/* =====================================================================
   SEKMELER, TOAST, İPUCU, SAYFALAMA, AÇILIR MENÜ
   ===================================================================== */
.v2-sekmeler { display: flex; gap: 4px; border-block-end: 1px solid var(--border); }
.v2-sekmeler a { position: relative; padding: 10px 12px; color: var(--text-2); font-size: var(--fs-md); font-weight: 500; text-decoration: none !important; }
.v2-sekmeler a[aria-current="page"] { color: var(--text); font-weight: 600; }
.v2-sekmeler a[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 8px; inset-block-end: -1px; height: 2px; border-radius: 2px; background: var(--primary); }
.v2-toast { display: flex; align-items: flex-start; gap: 12px; width: min(380px, 100%); padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-md); }
.v2-toast .ik { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--v2-hb); color: var(--v2-hc); flex: none; }
.v2-toast b { display: block; font-size: var(--fs-md); }
.v2-toast small { color: var(--text-2); font-size: var(--fs-sm); }
.v2-ipucu { position: relative; display: inline-block; padding: 6px 10px; border-radius: 8px; background: #0F172A; color: #fff; font-size: var(--fs-xs); font-weight: 500; }
.v2-sayfala { display: flex; align-items: center; gap: 4px; }
.v2-sayfala a, .v2-sayfala span { min-width: 32px; height: 32px; padding-inline: 8px; border-radius: 10px; display: grid; place-items: center; font-size: var(--fs-sm); color: var(--text-2); text-decoration: none !important; border: 1px solid transparent; }
.v2-sayfala a:hover { background: var(--surface-2); }
.v2-sayfala [aria-current="page"] { background: var(--surface); border-color: var(--border); color: var(--text); font-weight: 600; box-shadow: var(--sh-xs); }
.v2-menu { width: 220px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-md); }
.v2-menu a, .v2-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-md); text-align: start; text-decoration: none !important; cursor: pointer; }
.v2-menu a:hover, .v2-menu button:hover { background: var(--surface-2); }
.v2-menu .i { width: 16px; height: 16px; color: var(--text-3); }
.v2-menu .tehlike { color: var(--danger-text); }
.v2-menu .tehlike .i { color: var(--danger-text); }
.v2-menu hr { border: 0; height: 1px; background: var(--border); margin: 6px 4px; }

/* Küçük düzeltmeler */
.v2-ipucu { align-self: flex-start; }
.dl-v2 .sb-search .input-group { align-items: center; }
.v2-kbd { align-self: center; padding-inline-end: 6px; }

/* =====================================================================
   KATMANLI ZEMİN (referans: dış zemin → yuvarlatılmış sidebar/içerik
   panelleri → beyaz kartlar). Sidebar daraltma düğmesi korunur.
   ===================================================================== */
.app.dl-v2 { --v2-dis: #EBEEF3; --v2-panel: #F6F8FA; --v2-panel-bd: #E4E8EE; background: var(--v2-dis); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app.dl-v2 { --v2-dis: #070C16; --v2-panel: #0D1524; --v2-panel-bd: #1B2740; } }
:root[data-theme="dark"] .app.dl-v2 { --v2-dis: #070C16; --v2-panel: #0D1524; --v2-panel-bd: #1B2740; }
html:has(.app.dl-v2), body:has(.app.dl-v2) { background: var(--v2-dis, #EBEEF3); }
.dl-v2 .main-col { background: transparent; }
.dl-v2 .top { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; }
.dl-v2 .sb { background: var(--v2-panel); }
.dl-v2 .sb-search .input-group { background: var(--surface); }
.dl-v2 .nav-link:hover { background: color-mix(in srgb, var(--surface) 75%, transparent); }
@media (min-width: 1024px) {
  .dl-v2 .sb { position: sticky; inset-block-start: 12px; height: calc(100vh - 24px); margin: 12px 0 12px 12px; border: 1px solid var(--v2-panel-bd); border-radius: 20px; }
  .dl-v2 .main-col { padding-inline-end: 12px; }
  .dl-v2 .top { padding-inline: 16px 4px; }
  .dl-v2 .page { background: var(--v2-panel); border: 1px solid var(--v2-panel-bd); border-radius: 20px; margin-block-end: 12px; margin-inline-start: 12px; padding: 24px 24px 32px; min-height: calc(100vh - var(--top-h) - 24px); }
  .dl-v2.is-collapsed .sb-head .sb-collapse { inset-inline-end: -14px; }
}
@media (max-width: 1023px) {
  .dl-v2 .page { background: var(--v2-panel); border-radius: 20px 20px 0 0; border-top: 1px solid var(--v2-panel-bd); }
}

/* Liste tablosu kart içinde kalsın (dar ekranda yatay kaydır). */
.v2-tablo-kap { overflow-x: auto; margin-inline: -4px; padding-inline: 4px; }
.v2-liste .v2-durum { white-space: normal; }
@media (min-width: 1024px) { .dl-v2 .main-col { padding-inline-end: 0; } .dl-v2 .page { margin-inline-end: 12px; } .dl-v2 .top { padding-inline-end: 16px; } }
@media (min-width: 1024px) { .dl-v2 .page { width: auto; max-width: none; box-sizing: border-box; } }
.v2-oc-scrim { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); background: rgba(15, 23, 42, .22); }
.v2-oc-panel .v2-zaman { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Offcanvas v2.1 (referans çekmece düzeni) ---------- */
.v2-oc-panel { width: min(480px, calc(100vw - 24px)); border-radius: 24px; }
.v2-oc-bas { display: grid; grid-template-columns: 44px minmax(0, 1fr) 32px; align-items: center; gap: 14px; padding: 22px 22px 16px; border-block-end: 0; }
.v2-oc-durum { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--v2-hb); color: var(--v2-hc); }
.v2-oc-durum .i { width: 22px; height: 22px; }
.v2-oc-baslik { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; }
.v2-oc-kapat { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.v2-oc-kapat:hover { background: var(--surface-2); color: var(--text); }
.v2-oc-govde { padding: 4px 22px 18px; gap: 20px; }
.v2-bilgi-kutu { background: var(--surface-2); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.v2-bilgi-ust { display: flex; align-items: center; gap: 14px; }
.v2-bilgi-ust .v2-iki b { font-size: var(--fs-lg); font-weight: 600; }
.v2-bilgi-ust .v2-iki small { font-size: var(--fs-md); color: var(--text-2); white-space: normal; }
.v2-takvim { width: 62px; height: 62px; flex: none; border-radius: 14px; background: var(--primary-solid); color: var(--on-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.v2-takvim small { font-size: 11px; font-weight: 600; letter-spacing: .06em; opacity: .9; }
.v2-takvim b { font-size: 24px; font-weight: 700; margin-top: 4px; }
.v2-kv { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.v2-kv > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center; }
.v2-kv dt { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: var(--fs-md); }
.v2-kv dt .i { width: 17px; height: 17px; color: var(--text-3); }
.v2-kv dd { margin: 0; color: var(--text); font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-oc-govde .v2-oc-etiket { margin-block-end: 4px; }
.v2-kontrol .ik { border-radius: 10px; }
.v2-kontrol .d-tamam .ik { background: var(--success-soft); color: var(--success-text); }
.v2-kontrol .d-aktif .ik { background: var(--teal-soft); color: var(--teal-text); }
.v2-kontrol .d-bekliyor .ik { background: var(--surface-2); color: var(--text-3); }
.v2-kontrol .d-bekliyor .v2-hap { background: transparent; font-weight: 500; }
/* Orta genişlikte liste tablosu taşmasın: tutar sütunu gizlenir, ad/alt satır kısalır. */
@media (max-width: 1400px) { .v2-liste .gizle-sm { display: none; } }
.v2-liste .v2-iki small { overflow: hidden; text-overflow: ellipsis; }
.v2-liste td:nth-child(2) { max-width: 260px; }
/* Panel seçici: metin genişlesin, alt-üst oku sağ kenara yaslansın. */
.dl-v2 .hotel-txt { flex: 1; }
.dl-v2 .hotel-btn > .i:last-child { margin-inline-start: auto; }
/* Üst çubuk: kaydırma başlayınca %90 beyaz + altındaki içerik bulanık. */
.dl-v2 .top { transition: background-color .2s ease, box-shadow .2s ease, backdrop-filter .2s ease; }
.dl-v2 .top.is-kaydi { background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--border), 0 6px 18px -12px rgba(15, 23, 42, .25); }
@media (min-width: 1024px) { .dl-v2 .top.is-kaydi { border-radius: 0 0 16px 16px; } }

/* Kullanıcı menüsü: dil hapları */
.v2-dil { display: flex; gap: 6px; width: 100%; }
.v2-dil button { flex: 1; height: 30px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.v2-dil button:hover { background: var(--surface-2, var(--surface)); }
.v2-dil button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.v2-dil button[aria-checked="true"] { background: var(--primary-soft); border-color: var(--primary-soft-2); color: var(--primary-text); font-weight: 600; }

/* ---------- Kota/uyarı kartı (kenar menü altı; kullanıcı kararı 30.10.2026; OtelSaaS shell/QuotaCard.tsx) ----------
   Uyarı bandı sayfa üstünde durmaz (kullanıcı kararı 30.10.2026): kenar menünün en altında kompakt tek kart; menü kayarken sabit (`.sb-nav` kayar, kart `flex: none`).
   Renk yalnız anlam için: uyarı amber, kritik (≥ %95) kırmızı hap zemini. Daraltılmış menüde yalnız simge (ipucu `data-tip`). */
.sb-quota { flex: none; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; margin: 0 12px 12px; padding: 10px; border-radius: 14px; background: var(--warning-soft); color: var(--text); }
.sb-quota.danger { background: var(--danger-soft); }
.sb-quota-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--warning-text); }
.sb-quota.danger .sb-quota-ic, .sb-quota-ic.danger { color: var(--danger-text); }
.sb-quota-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-quota-txt b { font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.sb-quota-txt small { color: var(--text-2); font-size: var(--fs-xs); }
.sb-quota-txt a { font-size: var(--fs-xs); font-weight: 600; color: var(--text); text-decoration: underline; width: max-content; }
.sb-quota.is-collapsed { display: flex; justify-content: center; margin: 0 0 12px; padding: 0; background: transparent; }
.sb-quota-ic { text-decoration: none !important; }
.sb-quota.is-collapsed .sb-quota-ic { width: 40px; height: 40px; background: var(--warning-soft); color: var(--warning-text); }
.sb-quota.is-collapsed .sb-quota-ic.danger { background: var(--danger-soft); color: var(--danger-text); }