/* ===== GLOBAL RESPONSIVE FIXES ===== */

/* Safe area support for notched devices */
html {
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
}

/* Mobile header safe area */
@supports (padding-top: env(safe-area-inset-top)) {
  header.lg\:hidden {
    padding-top: max(12px, env(safe-area-inset-top));
    background-color: #12151c !important;
  }
}

/* Mobile menu button - VISIBLE */
.mobile-menu-btn {
  background: var(--bg-surface, #1a1e27) !important;
  border: 1px solid var(--border-color, #2a2f3d) !important;
  color: white !important;
}

.mobile-menu-btn i,
.mobile-menu-btn svg {
  color: white !important;
  stroke: white !important;
}

.mobile-menu-btn:hover {
  background: var(--bg-elevated, #22262f) !important;
}

/* Mobile close button */
#mobileMenuClose {
  background: var(--bg-surface, #1a1e27);
  border: 1px solid var(--border-color, #2a2f3d);
  color: white;
}

#mobileMenuClose i,
#mobileMenuClose svg {
  color: white !important;
  stroke: white !important;
}

/* Prevent horizontal overflow */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* All elements should respect container */
* {
  max-width: 100%;
}

/* Fix images and media */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* Fix inputs and textareas */
input, textarea, select, button {
  max-width: 100%;
  box-sizing: border-box;
}

/* Fix pre/code blocks */
pre, code {
  max-width: 100%;
  overflow-x: auto;
  word-break: break-word;
}

/* ===== LAYOUT RESPONSIVE - FORCE TAILWIND BEHAVIOR ===== */

/* Mobile: hide desktop sidebar, show mobile header */
@media (max-width: 1023px) {
  /* Hide desktop sidebar */
  .min-h-screen.lg\:grid {
    display: block !important;
    grid-template-columns: none !important;
  }

  .min-h-screen.lg\:grid > aside.hidden.lg\:flex {
    display: none !important;
  }

  /* Show mobile header */
  header.lg\:hidden {
    display: flex !important;
  }

  /* Hide desktop header */
  header.hidden.lg\:flex {
    display: none !important;
  }
}

/* Desktop: show desktop sidebar, hide mobile header */
@media (min-width: 1024px) {
  /* Show desktop sidebar */
  .min-h-screen.lg\:grid {
    display: grid !important;
    grid-template-columns: 260px 1fr !important;
  }

  .min-h-screen.lg\:grid > aside.hidden.lg\:flex {
    display: flex !important;
  }

  /* Hide mobile header */
  header.lg\:hidden {
    display: none !important;
  }

  /* Show desktop header */
  header.hidden.lg\:flex {
    display: flex !important;
  }

  /* Hide mobile sidebar and overlay */
  #mobileSidebar {
    display: none !important;
  }

  #mobileMenuOverlay {
    display: none !important;
  }
}

/* ===== GATES RESPONSIVE NAVIGATION ===== */

/* Mobile Navigation Item */
.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--border-radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: all var(--transition-normal);
}

.mobile-nav-item:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}

.mobile-nav-item.active {
  background: linear-gradient(135deg, rgba(229, 57, 53, 0.15), rgba(229, 57, 53, 0.05));
  color: var(--text-primary);
  border-left: 3px solid var(--primary-color);
}

.mobile-nav-item i {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.mobile-nav-item.active i,
.mobile-nav-item:hover i {
  opacity: 1;
}

/* Mobile Gate Navigation (horizontal scroll) */
.gate-nav-mobile {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
}

.gate-nav-mobile::-webkit-scrollbar {
  display: none;
}

.gate-tab-mobile {
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--border-radius-full);
  border: 1px solid var(--border-color);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  transition: all var(--transition-normal);
  text-decoration: none;
  flex-shrink: 0;
}

.gate-tab-mobile.active,
.gate-tab-mobile:hover {
  color: var(--text-primary);
  background: rgba(229, 57, 53, 0.18);
  border-color: rgba(229, 57, 53, 0.45);
  box-shadow: 0 0 12px var(--primary-glow);
}

/* ===== ENHANCED MOBILE STYLES ===== */

@media (max-width: 640px) {
  /* Smaller padding on mobile */
  .glass-card {
    padding: var(--spacing-md);
  }

  /* Form fieldset mobile */
  .form-fieldset {
    padding: var(--spacing-md);
  }

  .form-fieldset legend {
    font-size: var(--font-size-xs);
    padding: 0 var(--spacing-sm);
  }

  /* Gate log mobile */
  .gate-log-list {
    min-height: 60px;
    padding: var(--spacing-md);
    font-size: var(--font-size-xs);
  }

  /* Result cards mobile */
  .vimass-log-row {
    font-size: var(--font-size-xs);
  }

  .vimass-pan {
    font-size: var(--font-size-xs);
  }

  /* Buttons mobile */
  .btn-primary,
  .btn-secondary {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
  }

  /* Toast mobile */
  .toast {
    max-width: calc(100vw - 2rem);
    font-size: var(--font-size-xs);
  }

  /* Gate progress */
  .gate-progress {
    height: 8px;
  }

  /* Locked overlay mobile */
  .locked-overlay {
    padding: var(--spacing-lg);
  }

  .locked-card {
    padding: var(--spacing-lg);
    margin: 0;
  }

  .locked-icon {
    width: 60px;
    height: 60px;
    margin-bottom: var(--spacing-lg);
  }

  .locked-icon i {
    width: 32px;
    height: 32px;
  }

  .locked-card h3 {
    font-size: var(--font-size-xl);
  }

  .locked-card p {
    font-size: var(--font-size-sm);
  }
}

/* Extra small screens */
@media (max-width: 380px) {
  .gate-nav-mobile {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .gate-tab-mobile {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 10px;
  }

  .glass-card {
    padding: var(--spacing-sm);
  }

  .form-fieldset {
    padding: var(--spacing-sm);
  }
}

/* Improve touch targets on mobile */
@media (pointer: coarse) {
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .gate-tab,
  .gate-tab-mobile,
  .mobile-nav-item {
    min-height: 44px;
  }

  input,
  textarea,
  select {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
}

/* Gate nav improvements */
.gate-nav {
  flex-wrap: wrap;
}

/* Ensure inputs don't overflow */
input,
textarea,
select {
  max-width: 100%;
}

/* Better scrolling on result lists */
.gate-log-list {
  -webkit-overflow-scrolling: touch;
}

/* Live approved item mobile */
@media (max-width: 640px) {
  .live-approved-item {
    padding: 6px;
    font-size: 10px;
    gap: 6px;
  }

  .live-approved-item i {
    width: 12px;
    height: 12px;
  }
}

/* ===== MOBILE MENU IMPROVEMENTS ===== */

/* Touch manipulation for better mobile response */
.touch-manipulation {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Ensure menu button is always clickable */
#mobileMenuBtn,
#mobileMenuClose {
  position: relative;
  z-index: 51;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* Prevent icon from capturing clicks */
#mobileMenuBtn i,
#mobileMenuClose i {
  pointer-events: none;
}

/* Mobile sidebar animation */
#mobileSidebar {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Overlay should capture all clicks */
#mobileMenuOverlay {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Mobile nav items */
.mobile-nav-item {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* ===== RESPONSIVE IMPROVEMENTS FOR ALL PAGES ===== */

/* Main content area */
#mainPanel {
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1023px) {
  #mainPanel {
    padding: 16px;
  }
}

@media (max-width: 640px) {
  #mainPanel {
    padding: 12px;
  }
}

.content-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Section containers */
section {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Page Header - Responsive */
.page-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .page-header-icon {
    width: 40px;
    height: 40px;
  }

  .page-header-title {
    font-size: 18px;
  }

  .page-header-subtitle {
    font-size: 12px;
  }
}

/* Glass Card - Responsive */
.glass-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

@media (max-width: 640px) {
  .glass-card {
    padding: 12px;
    border-radius: 12px;
  }
}

/* WebMass - Grid Layout Responsive */
@media (max-width: 1024px) {
  .max-w-6xl {
    max-width: 100%;
    padding: 0;
  }

  /* Force single column on tablet */
  [class*="lg:grid-cols"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  /* Force all grids to single column on mobile */
  [class*="md:grid-cols"],
  [class*="lg:grid-cols"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  /* Form fields stack on mobile */
  .grid {
    gap: 12px;
  }

  /* Keep stats grid 2 columns */
  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Stat cards smaller on mobile */
  .stat-card {
    padding: 10px;
  }

  .stat-card-value {
    font-size: 18px;
  }

  .stat-card-label {
    font-size: 9px;
  }

  .stat-card-hint {
    font-size: 9px;
    display: none; /* Hide hints on very small screens */
  }

  .stat-card-icon {
    width: 28px;
    height: 28px;
  }

  .stat-card-icon i {
    width: 14px;
    height: 14px;
  }

  /* Control group buttons stack */
  .control-group-buttons {
    flex-direction: column;
    gap: 8px;
  }

  .btn-control {
    width: 100%;
    justify-content: center;
  }

  /* Control group */
  .control-group {
    padding: 12px;
  }

  /* Mode info banner */
  .mode-info-banner {
    padding: 10px;
  }

  .mode-info-title {
    font-size: 12px;
  }

  .mode-info-desc {
    font-size: 10px;
  }

  /* Step chips - wrap on mobile */
  .webmass-step-chips {
    flex-wrap: wrap;
    gap: 4px;
  }

  .webmass-step-chip {
    font-size: 9px;
    padding: 3px 6px;
  }

  /* Gate progress wrapper */
  .gate-progress-wrapper {
    gap: 4px;
  }

  .gate-progress-header {
    font-size: 10px;
  }

  .gate-progress-percent {
    font-size: 11px;
  }

  .gate-progress-eta {
    font-size: 9px;
  }

  /* Form fieldset */
  .form-fieldset {
    padding: 10px;
  }

  .form-fieldset legend {
    font-size: 11px;
    padding: 0 6px;
  }

  /* Textareas */
  textarea {
    font-size: 12px;
    padding: 8px;
    min-height: 80px;
  }

  /* Inputs */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"] {
    font-size: 14px;
    padding: 10px;
  }

  /* Buttons */
  .btn-primary,
  .btn-secondary {
    padding: 10px 14px;
    font-size: 12px;
  }

  /* Labels */
  label {
    font-size: 11px;
  }

  /* Space between sections */
  .space-y-6 > * + * {
    margin-top: 16px;
  }

  .space-y-4 > * + * {
    margin-top: 12px;
  }
}

/* Workers Page - Responsive */
.workers-dashboard {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 1024px) {
  .workers-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .workers-controls {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .workers-controls button {
    flex: 1;
    min-width: 100px;
  }

  .workers-main-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .workers-dashboard {
    padding: 0;
  }

  .workers-header {
    gap: 10px;
  }

  .workers-title h1 {
    font-size: 18px;
  }

  .workers-title p {
    font-size: 11px;
  }

  .workers-icon {
    width: 40px;
    height: 40px;
  }

  .workers-controls {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .workers-controls button {
    flex: 1 1 45%;
    min-width: 0;
    padding: 8px 10px;
    font-size: 11px;
  }

  .workers-controls .btn-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
  }

  /* Workers table responsive */
  .workers-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
  }

  .workers-table {
    min-width: 500px;
  }

  /* Pipeline section */
  .pipeline-section,
  .jobs-panel {
    padding: 12px;
  }

  .pipeline-container {
    height: 200px;
  }

  /* Section headers */
  .section-header h3 {
    font-size: 12px;
  }
}

/* Dashboard - Stats Grid Responsive */
.stats-grid {
  display: grid;
  gap: 16px;
}

@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
}

@media (max-width: 380px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Workers - KPI Grid Responsive */
.kpi-grid {
  display: grid;
  gap: 12px;
}

@media (max-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
}

@media (max-width: 640px) {
  .kpi-chip {
    padding: 8px 10px;
  }

  .kpi-icon {
    width: 28px;
    height: 28px;
  }

  .kpi-icon i {
    width: 14px;
    height: 14px;
  }

  .kpi-value {
    font-size: 14px;
  }

  .kpi-label {
    font-size: 9px;
  }
}

@media (max-width: 380px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .kpi-chip {
    padding: 6px 8px;
  }

  .kpi-icon {
    width: 24px;
    height: 24px;
  }

  .kpi-value {
    font-size: 12px;
  }
}

/* Form Fieldsets - Responsive */
@media (max-width: 640px) {
  .form-fieldset {
    padding: 12px;
  }

  .form-fieldset legend {
    font-size: 12px;
    padding: 0 8px;
  }

  /* Textareas smaller on mobile */
  textarea {
    font-size: 13px;
    padding: 8px;
  }

  /* Inputs */
  input[type="text"],
  input[type="number"] {
    font-size: 14px;
    padding: 10px;
  }
}

/* Glass Cards - Responsive Padding */
@media (max-width: 640px) {
  .glass-card {
    padding: 16px;
  }
}

@media (max-width: 380px) {
  .glass-card {
    padding: 12px;
  }
}

/* Buttons - Responsive */
@media (max-width: 640px) {
  .btn-primary,
  .btn-secondary {
    padding: 10px 16px;
    font-size: 13px;
  }

  .btn-primary .w-5,
  .btn-secondary .w-5 {
    width: 18px;
    height: 18px;
  }

  /* Button text hide on very small screens */
  @media (max-width: 360px) {
    .btn-content span:not(:first-child) {
      display: none;
    }
  }
}

/* Toast - Mobile Positioning */
#toastContainer {
  z-index: 9999;
}

@media (max-width: 640px) {
  #toastContainer {
    top: 70px; /* Below mobile header */
    right: 8px;
    left: 8px;
    max-width: calc(100vw - 16px);
  }

  .toast {
    max-width: 100%;
    font-size: 11px;
    padding: 10px;
  }
}

/* Gate Log Lists - Responsive */
.gate-log-list {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 640px) {
  .gate-log {
    padding: 10px;
  }

  .gate-log-header h4 {
    font-size: 12px;
  }

  .gate-log-list {
    max-height: 250px;
    padding: 8px;
    font-size: 11px;
  }

  .webmass-log-row,
  .vimass-log-row {
    font-size: 11px;
    gap: 6px;
    flex-wrap: wrap;
  }

  .webmass-pan,
  .vimass-pan {
    font-size: 11px;
  }

  .webmass-pill,
  .vimass-pill {
    font-size: 9px;
    padding: 2px 6px;
  }

  .webmass-json-pre,
  .vimass-json-pre {
    font-size: 10px;
    max-height: 150px;
    padding: 8px;
  }
}

/* Empty States - Responsive */
@media (max-width: 640px) {
  .empty-state {
    padding: 24px 16px;
  }

  .empty-message {
    font-size: 13px;
  }

  .empty-hint {
    font-size: 11px;
  }
}

/* Main Content Padding - Responsive */
@media (max-width: 768px) {
  #mainPanel {
    padding: 12px;
  }
}

@media (max-width: 640px) {
  #mainPanel {
    padding: 10px;
  }

  section {
    padding: 0;
  }

  section.space-y-6 > * + *,
  section.space-y-8 > * + * {
    margin-top: 12px;
  }
}

@media (max-width: 380px) {
  #mainPanel {
    padding: 8px;
  }
}

/* Control Group - Responsive */
@media (max-width: 640px) {
  .control-group {
    padding: 12px;
  }

  .control-group-label {
    font-size: 12px;
  }

  .control-group-description {
    font-size: 11px;
  }
}

/* Form Field Hint - Responsive */
@media (max-width: 640px) {
  .form-field-hint {
    font-size: 11px;
  }
}

/* WebMass Amount Buttons - Responsive */
@media (max-width: 640px) {
  .webmass-amount-btn {
    font-size: 11px;
    padding: 6px 12px;
  }
}

/* ================================
   Authentication Styles
   ================================ */