/* Theme overrides and CSS variables for Webxuz */
:root{
  --color-primary: #0056b2;
  --color-primary-600: #004494;
  --bg-light: #f5f7f8;
  --bg-dark: #0f1923;
  --text-default: #0f1724;
  --muted: #6b7280;
  --card-bg: #ffffff;
  --radius-md: 0.5rem;
  --glass: rgba(255,255,255,0.65);
}

.dark{
  --card-bg: #0f1723;
  --text-default: #e6eef8;
}

/* Global element tweaks to harmonize Tailwind + custom styles */
html,body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  background-color: var(--bg-light);
  color: var(--text-default);
}

/* Buttons */
.btn-primary{
  background-color: var(--color-primary);
  color: #fff;
  border-radius: calc(var(--radius-md));
  padding: 0.5rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: background-color .15s ease, transform .08s ease;
}
.btn-primary:hover{ background-color: var(--color-primary-600); }

/* Cards */
.card{
  background: var(--card-bg);
  border-radius: .75rem;
  box-shadow: 0 6px 20px rgba(12,16,20,0.06);
  border: 1px solid rgba(2,6,23,0.04);
}

/* Small utilities */
.text-muted{ color: var(--muted); }
.rounded-lg{ border-radius: .75rem; }

/* Header tweaks: backdrop blur for sticky header */
.header-blur {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dark .header-blur {
  background-color: rgba(15, 23, 42, 0.95);
}

/* Make sure image thumbnails keep good contrast */
.avatar-placeholder{
  background: linear-gradient(135deg, rgba(0,86,178,0.12), rgba(0,86,178,0.06));
  color: var(--color-primary);
}

/* Hide default focus outline but keep accessible focus ring */
:focus{ outline: none; }
:focus-visible{ box-shadow: 0 0 0 4px rgba(0,86,178,0.12); border-radius: .375rem; }

/* PWA safe area for notched devices */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* PWA mode: hide browser chrome elements */
.pwa-mode .pwa-hide { display: none; }

/* Prevent pull-to-refresh in PWA */
.pwa-mode body {
  overscroll-behavior-y: contain;
}

/* Splash screen theme */
@media (display-mode: standalone) {
  body { background-color: var(--bg-light); }
  .dark body { background-color: var(--bg-dark); }
}

/* Loading screen: hide state (JS toggles this) */
#app-loading.hide {
  opacity: 0 !important;
  pointer-events: none !important;
}