/*
 * 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);
  }
}