/**
 * System Settings Panel - Reusable component styles
 */

.settings-panel-card {
    margin-bottom: 1rem;

    .card-header {
        h6 {
            font-weight: 600;

            i {
                margin-right: 0.5rem;
            }
        }
    }

    .card-body {
        padding: 1.25rem;
    }

    // Form elements styling
    .form-label {
        margin-bottom: 0.25rem;
        color: #495057;
    }

    .form-control {
        font-size: 0.875rem;
    }

    .form-text {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    // Boolean pill pair (form-selectgroup-pills with Yes/No radios)
    .form-selectgroup-pills {
        .form-selectgroup-label {
            font-size: 0.875rem;
        }
    }

    // Button row
    hr {
        border-color: #e9ecef;
    }

    .btn-outline-secondary {
        font-size: 0.875rem;
    }

    .btn-primary {
        min-width: 140px;
    }
}

// Collapsed state (when used with Bootstrap collapse)
.settings-panel-card.collapse:not(.show) {
    display: none;
}

// Responsive adjustments
@media (max-width: 767.98px) {
    .settings-panel-card {
        .card-body {
            padding: 1rem;
        }

        .d-flex.justify-content-between {
            flex-direction: column;
            gap: 0.75rem;

            .btn {
                width: 100%;
            }
        }
    }
}

// Dark mode support (if needed in future)
.dark-mode {
    .settings-panel-card {
        .form-label {
            color: #ced4da;
        }

        .form-text {
            color: #adb5bd !important;
        }
    }
}

/* Tab content scrolling for Tabler vertical tabs used by System Settings */
.tabs-vertical .tab-content .tab-pane {
    max-height: calc(100vh - 91px);
    overflow-y: auto;
    overflow-x: hidden;
}
