/* ============= ADMIN PANELİ - ARKA PLAN BEYAZ + SADECE DURUM RENKLİ ============= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f8f9fc;
  color: #2c3e50;
  line-height: 1.6;
}

#admin-header {
  background: #1a1a2e;
  color: #ffffff;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#admin-header h1 {
  margin: 0;
  font-size: 2.1em;
  font-weight: 600;
}

#admin-header p {
  margin: 10px 0 18px;
  font-size: 1.15em;
  color: #e0e0e0;
}

#admin-header button {
  padding: 11px 24px;
  background: #ff7043;
  color: #ffffff;
  border: none;
  border-radius: 50px;
  font-weight: bold;
  font-size: 1em;
  cursor: pointer;
  transition: all 0.3s ease;
}

#admin-header button:hover {
  background: #ff5722;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(255, 87, 34, 0.3);
}

#admin-main {
  padding: 30px 20px;
  max-width: 1150px;
  margin: 0 auto;
}

/* ============= İSTATİSTİKLER (YAN YANA GÖRÜNÜM) ============= */
.order-stats .stats-container {
    display: flex; /* İstatistik kutularını yan yana getirir */
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap; /* Mobil uyumluluk için */
}

.order-stats .stat-card { 
    flex: 1; 
    min-width: 180px;
    background: white;
    padding: 22px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(0,0,0,0.07);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.order-stats .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.order-stats .stat-card h4 {
  margin: 0 0 12px;
  color: #6c757d;
  font-size: 0.95em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.order-stats .stat-card p {
  margin: 0;
  font-size: 2em;
  font-weight: 700;
  color: #2c3e50;
}

.order-stats .new-orders p { color: #dc3545; }
.order-stats .total-revenue p { color: #007bff; }
.order-stats .total-orders p { color: #28a745; }


/* ============= TABLO SİPARİŞ LİSTESİ STİLLERİ ============= */
#order-list-section h2, #message-list-section h2 {
    font-size: 1.7em;
    color: #1a1a2e;
    margin-bottom: 20px;
}

.order-table-container {
    overflow-x: auto;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.07);
    border: 1px solid #e9ecef;
}

.order-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px; 
}

.order-table thead tr {
    background-color: #f1f3f6;
    color: #495057;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-table th, .order-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
    vertical-align: top;
}

.order-table tbody tr:last-child td {
    border-bottom: none;
}

.order-table tbody tr:hover {
    background-color: #fafafa;
}

.order-table td:first-child { font-weight: 700; color: #1a1a2e; } 

.product-details-cell strong {
    font-weight: 600;
    color: #2c3e50;
    display: block;
    margin-top: 5px;
}
.product-details-cell .options {
    font-size: 0.8em;
    color: #6c757d;
    display: block;
    margin-bottom: 5px;
}
.total-price-cell {
    font-weight: 700;
    color: #dc3545;
}

.action-buttons {
    display: flex;
    gap: 8px;
    min-width: 60px; 
}

.btn-delete {
    padding: 6px 10px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background 0.2s;
}

.btn-delete:hover {
    background: #c82333;
}

/* ============= DURUM SEÇİMİ VE RENKLERİ ============= */
.status-select {
  padding: 9px 16px;
  border: 1.5px solid #ced4da;
  border-radius: 10px;
  font-size: 0.95em;
  background: white;
  color: #2c3e50;
  cursor: pointer;
  min-width: 160px;
  transition: all 0.3s ease;
}

.status-select:focus {
  outline: none;
  border-color: #ff7043;
  box-shadow: 0 0 0 3px rgba(255, 112, 67, 0.18);
}

.status-new { 
    background-color: #f8d7da !important; 
    color: #721c24 !important; 
    border-color: #f5c6cb !important; 
}
.status-approved { 
    background-color: #d1ecf1 !important; 
    color: #0c5460 !important; 
    border-color: #bee5eb !important; 
}
.status-preparing { 
    background-color: #fff3cd !important; 
    color: #856404 !important; 
    border-color: #ffeeba !important; 
}
.status-shipped { 
    background-color: #d4edda !important; 
    color: #155724 !important; 
    border-color: #c3e6cb !important; 
}
.status-delivered { 
    background-color: #cce5ff !important; 
    color: #004085 !important; 
    border-color: #b8daff !important; 
}


/* ============= MESAJLAR ============= */
#message-list-section {
    margin-top: 40px;
}

/* Mesajlar listesi için kapsayıcı */
#messagesContainer {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.07);
    border: 1px solid #e9ecef;
    overflow: hidden; /* Kenar yuvarlaklığını korur */
}

/* Her bir mesaj öğesi */
.message-item {
    padding: 15px 20px;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 0; /* Kutu görünümünü kaldırdık */
    transition: background-color 0.2s;
    background: none;
    box-shadow: none;
    border-radius: 0;
}

.message-item:last-child {
    border-bottom: none;
}

.message-item:hover {
    background-color: #f7f9fb; /* Hafif hover efekti */
    box-shadow: none;
}

/* Okunmamış mesajı daha belirgin yap */
.message-item.unread {
    border-left: 5px solid #ff7043; /* Ana rengimiz */
    background: #fff8f5; /* Hafif turuncu arka plan */
}

/* Başlık (Gönderen ve Zaman) */
.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px; /* Azaltıldı */
    flex-wrap: wrap;
    gap: 10px;
}

.message-sender {
    font-weight: 700; /* Daha kalın */
    color: #1a1a2e; /* Daha koyu */
    font-size: 1.05em;
    flex-grow: 1;
}

.message-time {
    color: #6c757d;
    font-size: 0.85em;
}

/* Mesaj içeriği */
.message-content {
    color: #2c3e50;
    line-height: 1.6;
    font-size: 0.95em;
    margin: 6px 0 10px 0; /* Boşluklar ayarlandı */
    white-space: pre-wrap; /* Mesajdaki satır sonlarını korur */
}
.message-content strong {
    font-weight: 600;
}


/* Aksiyon butonu (Okundu/Yeni Yap) */
.update-message-status-btn {
    background: #1a1a2e; /* Daha kurumsal bir buton rengi */
    color: white;
    border: none;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    cursor: pointer;
    font-weight: 500;
    transition: 0.3s;
}

.update-message-status-btn[data-read="true"] {
    background: #6c757d; /* Okunduysa daha silik gri */
}

.update-message-status-btn:hover {
    background: #343a40;
    transform: translateY(-1px);
}
.update-message-status-btn[data-read="true"]:hover {
    background: #5a6268;
}
/* ============= YÜKLEME & BOŞ ============= */
.loading-message,
.no-data-message {
  text-align: center;
  padding: 50px 20px;
  color: #6c757d;
  font-style: italic;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.07);
  margin: 25px 0;
  font-size: 1.1em;
}

/* ============= MOBİL UYUM ============= */
@media (max-width: 900px) {
    .order-table {
        min-width: 800px;
    }
}

@media (max-width: 768px) {
  #admin-main { padding: 15px; }
  
  .order-stats .stats-container { flex-direction: column; gap: 15px; }
  .order-stats .stat-card { min-width: 100%; }

  .status-select { min-width: 100%; }

  .order-table th, .order-table td {
      padding: 10px 10px;
  }
}
/* ============= GİRİŞ EKRANI (DÜZELTİLDİ) ============= */
#loginOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.login-box {
  background: white;
  padding: 40px 50px;
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.3);
  text-align: center;
  max-width: 400px;
  width: 90%;
  animation: fadeIn 0.4s ease;
}

.login-box h2 {
  margin: 0 0 25px;
  font-size: 1.9em;
  color: #ff5722; /* BAŞLIK RENGİ DÜZELTİLDİ */
  font-weight: 600;
}

/* Yeni eklenen wrapper */
.input-group {
    width: 100%;
    margin-bottom: 16px;
}

.login-box input {
  width: 100%;
  padding: 14px 16px;
  /* margin-bottom: 16px; input-group'a taşındı */
  border: 1.5px solid #ced4da;
  border-radius: 10px;
  font-size: 1em;
  font-weight: normal; 
  transition: all 0.3s ease;
}

.login-box input:focus {
  outline: none;
  border-color: #FF5722;
  box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.15);
}

#loginBtn {
  width: 100%;
  padding: 14px;
  background: #FF5722;
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: bold;
  font-size: 1.05em;
  cursor: pointer;
  transition: all 0.3s ease;
}

#loginBtn:hover {
  background: #e64a19;
  transform: translateY(-1px);
}

#loginError {
  color: #d32f2f;
  margin-top: 15px;
  font-size: 0.92em;
  min-height: 22px;
  font-weight: 500;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}