/* =========================================================================
   IKIGAI GLOBAL STYLESHEET
   Supports Desktop, Tablet, and Mobile layouts
   ========================================================================= */

/* GOOGLE FONTS IMPORT
   Outfit: 300 (Light), 400 (Regular), 500 (Medium), 600 (Semi-Bold), 700 (Bold) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   Centralized location for font families and baseline text colors */
:root {
  /* Primary font stack with fallback system fonts */
  --font-family-base: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Slate-800 equivalent for body prose readability */
  --color-text-base: #1e293b; 
  
  /* Slate-900 equivalent for high contrast headings */
  --color-text-heading: #0f172a; 
}

/* BASE BODY STYLING
   Applies primary font and text color across all viewport sizes */
body {
  font-family: var(--font-family-base) !important;
  color: var(--color-text-base);
  background-color: #f8f9fa;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* HEADINGS TYPOGRAPHY
   Standardizes heading font color using CSS design tokens */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-heading);
}

/* RESPONSIVE SCROLLBAR & INTERACTION TWEAKS
   Disables native vertical overscroll bounce shadows on pull-to-refresh */
html, body {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* FORM INPUTS & DATE CONTROLS STANDARDIZATION
   Ensures uniform height, box-sizing, and unclipped focus borders across all devices including iOS Safari / iPhone */
.app-form-input,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="password"],
select {
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  line-height: normal !important;
  max-width: 100% !important;
}

/* iOS Safari & WebKit Date and Datetime Input Normalization */
input[type="date"],
input[type="datetime-local"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: #ffffff !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  color: #1e293b !important;
  padding: 8px 12px !important;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left !important;
  min-height: 1.5em !important;
  line-height: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0.6 !important;
  cursor: pointer !important;
  padding: 4px !important;
  margin-right: -4px !important;
}

/* PREVENT UNWANTED HORIZONTAL SCROLL IN ALL MODAL FORMS & DRAWERS */
.form-modal-container,
[id^="modal-"],
#ikigai-habit-modal {
  overflow-x: hidden !important;
}

[id^="modal-"] > div,
#ikigai-habit-modal > div {
  overflow-x: hidden !important;
}

/* Ensure focus rings and left/right borders are never cut off by tight containers */
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: #0284c7 !important; /* brand-600 */
  box-shadow: 0 0 0 1.5px #0284c7 !important;
}

/* Top bar mobile styling overrides */
header,
header::before,
header::after,
#top-bar,
#top-bar::before,
#top-bar::after,
.top-bar,
.top-bar::before,
.top-bar::after,
.mobile-top-bar,
.mobile-top-bar::before,
.mobile-top-bar::after,
#pull-refresh-indicator,
#pull-refresh-indicator::before,
#pull-refresh-indicator::after {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}