/* ═══════════════════════════════════════════════════════════
   Collins Chair — Mobile Styles
   Strateji: html.is-native sınıfı JS tarafından eklenir (Capacitor tespiti).
   Media query kullanılmaz — viewport hesabına güvenilmez.
   Android API 30+ · iOS 16+
   ═══════════════════════════════════════════════════════════ */

/* ── SİSTEM TEMASI ──────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  html:not([data-mode]) {
    --color-bg:             #f5f2ec;
    --color-surface:        #ffffff;
    --color-surface-2:      #eeebe2;
    --color-surface-hover:  rgba(0,0,0,0.04);
    --color-border:         #dedad0;
    --color-border-light:   #ccc8bc;
    --color-text:           #1e1c18;
    --color-text-muted:     #7a7468;
    --color-text-faint:     #b0ab9e;
    --color-gold:           #b8922e;
    --color-gold-dim:       #8a6e22;
    --color-gold-pale:      #5a4010;
    --color-on-accent:      #ffffff;
    --color-text-primary:   #1e1c18;
    --color-text-secondary: #7a7468;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.10);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.16);
  }
}

/* Yatay taşmayı her durumda engelle */
html, body { max-width: 100vw; overflow-x: hidden; }

/* ── VARSAYILAN: bottom nav ve FAB gizli (web'de görünmez) */
.mobile-bottom-nav,
.mobile-fab { display: none; }

/* ══════════════════════════════════════════════════════════
   NATIVE UYGULAMA STİLLERİ
   Yalnızca html.is-native sınıfı mevcutsa uygulanır.
   ══════════════════════════════════════════════════════════ */

/* ── APP SHELL — Grid bypass, fixed positioning ─────────── */
/* Grid track sorunu: display:none olan sidebar sütunu yine de 220px kaplar.
   Çözüm: header ve content'i grid'den çıkarıp fixed yap. */

/* Body scroll'u kapat — tüm layout fixed elementlerle yönetiliyor */
html.is-native,
html.is-native body {
  overflow: hidden !important;
  height: 100dvh !important;
}
html.is-native .app-shell { min-height: 0 !important; }

html.is-native .app-sidebar  { display: none !important; }

html.is-native .app-header {
  position: fixed !important;
  top:   env(safe-area-inset-top, 0px) !important;
  left:  0 !important;
  right: 0 !important;
  height: 52px !important;
  z-index: 50 !important;
}

html.is-native .app-content {
  position: fixed !important;
  top:    calc(52px + env(safe-area-inset-top, 0px)) !important;
  left:   0 !important;
  right:  0 !important;
  bottom: 64px !important;
  overflow:   hidden !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* View flex zinciri: app-content (flex col) → view (flex:1) → list/toolbar */
html.is-native .view.active {
  flex: 1 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Takvim: toolbar sabit, views esnek */
html.is-native .calendar-toolbar { flex-shrink: 0; }

html.is-native .day-view,
html.is-native .week-view {
  flex: 1 !important;
  height: auto !important;
  overflow-y: auto !important;
}

html.is-native .list-view {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: var(--space-2) var(--space-3) !important;
}

/* Diğer viewler (customers, payments, reports, settings) */
html.is-native #viewCustomers,
html.is-native #viewPayments,
html.is-native #viewReports,
html.is-native #viewSettings,
html.is-native #viewMyday {
  overflow-y: auto !important;
  padding: var(--space-3) !important;
}

/* ── HEADER ─────────────────────────────────────────────── */
html.is-native .app-header {
  padding: 0 var(--space-3);
  height: 52px;
}

html.is-native .header-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

html.is-native .app-header .brand-name {
  font-size: 1rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.is-native .header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

html.is-native #newApptBtn  { display: none; }
html.is-native #syncStatus  { font-size: 0.6rem; padding: 2px 6px; }

/* ── STAFF MODE BANNER — mobilde kompakt ─────────────────── */
html.is-native .staff-mode-banner {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(201,168,76,0.12);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  max-width: 140px;
  overflow: hidden;
}
html.is-native .staff-mode-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
html.is-native #exitStaffModeBtn {
  font-size: 0.6rem;
  padding: 1px 5px;
  flex-shrink: 0;
  background: var(--color-gold);
  color: var(--color-on-accent);
  border: none;
  border-radius: 3px;
}

/* Mobilde brand-name staff modda küçülsün */
html.is-native .app-header .brand-mark { font-size: 0.9rem; }
html.is-native .header-actions { gap: var(--space-1); }

/* ── DEMO BANNER — native'de kompakt ────────────────────── */
html.is-native #demoBanner  { padding: 5px 12px; font-size: 0.72rem; }
html.is-native .demo-cta    { display: none !important; }
html.is-native .demo-exit   { display: inline-block !important; font-size: 0.65rem; padding: 2px 8px; }

/* Demo banner varken header + content aşağı kayar (banner yüksekliği: 36px) */
html.is-native.has-demo-banner .app-header {
  top: calc(36px + env(safe-area-inset-top, 0px)) !important;
}
html.is-native.has-demo-banner .app-content {
  top: calc(36px + 52px + env(safe-area-inset-top, 0px)) !important;
}
html.is-native.has-demo-banner .day-view {
  height: calc(100dvh - 36px - 52px - env(safe-area-inset-top, 0px) - 57px - 64px - 24px);
}
/* padding-top sadece banner varken banner kendi CSS'i ile ayarlanır */

/* ── BOTTOM NAV ─────────────────────────────────────────── */
html.is-native .mobile-bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  z-index: var(--z-modal);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html.is-native .mbn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.58rem;
  font-family: var(--font-sans);
  cursor: pointer;
  padding: 6px 2px;
  transition: color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

html.is-native .mbn-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

html.is-native .mbn-item.active       { color: var(--color-gold); }
html.is-native .mbn-item.active svg   { stroke-width: 2.2; }

/* ── FAB ────────────────────────────────────────────────── */
html.is-native .mobile-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: calc(64px + var(--space-4));
  right: var(--space-4);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-on-accent);
  font-size: 1.6rem;
  font-weight: 300;
  border: none;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  z-index: calc(var(--z-modal) - 1);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

html.is-native .mobile-fab:active        { transform: scale(0.92); }
html.is-native .mobile-fab.hidden        { opacity: 0; pointer-events: none; }

/* ── TAKVİM ─────────────────────────────────────────────── */
html.is-native .calendar-toolbar {
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
  flex-wrap: nowrap;
  align-items: center;
}

html.is-native .toolbar-nav   { gap: var(--space-2); min-width: 0; flex: 1; align-items: center; }
html.is-native .toolbar-right { gap: var(--space-2); flex-shrink: 0; align-items: center; }

html.is-native .view-toggle-btn[data-cal="week"] { display: none; }
html.is-native #hideCancelledBtn { display: none; }
html.is-native #todayBtn         { display: none; }

html.is-native .view-title {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text-primary);
}

html.is-native .icon-btn {
  padding: 4px 8px;
  font-size: 1rem;
  min-width: 28px;
  text-align: center;
}

html.is-native .view-toggle {
  border-radius: var(--radius-sm);
}

html.is-native .view-toggle-btn {
  padding: 4px 12px;
  font-size: var(--text-xs);
  font-weight: 500;
}

/* day-view artık flex:1 ile büyüyor — sabit height calc gerekmiyor */

html.is-native .time-label { font-size: 0.6rem; }

html.is-native .appt-block {
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  font-size: var(--text-xs);
}

html.is-native .appt-block-name {
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.is-native .appt-block-service {
  font-size: 0.62rem;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── MÜŞTERİLER ─────────────────────────────────────────── */
html.is-native .view-header         { padding: var(--space-3); flex-wrap: wrap; gap: var(--space-2); }
html.is-native .view-header h2      { font-size: var(--text-lg); }
html.is-native .view-header > div   { gap: var(--space-2); flex-wrap: wrap; }
html.is-native #exportCsvBtn,
html.is-native #importCsvBtn        { font-size: var(--text-xs); padding: 4px 8px; }
html.is-native .customer-card-grid  { grid-template-columns: 1fr !important; gap: var(--space-2); }
html.is-native .search-bar          { padding: var(--space-2) var(--space-3); }
html.is-native .search-bar .form-input { font-size: var(--text-base); padding: var(--space-2) var(--space-3); }

/* ── ÖDEMELER ───────────────────────────────────────────── */
html.is-native .payment-summary { padding: var(--space-3); display: flex; gap: var(--space-3); flex-wrap: wrap; }
html.is-native .payment-list    { padding: 0; }

/* ── RAPORLAR ───────────────────────────────────────────── */
html.is-native .report-period-bar  { padding: var(--space-2) var(--space-3); gap: var(--space-2); overflow-x: auto; flex-wrap: nowrap; }
html.is-native .report-period-btn  { white-space: nowrap; font-size: var(--text-xs); padding: 4px 10px; }
html.is-native .report-date-input  { width: 130px; font-size: var(--text-xs); }
html.is-native .report-cards       { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); padding: var(--space-3); }
html.is-native .report-card        { padding: var(--space-2) var(--space-3); }
html.is-native .report-card-value  { font-size: var(--text-lg); }
html.is-native .report-card-label  { font-size: 0.6rem; }
html.is-native .report-grid        { grid-template-columns: 1fr; gap: var(--space-3); }
html.is-native .report-section     { padding: var(--space-3); }
html.is-native .report-table       { font-size: var(--text-xs); }
html.is-native .report-table th,
html.is-native .report-table td    { padding: var(--space-1) var(--space-2); }

/* ── AYARLAR ────────────────────────────────────────────── */
html.is-native .settings-nav       { padding: var(--space-2) var(--space-3); overflow-x: auto; flex-wrap: nowrap; gap: var(--space-2); scrollbar-width: none; }
html.is-native .settings-nav::-webkit-scrollbar { display: none; }
html.is-native .settings-nav-btn   { white-space: nowrap; font-size: var(--text-xs); padding: 4px 10px; }
html.is-native .settings-nav-btn[data-panel="spDevTools"] { display: none; }
html.is-native .settings-body      { padding: var(--space-3); }
html.is-native .settings-group     { margin-bottom: var(--space-4); }

/* ── MODALLER — BOTTOM SHEET ────────────────────────────── */
html.is-native .modal-overlay      { align-items: flex-end; }

html.is-native .modal,
html.is-native .modal-box {
  width: 100%;
  max-width: 100% !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-height: 90dvh;
  overflow-y: auto;
}

html.is-native .modal-header { padding: var(--space-4) var(--space-4) var(--space-3); }
html.is-native .modal-body   { padding: 0 var(--space-4) var(--space-4); }
html.is-native .modal-footer {
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-border);
  gap: var(--space-2);
}

html.is-native .pay-method-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
html.is-native .pay-method-btn  { padding: var(--space-3); font-size: var(--text-sm); }
html.is-native .form-row        { flex-direction: column; gap: var(--space-3); }

/* ── MY DAY VIEW — native kompakt ──────────────────────── */
html.is-native .my-day-header {
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
}
html.is-native #myDayTodayBtn {
  font-size: var(--text-xs);
  padding: 3px 8px;
  margin-left: 0;
}
html.is-native .my-day-list {
  padding: var(--space-2) var(--space-3) var(--space-4);
}

/* ── BOTTOM NAV — staff mode ────────────────────────────── */
/* .mbn-standard: normal items   .mbn-staff: staff-only items */
.mbn-staff { display: none !important; }
#mobileBottomNav.staff-mode .mbn-standard { display: none !important; }
#mobileBottomNav.staff-mode .mbn-staff    { display: flex !important; }

/* ── AI CHAT ────────────────────────────────────────────── */
html.is-native .ai-panel {
  bottom: calc(64px + var(--space-2));
  right: var(--space-3);
  left: var(--space-3);
  width: auto;
  max-height: 60dvh;
}