/* ═══════════════════════════════════════════════════════════
   XTEAM OVERRIDES — Light & Dark mode unified token system
   ════════════════════════════════════════════════════════════ */

/* ── Tokens: Light mode (default) ── */
:root {
  --x-bg:          #f3f6ff;
  --x-bg-2:        #ffffff;
  --x-card:        #ffffff;
  --x-border:      #d9e2f2;
  --x-text:        #1e2a42;
  --x-muted:       #5d739a;
  --x-primary:     #5b7fff;
  --x-input-bg:    #ffffff;
  --x-input-text:  #1e2a42;
  --x-input-placeholder: #94a3b8;
  --x-table-head-bg:  #f1f5fb;
  --x-table-head-text:#4a6090;
  --x-table-hover:    #f8faff;
  --x-btn-outline-bg: #ffffff;
  --x-btn-outline-border: #cbd5e1;
  --x-btn-outline-text:   #475569;
  --x-btn-outline-hover:  #f1f5f9;
  --x-dt-btn-bg:   #ffffff;
  --x-dt-btn-hover:#f1f5f9;
  --x-badge-success-bg:    #d1fae5;
  --x-badge-success-border:#6ee7b7;
  --x-badge-success-text:  #065f46;
  --x-badge-muted-bg:      #e2e8f0;
  --x-badge-muted-border:  #cbd5e1;
  --x-badge-muted-text:    #475569;
  --x-switch-off-bg:  #cbd5e1;
  --x-switch-knob:    #ffffff;
}

/* ── Tokens: Dark mode ── */
html.dark {
  --x-bg:          #111c2d;
  --x-bg-2:        #17253b;
  --x-card:        #1a2740;
  --x-border:      #2a3b57;
  --x-text:        #dbe7ff;
  --x-muted:       #8ea6cf;
  --x-primary:     #5b7fff;
  --x-input-bg:    #16243a;
  --x-input-text:  #dbe7ff;
  --x-input-placeholder: #7f96bf;
  --x-table-head-bg:   #1a2740;
  --x-table-head-text: #9fb7df;
  --x-table-hover:     #1d2d49;
  --x-btn-outline-bg:   #1a2740;
  --x-btn-outline-border:#2a3b57;
  --x-btn-outline-text:  #dbe7ff;
  --x-btn-outline-hover: #243657;
  --x-dt-btn-bg:    #1a2740;
  --x-dt-btn-hover: #243657;
  --x-badge-success-bg:    #1f3f3b;
  --x-badge-success-border:#2f6e68;
  --x-badge-success-text:  #7bf0de;
  --x-badge-muted-bg:      #1f2d46;
  --x-badge-muted-border:  #374a6a;
  --x-badge-muted-text:    #a8bfdf;
  --x-switch-off-bg:  #2b3b58;
  --x-switch-knob:    #d8e3f8;
}

/* ═══ Layout ═══════════════════════════════════════════════ */
html, body {
  background: var(--x-bg) !important;
  color: var(--x-text) !important;
}

.page-wrapper,
.body-wrapper,
.container.full-container {
  background: var(--x-bg) !important;
}

.top-header {
  background: var(--x-bg-2) !important;
  border-bottom: 1px solid var(--x-border);
}

.with-vertical { width: 100% !important; }

/* ═══ Sidebar ════════════════════════════════════════════== */
#application-sidebar-brand {
  background: color-mix(in srgb, var(--x-bg-2) 92%, #0b1525) !important;
  border-right: 1px solid var(--x-border) !important;
}

#application-sidebar-brand .scroll-sidebar {
  height: calc(100vh - 110px);
}

#sidebarnav .sidebar-item .sidebar-link {
  color: var(--x-muted) !important;
}

#sidebarnav .sidebar-item .sidebar-link.active,
#sidebarnav .sidebar-item .sidebar-link.activemenu {
  background: var(--x-primary) !important;
  color: #fff !important;
}

html:not(.dark) #application-sidebar-brand .sidebar-link {
  color: #334b73 !important;
}

html:not(.dark) #application-sidebar-brand .sidebar-link.active,
html:not(.dark) #application-sidebar-brand .sidebar-link.activemenu {
  color: #fff !important;
}

/* ═══ Cards ════════════════════════════════════════════════ */
.card {
  border: 1px solid var(--x-border) !important;
  border-radius: 12px !important;
  background: var(--x-card) !important;
  color: var(--x-text) !important;
  box-shadow: none !important;
}

.card-body { padding: 16px; }
.card-title { color: var(--x-text); font-weight: 700; margin-bottom: 8px; }

/* ═══ Page structure helpers ═══════════════════════════════ */
.x-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.x-title   { font-size: 22px; font-weight: 700; color: var(--x-text); }
.x-subtitle{ font-size: 13px; color: var(--x-muted); }

@media (max-width: 767px) {
  .container.full-container { padding-left: 12px !important; padding-right: 12px !important; }
  .x-page-head { flex-direction: column; align-items: flex-start; }
  .x-title { font-size: 18px; }
}

/* ═══ Buttons ══════════════════════════════════════════════ */
.btn {
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

@media (max-width: 767px) { .btn { padding: 9px 12px; } }

.btn-primary {
  background: var(--x-primary) !important;
  color: #fff !important;
  border-color: var(--x-primary) !important;
}

.btn-outline {
  background: var(--x-btn-outline-bg) !important;
  border-color: var(--x-btn-outline-border) !important;
  color: var(--x-btn-outline-text) !important;
}

.btn-outline:hover {
  background: var(--x-btn-outline-hover) !important;
}

.btn-danger {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}

/* ═══ Form controls ════════════════════════════════════════ */
.form-control,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background: var(--x-input-bg) !important;
  border: 1px solid var(--x-border) !important;
  color: var(--x-input-text) !important;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  width: 100%;
  transition: border-color .15s;
}

.form-control:focus,
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--x-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--x-primary) 20%, transparent);
}

input::placeholder,
textarea::placeholder {
  color: var(--x-input-placeholder) !important;
}

/* ═══ Tables ═══════════════════════════════════════════════ */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--x-border);
  border-radius: 12px;
  background: var(--x-card);
}

.table { width: 100%; min-width: 880px; border-collapse: collapse; }
@media (max-width: 767px) { .table { min-width: 680px; } }

table thead,
table thead tr,
table thead th {
  background: var(--x-table-head-bg) !important;
  color: var(--x-table-head-text) !important;
  border-color: var(--x-border) !important;
}

.table th {
  text-align: left;
  padding: 12px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--x-table-head-text);
  border-bottom: 1px solid var(--x-border);
}

.table td {
  padding: 12px;
  font-size: 14px;
  color: var(--x-text);
  border-bottom: 1px solid var(--x-border);
}

table tbody td {
  color: var(--x-text) !important;
  border-color: var(--x-border) !important;
}

table tbody tr:hover td {
  background: var(--x-table-hover) !important;
}

table.dataTable.no-footer { border-bottom: 0 !important; }

table.dataTable thead th,
table.dataTable thead td {
  border-bottom: 1px solid var(--x-border) !important;
}

/* ═══ DataTables ════════════════════════════════════════════ */
.dataTables_wrapper { padding: 10px 0 0; }

.dataTables_wrapper .xdt-head,
.dataTables_wrapper .xdt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
}

.dataTables_wrapper .xdt-head { border-bottom: 1px solid var(--x-border); }
.dataTables_wrapper .xdt-foot { border-top:    1px solid var(--x-border); }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  margin: 0 !important;
  float: none !important;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--x-muted) !important;
}

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
  background: var(--x-input-bg) !important;
  border: 1px solid var(--x-border) !important;
  color: var(--x-input-text) !important;
  border-radius: 8px;
  min-height: 34px;
  padding: 6px 10px !important;
  width: auto !important;
}

div.dataTables_wrapper .dataTables_info,
div.dataTables_wrapper .dataTables_length,
div.dataTables_wrapper .dataTables_filter,
div.dataTables_wrapper .dataTables_paginate {
  color: var(--x-muted) !important;
  font-size: 13px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  margin-left: 4px !important;
  border-radius: 8px !important;
  border: 1px solid var(--x-border) !important;
  background: var(--x-dt-btn-bg) !important;
  color: var(--x-text) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--x-primary) !important;
  color: #fff !important;
  border-color: var(--x-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--x-dt-btn-hover) !important;
  border-color: var(--x-border) !important;
  color: var(--x-text) !important;
}

@media (max-width: 767px) {
  .dataTables_wrapper .xdt-head,
  .dataTables_wrapper .xdt-foot { flex-direction: column; align-items: flex-start; }
}

/* ═══ Select2 ═══════════════════════════════════════════════ */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--x-input-bg) !important;
  border: 1px solid var(--x-border) !important;
  border-radius: 10px !important;
  min-height: 40px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--x-input-text) !important;
  line-height: 38px !important;
  padding-left: 12px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 7px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--x-input-placeholder) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  background: transparent !important;
  color: var(--x-input-text) !important;
}

.select2-container--default .select2-selection--multiple .select2-search__field {
  color: var(--x-input-text) !important;
  margin-top: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--x-btn-outline-bg) !important;
  border: 1px solid var(--x-border) !important;
  color: var(--x-text) !important;
  border-radius: 8px !important;
  padding: 2px 8px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--x-muted) !important;
  margin-right: 6px !important;
}

.select2-dropdown {
  background: var(--x-input-bg) !important;
  border: 1px solid var(--x-border) !important;
  border-radius: 10px !important;
  overflow: hidden;
}

.select2-container--default .select2-results__option {
  background: var(--x-input-bg) !important;
  color: var(--x-input-text) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--x-bg-2) !important;
  border: 1px solid var(--x-border) !important;
  color: var(--x-input-text) !important;
  border-radius: 6px !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--x-primary) !important;
  color: #fff !important;
}

/* ═══ Badges ════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
}

.badge-success {
  background: var(--x-badge-success-bg);
  border-color: var(--x-badge-success-border);
  color: var(--x-badge-success-text);
}

.badge-muted {
  background: var(--x-badge-muted-bg);
  border-color: var(--x-badge-muted-border);
  color: var(--x-badge-muted-text);
}

/* ═══ Toggle / Switch ════════════════════════════════════════ */
input[type="checkbox"] { accent-color: var(--x-primary); }

.x-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }

.x-switch-input {
  appearance: none;
  -webkit-appearance: none;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--x-switch-off-bg);
  border: 1px solid var(--x-border);
  position: relative;
  transition: all .2s ease;
  cursor: pointer;
}

.x-switch-input::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--x-switch-knob);
  transition: transform .2s ease, background .2s ease;
}

.x-switch-input:checked { background: #365fcc; border-color: #5b7fff; }
.x-switch-input:checked::after { transform: translateX(20px); background: #ffffff; }

/* ═══ Misc helpers ══════════════════════════════════════════ */
.text-slate-400, .text-slate-500, .text-slate-600, .text-slate-700,
.dark\:text-slate-300, .dark\:text-slate-400 {
  color: var(--x-muted) !important;
}

.text-slate-100, .text-slate-200, .text-slate-300,
.text-slate-900, .dark\:text-slate-100, .dark\:text-slate-200 {
  color: var(--x-text) !important;
}

.rounded-xl.border,
.rounded-xl.border.border-slate-200 {
  background: var(--x-card) !important;
  border-color: var(--x-border) !important;
  color: var(--x-text) !important;
}

a.rounded-lg.bg-slate-900, button.rounded-lg.bg-slate-900 {
  background: var(--x-primary) !important;
  color: #fff !important;
}

a.rounded-lg.border, button.rounded-lg.border {
  border-color: var(--x-border) !important;
  color: var(--x-btn-outline-text) !important;
  background: var(--x-btn-outline-bg) !important;
}

/* ═══ Month Input — tema uyumlu takvim ikonu ════════════════ */
/*
   color-scheme: dark  → tarayıcı ikonunu beyaz/açık yapar (koyu arka plan üstünde görünür)
   color-scheme: light → tarayıcı ikonunu koyu yapar (açık arka plan üstünde görünür)
*/
input[type="month"] {
  color-scheme: light;
  padding-right: 10px;
}

html.dark input[type="month"] {
  color-scheme: dark;
}