/*
============================================
rio-shape-lshape.module/module.css
CHILD MODULE STYLES - L-SHAPE
============================================
VERSION: 1.0.0
LAST MODIFIED: 2025-01-30
AUTHOR: 299 Lighting Development Team

CHANGELOG:
v1.0.0 (2025-01-30) - Initial stylesheet
                    - Two-column dimension layout
                    - Emergency section styling

============================================
CSS ARCHITECTURE
============================================

PARENT STYLES (Inherited):
- Base form styling
- Grid layouts
- 299 Lighting brand colors

CHILD MODULE STYLES (This file):
- L-shape specific layouts
- Two-arm dimension styling
- Corner module visual indicators

NAMING CONVENTION:
- Use module ID prefix: #lshape-module
- Scoped to this module only

============================================
*/

/* ============================================
   DIMENSION INPUT STYLING
   ============================================ */

#lshape-module .dimension-group {
  position: relative;
  padding-left: 3px;
  transition: border-left 0.3s ease;
}

#lshape-module .dimension-unit {
  position: absolute;
  right: 14px;
  top: 38px;
  font-size: 14px;
  color: #999999;
  pointer-events: none;
}

#lshape-module input[type="number"] {
  padding-right: 45px;
}

/* ============================================
   TWO-ARM LAYOUT ENHANCEMENTS
   ============================================ */

/* Optional: Add visual separator between width and height */
#lshape-module .config-grid > .dimension-group:first-child::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  width: 1px;
  background: #e5e5e5;
}
/* Corner module special styling in emergency list */
#emergencySectionList div:has(input[onchange*="Corner"]) {
  background: #fff5f0 !important;
  border-color: #ff9800 !important;
/* ============================================
   EMERGENCY CONFIGURATION STYLING
   ============================================ */

#emergencySectionList input[type="checkbox"] {
  accent-color: #00bfa5;
}

#emergencySectionList select:disabled {
  opacity: 0.6;
}

/* Corner module indicator in emergency list */
#emergencySectionList .corner-indicator {
  background: #fff3e0;
  border-left: 3px solid #ff9800;
}

/* ============================================
   RESPONSIVE OVERRIDES
   ============================================ */

@media (max-width: 768px) {
  #lshape-module .config-grid {
    grid-template-columns: 1fr !important;
  }
  
  #lshape-module .config-grid > .dimension-group:first-child::after {
    display: none;
  }
  
  #lshape-module .dimension-unit {
    right: 12px;
    font-size: 13px;
  }
}