/* _content/ISI85.InfoMart.WebApp/Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================
   MainLayout.razor.css
   — Cleaned & de-duplicated —
   ============================ */

/* ---- Theme variables (scope to this component & descendants) ---- */
:host[b-3udoaydp5x], .page[b-3udoaydp5x] {
    /* palette */
    --brand-red: #d3343a;
    --ink: #22313a;
    --muted: #66768a;
    /* surfaces */
    --content-bg: #ffffff;
    --content-card: #ffffff;
    --card: #eceff1;
    
    /* strap & accent gradients */
    --strap-grad: linear-gradient(90deg,#d3343a 0%, #a90d1a 65%, #7a0b12 100%);
    --accent-grad: linear-gradient(90deg,#d3343a 0%, #a90d1a 40%, #7a0b12 100%);
    /* matches your hero eyebrow color */
    --brand-accent: #f9c216;
}

/* ---- Page frame ---- */
.page[b-3udoaydp5x] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--content-bg);
}

.sidebar-host[b-3udoaydp5x] {
    position: sticky;
    top: 0;
    z-index: 2;
}

main[b-3udoaydp5x] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    color: var(--ink);
}

/* ---- Brand header (strap + ribbon + accent) ---- */
.brand-header[b-3udoaydp5x] {
    background: var(--strap-grad);
    color: #fff;
    border-bottom: 1px solid rgba(0,0,0,.06);
    margin-bottom: .5rem;
}

/* Red ribbon */
.brand-ribbon[b-3udoaydp5x] {
    display: grid;
    grid-template-columns: 44px 1fr 44px; /* toggle | title | spare */
    align-items: center;
    gap: .25rem;
    height: 2rem;
    line-height: 2rem;
    padding: 0 .5rem;
    background: var(--brand-red);
    color: #fff;
    font-weight: 600;
    letter-spacing: .03em;
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,.18);
}

/* Centered title that matches hero-eyebrow */
.brand-title[b-3udoaydp5x] {
    grid-column: 2;
    justify-self: center;
    text-align: center;
    font-family: "Oswald", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--brand-accent);
    font-weight: 500;
    font-size: clamp(12px, 1.05vw, 15px);
    line-height: 1.1;
    white-space: nowrap;
}

/* Thin multicolor accent under the ribbon */
.brand-accent[b-3udoaydp5x] {
    height: .25rem;
    margin: .25rem 0 .5rem;
    background: var(--accent-grad);
    border-radius: 2px;
    opacity: .95;
}

/* Toggle button on the left of the ribbon */
.sidebar-toggle[b-3udoaydp5x] {
    appearance: none;
    border: 0;
    background: transparent;
    width: 32px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: .5rem;
    color: #fff; /* white on the red ribbon */
}

    .sidebar-toggle:focus-visible[b-3udoaydp5x] {
        outline: 2px solid #fff8;
        outline-offset: 2px;
    }

/* Chevron triangle */
.tri[b-3udoaydp5x] {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    transition: border .18s ease;
}

.page.sidebar-collapsed .tri[b-3udoaydp5x] { /* ► when menu is hidden */
    border-left: 9px solid currentColor;
    border-right: 0;
}

.page.sidebar-expanded .tri[b-3udoaydp5x] { /* ◄ when menu is visible */
    border-right: 9px solid currentColor;
    border-left: 0;
}

/* a11y helper for visually hidden text */
.sr-only[b-3udoaydp5x] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ---- Content shell & body ---- */
.content-shell[b-3udoaydp5x] {
    background: var(--card);
    margin-top: 0px;
}

.content-body[b-3udoaydp5x] {
    background: var(--content-card);
    box-shadow: var(--shell-shadow);
    border-radius: 0px;
    min-height: calc(100vh - 40px - 64px); /* viewport minus header/footer */
    padding: 1rem 1.25rem 1.25rem;
    color: var(--ink);
}

    /* kill large top margins on first child */
    .content-body > :first-child[b-3udoaydp5x],
    .content-body h1:first-child[b-3udoaydp5x],
    .content-body h2:first-child[b-3udoaydp5x],
    .content-body .page-title:first-child[b-3udoaydp5x],
    .content-body .k-toolbar:first-child[b-3udoaydp5x],
    .content-body .k-grid:first-child[b-3udoaydp5x] {
        margin-top: 25px !important;
    }

/* ---- Footer ---- */
.site-footer[b-3udoaydp5x] {
    padding: .5rem .5rem .5rem;
    color: var(--muted);
    font-size: .9rem;
}

.footer-inner[b-3udoaydp5x] {
    display: inline-flex;
    gap: .5rem;
    align-items: baseline;
}

.sep[b-3udoaydp5x] {
    opacity: .5;
}

.version[b-3udoaydp5x] {
    opacity: .7;
}

/* ---- Home hero helpers (optional, used by your Home page blocks) ---- */
.home-hero[b-3udoaydp5x] {
    position: relative;
    border: 1px solid #e8e9ec;
    border-radius: .75rem;
    background: #fff;
}

    .home-hero[b-3udoaydp5x]::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 6px;
        background: #d33;
        border-top-left-radius: .75rem;
        border-top-right-radius: .75rem;
    }

.hero-logo[b-3udoaydp5x] {
    width: 120px;
    height: auto;
    object-fit: contain;
}

.hero-graphic[b-3udoaydp5x] {
    max-width: 340px;
    height: auto;
    margin-left: auto;
}

.version-pill[b-3udoaydp5x] {
    background: rgba(211, 51, 51, .1);
    color: #000 !important;
    border: 1px solid rgba(211, 51, 51, .35);
    font-weight: 600;
}

/* quick links */
.ql-card[b-3udoaydp5x] {
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    border-radius: .75rem;
}

    .ql-card:hover[b-3udoaydp5x] {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(0,0,0,.06);
    }

    .ql-card .card-body[b-3udoaydp5x] {
        padding: 1rem;
    }

.ql-icon[b-3udoaydp5x] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    border-radius: 50%;
    background: #f4f6f8;
    color: #333;
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
    .brand-ribbon[b-3udoaydp5x] {
        font-size: .8rem;
        padding: 0 .4rem;
    }
}

@media (max-width: 768px) {
    .hero-graphic[b-3udoaydp5x] {
        max-width: 100%;
    }
}

/* Two-column layout on desktop, collapsible rail */
@media (min-width: 641px) {
    .page[b-3udoaydp5x] {
        flex-direction: row;
        --rail-w: 260px; /* expanded width */
        --rail-w-collapsed: 56px; /* collapsed width (tablet) */
    }

        .page > .sidebar-host[b-3udoaydp5x] {
            flex: 0 0 var(--rail-w);
            width: var(--rail-w);
            min-width: var(--rail-w);
            height: 100vh;
            overflow-y: auto;
            position: sticky;
            top: 0;
            border-right: 1px solid #e3e6eb;
            transition: width .22s ease;
        }        

        .page.sidebar-collapsed > .sidebar-host[b-3udoaydp5x] {
            flex-basis: 0 !important;
            width: 0 !important;
            min-width: 0 !important;
            border-right: 0 !important; /* remove the seam */
        }

        /* hide internals so nothing peeks out or grabs focus */
        .page.sidebar-collapsed > .sidebar-host *[b-3udoaydp5x] {
            visibility: hidden;
            pointer-events: none;
        }
}

/* Fully hide rail on large screens when collapsed */
@media (min-width: 1025px) {
    .page.sidebar-collapsed > .sidebar-host[b-3udoaydp5x] {
        flex-basis: 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        border-right: 0 !important;
    }

        .page.sidebar-collapsed > .sidebar-host *[b-3udoaydp5x] {
            visibility: hidden;
            pointer-events: none;
        }
}
/* _content/ISI85.InfoMart.WebApp/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-g0oxzd57ky] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.sidebar .nav-link[b-g0oxzd57ky] {
    padding: .25rem .5rem;
    border-radius: .25rem;
}

    .sidebar .nav-link.active[b-g0oxzd57ky] {
        font-weight: 600;
        background: rgba(0,0,0,.05);
    }

.nav-section[b-g0oxzd57ky] {
    margin-bottom: 0rem;
}

.nav-section-btn[b-g0oxzd57ky] {
    background: transparent;
    border: 0;
    padding: .4rem .5rem;
    font-weight: 600;
    width: 100%;
}

.nav-link-sm[b-g0oxzd57ky] {
    font-size: .92rem;
}


.isicopy[b-g0oxzd57ky] {
    padding-top: 25px;
    position: relative;
    padding-left: 20px;
    justify-content: center;
    font-size: 0.9rem;
}

.isiversion[b-g0oxzd57ky] {
    color: gray;
    font-size: 0.5rem;
}

.navbar-toggler:checked[b-g0oxzd57ky] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-g0oxzd57ky] {
    /*height: 3.5rem;*/
    /*background-color: rgba(219, 51, 58, 1.0) !important;*/
}

.navbar-brand[b-g0oxzd57ky] {
    font-size: 1.1rem;
}

.bi[b-g0oxzd57ky] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-g0oxzd57ky] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='DarkSlateGray' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-g0oxzd57ky] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='DarkSlateGray' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-dash-square-fill-nav-menu[b-g0oxzd57ky] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='DarkSlateGray' class='bi bi-dash-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm2.5 7.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-g0oxzd57ky] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='DarkSlateGray' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-g0oxzd57ky] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='DarkSlateGray' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-g0oxzd57ky] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='DarkSlateGray' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-g0oxzd57ky] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='DarkSlateGray' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-g0oxzd57ky] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='DarkSlateGray' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-g0oxzd57ky] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='DarkSlateGray' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-g0oxzd57ky] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-g0oxzd57ky] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-g0oxzd57ky] {
        padding-bottom: 1rem;
    }

    .nav-item[b-g0oxzd57ky]  .nav-link {
        color: #151d21;
        background: none;
        border: none;
        border-radius: 0px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

    .nav-item[b-g0oxzd57ky]  a.active {
        background-color: rgba(255,255,255,0.37);
        color: #45606d;
    }

    .nav-item[b-g0oxzd57ky]  .nav-link:hover {
        background-color: rgba(255,255,255,0.1);
        color: #45606d;
    }

.nav-scrollable[b-g0oxzd57ky] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 3.5rem); /* keep what fits your header */
    overflow-y: auto;
}

.navbar-toggler:checked ~ .nav-scrollable[b-g0oxzd57ky] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-g0oxzd57ky] {
        display: none;
    }

    .nav-scrollable[b-g0oxzd57ky] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* === Light sidebar reset (match “old look”) === */
.sidebar[b-g0oxzd57ky] {
    background: #ffffff !important; /* kill the gradient */
    color: #2b3a42;
}

    /* filter box */
    .sidebar .form-control[b-g0oxzd57ky] {
        background: #f7f9fc;
        color: #2b3a42;
        border: 1px solid #dde3ea;
    }

        .sidebar .form-control[b-g0oxzd57ky]::placeholder {
            color: #8a97a3;
        }

/* section headers */
.nav-section-btn[b-g0oxzd57ky] {
    color: #0f2233;
    background: #f5f7fa;
    border: 1px solid #e6edf3;
    border-radius: 0px;
    padding: .45rem .6rem;
    font-weight: 700;
}

/* remove left border from collapses in light theme */
.nav-section .collapse[b-g0oxzd57ky] {
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
}

/* items */
.nav-item[b-g0oxzd57ky] {
    font-size: .9rem;
    padding-bottom: .5rem;
}

    .nav-item:first-of-type[b-g0oxzd57ky] {
        padding-top: .75rem;
    }

    .nav-item:last-of-type[b-g0oxzd57ky] {
        padding-bottom: 1rem;
    }

    /* Blazor NavLink */
    .nav-item[b-g0oxzd57ky]  .nav-link {
        color: #314b57 !important;
        background: none;
        border: none;
        border-radius: 0px;
        height: 2.5rem;
        line-height: 2.5rem;
        display: flex;
        align-items: center;
        width: 100%;
    }

        .nav-item[b-g0oxzd57ky]  .nav-link:hover {
            background: #f3f6fb;
            color: #0f2233 !important;
        }

    .nav-item[b-g0oxzd57ky]  a.active {
        /* subtle brand accent similar to your old site */
        background: #fce9ec;
        color: #8a1f28 !important;
        box-shadow: inset 3px 0 0 #db333a; /* red left bar */
        font-weight: 600;
    }

/* icons: use the original colors, no inversion */
.bi[b-g0oxzd57ky] {
    filter: none !important;
}

/* footer copy */
.isicopy[b-g0oxzd57ky] {
    color: #8a97a3;
}

.isiversion[b-g0oxzd57ky] {
    color: #a6b2bd;
    font-size: .55rem;
}

/* Fill the left rail to the bottom of the viewport */
.sidebar[b-g0oxzd57ky] {
    /* if you have no fixed header: */
    min-height: 100dvh; /* use dynamic vh for desktop + mobile   */
    /* if you DO have a fixed top row, use this instead:
  --topbar-h: 3.5rem;
  min-height: calc(100dvh - var(--topbar-h));
  */
}

/* Keep the rail visible when you scroll short pages */
@media (min-width:641px) {
    .sidebar[b-g0oxzd57ky] {
        position: sticky;
        top: 0;
    }
}

/* Make the main app/page background white so nothing shows under the rail */
html[b-g0oxzd57ky], body[b-g0oxzd57ky] {
    background: #fff !important;
}

/* (optional) if your layout has a content wrapper, keep it white too */
.main[b-g0oxzd57ky], .page[b-g0oxzd57ky], .content[b-g0oxzd57ky], .app-content[b-g0oxzd57ky] {
    background: #fff;
}

/* Push this block to the bottom and give a subtle divider */
.nav-user-block[b-g0oxzd57ky] {
    margin-top: auto;
    padding-top: 0rem;
    border-top: 1px solid var(--sidebar-border);
}

/* Layout the rail so the logo stays fixed and the menu scrolls */
.sidebar[b-g0oxzd57ky] {
    display: flex;
    flex-direction: column;
    height: 100vh; /* full-height rail */
    overflow: hidden; /* prevent double scrollbars */
}

/* Brand block at the very top of the rail */
.rail-brand[b-g0oxzd57ky] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: left;
    border-bottom: 1px solid var(--sidebar-border);
    padding-bottom: 8px;
    padding-left: 10px;
}

/* Logo sizing */
.logo-img[b-g0oxzd57ky] {
    max-width: 170px; /* tweak to taste */
    height: auto;
    display: block;
    /* optional soft lift */
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}

/* Scrollable part (filter + sections) */
.nav-scrollable[b-g0oxzd57ky] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-top: 0rem; /* space below logo */
}

/* home button layout */
.nav-home-btn[b-g0oxzd57ky] {
    display: flex;
    align-items: center; /* vertical centering */
    gap: .5rem; /* space between icon/text */
}

    /* make the sprite icon sit nicely */
    .nav-home-btn .bi[b-g0oxzd57ky] {
        width: 1.15rem;
        height: 1.15rem;
        background-size: contain;
        margin: 0;
        top: 0; /* undo any previous offset */
    }


/* Highlight the Home section button when at "/" */
.nav-section-btn.active[b-g0oxzd57ky] {
    background: #fce9ec;
    color: #8a1f28;
    box-shadow: inset 3px 0 0 #db333a; /* same red left bar you use elsewhere */
}


/* Make the whole button align its contents */
.nav-section-btn[b-g0oxzd57ky] {
    display: flex;
    align-items: center;
    gap: .5rem; /* spacing between icon and text */
}

/* Fixed-size icon box so emoji & BI align identically */
.nav-icon-wrap[b-g0oxzd57ky] {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex: 0 0 auto; /* don't let it stretch */
}

    /* BI glyph sizing and baseline fix */
    .nav-icon-wrap .bi[b-g0oxzd57ky] {
        font-size: 1rem;
        line-height: 1;
        vertical-align: middle; /* smooth baseline */
    }

    /* Emoji sizing matches BI glyph visually */
    .nav-icon-wrap.nav-emoji[b-g0oxzd57ky] {
        font-size: 1.05rem; /* tiny bump so they feel the same size */
        line-height: 1;
    }


/* Make every section button a flex row */
.sidebar .nav-section-btn[b-g0oxzd57ky] {
    display: flex !important;
    align-items: center !important;
    gap: .5rem; /* space between icon and text */
}

    /* The caret on the right inside a flex row */
    .sidebar .nav-section-btn .float-end[b-g0oxzd57ky] {
        margin-left: auto !important;
        float: none !important;
    }

/* Fixed-size icon box so all icons align identically */
.sidebar .nav-icon-wrap[b-g0oxzd57ky] {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex: 0 0 1.25rem; /* don't stretch */
}

    /* Bootstrap Icons: make the pseudo-element block and nudge up a tad */
    .sidebar .nav-icon-wrap .bi[b-g0oxzd57ky] {
        font-size: 1rem;
        line-height: 1;
        display: block; /* ensures the ::before is block-level */
        position: relative;
        top: -1px; /* <— tiny vertical tweak to match emoji */
    }

    /* Emoji: small size bump so they feel the same weight as BI */
    .sidebar .nav-icon-wrap.nav-emoji[b-g0oxzd57ky] {
        font-size: 1.05rem;
        line-height: 1;
    }


/* Make the whole button a tidy flex row */
.sidebar .nav-section-btn[b-g0oxzd57ky] {
    display: flex !important;
    align-items: center !important;
    gap: .5rem; /* consistent spacing after icon */
}

    /* The right caret in a flex row */
    .sidebar .nav-section-btn .float-end[b-g0oxzd57ky] {
        margin-left: auto !important;
        float: none !important;
    }

/* The icon itself is the single flex item with fixed width */
.sidebar .nav-icon[b-g0oxzd57ky] {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem; /* lock the width so text starts at same x */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

    /* Bootstrap Icons: tiny nudge so they look centered; keep uniform size */
    .sidebar .nav-icon.bi[b-g0oxzd57ky] {
        font-size: 1rem;
        position: relative;
        top: 0px; /* visual centering; adjust -0..-2px if needed */        
    }

    /* Emoji: small size bump so optical weight matches BI */
    .sidebar .nav-icon.nav-emoji[b-g0oxzd57ky] {
        font-size: 1.05rem;
    }

/* fixed-size icon box */
.sidebar[b-g0oxzd57ky]  .nav-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

    /* override global .bi for the nav icon only */
    .sidebar[b-g0oxzd57ky]  .nav-icon.bi {
        margin: 0 !important;
        width: 1.25rem !important;
        height: 1.25rem !important;
        top: 0 !important;
        background: none !important;
        font-size: 1rem;
    }

    /* emoji sizing to match BI weight */
    .sidebar[b-g0oxzd57ky]  .nav-icon.nav-emoji {
        font-size: 1.05rem;
    }

/* (optional) keep these also “deep” if needed */
.sidebar[b-g0oxzd57ky]  .nav-section-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .sidebar[b-g0oxzd57ky]  .nav-section-btn .float-end {
        margin-left: auto;
        float: none;
    }

/* Ensure icons in the tools list line up exactly like customer sections */
.sidebar[b-g0oxzd57ky]  .nav-link .nav-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    position: relative;
    top: -1px; /* optical centering for BI glyphs */
}

    .sidebar[b-g0oxzd57ky]  .nav-link .nav-icon + span { /* text after icon */
        margin-left: .5rem;
    }


/* Base icon box (already in your CSS, shown here for context) */
.sidebar .nav-icon[b-g0oxzd57ky] {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

    /* Reset any earlier global nudge */
    .sidebar .nav-icon .bi[b-g0oxzd57ky] {
        line-height: 1;
        display: block;
        transform: translateY(0);
    }

        /* People glyphs sit a hair high; nudge them down 1px */
        .sidebar .nav-icon .bi.bi-people[b-g0oxzd57ky],
        .sidebar .nav-icon .bi.bi-people-fill[b-g0oxzd57ky] {
            transform: translateY(1px);
        }

[b-g0oxzd57ky] .sidebar .nav-icon .bi.bi-people,
[b-g0oxzd57ky] .sidebar .nav-icon .bi.bi-people-fill {
    transform: translateY(1px);
}

.sidebar .nav-icon .emoji[b-g0oxzd57ky] {
    display: block;
    line-height: 1;
    font-size: 1.05rem; /* small visual weight bump */
    transform: translateY(1px); /* tiny vertical nudge so 👥 sits perfectly */
    font-family: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
}

.px-2[b-g0oxzd57ky] {
    padding-right: 0rem!important;
    padding-left: 0rem!important; 
}

.mb-2[b-g0oxzd57ky] {
    margin-bottom: 0rem !important;
}


/* _content/ISI85.InfoMart.WebApp/Components/Pages/Home.razor.rz.scp.css */
/* --- Portal hero --- */
:host[b-pj7jhexjnr],
.portal-hero-background[b-pj7jhexjnr] {
    --hero-accent: #f9c216; /* yellow accent */
    --hero-text: rgba(255,255,255,.95); /* main body text */
    --hero-title: #ffffff; /* title color */
}

.portal-hero-background[b-pj7jhexjnr] {
    /* change this path to your file(s) */
    --hero-img: url("/images/erp.jpg");
    position: relative;
    min-height: clamp(320px, 45vh, 560px);
    background: var(--hero-img) center 35% / cover no-repeat;
    border-radius: 0px;
    overflow: hidden;
    /* subtle border to match your light theme */
    border: 0px solid #e6edf3;
}

    /* dark left-to-right tint so white text is readable */
    .portal-hero[b-pj7jhexjnr]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.40) 45%, rgba(0,0,0,.15) 70%, rgba(0,0,0,0) 100% );
    }

/* stack content above the overlay */
.portal-hero__inner[b-pj7jhexjnr] {
    position: relative;
    z-index: 1;
    padding: 2.25rem 1.25rem;
}

/* Right-hand card */
.portal-hero-card[b-pj7jhexjnr] {
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(120%) blur(3px);
    border-radius: 10px;
    padding: 1rem 1rem;
}

/* Adjust image crop for narrow screens */
@media (max-width: 768px) {
    .portal-hero[b-pj7jhexjnr] {
        min-height: clamp(320px, 55vh, 620px);
        background-position: center 20%;
    }

        .portal-hero[b-pj7jhexjnr]::before {
            background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,0) 100%);
        }
}

.second-accent-home-spacer[b-pj7jhexjnr] {
    background-color: #48626e;
    min-height: clamp(320px, 45vh, 560px);
    margin-left: -32px;
    width: calc(100% + 68px);
}

.third-accent-home-spacer[b-pj7jhexjnr] {
    background-color: #d3343a;
    min-height: 100px;
    margin-left: -32px;
    width: calc(100% + 68px);
}


.hero-title :focus[b-pj7jhexjnr],
.home-hero :focus[b-pj7jhexjnr],
.hero-title h1[b-pj7jhexjnr],
.hero-title[b-pj7jhexjnr] {
    outline: none !important;
    box-shadow: none !important;
}

/* Eyebrow: "INTEGRATION FOCUS" */
.hero-eyebrow[b-pj7jhexjnr] {
    font-family: "Oswald", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--hero-accent, #f2b233); /* fallback added */
    font-weight: 500;
    font-size: clamp(18px, 1.05vw, 24px);
    line-height: 1.1;
    margin: 0 0 .35rem 0;
}

.hero-title[b-pj7jhexjnr] {
    font-family: "Bebas Neue", Impact, sans-serif;
    color: var(--hero-title, #fff);
    font-size: clamp(32px, 6.2vw, 60px);
    line-height: .92;
    margin: 0 0 .75rem 0;
    text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

.hero-copy[b-pj7jhexjnr] {
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: var(--hero-text, rgba(255,255,255,.95));
    font-size: clamp(16px, 1.35vw, 20px);
    line-height: 1.55;
    max-width: 60ch;
    margin: 0;
}


    /* Force three separate lines with consistent spacing */
    .hero-copy .hero-line[b-pj7jhexjnr] {
        display: block; /* each span becomes a line */
        margin-top: .25rem;
    }

        .hero-copy .hero-line:first-child[b-pj7jhexjnr] {
            margin-top: 0;
        }

.portal-hero-background :focus[b-pj7jhexjnr],
.portal-hero-background :focus-visible[b-pj7jhexjnr],
.portal-hero-background :focus-within[b-pj7jhexjnr] {
    outline: 0 !important;
    box-shadow: none !important;
}

.portal-hero-background[b-pj7jhexjnr]{
    margin-top: 0px;
}

/* Band that holds the cloud */
.home-cloud[b-pj7jhexjnr] {
    background: #48626e;
    /* keep your full-bleed trick on the band, not the stage */
    margin-left: -32px;
    width: calc(100% + 68px);
    padding: 16px 0 32px;
}

/* The cloud stage MUST be positioned & have height */
.word-cloud[b-pj7jhexjnr] {
    position: relative; /* <-- key */
    height: clamp(260px, 42vh, 420px);
    overflow: hidden; /* keep words inside the stage */
    user-select: none;
}

    /* Each word is absolutely positioned inside the stage */
    .word-cloud .w[b-pj7jhexjnr] {
        position: absolute; /* <-- key */
        white-space: nowrap;
        font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        font-weight: 700;
        line-height: 1;
        opacity: .95;
        pointer-events: none; /* purely visual */
    }