/* EXPAND/COLLAPSE BUTTON DESIGN OPTIONS - 2025 */
/* OPTION 2 - CIRCULAR BUTTON WITH CHEVRON - ACTIVE */

/* RESET - Remove all existing button styles */
body #catalogTable .catalog-toggle-btn,
body #catalogTable .toggle-btn,
body #catalogTable button[data-action="toggle"],
body .catalog-table .catalog-toggle-btn,
body .catalog-table .toggle-btn,
button.catalog-toggle-btn,
button.toggle-btn {
    /* Reset everything */
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    color: transparent !important;
    overflow: hidden !important;
    
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    cursor: pointer !important;
    position: relative !important;
    
    transition: all 0.2s ease !important;
}

/* ACTIVE DESIGN - OPTION 2: CIRCULAR BUTTON WITH CHEVRON */
button[data-action="toggle"] {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

button[data-action="toggle"]::before {
    content: '' !important;
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid #495057 !important;
    border-bottom: 2px solid #495057 !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
    top: 50% !important;
    left: 50% !important;
    transition: transform 0.3s ease !important;
}

/* COLLAPSED STATE: Chevron pointing DOWN (default - when button aria-expanded="false") */
button[data-action="toggle"][aria-expanded="false"]::before,
button[data-action="toggle"]:not([aria-expanded])::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

/* EXPANDED STATE: Chevron pointing UP (when button aria-expanded="true") */
button[data-action="toggle"][aria-expanded="true"]::before {
    transform: translate(-50%, -50%) rotate(-135deg) !important;
}

button[data-action="toggle"]:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* ================================================================
   OPTION 2: CIRCULAR BUTTON WITH CHEVRON
   ================================================================ */
.design-option-2 button[data-action="toggle"] {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.design-option-2 button[data-action="toggle"]::before {
    content: '' !important;
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid #495057 !important;
    border-bottom: 2px solid #495057 !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
    top: 50% !important;
    left: 50% !important;
    transition: transform 0.3s ease !important;
}

.design-option-2 .expandable-row[aria-expanded="true"] button[data-action="toggle"]::before,
.design-option-2 tr[data-expanded="true"] button[data-action="toggle"]::before {
    transform: translate(-50%, -50%) rotate(-135deg) !important;
}

.design-option-2 button[data-action="toggle"]:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    transform: translateY(-1px) !important;
}

/* ================================================================
   OPTION 3: PLUS/MINUS ICONS (TRADITIONAL)
   ================================================================ */
.design-option-3 button[data-action="toggle"]::before {
    content: '+' !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #495057 !important;
    line-height: 1 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: transform 0.2s ease !important;
}

.design-option-3 .expandable-row[aria-expanded="true"] button[data-action="toggle"]::before,
.design-option-3 tr[data-expanded="true"] button[data-action="toggle"]::before {
    content: '−' !important;
    transform: translate(-50%, -50%) rotate(0deg) !important;
}

.design-option-3 button[data-action="toggle"]:hover::before {
    color: #ff6600 !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
}

/* ================================================================
   OPTION 4: MATERIAL DESIGN STYLE
   ================================================================ */
.design-option-4 button[data-action="toggle"] {
    background: transparent !important;
    border-radius: 4px !important;
    transition: background-color 0.2s ease !important;
}

.design-option-4 button[data-action="toggle"]:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

.design-option-4 button[data-action="toggle"]::before {
    content: 'expand_more' !important;
    font-family: 'Material Icons' !important;
    font-size: 18px !important;
    color: rgba(0, 0, 0, 0.54) !important;
    line-height: 1 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: transform 0.2s ease !important;
}

.design-option-4 .expandable-row[aria-expanded="true"] button[data-action="toggle"]::before,
.design-option-4 tr[data-expanded="true"] button[data-action="toggle"]::before {
    transform: translate(-50%, -50%) rotate(180deg) !important;
}

/* ================================================================
   OPTION 5: SQUARE WITH BORDER
   ================================================================ */
.design-option-5 button[data-action="toggle"] {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.design-option-5 button[data-action="toggle"]::before {
    content: '' !important;
    position: absolute !important;
    width: 12px !important;
    height: 2px !important;
    background: #495057 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: all 0.2s ease !important;
}

.design-option-5 button[data-action="toggle"]::after {
    content: '' !important;
    position: absolute !important;
    width: 2px !important;
    height: 12px !important;
    background: #495057 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: all 0.2s ease !important;
}

.design-option-5 .expandable-row[aria-expanded="true"] button[data-action="toggle"]::after,
.design-option-5 tr[data-expanded="true"] button[data-action="toggle"]::after {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(0) !important;
}

.design-option-5 button[data-action="toggle"]:hover {
    border-color: #ff6600 !important;
    box-shadow: 0 2px 4px rgba(255, 102, 0, 0.2) !important;
}

.design-option-5 button[data-action="toggle"]:hover::before,
.design-option-5 button[data-action="toggle"]:hover::after {
    background: #ff6600 !important;
}

/* ================================================================
   OPTION 6: MINIMAL DOT STYLE
   ================================================================ */
.design-option-6 button[data-action="toggle"]::before {
    content: '•••' !important;
    font-size: 12px !important;
    color: #6c757d !important;
    line-height: 1 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    transition: all 0.3s ease !important;
    letter-spacing: 1px !important;
}

.design-option-6 .expandable-row[aria-expanded="true"] button[data-action="toggle"]::before,
.design-option-6 tr[data-expanded="true"] button[data-action="toggle"]::before {
    transform: translate(-50%, -50%) rotate(0deg) !important;
}

.design-option-6 button[data-action="toggle"]:hover::before {
    color: #ff6600 !important;
    transform: translate(-50%, -50%) rotate(0deg) scale(1.2) !important;
}

/* ================================================================
   OPTION 7: ARROW STYLE
   ================================================================ */
.design-option-7 button[data-action="toggle"]::before {
    content: '▶' !important;
    font-size: 12px !important;
    color: #6c757d !important;
    line-height: 1 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: transform 0.3s ease !important;
}

.design-option-7 .expandable-row[aria-expanded="true"] button[data-action="toggle"]::before,
.design-option-7 tr[data-expanded="true"] button[data-action="toggle"]::before {
    transform: translate(-50%, -50%) rotate(90deg) !important;
}

.design-option-7 button[data-action="toggle"]:hover::before {
    color: #ff6600 !important;
    transform: translate(-50%, -50%) scale(1.2) !important;
}

.design-option-7 .expandable-row[aria-expanded="true"] button[data-action="toggle"]:hover::before,
.design-option-7 tr[data-expanded="true"] button[data-action="toggle"]:hover::before {
    transform: translate(-50%, -50%) rotate(90deg) scale(1.2) !important;
}

/* PHASE AND COST CENTER SPECIFIC COLORS */
#catalogTable .catalog-phase-row button[data-action="toggle"]:hover,
.catalog-phase-row button[data-action="toggle"]:hover {
    border-color: #ff6600 !important;
    box-shadow: 0 2px 4px rgba(255, 102, 0, 0.25) !important;
}

#catalogTable .catalog-phase-row button[data-action="toggle"]:hover::before,
.catalog-phase-row button[data-action="toggle"]:hover::before {
    border-color: #ff6600 !important;
}

#catalogTable .catalog-cc-row button[data-action="toggle"]:hover,
.catalog-cc-row button[data-action="toggle"]:hover {
    border-color: #8b4513 !important;
    box-shadow: 0 2px 4px rgba(139, 69, 19, 0.25) !important;
}

#catalogTable .catalog-cc-row button[data-action="toggle"]:hover::before,
.catalog-cc-row button[data-action="toggle"]:hover::before {
    border-color: #8b4513 !important;
}

/* 4-BUTTON HIERARCHY CONTROL STYLING */
.hierarchy-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    cursor: pointer !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    
    transition: all 0.3s ease !important;
}

.hierarchy-btn:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

.hierarchy-btn i {
    font-size: 14px !important;
    line-height: 1 !important;
    margin-right: 2px !important;
}

.hierarchy-btn .level-indicator {
    font-size: 10px !important;
    font-weight: bold !important;
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    width: 12px !important;
    height: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* Collapse buttons (orange theme) */
#collapseToCCBtn,
#collapseToPhaseBtn {
    background: rgba(255, 102, 0, 0.1) !important;
    border-color: #ff6600 !important;
    color: #ff6600 !important;
}

#collapseToCCBtn:hover,
#collapseToPhaseBtn:hover {
    background: rgba(255, 102, 0, 0.2) !important;
    border-color: #e55a00 !important;
}

/* Expand buttons (blue theme) */
#expandToCCBtn,
#expandToItemsBtn {
    background: rgba(0, 123, 255, 0.1) !important;
    border-color: #007bff !important;
    color: #007bff !important;
}

#expandToCCBtn:hover,
#expandToItemsBtn:hover {
    background: rgba(0, 123, 255, 0.2) !important;
    border-color: #0056b3 !important;
}

/* FOCUS STATES FOR ACCESSIBILITY */
button[data-action="toggle"]:focus-visible,
.hierarchy-btn:focus-visible {
    outline: 2px solid #0066cc !important;
    outline-offset: 2px !important;
}

/* KEYBOARD NAVIGATION SUPPORT */
.hierarchy-btn:focus {
    background: #e9ecef !important;
    border-color: #0066cc !important;
}

/* DISABLED STATE */
.hierarchy-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* REDUCED MOTION SUPPORT */
@media (prefers-reduced-motion: reduce) {
    button[data-action="toggle"],
    button[data-action="toggle"]::before,
    button[data-action="toggle"]::after {
        transition: none !important;
        animation: none !important;
    }
}