/* ============================================================================
   AIS Client Hub - portal theme
   ----------------------------------------------------------------------------
   DataDrivenInc's shell (tenants/DataDrivenInc/ddi-theme.css) in the AIS brand:
   the aubergine rail, AIS blue as the one accent, light sky blue for the active
   icon on the rail, Montserrat headings over Inter - the tokens of the hub's
   own pages (StaticPages/ais-hub/hub.css), so the shell and the pages read as
   one product.

   Loaded by Components/Tenant/AISClientHub/ThemeComponent.razor right after
   ddi-theme.css: it re-points that file's custom properties (on html:root, so
   they win over the organization's stored colours as well) and restates only
   the rules whose colours ddi-theme.css writes literally. Only the AIS Client
   Hub tenant gets this file.
   ============================================================================ */

html:root {
    --ddi-green: #3F6FB0;
    --ddi-green-2: #4F86E8;
    --ddi-green-dark: #2D5AA0;
    --ddi-green-soft: #EDF2FA;
    --ddi-green-light: #8DB4F2;
    --ddi-gold: #8DB4F2;
    --ddi-gold-light: #B9D1F7;
    --ddi-graphite: #2D2640;
    --ddi-graphite-2: #252038;
    --ddi-night: #1D1830;
    --ddi-ink: #14122E;
    --ddi-body: #33364D;
    --ddi-muted: #5E6378;
    --ddi-line: #E6E7EF;
    --ddi-canvas: #F6F7FB;
    --ddi-font: Inter, "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --ddi-head: Montserrat, Inter, system-ui, sans-serif;

    --mud-palette-primary-rgb: 63, 111, 176;
    --mud-palette-primary-hover: rgba(63, 111, 176, .06);
    --mud-palette-secondary-rgb: 63, 111, 176;
    --mud-palette-info-rgb: 63, 111, 176;

    --mud-nav-item-text-color: #C4C0D6;
    --mud-nav-item-active-color: rgba(79, 134, 232, .22);
}

::selection {
    background: rgba(63, 111, 176, .18);
}

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

.top-header,
.app-boot-header {
    box-shadow: 0 10px 30px -24px rgba(20, 18, 46, .5);
}

.top-header .mud-icon-button:hover {
    background-color: rgba(63, 111, 176, .08);
}

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

.mud-drawer.left-menu-drawer {
    background:
        radial-gradient(420px 300px at 0% 0%, rgba(79, 134, 232, .16), transparent 70%),
        linear-gradient(180deg, var(--ddi-graphite) 0%, var(--ddi-graphite-2) 55%, var(--ddi-night) 100%) !important;
}

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

/* the open page: an AIS-blue pill with a sky 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: linear-gradient(90deg, rgba(79, 134, 232, .34), rgba(79, 134, 232, .08)) !important;
    box-shadow: inset 0 0 0 1px rgba(141, 180, 242, .14) !important;
}

.left-menu-drawer .search-input-container::before {
    background: linear-gradient(to top, var(--ddi-night), rgba(29, 24, 48, 0));
}

.left-menu-drawer .search-input:focus-within {
    border-color: rgba(141, 180, 242, .55);
}

.left-menu-drawer .search-input input::placeholder,
.left-menu-drawer .search-input .mud-icon-root {
    color: #A29DBA;
}

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

.po-hero-icon {
    background: linear-gradient(145deg, #F3F7FD, #E1EAF7) !important;
    border-color: #C6D5EC !important;
    box-shadow: 0 6px 14px -10px rgba(63, 111, 176, .55);
}

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

.mud-button-filled.mud-button-filled-primary {
    box-shadow: 0 8px 18px -10px rgba(63, 111, 176, .8) !important;
}

.mud-button-filled.mud-button-filled-primary:hover {
    box-shadow: 0 12px 24px -10px rgba(63, 111, 176, .85) !important;
}

.mud-button-outlined.mud-button-outlined-primary {
    border-color: #C6D5EC;
}

.mud-button-outlined.mud-button-outlined-primary:hover {
    background: rgba(63, 111, 176, .06);
}

#main-content .mud-icon-button.mud-button-filled {
    box-shadow: 0 8px 18px -10px rgba(20, 18, 46, .6);
}

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

#main-content .mud-table-root .mud-table-head .mud-table-cell {
    background: #F8F8FC;
}

#main-content .mud-table-hover .mud-table-body .mud-table-row:hover {
    background-color: rgba(63, 111, 176, .05) !important;
}

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

.ddi-home-hero {
    background:
        radial-gradient(520px 260px at 100% 0%, rgba(79, 134, 232, .26), transparent 70%),
        linear-gradient(135deg, var(--ddi-graphite) 0%, var(--ddi-graphite-2) 60%, var(--ddi-night) 100%);
}

.ddi-home-tile:hover {
    border-color: #C6D5EC;
    box-shadow: 0 14px 28px -20px rgba(63, 111, 176, .55);
}

.ddi-home-tile__icon {
    background: linear-gradient(145deg, #F3F7FD, #E1EAF7);
    border-color: #C6D5EC;
}

/* ------------------------------------------------------------- login page */
/* Tenant/AISClientHub/LoginHeroComponent: ddi-theme.css's brand panel in the AIS deck's aubergine and indigo,
   the AIS mark and the hub's name for the wordmark, "in partnership with DataDrivenInc" under it. */

.ais-hub-hero.ddi-login-hero {
    color: #B9B4CF;
    background:
        radial-gradient(760px 460px at 100% 0%, rgba(79, 134, 232, .30), transparent 62%),
        radial-gradient(760px 520px at 0% 100%, rgba(32, 26, 92, .55), transparent 60%),
        linear-gradient(160deg, #2D2640 0%, #1D1830 62%, #07061F 100%);
}

.ais-hub-hero .ddi-login-hero__brand {
    gap: 14px;
}

.ais-hub-hero .ddi-login-hero__brand img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .10), 0 10px 24px -12px rgba(0, 0, 0, .7);
}

.ais-hub-hero .ais-hub-hero__name {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1;
}

.ais-hub-hero .ais-hub-hero__name b {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.ais-hub-hero .ais-hub-hero__name small {
    font-family: var(--ddi-font);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .16em;
    color: #8DB4F2;
}

.ais-hub-hero .ddi-login-hero__eyebrow,
.ais-hub-hero p,
.ais-hub-hero .ddi-login-hero__facts dd {
    color: #B9B4CF;
}

.ais-hub-hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg, #B9D1F7, #8DB4F2 40%, #4F86E8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ais-hub-hero .ddi-login-hero__facts {
    border-top-color: rgba(255, 255, 255, .10);
}

.ais-hub-hero .ddi-login-hero__foot,
.ais-hub-hero .ddi-login-hero__foot svg {
    color: #9D97B8;
    fill: #9D97B8;
}

/* "in partnership with DataDrivenInc": a quiet pill, the partner named in white */
.ais-hub-hero .ais-hub-hero__partner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 22px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    font-size: 12px;
    letter-spacing: .02em;
    color: #B9B4CF;
}

.ais-hub-hero .ais-hub-hero__partner b {
    font-weight: 600;
    color: #fff;
}

.ais-hub-hero .ddi-login-hero__art .line-green { stroke: #4F86E8; }
.ais-hub-hero .ddi-login-hero__art .line-gold { stroke: #8DB4F2; }
.ais-hub-hero .ddi-login-hero__art .area { fill: url(#ais-hub-hero-fade); }

/* the form beside it: Montserrat title, the AIS blue link colour */
.login-page .login-main a {
    color: var(--ddi-green-dark);
}