/* ==========================================================================
   Cut List Component Styles
   ========================================================================== */

/* Base Container */
.cut-list_container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: var(--gap);
    margin-right: calc(var(--gap) * -1);
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.cut-list_container::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* Panel Container */
#panels-container {
    width: 100%;
    overflow: visible;
    padding-bottom: 10px;
}

/* Panel Row Base Styles */
.panel-row {
    /* Positioning */
    position: relative;
    
    /* Display & Box Model */
    display: grid;
    grid-template-columns: 15px auto 54px 24px 54px 36px 18px;
    gap: 6px;
    width: 100%;
    height: 27px;
    padding: 6px 0;
  
    /* Interaction */
    cursor: default;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  
    /* Animation */
    transform: translate3d(0, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
}


.panel-row.dragging {
    /* Positioning */
    position: fixed;
    width: calc(100% - var(--gap)); /* Account for container's right padding */
    
    /* Visual */
    background: var(--color-background-darker);
    border-radius: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0.95;
    
    /* Interaction */
    cursor: grabbing;
    pointer-events: none;
    touch-action: none;
    
    /* Animation */
    transition: none;
    will-change: transform;
}

/* Panel shift states */
.panel-row.shift-up {
    transform: translateY(-20px);
}

.panel-row.shift-down {
    transform: translateY(20px);
}

/* Highlight the drop target row */
.panel-row.drop-target {
    background: var(--color-background-darker);
    transition: background-color 0.2s ease;
}

/* Panel Row Labels */
.panel-row--labels {
    /* Display & Box Model */
    display: grid;
    gap: 6px;
    width: 100%;
    padding: var(--space-21) 0px 6px 0px;
    grid-template-columns: 10px auto 54px 24px 54px 36px 18px;
    
    /* Visual */
    background-color: transparent;
    
    /* Alignment */
    align-items: flex-end;
}

/* Label Placeholder */
.panel-row--labels::before {
    content: '';
    grid-column: 1;
    width: 24px;
    height: 24px;
}

.panel-row--labels .center-label {
    text-align: center;
}

/* Panel Row Input Groups */
.panel-row .input-group {
    /* Positioning */
    position: relative;
    
    /* Display & Box Model */
    display: flex;
    flex-direction: column;
    min-width: 18px;
    margin: 0;
}

.panel-row .input-group input {
    /* Display & Box Model */
    width: 100%;
    min-width: 18px;
    height: 36px;
    padding: 6px 9px;
    box-sizing: border-box;
    
    /* Visual */
    background-color: var(--color-background-darker);
    color: var(--color-foreground);
    text-align: center;
    
    /* Animation */
    transition: none;
}

.panel-row .input-group input:focus {
    outline: none;
}

/* Special Input Alignments */
.panel-row .input-group:nth-child(2) input {
    text-align: left;
    padding-left: 9px;
}

/* Group Panel Styles */
.group-panels-container {
    margin-top: var(--space-21);
}

.group-panels-container .panel-row--labels {
    padding: 6px 0px 6px 0px;
    position: relative;
}

.group-panels-container .panel-row--labels .button-delete,
.group-panels-container .panel-row--labels .swap-button {
    /* Positioning */
    position: absolute;
    top: -24px;
    right: 0;
    
    /* Display & Box Model */
    height: 24px;
    
    /* Visual */
    opacity: 0.5;
}

.group-panels-container .panel-row--labels .button-delete:hover,
.group-panels-container .panel-row--labels .swap-button:hover {
    opacity: 1;
}

/* Group Visibility Toggle (Eye Icon) */
.group-visibility-toggle {
    /* Reset button styles */
    border: none;
    background: none;
    padding: 0px;
    margin: 0 0px 0 0px;
    cursor: pointer;
    
    /* Size and alignment */
    width: 18px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Mobile touch support */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    
    /* Visual */
    color: var(--color-foreground);
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

/* Mobile touch target enhancement */
@media (hover: none) and (pointer: coarse) {
    .group-visibility-toggle {
        /* Larger touch target on mobile */
        min-width: 32px;
        min-height: 32px;
        padding: 4px;
        
        /* Ensure button is centered within larger touch area */
        position: relative;
    }
    
    .group-visibility-toggle .eye-icon {
        /* Keep icon size consistent on mobile */
        width: 16px;
        height: 16px;
    }
}

.group-visibility-toggle:hover {
    opacity: 1;
}

.group-visibility-toggle .eye-icon {
    width: 16px;
    height: 16px;
    color: inherit;
}

/* Open eye state (default) */
.group-visibility-toggle .eye-outline-top {
    stroke: var(--color-foreground);
    fill: none;
}

.group-visibility-toggle .eye-outline-bottom {
    stroke: var(--color-foreground);
    fill: none;
    opacity: 0.72;
}

.group-visibility-toggle .eye-pupil {
    stroke: var(--color-foreground);
    fill: none;
}

/* Closed eye state */
.group-visibility-toggle.closed .eye-outline-top {
    stroke: var(--color-foreground-darker);
    fill: var(--color-background);
    opacity: 0.5;
    transform: translateY(2px);
}

.group-visibility-toggle.closed .eye-outline-bottom {
    stroke: var(--color-foreground);
    fill: var(--color-background);
    opacity: 0.5;
    transform: translateY(-2px);
}

.group-visibility-toggle.closed .eye-pupil {
    display: none;
}

.group-visibility-toggle.closed {
    color: var(--color-foreground-darker);
    opacity: 1;
}

.group-visibility-toggle.closed:hover {
    opacity: 1;
}

/* Hidden groups styling */
.group-panels-container.group-hidden {
    opacity: 0.8;
}

/* Light mode specific: Additional opacity reduction for hidden groups */
[data-theme="LIGHT-MODE"] .group-panels-container.group-hidden {
    opacity: 0.5;
}

.group-panels-container.group-hidden .group-panels {
    pointer-events: none;
}

/* Keep the eye toggle clickable when group is hidden */
.group-panels-container.group-hidden .group-visibility-toggle {
    pointer-events: auto;
    opacity: 1;
}

.group-panels-container.group-hidden .group-panels .panel-row {
    background-color: var(--color-background-darker);
    opacity: 0.8;
}

.group-panels-container.group-hidden .panel-row input {
    background-color: var(--color-background-darker);
    color: var(--color-foreground-darker);
}



/* Add Panel and Add Group buttons in subheader */
.subheader #add-panel {
  /* Reset */
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  
  /* Typography */
  color: var(--color-foreground);
  font-size: 0.72rem;
  font-family: var(--font-family-01);
  font-weight: normal;
  letter-spacing: 0.03rem;
  text-transform: uppercase;
  line-height: 1;
  
  /* Visual */
  opacity: 0.8;
  cursor: pointer;
  transition: none;
  
  /* Alignment */
  display: inline-flex;
  align-items: center;
  height: auto;
  width: auto;
}

.subheader #add-panel:hover {
  color: var(--color-foreground-brighter);
  opacity: 1;
}

.subheader #add-panel::after {
  content: '+';
  margin-left: 9px;
  font-size: 1rem;
  line-height: 1;
  vertical-align: baseline;
}

.subheader #add-group {
  /* Reset input-group styles for subheader context */
  margin: 0;
  padding: 0;
  
  /* Alignment */
  display: inline-flex;
  align-items: center;
  height: auto;
  width: auto;
}

.subheader #add-group .select-wrapper {
  width: auto;
  min-width: 100px;
  height: auto;
  display: inline-flex;
  align-items: center;
}

.subheader #group-type {
  /* Reset select styles for subheader context */
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  height: auto;
  
  /* Typography to match add-panel */
  color: var(--color-foreground);
  font-size: 0.72rem;
  font-family: var(--font-family-01);
  font-weight: normal;
  letter-spacing: 0.03rem;
  text-transform: uppercase;
  line-height: 1;
  
  /* Visual */
  opacity: 0.8;
  cursor: pointer;
  transition: none;
  
  /* Remove default select styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.subheader #group-type:hover {
  color: var(--color-foreground-brighter);
  opacity: 1;
}

.subheader #add-group-arrow {
  /* Position arrow for subheader context */
  position: relative;
  right: 0;
  top: -1px;
  transform: none;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  color: var(--color-foreground);
  opacity: 0.9;
}

.subheader #add-group:hover #add-group-arrow {
  color: var(--color-foreground-brighter);
  opacity: 1;
}

/* Legacy styles for buttons outside subheader (if any remain) */
#add-panel:not(.subheader #add-panel),
#add-group:not(.subheader #add-group) {
  border: none;
  padding: 0px 0;
  color: var(--color-foreground);
  transition: none;
  text-align: left;
  width: auto;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.03rem;
  opacity: 0.9;
}

#add-panel:not(.subheader #add-panel):hover,
#add-group:not(.subheader #add-group):hover {
  color: var(--color-foreground-brighter);
}

#add-panel:not(.subheader #add-panel)::after {
  content: '+';
  margin-left: 6px;
  font-size: 1rem;
  vertical-align: -1px;
}

#group-type:not(.subheader #group-type) {
  border: none;
  background-color: transparent;
  font-size: 0.7rem;
  letter-spacing: 0.03rem;
  padding: 0 15px 0 0px;
  opacity: 1;
}

#add-group-arrow.select-arrow:not(.subheader #add-group-arrow) {
  right: 0;
  width: 17px;
  height: 17px;
  top: calc(50% + -1px);
}

/* Button styles for: drag / swap / delete / buttons */
.panel-drag-handle,
.swap-arrow,
.button-delete,
.swap-button {
    /* Reset */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    
    /* Display & Box Model */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 24px; /* Reduced from 36px to match panel row content */
    
    /* Visual */

    cursor: pointer;
    
    /* Animation */
    transition: none;
}

/* Panel Row Grid Cell Alignment */
.panel-row > *:not(.input-group) {
    /* Center buttons within their grid cells */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover states */
.panel-drag-handle:hover,
.swap-arrow:hover,
.button-delete:hover,
.swap-button:hover {
    color: var(--color-foreground);
}

/* Panel drag and drop styles */
.cut-list_container {
    position: relative; /* Ensure container is positioned for absolute children */
}

.panel-row {
    position: relative;
    transition: transform 0.1s ease-out;
    will-change: transform;
}

.panel-row.drag-ready {
    cursor: grabbing;
}

.panel-row.dragging {
    pointer-events: none;
    cursor: grabbing;
    user-select: none;
    background: var(--color-background);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.panel-drag-placeholder {
    background: transparent;
    pointer-events: none;
}

.panel-row.gap-above {
    margin-top: 48px;
}

.panel-row.gap-below {
    margin-bottom: 48px;
}

/* Drag handle styles */
.panel-drag-handle {
    cursor: grab;
    touch-action: none;
}

.panel-drag-handle:active {
    cursor: grabbing;
} 


/* Action Bar */
.action-bar {
    width: auto;
    padding: var(--space-12) var(--space-18) var(--space-12) var(--space-18);
    background-color: var(--color-background);
    border: 1px solid var(--color-background-brighter);
    position: relative;
    bottom: 0;
    z-index: 2;
    margin-bottom: var(--gap);
}

  
.action-bar-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: var(--space-18);
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

/* Tablet Styles (540px and up) */
@media screen and (min-width: 540px) {
    .panel-row--labels {
        grid-template-columns: 0px auto 75px 42px 75px 51px 24px;
    }

    .panel-row {
        grid-template-columns: 24px auto 75px 42px 75px 51px 24px;
    }
}

/* Desktop Styles (900px and up) */
@media screen and (min-width: 900px) {
    .panel-row--labels {
        grid-template-columns: 9px auto 54px 18px 54px 36px 18px;
    }

    .panel-row--labels .center-label {
        text-align: center;
    }

    .panel-row {
        grid-template-columns: 9px auto 54px 18px 54px 36px 18px;
    }

    .action-bar {
        /* Positioning */
        position: sticky;
        bottom: 9px;
        z-index: 2;
        
        /* Display & Box Model */
        margin-top: auto;
        height: 30px;
        
        /* Visual */
        background: var(--color-background);
    }

    input[type="number"],
    input[type="text"],
    select,
    .panel-row input {
        /* Display & Box Model */
        width: 100%;
        
        /* Typography */
        font-size: 0.72rem;
        
        /* Visual */
        transform: none;
    }
}

/* Gap indicators */
.panel-row.gap-above {
    margin-top: 36px;
}

.panel-row.gap-below {
    margin-bottom: 36px;
}