/* UFS Phase 6: shared visual language for authenticated personal workspaces. */
.ufs-context-personal .ufs-personal-page,
[data-ufs-context="personal"] .ufs-personal-page {
    color: var(--ufs-navy);
}

.ufs-context-personal .ufs-personal-page .text-primary,
[data-ufs-context="personal"] .ufs-personal-page .text-primary {
    color: var(--ufs-personal-primary) !important;
}

.ufs-context-personal .ufs-personal-page .btn-primary,
[data-ufs-context="personal"] .ufs-personal-page .btn-primary {
    --bs-btn-bg: var(--ufs-personal-primary);
    --bs-btn-border-color: var(--ufs-personal-primary);
    --bs-btn-hover-bg: var(--ufs-personal-darker);
    --bs-btn-hover-border-color: var(--ufs-personal-darker);
    --bs-btn-active-bg: var(--ufs-personal-darker);
    --bs-btn-active-border-color: var(--ufs-personal-darker);
}

.ufs-context-personal .ufs-personal-page .btn-outline-primary,
[data-ufs-context="personal"] .ufs-personal-page .btn-outline-primary {
    --bs-btn-color: var(--ufs-personal-primary);
    --bs-btn-border-color: var(--ufs-personal-muted);
    --bs-btn-hover-bg: var(--ufs-personal-primary);
    --bs-btn-hover-border-color: var(--ufs-personal-primary);
}

.ufs-context-personal .ufs-personal-page .form-control:focus,
.ufs-context-personal .ufs-personal-page .form-select:focus,
[data-ufs-context="personal"] .ufs-personal-page .form-control:focus,
[data-ufs-context="personal"] .ufs-personal-page .form-select:focus {
    border-color: var(--ufs-personal-light);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ufs-personal-primary) 18%, transparent);
}

.ufs-context-personal .ufs-personal-page .card,
[data-ufs-context="personal"] .ufs-personal-page .card {
    border-color: color-mix(in srgb, var(--ufs-personal-muted) 48%, var(--ufs-gray-lighter));
    border-radius: var(--ufs-radius);
    box-shadow: var(--ufs-shadow-sm);
}

.ufs-context-personal .ufs-personal-page .card-header,
.ufs-context-personal .ufs-personal-page .card-footer,
[data-ufs-context="personal"] .ufs-personal-page .card-header,
[data-ufs-context="personal"] .ufs-personal-page .card-footer {
    border-color: color-mix(in srgb, var(--ufs-personal-muted) 38%, var(--ufs-gray-lighter));
}

.ufs-context-personal .ufs-personal-page .badge.bg-success-subtle,
[data-ufs-context="personal"] .ufs-personal-page .badge.bg-success-subtle {
    background: var(--ufs-personal-lighter) !important;
    color: var(--ufs-personal-darker) !important;
}

.ufs-context-personal .ufs-personal-page table thead th,
[data-ufs-context="personal"] .ufs-personal-page table thead th {
    background: color-mix(in srgb, var(--ufs-personal-lighter) 62%, white);
    color: var(--ufs-navy);
    border-bottom-color: var(--ufs-personal-muted);
}

.ufs-context-personal .ufs-personal-page .modal-content,
[data-ufs-context="personal"] .ufs-personal-page .modal-content {
    border: 0;
    border-radius: var(--ufs-radius-lg);
    box-shadow: var(--ufs-shadow-xl);
}

.ufs-context-personal .ufs-personal-page .modal-header,
[data-ufs-context="personal"] .ufs-personal-page .modal-header {
    border-bottom-color: color-mix(in srgb, var(--ufs-personal-muted) 45%, var(--ufs-gray-lighter));
}

@media (max-width: 767.98px) {
    .ufs-context-personal .ufs-personal-page,
    [data-ufs-context="personal"] .ufs-personal-page {
        padding-inline: 0 !important;
    }
}