:root {
  --primary-blue: #003366;
  --secondary-blue: #0055aa;
  --gradient-bg: linear-gradient(135deg, #003366 0%, #0055aa 100%);
  --text-dark: #333;
  --text-light: #666;
  --success-color: #166534;
  --error-color: #dc2626;
  --border-color: #e0e0e0;
  --border-radius: 6px;
  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

* {
  box-sizing: border-box;
}

html, body {
  min-height: 100%;
  height: auto;
}

body {
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
  color: var(--text-dark);
  min-height: 100vh;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ============================================
   FIXED HEADER - Works on ALL pages
   ============================================ */

.app-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-bottom: 3px solid #0f3460;
}

/* ============================================
   PAGE-SPECIFIC HEADER PADDING FIXES
   ============================================ */

/* Default: app-container handles padding */
.app-container {
    padding-top: 70px;
}

/* Chat page - needs its own padding since it may not use app-container */
.chat-container,
.chat-main {
    padding-top: 70px;
    min-height: 100vh;
}

/* All main content areas need padding if NOT inside app-container */
.journal-main,
.dashboard-main,
.tracker-main,
.settings-main,
.support-main,
main {
    padding-top: 70px;
}

/* If page uses app-container, the inner elements don't need extra padding */
.app-container .journal-main,
.app-container .dashboard-main,
.app-container .tracker-main,
.app-container .settings-main,
.app-container .support-main,
.app-container .chat-main,
.app-container .chat-container,
.app-container main {
    padding-top: 0;
}