/*
 * ==========================================================================
 * QForm - App Stylesheet
 * ==========================================================================
 * 
 * Main entry point for all CSS.
 * Organized into logical sections:
 *   1. CSS Variables (Light/Dark themes)
 *   2. Base Reset & Typography
 *   3. Print Styles
 * 
 * Load order in index.html:
 *   1. app.css (this file - variables & base)
 *   2. components.css (UI component overrides)
 *   3. layout.css (layout, header, pages)
 * ==========================================================================
 */

/* ==========================================================================
   1. CSS VARIABLES
   ========================================================================== */

:root {
  /* Layout Dimensions */
  --header-height: 64px;
  --layout-max-width: 1440px;
  --layout-padding: clamp(1rem, 4vw, 2.5rem);
  --content-max-width: 1280px;

  /* Border Radius */
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 16px;
  --blur-strength: 16px;

  /* Light Theme - Primary Colors */
  --primary: #4b7bec;
  --primary-dark: #2f3a85;
  --accent: #6c5ce7;
  --success: #2ecc71;
  --danger: #ff6b6b;
  --brand-red: #9d1f15;

  /* Light Theme - Surfaces & Backgrounds */
  --surface: rgba(255, 255, 255, 0.92);
  --surface-elevated: #ffffff;
  --background: linear-gradient(135deg, #f0f4ff 0%, #e6ebff 100%);
  --glass: rgba(255, 255, 255, 0.85);

  /* Light Theme - Text */
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-tertiary: #4b5563;
  --heading-color: #1c2340;

  /* Light Theme - Borders & Shadows */
  --border-color: rgba(17, 24, 39, 0.08);
  --shadow: 0 10px 40px -10px rgba(29, 48, 125, 0.12);
  --shadow-soft: 0 16px 40px -20px rgba(29, 48, 125, 0.45);

  /* Questionnaire-specific */
  --qf-text-color: #1f2937;
  --qf-muted-color: #4b5563;
  --qf-border-color: #e5e7eb;
  --qf-surface: #ffffff;
}

/* Dark Theme Overrides */
body.rz-appearance-dark {
  --primary: #5b8cff;
  --primary-dark: #3d5afe;

  --surface: rgba(22, 28, 45, 0.95);
  --surface-elevated: rgba(32, 38, 55, 0.98);
  --background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
  --glass: rgba(18, 24, 40, 0.85);

  --text-primary: #e6ebff;
  --text-secondary: #c4cbd9;
  --text-tertiary: #8892a6;
  --heading-color: #e6ebff;

  --border-color: rgba(120, 144, 255, 0.2);
  --shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);

  /* Questionnaire dark overrides */
  --qf-text-color: #e5e7eb;
  --qf-muted-color: #9ca3af;
  --qf-border-color: #374151;
  --qf-surface: #111827;
}

/* ==========================================================================
   2. BASE RESET & TYPOGRAPHY
   ========================================================================== */

/* Persian font (loaded on demand via html[dir="rtl"]) */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Apply Persian type + RTL defaults when document direction is rtl */
html[dir="rtl"] body,
body[dir="rtl"] {
  font-family: 'Vazirmatn', 'Inter', 'Segoe UI', 'Roboto', sans-serif;
  letter-spacing: 0;
}

html[dir="rtl"] {
  direction: rtl;
}

/* RTL Global Tweaks */
html[dir="rtl"] .rz-inputtext,
html[dir="rtl"] input,
html[dir="rtl"] textarea {
  text-align: right;
}

html[dir="rtl"] .rz-field > label,
html[dir="rtl"] label {
  text-align: right;
}

html[dir="rtl"] .rz-dropdown,
html[dir="rtl"] .rz-multiselect,
html[dir="rtl"] .rz-numeric {
  direction: rtl;
}

/* Profile page RTL niceties */
html[dir="rtl"] .rz-form-field > label,
html[dir="rtl"] .rz-field > label {
  margin-right: 0;
  margin-left: auto;
}

html[dir="rtl"] .rz-fieldset .rz-fieldset-legend {
  text-align: right;
}

body {
  background: var(--background);
  color: var(--text-primary);
  transition: background 0.3s ease, color 0.3s ease;
}

body.rz-appearance-dark {
  background: radial-gradient(circle at top, #1a2238 0%, #0d111f 65%, #05070d 100%);
}

/* Links */
a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.25s ease;
}

a:hover,
a:focus {
  text-decoration: underline;
  color: var(--accent);
}

/* Images */
img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Selection */
::selection {
  background: rgba(75, 126, 236, 0.2);
  color: inherit;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6 {
  color: var(--heading-color);
}

/* ==========================================================================
   3. PRINT STYLES
   ========================================================================== */

@media print {
  body {
    background: white !important;
    color: black !important;
    margin: 0;
    padding: 20px;
  }

  .app-header,
  .rz-sidebar,
  .rz-header,
  .rz-footer,
  nav,
  button,
  .no-print,
  [role="navigation"] {
    display: none !important;
  }

  .rz-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    page-break-inside: avoid;
    margin-bottom: 1rem;
  }

  .rz-chart,
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  .rz-text,
  p,
  div {
    color: black !important;
  }

  .rz-progressbar-value {
    background: #333 !important;
  }

  .rz-badge {
    border: 1px solid #333 !important;
  }

  .page-break-before {
    page-break-before: always;
  }

  .page-break-after {
    page-break-after: always;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }

  p {
    orphans: 3;
    widows: 3;
  }

  @page {
    margin: 2cm;
  }
}

/* Mobile base adjustments */
@media (max-width: 768px) {
  :root {
    --border-radius-lg: 14px;
    --border-radius-md: 12px;
  }

  body {
    background: linear-gradient(180deg, #eef2ff 0%, #ffffff 100%);
  }

  body.rz-appearance-dark {
    background: radial-gradient(circle at top, #1a2238 0%, #0d111f 100%);
  }
}