html,
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
}

h1:focus {
    outline: none;
}

.page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row ::deep a,
.top-row .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
}

.top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767.98px) {
    .top-row:not(.auth) {
        display: none;
    }

    .top-row.auth {
        justify-content: space-between;
    }

    .top-row,
    article {
        padding-left: 0 !important;
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 768px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row,
    article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

.content {
    flex: 1;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Regions page styles */
.regions-container {
    width: 100%;
    padding: 1rem;
}

.header-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    padding: 1.5rem;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-icon {
    font-size: 1.5rem;
}

.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    padding: 1.5rem;
}

.card-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.loading-container {
    text-align: center;
    padding: 2rem;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.button-icon {
    margin-right: 0.5rem;
}

.alert-icon {
    margin-right: 0.5rem;
}

.table-container {
    overflow-x: auto;
}

.badge {
    padding: 0.25em 0.5em;
    font-size: 0.75em;
    font-weight: 700;
    border-radius: 0.25rem;
}

.badge-primary {
    color: #fff;
    background-color: #007bff;
}

.badge-success {
    color: #fff;
    background-color: #28a745;
}

.badge-secondary {
    color: #fff;
    background-color: #6c757d;
}

/* Instant tooltip shown on hover via CSS */
.field-tooltip {
    position: relative;
    overflow: visible;
}

.field-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background-color: #323130;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 1000;
}

.field-tooltip:hover::after {
    opacity: 1;
}

/* Deployment Champion skeletons */
.skel-block {
    background: linear-gradient(90deg,
            var(--neutral-layer-2, #eaeaea) 0%,
            var(--neutral-layer-3, #f5f5f5) 50%,
            var(--neutral-layer-2, #eaeaea) 100%);
    background-size: 200% 100%;
    animation: champion-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
}

/* Immediate (client-side) loading overlay — bridges the gap between a button
   click and the server-rendered dialog/page arriving. Driven by
   wwwroot/js/immediate-loading.js via the data-immediate-loading attribute.
   Visually matches Shared/NavigationLoading.razor; top-anchored so it stays
   visible inside the (tall) D365 iframe viewport.

   z-index must sit ABOVE FluentDialog's modal backdrop: a pre-mounted dialog
   (e.g. Manage POR Roles) renders its shell in a single fast round-trip, so a
   lower overlay would be covered by the dialog backdrop before the minimum
   visible window elapses and the user would never see it. 2147483646 keeps the
   transient loader on top of any dialog/toast for its brief lifetime. */
.rps-immediate-loading {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2147483646;
}

.rps-immediate-loading.show {
    display: flex;
}

.rps-immediate-loading-card {
    margin-top: 80px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.rps-immediate-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.rps-immediate-loading-text {
    font-size: 0.95rem;
    color: #323130;
}

@keyframes champion-skeleton-shimmer {
    0% {
        background-position: 100% 0%;
    }

    100% {
        background-position: -100% 0%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rps-immediate-loading-spinner {
        animation-duration: 2s;
    }
}