/* ============================================
   DIZICLOCK MOBILE-FIRST RESPONSIVE SYSTEM
   Core Web Vitals optimized responsive design
   ============================================ */

/* ============================================
   MOBILE-FIRST BREAKPOINT SYSTEM
   ============================================ */

/* Base: Mobile First (default styles for mobile) */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .container-sm { max-width: 540px; }
  .col-sm { flex: 1 0 0%; }
  .col-sm-auto { flex: 0 0 auto; width: auto; }
  .col-sm-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-sm-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-sm-3 { flex: 0 0 auto; width: 25%; }
  .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-sm-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
  .col-sm-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-sm-9 { flex: 0 0 auto; width: 75%; }
  .col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container-md { max-width: 720px; }
  .col-md { flex: 1 0 0%; }
  .col-md-auto { flex: 0 0 auto; width: auto; }
  .col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .container-lg { max-width: 960px; }
  .col-lg { flex: 1 0 0%; }
  .col-lg-auto { flex: 0 0 auto; width: auto; }
  .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container-xl { max-width: 1140px; }
  .col-xl { flex: 1 0 0%; }
  .col-xl-auto { flex: 0 0 auto; width: auto; }
  .col-xl-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-xl-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-xl-3 { flex: 0 0 auto; width: 25%; }
  .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-xl-6 { flex: 0 0 auto; width: 50%; }
  .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-xl-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-xl-9 { flex: 0 0 auto; width: 75%; }
  .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .container-xxl { max-width: 1320px; }
}

/* ============================================
   MOBILE-FIRST UTILITY CLASSES
   ============================================ */

/* Display utilities */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

/* Responsive display */
@media (min-width: 576px) {
  .d-sm-none { display: none !important; }
  .d-sm-inline { display: inline !important; }
  .d-sm-inline-block { display: inline-block !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; }
  .d-sm-inline-flex { display: inline-flex !important; }
  .d-sm-grid { display: grid !important; }
}

@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-inline { display: inline !important; }
  .d-md-inline-block { display: inline-block !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-inline-flex { display: inline-flex !important; }
  .d-md-grid { display: grid !important; }
}

@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-inline-block { display: inline-block !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-inline-flex { display: inline-flex !important; }
  .d-lg-grid { display: grid !important; }
}

@media (min-width: 1200px) {
  .d-xl-none { display: none !important; }
  .d-xl-inline { display: inline !important; }
  .d-xl-inline-block { display: inline-block !important; }
  .d-xl-block { display: block !important; }
  .d-xl-flex { display: flex !important; }
  .d-xl-inline-flex { display: inline-flex !important; }
  .d-xl-grid { display: grid !important; }
}

/* Flexbox utilities */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

/* Mobile-first responsive flexbox */
@media (max-width: 575.98px) {
  .flex-xs-row { flex-direction: row !important; }
  .flex-xs-column { flex-direction: column !important; }
  .justify-content-xs-center { justify-content: center !important; }
  .align-items-xs-center { align-items: center !important; }
}

/* Spacing utilities - Mobile first */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

/* Responsive spacing */
@media (min-width: 576px) {
  .m-sm-0 { margin: 0 !important; }
  .m-sm-1 { margin: 0.25rem !important; }
  .m-sm-2 { margin: 0.5rem !important; }
  .m-sm-3 { margin: 1rem !important; }
  .m-sm-4 { margin: 1.5rem !important; }
  .m-sm-5 { margin: 3rem !important; }
  
  .p-sm-0 { padding: 0 !important; }
  .p-sm-1 { padding: 0.25rem !important; }
  .p-sm-2 { padding: 0.5rem !important; }
  .p-sm-3 { padding: 1rem !important; }
  .p-sm-4 { padding: 1.5rem !important; }
  .p-sm-5 { padding: 3rem !important; }
}

@media (min-width: 768px) {
  .m-md-0 { margin: 0 !important; }
  .m-md-1 { margin: 0.25rem !important; }
  .m-md-2 { margin: 0.5rem !important; }
  .m-md-3 { margin: 1rem !important; }
  .m-md-4 { margin: 1.5rem !important; }
  .m-md-5 { margin: 3rem !important; }
  
  .p-md-0 { padding: 0 !important; }
  .p-md-1 { padding: 0.25rem !important; }
  .p-md-2 { padding: 0.5rem !important; }
  .p-md-3 { padding: 1rem !important; }
  .p-md-4 { padding: 1.5rem !important; }
  .p-md-5 { padding: 3rem !important; }
}

/* Typography utilities - Mobile first */
.fs-xs { font-size: 0.75rem !important; }
.fs-sm { font-size: 0.875rem !important; }
.fs-base { font-size: 1rem !important; }
.fs-lg { font-size: 1.125rem !important; }
.fs-xl { font-size: 1.25rem !important; }
.fs-2xl { font-size: 1.5rem !important; }
.fs-3xl { font-size: 1.875rem !important; }
.fs-4xl { font-size: 2.25rem !important; }

/* Responsive typography */
@media (min-width: 576px) {
  .fs-sm-xs { font-size: 0.75rem !important; }
  .fs-sm-sm { font-size: 0.875rem !important; }
  .fs-sm-base { font-size: 1rem !important; }
  .fs-sm-lg { font-size: 1.125rem !important; }
  .fs-sm-xl { font-size: 1.25rem !important; }
  .fs-sm-2xl { font-size: 1.5rem !important; }
  .fs-sm-3xl { font-size: 1.875rem !important; }
  .fs-sm-4xl { font-size: 2.25rem !important; }
}

@media (min-width: 768px) {
  .fs-md-xs { font-size: 0.75rem !important; }
  .fs-md-sm { font-size: 0.875rem !important; }
  .fs-md-base { font-size: 1rem !important; }
  .fs-md-lg { font-size: 1.125rem !important; }
  .fs-md-xl { font-size: 1.25rem !important; }
  .fs-md-2xl { font-size: 1.5rem !important; }
  .fs-md-3xl { font-size: 1.875rem !important; }
  .fs-md-4xl { font-size: 2.25rem !important; }
}

/* ============================================
   CORE WEB VITALS OPTIMIZATIONS
   ============================================ */

/* Layout stability */
.layout-stable {
  contain: layout;
  content-visibility: auto;
}

/* Image optimizations */
img {
  max-width: 100%;
  height: auto;
  display: block;
  loading: lazy;
}

img[data-lazy] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img[data-lazy].loaded {
  opacity: 1;
}

/* Video optimizations */
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Font loading optimizations */
.font-loading {
  font-display: swap;
}

/* Critical CSS inlining */
.critical-css {
  font-display: swap;
  contain: layout style;
}

/* Reduce layout shifts */
.prevent-layout-shift {
  contain: layout style paint;
  will-change: transform;
}

/* Optimize animations */
.animate-optimized {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Container queries for better performance */
@container (min-width: 400px) {
  .container-query-responsive {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

@container (min-width: 600px) {
  .container-query-responsive {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ============================================
   MOBILE-SPECIFIC OPTIMIZATIONS
   ============================================ */

/* Touch optimizations */
.touch-optimized {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Mobile navigation */
.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  border-top: 1px solid var(--glass-border);
  z-index: var(--z-fixed);
  display: flex;
  justify-content: space-around;
  padding: 0.5rem 0;
}

/* Mobile hero adjustments */
.hero-mobile {
  min-height: calc(100vh - 80px);
  padding: 2rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-title-mobile {
  font-size: clamp(2rem, 8vw, 4rem);
  line-height: 1.2;
  margin-bottom: 1rem;
  font-weight: var(--font-bold);
  background: linear-gradient(135deg, var(--primary-500), var(--accent-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle-mobile {
  font-size: clamp(1rem, 4vw, 1.25rem);
  color: var(--text-secondary);
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* Mobile cards */
.card-mobile {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.card-mobile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Mobile buttons */
.btn-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px; /* iOS minimum touch target */
  font-size: 1rem;
}

.btn-mobile-primary {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-mobile-primary:active {
  transform: scale(0.98);
}

/* Mobile forms */
.form-mobile {
  margin-bottom: 1rem;
}

.form-input-mobile {
  width: 100%;
  padding: 0.875rem;
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  color: var(--text-primary);
  font-size: 1rem;
  min-height: 44px; /* iOS minimum touch target */
  -webkit-appearance: none;
}

.form-input-mobile:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Mobile typography */
.text-mobile-large {
  font-size: clamp(1.125rem, 4vw, 1.5rem);
  line-height: 1.4;
}

.text-mobile-small {
  font-size: clamp(0.875rem, 3vw, 1rem);
  line-height: 1.5;
}

/* Mobile spacing utilities */
.m-mobile-0 { margin: 0 !important; }
.m-mobile-1 { margin: 0.25rem !important; }
.m-mobile-2 { margin: 0.5rem !important; }
.m-mobile-3 { margin: 1rem !important; }
.m-mobile-4 { margin: 1.5rem !important; }

.p-mobile-0 { padding: 0 !important; }
.p-mobile-1 { padding: 0.25rem !important; }
.p-mobile-2 { padding: 0.5rem !important; }
.p-mobile-3 { padding: 1rem !important; }
.p-mobile-4 { padding: 1.5rem !important; }

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* Optimize for low-end devices */
@media (max-width: 768px) and (max-resolution: 2dppx) {
  .complex-animation {
    animation: none !important;
    transform: none !important;
  }
  
  .glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.9) !important;
  }
  
  [data-theme="dark"] .glass {
    background: rgba(0, 0, 0, 0.9) !important;
  }
}

/* Optimize for slow connections */
.slow-connection {
  img[data-non-essential] {
    display: none !important;
  }
  
  .complex-animation {
    animation: none !important;
  }
  
  .glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Memory management */
.memory-efficient {
  contain: layout style paint;
  content-visibility: auto;
}

/* CPU throttling optimizations */
.cpu-optimized {
  will-change: auto;
  transform: translateZ(0);
}

/* ============================================
   ACCESSIBILITY ON MOBILE
   ============================================ */

/* Touch target sizes */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Voice control optimizations */
.voice-control-optimized [role="button"],
.voice-control-optimized button,
.voice-control-optimized a {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Screen reader optimizations for mobile */
.mobile-screen-reader-friendly {
  speak: normal;
  pointer-events: auto;
}

/* ============================================
   PRINT STYLES FOR MOBILE
   ============================================ */

@media print {
  .no-print-mobile {
    display: none !important;
  }
  
  .mobile-nav,
  .theme-toggle,
  .accessibility-menu {
    display: none !important;
  }
  
  .card-mobile {
    background: white !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
}

/* ============================================
   UTILITY CLASSES FOR MOBILE PERFORMANCE
   ============================================ */

/* Content visibility */
.content-visible {
  content-visibility: visible;
}

.content-hidden {
  content-visibility: hidden;
}

.content-auto {
  content-visibility: auto;
}

/* Containment */
.contain-none { contain: none; }
.contain-strict { contain: strict; }
.contain-content { contain: content; }
.contain-size { contain: size; }
.contain-layout { contain: layout; }
.contain-paint { contain: paint; }

/* Will change */
.will-change-auto { will-change: auto; }
.will-change-scroll { will-change: scroll-position; }
.will-change-contents { will-change: contents; }
.will-change-transform { will-change: transform; }
.will-change-opacity { will-change: opacity; }

/* Backface visibility */
.backface-visible { backface-visibility: visible; }
.backface-hidden { backface-visibility: hidden; }

/* Perspective */
.perspective-none { perspective: none; }
.perspective-1000 { perspective: 1000px; }

/* Transform style */
.transform-flat { transform-style: flat; }
.transform-3d { transform-style: preserve-3d; }

/* Transform origin */
.origin-center { transform-origin: center; }
.origin-top { transform-origin: top; }
.origin-bottom { transform-origin: bottom; }
.origin-left { transform-origin: left; }
.origin-right { transform-origin: right; }

/* ============================================
   CUSTOM PROPERTIES FOR DYNAMIC VALUES
   ============================================ */

:root {
  --vh: 1vh; /* Will be updated by JavaScript for mobile */
  --vw: 1vw;
  --safe-area-top: env(safe-area-inset-top);
  --safe-area-bottom: env(safe-area-inset-bottom);
  --safe-area-left: env(safe-area-inset-left);
  --safe-area-right: env(safe-area-inset-right);
}

/* iPhone X and later notch handling */
@supports (padding-top: env(safe-area-inset-top)) {
  .ios-safe-padding {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}