/* ============================================================================
   LyffeLab - brand tokens
   ----------------------------------------------------------------------------
   LyffeLab's look on SMART's own shell: black rail and hero, white header,
   the crimson #B11226 as the one accent, neutral greys, Bebas Neue headings,
   IBM Plex Sans body, IBM Plex Mono labels and buttons, square corners.

   Loaded by Components/Tenant/LyffeLab/ThemeComponent.razor AFTER the default
   portal theme (tenants/DataDrivenInc/ddi-theme.css), so SMART's layout and
   components stay exactly as they are: this file only re-sets the brand
   tokens that sheet reads, and repaints the few rules where it writes its
   green or its rounding as literal values. Only the LyffeLab tenant gets it.

   Contrast (WCAG 2.1): white on #B11226 7.0:1, white on #8E0E1E 9.4:1,
   #B11226 on white 7.0:1, #4D4D4D on white 8.5:1, #CCCCCC on black 13.1:1,
   #FF6B7D on black 7.7:1 - all AA for normal text.
   ============================================================================ */

html:root {
    --ll-crimson: #B11226;
    --ll-crimson-dark: #8E0E1E;
    --ll-crimson-light: #FF6B7D;
    --ll-crimson-rgb: 177, 18, 38;
    --ll-black: #000000;
    --ll-gray-1: #333333;
    --ll-gray-2: #4D4D4D;
    --ll-gray-3: #808080;
    --ll-gray-4: #CCCCCC;
    --ll-gray-5: #E6E6E6;
    --ll-gray-6: #F2F2F2;
    --ll-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --ll-head: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
    --ll-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

    /* the default theme's tokens, re-pointed at the brand */
    --ddi-green: var(--ll-crimson);
    --ddi-green-2: var(--ll-crimson);
    --ddi-green-dark: var(--ll-crimson-dark);
    --ddi-green-soft: var(--ll-gray-6);
    --ddi-green-light: var(--ll-crimson-light);
    --ddi-gold: var(--ll-crimson);
    --ddi-gold-light: var(--ll-crimson-light);
    --ddi-graphite: var(--ll-black);
    --ddi-graphite-2: var(--ll-black);
    --ddi-night: var(--ll-black);
    --ddi-ink: var(--ll-black);
    --ddi-body: var(--ll-gray-1);
    --ddi-muted: var(--ll-gray-2);
    --ddi-line: var(--ll-gray-5);
    --ddi-canvas: var(--ll-gray-6);
    --ddi-font: var(--ll-sans);
    /* Bebas Neue is a display face with one weight: only the big titles get it (see "typography" below). Every
       other heading - card and section titles, form labels, stat values - is Plex Sans semibold, so no small text
       is set in a synthetic-bold condensed face. */
    --ddi-head: var(--ll-sans);

    /* MudBlazor's palette */
    --mud-palette-primary-rgb: var(--ll-crimson-rgb);
    --mud-palette-primary-hover: rgba(var(--ll-crimson-rgb), .06);
    --mud-palette-secondary-rgb: var(--ll-crimson-rgb);
    --mud-palette-info-rgb: var(--ll-crimson-rgb);
    --mud-palette-text-primary: var(--ll-gray-1);
    --mud-palette-text-secondary: var(--ll-gray-2);
    --mud-typography-default-family: var(--ll-sans);
    --mud-default-borderradius: 0px;

    /* the shared shell */
    --mud-nav-item-text-color: var(--ll-gray-4);
    --mud-nav-item-hover-color: rgba(255, 255, 255, .08);
    --mud-nav-item-active-color: var(--ll-crimson);
    --spacing-between-menu-and-header-color: var(--ll-gray-5);

    /* semantic colours, AA (WCAG 2.1): white on error #C62828 5.6:1 (and #C62828 on white 5.6:1, on its soft tint
       4.8:1), white on success #1B7F4B 5.0:1, black on warning #FFB300 11.7:1, white on info #333333 12.6:1. Info is
       neutral, so crimson stays the one accent and an error never looks like a notice. */
    --mud-palette-error: #C62828;
    --mud-palette-error-rgb: 198, 40, 40;
    --mud-palette-error-darken: #A31F1F;
    --mud-palette-error-lighten: #E05555;
    --mud-palette-error-text: #FFFFFF;
    --mud-palette-error-hover: rgba(198, 40, 40, .06);
    --mud-palette-success: #1B7F4B;
    --mud-palette-success-rgb: 27, 127, 75;
    --mud-palette-success-darken: #15663C;
    --mud-palette-success-text: #FFFFFF;
    --mud-palette-warning: #FFB300;
    --mud-palette-warning-rgb: 255, 179, 0;
    --mud-palette-warning-darken: #E0A000;
    --mud-palette-warning-text: #000000;
    --mud-palette-info: #333333;
    --mud-palette-info-rgb: 51, 51, 51;
    --mud-palette-info-darken: #1A1A1A;
    --mud-palette-info-lighten: #4D4D4D;
    --mud-palette-info-text: #FFFFFF;
    --app-danger: #C62828;
    --app-warn: #8A5100;          /* on its #FFF4E0 tint 5.9:1 */
    --app-ink-faint: #6B6B6B;     /* empty-state text, on white 5.3:1 */

    /* the page kit (portal.css): cards, controls, badges */
    --app-radius-control: 0;
    --app-radius-card: 0;
    --app-radius-pill: 0;
    --app-font: var(--ll-sans);
    --app-font-head: var(--ll-sans);

    /* the chat */
    --dac-radius: 0;
}

::selection {
    background: rgba(var(--ll-crimson-rgb), .16);
}

/* ------------------------------------------------------------ typography */

/* The display face: page titles, the account name, the home and sign-in headlines - big text only.
   Bebas Neue has one weight: never bold (no synthetic bold), a touch of tracking instead. */
.mud-typography-h1,
.mud-typography-h2,
#main-content .mud-typography-h2,
.po-hero-title,
.acct-hero-name,
.login-page .mud-typography-h2,
.ddi-home-hero h1,
.ll-login-hero h1 {
    font-family: var(--ll-head) !important;
    font-weight: 400 !important;
    font-synthesis: none;
    letter-spacing: .02em !important;
}

#main-content .mud-typography-h2 {
    font-size: 1.9rem !important;
}

.po-hero-title {
    font-size: 2rem !important;
    line-height: 1.05 !important;
}

.acct-hero-name {
    font-size: 1.75rem !important;
    line-height: 1.05 !important;
}

/* every other heading: Plex Sans semibold, sentence case, no tracking */
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6,
#main-content .mud-typography-h4,
#main-content .mud-typography-h6,
.ddi-home-tile__title,
.ddi-home-ai h2 {
    font-family: var(--ll-sans) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

#main-content .mud-typography-h4 {
    font-size: 1.4rem !important;
}

#main-content .mud-typography-h6,
.ddi-home-tile__title {
    font-size: 1.05rem !important;
}

/* the page tours write their own Poppins / Inter */
.tour-root,
.tour-root * {
    font-family: var(--ll-sans) !important;
}

/* buttons and tabs: Plex Sans semibold caps, lightly tracked (mono at button size read as a typewriter) */
.mud-button-root.mud-button,
.mud-tab {
    font-family: var(--ll-sans) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
}

.mud-tab {
    font-size: .85rem !important;
}

/* small labels and eyebrows: mono, upper case, letter-spaced */
.ddi-home-hero__eyebrow,
.ddi-home-section,
.sm-crumbs,
.mud-chip:not(.pl-starter) .mud-chip-content {
    font-family: var(--ll-mono) !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
}

/* grid column titles: small Plex Sans semibold caps, lightly tracked */
#main-content .mud-table-root .mud-table-head .mud-table-cell {
    font-family: var(--ll-sans) !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.mud-button-root.mud-button {
    font-size: .8rem !important;
}

.ddi-home-hero__eyebrow {
    color: var(--ll-crimson-light);
}

.ddi-home-section {
    color: var(--ll-crimson);
}

/* ---------------------------------------------------------------- corners */

.mud-button-root.mud-button,
#main-content .mud-icon-button.mud-button-filled,
.top-header .mud-icon-button,
.mud-input.mud-input-outlined .mud-input-outlined-border,
.mud-input.mud-input-filled,
.mud-chip,
.mud-paper:not(.mud-paper-square),
.mud-card,
.mud-alert,
.mud-snackbar,
.mud-dialog,
.mud-popover,
.mud-tooltip,
#main-content .app-card,
#main-content .po-grid-list,
.po-hero-icon,
.left-menu-drawer .mud-navmenu .mud-nav-link,
.left-menu-drawer .mud-nav-item .mud-nav-link.active,
.left-menu-drawer .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled),
.left-menu-drawer .is-menu-alias .mud-nav-link:not(.mud-nav-link-disabled),
.left-menu-drawer .search-input,
.ddi-home-hero,
.ddi-home-tile,
.ddi-home-tile__icon,
.ddi-home-ai,
.ddi-home-ai__badge,
.ddi-login-hero,
.dac__composer,
.dac__suggestion,
.dac__msg--user .dac__msg-body,
.adv__lineup,
.adv-notice,
/* menus, dialogs, tooltips */
.mud-menu .mud-list,
.mud-list-item,
.mud-dialog .mud-dialog-content,
.sm-tip,
.sm-confirm-icon,
/* the page kit and the management pages (Plugins: stat tiles, badges, tags, chips) */
.app-badge,
.app-kpi,
.po-stat,
.po-tag,
.po-chip,
.po-choice,
.po-seg,
.po-seg-item,
.po-picked,
.po-empty,
.po-warn,
.po-inline-note,
.po-drop-body,
.po-table-wrap,
.po-actionbar,
.pol-bulk,
.pc-chip,
.seg-count,
.color-field-swatch,
.color-field-text,
.org-image-frame,
.nav-user-card,
.nav-user-logout button,
.nav-user-avatar,
.acct-avatar,
.acct-hero,
.acct-nav-link,
.acct-nav .mud-nav-link,
.acct-main .mud-field .mud-input-filled,
.report-toolbar-icon,
.report-toolbar-actions .mud-icon-button.mud-button-filled,
/* the advisor chat: avatars, chips, thumbnails, lightbox, picker, history, cost pills */
.adv-avatar,
.adv-avatar img,
.adv-chip,
.adv-chip__thumb,
.adv-thumb,
.adv-cost,
.adv-code-copy,
.adv-progress__image,
.adv__drop,
.adv-lightbox__frame,
.adv-lightbox__close,
.adv-picker__item,
.adv-picker__tag,
.adv-history__item,
.dac__badge,
.dac__usage,
.dac__followup,
.dac__jump,
.dac__send.mud-icon-button,
.dac__settings-item,
.dac__welcome-badge,
.dac__msg-author-icon,
.dac__msg-body pre,
.dac__msg-body code,
.dac__hint kbd,
.dac__context-picker .mud-input.mud-input-outlined .mud-input-outlined-border,
.dac__context-picker .mud-input.mud-input-outlined.mud-input-adorned-start,
.pbi-chat-dock,
.pbi-chat-snap-preview,
.dac--page,
.sm-crumbs__home,
.sm-crumbs__link,
.sm-crumbs__current,
.pl-icon,
.pl-pre,
.mud-checkbox .mud-button-root,
.chat-fab-button,
.mud-fab,
/* the sign-in panel */
.ll-login-hero .ddi-login-hero__eyebrow::before {
    border-radius: 0 !important;
}

/* --------------------------------------------------------------- header */

.top-header .mud-icon-button:hover {
    background-color: rgba(var(--ll-crimson-rgb), .08);
}

/* ------------------------------------------------------------- left rail */

.mud-drawer.left-menu-drawer {
    background: var(--ll-black) !important;
}

.left-menu-drawer .mud-nav-group > .mud-nav-link .mud-nav-link-text {
    color: #FFFFFF !important;
}

/* the open page: a solid crimson bar, white text and icon */
.left-menu-drawer .mud-nav-item .mud-nav-link.active,
.left-menu-drawer .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled),
.left-menu-drawer .is-menu-alias .mud-nav-link:not(.mud-nav-link-disabled) {
    background: var(--ll-crimson) !important;
    box-shadow: none !important;
}

.left-menu-drawer .mud-nav-item .mud-nav-link.active .mud-nav-link-icon,
.left-menu-drawer .is-menu-alias .mud-nav-link .mud-nav-link-icon {
    color: #FFFFFF !important;
}

.left-menu-drawer .search-input:focus-within {
    border-color: var(--ll-crimson-light);
}

/* ---------------------------------------------------------- page content */

#main-content .po-grid-list,
#main-content .app-card {
    border-color: var(--ll-gray-4);
    box-shadow: none;
}

.po-hero-icon {
    background: var(--ll-gray-6) !important;
    border-color: var(--ll-gray-4) !important;
    box-shadow: none;
}

/* ---------------------------------------------------------------- buttons */

.mud-button-filled.mud-button-filled-primary,
.mud-button-filled.mud-button-filled-primary:hover {
    box-shadow: none !important;
}

.mud-button-outlined.mud-button-outlined-primary {
    border-color: var(--ll-crimson);
}

.mud-button-outlined.mud-button-outlined-primary:hover {
    background: rgba(var(--ll-crimson-rgb), .06);
}

/* ------------------------------------------------------------------- grids */

#main-content .mud-table-root .mud-table-head .mud-table-cell {
    background: var(--ll-gray-6);
    color: var(--ll-gray-2);
}

#main-content .mud-table-hover .mud-table-body .mud-table-row:hover {
    background-color: rgba(var(--ll-crimson-rgb), .04) !important;
}

/* -------------------------------------------------------------------- home */

.ddi-home-hero {
    background: var(--ll-black);
    box-shadow: none;
    color: var(--ll-gray-4);
}

.ddi-home-hero__eyebrow::before {
    border-radius: 0;
}

.ddi-home-tile {
    border-color: var(--ll-gray-4);
}

.ddi-home-tile:hover {
    border-color: var(--ll-black);
    box-shadow: none;
}

.ddi-home-tile__icon {
    background: var(--ll-gray-6);
    border-color: var(--ll-gray-4);
}

/* ------------------------------------------------------------- sign-in page */

/* SMART's sign-in form (login.css) rounds its fields and buttons with !important: square them here */
html .login-main .form-horizontal .mud-button-root,
html .login-main .login-cta.mud-button-root,
html .login-main .mud-card-actions .mud-button-root,
html .login-main .mud-input.mud-input-underline {
    border-radius: 0 !important;
}

.ddi-login-hero {
    background: var(--ll-black);
}

/* LyffeLab's own panel (Tenant/LyffeLab/LoginHeroComponent): the wordmark, mono eyebrow, Bebas headline */
.ll-login-hero {
    color: var(--ll-gray-4);
    border-left: 6px solid var(--ll-crimson);
}

.ll-login-hero .ddi-login-hero__brand svg {
    width: auto;
    height: 34px;
}

.ll-login-hero .ddi-login-hero__eyebrow {
    font-family: var(--ll-mono);
    font-weight: 500;
    color: var(--ll-crimson-light);
}

.ll-login-hero h1 {
    font-size: clamp(44px, 5vw, 76px);
    line-height: .95;
    font-weight: 400;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.ll-login-hero h1 em {
    color: var(--ll-crimson-light);
}

.ll-login-hero .ddi-login-hero__facts dt,
.ll-login-hero .ddi-login-hero__foot {
    font-family: var(--ll-mono);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ------------------------------------------------------- semantic colours */

.text-danger,
.validation-message {
    color: var(--mud-palette-error) !important;
}

/* the info snackbar: neutral fill, the brand's crimson as a thin edge */
.mud-snackbar.mud-alert-filled-info {
    border-left: 4px solid var(--ll-crimson);
}

/* ------------------------------------------------------------ code, mono */

code,
kbd,
samp,
.pl-pre,
.pl-sha,
.dac__msg-body pre,
.dac__msg-body code {
    font-family: var(--ll-mono) !important;
}

code,
.pl-sha {
    color: var(--ll-gray-1) !important;
    background: var(--ll-gray-6);
    padding: 0 .25em;
}

/* ---------------------------------------------------------- keyboard focus */

/* One square 2 px ring, outside the control: crimson on white 7.0:1 (also around a crimson button, through the white
   gap), the light crimson on the black rail 7.7:1. */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-tab:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.adv :focus-visible:not(textarea) {
    outline: 2px solid var(--ll-crimson) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

.left-menu-drawer :focus-visible,
.ll-login-hero :focus-visible {
    outline-color: var(--ll-crimson-light) !important;
}

/* the chat composer: one ring, no halo */
.dac__composer:focus-within {
    border-color: var(--ll-crimson);
    box-shadow: 0 0 0 1px var(--ll-crimson);
}

/* ------------------------------------------------------------ small texts */

.ll-login-hero .ddi-login-hero__foot {
    color: #8C8C8C;               /* on black 6.3:1 */
}

/* sign-in on a phone: the snackbar goes to the bottom, clear of the wordmark and the heading */
@media (max-width: 600px) {
    body:has(.login-page) .mud-snackbar-location-top-right,
    body:has(.login-page) .mud-snackbar-location-top-center,
    body:has(.login-page) .mud-snackbar-location-top-left {
        top: auto !important;
        bottom: 16px !important;
    }
}

/* starter questions are sentences the user may ask: body font, sentence case (not the mono label style) */
html .mud-chip.pl-starter,
html .mud-chip.pl-starter .mud-chip-content {
    font-family: var(--ll-sans) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}