/* ═══════════════════════════════════════════════════════════════════════════════
   Skyline Hub theme — portal

   The same palette and type treatment as Redstone.Web/wwwroot/skyline-theme.css, so
   staff and customers see one system. This is a separate, much smaller file rather
   than a shared one: the staff theme is largely MudBlazor overrides (.mud-drawer,
   .mud-nav-link, the app bar) and the portal has none of that furniture.

   ── REVERTING ──
   Purely additive. Delete the single <link> to skyline-theme.css in
   Components/App.razor and the portal returns to its previous look. Nothing in
   app.css or any component was changed to make it work.

   ── HOW IT WORKS ──
   app.css already routes every colour through a --portal-* custom property, so
   remapping those eight values re-skins the whole portal without touching a single
   component rule. Kendo derives its primary shades from --kendo-color-primary the
   same way, so that is one declaration too.

   Declared on html:root (0,1,1) rather than :root (0,1,0) deliberately: App.razor
   links the Kendo stylesheet, which defines --kendo-color-* on :root, and this file
   must win regardless of link order.
   ═══════════════════════════════════════════════════════════════════════════════ */

html:root {
    /* ── Skyline palette (identical values to the staff theme) ── */
    --sky-navy:       #071a2f;
    --sky-navy-2:     #123b60;
    --sky-blue:       #2f668e;
    --sky-blue-soft:  #eaf2f7;
    --sky-paper:      #f4f7f9;
    --sky-white:      #ffffff;
    --sky-ink:        #17324c;
    --sky-copy:       #445f75;
    --sky-muted:      #667b8d;
    --sky-border:     #d8e2e9;
    --sky-green:      #2d7652;
    --sky-amber:      #8a6121;
    --sky-red:        #9b463c;
    --sky-radius:     12px;
    --sky-radius-sm:  8px;
    --sky-shadow:     0 12px 32px #0a223714;

    /* ── The portal's own tokens, remapped ──
       app.css sets --portal-brand to #8b1a1a, a dark red left over from before there
       was a palette. Everything else here is a like-for-like swap. */
    --portal-bg:      var(--sky-paper);
    --portal-surface: var(--sky-white);
    --portal-border:  var(--sky-border);
    --portal-text:    var(--sky-ink);
    --portal-muted:   var(--sky-muted);
    --portal-brand:   var(--sky-navy-2);
    --portal-error:   var(--sky-red);
    --portal-warning: var(--sky-amber);
    --portal-success: var(--sky-green);

    /* ── Kendo primary ──
       Kendo 15 derives hover, active, emphasis and the auto-contrast
       --kendo-color-on-primary from this one base using relative colour, so setting
       it re-tints every Telerik button and accent together. Stock is a salmon red.
       --kendo-color-on-primary is left alone on purpose: it resolves to white for any
       base darker than l=0.75, and --sky-navy-2 sits well below that. */
    --kendo-color-primary: var(--sky-navy-2);
}

/* Georgia headings over the sans body — the split that carries most of the staff
   app's character. The portal sets h1/h2 sizes in app.css; only the face changes. */
h1, h2, h3,
.portal-auth-title {
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--sky-ink);
}

/* The wordmark beside the tenant logo. */
.portal-brand-name {
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--sky-ink);
    letter-spacing: .2px;
}

/* Sign-in card picks up the same chrome as a card in the staff app: hairline border,
   12px radius, soft shadow, on paper. */
.portal-auth-card {
    border: 1px solid var(--sky-border);
    border-radius: var(--sky-radius);
    box-shadow: var(--sky-shadow);
}

/* Inputs match the staff pills: hairline at rest, brand blue on focus, no glow. */
.portal-field .k-input,
.portal-field .k-picker,
.portal-field .k-textbox {
    border-color: var(--sky-border);
    border-radius: var(--sky-radius-sm);
}

.portal-field .k-input:focus-within,
.portal-field .k-picker:focus-within {
    border-color: var(--sky-blue);
    box-shadow: none;
}

/* The tenant logo can be any shape or aspect ratio, so it is contained rather than
   cropped and given a ceiling on both axes — an unusually tall upload would otherwise
   stretch the header and the sign-in card. */
.portal-brand-mark {
    max-height: 36px;
    max-width: 180px;
    height: auto;
    width: auto;
    object-fit: contain;
}

.portal-auth-brand .portal-brand-mark {
    max-height: 48px;
    max-width: 220px;
}

.portal-auth-footer {
    color: var(--sky-muted);
}