html, body {
    font-family: "Cairo", 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus { outline: none; }

a, .btn-link { color: #0f5e8c; }

.btn-primary {
    color: #fff;
    background-color: #0f5e8c;
    border-color: #073b5c;
}

.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 #14a6a6;
}

.content { padding-top: 1.1rem; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #16a34a; }
.invalid { outline: 1px solid #dc2626; }
.validation-message { color: #dc2626; }

code { color: #b91c1c; }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: #94a3b8;
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ============================================================
   Boot / first-load splash screen
   ============================================================ */
.boot-screen {
    position: fixed;
    inset: 0;
    overflow: hidden;
    font-family: "Cairo", sans-serif;
    color: #1e293b;
    background:
        radial-gradient(circle at 15% 20%, rgba(20, 166, 166, 0.18), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(243, 179, 61, 0.18), transparent 26%),
        linear-gradient(135deg, #eef7fb 0%, #f8fbfd 45%, #edf5f8 100%);
    display: grid;
    place-items: center;
    padding: 24px;
}

.boot-shape {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(1px);
    opacity: 0.6;
}

.boot-shape-1 {
    width: 140px; height: 140px;
    background: rgba(20, 166, 166, 0.18);
    top: 12%; right: 12%;
    animation: boot-float 7s ease-in-out infinite;
}

.boot-shape-2 {
    width: 220px; height: 220px;
    background: rgba(15, 94, 140, 0.10);
    bottom: 10%; left: 8%;
    animation: boot-float 9s ease-in-out infinite reverse;
}

.boot-shape-3 {
    width: 90px; height: 90px;
    background: rgba(243, 179, 61, 0.24);
    bottom: 20%; right: 22%;
    animation: boot-float 5.5s ease-in-out infinite;
}

@keyframes boot-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

.boot-card {
    position: relative;
    width: min(440px, 100%);
    padding: 36px 32px 28px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(219, 231, 239, 0.9);
    border-radius: 28px;
    box-shadow: 0 22px 60px rgba(15, 94, 140, 0.16);
    backdrop-filter: blur(18px);
    text-align: center;
}

.boot-logo {
    width: 72px; height: 72px;
    margin: 0 auto 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, #0f5e8c, #14a6a6);
    color: white;
    display: grid;
    place-items: center;
    box-shadow: 0 18px 36px rgba(15, 94, 140, 0.28);
    animation: boot-pulse 2.4s ease-in-out infinite;
}

.boot-logo svg { width: 38px; height: 38px; }

@keyframes boot-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 18px 36px rgba(15, 94, 140, 0.28); }
    50%      { transform: scale(1.04); box-shadow: 0 24px 50px rgba(15, 94, 140, 0.34); }
}

.boot-brand h1 {
    font-size: 19px;
    font-weight: 800;
    color: #073b5c;
    margin: 0;
}

.boot-brand p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}

/* ----- Progress ring ----- */
.loading-progress {
    display: block;
    margin: 22px auto 8px;
    width: 88px;
    height: 88px;
    transform: rotate(-90deg);
}

.loading-progress circle {
    fill: none;
    stroke-width: 6;
    transform-origin: 50% 50%;
}

.loading-progress circle:first-child {
    stroke: rgba(20, 166, 166, 0.18);
}

.loading-progress circle:last-child {
    stroke: #14a6a6;
    stroke-linecap: round;
    stroke-dasharray: calc(2 * 3.14159 * 40 * var(--blazor-load-percentage, 0%) / 100), 9999;
    transition: stroke-dasharray 0.18s ease-in-out;
}

.loading-progress-text {
    color: #0f5e8c;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.4px;
}

.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "جاري التحميل...");
}

.boot-hint {
    margin-top: 12px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.7;
}

/* ============================================================
   Blazor error UI — brand-styled banner
   ============================================================ */
#blazor-error-ui {
    color-scheme: light only;
    font-family: "Cairo", sans-serif;
    background: white;
    color: #1e293b;
    bottom: 16px;
    inset-inline: 16px;
    box-shadow: 0 18px 48px rgba(15, 94, 140, 0.18);
    box-sizing: border-box;
    display: none;
    padding: 14px 18px;
    position: fixed;
    border: 1px solid #dbe7ef;
    border-inline-start: 4px solid #dc2626;
    border-radius: 16px;
    z-index: 1000;
    align-items: center;
    gap: 12px;
}

#blazor-error-ui[style*="display: block"] {
    display: flex !important;
}

#blazor-error-ui .error-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: rgba(220, 38, 38, 0.10);
    color: #dc2626;
    display: grid; place-items: center;
    flex: 0 0 auto;
}
#blazor-error-ui .error-icon svg { width: 22px; height: 22px; }

#blazor-error-ui .error-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
#blazor-error-ui .error-text strong { color: #b91c1c; font-weight: 800; font-size: 14px; }
#blazor-error-ui .error-text span   { color: #64748b; font-size: 12px; font-weight: 600; }

#blazor-error-ui .reload {
    color: white;
    background: linear-gradient(135deg, #0f5e8c, #14a6a6);
    border-radius: 12px;
    padding: 8px 16px;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(15, 94, 140, 0.24);
    flex: 0 0 auto;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    color: #94a3b8;
    font-size: 16px;
    padding: 4px 6px;
    border-radius: 8px;
    transition: background 0.18s ease, color 0.18s ease;
}
#blazor-error-ui .dismiss:hover {
    background: #f1f5f9;
    color: #334155;
}

.blazor-error-boundary {
    background: rgba(220, 38, 38, 0.06);
    color: #b91c1c;
    border: 1px dashed rgba(220, 38, 38, 0.30);
    border-radius: 14px;
    padding: 14px 16px;
    font-family: "Cairo", sans-serif;
    font-weight: 700;
}
.blazor-error-boundary::after { content: "حدث خطأ غير متوقع في هذا الجزء."; }