/* ═══════════════════════════════════════════════════════════════════════════
   Admin Portal — Hospital Creator
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Logo images ─────────────────────────────────────────────────────────── */

/* ── Toast notification ──────────────────────────────────────────────────── */
.admin-toast { z-index: 9999; }

/* ── Save alert (re-animates on every save via @key) ─────────────────────── */
@keyframes admin-fade-in {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}
.admin-save-alert { animation: admin-fade-in .22s ease; }

/* ── HTML editor heights ─────────────────────────────────────────────────── */
.admin-html-editor-sm { height: 210px; }
.admin-html-editor-md { height: 300px; }
.admin-html-editor-lg { height: 320px; }

/* ── Section divider label ───────────────────────────────────────────────── */
.admin-section-label { letter-spacing: .4px; }

/* ── Branding color picker inputs ────────────────────────────────────────── */
.admin-color-picker {
    width: 44px;
    height: 38px;
    padding: 2px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #dee2e6;
}
.admin-color-input { max-width: 140px; }

/* ── Shell ───────────────────────────────────────────────────────────────── */
.admin-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f4f6f9;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.admin-topbar {
    background: #1a3a5c !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    z-index: 1000;
}

.admin-topbar .navbar-brand {
    font-size: 18px;
    font-weight: 700;
    color: #fff !important;
    letter-spacing: .3px;
}

.admin-topbar .nav-link {
    color: rgba(255,255,255,.85) !important;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 4px;
    transition: background .15s;
}
.admin-topbar .nav-link:hover,
.admin-topbar .nav-link.active {
    background: rgba(255,255,255,.15);
    color: #fff !important;
}

/* ── Content area ────────────────────────────────────────────────────────── */
.admin-content {
    flex: 1;
    overflow-y: auto;
}

/* ── Grid ────────────────────────────────────────────────────────────────── */
.admin-grid {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    overflow: hidden;
}

/* ── Wizard step progress bar ─────────────────────────────────────────────── */
.wizard-steps {
    display: flex;
    align-items: center;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    min-width: 64px;
}

.wizard-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #ced4da;
    background: #fff;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    transition: background .2s, border-color .2s, color .2s;
}

.wizard-step.active .wizard-step-circle {
    background: #1a3a5c;
    border-color: #1a3a5c;
    color: #fff;
}

.wizard-step.done .wizard-step-circle {
    background: #198754;
    border-color: #198754;
    color: #fff;
}

.wizard-step-label {
    font-size: 11px;
    color: #6c757d;
    text-align: center;
    white-space: nowrap;
}

.wizard-step.active .wizard-step-label { color: #1a3a5c; font-weight: 600; }
.wizard-step.done  .wizard-step-label  { color: #198754; }

.wizard-step-connector {
    flex: 1;
    height: 2px;
    background: #ced4da;
    margin-bottom: 22px; /* aligns with circle centre */
    transition: background .2s;
}
.wizard-step-connector.done { background: #198754; }

/* ── Wizard step body ─────────────────────────────────────────────────────── */
.wizard-step-body {
    padding: 8px 4px;
    min-height: 320px;
}

/* ── Form layout ─────────────────────────────────────────────────────────── */
.dx-form-layout {
    --dx-form-label-width: 200px;
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.dx-tab-page {
    background: #fff;
    border-radius: 0 0 8px 8px;
}

/* ── Rich-text field preview ─────────────────────────────────────────────── */
.html-preview {
    background: #f8fafc;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.65;
    color: #1e293b;
}

.html-preview-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 8px;
}

/* ── DevExpress component safety overrides ────────────────────────────────
   Prevent SVG icons from rendering at full/natural size when the DevExpress
   theme CSS hasn't loaded yet (e.g. before dotnet restore is run).
   These rules are intentionally minimal — the theme CSS will take precedence
   once the DevExpress.Blazor.Themes package is restored.
   ────────────────────────────────────────────────────────────────────────── */

/* Cap all DevExpress SVG icons */
[class*="dxbl-"] svg,
[class*="dxbl-"] .dxbl-svg-icon {
    max-width: 1.25rem;
    max-height: 1.25rem;
    width: 1em;
    height: 1em;
}

/* DxCheckBox — hide the native <input> that DevExpress keeps for a11y */
.dxbl-checkbox-input {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none !important;
}

/* DxCheckBox state marker box */
.dxbl-checkbox-state-marker,
.dxbl-checkbox-check-element {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    min-width: 1.1rem;
    border: 2px solid #adb5bd;
    border-radius: 3px;
    background: #fff;
}