/* Magellan overrides
   Magellan-only rules on top of the shared Helix theme (Muhdo.Common.Blazor muhdo-theme.css). Linked after
   muhdo-theme.css, muhdo-controls.css, app.css and components.css in index.html, so ties at equal specificity go
   to these rules.
-------------------------------------------------- */

/* Tables - the shared theme has no table styles. Cells show the surface behind them rather than Bootstrap's body
   colour, and header cells take the look of the Helix list header row (Helix app.css .header-row).
-------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
}

.table > thead th {
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ink-400);
    background-color: transparent;
    border-bottom: 1px solid var(--line-200);
}

/* Buttons in a list header row (shared theme .header-row) keep their own lettering */
.header-row .btn {
    text-transform: none;
    letter-spacing: normal;
}

/* Cards - Bootstrap sets --bs-card-bg on .card itself, which overrides the shared theme's :root value, so a card
   with no .card-body would show the page background. Magellan has such cards (order sections, some lists).
-------------------------------------------------- */
.card { --bs-card-bg: var(--surface); }

/* Stacked cards - a card inside a card, which the shared theme draws flat, and the section cards of the order drawers
   (UpsertOrderDrawerComponent, PartnerOrderDrawerComponent, CreateOrderDrawerComponent) take a bottom margin that
   keeps the stacked sections apart
-------------------------------------------------- */
.card .card,
:is(#order-drawer-body, #partner-order-drawer-body, #create-order-drawer-body) .card { margin-bottom: 1.5rem; }

/* Order drawers (UpsertOrderDrawerComponent, PartnerOrderDrawerComponent, CreateOrderDrawerComponent) - wider than
   the shared wide drawer, so that the order and its side column sit side by side
-------------------------------------------------- */
.drawer:has(#order-drawer-body, #partner-order-drawer-body, #create-order-drawer-body) { width: min(1280px, 96vw); }

/* Drawers over an order drawer - the drawers each order drawer opens are rendered after it and are narrower, so they
   and their backdrops go above it, and the backdrop then covers the part of the order drawer they leave uncovered
-------------------------------------------------- */
.drawer:has(#order-drawer-body, #partner-order-drawer-body, #create-order-drawer-body) ~ :is(.drawer-backdrop, .drawer) { z-index: 1047; }

/* Management cards (Users, Custom Reports, Fulfilment Partners, Product Groups, Warehouses) - the hover ring from
   Helix theme.css .org-card, which the shared theme does not carry
-------------------------------------------------- */
.org-card { transition: border-color .12s, box-shadow .12s; }
.org-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); }

/* Copy icon (CopyTextComponent) - app.css shows it on hover only, and touch screens cannot hover
-------------------------------------------------- */
@media (hover: none) {
    .copy-icon { opacity: 1; }
}

/* Font size helper - the shared theme has .font-20 and .font-24 only
-------------------------------------------------- */
.font-14 { font-size: 14px; }

/* Layout shell - the shared Helix shell (Muhdo.Common.Blazor muhdo-shell.css) in Magellan's colours: the green
   navigation rail with its dark brand band, and the mint top bar with grey text, a white Settings pill and an indigo
   hover. The rail goes off-canvas below 1400px, as in Helix.
-------------------------------------------------- */
:root {
    --nav-bg:               linear-gradient(180deg, #0d3f32 0%, #23a988 100%);
    --nav-link:             #d7d7d7;
    --sidebar-fg:           #ffffff;
    --nav-hover-bg:         rgba(255, 255, 255, .10);
    --nav-active-bg:        rgba(255, 255, 255, .37);
    --nav-active-fg:        #ffffff;
    --nav-active-bar-width: 0;
    --nav-active-radius:    9px;
    --nav-brand-bg:         rgba(0, 0, 0, .40);

    --topbar-bg:            #e7faf5;
    --topbar-bg-sm:         #e7faf5;
    --topbar-line:          #d6d5d5;
    --topbar-line-sm:       #d6d5d5;
    --topbar-shadow:        none;
    --topbar-fg:            #6c757d;
    --topbar-ink-900:       #6c757d;
    --topbar-ink-600:       #6c757d;
    --topbar-ink-500:       #6c757d;
    --topbar-ink-400:       #6c757d;
    --topbar-ink-sm:        #6c757d;
    --topbar-accent:        #6169d0;
    --topbar-accent-tint:   rgba(114, 124, 245, .10);
    --topbar-pill-bg:       #ffffff;
    --topbar-pill-line:     #d6d5d5;
}

/* The brand band runs the full width of the rail, as tall as the top bar, with no hairline; the rail has no edge line */
.leftside-menu {
    padding-top: 0;
    border-right: 0;
}

.leftside-menu .logo-topbar {
    display: flex;
    align-items: center;
    min-height: var(--topbar-h);
    padding: 0 22px;
    border-bottom: 0;
}

.leftside-menu .logo-topbar a {
    color: var(--sidebar-fg);
    font-size: 1.1rem;
}

/* Hovering the current page's item shows the hover fill, as before */
.side-nav-link.active:hover {
    background: var(--nav-hover-bg);
}

/* The Settings pill holds one button, so its hover fill rounds all four corners to fit inside the pill */
.topbar-action:only-child {
    border-radius: calc(var(--r-md) - 1px);
}

/* The signed-in user's name is plain text (Helix links it to the profile page), so it keeps its colour on hover */
.navbar-custom .nav-user span.tb-name:hover {
    color: var(--topbar-ink-900);
}

/* The signed-in user block inside the rail, below 1400px: the shield icon in white on the green */
.leftside-menu .nav-user {
    color: var(--sidebar-fg);
}

/* Sign-in pages (ExternalLayout) - Helix's mint-topped card, carrying the Magellan wordmark, over Magellan's photo
   (app.css .external-container)
-------------------------------------------------- */
.auth-card {
    background: linear-gradient(180deg, #e7faf5, var(--surface) 55%);
}

.auth-wordmark {
    color: #0d3f32;
    font-size: 1.5rem;
    font-weight: 700;
}