/* ═══════════════════════════════════════════════════════════════════════════════
   Skyline Hub theme — first pass (tokens, typography, surfaces, sidebar, topbar)

   Ported from the Skyline Hub learning-portal prototype
   (https://mikes-website.mikelc75.chatgpt.site). Same company, same brand, so the
   palette and type treatment are reused directly rather than re-derived.

   ── REVERTING ──
   This file is purely additive: nothing in app.css, MainLayout.razor, or any
   component was modified to make it work. To turn the theme off, delete the single
   <link> to skyline-theme.css in App.razor. Deleting this file also works.

   ── HOW IT WORKS ──
   MudBlazor is entirely custom-property driven (--mud-palette-*, --mud-typography-*)
   and MudThemeProvider injects its defaults onto `:root` at runtime, from a <style>
   element that lands later in the DOM than this stylesheet. Equal specificity would
   therefore lose. `html:root` is (0,1,1) against MudThemeProvider's (0,1,0), so the
   overrides below win on specificity and need no !important.

   ── DELIBERATELY OUT OF SCOPE FOR THIS PASS ──
   * Telerik grids/inputs (.k-*) are left alone. Telerik ships no navy/gold swatch,
     so matching them means either a custom SASS build (which would break the runtime
     theme switcher in ThemeState) or a large pile of overrides that would fight the
     global max-width:25ch input cap. Decide that separately, after seeing this.
   * Body font stays Roboto (already loaded in App.razor). The source site pairs
     Georgia headings with Manrope body; Georgia is a system font and costs nothing,
     Manrope would add a blocking Google Fonts request on an internet-facing app.
   * Page density is unchanged. The source site is a content portal with a handful of
     large cards; Redstone is dense grids and 33-tab editors. Colour, type and card
     chrome port cleanly — the source's 20px card padding and 34px headings do not.
   ═══════════════════════════════════════════════════════════════════════════════ */


/* ── 1. Design tokens ───────────────────────────────────────────────────────────
   Verbatim from the source site's :root, plus the gold accent it carries in a
   second block. These are the whole theme; everything below only references them. */
html:root {
    --sky-navy:       #071a2f;  /* sidebar, darkest ink             */
    --sky-navy-2:     #123b60;  /* primary buttons, hover states    */
    --sky-blue:       #2f668e;  /* interactive accent               */
    --sky-blue-soft:  #eaf2f7;  /* tinted fills                     */
    --sky-paper:      #f4f7f9;  /* page background behind cards     */
    --sky-white:      #ffffff;  /* card surface                     */
    --sky-ink:        #17324c;  /* headings                         */
    --sky-copy:       #445f75;  /* body copy                        */
    --sky-muted:      #667b8d;  /* secondary / meta text            */
    --sky-border:     #d8e2e9;  /* hairline card + divider border   */
    --sky-green:      #2d7652;
    --sky-green-soft: #e7f4ec;
    --sky-amber:      #8a6121;
    --sky-amber-soft: #fff4df;
    --sky-red:        #9b463c;
    --sky-red-soft:   #fcecea;
    --sky-gold:       #e9b33c;  /* badges, progress fill, arrows    */
    --sky-radius:     12px;
    --sky-radius-sm:  8px;
    --sky-shadow:     0 12px 32px #0a223714;

    /* Sidebar-specific values lifted from the source site's .sidebar rules. */
    --sky-nav-idle:   #b7c4d2;
    --sky-nav-hover:  #ffffff17;

    /* ── MudBlazor palette remap ──
       MudBlazor reads these everywhere, so remapping here re-skins buttons, papers,
       cards, drawers, text and dividers in one place instead of per component. */
    --mud-palette-primary:            var(--sky-navy-2);
    --mud-palette-primary-darken:     var(--sky-navy);
    --mud-palette-primary-lighten:    var(--sky-blue);
    --mud-palette-primary-hover:      #123b6014;
    --mud-palette-primary-rgb:        18, 59, 96;

    --mud-palette-background:         var(--sky-paper);
    --mud-palette-background-gray:    var(--sky-paper);
    --mud-palette-surface:            var(--sky-white);

    --mud-palette-text-primary:       var(--sky-ink);
    --mud-palette-text-secondary:     var(--sky-muted);
    --mud-palette-text-primary-rgb:   23, 50, 76;

    --mud-palette-lines-default:      var(--sky-border);
    --mud-palette-lines-inputs:       var(--sky-border);

    --mud-palette-drawer-background:  var(--sky-navy);
    --mud-palette-drawer-text:        var(--sky-nav-idle);
    --mud-palette-drawer-icon:        var(--sky-nav-idle);

    --mud-palette-appbar-background:  var(--sky-white);
    --mud-palette-appbar-text:        var(--sky-ink);

    --mud-palette-success:            var(--sky-green);
    --mud-palette-warning:            var(--sky-amber);
    --mud-palette-error:              var(--sky-red);

    --mud-default-borderradius:       var(--sky-radius);

    /* ── Kendo / Telerik primary ──
       Kendo 15 derives every primary shade from this one base using relative colour,
       so redefining it re-tints the whole family together:

         --kendo-color-primary-hover:    l - 0.044      (a touch darker)
         --kendo-color-primary-active:   l - 0.088      (darker still)
         --kendo-color-primary-emphasis: l * 0.665 + 0.33
         --kendo-color-on-primary:       clamp(0.10, (0.75 - l) * 99999, 1)

       That last one is an automatic contrast pick: any base lighter than l=0.75 gets
       near-black text, anything darker gets white. --sky-navy-2 sits around l=0.32, so
       the foreground resolves to white on its own — which is why it is NOT set here.
       Overriding it by hand would break that relationship for no gain.

       Stock Kendo primary is a salmon red, oklch(69.85% 0.1923 27.19deg). This turns
       every Telerik primary button, active tab and primary accent in the app the same
       blue MudBlazor already uses via --mud-palette-primary above.

       Declared on html:root (0,1,1) rather than :root (0,1,0) deliberately: Login.razor
       injects its own Telerik stylesheet through HeadOutlet, which lands AFTER this
       file, so only the higher specificity keeps this winning on that page too.

       Chart series colours are unaffected — they come from Telerik's chart defaults,
       not from this variable, so the dashboard graphs keep their existing palette. */
    --kendo-color-primary: var(--sky-navy-2);

    /* NOT overridden: --mud-appbar-height. app.css pins it to 64px and the
       .entity-editor-page height chain subtracts it; changing it silently breaks
       the scroll layout on every summary-bar editor. */
}

/* Page ground. MudBlazor paints --mud-palette-background on .mud-layout, but the
   splash overlay and static-SSR pages render before that exists. */
body {
    background-color: var(--sky-paper);
}


/* ── 2. Typography ──────────────────────────────────────────────────────────────
   The serif/sans split is most of the source site's character: Georgia headings
   over sans body. Pages here title themselves with Typo.h5 (247 uses) and section
   headings with Typo.h6 (87), so those two carry almost all of the visible effect.
   Body, button and caption families are deliberately left as-is. */
html:root {
    --mud-typography-h1-family: Georgia, 'Times New Roman', serif;
    --mud-typography-h2-family: Georgia, 'Times New Roman', serif;
    --mud-typography-h3-family: Georgia, 'Times New Roman', serif;
    --mud-typography-h4-family: Georgia, 'Times New Roman', serif;
    --mud-typography-h5-family: Georgia, 'Times New Roman', serif;
    --mud-typography-h6-family: Georgia, 'Times New Roman', serif;

    --mud-typography-h5-weight: 600;
    --mud-typography-h6-weight: 600;
}

.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6 {
    color: var(--sky-ink);
    letter-spacing: 0;
}

/* Plain h1/h2/h3 on pages that don't route through MudText. */
.mud-main-content h1,
.mud-main-content h2,
.mud-main-content h3 {
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--sky-ink);
}

/* Eyebrow — the small uppercase letter-spaced label above a heading on the source
   site (.eyebrow / .stats span). Opt-in utility; nothing uses it until a page does. */
.sky-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sky-muted);
}

/* Section head — heading + sub-line + trailing action, the source site's
   .sectionHead. Also opt-in. */
.sky-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.sky-section-head h2,
.sky-section-head .sky-section-title {
    margin: 0 0 3px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 20px;
    color: var(--sky-ink);
}

.sky-section-head p,
.sky-section-head .sky-section-sub {
    margin: 0;
    font-size: 11px;
    color: var(--sky-muted);
}


/* ── 3. Surfaces ────────────────────────────────────────────────────────────────
   White cards on paper, hairline border, soft shadow. Padding is NOT touched: the
   source site's 18-20px would cost several grid rows above the fold, and would push
   the fixed-height editor chrome past its calc() budget. */
.mud-paper,
.mud-card {
    border: 1px solid var(--sky-border);
    border-radius: var(--sky-radius);
    box-shadow: var(--sky-shadow);
}

/* Elevation 0 means "flat by intent" — usually a layout wrapper, not a card.
   Honour that rather than giving every wrapper a border and shadow. */
.mud-paper.mud-elevation-0,
.mud-card.mud-elevation-0 {
    border: 0;
    box-shadow: none;
}

/* The editor shell manages its own borders and a strict height budget, so it opts
   out of the shadow — see the .entity-editor-page chain in app.css. */
.entity-editor-page .mud-paper,
.entity-editor-summary,
.entity-editor-tabstrip-wrapper .mud-paper {
    box-shadow: none;
}

.mud-divider {
    border-color: var(--sky-border);
}


/* ── 4. Navigation drawer ───────────────────────────────────────────────────────
   Navy sidebar. Colours come from the palette remap above; these rules add the
   interaction states and the inset active rail the source site uses. */
/* overflow-x:hidden is a guard, not the fix — the horizontal scrollbar came from
   giving .mud-nav-link a left/right margin while MudBlazor has it at width:100%,
   so every link ended up wider than the drawer. The margins are gone below. */
/* Two scrollbars appeared side by side when a long branch was expanded, because two
   nested elements were both scrolling the same overflow: MudBlazor gives .mud-drawer
   `overflow-y:auto`, and app.css gives .drawer-tabs .mud-tabs-panels
   `overflow-y:auto` with a max-height. The inner one is the correct scroller — it is
   the element with a real height budget — so the outer drawer stops scrolling. */
.mud-drawer {
    border-right: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Full-bleed rows: no horizontal margin (see above) and no radius, so the hover and
   active washes run edge to edge instead of floating as pills. */
.mud-drawer .mud-nav-link {
    border-radius: 0;
    margin: 0;
    transition: background-color 120ms ease, color 120ms ease;
}

/* ── One colour for every level ──
   MudBlazor sets .mud-nav-link { color: inherit }, so nav links take whatever the
   nearest styled ancestor gives them. Earlier revisions coloured group headers
   separately from leaf links, which left the levels visibly out of step with each
   other. Every item at every depth now reads the same, and ONLY the active row is
   brighter — the depth cue comes from indentation and the type scale below, not
   from colour.

   :not(.active) keeps this from competing with the active rule, which needs its own
   high-specificity selector to beat MudBlazor (see below). */
.mud-drawer .mud-navmenu .mud-nav-link:not(.active) {
    color: var(--sky-nav-idle);
}

.mud-drawer .mud-navmenu .mud-nav-link:not(.active):hover,
.mud-drawer .mud-navmenu .mud-nav-link:not(.active):focus-visible {
    color: var(--sky-white);
    background-color: var(--sky-nav-hover);
}

/* Leading icon and the group expand chevron follow the row rather than MudBlazor's
   --mud-palette-drawer-icon, so a row never splits into two different greys. */
.mud-drawer .mud-navmenu .mud-nav-link .mud-nav-link-icon,
.mud-drawer .mud-navmenu .mud-nav-link .mud-nav-link-expand-icon {
    color: inherit;
}

/* Active item: bright white on a brighter wash, and nothing else.
   The source site's `inset 3px 0` accent rail is deliberately NOT used — against a
   rounded, indented nav link it rendered as a curved gold bracket rather than a
   straight bar, which read as a glitch. Weight and brightness carry the state.

   The selector has to be this long. MudBlazor's own rule is
     .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled)
   at specificity (0,5,0), and it sets color:var(--mud-palette-primary) — which the
   palette remap above points at --sky-navy-2. That is dark blue text on a navy
   sidebar, which is why the active item was nearly invisible. A (0,3,0) selector
   loses to it outright; this one matches at (0,5,0) and wins on source order. */
.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: #ffffff;
    background-color: #ffffff2b;
}

/* Icon, chevron and label all follow the link colour rather than MudBlazor's palette. */
.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon,
.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-expand-icon,
.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root {
    color: #ffffff;
}

/* MudBlazor pins active weight with `font-weight:500 !important`, so this is the one
   place !important is unavoidable to go heavier. */
.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    font-weight: 600 !important;
}


/* ── Menu depth: type scale ──
   Level 1 (Home, Dashboard, Administration…) keeps the inherited size. Each level
   below steps down so depth is legible at a glance in a menu this deep.

   Sizes are `em` against the drawer's inherited size, NOT compounding: the values are
   set on .mud-nav-link itself, whose parent .mud-navmenu is left at the base size, so
   a level-3 link is one step down from level 1, not a step down from level 2. That
   also keeps the whole scale proportional to the user's font-size preference
   (FontSizeState applies a body `zoom`, so relative units follow it).

   The step is 1px per level: level 3 is where most real navigation targets live
   (Approval Chains, Custom Fields, Email Import Tasks…) and several already wrap to
   two lines, so a steeper ramp costs more legibility than the depth cue is worth.
   Level 4 holds at level 3's size rather than shrinking further. */
.mud-drawer .mud-nav-group .mud-navmenu .mud-nav-link {
    font-size: 0.93em;   /* level 2 — approx. -1px at the default size */
}

.mud-drawer .mud-nav-group .mud-navmenu .mud-nav-group .mud-navmenu .mud-nav-link {
    font-size: 0.86em;   /* level 3 — approx. -2px */
}

.mud-drawer .mud-nav-group .mud-navmenu .mud-nav-group .mud-navmenu .mud-nav-group .mud-navmenu .mud-nav-link {
    font-size: 0.86em;   /* level 4+ — floor, so deep branches stay readable */
}

/* Icons shrink with their row, otherwise a 20px icon next to 11px text looks wrong. */
.mud-drawer .mud-nav-group .mud-navmenu .mud-nav-link .mud-icon-root {
    font-size: 1.15em;
}

.mud-drawer .mud-nav-link .mud-nav-link-icon,
.mud-drawer .mud-nav-link .mud-icon-root {
    color: inherit;
}

/* No extra indent rule for nested groups: MudBlazor already steps them via
   padding-left (36/48/60/72px). Adding margin-left on top both double-indented them
   and widened the menu past the drawer, which is what produced the scrollbar. */

/* ── Drawer tab strip (Menu / Favorites / Phone) ──
   The icon strip was invisible because MudBlazor paints .mud-tabs-tabbar with
   --mud-palette-surface, which the palette remap above turned white — white icons on
   a white strip. (The class is .mud-tabs-tabbar; .mud-tabs-toolbar does not exist,
   which is why the first attempt at this rule never applied.) Blue bar, white icons. */
.mud-drawer .drawer-tabs .mud-tabs-tabbar {
    background-color: var(--sky-navy-2);
    border-bottom: 1px solid #ffffff1f;
}

.mud-drawer .drawer-tabs .mud-tab {
    color: #ffffffb8;
    min-width: 0;
    opacity: 1;
}

.mud-drawer .drawer-tabs .mud-tab:hover {
    color: var(--sky-white);
    background-color: #ffffff1f;
}

.mud-drawer .drawer-tabs .mud-tab.mud-tab-active {
    color: var(--sky-white);
}

/* Icons inherit rather than keeping MudBlazor's own colour. */
.mud-drawer .drawer-tabs .mud-tab .mud-icon-root {
    color: inherit;
}

.mud-drawer .drawer-tabs .mud-tab-slider {
    background-color: var(--sky-white);
}

/* ── Favorites and Tools panels ──
   These two tabs are hand-built markup rather than nav links, and they were written
   when the drawer was light: the favourite labels are hard-coded #212121 and the
   mini-widget headings #616161, both effectively invisible on navy. Every colour
   there is set through an inline style attribute, which outranks any selector, so
   these overrides need !important.

   Everything is scoped under .mud-drawer. CtrlMiniAppointments and
   CtrlMiniServiceTickets render only here today, but scoping means they stay correct
   if either is ever reused on a light background. */
.mud-drawer .mud-tabs-panels {
    color: var(--sky-white);
}

/* Favourite item labels.
   :not(.mud-nav-link) is load-bearing. The main menu is ALSO a tab panel, and
   MudNavLink renders an <a>, so without this exclusion the !important here repainted
   every leaf nav link pure white while group headers kept the idle colour — which is
   what made levels look mismatched by depth. Leaves and groups now agree. */
.mud-drawer .mud-tabs-panels a:not(.mud-nav-link) {
    color: var(--sky-white) !important;   /* inline: color:#212121 */
}

.mud-drawer .mud-tabs-panels a:not(.mud-nav-link):hover {
    text-decoration: underline;
}

/* Section headings in the Tools widgets ("Appointments", "Tickets"). .ctrl-mini-title
   is a styling hook added to those two components; it carries no styling of its own
   outside the drawer. */
.mud-drawer .ctrl-mini-title {
    color: var(--sky-white) !important;   /* inline: color:#616161 */
}

/* Row dividers in the Tools widgets are #eee, which glares against navy. The favourites list used
   to be caught by this too; its rows carry .favorite-row now and are handled just below. */
.mud-drawer .mud-tabs-panels [style*="border-bottom"] {
    border-bottom-color: #ffffff1f !important;
}

/* ── Favourite rows on navy ──
   app.css styles these for a light surface: an #f5f5f5 hover and an #e3f2fd drop target. Both are
   near-white, and the label above is painted white !important by this file, so on navy the hover
   turned the row into white-on-white and the row vanished while the pointer was on it.

   The hover colour is the tab strip's own --sky-navy-2, so hovering a favourite reads as the same
   material as the strip directly above it. --sky-blue is a step lighter again, which keeps the drop
   target distinct from whatever row the pointer is merely passing over. White text is legible on
   both. No !important needed anywhere here: every selector carries .mud-drawer on top of what
   app.css uses, and this file loads later. */
.mud-drawer .favorite-row {
    border-bottom-color: #ffffff1f;
}

.mud-drawer .favorite-row:hover {
    background-color: var(--sky-navy-2);
}

.mud-drawer .favorite-row.drag-over {
    background-color: var(--sky-blue);
    outline-color: var(--sky-white);
}

/* The dragged row fades to 0.4 opacity against navy, which is nearly the background. Lifted so it
   still reads as "this is the one moving" rather than as an empty gap. */
.mud-drawer .favorite-row.dragging {
    opacity: 0.6;
}

/* #9e9e9e is a light-background grey; this matches the idle tab label instead. */
.mud-drawer .favorite-reorder-hint {
    color: #ffffffb8;
}

/* Move up / move down / unpin buttons on each favourite. */
.mud-drawer .mud-tabs-panels .k-button-flat {
    color: #ffffffbf;
}

.mud-drawer .mud-tabs-panels .k-button-flat:hover {
    color: var(--sky-white);
    background-color: #ffffff1f;
}

/* Drawer scrollbar, so it doesn't read as a bright stripe against the navy. */
.mud-drawer ::-webkit-scrollbar {
    width: 8px;
}

.mud-drawer ::-webkit-scrollbar-thumb {
    background-color: #ffffff26;
    border-radius: 4px;
}

.mud-drawer ::-webkit-scrollbar-track {
    background-color: transparent;
}


/* ── 5. Top bar ─────────────────────────────────────────────────────────────────
   White bar, hairline bottom border, pill search. app.css already sets the
   background, layout and no-wrap behaviour of .redstone-appbar; these rules only
   restate the colours in token terms and restyle the search field. The !important
   flags mirror the ones already on those two declarations in app.css — same
   specificity, later file, so they are needed to win. */
.redstone-appbar {
    background-color: var(--sky-white) !important;
    color: var(--sky-ink) !important;
    border-bottom: 1px solid var(--sky-border);
    box-shadow: 0 1px 3px #0a22370f;
}

.redstone-appbar .k-button-flat {
    color: var(--sky-copy);
}

.redstone-appbar .k-button-flat:hover {
    background-color: var(--sky-blue-soft);
}

/* Breadcrumb trail. */
.redstone-appbar a {
    color: var(--sky-blue);
}

/* Search pill — the source site's .search: tinted fill, hairline border, rounded,
   with the border warming to the accent on focus. */
.appbar-search {
    background-color: var(--sky-paper);
    border: 1px solid var(--sky-border);
    border-radius: var(--sky-radius-sm);
    padding: 0 10px;
    height: 38px;
    transition: border-color 120ms ease, background-color 120ms ease;

    /* 33% wider than the 240px app.css sets. Both properties have to be restated:
       app.css pins width AND max-width, so raising one alone changes nothing.
       flex-shrink stays enabled (app.css: flex 0 1 auto) so the bar still collapses
       before the right-hand controls wrap on a narrow window. */
    width: 320px;
    max-width: 320px;
}

.appbar-search:focus-within {
    background-color: var(--sky-white);
    border-color: var(--sky-blue);
}

.appbar-search .k-svg-icon,
.appbar-search .k-icon {
    color: var(--sky-muted);
}

/* The Telerik textbox inside the pill loses its own chrome — the wrapper is the
   input now. Scoped to .appbar-search so no other TelerikTextBox is affected. */
.appbar-search .k-input,
.appbar-search .k-textbox {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    max-width: 100%;
}

.appbar-search .k-input:focus-within {
    box-shadow: none;
}

/* ── Presence control ──
   Groups the status dropdown, the elapsed timer and the status note into one rounded
   control matching the search pill, instead of three loose items on the bar.

   PresenceSelector.razor styles its three parts with inline style= attributes, and
   inline styles outrank any selector, so the overrides that have to beat them carry
   !important. Each one is marked below. The alternative was rewriting the component's
   inline styles, which would have put theme decisions outside this file. */
.presence-selector {
    gap: 0 !important;               /* inline: gap:12px — dividers replace the gap */
    height: 38px;
    padding: 0 4px 0 0;
    background-color: var(--sky-paper);
    border: 1px solid var(--sky-border);
    border-radius: var(--sky-radius-sm);
    transition: border-color 120ms ease, background-color 120ms ease;
}

.presence-selector:focus-within {
    background-color: var(--sky-white);
    border-color: var(--sky-blue);
}

/* The status dropdown is the left cap: transparent, no chrome of its own. */
.presence-selector .k-dropdownlist {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    border-radius: var(--sky-radius-sm) 0 0 var(--sky-radius-sm);
}

.presence-selector .k-dropdownlist:hover {
    background-color: #0a22370a;
}

/* Elapsed timer. The inline colour is #bdbdbd — set when this bar was dark, and now
   near-invisible on white. Tabular figures keep it from jittering as it counts. */
.presence-selector > span[title] {
    color: var(--sky-muted) !important;   /* inline: color:#bdbdbd */
    padding: 0 10px;
    border-left: 1px solid var(--sky-border);
    border-right: 1px solid var(--sky-border);
    line-height: 1.2;
}

/* Status note. The inline rule draws a dark underline (border-bottom 1px #555),
   which is redundant now that the whole group is a bordered control.
   The child combinator matters: TelerikDropDownList renders its own text input
   internally, and a descendant selector would resize and repad that too. */
.presence-selector > input[type="text"] {
    border-bottom: 0 !important;          /* inline: border-bottom:1px solid #555 */
    color: var(--sky-ink) !important;     /* inline: color:inherit */
    padding: 2px 10px !important;         /* inline: padding:2px 4px */
    width: 150px !important;              /* inline: width:160px — fits the padding */
}

.presence-selector > input[type="text"]::placeholder {
    color: var(--sky-muted);
}

/* ── User menu ──
   The account control becomes the third rounded pill on the bar, matching search and
   presence.

   The pill is drawn on a plain wrapper div (added in MainLayout.razor), NOT on the
   button. Three earlier attempts failed for one reason that took a while to find:
   Kendo ships

     .k-button.k-button-flat { background:none !important;
                               border-color:transparent !important;
                               box-shadow:none !important }

   so a flat Telerik button refuses a background no matter which class is targeted or
   how specific the selector is. The class hooks were probably landing correctly all
   along. An unstyled div has no competing rules, so the chrome goes there and the
   transparent button simply sits inside it. */
.redstone-appbar .user-menu-pill {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 4px 0 8px;
    background-color: var(--sky-paper);
    border: 1px solid var(--sky-border);
    border-radius: var(--sky-radius-sm);
    color: var(--sky-ink);
    transition: border-color 120ms ease, background-color 120ms ease;
}

.redstone-appbar .user-menu-pill:hover,
.redstone-appbar .user-menu-pill:focus-within {
    background-color: var(--sky-white);
    border-color: var(--sky-blue);
}

/* The person glyph reads as a label, not an action — same weight as the timer. */
.redstone-appbar .user-menu-pill .k-svg-icon,
.redstone-appbar .user-menu-pill .k-icon {
    color: var(--sky-muted);
}

/* Global search results panel, to match the new card chrome. */
.global-search-dropdown {
    border: 1px solid var(--sky-border);
    border-radius: var(--sky-radius);
    box-shadow: var(--sky-shadow);
}

.global-search-item:hover {
    background-color: var(--sky-blue-soft);
}

.global-search-type,
.global-search-id {
    color: var(--sky-muted);
}

/* Favourite star keeps the gold accent it already had, now from the token. */
.favorite-star-btn.favorited .k-icon,
.favorite-star-btn.favorited .k-svg-icon {
    color: var(--sky-gold);
}


/* ── Dashboard tiles ────────────────────────────────────────────────────────────
   Title bars use --sky-navy-2, the same blue as the drawer's tab strip, rather than
   the drawer's own --sky-navy: at full navy the headers read as heavy bands across a
   light page. app.css already defines every class used here; these rules only restate
   colour. */
.k-tilelayout-item-header.k-card-header,
.k-tilelayout-item-header {
    background-color: var(--sky-navy-2);
    color: var(--sky-white);
    border-bottom: 0;
}

.dashboard-tile-title {
    color: var(--sky-white);
}

/* Minimise / close controls. app.css colours these #1565c0, which is unreadable on
   navy; white at 75% keeps them present without competing with the title. */
.dashboard-tile-action {
    color: #ffffffbf;
}

.dashboard-tile-action:hover {
    color: var(--sky-white);
    background-color: #ffffff29;
}

/* Card body picks up the same hairline + radius as the rest of the surfaces. */
.k-tilelayout-item .k-card {
    border: 1px solid var(--sky-border);
    border-radius: var(--sky-radius);
    overflow: hidden;
}


/* ── Lead Manager › Metrics ─────────────────────────────────────────────────────
   The same six tiles as the Dashboard, so they get the same chrome. That tab builds
   its cards by hand in a plain CSS grid rather than a TelerikTileLayout — deliberately,
   since it is fixed and not draggable — so none of the .k-tilelayout-* rules above
   reach it and the values have to be restated here against its own hooks.

   Every declaration it overrides is an inline style attribute on the element, so these
   carry !important; the inline values are noted alongside and remain the unthemed
   fallback if this stylesheet is removed. */

/* Paper ground behind the tiles, matching the Dashboard page. */
.lm-metrics {
    background-color: var(--sky-paper);
}

.lm-metrics-tile {
    border: 1px solid var(--sky-border) !important;   /* inline: 1px solid #e0e0e0 */
    border-radius: var(--sky-radius) !important;      /* inline: 4px */
    box-shadow: var(--sky-shadow);
}

/* Title bar: identical treatment to .k-tilelayout-item-header above, so the two
   screens read as the same dashboard. Slightly more vertical padding than the inline
   8px to match the height Kendo's card header gives the Dashboard tiles. */
.lm-metrics-tile-header {
    padding: 10px 12px !important;                    /* inline: 8px 12px */
    background-color: var(--sky-navy-2);
    color: var(--sky-white) !important;               /* inline: #424242 */
    border-bottom: 0 !important;                      /* inline: 1px solid #eeeeee */
    font-size: 0.875rem !important;                   /* inline: 0.8rem */
}


/* ── Tab strips ─────────────────────────────────────────────────────────────────
   Every TelerikTabStrip in the app: the selected tab is a filled navy tab with white
   text, rather than Kendo's white tab with navy text.

   Stock Kendo paints the selected tab from --kendo-color-surface-alt (white) and
   colours its text with --kendo-color-primary, which the token block above already
   remapped to --sky-navy-2. So the selected tab was white-on-navy-text; this inverts
   the pair to navy-on-white-text and matches the filled Save button, which is
   MudBlazor primary and resolves to the same --sky-navy-2.

   The selector list mirrors Kendo's own, which is what sets the specificity to beat.
   Kendo declares the white in one group ending
     .k-tabstrip-items-wrapper .k-tabstrip-item.k-selected      (0,3,0)
   so anything less specific loses, and .k-tabstrip-item.k-active alone (0,2,0) does
   nothing. No !important is needed: this file is the last stylesheet in App.razor, so
   equal specificity resolves here.

   Kendo emits BOTH .k-active and .k-selected on tab items depending on the strip's
   state, and carries a legacy .k-item alongside .k-tabstrip-item, so all four
   combinations are listed. (An earlier drawer rule in this file learned the .k-item /
   .k-tabstrip-item distinction the hard way — see the login tab comment below.)

   Kendo's own hover rule sits at the same (0,3,0) and only changes colour, so it is
   outranked here by file order: hovering the selected tab keeps white on navy rather
   than flipping the text back to navy on navy.

   This reaches the login page's tab strip too - its rules just below only style the
   INACTIVE tabs, so the pair stays coherent. */
.k-tabstrip-items-wrapper .k-tabstrip-item.k-active,
.k-tabstrip-items-wrapper .k-tabstrip-item.k-selected,
.k-tabstrip-items-wrapper .k-item.k-active,
.k-tabstrip-items-wrapper .k-item.k-selected {
    background-color: var(--sky-navy-2);
    color: var(--sky-white);
}

/* Icons and close buttons inside the selected tab follow the text rather than keeping
   Kendo's own colour. */
.k-tabstrip-items-wrapper .k-tabstrip-item.k-active .k-icon,
.k-tabstrip-items-wrapper .k-tabstrip-item.k-active .k-svg-icon,
.k-tabstrip-items-wrapper .k-tabstrip-item.k-selected .k-icon,
.k-tabstrip-items-wrapper .k-tabstrip-item.k-selected .k-svg-icon {
    color: inherit;
}


/* ── Login page ─────────────────────────────────────────────────────────────────
   Brought onto the same ground, type and blue as the app behind it.

   Everything is scoped under .login-page for a specific reason: Login.razor renders
   its own Telerik <link> inside <HeadContent>, which HeadOutlet injects at the END of
   <head> — AFTER this stylesheet. On this one page source order favours Telerik, so
   the extra class is what keeps these rules winning on specificity. Do not simplify
   these selectors. */

/* The Sign In button, the Microsoft SSO button and the active tab all take their blue
   from the app-wide --kendo-color-primary override in the token block at the top of
   this file — there is no login-specific colour rule any more. An earlier attempt
   hand-wrote .k-button-solid-primary here and did nothing, because the class Kendo
   emits is .k-button-primary, and pinning a single shade would have left hover, active
   and tab-text on the old red regardless. */

/* Paper ground, matching the dashboard, with the form on a white card. */
.login-page .login-panel {
    background: var(--sky-paper) !important;   /* inline: background:#fff */
}

/* Kendo's k-p-10 left the logo and the Sign In button close to the card edge; this
   is roomier and keeps a little extra breathing space at the top for the mark. */
.login-page .login-card {
    padding: 40px 36px 36px !important;        /* Kendo utility: k-p-10 */
    background: var(--sky-white);
    border: 1px solid var(--sky-border);
    border-radius: var(--sky-radius);
    box-shadow: var(--sky-shadow);
}

/* Wordmark picks up the Georgia heading face used across the app. */
.login-page .login-wordmark {
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--sky-ink);
    letter-spacing: .2px;
}

/* Field labels and body copy in the app's ink/copy pair. */
.login-page .k-form-label,
.login-page .k-label {
    color: var(--sky-copy);
    font-weight: 600;
}

/* Tab headers. The inactive one joins the same family so the pair reads as one control
   instead of one blue tab beside one grey one. The class is .k-tabstrip-item — .k-item,
   used in an earlier attempt, is not what Kendo emits. */
/* The unselected tab sits on the same tinted fill as a section panel (--sky-blue-soft) rather than
   Kendo's white, so "Username & Password" and "Microsoft SSO" read as a pair of panels. The
   SELECTED one is overridden to navy further down, and that rule is a class more specific than this
   one, so it still wins. */
.login-page .k-tabstrip-items-wrapper .k-tabstrip-item {
    background-color: var(--sky-blue-soft);
    color: var(--sky-muted);
}

.login-page .k-tabstrip-items-wrapper .k-tabstrip-item:hover {
    color: var(--sky-navy-2);
}

/* The selected tab, restated for this page only: navy fill, white text, exactly as the
   app-wide rule above gives every other tab strip in the product.

   It has to be restated here because of the two things this file already warns about,
   which together defeated the global rule on this one page. Login.razor renders its own
   Telerik <link> in <HeadContent>, and HeadOutlet injects it AFTER this stylesheet, so
   Kendo's own (0,3,0) white-tab rule wins on source order here even though it loses
   everywhere else. And the muted colour directly above is (0,4,0) — it matches the
   selected tab too, so the title stayed grey regardless. Scoping under .login-page puts
   this at (0,5,0), which clears both, and the :hover rule above with it, so hovering the
   active tab no longer flips its text back to navy on navy. */
.login-page .k-tabstrip-items-wrapper .k-tabstrip-item.k-active,
.login-page .k-tabstrip-items-wrapper .k-tabstrip-item.k-selected,
.login-page .k-tabstrip-items-wrapper .k-item.k-active,
.login-page .k-tabstrip-items-wrapper .k-item.k-selected {
    background-color: var(--sky-navy-2);
    color: var(--sky-white);
}

/* The tab BODY carries the same tinted fill as the tab buttons above it and as a section panel
   (--sky-blue-soft), so the strip and its panel read as one surface with the selected tab the only
   thing standing out of it.

   Kendo paints this panel white by default, and Login.razor injects its own Telerik <link> after
   this stylesheet — the .login-page prefix is what wins that source-order fight, so keep the
   scope. */
/* BOTH selectors, because Kendo names this one element two ways and only one of them is on the
   element Telerik Blazor 15 actually renders. Kendo's own rule is
   `.k-tabstrip-content,.k-tabstrip>.k-content{...}` -- it paints whichever is present, so a rule
   that lists only .k-content (as this one first did) silently misses and the panel stays white.
   Beats Kendo on specificity either way: (0,3,0) and (0,2,0) against its (0,2,0) and (0,1,0). */
.login-page .k-tabstrip > .k-content,
.login-page .k-tabstrip-content {
    background: var(--sky-blue-soft);
    border-color: var(--sky-border);
}

/* Inputs sit on the card, so they carry the same hairline as everything else. */
.login-page .k-input,
.login-page .k-picker {
    border-color: var(--sky-border);
    border-radius: var(--sky-radius-sm);
}

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

/* Error message box in the palette's red rather than Kendo's default. */
.login-page .k-messagebox-error {
    background-color: var(--sky-red-soft);
    border-color: var(--sky-red);
    color: var(--sky-red);
}


/* ── Optional building blocks ───────────────────────────────────────────────────
   Ported from the source site but not yet used anywhere. Left here so the stat-tile
   and progress patterns are ready if the theme is kept — e.g. Lead Manager's Metrics
   tab already renders six fixed tiles that would take .sky-stat directly. Nothing
   below affects any existing page. */
.sky-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.sky-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: var(--sky-white);
    border: 1px solid var(--sky-border);
    border-radius: var(--sky-radius);
}

.sky-stat-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 41px;
    height: 41px;
    border-radius: 9px;
    font-weight: 900;
}

.sky-stat-icon.gold   { color: var(--sky-amber); background: var(--sky-amber-soft); }
.sky-stat-icon.blue   { color: #1473bb;          background: #e4f2ff; }
.sky-stat-icon.green  { color: var(--sky-green); background: var(--sky-green-soft); }
.sky-stat-icon.purple { color: #7459be;          background: #eee9ff; }

.sky-stat-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--sky-muted);
}

.sky-stat-value {
    display: inline-block;
    margin-top: 4px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 25px;
    color: var(--sky-ink);
}

.sky-stat-sub {
    display: block;
    font-size: 11px;
    color: var(--sky-muted);
}

.sky-progress {
    height: 4px;
    border-radius: 9px;
    background: #ebedf0;
}

.sky-progress > i {
    display: block;
    height: 100%;
    border-radius: 9px;
    background: var(--sky-gold);
}

.sky-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--sky-gold);
    color: var(--sky-navy);
    font-size: 12px;
    font-weight: 800;
}

/* ── Section panels ──
   app.css gives CtrlSectionPanel a tinted rounded card in MudBlazor blue. Restated here in tokens
   so the panels match the rest of the theme rather than dragging Material blue in underneath it --
   the same fill and hairline as the app-bar search pill, and the theme's own small radius.

   The heading rule is the theme's darkest ink short of the sidebar (--sky-navy-2) rather than the
   card hairline it started as: on a tinted card a --sky-border rule all but disappears, and the
   underline is what ties the title to the fields below it.

   The editors' summary bar rides on the same selector on purpose. It is meant to be the SAME
   surface as the sections below it, and app.css sets both to the same Material blue -- but a rule
   here for only one of them is what makes them drift: the themed panel lands on #eaf2f7 while the
   un-themed bar stays on app.css's lighter #f2f7fc, close enough to look like a mistake rather
   than a decision. Keep the two selectors together. */
.section-panel,
.entity-editor-summary {
    background: var(--sky-blue-soft);
    border-color: var(--sky-border);
    border-radius: var(--sky-radius-sm);
}

.section-panel-header {
    color: var(--sky-ink);
    border-bottom-color: var(--sky-navy-2);
}

/* The calendar's toolbar follows .section-panel onto the theme token for the same reason the
   summary bar does: left on app.css's lighter #f2f7fc it sits next to a themed panel and reads as
   a mistake rather than a decision. See the rule in app.css. */
.ctrl-owner-calendar .k-scheduler-toolbar {
    background-color: var(--sky-blue-soft);
}

/* The expander icon carries an inline colour from the component, which only !important reaches. */
.section-panel-header .mud-icon-root {
    color: var(--sky-blue) !important;
}