/**
/**
 * SaaDhaGaa Dynamic UI Styles
 * 
 * This CSS file provides the visual styles that work with the Dynamic UI Controller.
 * It includes responsive styles, device-specific adjustments, and orientation handling.
 * 
 * @version 1.0.0
 * @author SaaDhaGaa Team
 */

/* ===== GLOBAL PWA SCROLLBAR HIDING ===== */
html, body {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
  overflow-x: hidden !important; /* Prevent horizontal scroll */
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari, Opera */
  width: 0 !important;
  height: 0 !important;
}

/* Hide scrollbars on all elements */
*::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

* {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
}

/* Ensure overflow is properly managed */
.no-scroll {
  overflow: hidden !important;
}

.pwa-no-scrollbar {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  overflow-x: hidden !important;
}

.pwa-no-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* PWA viewport specific rules */
@media screen and (display-mode: standalone) {
  html, body {
    overflow: hidden !important;
    position: fixed !important;
    width: 100vw !important;
    height: 100vh !important;
  }
  
  body {
    touch-action: manipulation !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
  }
}

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  /* Dynamic variables (set by JavaScript) */
  --dynamic-viewport-width: 100vw;
  --dynamic-viewport-height: 100vh;
  --dynamic-base-font-size: 16px;
  --dynamic-scale-factor: 1;
  --dynamic-spacing-unit: 1rem;
  --dynamic-border-radius: 0.5rem;
  --dynamic-aspect-ratio: 1;
  --dynamic-device-type: "desktop";
  --dynamic-orientation: "landscape";
  
  /* Static design tokens */
  --color-primary: #e5b80b;
  --color-primary-dark: #d4a80a;
  --color-background: #111827;
  --color-background-secondary: #1f2937;
  --color-text: #f9fafb;
  --color-text-secondary: #9ca3af;
  --color-error: #ef4444;
  --color-success: #10b981;
  
  /* Animation durations */
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
}

/* ===== BASE RESPONSIVE STYLES ===== */

/* Apply dynamic base font size */
html {
  font-size: var(--dynamic-base-font-size, 16px);
}

/* Smooth transitions for all dynamic changes */
* {
  transition: font-size var(--duration-normal) ease,
              padding var(--duration-normal) ease,
              margin var(--duration-normal) ease,
              border-radius var(--duration-normal) ease;
}

/* ===== DEVICE-SPECIFIC STYLES ===== */

/* Mobile Device Styles */
.device-mobile {
  --container-max-width: 100%;
  --container-padding: calc(var(--dynamic-spacing-unit) * 1.5);
  --button-padding: calc(var(--dynamic-spacing-unit) * 0.75) calc(var(--dynamic-spacing-unit) * 1.5);
  --input-padding: calc(var(--dynamic-spacing-unit) * 0.75);
  --form-gap: calc(var(--dynamic-spacing-unit) * 1);
}

.device-mobile .container {
  max-width: var(--container-max-width);
  padding: var(--container-padding);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.device-mobile .button {
  padding: var(--button-padding);
  /* font-size: calc(var(--dynamic-base-font-size) * 0.9); */
  /* DISABLED: Use responsive CSS font-size */
  font-size: 0.9rem;
}

.device-mobile input {
  padding: var(--input-padding);
  /* font-size: calc(var(--dynamic-base-font-size) * 0.9); */
  /* DISABLED: Use responsive CSS font-size */
  font-size: 0.9rem;
}

.device-mobile .form-group {
  margin-bottom: var(--form-gap);
}

/* Specific mobile width adjustments */
.device-320 {
  --container-padding: calc(var(--dynamic-spacing-unit) * 1);
  --button-padding: calc(var(--dynamic-spacing-unit) * 0.6) calc(var(--dynamic-spacing-unit) * 1.2);
}

.device-320 h1 {
  /* font-size: calc(var(--dynamic-base-font-size) * 1.8); */
  /* DISABLED: Use responsive CSS font-size */
  font-size: 1.8rem;
}

.device-360 h1 {
  /* font-size: calc(var(--dynamic-base-font-size) * 1.9); */
  /* DISABLED: Use responsive CSS font-size */
  font-size: 1.9rem;
}

.device-375 h1 {
  /* font-size: calc(var(--dynamic-base-font-size) * 2); */
  /* DISABLED: Use responsive CSS font-size */
  font-size: 2rem;
}

.device-414 h1 {
  /* font-size: calc(var(--dynamic-base-font-size) * 2.1); */
  /* DISABLED: Use responsive CSS font-size */
  font-size: 2.1rem;
}

/* Tablet Device Styles */
.device-tablet {
  --container-max-width: 90%;
  --container-padding: calc(var(--dynamic-spacing-unit) * 2);
  --button-padding: calc(var(--dynamic-spacing-unit) * 0.85) calc(var(--dynamic-spacing-unit) * 1.7);
  --input-padding: calc(var(--dynamic-spacing-unit) * 0.85);
  --form-gap: calc(var(--dynamic-spacing-unit) * 1.25);
}

.device-tablet .container {
  max-width: var(--container-max-width);
  padding: var(--container-padding);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.device-tablet .button {
  padding: var(--button-padding);
  /* font-size: calc(var(--dynamic-base-font-size) * 1.05); */
  /* DISABLED: Use responsive CSS font-size */
  font-size: 1.05rem;
}

.device-tablet input {
  padding: var(--input-padding);
  /* font-size: calc(var(--dynamic-base-font-size) * 1.05); */
  /* DISABLED: Use responsive CSS font-size */
  font-size: 1.05rem;
}

.device-tablet .form-group {
  margin-bottom: var(--form-gap);
}

/* Desktop Device Styles */
.device-desktop {
  --container-max-width: 800px;
  --container-padding: calc(var(--dynamic-spacing-unit) * 2.5);
  --button-padding: calc(var(--dynamic-spacing-unit) * 1) calc(var(--dynamic-spacing-unit) * 2);
  --input-padding: calc(var(--dynamic-spacing-unit) * 1);
  --form-gap: calc(var(--dynamic-spacing-unit) * 1.5);
}

.device-desktop .container {
  max-width: var(--container-max-width);
  padding: var(--container-padding);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.device-desktop .button {
  padding: var(--button-padding);
  /* font-size: calc(var(--dynamic-base-font-size) * 1.1); */
  /* DISABLED: Use responsive CSS font-size */
  font-size: 1.1rem;
}

.device-desktop input {
  padding: var(--input-padding);
  /* font-size: calc(var(--dynamic-base-font-size) * 1.1); */
  /* DISABLED: Use responsive CSS font-size */
  font-size: 1.1rem;
}

.device-desktop .form-group {
  margin-bottom: var(--form-gap);
}

/* Large Desktop Device Styles */
.device-large-desktop {
  --container-max-width: 1200px;
  --container-padding: calc(var(--dynamic-spacing-unit) * 3);
  --button-padding: calc(var(--dynamic-spacing-unit) * 1.2) calc(var(--dynamic-spacing-unit) * 2.5);
  --input-padding: calc(var(--dynamic-spacing-unit) * 1.2);
  --form-gap: calc(var(--dynamic-spacing-unit) * 2);
}

.device-large-desktop .container {
  max-width: var(--container-max-width);
  padding: var(--container-padding);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.device-large-desktop .button {
  padding: var(--button-padding);
  /* font-size: calc(var(--dynamic-base-font-size) * 1.2); */
  /* DISABLED: Use responsive CSS font-size */
  font-size: 1.2rem;
}

.device-large-desktop input {
  padding: var(--input-padding);
  /* font-size: calc(var(--dynamic-base-font-size) * 1.2); */
  /* DISABLED: Use responsive CSS font-size */
  font-size: 1.2rem;
}

.device-large-desktop .form-group {
  margin-bottom: var(--form-gap);
}

/* ===== ORIENTATION-SPECIFIC STYLES ===== */

/* Portrait Orientation (Preferred for Mobile/Tablet) */
.orientation-portrait.device-mobile,
.orientation-portrait.device-tablet {
  /* Optimize for portrait viewing */
}

.orientation-portrait.device-mobile .login-form,
.orientation-portrait.device-tablet .login-form {
  width: 100%;
  max-width: 400px;
}

/* Landscape Orientation */
.orientation-landscape.device-mobile,
.orientation-landscape.device-tablet {
  /* Compact layout for landscape on mobile/tablet */
}

.orientation-landscape.device-mobile .container,
.orientation-landscape.device-tablet .container {
  padding: calc(var(--dynamic-spacing-unit) * 0.75);
}

.orientation-landscape.device-mobile h1,
.orientation-landscape.device-tablet h1 {
  /* font-size: calc(var(--dynamic-base-font-size) * 1.5); */
  /* DISABLED: Use responsive CSS font-size */
  font-size: 1.5rem;
  margin-bottom: calc(var(--dynamic-spacing-unit) * 0.5);
}

.orientation-landscape.device-mobile .login-form,
.orientation-landscape.device-tablet .login-form {
  padding: calc(var(--dynamic-spacing-unit) * 1);
  max-width: 90%;
}

.orientation-landscape.device-mobile .form-group,
.orientation-landscape.device-tablet .form-group {
  margin-bottom: calc(var(--dynamic-spacing-unit) * 0.75);
}

/* Desktop devices work well in both orientations */
.orientation-landscape.device-desktop,
.orientation-portrait.device-desktop,
.orientation-landscape.device-large-desktop,
.orientation-portrait.device-large-desktop {
  /* Desktop styles remain consistent */
}

/* ===== ADMIN PANEL SPECIFIC STYLES ===== */

/* Admin Desktop-Only Mode */
.admin-desktop-only {
  min-width: 1024px;
  min-height: 768px;
}

.admin-desktop-only body {
  overflow-x: auto;
  overflow-y: auto;
}

/* Ensure admin interface scales properly on very large screens */
.device-large-desktop.admin-desktop-only {
  --admin-max-width: 1600px;
}

.device-large-desktop.admin-desktop-only .main-content,
.device-large-desktop.admin-desktop-only #app {
  max-width: var(--admin-max-width);
  margin: 0 auto;
}

/* ===== DYNAMIC SCALING ADJUSTMENTS ===== */

/* Apply scaling to common elements - DISABLED */
.dynamic-scale {
  /* transform: scale(var(--dynamic-scale-factor)); */
  /* DISABLED: No scaling applied */
  transform-origin: center;
}

/* Proportional spacing - DISABLED */
.dynamic-spacing {
  /* padding: calc(var(--dynamic-spacing-unit) * var(--dynamic-scale-factor)); */
  /* margin: calc(var(--dynamic-spacing-unit) * var(--dynamic-scale-factor) * 0.5); */
  /* DISABLED: Use static spacing */
  padding: var(--dynamic-spacing-unit);
  margin: calc(var(--dynamic-spacing-unit) * 0.5);
}

/* Proportional border radius - DISABLED */
.dynamic-border {
  /* border-radius: calc(var(--dynamic-border-radius) * var(--dynamic-scale-factor)); */
  /* DISABLED: Use static border radius */
  border-radius: var(--dynamic-border-radius);
}

/* ===== RESPONSIVE GRID SYSTEM ===== */

.dynamic-grid {
  display: grid;
  /* gap: calc(var(--dynamic-spacing-unit) * var(--dynamic-scale-factor)); */
  /* DISABLED: Use static gap */
  gap: var(--dynamic-spacing-unit);
}

/* Mobile: Single column */
.device-mobile .dynamic-grid {
  grid-template-columns: 1fr;
}

/* Tablet: Two columns */
.device-tablet .dynamic-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Desktop: Multiple columns based on content */
.device-desktop .dynamic-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.device-large-desktop .dynamic-grid {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

/* Ensure touch targets are large enough on mobile */
.device-mobile .button,
.device-mobile input[type="button"],
.device-mobile input[type="submit"],
.device-mobile .clickable {
  min-height: 44px;
  min-width: 44px;
}

.device-tablet .button,
.device-tablet input[type="button"],
.device-tablet input[type="submit"],
.device-tablet .clickable {
  min-height: 48px;
  min-width: 48px;
}

/* Improve focus indicators on all devices */
.device-mobile input:focus,
.device-tablet input:focus,
.device-desktop input:focus,
.device-large-desktop input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ===== ANIMATION AND TRANSITIONS ===== */

/* Smooth device type transitions */
body {
  transition: all var(--duration-normal) ease;
}

/* Smooth orientation change transitions */
.container,
.login-form,
.button,
input {
  transition: all var(--duration-normal) ease;
}

/* ===== UTILITY CLASSES ===== */

/* Hide elements on specific device types */
.hide-on-mobile {
  display: block;
}

.device-mobile .hide-on-mobile {
  display: none;
}

.hide-on-tablet {
  display: block;
}

.device-tablet .hide-on-tablet {
  display: none;
}

.hide-on-desktop {
  display: block;
}

.device-desktop .hide-on-desktop,
.device-large-desktop .hide-on-desktop {
  display: none;
}

/* Show elements only on specific device types */
.show-on-mobile {
  display: none;
}

.device-mobile .show-on-mobile {
  display: block;
}

.show-on-tablet {
  display: none;
}

.device-tablet .show-on-tablet {
  display: block;
}

.show-on-desktop {
  display: none;
}

.device-desktop .show-on-desktop,
.device-large-desktop .show-on-desktop {
  display: block;
}

/* Orientation-specific visibility */
.hide-portrait {
  display: block;
}

.orientation-portrait .hide-portrait {
  display: none;
}

.hide-landscape {
  display: block;
}

.orientation-landscape .hide-landscape {
  display: none;
}

.show-portrait {
  display: none;
}

.orientation-portrait .show-portrait {
  display: block;
}

.show-landscape {
  display: none;
}

.orientation-landscape .show-landscape {
  display: block;
}

/* ===== PRINT STYLES ===== */
@media print {
  /* Reset all dynamic adjustments for printing */
  :root {
    --dynamic-scale-factor: 1;
    --dynamic-base-font-size: 12pt;
    --dynamic-spacing-unit: 1rem;
  }
  
  .hide-on-print {
    display: none !important;
  }
  
  /* Ensure admin access restrictions don't apply to print */
  #admin-access-denied-overlay {
    display: none !important;
  }
  
  #orientation-prompt {
    display: none !important;
  }
}

/* ===== HIGH CONTRAST MODE SUPPORT ===== */
@media (prefers-contrast: high) {
  :root {
    --color-primary: #ffcc00;
    --color-background: #000000;
    --color-background-secondary: #1a1a1a;
    --color-text: #ffffff;
  }
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
  
  .orientation-icon {
    animation: none !important;
  }
}

/* ===== DEBUGGING STYLES (Remove in production) ===== */
.debug-device-info {
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px;
  border-radius: 5px;
  font-family: monospace;
  font-size: 12px;
  z-index: 10000;
  pointer-events: none;
}

.debug-device-info::after {
  content: "Device: " var(--dynamic-device-type) " | "
           "Orientation: " var(--dynamic-orientation) " | "
           "Scale: " var(--dynamic-scale-factor) " | "
           "Size: " var(--dynamic-viewport-width) " × " var(--dynamic-viewport-height);
}

/* Hide debug info in production */
body:not(.debug-mode) .debug-device-info {
  display: none;
}

/* ==============================================
   PWA FULLSCREEN ENHANCEMENTS (Minimal & Safe)
   ============================================== */

/* Enhanced PWA fullscreen support - maintains existing functionality */
@media (display-mode: fullscreen) {
  body {
    /* Handle notch areas on modern devices */
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  /* Optimize main containers for fullscreen */
  .container, .main-content {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for modern browsers */
  }
}

/* iOS PWA improvements */
@supports (-webkit-touch-callout: none) {
  .pwa-container {
    /* Prevent bounce scroll on iOS PWA */
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Enhanced viewport coverage for PWA */
.fullscreen-ready {
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
}

/* PWA Performance Optimizations */
.pwa-optimized {
  /* Improve scroll performance */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  
  /* Reduce repaints */
  will-change: transform;
  transform: translateZ(0);
  
  /* Improve text rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* PWA Gesture Optimizations */
.pwa-touch-optimized {
  /* Prevent accidental selection */
  -webkit-user-select: none;
  user-select: none;
  
  /* Remove tap highlighting */
  -webkit-tap-highlight-color: transparent;
  
  /* Improve touch responsiveness */
  touch-action: manipulation;
}

/* ==============================================
   LOGIN BOX & INPUT FIELD FIXES
   ============================================== */

/* Fix login form width on mobile devices - ENHANCED */
.device-mobile .login-form {
  max-width: 300px !important; /* Further reduced for better fit */
  width: 92% !important; /* Tighter width control */
  margin: 0 auto !important;
  padding: 1.5rem !important;
}

.device-320 .login-form {
  max-width: 280px !important; /* Even smaller for 320px devices */
  width: 90% !important;
}

.device-360 .login-form {
  max-width: 300px !important;
  width: 92% !important;
}

/* Fix 4-digit PIN input field width - ENHANCED */
#pin {
  max-width: 130px !important; /* Tighter width for exactly 4 digits */
  width: 130px !important;
  min-width: 130px !important;
  margin: 0 auto !important;
  display: block !important;
  text-align: center !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.25rem !important;
  padding: 0.7rem 0.3rem !important;
  box-sizing: border-box !important;
}

/* Mobile-specific PIN input adjustments - ENHANCED */
.device-mobile #pin {
  max-width: 110px !important;
  width: 110px !important;
  min-width: 110px !important;
  font-size: 1rem !important;
  padding: 0.6rem 0.2rem !important;
  letter-spacing: 0.2rem !important;
}

.device-320 #pin {
  max-width: 110px !important;
  width: 110px !important;
  font-size: 1rem !important;
}

/* Center the PIN input within its form group */
.form-group:has(#pin) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-group:has(#pin) label {
  margin-bottom: 0.5rem;
  text-align: center;
}

/* Landscape orientation adjustments */
.orientation-landscape.device-mobile .login-form {
  max-width: 280px !important;
  width: 85% !important;
}

.orientation-landscape.device-mobile #pin {
  max-width: 110px !important;
  width: 110px !important;
}

/* Override generic input width for PIN specifically */
.login-form #pin {
  width: 130px !important; /* Override the generic input width: 100% */
  max-width: 130px !important;
  min-width: 130px !important;
}

.device-mobile .login-form #pin {
  width: 110px !important;
  max-width: 110px !important;
  min-width: 110px !important;
}

/* Ensure PIN input container doesn't stretch */
.login-form .form-group:has(#pin) {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}