/* =========================================================================
   Customer portal (/c/) page-title glyph.

   The dark-blue rounded-square icon box that sits to the LEFT of a page
   title, matching the /e/ frosted listing hero glyph
   (.frosted-listing .page-head-hero .glyph in frosted-listing.css).

   The gradient is hardcoded to the same brand navy as the /e/ hero on
   purpose: this is the "app chrome" blue, not a per-org themed accent, so
   both sides stay identical regardless of an org's theme settings.

   Markup: {% include '_partials/_page_glyph.html.twig' with {icon: 'receipt'} only %}
   ========================================================================= */
.c-page-glyph {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    background: linear-gradient(135deg, #2674a6, #112a54);
    box-shadow: 0 8px 20px rgba(38, 116, 166, 0.4);
}

/* =========================================================================
   Customer portal icon tiles — ALL icon tiles on /c/ pages use the /e/ hero
   glyph treatment (owner decision 2026-07-16): brand navy gradient, white
   glyph, soft blue glow. body.customer-portal is set by
   sas_customer_turbo_base.html.twig.
   ========================================================================= */

/* bit-card header icons (any variant) — out-specifies bit_card.css's
   !important variant rule via the body-class prefix */
.customer-portal .card.bit-card .card-icon-header .icon[class*="bit-card-icon-"],
.customer-portal .card-icon-header .icon {
    background: linear-gradient(135deg, #2674a6, #112a54) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(38, 116, 166, 0.4);
}

/* Hero-sized tiles (owner: match the /e/ listing hero, see 3.png) — the
   glyph is 54px/16px-radius, so the panel headers grow taller with it */
.customer-portal .card-icon-header,
.customer-portal .card.bit-card .card-icon-header {
    padding: 12px 16px;
}
.customer-portal .card-icon-header .icon,
.customer-portal .card.bit-card .card-icon-header .icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    font-size: 1.5rem;
    margin-right: 14px;
}
/* Title scales up beside the bigger glyph (out-!importants bit-card-refresh) */
.customer-portal .card.bit-card .card-icon-header .content h1,
.customer-portal .card.bit-card .card-icon-header .content h2,
.customer-portal .card.bit-card .card-icon-header .content h3,
.customer-portal .card.bit-card .card-icon-header .content h4,
.customer-portal .card.bit-card .card-icon-header .content h5,
.customer-portal .card.bit-card .card-icon-header .content h6 {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}

/* ---- /c/ DASHBOARD exception (owner decision; mockup
   c-dashboard-redesign.html) ----
   Dashboard panels use the mockup's compact soft-tint tiles (34px, pastel
   background, colored glyph), NOT the navy hero glyphs used on the rest of
   /c/. Scoped to .c-dashboard (set on the dashboard's container div); these
   rules come after the hero-size block above so they win the cascade. */
.customer-portal .c-dashboard .card-icon-header,
.customer-portal .c-dashboard .card.bit-card .card-icon-header {
    padding: 10px 14px;
}
.customer-portal .c-dashboard .card-icon-header .icon,
.customer-portal .c-dashboard .card.bit-card .card-icon-header .icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 1rem;
    margin-right: 10px;
    box-shadow: none;
}
/* Soft tints per the mockup (.ic.blue / .ic.green / amber): blue default,
   variant-specific below */
.customer-portal .c-dashboard .card.bit-card .card-icon-header .icon[class*="bit-card-icon-"] {
    background: #e8f0fb !important;
    color: #2f72d8 !important;
}
.customer-portal .c-dashboard .card.bit-card .card-icon-header .icon.bit-card-icon-success {
    background: #e8f6ee !important;
    color: #2e9e5b !important;
}
.customer-portal .c-dashboard .card.bit-card .card-icon-header .icon.bit-card-icon-warning {
    background: #fdf3e0 !important;
    color: #e0a32e !important;
}
/* Titles back to the mockup's compact 1rem/700 */
.customer-portal .c-dashboard .card.bit-card .card-icon-header .content h1,
.customer-portal .c-dashboard .card.bit-card .card-icon-header .content h2,
.customer-portal .c-dashboard .card.bit-card .card-icon-header .content h3,
.customer-portal .c-dashboard .card.bit-card .card-icon-header .content h4,
.customer-portal .c-dashboard .card.bit-card .card-icon-header .content h5,
.customer-portal .c-dashboard .card.bit-card .card-icon-header .content h6 {
    font-size: 1rem !important;
    font-weight: 700 !important;
}

/* Small inline icon tile for /c/ pages (alert headings, list markers) —
   the 28px cut of .c-page-glyph */
.c-icon-tile {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    color: #fff !important;
    font-size: 0.85rem;
    line-height: 1;
    background: linear-gradient(135deg, #2674a6, #112a54);
    box-shadow: 0 4px 12px rgba(38, 116, 166, 0.4);
}
.c-icon-tile i,
.c-icon-tile .bi {
    color: #fff !important;
}

/* Wraps [glyph][title/subtitle] so the text column stacks tight beside the box */
.c-page-head {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.c-page-head .c-page-head-text {
    min-width: 0;
}
.c-page-head .c-page-head-text > * {
    margin-bottom: 0;
}