/* ═══════════════════════════════════════════════════════════════════════════
 * theme.css — yumuşak renk paleti ve tema rengi (Rasyon.Web ve Rasyon.App ortak; portal.css'ten sonra yüklenir)
 * Seçilen tema rengi --app-hl / --pt-accent (_ThemeHead uygular, js/portal/theme.js seçtirir).
 * ═══════════════════════════════════════════════════════════════════════════ */
:root { --app-hl: #6F9A82; --app-hl-rgb: 111, 154, 130; }
/* ── Yumuşak palet (Bovisio düzeni, kırık / pastel tonlar): temanın bileşenleri renkleri bu değişkenlerden alır ──
 *  ana işlem mavi #6C98D6 · yeşil (adaçayı) #7FB58A · camgöbeği #6BB3C2 · kehribar #E8B565 · gül kırmızısı #D97B82
 *  arduvaz #5E6672 · yazı #2E3440 / #5B6470 / #929AA5 · kenarlık #E7EAEE · zemin #F3F5F4
 *  ikincil / bağlantı rengi seçilen tema rengini izler (--pt-accent; _AppHead) */
:root, [data-bs-theme=light] {
  --vz-primary: #6C98D6; --vz-primary-rgb: 108, 152, 214; --vz-primary-text-emphasis: #456FA8;
  --vz-primary-bg-subtle: #EDF3FB; --vz-primary-border-subtle: #C9DAF2;
  --vz-success: #7FB58A; --vz-success-rgb: 127, 181, 138; --vz-success-text-emphasis: #4E8259;
  --vz-success-bg-subtle: #EEF6F0; --vz-success-border-subtle: #CBE3D0;
  --vz-info: #6BB3C2; --vz-info-rgb: 107, 179, 194; --vz-info-text-emphasis: #3F8696;
  --vz-info-bg-subtle: #EBF5F7; --vz-info-border-subtle: #C4E2E8;
  --vz-warning: #E8B565; --vz-warning-rgb: 232, 181, 101; --vz-warning-text-emphasis: #8F6220;
  --vz-warning-bg-subtle: #FCF4E6; --vz-warning-border-subtle: #F3DDB5;
  --vz-danger: #D97B82; --vz-danger-rgb: 217, 123, 130; --vz-danger-text-emphasis: #A9474F;
  --vz-danger-bg-subtle: #FBEDEE; --vz-danger-border-subtle: #F1C9CC;
  --vz-dark: #5E6672; --vz-dark-rgb: 94, 102, 114; --vz-dark-text-emphasis: #3B424C;
  --vz-dark-bg-subtle: #ECEEF1; --vz-dark-border-subtle: #D3D8DE;
  --vz-light: #F4F6F7; --vz-light-rgb: 244, 246, 247;
  --vz-secondary-text-emphasis: color-mix(in srgb, var(--pt-accent) 75%, #000);
  --vz-secondary-bg-subtle: color-mix(in srgb, var(--pt-accent) 12%, #fff);
  --vz-secondary-border-subtle: color-mix(in srgb, var(--pt-accent) 35%, #fff);
  --vz-body-color: #5B6470; --vz-body-color-rgb: 91, 100, 112;
  --vz-heading-color: #2E3440; --vz-emphasis-color: #2E3440;
  --vz-secondary-color: #929AA5; --vz-tertiary-color: #B3BAC3;
  --vz-border-color: #E7EAEE; --vz-border-color-translucent: rgba(94, 102, 114, .12);
  --vz-light-bg-subtle: #F8F9FA; --vz-tertiary-bg: #F6F7F8; --vz-secondary-bg: #FFFFFF;
}
/* Düz düğmeler: temada renkler sabit yazılıdır; yumuşak tonlar (üzerine gelince / basınca biraz koyulaşır) */
body .btn-primary, body .btn-success, body .btn-info, body .btn-warning,
body .btn-danger, body .btn-dark, body .btn-secondary {
  --vz-btn-color: #fff; --vz-btn-hover-color: #fff; --vz-btn-active-color: #fff; --vz-btn-disabled-color: #fff;
  --vz-btn-border-color: var(--b); --vz-btn-bg: var(--b);
  --vz-btn-hover-bg: color-mix(in srgb, var(--b) 90%, #000); --vz-btn-hover-border-color: color-mix(in srgb, var(--b) 90%, #000);
  --vz-btn-active-bg: color-mix(in srgb, var(--b) 82%, #000); --vz-btn-active-border-color: color-mix(in srgb, var(--b) 82%, #000);
  --vz-btn-disabled-bg: var(--b); --vz-btn-disabled-border-color: var(--b);
  box-shadow: 0 2px 6px rgba(var(--rgb), .25);
}
body .btn-primary { --b: #6C98D6; --rgb: 108, 152, 214; --vz-btn-focus-shadow-rgb: 108, 152, 214; }
body .btn-success { --b: #7FB58A; --rgb: 127, 181, 138; --vz-btn-focus-shadow-rgb: 127, 181, 138; }
body .btn-info { --b: #6BB3C2; --rgb: 107, 179, 194; --vz-btn-focus-shadow-rgb: 107, 179, 194; }
body .btn-warning { --b: #E8B565; --rgb: 232, 181, 101; --vz-btn-focus-shadow-rgb: 232, 181, 101; --vz-btn-color: #5A3F12; --vz-btn-hover-color: #4A330E; --vz-btn-active-color: #4A330E; }
body .btn-danger { --b: #D97B82; --rgb: 217, 123, 130; --vz-btn-focus-shadow-rgb: 217, 123, 130; }
body .btn-dark { --b: #5E6672; --rgb: 94, 102, 114; --vz-btn-focus-shadow-rgb: 94, 102, 114; }
body .btn-secondary { --b: var(--pt-accent); --rgb: var(--pt-accent-rgb); --vz-btn-focus-shadow-rgb: var(--pt-accent-rgb); }
/* Soluk düğmeler (btn-soft-*): ikincil olan seçilen tema rengini izler */
body .btn-soft-secondary { --vz-btn-color: var(--vz-secondary-text-emphasis); --vz-btn-bg: rgba(var(--pt-accent-rgb), .13); --vz-btn-hover-bg: var(--pt-accent); --vz-btn-active-bg: var(--pt-accent); }
/* Tablo başlıkları ve açık zeminler */
body .table-light, body .table-light > th, body .table-light > td { --vz-table-bg: #F6F7F8; --vz-table-color: #5B6470; }
body .text-muted { color: #929AA5 !important; }
/* Seçili sekme / bölmeli seçim: tema rengi */
body .nav-pills .nav-link.active, body .btn-check:checked + .btn-outline-secondary { background: var(--app-hl); border-color: var(--app-hl); color: #fff; }

/* Web sol menüsü: tema renginin çok koyu tonu; seçili öğe ve simgeler tema renginde */
html[data-sidebar=dark], html[data-theme][data-sidebar=dark] {
  --vz-vertical-menu-bg: color-mix(in srgb, var(--app-hl) 30%, #1E2227);
  --vz-vertical-menu-border: color-mix(in srgb, var(--app-hl) 30%, #1E2227);
  --vz-vertical-menu-item-active-bg: rgba(var(--app-hl-rgb), .30);
  --pt-menu-accent: color-mix(in srgb, var(--app-hl) 55%, #fff);
}

/* Web üst çubuğundaki tema rengi menüsü */
.pt-theme-dot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: var(--app-hl); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--vz-border-color); }
#ptThemeMenu { min-width: 200px; }
#ptThemeMenu .dropdown-item { display: flex; align-items: center; gap: 10px; }
#ptThemeMenu .pt-swatch { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
#ptThemeMenu .mdi-check { margin-left: auto; color: var(--app-hl); visibility: hidden; }
#ptThemeMenu .active { background: rgba(var(--app-hl-rgb), .1); color: var(--vz-heading-color); font-weight: 600; }
#ptThemeMenu .active .mdi-check { visibility: visible; }
/* Hesabım → Görünüm: tema rengi seçenekleri (adlı kartlar) */
.pt-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; max-width: 760px; }
.pt-theme-opt {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--vz-border-color); border-radius: 12px;
  background: var(--vz-secondary-bg); color: var(--vz-heading-color); font-weight: 500; text-align: left; transition: border-color .15s, box-shadow .15s;
}
.pt-theme-opt:hover { border-color: rgba(var(--app-hl-rgb), .5); }
.pt-theme-sw { flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.pt-theme-name { flex: 1; min-width: 0; }
.pt-theme-ok { font-size: 20px; color: var(--app-hl); visibility: hidden; }
.pt-theme-opt.active { border-color: var(--app-hl); box-shadow: 0 0 0 3px rgba(var(--app-hl-rgb), .15); }
.pt-theme-opt.active .pt-theme-ok { visibility: visible; }

/* ═══ Kart sekmeleri (Hesabım, Sistem yönetimi, Yemlerim…): simge + yazı tek satır, seçili sekme tema renginde alt çizgi.
   Sığmazsa kaydırma çubuğu görünmeden yana kayar. Telefonda (< 576 px) portal.css'teki iki sütunlu düğmeler geçerlidir. ═══ */
@media (min-width: 576px) {
  .card-header-tabs.nav-tabs-custom {
    display: flex; flex-wrap: nowrap !important; gap: 2px; margin: 0 !important; padding: 6px 12px 0 !important;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-bottom: 1px solid var(--vz-border-color) !important;
  }
  .card-header-tabs.nav-tabs-custom::-webkit-scrollbar { display: none; }
  .card-header-tabs.nav-tabs-custom .nav-item { flex: none; margin: 0; }
  .card-header-tabs.nav-tabs-custom .nav-link {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; margin: 0 0 -1px; padding: 12px 14px 11px;
    border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0; background: transparent !important;
    color: var(--vz-secondary-color); font-weight: 500; font-size: 13.5px; line-height: 1.2; transition: color .15s, border-color .15s;
  }
  .card-header-tabs.nav-tabs-custom .nav-link::after { display: none !important; }
  .card-header-tabs.nav-tabs-custom .nav-link i { display: inline-block; margin: 0 !important; font-size: 17px; line-height: 1; opacity: .85; }
  .card-header-tabs.nav-tabs-custom .nav-link:hover { color: var(--vz-heading-color); }
  .card-header-tabs.nav-tabs-custom .nav-link.active { color: var(--app-hl); border-bottom-color: var(--app-hl) !important; font-weight: 600; }
  .card-header-tabs.nav-tabs-custom .nav-link.active i { opacity: 1; }
  .card-header-tabs.nav-tabs-custom .nav-link .badge {
    margin: 0; padding: 3px 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
    background: var(--vz-light) !important; color: var(--vz-secondary-color) !important;
  }
  .card-header-tabs.nav-tabs-custom .nav-link.active .badge { background: rgba(var(--app-hl-rgb), .14) !important; color: var(--app-hl) !important; }
}

/* ═══ Bölmeli seçici (Paketim → Aylık / Yıllık): yuvarlak zemin, seçili bölüm beyaz ve gölgeli ═══ */
.pt-segment { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--vz-light); box-shadow: inset 0 0 0 1px var(--vz-border-color); }
.pt-segment > .btn {
  display: inline-flex; align-items: center; gap: 6px; border: 0 !important; border-radius: 999px !important; padding: 6px 14px;
  background: transparent !important; color: var(--vz-secondary-color) !important; font-weight: 500; box-shadow: none !important;
}
.pt-segment > .btn:hover { color: var(--vz-heading-color) !important; }
.pt-segment > .btn.active { background: #fff !important; color: var(--vz-heading-color) !important; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12) !important; }
.pt-segment > .btn .badge { font-size: 10.5px; font-weight: 600; }

/* Bağlantı rengi tema renginden (_ThemeHead: --pt-link-l / --pt-link-d). Koyu tema renklerinde (kahve, orman yeşili)
   karanlık modda bağlantılar arka plana karışmasın diye açılmış ton kullanılır */
html { --vz-link-color: var(--pt-link-l, #6F9A82) !important; --vz-link-color-rgb: var(--pt-link-l-rgb, 111, 154, 130) !important; }
html[data-bs-theme=dark] { --vz-link-color: var(--pt-link-d, #b7ccc0) !important; --vz-link-color-rgb: var(--pt-link-d-rgb, 183, 204, 192) !important; }