/* ========================================================================
   ŞAHİNOĞLU GIDA • Global Tema
   - Dark tema + sarı vurgu
   - Mobil öncelikli, Bootstrap uyumlu
   ===================================================================== */

/* ------------------------------
   1) Renk Değişkenleri
--------------------------------*/
:root{
  --bg:#121212;          /* sayfa zemin */
  --card:#1e1e1e;        /* kart/alan zemin */
  --muted:#222;          /* ikincil arka plan */
  --border:#333;         /* sınır çizgileri */
  --text:#f1f1f1;        /* ana metin */
  --text-dim:#cfcfcf;    /* soluk metin */
  --accent:#ffc107;      /* vurgu/sarı */
  --accent-2:#e0a800;    /* hover/aktif */
  --focus:rgba(255,193,7,.35); /* odak gölgesi */
  --success:#2ea043;
  --danger:#dc3545;
  --warning:#f59f00;
  --info:#3aa0ff;
}

/* ------------------------------
   2) Reset ve Temeller
--------------------------------*/
*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.5;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--accent); text-decoration:none }
a:hover{ color:var(--accent-2); text-decoration:underline }

::selection{ background:var(--accent); color:#000 }

/* Koyu scrollbar (destekleyen tarayıcılar) */
*{ scrollbar-width:thin; scrollbar-color: var(--border) transparent }
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-track{ background:transparent }
*::-webkit-scrollbar-thumb{ background:var(--border); border-radius:10px }

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}

/* ------------------------------
   3) Tipografi
--------------------------------*/
h1,h2,h3,h4,h5,h6{ color:var(--text); margin-top:0; line-height:1.2 }
.lead{ color:var(--text-dim) }
.small, small{ color:var(--text-dim) }

.text-accent{ color:var(--accent) !important }
.text-dim{ color:var(--text-dim) !important }
.bg-card{ background:var(--card) !important }
.border-soft{ border:1px solid var(--border) !important }
.shadow-soft{ box-shadow:0 10px 30px rgba(0,0,0,.35) }

/* ------------------------------
   4) Layout: Uygulama İskeleti
--------------------------------*/
.app-navbar{ background:var(--card); border-bottom:1px solid var(--border) }
.app-navbar .nav-link{ color:var(--text-dim) }
.app-navbar .nav-link:hover,.app-navbar .nav-link.active{ color:var(--accent) }

.app-shell{ min-height:100vh; display:flex }
.app-sidebar{
  width:260px; background:var(--card); border-right:1px solid var(--border);
  position:fixed; inset:0 auto 0 0; transform:translateX(0); transition:transform .25s ease; z-index:1030;
}
.app-sidebar .sidebar-header{ padding:1rem 1.25rem; border-bottom:1px solid var(--border) }
.app-sidebar .sidebar-menu a{
  display:block; padding:.65rem 1rem; color:var(--text-dim); border-left:3px solid transparent;
}
.app-sidebar .sidebar-menu a:hover{ color:var(--accent); background:rgba(255,193,7,.08) }
.app-sidebar .sidebar-menu a.active{ color:#000; background:var(--accent); border-left-color:var(--accent) }

.app-content{ flex:1; margin-left:260px; padding:1.25rem }

@media (max-width: 991.98px){
  .app-sidebar{ transform:translateX(-100%) }
  .app-sidebar.is-open{ transform:translateX(0) }
  .app-content{ margin-left:0 }
}

/* ------------------------------
   5) Kartlar ve Bölümler
--------------------------------*/
.card{ background:var(--card); border:1px solid var(--border) }
.card .card-title{ color:var(--text) }
.section{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1rem }

/* ------------------------------
   6) Butonlar
--------------------------------*/
.btn{ border-radius:.65rem; border:1px solid transparent }
.btn-accent,.btn-yellow{ background:var(--accent); color:#000; border-color:var(--accent) }
.btn-accent:hover,.btn-yellow:hover{ background:var(--accent-2); border-color:var(--accent-2); color:#000 }
.btn-outline-accent{ background:transparent; color:var(--accent); border-color:var(--accent) }
.btn-outline-accent:hover{ background:var(--accent); color:#000 }

/* Sarı çerçeveli (inline tasarımdaki) */
.btn-yellow-outline{
  display:inline-block; padding:.5rem 1rem; border:2px solid var(--accent);
  color:var(--accent); background:transparent; border-radius:6px; text-decoration:none; transition:.3s;
}
.btn-yellow-outline:hover{ background:var(--accent); color:#000 }

/* Ghost (çerçevesiz) aksan buton */
.btn-ghost-accent{ background:transparent !important; border:0 !important; color:var(--accent) !important; box-shadow:none !important }
.btn-ghost-accent:hover{ color:var(--accent-2) !important; text-decoration:underline }

/* Buton odak halkası: tema rengi */
.btn:focus,.btn:focus-visible{ box-shadow:0 0 0 .2rem var(--focus) !important; outline:0 !important }

/* İkonlar butonda currentColor alsın */
.btn .bi{ color:currentColor !important }

/* ------------------------------
   7) Formlar
--------------------------------*/
.form-label{ color:var(--text-dim); margin-bottom:.35rem }

.form-control,
.form-select,
.input-group-text,
.form-control:disabled,
.form-control[readonly]{
  background:transparent !important;
  color:var(--accent) !important;
  border:1px solid var(--border);
}

/* Koyu dolgu isteyen alanlar için (inline hissiyat) */
.form-control.solid{
  background:#2a2a2a !important; border:1px solid #444 !important; color:var(--accent) !important;
}
.form-control.solid::placeholder{ color:var(--accent) !important }
.form-control.solid:focus{
  border-color:var(--accent) !important; box-shadow:0 0 0 .2rem var(--focus) !important;
}

/* Genel ikon boşluğu (ikonlu alanlar) */
.position-relative.has-icon-left .form-control{ padding-left:2.6rem }
.position-relative.has-icon-left{ position:relative }
.form-control-icon{
  position:absolute; top:50%; left:.75rem; transform:translateY(-50%);
  color:var(--accent); pointer-events:none;
}

/* Placeholder ve fokus */
.form-control::placeholder{ color:var(--accent) !important; opacity:.7 }
.form-control:focus,.form-select:focus{ border-color:var(--accent); box-shadow:0 0 0 .2rem var(--focus); outline:0 }
.caret-accent{ caret-color:var(--accent) }
.form-text{ color:var(--text-dim) }

/* Göz ikonlu şifre butonu (genel) */
.toggle-pass{
  position:absolute; top:50%; right:.5rem; transform:translateY(-50%);
  color:var(--accent); border:0; background:transparent; padding:.25rem .5rem; border-radius:.5rem;
}

/* Checkbox/Radio */
.form-check-input{ background:transparent; border:1px solid var(--border) }
.form-check-input:checked{ background-color:var(--accent); border-color:var(--accent) }

/* Autofill (Chrome/Safari sarı fonu kaldır) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--accent);
  box-shadow:0 0 0 1000px transparent inset !important;
  transition:background-color 9999s ease-out 0s;
  caret-color:var(--accent);
}

/* Geçersiz durumlar */
.is-invalid,.form-control.is-invalid,.was-validated .form-control:invalid{
  border-color:var(--danger) !important;
  box-shadow:0 0 0 .2rem rgba(220,53,69,.25) !important;
}
.invalid-feedback{ color:#ff8a98 }

/* ------------------------------
   8) Tablolar
--------------------------------*/
.table{ color:var(--text); border-color:var(--border) }
.table thead th{ color:var(--text); border-bottom:1px solid var(--border) }
.table tbody tr{ border-color:var(--border) }
.table-striped>tbody>tr:nth-of-type(odd){ background:rgba(255,255,255,.02) }
.table-hover tbody tr:hover{ background:rgba(255,255,255,.04) }

/* Responsive tablo kapsayıcı + sticky thead */
.table-wrap{ overflow:auto; border:1px solid var(--border); border-radius:.75rem }
.table-sticky thead th{ position:sticky; top:0; background:var(--card); z-index:1 }

/* İsteğe bağlı modern tablo görünümü */
.table-modern{ color:var(--text); border-color:var(--border) }
.table-modern thead th{ border-bottom:1px solid var(--border); font-weight:700 }
.table-modern tbody tr:hover{ background:rgba(255,255,255,.04) }

/* ------------------------------
   9) Uyarılar/Etiketler/Badge
--------------------------------*/
.alert{ border-radius:.75rem; border:1px solid var(--border) }
.alert-warning{ background:rgba(255,193,7,.08); color:var(--accent) }
.alert-danger{ background:rgba(220,53,69,.12); color:#ff98a6 }
.alert-success{ background:rgba(46,160,67,.12); color:#7ee093 }

.badge-accent{ background:var(--accent); color:#000 }
.badge-outline-accent{ background:transparent; color:var(--accent); border:1px solid var(--accent) }

/* ------------------------------
   10) Modal/Offcanvas/Dropdown
--------------------------------*/
.modal-content{ background:var(--card); border:1px solid var(--border) }
.offcanvas{ background:var(--card); color:var(--text) }
.dropdown-menu{ background:var(--card); border:1px solid var(--border) }
.dropdown-item{ color:var(--text-dim) }
.dropdown-item:hover{ color:var(--accent); background:rgba(255,193,7,.08) }

/* ------------------------------
   11) Breadcrumb / Pagination / Navs
--------------------------------*/
.breadcrumb{ --bs-breadcrumb-divider-color: var(--text-dim) }
.breadcrumb .breadcrumb-item,.breadcrumb .breadcrumb-item a{ color:var(--text-dim) }
.breadcrumb .breadcrumb-item.active{ color:var(--accent) }

.pagination{ gap:.25rem }
.pagination .page-link{ background:transparent; color:var(--text-dim); border-color:var(--border); border-radius:.65rem; min-width:2.25rem; text-align:center }
.pagination .page-link:hover{ color:var(--accent); border-color:var(--accent) }
.pagination .active .page-link{ background:var(--accent); color:#000; border-color:var(--accent) }

/* Nav Tabs */
.nav-tabs .nav-link{ color:var(--text-dim); border-color:transparent transparent var(--border) }
.nav-tabs .nav-link.active{ color:var(--accent); background:transparent; border-color:var(--border) var(--border) var(--accent) }

/* ------------------------------
   12) Auth (Login/Register) Sekmesi
--------------------------------*/
#auth{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem }
.auth-card{
  width:100%; max-width:440px; background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:2rem;
}
.brand{ letter-spacing:.5px }
.brand-sub{ color:var(--text-dim) }
@media (max-width:576px){
  .auth-card{ padding:1.5rem }
  .brand{ font-size:1.15rem }
}

/* Liste sayfaları için geniş kart modu */
.auth-card.wide-xl{ max-width:min(1580px,95vw) }

/* Hatalı girişte hafif titreşim */
@keyframes shake{ 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }
.auth-card.error{ animation:shake .4s ease-in-out 1 }

/* ------------------------------
   13) Yardımcı Sınıflar
--------------------------------*/
.rounded-2xl{ border-radius:1rem !important }
.hover-card:hover{ transform:translateY(-2px); transition:transform .15s ease }
.opacity-70{ opacity:.7 !important }
.opacity-85{ opacity:.85 !important }
.min-h-100{ min-height:100% }
.min-vh-60{ min-height:60vh }

/* Eşit yükseklikli menü kutuları (ör. Kasa İşlemleri) */
.btn-tile{ height:96px; display:flex; align-items:center; justify-content:center }
@media (min-width:768px){ .btn-tile{ height:84px } }

/* İçerik boşluğu (stoksorgu hissi) */
.content-shell{ padding:1.5rem }

/* ------------------------------
   14) Print
--------------------------------*/
@media print{
  .app-sidebar,.app-navbar{ display:none !important }
  .app-content{ margin:0; padding:0 }
  body{ background:#fff; color:#000 }
}

/* ------------------------------
   15) Formlarda beyaz arkaplanı tam kaldır (global)
--------------------------------*/
html{ color-scheme:dark }
body .form-control,
body .form-select,
body textarea,
body select,
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]){
  background-color:transparent !important;
  background-image:none !important;
  color:var(--accent) !important;
  border:1px solid var(--border) !important;
  caret-color:var(--accent);
}

/* placeholder */
body .form-control::placeholder, body textarea::placeholder{ color:var(--accent) !important; opacity:.7 }

/* fokus */
body .form-control:focus, body .form-select:focus, body textarea:focus{
  border-color:var(--accent) !important; box-shadow:0 0 0 .2rem var(--focus) !important; outline:0;
}

/* .bg-white gibi sınıfları da şeffaf yap */
body .form-control.bg-white, body .bg-white.form-control, body .form-select.bg-white{ background-color:transparent !important }

/* iOS/WebKit kozmetik */
@supports (-webkit-appearance:none){
  input,select,textarea{ -webkit-appearance:none; appearance:none; background-clip:padding-box }
}

/* disabled/readonly */
.form-control[readonly], .form-control:disabled{ background-color:transparent !important; color:var(--accent) !important; opacity:.85 }

/* ------------------------------
   16) Login başlığını sarı yap
--------------------------------*/
#auth .auth-card h2.h4, #auth .auth-card .h4, #auth h4{ color:var(--accent) !important }

/* ------------------------------
   17) Mobilde üst boşluğu kaldır (menü/login)
--------------------------------*/
@media (max-width:576px){
  #auth{ align-items:flex-start !important; justify-content:center; padding-top:0 !important; padding-bottom:1rem; min-height:100vh }
  .auth-card{ margin-top:0 !important; width:100% }
}

/* ------------------------------
   18) DataTables (Vanilla + Bootstrap) Tema Uyumları
   - Stoksorgu görünümü (koyu arama alanı, sarı metin, modern sayfalama)
--------------------------------*/

/* Üst kontroller: length solda, search sağda */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{ padding:.25rem 0 }
@media (min-width:768px){
  .dataTables_wrapper .dataTables_length{ float:left }
  .dataTables_wrapper .dataTables_filter{ float:right; text-align:right }
}

/* Arama inputu ve length select (koyu zemin, sarı yazı) */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  background:#2a2a2a !important;
  border:1px solid #444 !important;
  color:var(--accent) !important;
  outline:0;
}
.dataTables_wrapper .dataTables_filter input::placeholder{ color:var(--accent); opacity:.75 }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus{
  border-color:var(--accent) !important; box-shadow:0 0 0 .2rem var(--focus) !important;
}

/* DataTable satır/başlık renkleri (stoksorgu hissi) */
table.dataTable thead th,
table.dataTable tbody td,
table.dataTable tbody th{
  color:var(--accent) !important;
  vertical-align:middle;
}

/* Hover vurgusu */
table.dataTable tbody tr:hover{ background:rgba(255,255,255,.04) }

/* Responsive detay satırı */
table.dataTable>tbody>tr.child{ background:rgba(255,255,255,.02) }
table.dataTable>tbody>tr.child ul.dtr-details{ color:var(--text-dim) }
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before{
  background-color:var(--accent);
  color:#000;
  border:1px solid var(--border);
  box-shadow:none;
}
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before{
  background:transparent;
  color:var(--accent);
  border:1px solid var(--accent);
}

/* İşleniyor katmanı */
.dataTables_processing{
  background:rgba(0,0,0,.35);
  color:var(--accent);
  border:1px solid var(--border);
}

/* Info satırı */
.dataTables_wrapper .dataTables_info{ color:var(--text-dim) }

/* --- Sayfalama --- */
/* Bootstrap entegrasyonu (ul.pagination) varsa */
.dataTables_wrapper .dataTables_paginate .pagination{
  justify-content:flex-end; gap:.25rem;
}
.dataTables_wrapper .dataTables_paginate .page-item .page-link{
  background:transparent; color:var(--accent); border-color:var(--accent);
  border-radius:.6rem; min-width:2.25rem; text-align:center;
}
.dataTables_wrapper .dataTables_paginate .page-item .page-link:hover{
  background:rgba(255,193,7,.15); color:#fff;
}
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link{
  background:var(--accent); border-color:var(--accent); color:#000;
}

/* Vanilla DataTables (anchor.paginate_button) için */
.dataTables_wrapper .dataTables_paginate .paginate_button{
  display:inline-block; margin:.125rem; padding:.35rem .65rem; border:1px solid var(--accent);
  color:var(--accent); background:transparent; border-radius:.6rem; text-decoration:none; cursor:pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:rgba(255,193,7,.15); color:#fff; border-color:var(--accent);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--accent); color:#000 !important; border-color:var(--accent);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
  opacity:.5; cursor:not-allowed;
}

/* Seçim eklentisi kullanılırsa satır seçimi vurgusu */
table.dataTable>tbody>tr.selected>*{ box-shadow: inset 0 0 0 9999px rgba(255,193,7,.08) }

/* ------------------------------
   19) Sayfa başlık şeridi (yardımcı)
--------------------------------*/
.page-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem }
.page-title{ margin:0 }

#messageModal .modal-title,
#confirmModal .modal-title{ color: var(--accent) !important; }
#messageModal .modal-title i,
#confirmModal .modal-title i{ color: var(--accent) !important; }