/**
 * color.css — projenin renk kuralları. Light ve dark AYNI dosyayı kullanır;
 * değerler theme.css'teki token'lardan gelir. Buraya doğrudan hex yazma.
 */

body {
  background-color: var(--app-body-bg);
  color: var(--app-text);
}

a {
  color: var(--app-text);
}

a:hover {
  color: var(--app-link-hover);
}

/* Scrollbar definitions moved to modern_overrides.css for consistency */

::-moz-selection {
  color: var(--app-selection-fg);
  background-color: var(--app-selection-bg);
}

::selection {
  color: var(--app-selection-fg);
  background-color: var(--app-selection-bg);
}

.app-content {
  background-color: var(--app-bg);
}

.line-head {
  border-bottom: 1px solid var(--app-border);
}

.app-header {
  background-color: var(--app-shell);
}

.app-header__logo {
  color: var(--app-shell-text);
}

.app-header__logo:focus,
.app-header__logo:hover {
  color: var(--app-shell-text);
}

.app-sidebar__toggle {
  color: var(--app-shell-text);
}

.app-sidebar__toggle:focus,
.app-sidebar__toggle:hover {
  background: var(--app-shell-hover);
  color: var(--app-shell-text);
}

.app-nav__item {
  color: var(--app-shell-text);
}

/* Rozet kendi yazı rengini getirmiyorsa (yalın `.badge`) koyu üst çubukta
   okunmaz. `.text-bg-*` sınıfı olan rozetler kendi kontrastını taşır — açık
   tonlu zeminler (amber, sand, mint) koyu yazı ister, buradaki beyaz onları
   okunmaz yapıyordu. */
.app-nav__item .badge:not([class*="text-bg-"]) {
  color: #fff;
}

.app-nav__item:hover,
.app-nav__item:focus {
  background: var(--app-shell-hover);
  color: var(--app-shell-text);
}

/* Üst çubuk iki temada da koyu; kutu ve yazı ona göre. Placeholder eskiden
   rgba(0,0,0,.4) idi — koyu zeminde siyah üstü siyah, arama kutusu görünmüyordu. */
.app-search__input {
  background-color: var(--app-shell-field);
  color: var(--app-shell-text);
  border: 1px solid var(--app-shell-border);
}

.app-search__input:focus {
  background-color: var(--app-shell-field-focus);
  border-color: var(--app-brand-on-shell);
}

.app-search__input::placeholder {
  color: var(--app-shell-muted);
  opacity: 1;
}

.app-search__button {
  color: var(--app-shell-muted);
}

/* Zemin/doku artık modern_overrides.css'te, token'dan (--app-sidebar-texture).
   Burada sabit rgba(31,41,63,.9) + sidebar_bg.jpg duruyordu: birincisi AÇIK tema
   kabuk rengiydi ve koyu temada da uygulanıyordu, ikincisi .webp sürümüyle
   çakışan ikinci bir görseldi. */
.app-sidebar {
  -webkit-box-shadow: 0px 8px 17px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 8px 17px rgba(0, 0, 0, 0.2);
}

/*--SCROLLBAR MOZILLA*/
@-moz-document url-prefix() {
  .app-sidebar:hover {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  }

  body,
  html {
    scrollbar-color: var(--app-border-strong) transparent;
    scrollbar-width: thin;
  }
}

.app-sidebar:hover::-webkit-scrollbar-thumb {
  background: var(--app-shell-scroll);
}

.app-sidebar__user {
  color: var(--app-shell-text);
}

.app-menu__item {
  color: var(--app-shell-text);
}

/* Sabit rgba(26,34,38,.8) ve rgba(44,59,65) yeşilimsi grilerdi: kabuğun
   mavi-grafit ailesiyle akraba değillerdi, menü açıldığında çubuktan ayrı bir
   renk beliriyordu. Hepsi kabuk hover/active token'ına bağlandı. */
.app-menu__item.active,
.app-menu__item:hover,
.app-menu__item:focus {
  border-inline-start-color: var(--app-brand);
  background: var(--app-shell-active);
  color: var(--app-shell-text);
}

.treeview.is-expanded [data-toggle="treeview"] {
  border-inline-start-color: var(--app-brand);
  background: var(--app-shell-hover);
}

.treeview-menu {
  background: transparent;
}

.treeview-menu [data-toggle="treeview"] {
  background: var(--app-shell-hover);
}

.treeview-item {
  color: var(--app-shell-text);
}

/* Eskiden `.active`, `:hover` ve `:focus` TEK kuralda aynı zemini paylaşıyordu:
   bulunduğun sayfanın menü öğesi, fareyle üzerinden geçtiğin öğeden ayırt
   edilemiyordu. Sekmelerdeki hatanın (bkz. aşağıdaki .nav-tabs bloğu) kenar
   çubuğundaki kardeşi. Üç durum artık ayrı: etkileşim yalnızca yüzey tonu,
   seçili öğe ise kendi zemini + kenardaki marka şeridi. */
.treeview-item:hover,
.treeview-item:focus {
  background: var(--app-shell-hover);
  text-decoration: none;
  color: var(--app-shell-text);
}

.treeview-item.active {
  background: var(--app-shell-active);
  text-decoration: none;
  color: var(--app-shell-text);
  box-shadow: inset 3px 0 0 var(--app-brand-on-shell);
  font-weight: 600;
}

/* RTL'de şerit sağ kenara geçmeli, yoksa metnin bittiği tarafta kalır. */
[dir="rtl"] .treeview-item.active {
  box-shadow: inset -3px 0 0 var(--app-brand-on-shell);
}

.dropdown-menu {
  -webkit-box-shadow:
    0 8px 17px 0 var(--app-shadow-color),
    0 6px 20px 0 var(--app-shadow-soft);
  box-shadow:
    0 8px 17px 0 var(--app-shadow-color),
    0 6px 20px 0 var(--app-shadow-soft);
}

.dropdown-item.active,
.dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: var(--app-brand);
}

.bt-1 {
  border-bottom: 3px solid var(--app-border);
}
.bt-2 {
  border-bottom: 1px solid var(--app-border);
}

.page-link {
  color: var(--app-brand);
}

.page-link:hover {
  color: var(--app-brand);
  background: var(--app-surface-3);
}

.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: var(--app-brand);
  border-color: var(--app-brand);
}

.page-link:focus {
  box-shadow: 0 0 0 0.1rem rgba(var(--app-brand-rgb), 0.4);
}

.btn:not([disabled]):not(.disabled):not(.btn-link):hover,
.btn:not([disabled]):not(.disabled):not(.btn-link):focus {
  -webkit-box-shadow: 0 4px 8px 0 var(--app-shadow-color);
  box-shadow: 0 4px 8px 0 var(--app-shadow-color);
}

.app-title {
  background-color: var(--app-surface);
  -webkit-box-shadow: 0 1px 2px var(--app-shadow-soft);
  box-shadow: 0 1px 2px var(--app-shadow-soft);
}

.tile {
  background: var(--app-surface);
  -webkit-box-shadow:
    0 2px 2px 0 var(--app-shadow-soft),
    0 1px 5px 0 var(--app-shadow-soft);
  box-shadow:
    0 2px 2px 0 var(--app-shadow-soft),
    0 1px 5px 0 var(--app-shadow-soft);
}

.tile .overlay {
  background-color: var(--app-surface);
  color: var(--app-text-muted);
}

.tile .tile-footer {
  border-top: 1px solid var(--app-border);
}

.animated-radio-button input[type="radio"]:checked + .label-text:before {
  color: var(--app-text);
}

.animated-radio-button input[type="radio"]:disabled + .label-text:before {
  color: var(--app-text-muted);
}

.toggle input[type="checkbox"]:checked + .button-indecator:before {
  color: var(--app-text);
}

.toggle input[type="checkbox"]:disabled + .button-indecator:before {
  color: var(--app-text-muted);
}

.toggle-flip input[type="checkbox"] + .flip-indecator:before {
  background-color: var(--app-border);
}

.toggle-flip input[type="checkbox"] + .flip-indecator:after {
  background-color: var(--app-text);
  color: var(--app-surface);
}

.toggle-flip input[type="checkbox"]:disabled + .flip-indecator {
  color: var(--app-text-muted);
}

.path {
  stroke: var(--app-text);
}

.btn-spinner {
  border-top-color: #fff;
  border-inline-start-color: #fff;
}

.widget-small {
  color: #fff;
  -webkit-box-shadow: 0 1px 1px var(--app-shadow-soft);
  box-shadow: 0 1px 1px var(--app-shadow-soft);
}

.widget-small .icon {
  background-color: rgba(0, 0, 0, 0.2);
}

.widget-small.primary {
  background-color: var(--app-brand);
}

.widget-small.primary.coloured-icon {
  background-color: var(--app-surface);
  color: var(--app-text);
}

.widget-small.primary.coloured-icon .icon {
  background-color: var(--app-brand);
  color: #fff;
}

.widget-small.info {
  background-color: var(--app-info);
}

.widget-small.info.coloured-icon {
  background-color: var(--app-surface);
  color: var(--app-text);
}

.widget-small.info.coloured-icon .icon {
  background-color: var(--app-info);
  color: #fff;
}

.widget-small.warning {
  background-color: var(--app-warning);
}

.widget-small.warning.coloured-icon {
  background-color: var(--app-surface);
  color: var(--app-text);
}

.widget-small.warning.coloured-icon .icon {
  background-color: var(--app-warning);
  color: #fff;
}

.widget-small.danger {
  background-color: var(--app-danger);
}

.widget-small.danger.coloured-icon {
  background-color: var(--app-surface);
  color: var(--app-text);
}

.widget-small.danger.coloured-icon .icon {
  background-color: var(--app-danger);
  color: #fff;
}

.login-content .logo {
  color: #fff;
}

.login-content .login-box {
  background-color: var(--app-surface);
  -webkit-box-shadow: 0px 29px 95px 0px var(--app-shadow-color);
  box-shadow: 0px 29px 95px 0px var(--app-shadow-color);
}

.login-content .login-box .login-head {
  border-bottom: 1px solid var(--app-border);
}

.login-content .login-box label {
  color: var(--app-text-muted);
}

.page-error h1 {
  color: var(--app-danger);
}

.folder-head {
  border-bottom: 1px solid var(--app-border);
}

.search-container .search-container button {
  background: var(--app-surface-3);
}

.bg-stats {
  background-color: var(--app-tint-blue) !important;
}

.text-main {
  color: var(--app-brand) !important;
}
.bg-main {
  background-color: var(--app-brand) !important;
}
.btn-main {
  color: #fff;
  background-color: var(--app-brand);
  border-color: var(--app-brand);
}

.btn-main:hover {
  color: #fff;
  background-color: var(--app-brand);
  border-color: var(--app-brand);
}

.btn-main:focus,
.btn-main.focus {
  box-shadow: 0 0 0 0.1rem rgba(var(--app-brand-rgb), 0.73);
}

.btn-main.disabled,
.btn-main:disabled {
  color: #fff;
  background-color: var(--app-brand);
  border-color: var(--app-brand);
}

.btn-main:not(:disabled):not(.disabled):active,
.btn-main:not(:disabled):not(.disabled).active,
.show > .btn-main.dropdown-toggle {
  color: #fff;
  background-color: var(--app-brand);
  border-color: var(--app-brand);
}

.btn-main:not(:disabled):not(.disabled):active:focus,
.btn-main:not(:disabled):not(.disabled).active:focus,
.show > .btn-main.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.1rem rgba(var(--app-brand-rgb), 0.73);
}

legend {
  color: var(--app-text);
}

.form-control:focus {
  border-color: var(--app-brand);
}
/**/
.bg-e5 {
  background: var(--app-bg) !important;
}
.bg-grn-l {
  background: var(--app-tint-green) !important;
}
.bg-rdd-l {
  background: rgba(var(--app-danger-rgb), 0.14) !important;
}
.bg-grn {
  background: var(--app-tint-green-strong) !important;
}
.bg-rdd {
  background: rgba(var(--app-danger-rgb), 0.22) !important;
}
/* Komşu .bg-grn/.bg-rdd/.bg-ylw ton token'ından beslenirken bu tek başına
   sabit #4e6282 idi; koyu temada diğer üç tonla aynı ailede değildi. */
.bg-mvv {
  background: var(--app-tint-blue-strong) !important;
}
.bg-ylw {
  background: var(--app-tint-amber-strong) !important;
}
/*--------------------------------*/
/* Sekmeler — ÜÇ ayrı durum: pasif / üzerinde / seçili.
   Eskiden :hover ve :focus, AKTİF sekmeyle aynı kuralın içindeydi ve hepsi dolu
   marka rengine boyanıyordu. Bir sekmeye tıkladıktan sonra <a> odağı üstünde
   tuttuğu için o sekme kalıcı olarak "seçili" görünüyordu; fareyi bir üçüncüsüne
   götürünce aynı anda ÜÇ sekme seçiliymiş gibi duruyordu (configApi ekranında
   görüldü). Odak/hover artık yalnızca bir ton yüzey değişimi.

   İki markup birden desteklenmeli: reports.php hâlâ Bootstrap 3 yapısında
   (`<li class="active"><a>`, sınıfı JS koyuyor), configApi/rapor ajax'ları BS5
   yapısında (`<a class="nav-link active">`). Seçici listesinden BS3 olanları
   silme — reports sekmeleri renksiz kalır.
   `.nav-pills` hariç tutuldu: langs.php'deki dikey liste hem nav-tabs hem
   nav-pills taşıyor, orada Tabler'ın dolu hap görünümü doğru olan. */
.nav-tabs > li > a,
.nav-tabs .nav-link {
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-bottom-color: transparent;
  color: var(--app-text-muted);
}

.nav-tabs > li > a:focus,
.nav-tabs > li > a:hover,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  background: var(--app-surface-3);
  color: var(--app-text);
  border-color: var(--app-border);
  border-bottom-color: transparent;
}

.nav-tabs .open > a,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover,
.nav-tabs:not(.nav-pills) .nav-item.show .nav-link,
.nav-tabs:not(.nav-pills) .nav-link.active {
  background: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
  border-bottom-color: transparent;
  /* Seçili sekmenin işareti dolgu değil, üstteki marka şeridi: yazı gövde
     rengiyle kaldığı için kontrast temaya bağlı olmaktan çıkıyor. */
  box-shadow: inset 0 2px 0 var(--app-brand);
  font-weight: 600;
}

#report td {
  border-bottom: 1px solid var(--app-grid-line);
}

#report tbody td:nth-child(1n),
#report tbody th:nth-child(1n) {
  border-inline-start: 1px solid var(--app-grid-line);
}

#report th:last-child,
#report th:nth-last-child(2) {
  border-inline-start: 1px solid var(--app-grid-line) !important;
  background: var(--app-surface-2) !important;
  border-bottom: 1px solid var(--app-grid-line) !important;
}

#report thead th:nth-child(2n) {
  border-inline-start: 1px solid var(--app-grid-line) !important;
  border-bottom: 1px solid var(--app-grid-line) !important;
  background: var(--app-tint-blue);
}

#report tbody td:nth-child(2n) {
  background: var(--app-tint-blue);
}

#report tfoot td,
#report thead th {
  border-inline-start: 1px solid var(--app-grid-line) !important;
  border-bottom: 1px solid var(--app-grid-line) !important;
  background: var(--app-surface-2) !important;
  color: var(--app-text) !important;
}

#report th a:link,
#report th a:visited {
  color: var(--app-brand);
}

#report tbody td:focus::after,
#report tbody th:focus::after {
  background-color: var(--app-tint-blue-strong);
}

#report tbody td:focus::before {
  background-color: var(--app-tint-blue-strong);
}

#report td:last-child,
#report td:nth-last-child(2) {
  text-align: inherit;
}

.hover,
.hover td {
  background: var(--app-surface-3) !important;
  color: var(--app-text) !important;
}

#reportrange {
  background: var(--app-surface);
  color: var(--app-text);
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid var(--app-border);
}

.daterangepicker {
  background-color: var(--app-surface);
  color: var(--app-text);
  border: 1px solid var(--app-border);
}

.daterangepicker:before,
.daterangepicker:after {
  border-bottom-color: var(--app-border-strong);
}

.daterangepicker:before {
  top: -7px;
  border-inline-end: 7px solid transparent;
  border-inline-start: 7px solid transparent;
  border-bottom: 7px solid var(--app-border);
}

.daterangepicker:after {
  top: -6px;
  border-inline-end: 6px solid transparent;
  border-bottom: 6px solid var(--app-surface);
  border-inline-start: 6px solid transparent;
}
.daterangepicker.drop-up:before {
  top: initial;
  bottom: -7px;
  border-bottom: initial;
  border-top: 7px solid var(--app-border);
}

.daterangepicker.drop-up:after {
  top: initial;
  bottom: -6px;
  border-bottom: initial;
  border-top: 6px solid var(--app-surface);
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
  border: solid var(--app-text);
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
}

.daterangepicker .calendar-table {
  border: 1px solid var(--app-border);
  border-radius: 4px;
  background-color: var(--app-surface);
}
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background-color: var(--app-surface-3);
  border-color: transparent;
  color: inherit;
}

.daterangepicker td.week,
.daterangepicker th.week {
  font-size: 80%;
  color: var(--app-text-muted);
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background-color: var(--app-surface);
  border-color: transparent;
  color: var(--app-text-muted);
}

.daterangepicker td.in-range {
  background-color: var(--app-tint-blue);
  border-color: transparent;
  color: var(--app-text);
  border-radius: 0;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--app-brand);
  border-color: transparent;
  color: #fff;
}

.daterangepicker th.month {
  width: auto;
}

.daterangepicker td.disabled,
.daterangepicker option.disabled {
  color: var(--app-text-muted);
  cursor: not-allowed;
  text-decoration: line-through;
}

.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  background: var(--app-surface-2);
  color: var(--app-text);
  border: 1px solid var(--app-border);
  padding: 2px;
  outline: 0;
  font-size: 12px;
}

.daterangepicker .calendar-time select.disabled {
  color: var(--app-text-muted);
  cursor: not-allowed;
}

.daterangepicker .drp-buttons {
  clear: both;
  text-align: end;
  padding: 8px;
  border-top: 1px solid var(--app-border);
  display: none;
  line-height: 12px;
  vertical-align: middle;
}
.daterangepicker .ranges li:hover {
  background-color: var(--app-brand);
  color: #fff;
}

.daterangepicker .ranges li.active {
  background-color: var(--app-brand);
  color: #fff;
}
.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
  border-inline-end: 1px solid var(--app-border);
}

.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
  border-inline-start: 1px solid var(--app-border);
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
  border-inline-end: 1px solid var(--app-border);
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-inline-start: 1px solid var(--app-border);
}

/*--------------------------------*/
.waits thead {
  background: var(--app-tint-amber);
  color: var(--app-text);
}
.waits-tr td {
  background: var(--app-tint-blue);
  color: var(--app-text);
}
/*--------------------------------*/
/* İşaretsiz kutu nötr, işaretli kutu marka rengi — .form-check-input ile aynı
   davranış. Eskiden ikisi de aynı renkteydi, boş kutu da dolu gibi duruyordu. */
.checkbox-main input[type="checkbox"] + .label-text:before,
.checkbox-main input[type="radio"] + .label-text::before {
  color: var(--app-border-strong);
}

.checkbox-main input[type="checkbox"]:checked + .label-text:before,
.checkbox-main input[type="radio"]:checked + .label-text:before {
  color: var(--app-brand);
}
.checkbox label:hover {
  background: var(--app-surface-3);
}
/*---AVATAR---*/
.aktife {
  background: var(--app-surface-3);
}
/*------------------------
  Yetki matrisi (#Group) renkleri app-tabler.css'te, .perm-matrix altında
  token'larla veriliyor. Burada yalnızca ayraç çizgisi kalıyor. */
#Group td {
  border-bottom: 1px solid var(--app-grid-line);
}

.bg-ff {
  background-color: var(--app-surface-2) !important;
}
.bg-cc {
  background-color: var(--app-surface-sunk) !important;
  cursor: pointer;
}
/*------------------------*/
.lstick-main {
  background-color: var(--app-brand);
}

.sc-main:hover::-webkit-scrollbar-thumb {
  background: var(--app-brand);
}
/*------------------------*/
@media (min-width: 768px) {
  .app-header__logo {
    background-color: var(--app-shell);
  }
}

/* Mini mod (etiketler uçarak açılır) yalnızca ≥992px'te var — responsive.css §1.
   768–991px'te sidenav-toggled "menü açık" demek; orada bu zemin her etiketi boyar. */
@media (min-width: 992px) {
  .sidebar-mini.sidenav-toggled .app-menu__label {
    background: var(--app-shell-2);
  }

  .sidebar-mini.sidenav-toggled .treeview:hover .app-menu__item {
    border-inline-start-color: var(--app-brand);
    background: var(--app-shell-2);
    color: #fff;
  }
}

/* `@media (max-width:480px) { .search-container input[type=text] { … } }`
   kaldırıldı: `.search-container` sınıfı kod tabanında hiç üretilmiyor (arama
   `#search.app-search` ve kenar çubuğundaki `#msearch` ile yapılıyor). Ayrıca
   480px, breakpoint sözlüğünün dışındaki tek değerdi. */

@media print {
  .app-content {
    background-color: #fff;
  }

  .tile {
    border: 1px solid #ddd;
  }
}