/* =========================
   DATATABLES - TEMAYA UYUMLU
========================= */
.dataTables_wrapper {
    color: var(--text) !important;
    font-weight: 400;
}

/* Length + info */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_info {
    color: var(--muted) !important;
    font-weight: 600;
}

.form-text {
    margin-top: .25rem;
    font-size: .875em;
    color: var(--text);
}

/* FIX: missing ; */
.form-check-input:checked {
    background-color: var(--accent2);
    border-color: #0d6efd;
}

/* Length select */
.dataTables_wrapper .dataTables_length select.form-select,
.dataTables_wrapper .dataTables_filter input.form-control {
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 12px !important;
}
.dataTables_wrapper .dataTables_length select.form-select:focus,
.dataTables_wrapper .dataTables_filter input.form-control:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 .25rem var(--ring) !important;
}

/* Table genel ayarlar */
table.dataTable {
    background: var(--dt-bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--dt-border) !important;
}

/* Head */
table.dataTable thead th,
table.dataTable thead td {
    background: var(--dt-head-bg) !important;
    color: var(--dt-head-text) !important;
    border-bottom: 1px solid var(--dt-border) !important;
}

/* Body */
table.dataTable tbody td,
table.dataTable tbody th {
    color: var(--text) !important;
    border-top: 1px solid var(--dt-border) !important;
}

/* Stripe */
table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
    box-shadow: inset 0 0 0 9999px rgba(255,255,255,.03) !important;
}

/* Hover */
table.dataTable.table-hover tbody tr:hover {
    background: var(--dt-row-hover) !important;
}

/* Sorting ikon rengi */
table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:before,
table.dataTable thead th.sorting_desc:after {
    color: rgba(255,255,255,.55) !important;
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate .pagination .page-link {
    background: var(--input-bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--dt-border) !important;
}
.dataTables_wrapper .dataTables_paginate .pagination .page-link:hover {
    background: rgba(255,255,255,.1) !important;
    border-color: rgba(255,255,255,.18) !important;
}
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
    background: color-mix(in srgb, var(--accent) 25%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
    color: var(--dt-head-text) !important;
}
.dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link {
    opacity: .55 !important;
}

/* Processing overlay */
div.dataTables_processing {
    background: var(--panel-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--dt-border) !important;
    box-shadow: var(--dt-shadow) !important;
    border-radius: 12px !important;
    text-align: center;
    padding: 1rem;
}

/* Bootstrap table değişkenleri override */
.table {
    --bs-table-bg: transparent;

    --bs-table-border-color: var(--dt-border);
    --bs-table-striped-bg: rgba(255,255,255,.03);
    --bs-table-hover-bg: var(--dt-row-hover);
}

/* =========================================================
   APP.CSS (TOKEN-BASED THEME SYSTEM) — CLEAN VERSION
   - Renk yok -> sadece tokenlar
   - Theme css dosyaları tokenları set eder
========================================================= */

/* =========================
   SIDEBAR FINAL FIX
   (FIX: --panel override kaldırıldı; tema tokenlarını bozmasın)
========================= */
.sidebar{
  background: var(--panel);
}

.sidebar .nav-link{
  color: var(--nav-item-text);
}

.sidebar .nav-link i{
  color: var(--nav-item-icon);
}

.sidebar .nav-link:hover{
  background: var(--nav-item-hover);
}

.sidebar .nav-link.active{
  background: var(--nav-item-active-bg);
  color: var(--nav-item-active-text);
}

.sidebar .nav-link.active i{
  color: var(--nav-item-active-text);
}

:root{
  --text-strong: var(--text);
  --text-muted: color-mix(in srgb, var(--text) 65%, transparent);

  --nav-item-text: var(--text);
  --nav-item-icon: color-mix(in srgb, var(--text) 60%, transparent);
  --nav-item-hover-bg: color-mix(in srgb, var(--accent) 10%, transparent);
  --nav-item-active-bg: color-mix(in srgb, var(--accent) 18%, transparent);
  --nav-item-active-text: var(--accent);
}

:root{
  --nav-item-text: var(--text);
  --nav-item-icon: color-mix(in srgb, var(--text) 60%, transparent);

  --nav-item-hover: color-mix(in srgb, var(--accent) 10%, transparent);

  --nav-item-active-bg: color-mix(in srgb, var(--accent) 18%, transparent);
  --nav-item-active-text: var(--accent);
}

/* =========================
   SETTINGS / FORMS TEXT FIX
========================= */
.card-title,
.page-title,
.form-label,
.fw-bold{
  color: var(--text);
}

.small-muted,
.form-text{
}

/* duplicate sidebar rules (orijinalde vardı, aynen bıraktım) */
.sidebar .nav-link{
  color: var(--nav-item-text);
}
.sidebar .nav-link i{
  color: var(--nav-item-icon);
}
.sidebar .nav-link:hover{
  background: var(--nav-item-hover-bg);
}
.sidebar .nav-link.active{
  background: var(--nav-item-active-bg);
  color: var(--nav-item-active-text);
}

/* Site Bilgileri + Kısa Not fix */
#tab-site .card-title,
#tab-appearance .card-title {
  color: var(--text);
}

#tab-site .small-muted,
#tab-appearance .small-muted {
  color: color-mix(in srgb, var(--text) 65%, transparent);
}

#tab-site .fw-bold {
  color: var(--text);
}

#tab-appearance .card-title {
  color: var(--text);
}

#tab-appearance .small-muted {
  color: color-mix(in srgb, var(--text) 65%, transparent);
}

#tab-site .form-label,
#tab-appearance .form-label {
  color: var(--text);
}

#tab-site .small-muted,
#tab-site .form-text {
  color: color-mix(in srgb, var(--text) 65%, transparent);
}

/* ---------- FAIL-SAFE (theme yoksa) ---------- */
:root{
  /* Brand */
  --accent: #0d6efd;
  --accent-2: #2b7cff;
  --accent-soft: rgba(13,110,253,.12);
  --accent-hover: rgba(13,110,253,.08);

  /* Navbar (theme-aware) */
  --nav-bg: linear-gradient(90deg, var(--accent), var(--accent-2));
  --nav-border: rgba(255,255,255,.22);
  --nav-title: var(--on-accent);

  --nav-pill-bg: rgba(255,255,255,.14);
  --nav-pill-border: rgba(255,255,255,.22);
  --nav-pill-text: var(--on-accent);

  --nav-icon-bg: rgba(255,255,255,.12);
  --nav-icon-border: rgba(255,255,255,.25);
  --nav-icon-text: var(--on-accent);
  --nav-icon-hover: rgba(255,255,255,.18);

  /* Layout */
  --nav-h: 64px;
  --sidebar-w: 280px;

  /* Surfaces */
  --bg: #f6f7fb;
  --panel: #ffffff;
  --panel-2: rgba(255,255,255,.92);
  --panel-3: rgba(255,255,255,.75);
  --elev: 0 12px 28px rgba(16,24,40,.10);
  --elev2: 0 8px 18px rgba(16,24,40,.08);

  /* Text */
  --text: rgba(16,24,40,.92);
  --muted: rgba(16,24,40,.60);
  --on-accent: rgba(255,255,255,.95);

  /* Borders */
  --border-color: rgba(16,24,40,.10);
  --border: 1px solid var(--border-color);

  /* Radius */
  --radius: 16px;
  --radius-sm: 14px;

  /* Controls */
  --input-bg: rgba(255,255,255,.90);
  --input-border: rgba(16,24,40,.14);
  --input-text: rgba(16,24,40,.92);
  --ring: rgba(13,110,253,.16);

  /* Sidebar nav */
  --nav-item-text: rgba(16,24,40,.86);
  --nav-item-icon: rgba(16,24,40,.60);
  --nav-item-hover: var(--accent-hover);
  --nav-item-active-bg: var(--accent-soft);
  --nav-item-active-text: rgba(16,24,40,.96);

  /* DataTables */
  --dt-bg: var(--panel);
  --dt-head-bg: var(--accent-soft);
  --dt-head-text: var(--text);
  --dt-row-hover: var(--accent-hover);
  --dt-border: rgba(16,24,40,.10);
  --dt-shadow: 0 10px 26px rgba(16,24,40,.10);

  /* Buttons (theme can override) */
  --btn-radius: 14px;
  --btn-shadow: 0 12px 26px rgba(16,24,40,.12);

  --btn-primary-bg: var(--accent);
  --btn-primary-text: var(--on-accent);
  --btn-primary-hover: color-mix(in srgb, var(--accent) 88%, #000);
  --btn-primary-soft: color-mix(in srgb, var(--accent) 12%, #fff);

  --btn-secondary-bg: rgba(16,24,40,.06);
  --btn-secondary-text: rgba(16,24,40,.88);
  --btn-secondary-hover: rgba(16,24,40,.10);

  --btn-success-bg: #16a34a;
  --btn-success-hover: #15803d;

  --btn-warning-bg: #f59e0b;
  --btn-warning-hover: #d97706;

  --btn-danger-bg: #dc2626;
  --btn-danger-hover: #b91c1c;

  /* Badges (theme can override) */
  --badge-radius: 999px;
  --badge-font: 700;
  --badge-padding: 4px 10px;

  --badge-primary-bg: color-mix(in srgb, var(--accent) 14%, #fff);
  --badge-primary-text: color-mix(in srgb, var(--accent) 80%, #000);

  --badge-success-bg: rgba(22,163,74,.14);
  --badge-success-text: #0f7a34;

  --badge-warning-bg: rgba(245,158,11,.18);
  --badge-warning-text: #8a4b00;

  --badge-danger-bg: rgba(220,38,38,.14);
  --badge-danger-text: #a01818;

  --badge-neutral-bg: rgba(16,24,40,.08);
  --badge-neutral-text: rgba(16,24,40,.80);

  /* Z-INDEX (tek yerden yönet) */
  --z-navbar: 1030;
  --z-sidebar: 1025;
  --z-sidebar-open: 1040;
  --z-sidebar-backdrop: 1035;
  --z-dropdown: 2000;
  --z-modal: 3000;
  --z-modal-backdrop: 2990;

  /* Modal surface */
  --modal-bg: var(--panel);
  --modal-border: var(--border-color);
  --modal-shadow: 0 18px 50px rgba(16,24,40,.18);
}

/* =========================================================
   BASE
========================================================= */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
}
a{ color:inherit; }
a:hover{ color:inherit; }

/* =========================================================
   STACKING / OVERLAY SAFETY
========================================================= */
.app-navbar{
  position: sticky;
  top:0;
  z-index: var(--z-navbar);
}

/* Sidebar */
.sidebar{ z-index: var(--z-sidebar); }
.sidebar.show{ z-index: var(--z-sidebar-open); }

.sidebar-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  z-index: var(--z-sidebar-backdrop);
}

/* Bootstrap overlays always on top */
.modal{ z-index: var(--z-modal) !important; }
.modal-backdrop{ z-index: var(--z-modal-backdrop) !important; }

.dropdown-menu,
.popover,
.tooltip{
  z-index: var(--z-dropdown) !important;
}

/* Stacking context kill-switch */
.main-content{
  transform: none !important;
  filter: none !important;
}

/* =========================================================
   NAVBAR
========================================================= */
.app-navbar{
  position: sticky;
  top:0;
  z-index: var(--z-navbar);

  height: var(--nav-h);
  display:flex;
  align-items:center;

  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}

.brand-title{
  font-weight: 950;
  color: var(--nav-title);
  letter-spacing: -.2px;
}

.navbar-pill{
  background: var(--nav-pill-bg);
  border: 1px solid var(--nav-pill-border);
  border-radius: 999px;
  padding: 6px 10px;
  backdrop-filter: blur(10px);
}

.user-name{ color: var(--nav-pill-text); font-weight: 850; }

.nav-icon-btn{
  width:40px;height:40px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  border: 1px solid var(--nav-icon-border);
  background: var(--nav-icon-bg);
  color: var(--nav-icon-text);
  transition: .15s ease;
}
.nav-icon-btn:hover{ background: var(--nav-icon-hover); }
.nav-icon-btn:active{ transform: scale(.98); }

/* =========================================================
   SIDEBAR
========================================================= */
.sidebar{
  position: fixed;
  top: calc(var(--nav-h) + 14px);
  bottom: 14px;
  left: 14px;
  width: var(--sidebar-w);

  background: var(--panel-2);
  border: var(--border);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--elev);

  display:flex;
  flex-direction: column;
  overflow:hidden;
}

/* scroll var ama görünmez */
.sidebar-body{
  padding: 14px;
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar-body::-webkit-scrollbar{ width:0; height:0; }

.section-title{
  margin: 14px 2px 8px;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .35px;
  text-transform: uppercase;
  color: var(--muted);
}
.sidebar .nav-link{
  display:flex;
  align-items:center;
  gap:10px;

  padding: 11px 12px;
  border-radius: 14px;

  font-weight: 850;
  color: var(--nav-item-text);
  transition: .15s ease;

  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  position:relative;
}
.sidebar .nav-link i{
  width:18px;
  text-align:center;
  flex-shrink:0;
  color: var(--nav-item-icon);
}
.sidebar .nav-link:hover{ background: var(--nav-item-hover); }
.sidebar .nav-link.active{
  background: var(--nav-item-active-bg);
  color: var(--nav-item-active-text);
}
.sidebar .nav-link.active::before{
  content:"";
  position:absolute;
  left:8px; top:10px; bottom:10px;
  width:4px;
  border-radius:999px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.sidebar-footer{
  padding: 12px 14px;
  border-top: 1px solid var(--border-color);
  background: var(--panel-3);
}

/* =========================================================
   MAIN CONTENT
========================================================= */
.main-content{
  margin-left: calc(var(--sidebar-w) + 28px);
  padding: 18px;
  padding-top: 14px;
}
.card{
  background: var(--panel);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--elev2);
  color: var(--bs-table-color);
}

/* =========================================================
   FOOTER
========================================================= */
.app-footer{
  border-top: 1px solid var(--border-color);
  background: var(--panel-3);
  color: var(--muted);
}

/* =========================================================
   BUTTONS (theme-aware)
========================================================= */
.btn{
  --_bg: var(--btn-secondary-bg);
  --_text: var(--btn-secondary-text, #111);
  --_hover: var(--btn-secondary-hover);

  border-radius: var(--btn-radius);
  padding: 10px 14px;
  font-weight: 800;
  letter-spacing: .15px;
  border: 1px solid transparent;
  background: var(--_bg);
  color: var(--_text);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.btn:hover{ background: var(--_hover); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); box-shadow:none; }

.btn-sm{
  padding: 6px 10px;
  font-size: .82rem;
  border-radius: 10px;
}

.btn-primary{
  --_bg: var(--btn-primary-bg);
  --_text: var(--btn-primary-text);
  --_hover: var(--btn-primary-hover);
  box-shadow: var(--btn-shadow);
}
.btn-success{
  --_bg: var(--btn-success-bg);
  --_hover: var(--btn-success-hover);
  color:#fff;
  box-shadow: var(--btn-shadow);
}
.btn-warning{
  --_bg: var(--btn-warning-bg);
  --_hover: var(--btn-warning-hover);
  color: rgba(16,24,40,.92);
}
.btn-danger{
  --_bg: var(--btn-danger-bg);
  --_hover: var(--btn-danger-hover);
  color:#fff;
  box-shadow: var(--btn-shadow);
}
.btn-secondary{
  --_bg: var(--btn-secondary-bg);
  --_text: var(--btn-secondary-text);
  --_hover: var(--btn-secondary-hover);
}

/* soft primary */
.btn-soft-primary{
  background: var(--btn-primary-soft);
  color: var(--btn-primary-bg);
  border-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn-soft-primary:hover{
  background: var(--btn-primary-bg);
  color: #fff;
}

/* outline */
.btn-outline-primary{
  background: transparent;
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-bg);
}
.btn-outline-primary:hover{
  background: var(--btn-primary-bg);
  color: #fff;
}
.btn-outline-danger{
  background: transparent;
  border-color: var(--btn-danger-bg);
  color: var(--btn-danger-bg);
}
.btn-outline-danger:hover{
  background: var(--btn-danger-bg);
  color: #fff;
}

.btn-icon{
  width: 38px; height: 38px;
  padding: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
}
.btn-group .btn{ border-radius: 10px !important; }

/* =========================================================
   BADGES (theme-aware)
========================================================= */
.badge{
  border-radius: var(--badge-radius);
  font-weight: var(--badge-font);
  padding: var(--badge-padding);
}
.badge.bg-primary{
  background: var(--badge-primary-bg) !important;
  color: var(--badge-primary-text) !important;
}
.badge.bg-success{
  background: var(--badge-success-bg) !important;
  color: var(--badge-success-text) !important;
}
.badge.bg-warning{
  background: var(--badge-warning-bg) !important;
  color: var(--badge-warning-text) !important;
}
.badge.bg-danger{
  background: var(--badge-danger-bg) !important;
  color: var(--badge-danger-text) !important;
}
.badge.bg-secondary,
.badge.bg-dark,
.badge.bg-info{
  background: var(--badge-neutral-bg) !important;
  color: var(--badge-neutral-text) !important;
}

/* =========================================================
   MODALS (theme-aware)
========================================================= */
.modal-content{
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  box-shadow: var(--modal-shadow);
  border-radius: 18px;
}
.modal-header{ border-bottom: 1px solid var(--border-color); }
.modal-footer{ border-top: 1px solid var(--border-color); }
.modal-title{ color: var(--text); }

/* =========================================================
   DATATABLES (theme-safe) — SINGLE SOURCE OF TRUTH
========================================================= */
.dataTables_wrapper{ color: var(--text); }

table.dataTable{
  width:100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--radius) !important;
  overflow:hidden !important;

  border: 1px solid var(--dt-border) !important;
  box-shadow: var(--dt-shadow);
  background: var(--dt-bg) !important;
}
table.dataTable thead th,
table.dataTable thead td{
  background: var(--dt-head-bg) !important;
  color: var(--dt-head-text) !important;
  border-bottom: 1px solid var(--dt-border) !important;

  padding: 14px 16px !important;
  font-weight: 650 !important;
}
table.dataTable tbody td{
  padding: 13px 16px !important;
  border-top: 1px solid var(--dt-border) !important;
  color: var(--text) !important;
}
table.dataTable tbody tr:hover{
  background: var(--dt-row-hover) !important;
}

/* controls */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
  border-radius: var(--radius-sm) !important;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 .22rem var(--ring) !important;
}

/* paginate */
.dataTables_wrapper .paginate_button{
  border-radius: 999px !important;
  border: 1px solid var(--dt-border) !important;
  background: transparent !important;
  color: var(--text) !important;
  font-weight: 800 !important;
}
.dataTables_wrapper .paginate_button:hover{
  background: var(--accent-hover) !important;
  border-color: var(--accent) !important;
}
.dataTables_wrapper .paginate_button.current,
.dataTables_wrapper .paginate_button.current:hover{
  background: var(--accent) !important;
  border-color: transparent !important;
  color: var(--on-accent) !important;
}
.dataTables_wrapper .dataTables_info{
  color: var(--muted);
  font-weight: 700;
}

/* =========================================================
   ACTION BUTTONS (index table)
========================================================= */
.action-btns .btn{ border-radius: 10px !important; }
.action-btns .btn-info{
  background: color-mix(in srgb, var(--accent-2) 22%, transparent);
  color: var(--text);
  border-color: transparent;
}
.action-btns .btn-warning{
  background: color-mix(in srgb, var(--btn-warning-bg) 22%, transparent);
  border-color: transparent;
}
.action-btns .btn-danger{
  background: color-mix(in srgb, var(--btn-danger-bg) 22%, transparent);
  color: var(--text);
  border-color: transparent;
  box-shadow: none;
}
.action-btns .btn-secondary{
  background: color-mix(in srgb, rgba(16,24,40,.50) 16%, transparent);
  border-color: transparent;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 992px){
  .sidebar{
    left: -320px;
    transition: left .22s ease;
  }
  .sidebar.show{ left: 14px; }

  .main-content{
    margin-left: 0;
    padding: 12px;
    padding-top: 14px;
  }
}

/* =========================
   TYPOGRAPHY FIX — NO MORE OVERBOLD
========================= */
h1, h2, h3, h4, h5, h6{
  font-weight: 600;
  letter-spacing: -.2px;
}
.page-title,
.card-title{
  font-weight: 600;
}
.section-title{
  font-weight: 600;
  letter-spacing: .4px;
}
.sidebar .nav-link{
  font-weight: 600;
}
.brand-title{
  font-weight: 700;
}
table.dataTable thead th{
  font-weight: 600 !important;
}
.small-muted{
  color: color-mix(in srgb, var(--text) 65%, transparent);
}