/* Hide the add/edit/view related widget buttons in ConfigurationCableDetail inline */
.inline-group .related-widget-wrapper .related-widget-wrapper-link {
    display: none !important;
}

/* Also hide via the specific class names used by Unfold */
.inline-group .related-widget-wrapper .change-related,
.inline-group .related-widget-wrapper .add-related,
.inline-group .related-widget-wrapper .view-related,
.inline-group .related-widget-wrapper .delete-related {
    display: none !important;
}

/* Make the select dropdown take full width since buttons are gone */
.inline-group .related-widget-wrapper select {
    flex: 1;
}

/* ============================================
   Cable Details Inline - Jumper Column Styles
   ============================================ */

/* 
 * When jumpers are disabled, hide the fixed/direct cable columns.
 * The .jumpers-disabled class is added to the inline group by JavaScript.
 */
.jumpers-disabled .field-fixed_cable_type,
.jumpers-disabled .field-fixed_cable_length_inches,
.jumpers-disabled .field-fixed_connector,
.jumpers-disabled th.column-fixed_cable_type,
.jumpers-disabled th.column-fixed_cable_length_inches,
.jumpers-disabled th.column-fixed_connector {
    display: none !important;
}

/* 
 * When jumpers are enabled, add a subtle blue background
 * to visually distinguish "Direct Cable" columns.
 */
.jumpers-enabled .field-fixed_cable_type,
.jumpers-enabled .field-fixed_cable_length_inches,
.jumpers-enabled .field-fixed_connector,
.jumpers-enabled th.column-fixed_cable_type,
.jumpers-enabled th.column-fixed_cable_length_inches,
.jumpers-enabled th.column-fixed_connector {
    background-color: rgba(59, 130, 246, 0.05) !important;
}

/* Dark mode */
.dark .jumpers-enabled .field-fixed_cable_type,
.dark .jumpers-enabled .field-fixed_cable_length_inches,
.dark .jumpers-enabled .field-fixed_connector,
.dark .jumpers-enabled th.column-fixed_cable_type,
.dark .jumpers-enabled th.column-fixed_cable_length_inches,
.dark .jumpers-enabled th.column-fixed_connector {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

/* ============================================
   Fieldsets Tabs - Enhanced Styling
   ============================================ */

/* 
 * Override Unfold's default fieldsets tabs styling.
 * The tabs container has: ul.bg-base-100.flex.gap-10.rounded-default
 * We use .rounded-default as a unique identifier for Unfold tabs.
 */

/* Tab container - remove background, add bottom border line */
ul.rounded-default {
    gap: 0.5rem !important;
    border-bottom: 2px solid #e5e7eb !important;
    padding-bottom: 0 !important;
    margin-bottom: 1.5rem !important;
    background-color: transparent !important;
    background: none !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    border-radius: 0 !important;
    padding-top: 0 !important;
}

/* Dark mode container */
.dark ul.rounded-default {
    border-bottom-color: #4b5563 !important;
}

/* Tab links - base styling */
ul.rounded-default > li > a {
    display: inline-block !important;
    padding: 0.625rem 1rem !important;
    margin-bottom: -2px !important;
    border-bottom: 3px solid transparent !important;
    color: #6b7280 !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
    border-radius: 4px 4px 0 0 !important;
    text-decoration: none !important;
}

/* Tab hover state */
ul.rounded-default > li > a:hover {
    color: #374151 !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-bottom-color: #d1d5db !important;
}

.dark ul.rounded-default > li > a:hover {
    color: #e5e7eb !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-bottom-color: #6b7280 !important;
}

/* Active tab - purple accent with underline */
ul.rounded-default > li > a.text-font-important-light,
ul.rounded-default > li > a.text-font-important-dark,
ul.rounded-default > li > a[class*="text-font-important"] {
    color: #7c3aed !important;
    border-bottom-color: #7c3aed !important;
    font-weight: 600 !important;
    background-color: rgba(124, 58, 237, 0.05) !important;
}

.dark ul.rounded-default > li > a.text-font-important-light,
.dark ul.rounded-default > li > a.text-font-important-dark,
.dark ul.rounded-default > li > a[class*="text-font-important"] {
    color: #a78bfa !important;
    border-bottom-color: #a78bfa !important;
    background-color: rgba(167, 139, 250, 0.1) !important;
}

/* ============================================
   Section Headers - Enhanced Styling
   ============================================ */

/* 
 * Style section headers (h2.rounded-default) to be more prominent.
 * These appear for inlines and fieldsets throughout admin.
 * Example: "Configuration Cable Details"
 */

h2.rounded-default,
h2.bg-base-100 {
    background: linear-gradient(to right, rgba(124, 58, 237, 0.08), rgba(124, 58, 237, 0.02)) !important;
    border-left: 4px solid #7c3aed !important;
    border-radius: 0 8px 8px 0 !important;
    color: #1f2937 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    padding: 0.875rem 1.25rem !important;
    margin-bottom: 1rem !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* Dark mode section headers */
.dark h2.rounded-default,
.dark h2.bg-base-100 {
    background: linear-gradient(to right, rgba(167, 139, 250, 0.15), rgba(167, 139, 250, 0.03)) !important;
    border-left-color: #a78bfa !important;
    color: #f3f4f6 !important;
}

/* Alternative: For inline group headers specifically */
.inline-group h2,
.inline-group > h2:first-child {
    background: linear-gradient(to right, rgba(124, 58, 237, 0.08), rgba(124, 58, 237, 0.02)) !important;
    border-left: 4px solid #7c3aed !important;
    border-radius: 0 8px 8px 0 !important;
    color: #1f2937 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 0.875rem 1.25rem !important;
    margin-bottom: 1rem !important;
}

.dark .inline-group h2,
.dark .inline-group > h2:first-child {
    background: linear-gradient(to right, rgba(167, 139, 250, 0.15), rgba(167, 139, 250, 0.03)) !important;
    border-left-color: #a78bfa !important;
    color: #f3f4f6 !important;
}