/* Ana Renk Paleti Tanımlaması: Bu değişkenleri değiştirerek tüm temanın rengini değiştirebilirsiniz. */
:root {
  /* Ana Renkler */
  --color-primary-500: 17, 17, 17;    /* koyu siyah */
  --color-primary-600: 0, 0, 0;       /* tam siyah */
  --color-secondary: 38, 38, 38;      /* koyu gri */

  /* Arka Plan Renkleri */
  --bg-body: 15, 15, 15;         /* gövde tamamen koyu */
  --bg-sidebar: 20, 20, 20;      /* sidebar hafif açık koyu */
  --bg-modal: 25, 25, 25;        /* modal koyu ama içerik okunabilir */
  --bg-card: 30, 30, 30;         /* kart yüzeyleri için ideal koyuluk */
  --bg-notification: var(--color-primary-500);

  /* Metin Renkleri */
  --text-primary: 255, 255, 255;  /* açık metin */
  --text-secondary: 255, 255, 255;; /* ikincil metin */
  --text-white: 255, 255, 255;

  /* Kenarlık Renkleri */
  --border-light: 60, 60, 60; /* koyu gri kenarlık */
  --border-primary: var(--color-primary-500);

  /* Gölge */
  --shadow: 0, 0, 0; /* siyah gölge */

  /* Modal */
  --modal-backdrop: 0, 0, 0, 0.75;

  /* Status Colors */
  --status-active: 34, 197, 94;    /* green-500 */
  --status-inactive: 239, 68, 68;  /* red-500 */
}



body {
  font-family: 'Inter', sans-serif;
  background-color: rgb(var(--bg-body));
}

/* Ana renkleri Tailwind sınıflarına dahil etme */
.bg-primary {
  background-color: rgb(var(--color-primary-500));
}

.hover\:bg-primary-dark:hover {
  background-color: rgb(var(--color-primary-600));
}

.text-primary {
  color: rgb(var(--color-primary-500));
}

.border-primary {
  border-color: rgb(var(--color-primary-500));
}

/* Tema renklerini uygulama */
#sidebar {
  background-color: rgb(var(--bg-sidebar)) !important;
}

#sidebar .border-gray-100 {
  border-color: rgb(var(--border-light)) !important;
}

#sidebar h1 {
  color: rgb(var(--text-primary)) !important;
}

#sidebar a {
  color: rgb(var(--text-secondary)) !important;
}

#sidebar a.active {
  color: rgb(var(--text-primary)) !important;
  background-color: rgba(var(--color-primary-500), 0.15) !important;
}

#sidebar a:hover {
  color: rgb(var(--text-primary)) !important;
}

#sidebar button {
  color: rgb(var(--text-secondary)) !important;
}

#sidebar button:hover {
  color: rgb(var(--text-primary)) !important;
}

#main-modal > div {
  background-color: rgb(var(--bg-modal)) !important;
}

#main-modal .border-b, #main-modal .border-t {
  border-color: rgb(var(--border-light)) !important;
}

#main-modal h3 {
  color: rgb(var(--text-primary)) !important;
}

#main-modal p {
  color: rgb(var(--text-secondary)) !important;
}

.page-card, .bg-white {
  background-color: rgb(var(--bg-card)) !important;
}

.text-gray-800 {
  color: rgb(var(--text-primary)) !important;
}

.text-gray-600, .text-gray-500, .text-gray-700 {
  color: rgb(var(--text-secondary)) !important;
}

.text-gray-400 {
  color: rgb(var(--text-secondary)) !important;
}

.border-gray-100, .border-gray-200, .border-gray-300 {
  border-color: rgb(var(--border-light)) !important;
}

.bg-gray-50, .bg-gray-100, .bg-gray-200 {
  background-color: rgb(var(--bg-card)) !important;
}

/* Header */
header {
  background-color: rgb(var(--bg-card)) !important;
  border-color: rgb(var(--border-light)) !important;
}

header h2 {
  color: rgb(var(--text-primary)) !important;
}

header span {
  color: rgb(var(--text-secondary)) !important;
}

header button span {
  color: rgb(var(--text-primary)) !important;
}

header button {
  background-color: rgb(var(--bg-card)) !important;
  border-color: rgb(var(--color-primary-500)) !important;
  color: rgb(var(--text-secondary)) !important;
}

/* Sayfa İçeriği */
.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6 {
  color: rgb(var(--text-primary)) !important;
}

.page-content p, .page-content span, .page-content div {
  color: rgb(var(--text-secondary)) !important;
}

.page-content table {
  background-color: rgb(var(--bg-card)) !important;
}

.page-content table thead {
  background-color: rgba(var(--color-primary-500), 0.1) !important;
}

.page-content table th {
  color: rgb(var(--text-secondary)) !important;
  border-color: rgb(var(--border-light)) !important;
}

.page-content table td {
  color: rgb(var(--text-secondary)) !important;
  border-color: rgb(var(--border-light)) !important;
}

.page-content table a {
  color: rgb(var(--color-primary-500)) !important;
}

/* Sidebar Geçiş Efekti */
#sidebar {
  transition: transform 0.3s ease-in-out;
}

@media (min-width: 768px) {
  body:not(.login-page) #sidebar {
    transform: translateX(0);
    /* Masaüstünde görünür */
  }

  body:not(.login-page) #main-content {
    margin-left: 16rem;
    /* Masaüstünde sidebar genişliği kadar boşluk */
  }
}

/* Sidebar Backdrop */
#sidebar-backdrop {
  transition: opacity 0.3s ease-in-out;
}

/* Bildirim Konumlandırması (Sağ alt) */
#notification-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 90vw;
}

/* Modal Arka Planı */
.modal-backdrop {
  background-color: rgba(var(--modal-backdrop));
}