:root {
  --bg: #f5f6fa;
  --blue-dark: #1F4E78;
  --blue-mid: #305496;
  --green-bg: #DFFFD6;
  --orange-bg: #FFE2B3;
  --red-bg: #F8D7DA;
  --panel: #ffffff;
  --border: #cfd8dc;
  --radius: 12px;
  --shadow: 0 10px 28px rgba(0,0,0,0.08);
  --font: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  margin: 0;
  background-color: var(--bg);
  font-family: var(--font);
  color: #1a1a1a;
}

.app-header {
  background-color: var(--blue-dark);
  color: #fff;
  text-align: center;
  padding: 16px 12px;
  box-shadow: var(--shadow);
}
.app-header h1 {
  font-size: 1.4rem;
  margin: 0;
  font-weight: 600;
}
.app-header .sub {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-top: 4px;
}

.main-card {
  background-color: var(--panel);
  max-width: 450px; 
  margin: 0 auto 24px auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  padding: 20px 20px 12px;
}

.field-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}
.field-row label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--blue-dark);
  margin-bottom: 6px;
}

.text-input {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  color: #333;
}

select.text-input {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231F4E78%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 12px top 50%;
  background-size: 12px auto;
  padding-right: 30px;
}

.flex-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap; 
}
.flex-row > div {
  flex: 1 1 140px; 
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.action-btn {
  flex: 1 1 140px;
  background-color: var(--blue-mid);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
  height: 48px;
}
.action-btn:hover {
  filter: brightness(1.05);
}

.ghost-btn {
  flex: 1 1 140px;
  background-color: #fff;
  color: var(--blue-mid);
  border: 2px solid var(--blue-mid);
  border-radius: var(--radius);
  padding: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
  height: 48px;
}
.ghost-btn:hover {
  background-color: #eef3ff;
}

.result-box {
  background-color: #fff;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 16px;
  min-height: 80px;
}
.result-baslik {
  font-size: 0.8rem;
  color: var(--blue-dark);
  font-weight: 600;
  margin-bottom: 4px;
}
.result-icerik {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4rem;
}

.result-empty { background-color: var(--green-bg); border-color: #6fb66f !important; }
.result-occupied { background-color: var(--orange-bg); border-color: #c9953a !important; }

.app-footer {
  text-align: center;
  font-size: 0.85rem;
  color: #555;
  padding: 20px;
  background-color: #eee;
  border-top: 1px solid var(--border);
  margin-top: 20px;
}

.tabs-container {
  max-width: 500px;
  margin: 24px auto 16px auto;
  padding: 0 10px;
}
.tabs {
  display: flex;
  flex-wrap: wrap; 
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  background: #fff;
}
.tab-btn {
  flex: 1 1 auto;
  padding: 12px 5px;
  border: none;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  color: var(--blue-mid);
  font-size: 0.95rem;
  transition: 0.2s;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 400px) {
  .tab-btn { font-size: 0.85rem; padding: 10px 2px; }
}
.tab-btn.active {
  background: var(--blue-mid);
  color: #fff;
}
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.3s; }

.table-card {
  background-color: var(--panel);
  max-width: 98%; 
  margin: 0 auto 24px auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  padding: 15px;
}

.table-container {
  overflow: auto; 
  max-height: 70vh; 
  background: white;
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.05); 
  border: 1px solid var(--border);
}

.schedule-table {
  width: 100%;
  border-collapse: separate; 
  border-spacing: 0;
  min-width: 800px; 
}
.schedule-table th, .schedule-table td {
  text-align: center;
  font-size: 0.85rem;
}

/* GÜNCELLENDİ: Z-index 50 yapıldı (Yeşil kutuların daima üstünde kalacak) */
.schedule-table th {
  background-color: var(--blue-dark);
  color: #fff;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 50; 
  padding: 10px;
  min-width: 130px; 
}

/* GÜNCELLENDİ: Sol saat sütunu z-index 40 yapıldı */
.schedule-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 40; 
  background-color: var(--blue-mid);
  color: white;
  font-weight: bold;
  padding: 10px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* GÜNCELLENDİ: Sol üst köşe z-index 60 yapıldı (Her şeyin üstünde) */
.schedule-table th:first-child {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 60; 
  background-color: #1a252f;
}

.table-header-title {
  text-align: center;
  font-weight: 600;
  color: var(--blue-dark);
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: #f9f9f9;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.checkbox-group label {
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--blue-dark);
}

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

.admin-lock-screen {
  text-align: center;
  padding: 40px 20px;
}
.admin-lock-screen input {
  max-width: 200px;
  margin-bottom: 15px;
  text-align: center;
  letter-spacing: 3px;
}

.cizelge-filter{
  background:#eef3ff;
  padding:8px 12px;              
  border-radius:8px;
  border:1px solid #cdd9ed;
  margin-bottom:8px;
}

.cizelge-filter .filter-title{
  font-weight:700;
  color: #1F4E78;
  margin:0 0 6px 0;
  display:block;
  font-size:0.8rem;
}

.cizelge-filter .filter-label{
  font-size:0.7rem;
  margin:0 0 2px 0;
  display:block;
  color:#555;
}

.cizelge-filter .filter-grid{
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  gap:10px;
  align-items:end;
}

.cizelge-filter .text-input{
  height:28px;
  min-height:28px;
  padding:0 8px;
  font-size:0.8rem;
}

#filtreTemizleBtn{
  flex: 0 0 auto;               
  margin:0 !important;          
  height:28px !important;
  min-height:28px !important;
  padding:0 14px !important;    
  line-height:26px !important;
  font-size:0.75rem !important;
  border-radius:14px !important;
  white-space:nowrap;
  align-self:end;
}

@media (max-width: 700px){
  .cizelge-filter .filter-grid{
    grid-template-columns: 1fr;
    align-items:stretch;
  }
  #filtreTemizleBtn{
    width:100% !important;
  }
}