:root {
  --afghs-header-h: 56px;
  --afghs-tabs-h: 62px;
  --afghs-brand: #667eea;
  --afghs-brand-dark: #5a6fd6;
}

#afghs-web-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: #8b7cc8;
  display: flex;
  align-items: stretch;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.45s ease;
  pointer-events: auto;
  touch-action: none;
}

#afghs-web-splash img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

html.afghs-splash-done #afghs-web-splash {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.capacitor-app,
html.capacitor-app body {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  pointer-events: auto !important;
}

html.capacitor-app #login-page,
html.capacitor-app #login-page .login-container,
html.capacitor-app #login-page input,
html.capacitor-app #login-page button,
html.capacitor-app #login-page a,
html.capacitor-app #login-page select,
html.capacitor-app #login-page textarea {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-user-select: text !important;
  user-select: text !important;
}

html.capacitor-app body {
  background: #f4f6fb;
  min-height: 100dvh;
}

/* Native top bar */
html.capacitor-app #afghs-app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10050;
  height: calc(var(--afghs-header-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(8px, env(safe-area-inset-left, 0px));
  padding-right: max(8px, env(safe-area-inset-right, 0px));
  display: none;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--afghs-brand), #764ba2);
  color: #fff;
  box-shadow: 0 2px 16px rgba(102, 126, 234, 0.35);
}

html.capacitor-app .afghs-brand {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

html.capacitor-app .afghs-brand img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

html.capacitor-app .afghs-brand strong {
  display: block;
  font-size: 15px;
  line-height: 1.1;
}

html.capacitor-app .afghs-brand span {
  display: block;
  font-size: 11px;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.capacitor-app .afghs-icon-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 0;
}

html.capacitor-app .afghs-burger {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

html.capacitor-app .afghs-notify {
  font-size: 18px;
}

html.capacitor-app .afghs-theme-select {
  max-width: 88px;
  font-size: 11px;
  padding: 6px 4px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* Native bottom tabs */
html.capacitor-app #afghs-app-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10050;
  height: calc(var(--afghs-tabs-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: none;
  background: #fff;
  border-top: 1px solid #e8ebf3;
  box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.08);
}

html.capacitor-app .afghs-tab {
  flex: 1;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #6b7280;
  font-size: 10px;
  font-weight: 700;
  padding: 6px 0;
}

html.capacitor-app .afghs-tab .ico {
  font-size: 20px;
  line-height: 1;
}

html.capacitor-app .afghs-tab.active {
  color: var(--afghs-brand);
}

/* App layout — hide browser-like website chrome */
html.capacitor-app body.afghs-app-active #mobile-menu-btn {
  display: none !important;
}

html.capacitor-app body.afghs-app-active .top-bar,
html.capacitor-app body.afghs-app-active #top-bar {
  display: none !important;
}

html.capacitor-app body.afghs-app-active .main-wrapper {
  margin-left: 0 !important;
  padding-top: calc(var(--afghs-header-h) + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: calc(var(--afghs-tabs-h) + env(safe-area-inset-bottom, 0px) + 12px) !important;
  min-height: 100dvh;
  box-sizing: border-box;
}

html.capacitor-app body.afghs-app-active .main-content,
html.capacitor-app body.afghs-app-active .content-area {
  padding-top: 8px !important;
}

html.capacitor-app body.afghs-app-active .sidebar {
  top: calc(var(--afghs-header-h) + env(safe-area-inset-top, 0px)) !important;
  height: calc(100dvh - var(--afghs-header-h) - var(--afghs-tabs-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: 8px !important;
  border-radius: 16px 0 0 16px;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
}

html.capacitor-app body.afghs-app-active .sidebar-overlay {
  top: calc(var(--afghs-header-h) + env(safe-area-inset-top, 0px)) !important;
}

/* Login stays full-screen immersive (no app bars) */
html.capacitor-app body.showing-login #login-page {
  min-height: 100dvh !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

html.capacitor-app,
html.capacitor-app body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* Sub-pages opened from portal (staff, girls, etc.) */
html.capacitor-app body.capacitor-native {
  scrollbar-width: none;
}

html.capacitor-app body.capacitor-native::-webkit-scrollbar {
  width: 0;
  height: 0;
}