/*
 * shared-components.css
 * Styles for small, fully-namespaced partial components that can appear on many
 * pages under different layouts. Added to the global ~/Content/css bundle so the
 * components are styled everywhere they render.
 *
 *   .bg-selection-container  -> Views/Shared/_BackgroundRegionSelector.cshtml
 *   .ph-children-summary-*   -> Views/Shared/Profile/ChildrenSummary.cshtml
 *
 * All selectors are scoped to a component root class, so there is no leak risk.
 */

/* ---- Background region selector (_BackgroundRegionSelector.cshtml) ---- */
.bg-selection-container .bg-actions-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 4px 4px 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee5d6;
}

.bg-selection-container .bg-action-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 32px;
    border-radius: 7px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.bg-selection-container .bg-action-btn i {
    font-size: 13px;
}

.bg-selection-container .bg-action-btn-primary,
.bg-selection-container .bg-action-btn-secondary {
    border: 1px solid #d9c9ae;
    background: #fff;
    color: #6d5845;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.bg-selection-container .bg-action-btn-primary:hover,
.bg-selection-container .bg-action-btn-primary:focus,
.bg-selection-container .bg-action-btn-secondary:hover,
.bg-selection-container .bg-action-btn-secondary:focus {
    background: #fbf7ef;
    border-color: #b38f4a;
    color: #5a4737;
}

.bg-selection-container .bg-action-btn:active {
    transform: translateY(1px);
}

/* ---- Children summary (Profile/ChildrenSummary.cshtml) ---- */
.ph-children-summary-list {
    display: grid;
    gap: 8px;
}

.ph-children-summary-item {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px 12px;
    background: #fff;
}

.ph-children-summary-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.ph-children-summary-header span {
    color: #6c757d;
    font-size: 12px;
    white-space: nowrap;
}

.ph-children-summary-meta {
    display: grid;
    gap: 3px;
}