/* =============================================
   LAMIM — BASE STYLES & RESET
   ============================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background-color: var(--color-bg-primary);
  color-scheme: dark;
}
[data-theme="light"] { color-scheme: light; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  transition: background-color var(--transition-base), color var(--transition-base);
  -webkit-user-select: none;
  user-select: none;
}

[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(14, 165, 233, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.03) 0%, transparent 60%);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-primary); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* Selection */
::selection {
  background: rgba(167, 139, 250, 0.3);
  color: var(--color-text-primary);
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Semantic elements */
a { color: var(--color-accent-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-accent-gold); }

button { cursor: pointer; border: none; background: none; font-family: inherit; touch-action: manipulation; }
a, [role="button"], .btn, .fin-filter-pill, .fin-tab-btn, .fin-sort-chip,
.gh-seg-btn, .career-tab, .analysis-tab, .pref-card, .curr-card,
.gender-card, .bio-preset-chip, .insight-p-card, .vault-show-more-card,
.dhikr-preset-card, .salah-option-btn {
  touch-action: manipulation;
}
input, select, textarea {
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background: transparent;
  /* Re-enable selection/cursor/callout for inputs */
  -webkit-user-select: auto;
  user-select: auto;
  -webkit-touch-callout: default;
}

img, svg { display: block; max-width: 100%; -webkit-user-select: none; user-select: none; pointer-events: none; }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6, .display-font {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--color-text-primary);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { color: var(--color-text-secondary); }

/* Utility classes */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

.hidden { display: none !important; }
.visible { display: block !important; }

/* Mobile: touch feedback on interactive elements (coarse pointer only) */
@media (pointer: coarse) {
  .btn:active, [role="button"]:active, .btn-xoss:active, .btn-secondary:active,
  .fin-filter-pill:active, .fin-tab-btn:active, .fin-sort-chip:active,
  .gh-seg-btn:active, .career-tab:active, .analysis-tab:active,
  .pref-card:active, .curr-card:active, .gender-card:active, .bio-preset-chip:active,
  .insight-p-card:active, .vault-show-more-card:active,
  .salah-option-btn:active {
    transform: scale(0.97);
    opacity: 0.85;
    transition: transform 0.1s ease, opacity 0.1s ease;
  }
}

/* Mobile: keyboard overlap — scroll padding for focused inputs in scrollable modals */
.gh-modal, .fin-history-panel, .fin-vault-panel {
  scroll-padding-bottom: 80px;
}

.text-gold { color: var(--color-accent-gold); }
.text-green { color: var(--color-accent-green); }
.text-red { color: var(--color-accent-red); }
.text-blue { color: var(--color-accent-primary); }
.text-amber { color: var(--color-accent-amber); }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-arabic { font-family: var(--font-arabic); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.w-full { width: 100%; }
.h-full { height: 100%; }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }

/* App Shell */
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Page wrapper */
.page {
  display: none;
  min-height: 100vh;
  flex-direction: column;
}
.page.active {
  display: flex;
}

/* Ultra-Crisp Theme Toggle — 150ms color transition without GPU font raster blur */
.theme-anim,
.theme-anim body,
.theme-anim .dashboard-layout,
.theme-anim .sidebar,
.theme-anim .topbar,
.theme-anim .bottom-nav,
.theme-anim .card,
.theme-anim .card-glass,
.theme-anim .section-panel,
.theme-anim .modal-content,
.theme-anim .bento-card,
.theme-anim .nav-item,
.theme-anim button,
.theme-anim input,
.theme-anim select {
  transition: background-color 0.15s ease-out,
              border-color 0.15s ease-out,
              color 0.15s ease-out !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Dashboard layout */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background-color: var(--color-bg-primary) !important;
}

.main-content {
  flex: 1;
  min-width: 0; /* CRITICAL: fixes flex item horizontal overflow */
  margin-left: var(--sidebar-width);
  padding: var(--space-6);
  padding-bottom: calc(var(--space-6) + var(--bottomnav-height) + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
  transition: margin-left var(--transition-base);
  overflow-x: clip;
  max-width: 100%;
}

@media (max-width: 1024px) {
  .main-content {
    margin-left: 0;
    padding: var(--space-4);
    padding-bottom: calc(var(--bottomnav-height) + var(--space-4) + env(safe-area-inset-bottom, 0px));
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .main-content {
    padding: var(--space-3);
    padding-bottom: calc(var(--bottomnav-height) + var(--space-3) + env(safe-area-inset-bottom, 0px));
  }
}

/* Hide scrollbar on mobile for native feel */
@media (max-width: 1024px) {
  ::-webkit-scrollbar { display: none; }
  * { scrollbar-width: none; }
}

/* Section panels */
.section-panel {
  display: none;
  animation: fadeInUp 0.35s ease;
  overflow-x: clip;
  max-width: 100%;
  box-sizing: border-box;
}
.section-panel.active {
  display: block;
}

/* Grid */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: var(--space-4); }

@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
}

/* Touch devices: prevent hover styles from sticking after tap */
@media (hover: none) {
  .btn:hover, .btn-xoss:hover, .btn-secondary:hover, .btn-detect:hover,
  .fin-filter-pill:hover, .fin-tab-btn:hover, .fin-sort-chip:hover, .fin-pill:hover,
  .gh-seg-btn:hover, .career-tab:hover, .analysis-tab:hover,
  .pref-card:hover, .curr-card:hover, .gender-card:hover, .bio-preset-chip:hover,
  .insight-p-card:hover, .mujahid-btn-relapse-sm:hover,
  .finance-nav-btn:hover, .section-tools-btn:hover, .mujahid-icon-option:hover,
  .iw-relapse-btn:hover, .hover-lift:hover, .hover-scale:hover,
  .vault-show-more-card:hover, .step-svg-icon-wrap:hover,
  .loc-detect-btn:hover {
    transform: none;
    box-shadow: none;
  }
}