/*
 * TGR Quality Assurance Bridge Inspection Application
 * 
 * MODULE: layout_shift_fix.css
 * DESCRIPTION:
 *   Surgical performance optimizations to address Cumulative Layout Shift (CLS).
 *   Contains styling overrides to stabilize element rendering, restrict layout
 *   reflow propagation, and eliminate transitions on sizing/layout properties.
 *   Strictly isolated to elements within #app-workspace or .tab-panel.
 */

/* 1. Layout Containment */
#app-workspace {
  contain: layout;
}

.tab-panel {
  contain: layout;
}

/* 2. Space Reservation for Input Fields */
#app-workspace .form-group {
  min-height: 85px;
}

#app-workspace .form-group.full-width {
  min-height: 120px;
}

/* 3. Selective Transitions on Input Controls (Disable 'transition: all' to prevent CLS) */
#app-workspace .form-group input,
#app-workspace .form-group select,
#app-workspace .form-group textarea,
.tab-panel input,
.tab-panel select,
.tab-panel textarea {
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* 4. Selective Transitions on Buttons (Disable layout shifting transitions) */
#app-workspace .btn,
.tab-panel .btn,
#app-workspace .tab-btn,
.tab-panel .tab-btn {
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}

/* 5. Smooth Micro-Animation for Validation Box (Containment & Shift Reduction) */
.tab-panel .validation-error-box {
  animation: tabErrorFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  contain: content;
}

@keyframes tabErrorFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 6. iOS Input Zoom & Jitter Prevention Overrides */
/* Bloqueo de transiciones en contenedores para evitar jitter */
@supports selector(:has(input)) {
  #app-workspace:has(input:focus),
  .matrix-table:has(input:focus),
  .matrix-table:has(select:focus) {
    transition: none !important;
  }
}

/* Fallback for older browsers (direct disable on focused controls) */
input:focus, select:focus, textarea:focus {
  transition: none !important;
  will-change: auto;
}

/* Estabilización de Font-Size y Viewport */
@media screen and (max-width: 1024px) {
  input, select, textarea {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
    appearance: none;
    -webkit-appearance: none;
  }
}

/* Prevención de Reflow por Scroll */
body, html {
  overscroll-behavior: none;
}

input, select, textarea {
  scroll-margin-top: 150px; /* Ajuste para evitar que el teclado oculte el campo */
}

/* 8. Table Geometry & Border Stabilization */
.matrix-table {
  table-layout: fixed !important; /* Fuerza a que la tabla no cambie su ancho según el contenido */
  width: 100% !important;
}

/* Eliminate focus state geometry changes that trigger layout reflow */
.matrix-table input:focus, 
.matrix-table select:focus {
  border: 1px solid var(--primary) !important; /* Asegurar que sea el mismo grosor que el estado normal */
  box-shadow: none !important;                 /* Eliminar la sombra que mueve elementos */
  margin: 0 !important;                        /* Prevenir que el margen cambie */
  padding: 0.3rem 0.5rem !important;           /* Prevenir que el padding cambie */
}