/* ═══════════════════════════════════════════════════════════
   Collins Chair — App-specific styles
   tokens.css + base.css üzerine inşa edilir
   ═══════════════════════════════════════════════════════════ */

/* ── VIEW GEÇİŞİ ──────────────────────────────────────────── */

.view          { display: none; }
.view.active   { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.hidden        { display: none !important; }

/* ── SIDEBAR ──────────────────────────────────────────────── */

.sidebar-date {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.sidebar-day {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text-primary);
}

.sidebar-date-num {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.icon-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--text-lg);
  line-height: 1;
  padding: 2px 8px;
  transition: background var(--transition-fast);
}
.icon-btn:hover { background: var(--color-surface-hover); }

.sidebar-section {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.sidebar-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding: var(--space-1) 0;
}
.stat-row strong {
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
}

.sidebar-view-toggle {
  margin: var(--space-4);
  width: calc(100% - 2 * var(--space-4));
}

/* ── MOBİL HAMBURGER MENÜ ─────────────────────────────────── */
.mobile-menu-btn { display: none; }

@media (max-width: 768px) {
  .mobile-menu-btn { display: inline-flex; }
}

/* ── TAKVIM TOOLBAR ───────────────────────────────────────── */

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-3);
}

.toolbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.view-toggle {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.view-toggle-btn {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-3);
  transition: background var(--transition-fast);
}
.view-toggle-btn.active {
  background: var(--color-gold);
  color: var(--color-bg);
  font-weight: 600;
}

/* "Hide cancelled" butonu aktifken vurgulu */
#hideCancelledBtn.active {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
  font-weight: 600;
}

/* ── GÜN GÖRÜNÜMÜ ─────────────────────────────────────────── */

.day-view {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  height: calc(100vh - var(--header-height) - 57px);
}

/* Kaydırılabilir alan: time gutter + gün sütunu */
.day-scroll {
  display: grid;
  grid-template-columns: 52px 1fr;
  overflow-y: auto;
  padding-top: 12px;
}

.time-gutter {
  border-right: 1px solid var(--color-border);
  position: relative;
}

.time-label {
  position: absolute;
  right: 8px;
  font-size: 11px;
  color: var(--color-text-muted);
  transform: translateY(-50%);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Tek gün sütunu — tüm berber randevuları, overlap ile bölünür */
.day-column {
  position: relative;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 59px,
    var(--color-border) 59px,
    var(--color-border) 60px
  );
  min-height: 540px;
  cursor: cell;
}

.day-column.drag-over {
  background-color: color-mix(in srgb, var(--color-gold) 8%, transparent);
  outline: 2px dashed var(--color-gold);
  outline-offset: -2px;
}

/* ── RANDEVU BLOKU ────────────────────────────────────────── */

.appt-block {
  position: absolute;
  z-index: 1;
  border-radius: var(--radius-sm);
  background: var(--color-gold);   /* JS ile override edilir */
  color: #fff;
  padding: 4px 8px;
  cursor: pointer;
  overflow: hidden;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  border-left: 3px solid rgba(255,255,255,0.35);
  font-size: var(--text-sm);
}
.appt-block:hover { opacity: 0.85; transform: translateX(2px); }

/* JS'den renk atanamadıysa (atanmamış berber) fallback status renkleri */
.appt-block.status-fallback-confirmed  { background: var(--color-gold);         color: var(--color-bg); }
.appt-block.status-fallback-pending    { background: var(--color-warning);       color: var(--color-bg); }
.appt-block.status-fallback-completed  { background: var(--color-success);       color: #fff; }
.appt-block.status-fallback-cancelled  { background: var(--color-surface-hover); color: var(--color-text-muted); text-decoration: line-through; }
.appt-block.status-fallback-no_show   { background: var(--color-danger);        color: #fff; opacity: 0.65; }

/* İptal + gelmedi: her zaman üstü çizili / soluk */
.appt-block.is-cancelled { text-decoration: line-through; }
.appt-block.is-no_show   { opacity: 0.65; }

.appt-block-time {
  font-size: var(--text-xs);
  font-weight: 600;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
}
.appt-block-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}
.appt-block-service {
  font-size: var(--text-xs);
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
}
.appt-block-meta {
  font-size: var(--text-xs);
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
}

/* Hafta görünümü: tek satır, kırpılır, "..." yok */
.appt-block-compact {
  white-space: nowrap;
  overflow: hidden;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
}

/* ── HAFTA GÖRÜNÜMÜ ───────────────────────────────────────── */

.week-view {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  height: calc(100vh - var(--header-height) - 57px);
}

.week-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.week-header-cell {
  padding: var(--space-2) var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-left: 1px solid var(--color-border);
}
.week-header-cell:first-child { border-left: none; }
.week-header-cell.today {
  color: var(--color-gold);
  font-weight: 700;
}

/* Hafta gövdesi: 7 eşit sütun liste düzeni */
.week-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-y: auto;
  align-items: start;
}

/* Gün hücresi: randevular alt alta liste */
.week-day-col {
  border-left: 1px solid var(--color-border);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px;
  cursor: default;
}
.week-day-col:first-child { border-left: none; }

.week-day-col.drag-over {
  background-color: color-mix(in srgb, var(--color-gold) 8%, transparent);
  outline: 2px dashed var(--color-gold);
  outline-offset: -2px;
}

/* Hafta randevu satırı */
.week-appt-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  background: var(--color-gold);
  color: #fff;
  font-size: var(--text-xs);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}
.week-appt-item:hover  { opacity: 0.85; }
.week-appt-item.is-cancelled { text-decoration: line-through; }
.week-appt-item.is-no_show   { opacity: 0.65; }
.week-appt-item.dragging     { opacity: 0.35; pointer-events: none; }

.week-appt-time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.week-appt-info {
  overflow: hidden;
  flex: 1;
}

/* Sürükleme sırasında blok saydamlaşır */
.appt-block.dragging {
  opacity: 0.35;
  pointer-events: none;
}

/* ── MÜŞTERİ LİSTESİ ──────────────────────────────────────── */

.search-bar {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.customer-list {
  overflow-y: auto;
}

.customer-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.customer-row:hover { background: var(--color-surface-hover); }

.customer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.customer-info {
  flex: 1;
  min-width: 0;
}
.customer-name {
  font-weight: 600;
  color: var(--color-text-primary);
}
.customer-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── ÖDEME ────────────────────────────────────────────────── */

.payment-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.summary-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
}
.summary-card-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.summary-card-value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
}

.payment-list { overflow-y: auto; }

.payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

/* ── DROPDOWN ─────────────────────────────────────────────── */

.dropdown-list {
  position: absolute;
  z-index: var(--z-dropdown);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  left: 0;
  top: 100%;
  margin-top: 2px;
}
.dropdown-item {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  transition: background var(--transition-fast);
}
.dropdown-item:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }

/* ── ÖDEME YÖNTEM BUTONLARI ───────────────────────────────── */

.pay-method-btns {
  display: flex;
  gap: var(--space-2);
}
.pay-method-btn {
  flex: 1;
  padding: var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}
.pay-method-btn.active {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: rgba(var(--color-gold-rgb, 196,159,79), 0.08);
}

.change-display {
  margin-top: var(--space-2);
  font-weight: 700;
  color: var(--color-gold);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}

/* ── AYARLAR NAV ──────────────────────────────────────────── */

.settings-nav {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
  overflow-x: auto;
}

.settings-nav-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-3) var(--space-4);
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.settings-nav-btn:hover { color: var(--color-text-primary); }
.settings-nav-btn.active {
  border-bottom-color: var(--color-gold);
  color: var(--color-gold);
  font-weight: 600;
}

/* ── AYARLAR BODY & PANELLER ──────────────────────────────── */

.settings-body {
  flex: 1;
  overflow-y: auto;
}

.settings-panel {
  display: none;
  flex-direction: column;
  padding: var(--space-5) 0;
}
.settings-panel.active { display: flex; }

.settings-section-header {
  padding: var(--space-3) var(--space-6) var(--space-2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}

.settings-actions {
  padding: var(--space-2) var(--space-6) var(--space-4);
}

/* ── AYARLAR ──────────────────────────────────────────────── */

.settings-group {
  max-width: 400px;
  margin-bottom: var(--space-5);
  padding: 0 var(--space-6);
}

/* ── GÜN SEÇİCİ ────────────────────────────────────────────── */

.day-picker {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.day-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  transition: all var(--transition-fast);
}
.day-btn.active {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-bg);
}

/* ── TOGGLE LİST ────────────────────────────────────────────── */

.toggle-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.toggle-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.toggle-item input[type="checkbox"] {
  accent-color: var(--color-gold);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ── LİSANS KARTI ───────────────────────────────────────────── */

.license-card {
  margin: 0 var(--space-6) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.license-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.license-card-row:last-child { border-bottom: none; }

.license-card-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.license-code {
  font-family: monospace;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: var(--color-surface-hover);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.license-card-value {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.settings-hint {
  padding: 0 var(--space-6) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 400px;
}

/* ── BOOKING LINK PREVIEW ────────────────────────────────── */

.settings-section-title {
  padding: var(--space-4) var(--space-6) var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2);
}

.booking-link-preview {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) var(--space-6) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  flex-wrap: wrap;
}
.booking-link-preview.hidden { display: none; }

.booking-link-preview span {
  font-size: var(--text-xs);
  font-family: monospace;
  color: var(--color-accent);
  word-break: break-all;
  flex: 1;
}

.btn-xs {
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  height: auto;
}

/* ── BİLDİRİM AYARLARI ────────────────────────────────────── */

.notif-type-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.notif-type-info {
  flex: 1;
}

.notif-type-label {
  font-size: var(--text-sm);
  font-weight: 500;
}

.notif-type-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Toggle switch (iOS style) */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: var(--color-border);
  transition: background 0.2s;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.toggle-switch input:checked + .toggle-track {
  background: var(--color-accent);
}

.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(18px);
}

/* Channel selector */
.notif-channel-grid {
  display: flex;
  gap: var(--space-3);
}

.notif-channel-card {
  flex: 1;
  display: flex;
  cursor: pointer;
}

.notif-channel-card input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.notif-channel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--text-sm);
  transition: border-color 0.15s, background 0.15s;
}

.notif-channel-card input:checked + .notif-channel-body {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.notif-channel-icon {
  font-size: 20px;
}

.notif-channel-name {
  font-size: var(--text-xs);
  font-weight: 500;
}

/* Provider badge */
.notif-provider-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* ── BERBER AYAR LİSTESİ ──────────────────────────────────── */

.barber-settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.barber-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.barber-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.barber-edit-form {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}

/* Staff → Customers section */
.staff-customers-section {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
}

.sc-loading,
.sc-empty {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
}

.sc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sc-customer-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}

.sc-customer-row:hover {
  background: var(--color-surface-hover);
}

.sc-customer-info {
  flex: 1;
  min-width: 0;
}

.sc-customer-name {
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-customer-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.sc-customer-phone {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.barber-schedule {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

/* ── FORM LABEL ──────────────────────────────────────────────── */

.form-label { font-weight: 600; }

/* ── PERSONEL LİSTESİ ─────────────────────────────────────── */

.staff-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
  margin: 1px 0;
}
.staff-item:hover { background: var(--color-surface-hover); }
.staff-item.filter-active {
  background: var(--color-surface-hover);
  font-weight: 600;
}
.staff-item.filter-active::after {
  content: '✓';
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-gold);
}

.staff-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
}
.staff-dot.off { background: var(--color-text-muted); }

/* ── HEADER BRAND ─────────────────────────────────────────── */

.brand-mark {
  font-size: var(--text-lg);
  color: var(--color-gold);
  margin-right: var(--space-1);
}

/* ── FORM ROW ─────────────────────────────────────────────── */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

/* ── DETAY MODAL ──────────────────────────────────────────── */

.detail-field {
  margin-bottom: var(--space-3);
}
.detail-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.detail-value {
  color: var(--color-text-primary);
  font-size: var(--text-sm);
}

/* ── MÜŞTERİ GEÇMİŞİ ────────────────────────────────────────── */

.customer-history {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.customer-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  gap: var(--space-3);
}
.customer-history-row:last-child { border-bottom: none; }
.customer-history-row .hist-date { color: var(--color-text-muted); white-space: nowrap; }

/* ── POS ──────────────────────────────────────────────────── */

.pos-provider-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-2);
}
.pos-status {
  font-size: var(--text-xs);
  color: var(--color-success);
  margin-top: var(--space-1);
}

.pay-method-btn.pos-btn {
  background: var(--color-surface);
  border-color: var(--color-gold);
  color: var(--color-gold);
}
.pay-method-btn.pos-btn.active {
  background: var(--color-gold);
  color: var(--color-bg);
}

.pos-checkout-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.pos-checkout-status {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.pos-qr canvas {
  border-radius: var(--radius-sm);
}
.pos-paid-msg {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(72, 199, 116, 0.15);
  color: var(--color-success);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

/* ── RAPORLAR ─────────────────────────────────────────────── */

.report-period-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.report-period-btn {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}
.report-period-btn.active {
  background: var(--color-gold);
  color: var(--color-bg);
  border-color: var(--color-gold);
}
.report-date-input {
  margin-left: auto;
  width: auto;
  max-width: 160px;
  font-size: var(--text-sm);
}

.report-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
  flex-shrink: 0;
}
.report-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.report-card-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.report-card-value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-primary);
}

.report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-4);
  flex: 1;
  overflow: auto;
}

.report-section {
  padding: 0 var(--space-4) var(--space-4);
}
.report-section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.report-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--color-border);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
}
.report-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.report-table tr:last-child td { border-bottom: none; }
.report-table td:not(:first-child) { text-align: right; }
.report-table th:not(:first-child) { text-align: right; }

/* Bar chart */
.report-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 80px;
  padding: var(--space-2) var(--space-4);
}
.bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 2px;
}
.bar-fill {
  width: 100%;
  background: var(--color-gold);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: height 0.3s ease;
}
.bar-label {
  font-size: 9px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Saatlik yoğunluk haritası */
.report-hourly-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 80px;
  padding: var(--space-2) 0 0;
}
.hourly-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.hourly-fill {
  width: 100%;
  background: var(--color-primary);
  border-radius: 2px 2px 0 0;
  transition: height 0.3s ease;
}
.hourly-count {
  font-size: 9px;
  color: var(--color-text-muted);
  min-height: 12px;
}
.hourly-label {
  font-size: 9px;
  color: var(--color-text-muted);
}

/* Ödeme dağılımı */
.pay-mix-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.pay-mix-label {
  width: 36px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.pay-mix-bar {
  flex: 1;
  height: 10px;
  background: var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pay-mix-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.4s ease;
}
.pay-mix-cash { background: var(--color-success); }
.pay-mix-card { background: var(--color-primary); }
.pay-mix-pct {
  width: 30px;
  font-size: var(--text-xs);
  text-align: right;
}

/* Müşteri trendi (mevcut bar-fill'in renk varyantı) */
.bar-fill-alt {
  background: var(--color-warning);
}

/* ── RESPONSIVE ───────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Formlar */
  .payment-summary { grid-template-columns: 1fr; }
  .form-row        { grid-template-columns: 1fr; }

  /* Toolbar: iki satıra sığdır */
  .calendar-toolbar {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }
  .toolbar-nav  { flex: 1; min-width: 0; }
  .toolbar-right {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-1);
  }
  /* Toolbar tarih metni kısalt */
  #currentDateLabel { font-size: var(--text-sm); }

  /* Gün görünümü: sabit yükseklik yerine dvh */
  .day-view {
    height: calc(100dvh - var(--header-height) - 52px);
  }
  .day-scroll { grid-template-columns: 44px 1fr; }
  .time-label { font-size: 9px; right: 4px; }

  /* Randevu blokları: daha küçük font */
  .appt-block { padding: 2px 5px; font-size: 11px; }
  .appt-block-time    { font-size: 9px; }
  .appt-block-name    { font-size: 11px; }
  .appt-block-service { font-size: 9px; }
  .appt-block-meta    { font-size: 9px; }

  /* Hafta görünümü */
  .week-view {
    height: calc(100dvh - var(--header-height) - 52px);
  }
  .week-header { overflow-x: auto; }
  .week-grid   { overflow-x: auto; }

  /* Hafta hücre metni */
  .week-cell { min-width: 80px; }
  .week-cell-appt { font-size: 10px; padding: 2px 3px; }

  /* Müşteri modalı tam ekran */
  .modal-box {
    max-width: 100%;
    max-height: 90dvh;
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  /* Raporlar: tek sütun */
  .reports-grid { grid-template-columns: 1fr !important; }

  /* Settings paneli */
  .settings-nav { overflow-x: auto; flex-wrap: nowrap; }
  .settings-nav-btn { white-space: nowrap; font-size: var(--text-xs); }
}

/* ── LİSTE GÖRÜNÜMÜ ─────────────────────────────────────── */

.list-view {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
}

/* ── LİST VIEW GÜN BAŞLIĞI ───────────────────────────────────── */

.list-day-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-border);
}

.list-day-header:first-child {
  margin-top: 0;
}

.list-day-header.list-day-today {
  border-bottom-color: var(--color-primary);
}

.list-day-header.list-day-today .list-day-name {
  color: var(--color-primary);
}

.list-day-name {
  font-weight: 700;
  font-size: var(--text-base);
}

.list-day-date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-left: var(--space-1);
}

.list-day-count {
  margin-left: auto;
  font-size: var(--text-xs);
  background: var(--color-surface-alt, rgba(255,255,255,0.08));
  color: var(--color-text-muted);
  border-radius: 999px;
  padding: 1px 8px;
}

.list-appt-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: background 0.15s;
}

.list-appt-row:hover {
  background: var(--color-surface-alt, #2a2a2a);
}

.list-appt-row.status-cancelled {
  opacity: 0.5;
}

.list-appt-time {
  font-size: var(--text-lg);
  font-weight: 600;
  min-width: 52px;
  color: var(--color-primary);
}

.list-appt-info {
  flex: 1;
}

.list-appt-name {
  font-weight: 600;
  font-size: var(--text-base);
}

.list-appt-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.list-appt-status {
  font-size: var(--text-xs);
  text-transform: capitalize;
}

.list-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-8);
  font-size: var(--text-sm);
}

/* ── TAKVİM DRAG ─────────────────────────────────────────── */

#viewCalendar.cal-dragging,
#viewCalendar.cal-dragging * {
  cursor: grabbing !important;
  user-select: none;
}

.day-scroll,
.week-body,
#listViewContent {
  cursor: grab;
}

/* ── MÜŞTERİ KARTLARI ───────────────────────────────────── */

.customer-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
}

.customer-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}

.customer-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.customer-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.customer-card-meta {
  flex: 1;
}

.customer-no {
  font-size: var(--text-xs);
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.customer-no-badge {
  font-size: var(--text-xs);
  color: var(--color-primary);
  font-weight: 600;
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
}

.customer-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.customer-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-warning) 20%, transparent);
  color: var(--color-warning);
  font-weight: 600;
  text-transform: uppercase;
}

.customer-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.customer-detail-row {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Detay modal */
.customer-avatar-lg {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.cd-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.cd-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cd-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.linked-customer-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

/* ── STAFF MODE BANNER ────────────────────────────────────── */

.staff-mode-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: color-mix(in srgb, var(--color-gold) 12%, transparent);
  border: 1px solid var(--color-gold-dim);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
}

.staff-mode-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold);
  white-space: nowrap;
}

/* ── MY DAY VIEW ──────────────────────────────────────────── */

.my-day-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.my-day-date-wrap {
  flex: 1;
}

.my-day-title {
  font-size: var(--text-lg);
  font-weight: 700;
}

.my-day-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Next up card */
.my-day-next-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--color-gold) 8%, transparent);
  border: 1px solid var(--color-gold-dim);
  border-left: 4px solid var(--color-gold);
  border-radius: var(--radius-md);
}

.mdn-time-badge {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-gold);
  background: color-mix(in srgb, var(--color-gold) 15%, transparent);
  border: 1px solid var(--color-gold-dim);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}

.mdn-body {
  flex: 1;
  min-width: 0;
}

.mdn-customer {
  font-size: var(--text-base);
  font-weight: 600;
}

.mdn-detail {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.mdn-call-btn {
  font-size: var(--text-sm);
  color: var(--color-gold);
  white-space: nowrap;
  text-decoration: none;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-gold-dim);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.mdn-call-btn:hover { background: color-mix(in srgb, var(--color-gold) 15%, transparent); }

/* Appointment list */
.my-day-list {
  padding: var(--space-3) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.my-day-loading,
.my-day-empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.mda-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}

.mda-card:hover { border-color: var(--color-border-light); }

.mda-card.mda-past {
  opacity: 0.55;
}

.mda-card.mda-next {
  border-color: var(--color-gold-dim);
  border-left: 3px solid var(--color-gold);
}

.mda-time-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 44px;
}

.mda-start {
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-text);
}

.mda-end {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.mda-body {
  flex: 1;
  min-width: 0;
}

.mda-customer {
  font-size: var(--text-sm);
  font-weight: 600;
}

.mda-service {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.mda-phone {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--color-gold);
  margin-top: 4px;
  text-decoration: none;
}
.mda-phone:hover { text-decoration: underline; }

.mda-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}

.mda-actions {
  display: flex;
  gap: var(--space-1);
}

.mda-complete { color: var(--color-success) !important; }
.mda-noshow   { color: var(--color-danger)  !important; }

/* ── LIGHT MODE OVERRIDES ─────────────────────────────────── */

[data-mode="light"] .appt-block {
  border-left-color: rgba(0,0,0,0.2);
  color: #fff;
}

[data-mode="light"] .time-gutter {
  border-right-color: var(--color-border);
}

[data-mode="light"] .customer-avatar,
[data-mode="light"] .customer-avatar-lg {
  background: var(--color-gold);
  color: #fff;
}

[data-mode="light"] .nav-item:hover {
  background: rgba(184,146,46,0.07);
}

[data-mode="light"] .nav-item.active {
  background: rgba(184,146,46,0.12);
}

[data-mode="light"] .modal-overlay {
  background: rgba(0,0,0,0.4);
}

[data-mode="light"] .modal-box,
[data-mode="light"] .modal {
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

/* Theme toggle button görünümü */
.theme-toggle-btn {
  font-size: var(--text-base);
  padding: var(--space-1) var(--space-2);
}

/* ── LİSANS BANNER ─────────────────────────────────────────── */
:root {
  --license-banner-h: 36px;
}

.license-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1200;
  height: var(--license-banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0 12px;
}

.license-banner--info    { background: #1a3a5c; color: #7ec8f8; }
.license-banner--warning { background: #3d2e00; color: #f5c842; }
.license-banner--urgent  { background: #4a1010; color: #f87a7a; }

.license-banner__text { flex: 1; text-align: center; }

.license-banner__btn {
  background: var(--color-gold, #c49f4f);
  color: #111;
  border: none;
  border-radius: 6px;
  padding: 3px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.license-banner__btn:hover { opacity: .85; }

.license-banner__close {
  background: none;
  border: none;
  color: inherit;
  opacity: .5;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.license-banner__close:hover { opacity: 1; }

@media (max-width: 480px) {
  .license-banner { font-size: 0.72rem; gap: 8px; }
  .license-banner__btn { padding: 3px 8px; }
}

/* ── LİSANS PANELİ ─────────────────────────────────────────── */
.license-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.license-status-icon { font-size: 1.6rem; flex-shrink: 0; }
.license-status-info { flex: 1; }
.license-status-label {
  font-size: .95rem;
  font-weight: 600;
  color: var(--color-text);
}
.license-status-sub {
  font-size: .78rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Trial progress bar */
.license-trial-bar {
  height: 5px;
  background: var(--color-border);
  border-radius: 3px;
  margin-bottom: 14px;
  overflow: hidden;
}
.license-trial-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--color-gold, #c49f4f);
  transition: width .3s;
}

/* ── STAFF AVATAR ─────────────────────────────────────────── */

.staff-avatar {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  user-select: none;
}

/* My Day header barber avatar */
.my-day-barber-avatar {
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-2);
  flex-shrink: 0;
}

/* Settings — photo upload row */
.barber-photo-row {
  margin-top: var(--space-3);
}

.barber-photo-preview {
  display: inline-flex;
  align-items: center;
}

.barber-photo-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── WHATSAPP MODAL ─────────────────────────────────────────── */
.wa-template-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.wa-template-option:has(input:checked) {
  border-color: var(--color-gold);
  background: rgba(201,168,76,0.06);
}
.wa-template-option input[type="radio"] { accent-color: var(--color-gold); }

.wa-template-preview {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  white-space: pre-wrap;
  border-left: 2px solid var(--color-gold-dim);
}

/* ── CLOSING TIME OVERLAY ──────────────────────────────────── */
.closing-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 7, 0.92);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  animation: closingFadeIn 0.6s ease;
}
.closing-overlay[hidden] { display: none; }

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

.closing-inner {
  text-align: center;
  padding: var(--space-10) var(--space-8);
  max-width: 420px;
}

.closing-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-family: var(--font-serif);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  border: 1px solid var(--color-gold-dim);
  padding: var(--space-1) var(--space-4);
  border-radius: 2px;
  margin-bottom: var(--space-5);
}

.closing-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 6vw, 3rem);
  color: var(--color-text);
  font-weight: 400;
  margin: 0 0 var(--space-8);
  line-height: 1.1;
}

.closing-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.closing-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.closing-stat-value {
  font-family: var(--font-serif);
  font-size: var(--text-xl, 1.5rem);
  font-size: 1.75rem;
  color: var(--color-gold);
}

.closing-stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.closing-tomorrow {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  line-height: 1.6;
}

.closing-tomorrow strong {
  color: var(--color-text);
}

.closing-dismiss {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── DRIVER.JS TOUR — Collins Dark Theme ──────────────────── */
.collins-tour-popover {
  background: #231f16;
  color: #e8e3d9;
  border: 1px solid #3d3420;
  border-top: 3px solid #c49f4f;
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,.75), 0 0 0 1px rgba(196,159,79,.07);
  min-width: 290px;
  max-width: 340px;
  padding: 18px 20px 14px;
}
.collins-tour-popover .driver-popover-title {
  color: #c49f4f;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding-right: 28px;
}
.collins-tour-popover .driver-popover-description {
  color: #bdb8ae;
  font-size: .82rem;
  line-height: 1.65;
  margin-top: 6px;
}
.collins-tour-popover .driver-popover-description strong {
  color: #e8e3d9;
}
.collins-tour-popover .driver-popover-footer {
  margin-top: 14px;
  border-top: 1px solid #332e1e;
  padding-top: 11px;
}
.collins-tour-popover .driver-popover-progress-text {
  color: #554e3a;
  font-size: .72rem;
  letter-spacing: .05em;
}
.collins-tour-popover .driver-popover-close-btn {
  color: #554e3a;
  top: 14px;
  right: 14px;
}
.collins-tour-popover .driver-popover-close-btn:hover,
.collins-tour-popover .driver-popover-close-btn:focus {
  color: #c49f4f;
}
.collins-tour-popover .driver-popover-footer button {
  background: transparent;
  border: 1px solid #3d3420;
  color: #8c8068;
  border-radius: 4px;
  font-size: .74rem;
  letter-spacing: .05em;
  padding: 4px 11px;
  transition: background .15s, color .15s, border-color .15s;
}
.collins-tour-popover .driver-popover-footer button:hover,
.collins-tour-popover .driver-popover-footer button:focus {
  background: #2e2817;
  border-color: #c49f4f;
  color: #c49f4f;
}
.collins-tour-popover .driver-popover-next-btn,
.collins-tour-popover .driver-popover-done-btn {
  background: #c49f4f !important;
  border-color: #c49f4f !important;
  color: #1a1208 !important;
  font-weight: 600 !important;
}
.collins-tour-popover .driver-popover-next-btn:hover,
.collins-tour-popover .driver-popover-next-btn:focus,
.collins-tour-popover .driver-popover-done-btn:hover,
.collins-tour-popover .driver-popover-done-btn:focus {
  background: #d4b060 !important;
  border-color: #d4b060 !important;
}
.collins-tour-popover .driver-popover-arrow                { border-color: #231f16; }
.collins-tour-popover .driver-popover-arrow-side-left      { border-right-color:  transparent; border-bottom-color: transparent; border-top-color:    transparent; }
.collins-tour-popover .driver-popover-arrow-side-right     { border-left-color:   transparent; border-bottom-color: transparent; border-top-color:    transparent; }
.collins-tour-popover .driver-popover-arrow-side-top       { border-right-color:  transparent; border-bottom-color: transparent; border-left-color:   transparent; }
.collins-tour-popover .driver-popover-arrow-side-bottom    { border-left-color:   transparent; border-top-color:    transparent; border-right-color:  transparent; }

@media (max-width: 640px) {
  .driver-popover.collins-tour-popover {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 20px !important;
    top: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: calc(100vw - 24px) !important;
    border-radius: 12px;
    padding: 16px 18px 12px;
  }
  .collins-tour-popover .driver-popover-arrow { display: none !important; }
  .collins-tour-popover .driver-popover-footer button {
    padding: 8px 16px;
    font-size: .8rem;
    min-height: 36px;
  }
}

/* ── AI CHAT WIDGET ────────────────────────────────────────── */

/* Header butonu */
.ai-header-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-gold) !important;
}
.ai-header-btn:hover { background: var(--color-surface-hover) !important; }
.ai-btn-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; }

/* ── Panel kapsayıcı ─────────────────────────────────────────
   position:fixed + yüksek z-index → her zaman viewport'a göre
   konumlanır, app-shell veya herhangi bir parent'tan bağımsız  */
.ai-panel {
  position: fixed !important;
  bottom: 0;
  right: 24px;
  width: 360px;
  height: 520px;
  max-height: calc(100dvh - 70px);   /* header'ın altında başlar */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  z-index: 9999;
  overflow: hidden;
  transition: height .25s ease, width .25s ease,
              right .25s ease, border-radius .2s ease;
}
.ai-panel.hidden { display: none !important; }

/* Büyütülmüş hal */
.ai-panel.ai-expanded {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  border: none;
}

/* Mobil */
@media (max-width: 600px) {
  .ai-panel {
    right: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
  }
}

/* ── Başlık barı — altın arka plan ────────────────────────── */
.ai-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--color-gold);
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.ai-panel-header:hover { background: #b8922e; }
[data-mode="light"] .ai-panel-header:hover { background: #a07a24; }

.ai-panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-on-accent);
  letter-spacing: .02em;
}
.ai-panel-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.ai-panel-actions .icon-btn {
  color: var(--color-on-accent);
  opacity: .85;
  width: 28px;
  height: 28px;
  font-size: 16px;
}
.ai-panel-actions .icon-btn:hover { opacity: 1; background: rgba(0,0,0,.15); }

.ai-badge {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.9);
  font-weight: 600;
  letter-spacing: .04em;
}

/* ── Mesajlar ─────────────────────────────────────────────── */
.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  scroll-behavior: smooth;
  background: var(--color-bg);
}
.ai-expanded .ai-messages {
  padding: var(--space-5) max(var(--space-6), calc(50% - 380px));
}

.ai-msg-user {
  align-self: flex-end;
  background: var(--color-gold);
  color: var(--color-on-accent);
  padding: 8px 13px;
  border-radius: 16px 16px 4px 16px;
  max-width: 80%;
  font-size: var(--text-sm);
  line-height: 1.5;
  word-break: break-word;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.ai-msg-assistant {
  align-self: flex-start;
  background: var(--color-surface);
  color: var(--color-text);
  padding: 8px 13px;
  border-radius: 16px 16px 16px 4px;
  max-width: 80%;
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--color-border);
}
.ai-msg-typing {
  align-self: flex-start;
  background: var(--color-surface);
  padding: 10px 18px;
  border-radius: 16px 16px 16px 4px;
  font-size: 1.3rem;
  letter-spacing: 4px;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* ── Input barı ───────────────────────────────────────────── */
.ai-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-surface);
}
.ai-expanded .ai-input-row {
  padding: var(--space-2) max(var(--space-4), calc(50% - 380px));
}

.ai-input-row input {
  flex: 1;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 8px 14px;
  font-size: var(--text-sm);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition-fast);
  min-width: 0;
}
.ai-input-row input:focus { border-color: var(--color-gold); }

.ai-send-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-on-accent);
  border: none;
  cursor: pointer;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.ai-send-btn:hover { transform: scale(1.08); background: #b8922e; }


/* Trace pulse animasyonu */
@keyframes tracePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}
.btn-danger {
  background: var(--color-danger, #dc2626);
  color: #fff;
  border-color: transparent;
}
.btn-danger:hover { filter: brightness(1.1); }