/* Black & White minimalist theme */
:root {
  /* Inverted (light) theme */
  --bg: #f7f7f8;
  --panel: #ffffff;
  --text: #111113;
  --muted: #55575a;
  --border: #e5e5ea;
  --accent: #111113; /* primary dark */
  --danger: #c62828;
  --success: #2e7d32;
  --warning: #b08900;
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden; /* sayfa genelinde yatay taşmayı engelle */
}

.container { max-width: 1280px; margin: 0 auto; padding: 20px; }

/* One-page layout */
.onepage { max-width: none; width: 100%; margin: 0; padding: 12px 18px; position: relative; z-index: 1; }

.topbar { position: sticky; top: 56px; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.86)); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); }

/* Topbar mobil ayarları */
@media (max-width: 768px) {
  .topbar {
    top: auto; /* Navbar yüksekliği mobilde değişken olduğu için auto yapıyoruz */
    position: relative;
  }
}
.topbar h1 { font-size: 22px; margin: 0; font-weight: 600; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.tabs { display: flex; gap: 8px; margin-top: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.tab { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.tab.active { background: var(--accent); color: #fff; font-weight: 600; }

.btn { background: transparent; color: var(--text); padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.success { border-color: var(--success); color: var(--success); }

.table-wrap { overflow-x: auto; overflow-y: auto; max-height: 70vh; width: 100%; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
/* Unboxed table (no panel look) */
.table-wrap.unboxed { border: none; border-radius: 0; background: transparent; box-shadow: none; max-height: none; }
table { width: 100%; border-collapse: collapse; }
/* tablo geniş olduğunda sadece kapsayıcı scroll olsun */
.table-wrap table { min-width: 980px; }
thead th { position: sticky; top: 0; background: #fafafa; z-index: 1; }
th, td { border-bottom: 1px solid var(--border); padding: 10px 8px; text-align: left; white-space: normal; word-break: break-word; }
tr:hover { background: #f4f4f5; }
tr.checked-out { background: rgba(198,40,40,0.08); }
tr.room-group-start { border-top: 2px solid var(--border); }
tr.room-group-start:first-child { border-top: none; }

/* Excel görünümü (aktif tablo) daha kompakt ve daha az satır kırma */
#guestTable { font-size: 13px; }
#guestTable th, #guestTable td { white-space: nowrap; word-break: keep-all; padding: 8px 6px; }
#guestTable td.note { white-space: normal; word-break: break-word; max-width: 360px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.badge.warn { border-color: var(--warning); color: var(--warning); }
.badge.danger { border-color: var(--danger); color: var(--danger); }
.badge.success { border-color: var(--success); color: var(--success); }

.room-strip { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.room-card { background: #ffffff; border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.room-title { font-weight: 600; margin-bottom: 8px; }
.guest-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px dashed var(--border); border-radius: 8px; margin-bottom: 8px; }


/* Checkout pin styles */
.checkout-pin { transition: all 0.3s ease; }
.checkout-pin-today { 
  animation: blinkRed 1s infinite;
  box-shadow: 0 0 8px rgba(198, 40, 40, 0.6);
}
.checkout-pin-tomorrow { 
  animation: blinkOrange 1.2s infinite;
  box-shadow: 0 0 8px rgba(245, 124, 0, 0.6);
  font-weight: 700;
}
.checkout-pin-day2 { 
  /* Mavi, yanıp sönmesin */
}
@keyframes blinkRed { 
  0%, 100% { opacity: 1; transform: scale(1); } 
  50% { opacity: 0.5; transform: scale(1.05); } 
}
@keyframes blinkOrange { 
  0%, 100% { opacity: 1; transform: scale(1); } 
  50% { opacity: 0.6; transform: scale(1.08); } 
}

/* Siren flashing row/indicator for KBS Bildirilmedi */
.siren { display: inline-flex; align-items: center; gap: 6px; }
.siren-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: blink 1s infinite; }
@keyframes blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.row-siren { animation: rowblink 1.2s infinite; }
@keyframes rowblink { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(255,59,48,0.0); } 50% { box-shadow: inset 0 0 0 100vmax rgba(255,59,48,0.06); } }

.filters { display: flex; gap: 8px; flex-wrap: wrap; }
input, select, textarea { background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
select[name="country"] { min-width: 200px; }
label { color: var(--muted); font-size: 12px; }
.field { display: grid; gap: 6px; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; }

.footer { color: var(--muted); font-size: 12px; text-align: center; padding: 16px; }

/* ============================================
   MOBIL RESPONSIVE STYLES
   ============================================ */

/* Tablet ve küçük ekranlar (max-width: 900px) */
@media (max-width: 900px) {
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: repeat(1, 1fr); }
  .onepage { padding: 10px 12px; width: 100%; }
  
  .container { padding: 12px; }
  .panel { padding: 12px; }
  
  .topbar { 
    flex-direction: column; 
    align-items: stretch; 
    gap: 8px; 
    padding: 8px 0;
  }
  
  .topbar-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  
  .topbar .btn {
    flex: 1;
    min-width: 120px;
    padding: 10px;
    font-size: 14px;
  }
  
  .tabs {
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 8px;
  }
  
  .tab {
    padding: 6px 10px;
    font-size: 13px;
    flex: 1;
    min-width: 0;
    text-align: center;
  }
  
  .table-wrap {
    max-height: 60vh;
    border-radius: 8px;
  }
  
  .table-wrap table {
    min-width: 800px;
    font-size: 12px;
  }
  
  th, td {
    padding: 8px 6px;
    font-size: 12px;
  }
  
  #guestTable {
    font-size: 11px;
  }
  
  #guestTable th, #guestTable td {
    padding: 6px 4px;
  }
  
  .modal {
    width: 95vw;
    max-height: 95vh;
    border-radius: 8px;
  }
  
  .modal-body {
    padding: 12px;
  }
  
  .form-grid {
    gap: 8px;
  }
  
  input, select, textarea {
    padding: 8px;
    font-size: 14px;
  }
  
  .btn {
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* Room grid responsiveness */
@media (max-width: 1200px) {
  .room-strip { 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 10px;
  }
}

/* Mobil cihazlar (max-width: 768px) */
@media (max-width: 768px) {
  .onepage { 
    padding: 8px 10px; 
  }
  
  .topbar h1 {
    font-size: 18px;
  }
  
  .room-strip { 
    grid-template-columns: 1fr; 
    gap: 8px;
  }
  
  .room-card {
    padding: 10px;
  }
  
  .room-title {
    font-size: 14px;
    margin-bottom: 6px;
  }
  
  .guest-chip {
    padding: 6px;
    margin-bottom: 6px;
    font-size: 12px;
  }
  
  .table-wrap {
    max-height: 50vh;
  }
  
  .table-wrap table {
    min-width: 700px;
  }
  
  th, td {
    padding: 6px 4px;
    font-size: 11px;
  }
  
  .badge {
    font-size: 10px;
    padding: 2px 6px;
  }
  
  .checkout-pin {
    font-size: 10px;
    padding: 2px 6px;
  }
  
  .modal {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }
  
  .modal-header {
    padding: 12px;
  }
  
  .modal-body {
    padding: 10px;
  }
  
  .form-grid {
    gap: 6px;
  }
  
  .filters {
    flex-direction: column;
    gap: 6px;
  }
  
  select[name="country"] {
    min-width: 100%;
  }
}

/* Küçük mobil cihazlar (max-width: 480px) */
@media (max-width: 480px) {
  .onepage { 
    padding: 6px 8px; 
  }
  
  .topbar h1 {
    font-size: 16px;
  }
  
  .topbar .btn {
    padding: 8px;
    font-size: 12px;
  }
  
  .tab {
    padding: 5px 8px;
    font-size: 11px;
  }
  
  .room-card {
    padding: 8px;
  }
  
  .room-title {
    font-size: 13px;
  }
  
  .guest-chip {
    padding: 5px;
    font-size: 11px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .table-wrap {
    max-height: 45vh;
  }
  
  .table-wrap table {
    min-width: 600px;
    font-size: 10px;
  }
  
  th, td {
    padding: 4px 3px;
    font-size: 10px;
  }
  
  #guestTable {
    font-size: 10px;
  }
  
  #guestTable th, #guestTable td {
    padding: 4px 3px;
  }
  
  .panel {
    padding: 10px;
  }
  
  .btn {
    padding: 8px 10px;
    font-size: 12px;
  }
  
  input, select, textarea {
    padding: 6px;
    font-size: 13px;
  }
  
  .modal-header {
    padding: 10px;
    font-size: 14px;
  }
  
  .modal-body {
    padding: 8px;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .form-actions .btn {
    width: 100%;
  }
}
  
  #profileBtn span:last-child {
    display: none;
  }
}

/* Modal */
.modal-backdrop { 
  position: fixed !important; 
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0,0,0,0.7) !important; 
  display: none; 
  align-items: center !important; 
  justify-content: center !important; 
  padding: 16px; 
  z-index: 99999 !important; 
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 !important;
  transform: none !important;
}

.modal { 
  background: var(--panel); 
  border: 1px solid var(--border); 
  border-radius: 12px; 
  width: min(980px, 96vw); 
  max-width: 100%;
  max-height: 90vh; 
  overflow: auto; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  margin: auto !important;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10000;
}

.modal-header { 
  display:flex; 
  align-items:center; 
  justify-content: space-between; 
  padding: 14px 16px; 
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-body { 
  padding: 16px; 
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.modal-close { 
  background: transparent; 
  border: 1px solid var(--border); 
  border-radius: 8px; 
  padding: 6px 10px; 
  cursor: pointer; 
}

/* Mobil Modal Optimizasyonları */
@media (max-width: 768px) {
  .modal-backdrop {
    padding: 0 !important;
    align-items: stretch;
  }
  
  .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
  }
  
  .modal-header {
    padding: 12px 14px !important;
    position: sticky;
    top: 0;
    background: var(--panel);
    z-index: 10;
  }
  
  .modal-body {
    padding: 12px 14px !important;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Body scroll'u engelle modal açıkken */
  body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .modal-header {
    padding: 10px 12px !important;
    font-size: 14px;
  }
  
  .modal-body {
    padding: 10px 12px !important;
  }
  
  .modal-close {
    padding: 5px 8px !important;
    font-size: 12px;
  }
}

/* Country autocomplete */
.country-autocomplete {
  position: absolute;
  background: white;
  border: 1px solid #ddd;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 4px;
  margin-top: 2px;
}

.country-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  transition: background 0.2s;
}

.country-item:hover {
  background: #f0f0f0;
}

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